@telus-uds/system-theme-tokens 3.2.0 → 4.0.0

package/build/esm/components.js

@@ -0,0 +1,2215 @@
+// Define the required components and their supported tokens
+export default {
+  Autocomplete: {
+    color: 'color',
+    maxHeight: 'size',
+    overflowY: 'overflow'
+  },
+  ActionCard: {
+    actionIcon: 'icon',
+    actionIconColor: 'color',
+    actionIconMarginBottom: 'size',
+    actionIconMarginLeft: 'size',
+    actionIconMarginRight: 'size',
+    actionIconMarginTop: 'size',
+    actionIconTranslate: 'size',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    contentFontColor: 'color',
+    contentFontName: 'fontName',
+    contentFontSize: 'fontSize',
+    contentFontWeight: 'fontWeight',
+    contentLineHeight: 'lineHeight',
+    contentMarginBottom: 'size',
+    contentMarginLeft: 'size',
+    contentMarginRight: 'size',
+    contentMarginTop: 'size',
+    iconBackgroundColor: 'color',
+    iconColor: 'color',
+    iconMarginBottom: 'size',
+    iconMarginLeft: 'size',
+    iconMarginRight: 'size',
+    iconMarginTop: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    statusIcon: 'icon',
+    statusIconColor: 'color',
+    titleFontColor: 'color',
+    titleFontName: 'fontName',
+    titleFontSize: 'fontSize',
+    titleFontWeight: 'fontWeight',
+    titleLineHeight: 'lineHeight',
+    titleMarginBottom: 'size',
+    titleMarginLeft: 'size',
+    titleMarginRight: 'size',
+    titleMarginTop: 'size'
+  },
+  SplashButton: {
+    playIcon: 'icon',
+    playIconColor: 'color',
+    buttonContentBackground: 'color',
+    buttonContentChildrenBackground: 'color'
+  },
+  SplashButtonWithDetails: {
+    playIcon: 'icon',
+    playIconColor: 'color',
+    buttonContentBackground: 'color',
+    buttonContentChildrenBackground: 'color',
+    buttonBackground: 'color',
+    buttonBorderColor: 'color',
+    buttonRadius: 'radius',
+    buttonLeftPosition: 'size',
+    buttonBottomPosition: 'size',
+    buttonMinHeight: 'size',
+    buttonPaddingLeft: 'size',
+    labelFontName: 'fontName',
+    labelFontWeight: 'fontWeight',
+    buttonPaddingRight: 'size',
+    detailsContainerPadding: 'size',
+    playIconContainerBackground: 'color'
+  },
+  VideoPickerThumbnail: {
+    splashButtonRadius: 'radius',
+    borderWidth: 'border',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    pressablePaddingVertical: 'size',
+    pressablePaddingHorizontal: 'size',
+    pressableBorderTopWidth: 'border',
+    pressableBorderTopColor: 'color',
+    pressablePaddingBottom: 'size',
+    titleColor: 'color',
+    subTitleColor: 'color',
+    outerBorderColor: 'color',
+    outerBorderGap: 'size',
+    outerBorderRadius: 'radius',
+    outerBorderWidth: 'border'
+  },
+  VideoPickerSlider: {
+    previousIcon: 'icon',
+    nextIcon: 'icon'
+  },
+  VideoPicker: {
+    framedMaxHeight: 'size',
+    framedContainerBackgroundColor: 'color',
+    framedContainerBorderWidth: 'border',
+    framedContainerBorderColor: 'color',
+    framedContainerBorderRadius: 'radius',
+    framedContainerPadding: 'size',
+    stackViewDividerColor: 'color'
+  },
+  Disclaimer: {
+    color: 'color',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight'
+  },
+  // TO DO: Create a separate Cell schema that includes all cell-related tokens.
+  FileUpload: {
+    buttonBackgroundColor: 'color',
+    buttonBorderColor: 'color',
+    buttonBorderRadius: 'radius',
+    buttonBorderWidth: 'border',
+    buttonTextColor: 'color',
+    buttonHeight: 'size',
+    buttonMinWidth: 'size',
+    buttonWidth: 'size',
+    notificationBackgroundColor: 'color',
+    notificationBorderColor: 'color',
+    notificationBorderRadius: 'radius',
+    notificationTextColor: 'color',
+    notificationDismissButtonGap: 'size',
+    notificationDismissIcon: 'icon',
+    notificationDismissIconColor: 'color',
+    notificationIcon: 'icon',
+    notificationIconColor: 'color',
+    notificationIconGap: 'size',
+    notificationIconSize: 'size'
+  },
+  Table: {
+    rowHoverBackgroundColor: 'color',
+    cellMinWidth: 'size',
+    tablePaddingBottom: 'size',
+    cellBoxShadowColor: 'color',
+    // sharedStyles, box-shadow
+    cellBackground: 'color',
+    display: 'display',
+    cellStickyShadow: 'shadow',
+    cellPaddingTop: 'size',
+    // sharedStyles padding.
+    cellPaddingRight: 'size',
+    cellPaddingLeft: 'size',
+    cellPaddingBottom: 'size',
+    fontWeight: 'fontWeight',
+    fontName: 'fontName',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight',
+    stickyBackgroundColor: 'color',
+    fontColor: 'color',
+    borderColor: 'color',
+    borderWidth: 'border'
+  },
+  Image: {
+    borderRadius: 'radius'
+  },
+  Spinner: {
+    fullScreenOverLayBackground: 'color',
+    size: 'size',
+    thickness: 'border'
+  },
+  Status: {
+    backgroundColor: 'color',
+    backgroundGradient: 'gradient',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    fontName: 'fontName',
+    fontSize: 'fontSize',
+    fontWeight: 'fontWeight',
+    icon: 'icon',
+    iconColor: 'color',
+    iconGradient: 'gradient',
+    marginLeft: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    textColor: 'color',
+    textLineHeight: 'lineHeight',
+    iconSize: 'size',
+    iconPaddingTop: 'size'
+  },
+  Video: {
+    borderColor: 'color',
+    pauseIcon: 'icon',
+    replayIcon: 'icon',
+    playIcon: 'icon'
+  },
+  VideoMiddleControlButton: {
+    width: 'size',
+    height: 'size',
+    background: 'color',
+    iconColor: 'color'
+  },
+  VideoControlBar: {
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    height: 'size',
+    menuBottom: 'size',
+    menuRight: 'size',
+    menuMarginLeft: 'size',
+    captionsIcon: 'icon',
+    settingsIcon: 'icon',
+    minimizeIcon: 'icon',
+    maximizeIcon: 'icon'
+  },
+  VideoButton: {
+    color: 'color'
+  },
+  VideoMenu: {
+    padding: 'size',
+    background: 'color',
+    checkMarkWidth: 'size',
+    checkMarkHeight: 'size',
+    checkMarkSelectedColor: 'color',
+    checkMarkHoverColor: 'color',
+    checkMarkFocusColor: 'color',
+    checkMarkUnselectedColor: 'color',
+    checkMarkIcon: 'icon'
+  },
+  VideoProgressBar: {
+    thumbHeight: 'size',
+    thumbWidth: 'size',
+    thumbBackground: 'color',
+    timestampMarginLeft: 'size',
+    timestampMarginRight: 'size',
+    remainingTimestampMarginLeft: 'size',
+    remainingTimestampMarginRight: 'size',
+    trackGradientStart: 'color',
+    trackGradientEnd: 'color',
+    rangeBackground: 'color'
+  },
+  VideoVolumeSlider: {
+    marginLeft: 'size',
+    marginRight: 'size',
+    thumbHeight: 'size',
+    thumbWidth: 'size',
+    thumbBackground: 'color',
+    trackGradientStart: 'color',
+    trackGradientEnd: 'color',
+    rangeBackground: 'color',
+    mutedIcon: 'icon',
+    unmutedIcon: 'icon'
+  },
+  Callout: {
+    background: 'color',
+    gap: 'size',
+    borderRadius: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    color: 'color'
+  },
+  FootnoteLink: {
+    lineHeight: 'lineHeight',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    color: 'color',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize'
+  },
+  WaffleGrid: {
+    rowBorderWidth: 'border',
+    itemBorderColor: 'color',
+    itemPadding: 'size',
+    rowSize: 'integer'
+  },
+  QuantitySelector: {
+    inputBorderColor: 'color',
+    inputBackgroundColor: 'color',
+    inputBorderWidth: 'border',
+    padding: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    textColor: 'color',
+    inputWidth: 'size',
+    lineHeight: 'lineHeight',
+    fontSize: 'fontSize'
+  },
+  QuantitySelectorSideButton: {
+    borderRadius: 'radius',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
+    padding: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    iconColor: 'color',
+    iconSize: 'size',
+    icon: 'icon',
+    backgroundColor: 'color'
+  },
+  Footnote: {
+    footnoteBackground: 'color',
+    footnoteBorderTopSizeMd: 'border',
+    footnoteBorderColorMd: 'color',
+    headerMargin: 'size',
+    footnoteBodyBackground: 'color',
+    footnoteBodyPaddingLeft: 'size',
+    footnoteBodyPaddingRight: 'size',
+    footnoteBodyPaddingTop: 'size',
+    footnoteBodyPaddingBottom: 'size',
+    footnoteHeaderPaddingLeft: 'size',
+    footnoteHeaderPaddingRight: 'size',
+    footnoteHeaderPaddingTop: 'size',
+    footnoteHeaderPaddingBottom: 'size',
+    listPaddingLeft: 'size',
+    listItemMarkerFontSize: 'size',
+    listItemMarkerLineHeight: 'lineHeight',
+    headerLineHeight: 'lineHeight',
+    headerFontSize: 'size',
+    headerFontName: 'fontName',
+    headerFontWeight: 'fontWeight',
+    listItemColor: 'color',
+    listItemFontSize: 'size',
+    listItemLineHeight: 'lineHeight',
+    listItemPaddingLeft: 'size',
+    listItemFontName: 'fontName',
+    listItemFontWeight: 'fontWeight',
+    closeButtonBorderSize: 'border',
+    closeButtonBorderColor: 'color',
+    closeButtonBackgroundColor: 'color',
+    closeButtonHeight: 'size',
+    closeButtonMarginTop: 'size',
+    closeButtonMarginLeft: 'size',
+    closeButtonMarginRight: 'size',
+    closeButtonMarginBottom: 'size',
+    closeButtonWidth: 'size',
+    closeButtonIconSize: 'size',
+    closeIcon: 'icon'
+  },
+  // Speical note: The reasoning behind having duplicate fontName/fontWeight tokens is due to the validation of themes, You'll recieve an error when trying to adjust 'fontWeight' without a paired 'fontName' token.
+  PriceLockup: {
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    footnoteMarginTop: 'size',
+    footnoteGap: 'size',
+    bottomTextMarginTop: 'size',
+    priceMarginBottom: 'size',
+    bottomLinksMarginLeft: 'size',
+    topTextMarginBottom: 'size',
+    strikeThroughHeight: 'size',
+    strikeThroughColor: 'color',
+    fontColor: 'color',
+    dividerColor: 'color',
+    topTextFontSize: 'fontSize',
+    strikeThroughPosition: 'size',
+    topTextLineHeight: 'lineHeight',
+    currencySymbolFontSize: 'fontSize',
+    currencySymbolLineHeight: 'lineHeight',
+    currencySymbolFontName: 'fontName',
+    currencySymbolFontWeight: 'fontWeight',
+    currencySymbolPaddingTop: 'size',
+    amountFontSize: 'fontSize',
+    amountLineHeight: 'lineHeight',
+    amountLetterSpacing: 'letterSpacing',
+    amountFontWeight: 'fontWeight',
+    amountFontName: 'fontName',
+    centsFontSize: 'fontSize',
+    centsLineHeight: 'lineHeight',
+    centsFontName: 'fontName',
+    centsFontWeight: 'fontWeight',
+    centsPaddingTop: 'size',
+    topTextFontName: 'fontName',
+    topTextFontWeight: 'fontWeight',
+    rateFontSize: 'fontSize',
+    rateLineHeight: 'lineHeight',
+    rateFontName: 'fontName',
+    rateFontWeight: 'fontWeight',
+    bottomTextFontSize: 'fontSize',
+    bottomTextLineHeight: 'lineHeight',
+    footnoteLinkColor: 'color',
+    footnoteLinkFontName: 'fontName',
+    footnoteLinkFontWeight: 'fontWeight',
+    footnoteLinkFontSize: 'fontSize',
+    footnoteLinkLineHeight: 'lineHeight',
+    alignItemsText: 'flexAlign'
+  },
+  ProductCard: {
+    borderStyle: 'borderStyle',
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    paddingHorizontal: 'size',
+    paddingVertical: 'size',
+    selectedButtonIcon: 'icon'
+  },
+  ActivityIndicator: {
+    size: 'size',
+    thickness: 'border',
+    color: 'color'
+  },
+  Badge: {
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    fontName: 'fontName',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    color: 'color',
+    gradient: 'gradient',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size'
+  },
+  BlockQuote: {
+    color: 'color',
+    backgroundGradient: 'gradient',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    marginBottom: 'size',
+    width: 'size',
+    titleHeadingFontSize: 'fontSize',
+    titleHeadingFontName: 'fontName',
+    titleHeadingFontWeight: 'fontWeight',
+    titleHeadingLineHeight: 'lineHeight',
+    titleFontSize: 'fontSize',
+    titleFontName: 'fontName',
+    titleFontWeight: 'fontWeight',
+    titleLineHeight: 'lineHeight',
+    linkFontSize: 'fontSize',
+    linkFontName: 'fontName',
+    linkFontWeight: 'fontWeight',
+    linkLineHeight: 'lineHeight'
+  },
+  Box: {
+    backgroundColor: 'color',
+    gradient: 'gradient',
+    borderWidth: 'border',
+    borderColor: 'color',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius'
+  },
+  Button: {
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    shadow: 'shadow',
+    fontSize: 'fontSize',
+    color: 'color',
+    lineHeight: 'lineHeight',
+    textAlign: 'flexJustifyContent',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    backgroundColor: 'color',
+    opacity: 'opacity',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    width: 'size',
+    height: 'size',
+    minWidth: 'size',
+    iconSize: 'size',
+    iconSpace: 'integer',
+    icon: 'icon',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    outerBackgroundColor: 'color',
+    textLine: 'textLine',
+    textLineStyle: 'textLineStyle'
+  },
+  ButtonDropdown: {
+    icon: 'icon',
+    iconPosition: 'position',
+    iconSpace: 'integer',
+    iconSize: 'size',
+    iconColor: 'color',
+    iconPadding: 'size',
+    iconAlignSelf: 'flexAlign',
+    iconTranslateX: 'size',
+    iconTranslateY: 'size',
+    iconBackground: 'color',
+    iconBorderRadius: 'radius',
+    // These are duplicated Button tokens. TODO: consider token sets to reduce duplication.
+    // https://github.com/telus/universal-design-system/issues/782
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    shadow: 'shadow',
+    fontSize: 'fontSize',
+    color: 'color',
+    dividerColor: 'color',
+    subtitleColor: 'color',
+    lineHeight: 'lineHeight',
+    textAlign: 'flexJustifyContent',
+    alignSelf: 'flexAlign',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    backgroundColor: 'color',
+    opacity: 'opacity',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    width: 'size',
+    minWidth: 'size',
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    outerBackgroundColor: 'color'
+  },
+  ButtonGroup: {
+    space: 'integer',
+    fieldSpace: 'integer',
+    direction: 'direction',
+    alignItems: 'flexAlign',
+    justifyContent: 'flexJustifyContent',
+    flexGrow: 'integer',
+    flexShrink: 'integer',
+    backgroundColor: 'color',
+    borderRadius: 'radius',
+    padding: 'size',
+    gap: 'size'
+  },
+  ButtonGroupItem: {
+    // These are duplicated Button tokens. TODO: consider token sets to reduce duplication.
+    // https://github.com/telus/universal-design-system/issues/782
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    shadow: 'shadow',
+    fontSize: 'fontSize',
+    color: 'color',
+    lineHeight: 'lineHeight',
+    textAlign: 'flexJustifyContent',
+    alignSelf: 'flexAlign',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    backgroundColor: 'color',
+    opacity: 'opacity',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    height: 'size',
+    width: 'size',
+    minWidth: 'size',
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    outerBackgroundColor: 'color',
+    iconSpace: 'integer',
+    iconSize: 'size'
+  },
+  Card: {
+    flex: 'integer',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    gradient: 'gradient',
+    backgroundGradient: 'gradient',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    minWidth: 'size',
+    shadow: 'shadow',
+    contentAlignItems: 'flexAlign',
+    contentJustifyContent: 'flexJustifyContent',
+    contentFlexGrow: 'integer',
+    contentFlexShrink: 'integer',
+    // Tokens of the checkbox or radio input
+    inputBackgroundColor: 'color',
+    iconBackgroundColor: 'color',
+    icon: 'icon',
+    iconColor: 'color',
+    inputBorderRadius: 'radius',
+    inputHeight: 'size',
+    inputWidth: 'size',
+    iconSize: 'size',
+    inputShadow: 'shadow',
+    inputBorderWidth: 'border',
+    inputBorderColor: 'color',
+    // tokens for Autocomplete
+    maxHeight: 'size',
+    overflowY: 'overflow'
+  },
+  CardGroup: {
+    // Layout
+    direction: 'direction',
+    space: 'integer',
+    // Fieldset
+    fieldSpace: 'integer',
+    // Border for error feedback
+    showIcon: 'show',
+    outlineWidth: 'border',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    outlineOffset: 'size',
+    // For padding of the card
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size'
+  },
+  PreviewCard: {
+    flex: 'integer',
+    outerBorderColor: 'color',
+    outerBorderGap: 'size',
+    outerBorderWidth: 'size',
+    backgroundColor: 'color',
+    separatorColor: 'color',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size'
+  },
+  Carousel: {
+    backgroundColor: 'color',
+    nextIcon: 'icon',
+    playIcon: 'icon',
+    pauseIcon: 'icon',
+    previousIcon: 'icon',
+    iconBackgroundColor: 'color',
+    showPreviousNextNavigation: 'show',
+    showPanelNavigation: 'show',
+    showPanelTabs: 'show',
+    spaceBetweenSlideAndPreviousNextNavigation: 'size',
+    spaceBetweenSlideAndPanelNavigation: 'size',
+    stepTrackerCurrentBackgroundColor: 'color'
+  },
+  CarouselThumbnail: {
+    alignItems: 'flexAlign',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    containerPaddingTop: 'size',
+    margin: 'size',
+    padding: 'size',
+    selectedBorderColor: 'color',
+    selectedBorderWidth: 'border',
+    size: 'size'
+  },
+  CarouselTabsPanelItem: {
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    borderBottomColor: 'color',
+    borderBottomWidth: 'border',
+    borderBottomStyle: 'borderStyle',
+    flex: 'integer',
+    alignItems: 'flexAlign',
+    justifyContent: 'flexJustifyContent',
+    color: 'color',
+    fontSize: 'fontSize',
+    fontScaleCap: 'fontSize',
+    lineHeight: 'lineHeight',
+    letterSpacing: 'letterSpacing',
+    fontWeight: 'fontWeight',
+    fontName: 'fontName'
+  },
+  Checkbox: {
+    containerBackgroundColor: 'color',
+    feedbackMarginBottom: 'size',
+    feedbackMarginTop: 'size',
+    feedbackPosition: 'position',
+    icon: 'icon',
+    iconBackgroundColor: 'color',
+    iconColor: 'color',
+    iconSize: 'size',
+    inputBackgroundColor: 'color',
+    inputBorderColor: 'color',
+    inputBorderRadius: 'radius',
+    inputBorderWidth: 'border',
+    inputHeight: 'size',
+    inputOutlineColor: 'color',
+    inputOutlineWidth: 'border',
+    inputShadow: 'shadow',
+    inputWidth: 'size',
+    labelColor: 'color',
+    labelFontName: 'fontName',
+    labelFontSize: 'fontSize',
+    labelFontWeight: 'fontWeight',
+    labelLineHeight: 'lineHeight',
+    labelMarginLeft: 'size',
+    inputOutlineOffset: 'size'
+  },
+  CheckboxCard: {
+    // Outer border
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    // Card
+    flex: 'integer',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    minWidth: 'size',
+    shadow: 'shadow',
+    contentAlignItems: 'flexAlign',
+    contentJustifyContent: 'flexJustifyContent',
+    contentFlexGrow: 'integer',
+    contentFlexShrink: 'integer',
+    // Checkbox
+    checkboxCheckedBackgroundColor: 'color',
+    checkboxCheckedSize: 'size',
+    checkboxInputBackgroundColor: 'color',
+    checkboxInputBorderColor: 'color',
+    checkboxInputBorderWidth: 'border',
+    checkboxInputOutlineColor: 'color',
+    checkboxInputOutlineWidth: 'border',
+    checkboxInputSize: 'size',
+    checkboxOuterBorderColor: 'color',
+    checkboxOuterBorderWidth: 'border',
+    checkboxOuterBorderGap: 'size',
+    // Title text - duplicates Typography variant { size: 'h3' }
+    fontSize: 'fontSize',
+    fontName: 'fontName',
+    lineHeight: 'lineHeight',
+    color: 'color',
+    letterSpacing: 'letterSpacing',
+    textTransform: 'textTransform',
+    fontWeight: 'fontWeight',
+    // Spacing
+    checkboxSpace: 'integer',
+    contentSpace: 'integer'
+  },
+  CheckboxCardGroup: {
+    // Layout
+    direction: 'direction',
+    space: 'integer',
+    // Fieldset
+    fieldSpace: 'integer',
+    // Border for error feedback
+    showIcon: 'show',
+    outlineWidth: 'border',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    outlineOffset: 'size'
+  },
+  ChevronLink: {
+    fontSize: 'fontSize',
+    color: 'color',
+    outerBorderColor: 'color',
+    leftIcon: 'icon',
+    rightIcon: 'icon',
+    iconDisplace: 'size',
+    iconSize: 'size',
+    iconSpace: 'integer',
+    textLine: 'textLine',
+    blockLineHeight: 'lineHeight'
+  },
+  CheckboxGroup: {
+    space: 'integer',
+    fieldSpace: 'integer',
+    showIcon: 'show',
+    outlineWidth: 'border',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    outlineOffset: 'size'
+  },
+  ColourToggle: {
+    space: 'integer',
+    shadow: 'shadow',
+    // general Border Bubble
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    // Border Bubble
+    bubbleBorderColor: 'color',
+    bubbleBorderWidth: 'border',
+    bubbleBorderRadius: 'radius',
+    // Outer Colour Bubble
+    outerBubbleContentAlignItems: 'flexAlign',
+    outerBubbleJustifyContent: 'flexJustifyContent',
+    outerBubbleHeight: 'size',
+    outerBubbleWidth: 'size',
+    // Inner Colour Bubble
+    innerBubbleHeight: 'size',
+    innerBubbleWidth: 'size',
+    innerBubbleBorderRadius: 'radius'
+  },
+  Divider: {
+    width: 'size',
+    color: 'color'
+  },
+  DownloadApp: {
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderGap: 'size',
+    borderRadius: 'radius',
+    padding: 'size',
+    androidENIcon: 'icon',
+    androidFRIcon: 'icon',
+    iosENIcon: 'icon',
+    iosFRIcon: 'icon'
+  },
+  DatePicker: {
+    calendarBackgroundColor: 'color',
+    calendarDayBlockedCalendarHoverBackground: 'color',
+    calendarDayBlockedCalendarHoverColor: 'color',
+    calendarDayDefaultBackgroundColor: 'color',
+    calendarDayDefaultBorder: 'border',
+    calendarDayDefaultBorderColor: 'color',
+    calendarDayDefaultCalendarDaySelectedHoverBackground: 'color',
+    calendarDayDefaultCalendarDaySelectedHoverBeforeBackground: 'color',
+    calendarDayDefaultCalendarDaySelectedHoverColor: 'color',
+    calendarDayDefaultColor: 'color',
+    calendarDayDefaultFontName: 'fontName',
+    calendarDayDefaultFontSize: 'fontSize',
+    calendarDayDefaultFontWeight: 'fontWeight',
+    calendarDaySelectedFocusBeforeBackground: 'color',
+    calendarDaySelectedHoverBackground: 'color',
+    calendarDaySelectedHoverBeforeBackground: 'color',
+    calendarDaySelectedHoverBeforeBorderColor: 'color',
+    calendarDaySelectedHoverBorderColor: 'color',
+    calendarDaySelectedHoverColor: 'color',
+    calendarDaySelectedDisabledBackground: 'color',
+    calendarDaySelectedDisabledColor: 'color',
+    calendarDaySelectedDisabledContentBackgroundColor: 'color',
+    calendarMonthCaptionColor: 'color',
+    calendarMonthCaptionFontName: 'fontName',
+    calendarMonthCaptionFontSize: 'fontSize',
+    calendarMonthCaptionFontWeight: 'fontWeight',
+    calendarMonthCaptionLineHeight: 'lineHeight',
+    calendarMonthCaptionPaddingBottom: 'size',
+    dateInputStrokeColor: 'color',
+    dayPickerWeekHeaderColor: 'color',
+    dayPickerWeekHeaderFontName: 'fontName',
+    dayPickerWeekHeaderFontWeight: 'fontWeight',
+    dayPickerWeekHeaderLineHeight: 'lineHeight',
+    dayPickerWeekHeaderSmall: 'fontSize',
+    hiddenInputFieldContainerHeight: 'size',
+    hiddenInputFieldContainerWidth: 'size',
+    dayPickerNavigationButtonPadding: 'size',
+    invalidInputMixin: 'color',
+    nextIcon: 'icon',
+    previousIcon: 'icon',
+    singleDatePickerBorderColor: 'color',
+    singleDatePickerLeftRight: 'size',
+    singleDatePickerPaddingTopBottom: 'size',
+    singleDatePickerRadius: 'radius',
+    validInputMixin: 'color'
+  },
+  ExpandCollapse: {
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderStyle: 'borderStyle'
+  },
+  ExpandCollapseMini: {
+    borderWidth: 'border'
+  },
+  ExpandCollapseControl: {
+    icon: 'icon',
+    iconColor: 'color',
+    iconSize: 'size',
+    iconGap: 'size',
+    iconPaddingTop: 'size',
+    iconPosition: 'position',
+    verticalAlign: 'verticalAlign',
+    justifyContent: 'flexJustifyContent',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    borderWidth: 'border',
+    borderColor: 'color',
+    backgroundColor: 'color',
+    borderTopLeftRadius: 'radius',
+    borderBottomLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    textLine: 'textLine'
+  },
+  ExpandCollapseMiniControl: {
+    size: 'size',
+    icon: 'icon',
+    iconColor: 'color',
+    iconSize: 'size',
+    iconGap: 'size',
+    color: 'color',
+    iconPaddingTop: 'size',
+    iconPosition: 'position',
+    verticalAlign: 'verticalAlign',
+    justifyContent: 'flexJustifyContent',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    borderWidth: 'border',
+    borderColor: 'color',
+    textLine: 'textLine',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight'
+  },
+  ExpandCollapsePanel: {
+    expandDuration: 'duration',
+    collapseDuration: 'duration',
+    contentPaddingLeft: 'size',
+    contentPaddingRight: 'size',
+    contentPaddingTop: 'size',
+    contentPaddingBottom: 'size',
+    marginBottom: 'size',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    expandDividerColor: 'color',
+    expandDividerWidth: 'size',
+    contentPanelBackgroundColor: 'color',
+    contentPanelPaddingLeft: 'size',
+    contentPanelPaddingRight: 'size',
+    contentPanelPaddingTop: 'size',
+    contentPanelPaddingBottom: 'size',
+    contentPanelBorderWidth: 'border',
+    contentPanelBorderColor: 'color',
+    contentPanelFontName: 'fontName',
+    contentPanelFontSize: 'fontSize',
+    contentPanelFontColor: 'color',
+    contentPanelFontWeight: 'fontWeight',
+    contentPanelLineHeight: 'lineHeight'
+  },
+  Feedback: {
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    space: 'integer',
+    color: 'color',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    lineHeight: 'lineHeight',
+    titleFontSize: 'fontSize',
+    contentFontSize: 'fontSize',
+    icon: 'icon',
+    iconSize: 'size',
+    iconColor: 'color',
+    iconGap: 'size'
+  },
+  Fieldset: {
+    outlineWidth: 'border',
+    outlineColor: 'color',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    paddingBottom: 'size',
+    paddingTop: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    outlineOffset: 'size'
+  },
+  HorizontalScrollButton: {
+    backgroundColor: 'color',
+    borderRadius: 'radius',
+    borderColor: 'color',
+    borderWidth: 'border',
+    iconColor: 'color',
+    iconSize: 'size',
+    iconScale: 'iconScale',
+    iconTranslateX: 'size',
+    iconTranslateY: 'size',
+    outerBorderWidth: 'border',
+    outerBorderColor: 'color',
+    outerBorderGap: 'size',
+    padding: 'size',
+    shadow: 'shadow'
+  },
+  Icon: {
+    size: 'size',
+    color: 'color',
+    backgroundColor: 'color',
+    borderRadius: 'radius',
+    padding: 'size',
+    scale: 'integer',
+    translateX: 'size',
+    translateY: 'size',
+    width: 'size',
+    paddingTop: 'size'
+  },
+  InputLabel: {
+    gap: 'size',
+    color: 'color',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight',
+    hintColor: 'color',
+    hintFontName: 'fontName',
+    hintFontWeight: 'fontWeight',
+    hintFontSize: 'fontSize',
+    hintLineHeight: 'lineHeight'
+  },
+  InputSupports: {
+    space: 'integer'
+  },
+  IconButton: {
+    icon: 'icon',
+    backgroundColor: 'color',
+    borderRadius: 'radius',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderColor: 'color',
+    borderWidth: 'border',
+    outerBorderWidth: 'border',
+    outerBorderColor: 'color',
+    outerBorderGap: 'size',
+    padding: 'size',
+    shadow: 'shadow',
+    iconColor: 'color',
+    iconSize: 'size',
+    iconScale: 'iconScale',
+    iconTranslateX: 'size',
+    iconTranslateY: 'size',
+    height: 'size',
+    width: 'size'
+  },
+  Link: {
+    color: 'color',
+    textLine: 'textLine',
+    textLineStyle: 'textLineStyle',
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    outerBorderOutline: 'borderStyle',
+    borderRadius: 'radius',
+    blockFontName: 'fontName',
+    blockFontWeight: 'fontWeight',
+    blockFontSize: 'fontSize',
+    blockLineHeight: 'lineHeight',
+    icon: 'icon',
+    iconSize: 'size',
+    iconSpace: 'integer',
+    iconTranslateX: 'size',
+    iconTranslateY: 'size',
+    alignSelf: 'flexAlign'
+  },
+  List: {
+    iconMarginTop: 'size',
+    itemFontWeight: 'fontWeight',
+    itemFontSize: 'fontSize',
+    itemLineHeight: 'lineHeight',
+    itemFontName: 'fontName',
+    interItemMargin: 'size',
+    interItemMarginWithDivider: 'size',
+    dividerColor: 'color',
+    dividerSize: 'border',
+    itemBulletContainerWidth: 'size',
+    itemBulletContainerAlign: 'textAlign',
+    itemBulletColor: 'color',
+    itemTextColor: 'color',
+    itemIconSize: 'size',
+    itemIconColor: 'color',
+    listGutter: 'size',
+    bulletIcon: 'icon'
+  },
+  Listbox: {
+    groupBorderRadius: 'radius',
+    groupBorderWidth: 'border',
+    groupFontSize: 'size',
+    groupFontName: 'fontName',
+    groupFontWeight: 'fontWeight',
+    groupColor: 'color',
+    groupBorderColor: 'color',
+    groupBackgroundColor: 'color',
+    groupPaddingTop: 'size',
+    groupPaddingBottom: 'size',
+    groupPaddingLeft: 'size',
+    groupPaddingRight: 'size',
+    groupIcon: 'icon',
+    itemDisplay: 'show',
+    itemFontName: 'fontName',
+    itemFontWeight: 'fontWeight',
+    itemFontSize: 'size',
+    itemPaddingTop: 'size',
+    itemPaddingBottom: 'size',
+    itemPaddingLeft: 'size',
+    itemPaddingRight: 'size',
+    itemColor: 'color',
+    itemBackgroundColor: 'color',
+    itemBorderLeftColor: 'color',
+    itemBorderLeftWidth: 'border',
+    itemBorderWidth: 'border',
+    itemTextDecoration: 'textLine',
+    itemOutline: 'border',
+    shadow: 'shadow',
+    itemBorderRightColor: 'color',
+    itemBorderBottomColor: 'color',
+    itemBorderTopColor: 'color',
+    itemBorderRightWidth: 'border',
+    itemBorderBottomWidth: 'border',
+    itemBorderTopWidth: 'border',
+    itemBorderRadius: 'radius',
+    minWidth: 'size',
+    minHeight: 'size',
+    itemHeight: 'size',
+    groupHeight: 'size',
+    lineHeight: 'lineHeight'
+  },
+  OrderedList: {
+    headerFontWeight: 'fontWeight',
+    headerFontName: 'fontName',
+    itemMarginTop: 'size',
+    itemPaddingTop: 'size',
+    itemBulletWidth: 'size',
+    itemBulletHeight: 'size',
+    itemBulletTextAlign: 'textAlign',
+    itemBulletContainerWidth: 'size',
+    interItemMargin: 'size',
+    listGutter: 'size',
+    itemFontName: 'fontName',
+    itemFontWeight: 'fontWeight',
+    itemFontSize: 'fontSize',
+    itemLineHeight: 'lineHeight',
+    itemColor: 'color',
+    itemTextColor: 'color'
+  },
+  Modal: {
+    backdropColor: 'color',
+    backdropOpacity: 'opacity',
+    headingColor: 'color',
+    cancelButtonColor: 'color',
+    subHeadingMarginTop: 'size',
+    headingPaddingRight: 'size',
+    headingPaddingTop: 'size',
+    headingBorderBottomWidth: 'size',
+    height: 'size',
+    maxWidth: 'size',
+    containerPaddingLeft: 'size',
+    containerPaddingRight: 'size',
+    containerPaddingTop: 'size',
+    containerPaddingBottom: 'size',
+    contentPaddingTop: 'size',
+    contentPaddingBottom: 'size',
+    backgroundColor: 'color',
+    borderRadius: 'radius',
+    borderColor: 'color',
+    borderWidth: 'size',
+    shadow: 'shadow',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    marginLeft: 'size',
+    marginRight: 'size',
+    gap: 'size',
+    closeIcon: 'icon',
+    closeIconColor: 'color',
+    closeIconSize: 'size',
+    closePadding: 'size',
+    direction: 'direction',
+    footerTopWidth: 'size'
+  },
+  MultiSelectFilter: {
+    buttonDirection: 'direction',
+    buttonIconSize: 'size',
+    buttonIconPadding: 'size',
+    buttonBorderColor: 'color',
+    contentMarginBottom: 'size',
+    contentMarginLeft: 'size',
+    contentMarginRight: 'size',
+    contentMarginTop: 'size',
+    contentPaddingLeft: 'size',
+    contentPaddingRight: 'size',
+    headerFontColor: 'color',
+    headerFontName: 'fontName',
+    headerFontSize: 'fontSize',
+    headerFontWeight: 'fontWeight',
+    headerLineHeight: 'lineHeight',
+    labelFontSize: 'fontSize',
+    labelFontName: 'fontName',
+    labelFontWeight: 'fontWeight',
+    labelLineHeight: 'lineHeight',
+    labelColor: 'color',
+    labelPaddingLeft: 'size',
+    labelPaddingRight: 'size',
+    labelPaddingTop: 'size',
+    labelPaddingBottom: 'size',
+    maxHeightSize: 'size',
+    maxWidthSize: 'size',
+    minHeight: 'size',
+    minWidth: 'size',
+    subHeaderFontName: 'fontName',
+    subHeaderFontSize: 'fontSize',
+    subHeaderFontWeight: 'fontWeight',
+    subHeaderLineHeight: 'lineHeight'
+  },
+  NavigationBar: {
+    alignSelf: 'flexAlign',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    color: 'color',
+    fontName: 'fontName',
+    fontSize: 'fontSize',
+    fontWeight: 'fontWeight',
+    lineHeight: 'lineHeight',
+    minWidth: 'size',
+    opacity: 'opacity',
+    outerBackgroundColor: 'color',
+    outerBorderColor: 'color',
+    outerBorderGap: 'size',
+    outerBorderWidth: 'border',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    shadow: 'shadow',
+    textAlign: 'flexJustifyContent',
+    width: 'size',
+    icoMenu: 'icon'
+  },
+  Notification: {
+    backgroundColor: 'color',
+    borderBottomWidth: 'border',
+    borderTopWidth: 'border',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    color: 'color',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    icon: 'icon',
+    iconColor: 'color',
+    iconSize: 'size',
+    iconGap: 'size',
+    dismissIcon: 'icon',
+    dismissIconColor: 'color',
+    dismissButtonGap: 'size',
+    justifyContent: 'flexJustifyContent',
+    containerPaddingLeft: 'size',
+    containerPaddingRight: 'size'
+  },
+  Pagination: {
+    gap: 'size',
+    truncateAbove: 'integer',
+    color: 'color',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
+    borderColor: 'color',
+    ellipsisPadding: 'size',
+    ellipsisBorderRightWidth: 'border',
+    ellipsisBorderLeftWidth: 'border',
+    ellipsisBorderTopWidth: 'border',
+    ellipsisBorderBottomWidth: 'border',
+    ellipsisHeight: 'size'
+  },
+  PaginationPageButton: {
+    borderColor: 'color',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
+    borderRadius: 'radius',
+    backgroundColor: 'color',
+    height: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    width: 'size',
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    color: 'color',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight',
+    textAlign: 'flexJustifyContent',
+    textLine: 'textLine'
+  },
+  PaginationSideButton: {
+    borderColor: 'color',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
+    borderRadius: 'radius',
+    backgroundColor: 'color',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    color: 'color',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight',
+    textLine: 'textLine',
+    icon: 'icon',
+    iconSize: 'size',
+    iconDisplace: 'size',
+    width: 'size',
+    textAlign: 'flexJustifyContent',
+    displayLabel: 'show',
+    height: 'size'
+  },
+  Progress: {
+    backgroundColor: 'color',
+    borderWidth: 'border',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    height: 'size',
+    shadow: 'shadow'
+  },
+  ProgressBar: {
+    backgroundColor: 'color',
+    borderRadius: 'radius',
+    gradient: 'gradient',
+    outlineColor: 'color',
+    outlineWidth: 'border',
+    shadow: 'shadow'
+  },
+  QuickLinks: {
+    // Sets which subcomponents are rendered
+    list: 'show',
+    card: 'show',
+    dividers: 'show',
+    stackSpace: 'integer',
+    stackGap: 'integer',
+    stackJustify: 'flexJustifyContent'
+  },
+  QuickLinksCard: {
+    // Card tokens
+    flex: 'integer',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    minWidth: 'size',
+    shadow: 'shadow'
+  },
+  QuickLinksList: {
+    // List tokens
+    dividerColor: 'color',
+    dividerSize: 'border',
+    iconMarginTop: 'size',
+    interItemMargin: 'size',
+    interItemMarginWithDivider: 'size',
+    itemBulletColor: 'color',
+    itemBulletContainerAlign: 'textAlign',
+    itemBulletContainerWidth: 'size',
+    itemBulletHeight: 'size',
+    itemBulletWidth: 'size',
+    itemFontColor: 'color',
+    itemFontName: 'fontName',
+    itemFontSize: 'fontSize',
+    itemFontWeight: 'fontWeight',
+    itemIconColor: 'color',
+    itemIconSize: 'size',
+    itemLineHeight: 'lineHeight',
+    listGutter: 'size',
+    itemUnderline: 'textLine',
+    // PressableListItemBase tokens
+    backgroundColor: 'color',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size'
+  },
+  QuickLinksButton: {
+    // Button tokens
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    shadow: 'shadow',
+    fontSize: 'fontSize',
+    color: 'color',
+    lineHeight: 'lineHeight',
+    textAlign: 'flexJustifyContent',
+    alignSelf: 'flexAlign',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    backgroundColor: 'color',
+    opacity: 'opacity',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    width: 'size',
+    minWidth: 'size',
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    outerBackgroundColor: 'color',
+    // Icon & IconText
+    icon: 'icon',
+    iconColor: 'color',
+    iconSize: 'size',
+    iconSpace: 'integer'
+  },
+  QuickLinksFeature: {
+    stackSpace: 'integer',
+    stackGap: 'integer',
+    stackJustify: 'flexJustifyContent'
+  },
+  QuickLinksFeatureItem: {
+    color: 'color',
+    textLine: 'textLine',
+    imageDimension: 'size',
+    contentMaxDimension: 'size',
+    contentDirection: 'direction',
+    contentSpace: 'integer',
+    contentAlignItems: 'flexAlign',
+    gap: 'size',
+    textAlign: 'textAlign',
+    outerBorderColor: 'color',
+    fontWeight: 'fontWeight',
+    fontName: 'fontName',
+    fontSize: 'fontSize'
+  },
+  Radio: {
+    checkedBackgroundColor: 'color',
+    checkedSize: 'size',
+    containerBackgroundColor: 'color',
+    containerBorderRadius: 'radius',
+    containerOpacity: 'opacity',
+    containerPaddingBottom: 'size',
+    containerPaddingLeft: 'size',
+    containerPaddingRight: 'size',
+    containerPaddingTop: 'size',
+    containerShadow: 'shadow',
+    descriptionFontSize: 'fontSize',
+    descriptionLineHeight: 'lineHeight',
+    descriptionMarginLeft: 'size',
+    descriptionFontName: 'fontName',
+    descriptionFontWeight: 'fontWeight',
+    inputBackgroundColor: 'color',
+    inputBorderColor: 'color',
+    inputBorderWidth: 'border',
+    inputOutlineColor: 'color',
+    inputOutlineWidth: 'border',
+    inputSize: 'size',
+    outerBorderGap: 'size',
+    outerBorderWidth: 'border',
+    outerBorderColor: 'color',
+    labelColor: 'color',
+    labelFontName: 'fontName',
+    labelFontSize: 'fontSize',
+    labelFontWeight: 'fontWeight',
+    labelLineHeight: 'lineHeight',
+    labelMarginLeft: 'size',
+    // Used for card group
+    icon: 'icon',
+    iconBackgroundColor: 'color',
+    iconColor: 'color'
+  },
+  RadioCard: {
+    // Outer border
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    // Card
+    flex: 'integer',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    minWidth: 'size',
+    shadow: 'shadow',
+    contentAlignItems: 'flexAlign',
+    contentJustifyContent: 'flexJustifyContent',
+    contentFlexGrow: 'integer',
+    contentFlexShrink: 'integer',
+    // RadioButton
+    radioCheckedBackgroundColor: 'color',
+    radioCheckedSize: 'size',
+    radioInputBackgroundColor: 'color',
+    radioInputBorderColor: 'color',
+    radioInputBorderWidth: 'border',
+    radioInputOutlineColor: 'color',
+    radioInputOutlineWidth: 'border',
+    radioInputSize: 'size',
+    radioOuterBorderColor: 'color',
+    radioOuterBorderWidth: 'border',
+    radioOuterBorderGap: 'size',
+    // Title text - duplicates Typography variant { size: 'h3' }
+    fontSize: 'fontSize',
+    fontName: 'fontName',
+    lineHeight: 'lineHeight',
+    color: 'color',
+    letterSpacing: 'letterSpacing',
+    textTransform: 'textTransform',
+    fontWeight: 'fontWeight',
+    // Spacing
+    radioSpace: 'integer',
+    contentSpace: 'integer'
+  },
+  RadioCardGroup: {
+    // Layout
+    direction: 'direction',
+    space: 'integer',
+    // Fieldset
+    fieldSpace: 'integer',
+    // Border for error feedback
+    showIcon: 'show',
+    outlineWidth: 'border',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    outlineOffset: 'size'
+  },
+  RadioGroup: {
+    space: 'integer',
+    fieldSpace: 'integer',
+    showIcon: 'show',
+    outlineWidth: 'border',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    outlineOffset: 'size'
+  },
+  Ribbon: {
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    borderRadius: 'size',
+    backgroundColor: 'color',
+    boxShadowPaddingLeft: 'size',
+    boxShadowPaddingTop: 'size',
+    boxShadowPaddingRight: 'size',
+    boxShadowPaddingBottom: 'size',
+    boxShadowColor: 'color',
+    curveAfterWidth: 'size',
+    curveMarginTop: 'size',
+    curveAfterRadius: 'size',
+    curveBackgroundColor: 'color',
+    curveHeight: 'size',
+    curveWidth: 'size',
+    curveAfterBackgroundColor: 'color',
+    curveAfterHeight: 'size',
+    gradient: 'gradient',
+    fontColor: 'color',
+    borderRadiusBottomLeft: 'size',
+    borderRadiusBottomRight: 'size',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight'
+  },
+  Search: {
+    backgroundColor: 'color',
+    color: 'color',
+    borderWidth: 'border',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    outerBackgroundColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderColor: 'color',
+    outerBorderRadius: 'radius',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight',
+    placeholderColor: 'color',
+    buttonsGap: 'size',
+    clearButtonIcon: 'icon',
+    submitButtonIcon: 'icon',
+    iconLeftColor: 'color',
+    iconLeftSize: 'size',
+    mobileBorderWidth: 'border'
+  },
+  SearchButton: {
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    backgroundColor: 'color',
+    mobileBackgroundColor: 'color',
+    opacity: 'opacity',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingBottom: 'size',
+    paddingTop: 'size',
+    iconSize: 'size',
+    iconColor: 'color',
+    shadow: 'shadow'
+  },
+  Select: {
+    backgroundColor: 'color',
+    color: 'color',
+    borderWidth: 'border',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    height: 'size',
+    outerBackgroundColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderColor: 'color',
+    fontSize: 'fontSize',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    icon: 'icon',
+    iconSize: 'size',
+    iconColor: 'color',
+    validationIcon: 'icon',
+    validationIconSize: 'size',
+    validationIconColor: 'color',
+    feedbackBackgroundColor: 'color'
+  },
+  SideNav: {
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderStyle: 'borderStyle'
+  },
+  SideNavItem: {
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderStyle: 'borderStyle',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    justifyContent: 'flexJustifyContent',
+    color: 'color',
+    accentOffset: 'size',
+    accentPadding: 'size',
+    accentWidth: 'size',
+    accentBackgroundColor: 'color',
+    fontWeight: 'fontWeight',
+    fontName: 'fontName',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight',
+    backgroundColor: 'color'
+  },
+  SideNavItemsGroup: {
+    expandDuration: 'duration',
+    collapseDuration: 'duration',
+    contentPaddingLeft: 'size',
+    contentPaddingRight: 'size',
+    contentPaddingTop: 'size',
+    contentPaddingBottom: 'size',
+    icon: 'icon',
+    iconColor: 'color',
+    iconGap: 'size',
+    iconSize: 'size',
+    iconPosition: 'position',
+    justifyContent: 'flexJustifyContent',
+    verticalAlign: 'verticalAlign'
+  },
+  spacingScale: {
+    size: 'size'
+  },
+  StackView: {
+    alignItems: 'flexAlign',
+    justifyContent: 'flexJustifyContent',
+    flexGrow: 'integer',
+    flexShrink: 'integer',
+    width: 'size'
+  },
+  StepTracker: {
+    completedIcon: 'icon',
+    completedIconColor: 'color',
+    completedIconSize: 'size',
+    connectorColor: 'color',
+    connectorCompletedColor: 'color',
+    // TODO: should these be border or size???
+    connectorCompletedHeight: 'border',
+    connectorHeight: 'border',
+    connectorMinWidth: 'size',
+    containerPaddingBottom: 'size',
+    containerPaddingLeft: 'size',
+    containerPaddingRight: 'size',
+    containerPaddingTop: 'size',
+    knobBackgroundColor: 'color',
+    knobBorderColor: 'color',
+    knobBorderWidth: 'border',
+    knobCompletedBackgroundColor: 'color',
+    knobCompletedBorderColor: 'color',
+    knobCompletedPaddingLeft: 'size',
+    knobCompletedPaddingTop: 'size',
+    knobCurrentBackgroundColor: 'color',
+    knobCurrentBorderColor: 'color',
+    knobCurrentBorderWidth: 'border',
+    knobCurrentInnerColor: 'color',
+    knobCurrentInnerSize: 'size',
+    knobCurrentPaddingLeft: 'size',
+    knobCurrentPaddingTop: 'size',
+    knobSize: 'size',
+    labelColor: 'color',
+    labelCurrentColor: 'color',
+    labelCurrentFontWeight: 'fontWeight',
+    labelCurrentFontName: 'fontName',
+    labelDirection: 'direction',
+    labelFontSize: 'fontSize',
+    labelFontWeight: 'fontWeight',
+    labelFontName: 'fontName',
+    labelGap: 'size',
+    labelLineHeight: 'lineHeight',
+    labelMarginTop: 'size',
+    labelPaddingLeft: 'size',
+    labelPaddingRight: 'size',
+    showStepLabel: 'show',
+    showStepName: 'show',
+    showStepTrackerLabel: 'show',
+    textStepTrackerLabel: 'integer',
+    stepLabelColor: 'color',
+    stepLabelFontSize: 'fontSize',
+    stepLabelFontWeight: 'fontWeight',
+    stepLabelFontName: 'fontName',
+    stepLabelLineHeight: 'lineHeight'
+  },
+  SkipLink: {
+    backgroundColor: 'color',
+    color: 'color',
+    outlineColor: 'color',
+    outlineOffset: 'border',
+    outlineStyle: 'borderStyle',
+    outlineWidth: 'border',
+    paddingHorizontal: 'size',
+    paddingVertical: 'size',
+    borderRadius: 'radius',
+    textLine: 'textLine',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight'
+  },
+  StoryCard: {
+    outerBorderColor: 'color',
+    outerBorderGap: 'size',
+    outerBorderWidth: 'border',
+    flex: 'integer',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    minWidth: 'size',
+    shadow: 'shadow',
+    contentAlignItems: 'flexAlign',
+    contentJustifyContent: 'flexJustifyContent',
+    contentFlexGrow: 'integer',
+    contentFlexShrink: 'integer'
+  },
+  Tabs: {
+    nextIcon: 'icon',
+    previousIcon: 'icon',
+    space: 'integer',
+    buttonClearance: 'size',
+    gutter: 'size',
+    borderBottomColor: 'color',
+    borderBottomWidth: 'border'
+  },
+  TabsItem: {
+    highlightColor: 'color',
+    highlightBarHeight: 'border',
+    highlightBarBorderRadius: 'radius',
+    highlightBarBorderWidth: 'border',
+    highlightTriangleSize: 'size',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    maxWidth: 'size',
+    paddingHorizontal: 'size',
+    paddingVertical: 'size',
+    space: 'integer',
+    textAlign: 'textAlign',
+    lineHeight: 'lineHeight',
+    color: 'color',
+    fontSize: 'fontSize',
+    letterSpacing: 'letterSpacing',
+    textTransform: 'textTransform',
+    fontScaleCap: 'fontSize',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight'
+  },
+  TabBar: {
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    borderTopWidth: 'border',
+    borderTopColor: 'color',
+    gap: 'size',
+    backgroundColor: 'color',
+    paddingLeft: 'size',
+    paddingRight: 'size'
+  },
+  TabBarItem: {
+    borderRadius: 'radius',
+    backgroundColor: 'color',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    color: 'color',
+    lineHeight: 'lineHeight',
+    iconSize: 'size',
+    iconColor: 'color',
+    activeColor: 'color'
+  },
+  Tags: {
+    space: 'integer',
+    direction: 'direction',
+    alignItems: 'flexAlign',
+    justifyContent: 'flexJustifyContent',
+    flexGrow: 'integer',
+    flexShrink: 'integer'
+  },
+  TagsItem: {
+    icon: 'icon',
+    iconPosition: 'position',
+    iconSpace: 'integer',
+    iconSize: 'size',
+    iconColor: 'color',
+    iconPadding: 'size',
+    iconAlignSelf: 'flexAlign',
+    iconTranslateX: 'size',
+    iconTranslateY: 'size',
+    iconBackground: 'color',
+    iconBorderRadius: 'radius',
+    // These are duplicated Button tokens. TODO: consider token sets to reduce duplication.
+    // https://github.com/telus/universal-design-system/issues/782
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    shadow: 'shadow',
+    fontSize: 'fontSize',
+    color: 'color',
+    lineHeight: 'lineHeight',
+    textAlign: 'flexJustifyContent',
+    alignSelf: 'flexAlign',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    backgroundColor: 'color',
+    opacity: 'opacity',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    minWidth: 'size',
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    outerBackgroundColor: 'color'
+  },
+  Testimonial: {
+    testimonialContainerGap: 'size',
+    quoteContainerGap: 'size',
+    iconColor: 'color',
+    dividerBorder: 'border',
+    dividerBackgroundColor: 'color',
+    figcaptionGap: 'size',
+    textColor: 'color',
+    imageSize: 'size',
+    icon: 'icon',
+    iconFr: 'icon',
+    testimonialFontSizeLarge: 'fontSize',
+    testimonialLineHeightLarge: 'lineHeight',
+    testimonialFontNameLarge: 'fontName',
+    testimonialFontWeightLarge: 'fontWeight',
+    testimonialFontSizeHeading: 'fontSize',
+    testimonialLineHeightHeading: 'lineHeight',
+    testimonialFontNameHeading: 'fontName',
+    testimonialFontWeightHeading: 'fontWeight',
+    authorFontSize: 'fontSize',
+    authorLineHeight: 'lineHeight',
+    authorFontName: 'fontName',
+    authorFontWeight: 'fontWeight',
+    additionalFontSize: 'fontSize',
+    additionalLineHeight: 'lineHeight',
+    additionalFontName: 'fontName',
+    additionalFontWeight: 'fontWeight'
+  },
+  TermsAndConditions: {
+    headerBackgroundColor: 'color',
+    contentPaddingBottom: 'size',
+    contentPaddingLeft: 'size',
+    contentBorderColor: 'color',
+    contentMarginBottom: 'size',
+    mdContentPaddingBottom: 'size',
+    mdContentPaddingLeft: 'size',
+    orderedPadding: 'size',
+    unorderedPadding: 'size',
+    listFontName: 'fontName',
+    listFontWeight: 'fontWeight',
+    listFontSize: 'fontSize',
+    listLineHeight: 'lineHeight',
+    listColor: 'color',
+    listMarginBottom: 'size',
+    listMarginLeft: 'size',
+    titleColor: 'color',
+    titleFontSize: 'fontSize',
+    titleLineHeight: 'lineHeight',
+    titlePaddingLeft: 'size',
+    expandIconContainerBorder: 'border',
+    expandIconContainerBorderColor: 'color',
+    expandIconContainerHeight: 'size',
+    expandIconContainerMarginX: 'size',
+    expandIconContainerMarginY: 'size',
+    expandIconContainerWidth: 'size',
+    expandIconContainerAlignItems: 'flexAlign',
+    expandIconContainerJustifyContent: 'flexJustifyContent',
+    expandTitleColor: 'color',
+    expandTitleFontSize: 'size',
+    expandTitleLineHeight: 'lineHeight',
+    expandTitleFontName: 'fontName',
+    expandTitleFontWeight: 'fontWeight',
+    expandTitleMarginX: 'size',
+    expandTitleMarginY: 'size',
+    expandTitlePaddingLeft: 'size',
+    expandTitleBorder: 'border',
+    expandTitleBorderColor: 'color',
+    expandTitleUnderline: 'textLine',
+    expandBaseBorderWidth: 'border',
+    expandContentPaddingBottom: 'size',
+    expandContentPaddingLeft: 'size',
+    expandContentPaddingRight: 'size',
+    expandContentPaddingTop: 'size',
+    dividerColor: 'color',
+    icon: 'icon',
+    iconBackgroundColor: 'color',
+    iconColor: 'color',
+    iconBorderColor: 'color',
+    iconOuterBorderColor: 'color',
+    iconOuterBorderGap: 'size',
+    iconOuterBorderWidth: 'border'
+  },
+  TextArea: {
+    minLines: 'integer',
+    maxLines: 'integer'
+  },
+  TextInput: {
+    backgroundColor: 'color',
+    color: 'color',
+    borderWidth: 'border',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    passwordShowButtonIcon: 'icon',
+    passwordHideButtonIcon: 'icon',
+    buttonSize: 'size',
+    buttonsGap: 'size',
+    buttonsPaddingRight: 'size',
+    clearButtonIcon: 'icon',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    outerBackgroundColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderColor: 'color',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    leftIconPaddingBottom: 'size',
+    iconLeftPaddingBottom: 'size',
+    iconLeftGap: 'size',
+    lineHeight: 'lineHeight',
+    icon: 'icon',
+    iconSize: 'size',
+    iconColor: 'color',
+    defaultCreditIcon: 'icon',
+    visaIcon: 'icon',
+    masterCardIcon: 'icon',
+    amexIcon: 'icon'
+  },
+  Toast: {
+    containerBackgroundColor: 'color',
+    containerGap: 'size',
+    animationHeightBefore: 'size',
+    animationHeightAfter: 'size',
+    animationPaddingBottomBefore: 'size',
+    animationPaddingBottomAfter: 'size',
+    animationPaddingTopBefore: 'size',
+    padding: 'size',
+    animationPaddingTopAfter: 'size',
+    animationBackgroundColorBefore: 'color',
+    animationBackgroundColorAfter: 'color',
+    animationColorBefore: 'color',
+    animationColorAfter: 'color',
+    animationDivColorBefore: 'color',
+    animationDivColorAfter: 'color',
+    chevronlinkFontWeight: 'fontWeight',
+    chevronlinkFontName: 'fontName'
+  },
+  ToggleSwitch: {
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    outerBackgroundColor: 'color',
+    backgroundColor: 'color',
+    opacity: 'opacity',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    shadow: 'shadow',
+    alignSelf: 'flexAlign',
+    space: 'integer',
+    icon: 'icon',
+    trackHeight: 'size',
+    outerBorderGapButton: 'size',
+    width: 'size',
+    trackBorderWidth: 'border',
+    trackBorderColor: 'color',
+    trackBorderRadius: 'radius',
+    iconSize: 'size',
+    iconColor: 'color',
+    labelColor: 'color',
+    labelFontName: 'fontName',
+    labelFontSize: 'fontSize',
+    labelFontWeight: 'fontWeight',
+    labelLineHeight: 'lineHeight',
+    labelMarginLeft: 'size',
+    switchSize: 'size',
+    switchColor: 'color',
+    switchBorderColor: 'color',
+    switchBorderWidth: 'border',
+    switchBorderRadius: 'radius',
+    switchShadow: 'shadow'
+  },
+  ToggleSwitchGroup: {
+    space: 'integer',
+    fieldSpace: 'integer',
+    direction: 'direction',
+    alignItems: 'flexAlign',
+    justifyContent: 'flexJustifyContent',
+    flexGrow: 'integer',
+    flexShrink: 'integer'
+  },
+  Breadcrumbs: {
+    fontWeight: 'fontWeight',
+    fontName: 'fontName',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight',
+    color: 'color',
+    currentColor: 'color',
+    icon: 'icon',
+    iconColor: 'color',
+    iconSize: 'size',
+    iconPadding: 'size',
+    iconContainerSize: 'size',
+    listItemPadding: 'size'
+  },
+  Timeline: {
+    dotColor: 'color',
+    dotWidth: 'size',
+    dotBorderWidth: 'border',
+    timelineContainerDirection: 'direction',
+    timelineConnectorColor: 'color',
+    timelineColor: 'color',
+    connectorWidth: 'size',
+    connectorHeight: 'size',
+    lineItemContainerDirection: 'direction',
+    lineContainerFlexSize: 'integer',
+    lineItemAlign: 'flexAlign',
+    lineItemDirection: 'direction',
+    lineItemMarginRight: 'size',
+    lineItemMarginBottom: 'size',
+    itemContentFlexSize: 'integer',
+    itemContentMarginRight: 'size',
+    itemContentMarginBottom: 'size'
+  },
+  Tooltip: {
+    backgroundColor: 'color',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    borderRadius: 'radius',
+    shadow: 'shadow',
+    color: 'color',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    arrowWidth: 'size',
+    arrowBorderRadius: 'radius',
+    arrowOffset: 'size',
+    maxWidth: 'size',
+    minWidth: 'size'
+  },
+  TooltipButton: {
+    outerBorderColor: 'color',
+    backgroundColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    borderRadius: 'radius',
+    width: 'size',
+    icon: 'icon',
+    iconSize: 'size',
+    iconColor: 'color',
+    iconScale: 'iconScale'
+  },
+  Typography: {
+    fontName: 'fontName',
+    superScriptFontSize: 'fontSize',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    color: 'color',
+    lineHeight: 'lineHeight',
+    textTransform: 'textTransform',
+    fontScaleCap: 'fontSize',
+    letterSpacing: 'letterSpacing',
+    gradient: 'gradient'
+  },
+  Countdown: {
+    containerBorderRadius: 'radius',
+    containerGradient: 'gradient',
+    containerBorderWidth: 'border',
+    containerBorderColor: 'color',
+    containerInverseBorder: 'border',
+    containerInverseBorderColor: 'color',
+    containerPaddingBottomTop: 'size',
+    containerPaddingLeftRight: 'size',
+    inverseBorderColor: 'color',
+    labelBorderColor: 'color',
+    textFontSize: 'fontSize',
+    textLineHeight: 'lineHeight',
+    labelFontSize: 'fontSize',
+    labelFontName: 'fontName',
+    labelFontWeight: 'fontWeight',
+    labelLineHeight: 'lineHeight',
+    textTimerFontWeight: 'fontWeight',
+    textTimerFontName: 'fontName'
+  },
+  Skeleton: {
+    color: 'color',
+    secondColor: 'color',
+    animationDuration: 'integer',
+    size: 'size',
+    radius: 'radius',
+    baseWidth: 'size',
+    characters: 'size',
+    spaceBetweenLines: 'size',
+    squareRadius: 'radius',
+    lineRadius: 'radius'
+  }
+};