@telus-uds/components-base 1.36.0 → 1.38.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 20 Apr 2023 19:05:54 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Apr 2023 14:32:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.38.0
+
+Thu, 27 Apr 2023 14:32:16 GMT
+
+### Minor changes
+
+- add a new button variant to support responsive width across the different viewports (guillermo.peitzner@telus.com)
+- export use theme call back (mauricio.batresmontejo@telus.com)
+- standarization of activity indicator (ignacio.cuyun@telus.com)
+- conditionally render Icon based on it being defined (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.23.0
+
+## 1.37.0
+
+Mon, 24 Apr 2023 21:42:02 GMT
+
+### Minor changes
+
+- conditionally render Icon based on it being defined (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.22.0
+
 ## 1.36.0
 
-Thu, 20 Apr 2023 19:05:54 GMT
+Thu, 20 Apr 2023 19:13:33 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -1,23 +1,27 @@
 {
   "schema": {
     "components": {
-      "Toast": {
-        "containerBackgroundColor": "color",
-        "containerGap": "size",
-        "animationHeightBefore": "size",
-        "animationHeightAfter": "size",
-        "animationPaddingBottomBefore": "size",
-        "animationPaddingBottomAfter": "size",
-        "animationPaddingTopBefore": "size",
-        "animationPaddingTopAfter": "size",
-        "animationBackgroundColorBefore": "color",
-        "animationBackgroundColorAfter": "color",
-        "animationColorBefore": "color",
-        "animationColorAfter": "color",
-        "animationDivColorBefore": "color",
-        "animationDivColorAfter": "color",
-        "animationFillColorBefore": "color",
-        "animationFillColorAfter": "color"
+      "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",
+        "buttonPaddingRight": "size",
+        "detailsContainerPadding": "size",
+        "playIconContainerBackground": "color"
       },
       "Table": {
         "tablePaddingBottom": "size",
@@ -41,6 +45,69 @@
         "size": "size",
         "thickness": "border"
       },
+      "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",
+        "paddingLeftCompactMode": "size",
+        "paddingRightCompactMode": "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",
+        "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",
@@ -61,6 +128,19 @@
         "itemBorderColor": "color",
         "itemPadding": "size"
       },
+      "QuantitySelector": {
+        "leftIcon": "icon",
+        "rightIcon": "icon",
+        "iconSize": "size",
+        "borderColor": "color",
+        "inputBorderColor": "color",
+        "inputBackgroundColor": "color",
+        "inputBorderWidth": "size",
+        "padding": "size",
+        "backgroundColor": "color",
+        "textColor": "color",
+        "iconColor": "color"
+      },
       "Footnote": {
         "footnoteBackground": "color",
         "footnoteBorderTopSizeMd": "border",
@@ -119,6 +199,16 @@
         "paddingTop": "size",
         "paddingBottom": "size"
       },
+      "BlockQuote": {
+        "color": "color",
+        "backgroundGradient": "gradient",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "marginBottom": "size",
+        "width": "size"
+      },
       "Box": {
         "backgroundColor": "color",
         "gradient": "gradient"
@@ -496,6 +586,7 @@
         "space": "integer"
       },
       "IconButton": {
+        "icon": "icon",
         "backgroundColor": "color",
         "borderRadius": "radius",
         "borderColor": "color",
@@ -550,6 +641,38 @@
         "itemIconColor": "color",
         "listGutter": "size"
       },
+      "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",
+        "itemBorderBackgroundColor": "color",
+        "itemBorderLeftColor": "color",
+        "itemBorderLeftWidth": "border",
+        "itemBorderWidth": "border",
+        "itemTextDecoration": "textLine",
+        "itemOutline": "border",
+        "shadow": "shadow"
+      },
       "OrderedList": {
         "headerFontWeight": "fontWeight",
         "headerFontName": "fontName",
@@ -1046,6 +1169,26 @@
         "paddingVertical": "size",
         "borderRadius": "radius"
       },
+      "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",
@@ -1123,6 +1266,55 @@
         "outerBorderGap": "size",
         "outerBackgroundColor": "color"
       },
+      "Testimonial": {
+        "testimonialContainerGap": "size",
+        "quoteContainerGap": "size",
+        "iconColor": "color",
+        "dividerBorder": "border",
+        "dividerBackgroundColor": "color",
+        "figcaptionGap": "size",
+        "textColor": "color",
+        "imageSize": "size",
+        "icon": "icon"
+      },
+      "TermsAndConditions": {
+        "contentPaddingBottom": "size",
+        "contentPaddingLeft": "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",
+        "expandTitleMarginX": "size",
+        "expandTitleMarginY": "size",
+        "expandBaseBorderWidth": "border",
+        "expandContentPaddingBottom": "size",
+        "expandContentPaddingLeft": "size",
+        "expandContentPaddingRight": "size",
+        "expandContentPaddingTop": "size",
+        "icon": "icon"
+      },
       "TextArea": {
         "minLines": "integer",
         "maxLines": "integer"
@@ -1154,6 +1346,24 @@
         "iconSize": "size",
         "iconColor": "color"
       },
+      "Toast": {
+        "containerBackgroundColor": "color",
+        "containerGap": "size",
+        "animationHeightBefore": "size",
+        "animationHeightAfter": "size",
+        "animationPaddingBottomBefore": "size",
+        "animationPaddingBottomAfter": "size",
+        "animationPaddingTopBefore": "size",
+        "animationPaddingTopAfter": "size",
+        "animationBackgroundColorBefore": "color",
+        "animationBackgroundColorAfter": "color",
+        "animationColorBefore": "color",
+        "animationColorAfter": "color",
+        "animationDivColorBefore": "color",
+        "animationDivColorAfter": "color",
+        "animationFillColorBefore": "color",
+        "animationFillColorAfter": "color"
+      },
       "ToggleSwitch": {
         "borderColor": "color",
         "borderWidth": "border",
@@ -1261,6 +1471,22 @@
         "fontScaleCap": "fontSize",
         "letterSpacing": "letterSpacing"
       },
+      "Countdown": {
+        "containerBorderRadius": "radius",
+        "containerGradient": "gradient",
+        "containerInverseBorder": "border",
+        "containerInverseBorderColor": "color",
+        "containerPaddingBottomTop": "size",
+        "containerPaddingLeftRight": "size",
+        "inverseBorderColor": "color",
+        "labelBorderColor": "color",
+        "textFontSize": "fontSize",
+        "textLineHeight": "lineHeight",
+        "labelFontSize": "fontSize",
+        "labelLineHeight": "lineHeight",
+        "textTimerFontWeight": "fontWeight",
+        "textTimerFontName": "fontName"
+      },
       "Skeleton": {
         "color": "color",
         "size": "size",
@@ -1285,6 +1511,18 @@
           "type": "state"
         }
       },
+      "SplashButton": {
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        }
+      },
       "Button": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -1714,6 +1952,56 @@
           "type": "state"
         }
       },
+      "ListBox": {
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "expanded": {
+          "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "current": {
+          "description": "When the current item is selected",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "isChild": {
+          "description": "when the item is child of another child",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "Modal": {
         "maxWidth": {
           "description": "Whether a modal should expand responsively to the maximum of 8 layout columns width",
@@ -1874,6 +2162,41 @@
           "type": "state"
         }
       },
+      "QuantitySelector": {
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "disabled": {
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "Radio": {
         "checked": {
           "description": "Corresponds to a selected state for a checkbox or radio",
@@ -2126,6 +2449,35 @@
           "type": "state"
         }
       },
+      "StoryCard": {
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "TabsItem": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -2239,6 +2591,15 @@
           "type": "state"
         }
       },
+      "TermsAndConditions": {
+        "expanded": {
+          "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "ToggleSwitch": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -5155,14 +5516,11 @@
       "docs": {
         "description": "A pressable themeless base component that handles pressable states and passes tokens\nbased on these to an outer border and a base Card component. Not intended to be used in\napps or sites directly: build themed components on top of this.",
         "props": {
-          "accessibilityRole": {
+          "variant": {
             "defaultValue": {
-              "value": "href ? 'link' : 'button'",
+              "value": "{}",
               "computed": false
             },
-            "required": false
-          },
-          "variant": {
             "type": {
               "name": "objectOf",
               "value": {
@@ -5183,10 +5541,18 @@
             "required": false,
             "description": ""
           },
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "href ? 'link' : 'button'",
+              "computed": false
+            },
+            "required": false
+          },
           "tokens": {
             "type": {
               "name": "custom",
               "raw": {
+                "icon": "icon",
                 "backgroundColor": "color",
                 "borderRadius": "radius",
                 "borderColor": "color",

package/lib/ActivityIndicator/Spinner.js

@@ -70,6 +70,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         r: "20",
         strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
         strokeDashoffset: 0,
+        vectorEffect: "non-scaling-stroke",
         children: reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
             attributeName: "stroke-dashoffset",

package/lib/Button/Button.js

@@ -15,6 +15,8 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _props = require("../utils/props");
 
+var _ViewportProvider = require("../ViewportProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,7 +32,12 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     variant,
     ...props
   } = _ref;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, variant);
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const buttonVariant = {
+    viewport,
+    ...variant
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,

package/lib/Button/ButtonLink.js

@@ -15,6 +15,8 @@ var _props = require("../utils/props");
 
 var _ThemeProvider = require("../ThemeProvider");
 
+var _ViewportProvider = require("../ViewportProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,7 +43,12 @@ const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     rest
   } = _props.hrefAttrsProp.bundle(props);
 
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, variant);
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const buttonVariant = {
+    viewport,
+    ...variant
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
     ref: ref,
     accessibilityRole: accessibilityRole,

package/lib/IconButton/IconButton.js

@@ -86,7 +86,7 @@ const selectInnerStyle = _ref2 => {
 const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     tokens,
-    variant,
+    variant = {},
     icon: IconComponent,
     href,
     hrefAttrs,
@@ -134,7 +134,8 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent,
           title: selectedProps.accessibilityLabel,
-          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon')
+          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
+          variant: variant
         })
       });
     }

package/lib/index.js

@@ -60,6 +60,7 @@ var _exportNames = {
   useTheme: true,
   useSetTheme: true,
   useThemeTokens: true,
+  useThemeTokensCallback: true,
   getThemeTokens: true,
   applyOuterBorder: true,
   applyTextStyles: true,
@@ -426,6 +427,12 @@ Object.defineProperty(exports, "useThemeTokens", {
     return _ThemeProvider.useThemeTokens;
   }
 });
+Object.defineProperty(exports, "useThemeTokensCallback", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useThemeTokensCallback;
+  }
+});
 Object.defineProperty(exports, "useViewport", {
   enumerable: true,
   get: function () {

package/lib-module/ActivityIndicator/Spinner.js

@@ -57,6 +57,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
         r: "20",
         strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
         strokeDashoffset: 0,
+        vectorEffect: "non-scaling-stroke",
         children: reduceMotion ? null : /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dashoffset",

package/lib-module/Button/Button.js

@@ -3,6 +3,7 @@ import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps } from '../utils/props';
+import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -11,7 +12,12 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant,
     ...props
   } = _ref;
-  const getTokens = useThemeTokensCallback('Button', tokens, variant);
+  const viewport = useViewport();
+  const buttonVariant = {
+    viewport,
+    ...variant
+  };
+  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
   return /*#__PURE__*/_jsx(ButtonBase, { ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,

package/lib-module/Button/ButtonLink.js

@@ -3,6 +3,7 @@ import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props';
 import { useThemeTokensCallback } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
@@ -21,7 +22,12 @@ const ButtonLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     hrefAttrs,
     rest
   } = hrefAttrsProp.bundle(props);
-  const getTokens = useThemeTokensCallback('Button', tokens, variant);
+  const viewport = useViewport();
+  const buttonVariant = {
+    viewport,
+    ...variant
+  };
+  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
   return /*#__PURE__*/_jsx(ButtonBase, {
     ref: ref,
     accessibilityRole: accessibilityRole,

package/lib-module/IconButton/IconButton.js

@@ -63,7 +63,7 @@ const selectInnerStyle = _ref2 => {
 const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tokens,
-    variant,
+    variant = {},
     icon: IconComponent,
     href,
     hrefAttrs,
@@ -109,7 +109,8 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
         children: /*#__PURE__*/_jsx(Icon, {
           icon: IconComponent,
           title: selectedProps.accessibilityLabel,
-          tokens: selectTokens('Icon', themeTokens, 'icon')
+          tokens: selectTokens('Icon', themeTokens, 'icon'),
+          variant: variant
         })
       });
     }

package/lib-module/index.js

@@ -54,6 +54,6 @@ export { default as BaseProvider } from './BaseProvider';
 export { useHydrationContext } from './BaseProvider/HydrationContext';
 export { default as Validator } from './Validator';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
 export * from './utils';
 export { Portal } from '@gorhom/portal';

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.21.0",
+    "@telus-uds/system-theme-tokens": "^2.23.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.36.0"
+  "version": "1.38.0"
 }

package/src/ActivityIndicator/Spinner.jsx

@@ -53,6 +53,7 @@ const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false },
           r="20"
           strokeDasharray={reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]}
           strokeDashoffset={0}
+          vectorEffect="non-scaling-stroke"
         >
           {reduceMotion ? null : (
             <>

package/src/Button/Button.jsx

@@ -4,9 +4,12 @@ import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { a11yProps } from '../utils/props'
+import { useViewport } from '../ViewportProvider'
 
 const Button = forwardRef(({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
-  const getTokens = useThemeTokensCallback('Button', tokens, variant)
+  const viewport = useViewport()
+  const buttonVariant = { viewport, ...variant }
+  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
   return (
     <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
   )

package/src/Button/ButtonLink.jsx

@@ -3,6 +3,7 @@ import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props'
 import { useThemeTokensCallback } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
@@ -11,7 +12,9 @@ import { useThemeTokensCallback } from '../ThemeProvider'
 const ButtonLink = forwardRef(
   ({ accessibilityRole = 'link', tokens, variant, dataSet, ...props }, ref) => {
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-    const getTokens = useThemeTokensCallback('Button', tokens, variant)
+    const viewport = useViewport()
+    const buttonVariant = { viewport, ...variant }
+    const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
     return (
       <ButtonBase
         ref={ref}

package/src/IconButton/IconButton.jsx

@@ -54,7 +54,7 @@ const IconButton = forwardRef(
   (
     {
       tokens,
-      variant,
+      variant = {},
       icon: IconComponent,
       href,
       hrefAttrs,
@@ -93,6 +93,7 @@ const IconButton = forwardRef(
                 icon={IconComponent}
                 title={selectedProps.accessibilityLabel}
                 tokens={selectTokens('Icon', themeTokens, 'icon')}
+                variant={variant}
               />
             </View>
           )

package/src/index.js

@@ -60,6 +60,7 @@ export {
   useTheme,
   useSetTheme,
   useThemeTokens,
+  useThemeTokensCallback,
   getThemeTokens,
   applyOuterBorder,
   applyTextStyles,