@telus-uds/components-base 1.18.1 → 1.20.0

package/lib/Select/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = exports.ANDROID_HORIZONTAL_PADDING_OFFSET = exports.ANDROID_HEIGHT_OFFSET = exports.ANDROID_DEFAULT_PADDING = void 0;
+// Because Android
+const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
+exports.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = ANDROID_VALIDATION_ICON_CONTAINER_OFFSET;
+const ANDROID_HEIGHT_OFFSET = 12;
+exports.ANDROID_HEIGHT_OFFSET = ANDROID_HEIGHT_OFFSET;
+const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
+exports.ANDROID_HORIZONTAL_PADDING_OFFSET = ANDROID_HORIZONTAL_PADDING_OFFSET;
+const ANDROID_DEFAULT_PADDING = 0;
+exports.ANDROID_DEFAULT_PADDING = ANDROID_DEFAULT_PADDING;

package/lib/StepTracker/Step.js

@@ -203,7 +203,8 @@ const Step = _ref7 => {
       space: 0,
       tokens: {
         alignItems: 'center',
-        flexGrow: 0
+        flexGrow: 0,
+        justifyContent: 'center'
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]

package/lib/Tags/Tags.js

@@ -42,7 +42,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
 
-const selectIconTextTokens = _ref => {
+const separateIconTextTokens = (_ref, returnRest) => {
   let {
     icon,
     iconPosition,
@@ -54,9 +54,10 @@ const selectIconTextTokens = _ref => {
     iconAlignSelf,
     iconPadding,
     iconTranslateX,
-    iconTranslateY
+    iconTranslateY,
+    ...rest
   } = _ref;
-  return {
+  return returnRest ? rest : {
     icon,
     iconPosition,
     iconSpace,
@@ -81,6 +82,10 @@ const selectIconTextTokens = _ref => {
   };
 };
 
+const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
+
+const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
+
 const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     variant,
@@ -109,7 +114,8 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   } = themeTokens;
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('TagsItem', tokens, variant);
 
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
+  const getButtonTokens = buttonState => // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
+  (0, _utils.selectTokens)('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
 
   const {
     currentValues,

package/lib/TextInput/TextInput.js

@@ -7,13 +7,15 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _utils = require("../utils");
 
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 
 var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
 
-var _propTypes = _interopRequireDefault(require("./propTypes"));
+var _propTypes2 = _interopRequireDefault(require("./propTypes"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -79,7 +81,12 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 TextInput.displayName = 'TextInput';
 TextInput.propTypes = { ...selectedSystemPropTypes,
-  ..._propTypes.default,
+  ..._propTypes2.default,
+
+  /**
+   * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
+   */
+  onClear: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('TextInput'),
   variant: _utils.variantProp.propType
 };

package/lib/TextInput/TextInputBase.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -15,12 +17,16 @@ var _TextInput = _interopRequireDefault(require("react-native-web/dist/cjs/expor
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ThemeProvider = require("../ThemeProvider");
 
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
 var _utils = require("../utils");
 
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -133,35 +139,49 @@ const selectIconTokens = _ref3 => {
   };
 };
 
-const selectIconContainerStyles = _ref4 => {
+const selectIconContainerStyles = (_ref4, buttonCount) => {
   let {
+    buttonSize,
+    buttonsGapSize,
     paddingRight,
     paddingBottom
   } = _ref4;
   return {
-    paddingRight,
+    paddingRight: paddingRight + buttonCount * (buttonSize + buttonsGapSize),
     paddingBottom
   };
 };
 
-const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const selectButtonsContainerStyle = _ref5 => {
   let {
-    value,
+    buttonsPaddingRight
+  } = _ref5;
+  return {
+    paddingRight: buttonsPaddingRight
+  };
+};
+
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+  let {
+    buttons = [],
+    copy = 'en',
     height,
-    initialValue,
     inactive,
-    readOnly,
+    initialValue,
+    onBlur,
     onChange,
     onChangeText,
+    onClear,
     onFocus,
-    onBlur,
-    onMouseOver,
     onMouseOut,
+    onMouseOver,
     pattern,
+    readOnly,
     tokens,
+    value,
     variant = {},
     ...rest
-  } = _ref5;
+  } = _ref6;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   const handleFocus = event => {
@@ -186,17 +206,22 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     if (typeof onMouseOut === 'function') onMouseOut(event);
   };
 
+  const defaultRef = (0, _react.useRef)();
+  const inputRef = ref !== null && ref !== void 0 ? ref : defaultRef;
   const {
     currentValue,
+    resetValue,
     setValue,
-    isControlled
+    isControlled,
+    isDirty
   } = (0, _utils.useInputValue)({
     value,
     initialValue,
+    inputRef,
     onChange,
     readOnly
   });
-  const element = ref === null || ref === void 0 ? void 0 : ref.current;
+  const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
   (0, _react.useEffect)(() => {
     if (_Platform.default.OS === 'web' && pattern && element) {
       // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
@@ -220,8 +245,35 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   };
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
   const {
+    buttonsGap,
+    clearButtonIcon: ClearButtonIcon,
     icon: IconComponent
   } = themeTokens;
+  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+
+  if (onClear && isDirty) {
+    const handleClear = event => {
+      var _inputRef$current;
+
+      onClear === null || onClear === void 0 ? void 0 : onClear(event);
+      resetValue(event);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    };
+
+    buttons === null || buttons === void 0 ? void 0 : buttons.unshift( /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+      icon: ClearButtonIcon,
+      onPress: handleClear,
+      variant: {
+        compact: true
+      }
+    }, "clear"));
+  }
+
   const inputProps = { ...selectProps(rest),
     editable: !inactive,
     onFocus: handleFocus,
@@ -243,38 +295,64 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
-      ref: ref,
+      ref: inputRef,
       style: nativeInputStyle,
       ...inputProps
     }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
+      style: [staticStyles.iconContainer, selectIconContainerStyles({ ...themeTokens,
+        buttonsGapSize
+      }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
       })
+    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+        direction: "row",
+        space: buttonsGap,
+        children: buttons
+      })
     })]
   });
 });
 TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = { ...selectedSystemPropTypes,
-  value: _propTypes.default.string,
+  buttons: _propTypes.default.arrayOf(_propTypes.default.node),
+
+  /**
+   * Select English or French copy for the accessible labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
+    clearButtonAccessibilityLabel: _propTypes.default.string
+  })]),
   height: _propTypes.default.number,
-  initialValue: _propTypes.default.string,
   inactive: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
+  initialValue: _propTypes.default.string,
+  onBlur: _propTypes.default.func,
   onChange: _propTypes.default.func,
   onChangeText: _propTypes.default.func,
+  onClear: _propTypes.default.func,
   onFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  onMouseOver: _propTypes.default.func,
   onMouseOut: _propTypes.default.func,
+  onMouseOver: _propTypes.default.func,
+  readOnly: _propTypes.default.bool,
   tokens: (0, _utils.getTokensPropType)('TextInput', 'TextArea'),
+  value: _propTypes.default.string,
   variant: _utils.variantProp.propType
 };
 var _default = TextInputBase;
 exports.default = _default;
 
 const staticStyles = _StyleSheet.default.create({
+  buttonsContainer: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  },
   iconContainer: {
     position: 'absolute',
     right: 0,

package/lib/TextInput/dictionary.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    clearButtonAccessibilityLabel: 'Clear'
+  },
+  fr: {
+    clearButtonAccessibilityLabel: 'Effacer'
+  }
+};
+exports.default = _default;

package/lib/ThemeProvider/ThemeProvider.js

@@ -33,8 +33,10 @@ const ThemeProvider = _ref => {
     children,
     defaultTheme,
     // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+    // TODO: switch `forceZIndex` to be false by default in the next major version
     themeOptions = {
-      forceAbsoluteFontSizing: true
+      forceAbsoluteFontSizing: true,
+      forceZIndex: true
     }
   } = _ref;
   const [theme, setTheme] = (0, _react.useState)(defaultTheme); // Validate the theme tokens version on every render.
@@ -69,9 +71,12 @@ ThemeProvider.propTypes = {
    *   relative sizing (in `rem`, scales depending on the browser settings)
    * - `contentMaxWidth`: allows configuration of the content max width to be used in components
    *   such as Footnote and Notification to avoid content to stretch width more then the page's width
+   * - `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`
+   *   and when true, sets zIndex to be `0` (the default from `react-native-web`)
    */
   themeOptions: _propTypes.default.shape({
     forceAbsoluteFontSizing: _propTypes.default.bool,
+    forceZIndex: _propTypes.default.bool,
     contentMaxWidth: _responsiveProps.default.getTypeOptionallyByViewport(_propTypes.default.number)
   })
 };

package/lib/index.js

@@ -25,12 +25,14 @@ var _exportNames = {
   ListItem: true,
   ListBase: true,
   Modal: true,
+  MultiSelectFilter: true,
   Notification: true,
   Pagination: true,
   Progress: true,
   QuickLinks: true,
   Radio: true,
   RadioCard: true,
+  Responsive: true,
   Search: true,
   Select: true,
   SideNav: true,
@@ -193,6 +195,12 @@ Object.defineProperty(exports, "Modal", {
     return _Modal.default;
   }
 });
+Object.defineProperty(exports, "MultiSelectFilter", {
+  enumerable: true,
+  get: function () {
+    return _MultiSelectFilter.default;
+  }
+});
 Object.defineProperty(exports, "Notification", {
   enumerable: true,
   get: function () {
@@ -241,6 +249,12 @@ Object.defineProperty(exports, "RadioCard", {
     return _RadioCard.default;
   }
 });
+Object.defineProperty(exports, "Responsive", {
+  enumerable: true,
+  get: function () {
+    return _Responsive.default;
+  }
+});
 Object.defineProperty(exports, "Search", {
   enumerable: true,
   get: function () {
@@ -510,6 +524,8 @@ var _List = _interopRequireWildcard(require("./List"));
 
 var _Modal = _interopRequireDefault(require("./Modal"));
 
+var _MultiSelectFilter = _interopRequireDefault(require("./MultiSelectFilter"));
+
 var _Notification = _interopRequireDefault(require("./Notification"));
 
 var _Pagination = _interopRequireDefault(require("./Pagination"));
@@ -546,6 +562,8 @@ Object.keys(_RadioCard).forEach(function (key) {
   });
 });
 
+var _Responsive = _interopRequireDefault(require("./Responsive"));
+
 var _Search = _interopRequireDefault(require("./Search"));
 
 var _Select = _interopRequireDefault(require("./Select"));

package/lib/utils/BaseView/BaseView.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../../ThemeProvider");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Identical to React Native's View and supporting all the same props, but with:
+ *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
+ */
+const BaseView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...rest
+  } = _ref;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const styleProp = Array.isArray(style) ? [...style] : [style];
+
+  if (!themeOptions.forceZIndex) {
+    styleProp.unshift(styles.resetZIndex);
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...rest,
+    style: styleProp,
+    ref: ref,
+    children: children
+  });
+});
+BaseView.displayName = 'BaseView';
+
+const styles = _StyleSheet.default.create({
+  resetZIndex: {
+    zIndex: 'auto'
+  }
+});
+
+BaseView.propTypes = {
+  children: _propTypes.default.node,
+  style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array])
+};
+var _default = BaseView;
+exports.default = _default;

package/lib/utils/BaseView/BaseView.native.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
+ */
+var _default = _View.default;
+exports.default = _default;

package/lib/utils/BaseView/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _BaseView = _interopRequireDefault(require("./BaseView"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _BaseView.default;
+exports.default = _default;

package/lib/utils/index.js

@@ -13,8 +13,15 @@ var _exportNames = {
   useScrollBlocking: true,
   useUniqueId: true,
   withLinkRouter: true,
-  containUniqueFields: true
+  containUniqueFields: true,
+  BaseView: true
 };
+Object.defineProperty(exports, "BaseView", {
+  enumerable: true,
+  get: function () {
+    return _BaseView.default;
+  }
+});
 Object.defineProperty(exports, "containUniqueFields", {
   enumerable: true,
   get: function () {
@@ -206,6 +213,8 @@ Object.keys(_ssr).forEach(function (key) {
 
 var _containUniqueFields = _interopRequireDefault(require("./containUniqueFields"));
 
+var _BaseView = _interopRequireDefault(require("./BaseView"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/utils/input.js

@@ -84,6 +84,7 @@ const useInputValue = function () {
   const {
     value,
     initialValue,
+    inputRef,
     onChange,
     readOnly = false
   } = props;
@@ -97,19 +98,26 @@ const useInputValue = function () {
   }); // Make current value accessible inside useCallback without rememoizing every time the value changes
 
   valueRef.current.value = currentValue;
+  const isDirty = currentValue !== valueRef.current.initial;
   const setValue = (0, _react.useCallback)((arg, event) => {
     if (readOnly) return;
     const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
-    if (!isControlled) setOwnValue(newValue); // Call onChange handler if there's something for it to handle (event or a changed value)
+
+    if (!isControlled) {
+      setOwnValue(newValue);
+      if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue !== null && newValue !== void 0 ? newValue : '';
+    } // Call onChange handler if there's something for it to handle (event or a changed value)
+
 
     if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
-  }, [isControlled, onChange, readOnly]);
+  }, [inputRef, isControlled, onChange, readOnly]);
   const resetValue = (0, _react.useCallback)(event => setValue(valueRef.current.initial, event), [setValue]);
   return {
     currentValue,
     setValue,
     resetValue,
-    isControlled
+    isControlled,
+    isDirty
   };
 };
 /**

package/lib/utils/props/handlerProps.js

@@ -40,6 +40,11 @@ const textInputHandlerProps = {
      */
     onChangeText: _propTypes.default.func,
 
+    /**
+     * onClear handler
+     */
+    onClear: _propTypes.default.func,
+
     /**
      * onSubmit handler
      */

package/lib-module/BaseProvider/index.js

@@ -34,7 +34,8 @@ BaseProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
   themeOptions: PropTypes.shape({
-    forceAbsoluteFontSizing: PropTypes.bool
+    forceAbsoluteFontSizing: PropTypes.bool,
+    forceZIndex: PropTypes.bool
   })
 };
 export default BaseProvider;

package/lib-module/Box/Box.js

@@ -14,9 +14,22 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  */
 
 const selectBoxStyles = tokens => {
-  const styles = {
+  let styles = {
     backgroundColor: tokens.backgroundColor
   };
+
+  if (tokens.gradient) {
+    const {
+      gradient: {
+        angle,
+        stops: [stopOne, stopTwo]
+      }
+    } = tokens;
+    styles = { ...styles,
+      backgroundImage: "linear-gradient(".concat(angle, "deg, ").concat(stopOne.color, ", 75% , ").concat(stopTwo.color, ")")
+    };
+  }
+
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']; // Only set on styles if token provided because we spread this object after the spacing scale values
 
   paddings.forEach(side => {

package/lib-module/Button/ButtonBase.js

@@ -139,7 +139,9 @@ const selectTextStyles = (_ref6, themeOptions) => {
     lineHeight,
     fontName,
     fontWeight,
-    textAlign
+    textAlign,
+    textLine,
+    textLineStyle
   } = _ref6;
   return applyTextStyles({
     fontSize,
@@ -148,7 +150,9 @@ const selectTextStyles = (_ref6, themeOptions) => {
     fontName,
     fontWeight,
     themeOptions,
-    textAlign
+    textAlign,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle
   });
 };