@telus-uds/components-base 2.2.0 → 2.4.0

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -25,30 +25,14 @@ const {
   Col,
   Row
 } = FlexGrid;
-const selectSubTitleTokens = _ref => {
-  let {
-    subtitleColor
-  } = _ref;
-  return {
-    color: subtitleColor
-  };
-};
-const selectDividerTokens = _ref2 => {
-  let {
-    dividerColor
-  } = _ref2;
-  return {
-    color: dividerColor
-  };
-};
-const selectHeaderTokens = _ref3 => {
+const selectHeaderTokens = _ref => {
   let {
     contentMarginLeft,
     contentMarginRight,
     contentMarginTop,
     contentPaddingLeft,
     contentPaddingRight
-  } = _ref3;
+  } = _ref;
   return {
     marginLeft: contentMarginLeft,
     marginRight: contentMarginRight,
@@ -58,14 +42,14 @@ const selectHeaderTokens = _ref3 => {
     flexGrow: 1
   };
 };
-const selectControlsTokens = _ref4 => {
+const selectControlsTokens = _ref2 => {
   let {
     contentMarginBottom,
     contentMarginLeft,
     contentMarginRight,
     contentPaddingLeft,
     contentPaddingRight
-  } = _ref4;
+  } = _ref2;
   return {
     marginBottom: contentMarginBottom,
     marginLeft: contentMarginLeft,
@@ -80,7 +64,7 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
 });
 const TOTAL_COLUMNS = 12;
 const MAX_ITEMS_THRESHOLD = 12;
-const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     label,
     subtitle,
@@ -102,7 +86,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     rowLimit = 12,
     dictionary = defaultDictionary,
     ...rest
-  } = _ref5;
+  } = _ref3;
   const viewport = useViewport();
   const {
     currentValues,
@@ -117,23 +101,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [checkedIds, setCheckedIds] = React.useState(currentValues ?? []);
   const [maxWidth, setMaxWidth] = React.useState(false);
-  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
-  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
-  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
-  const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
-  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
-  const isSelected = currentValues.length > 0;
-  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
-  React.useEffect(() => {
-    if (colSize === 1) return setMaxWidth(false);
-    return colSize === 2 && setMaxWidth(true);
-  }, [colSize]);
-  React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const {
     headerFontColor,
     headerFontSize,
@@ -147,6 +114,20 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     subHeaderLineHeight,
     minHeight,
     minWidth,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelColor,
+    labelLineHeight,
+    labelPaddingTop,
+    labelPaddingBottom,
+    labelPaddingLeft,
+    labelPaddingRight,
+    buttonBorderColor,
+    buttonIconSize,
+    buttonIconPadding,
+    subtitleColor,
+    dividerColor,
     ...restTokens
   } = useThemeTokens('MultiSelectFilter', tokens, {
     ...variant,
@@ -155,6 +136,36 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   }, {
     viewport
   });
+  const dropdownTokens = {
+    borderColor: buttonBorderColor,
+    iconSize: buttonIconSize,
+    iconPadding: buttonIconPadding,
+    lineHeight: labelLineHeight,
+    fontName: labelFontName,
+    fontSize: labelFontSize,
+    fontWeight: labelFontWeight,
+    color: labelColor,
+    paddingTop: labelPaddingTop,
+    paddingBottom: labelPaddingBottom,
+    paddingLeft: labelPaddingLeft,
+    paddingRight: labelPaddingRight
+  };
+  const getButtonDropdownTokens = useThemeTokensCallback('ButtonDropdown', dropdownTokens, variant);
+  const getButtonTokens = buttonState => selectTokens('ButtonDropdown', getButtonDropdownTokens(buttonState));
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
+  const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
+  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
+  const isSelected = currentValues.length > 0;
+  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
+  React.useEffect(() => {
+    if (colSize === 1) return setMaxWidth(false);
+    return colSize === 2 && setMaxWidth(true);
+  }, [colSize]);
+  React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const uniqueFields = ['id', 'label'];
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
@@ -213,7 +224,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const subeHeaderStyles = applyTextStyles({
     fontSize: subHeaderFontSize,
     fontWeight: subHeaderFontWeight,
-    fontColor: selectSubTitleTokens(themeTokens)
+    fontColor: subtitleColor
   });
   const {
     overlaidPosition,
@@ -299,7 +310,9 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   });
   const controlsContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [isScrolling ? /*#__PURE__*/_jsx(Divider, {
-      tokens: selectDividerTokens(themeTokens),
+      tokens: {
+        color: dividerColor
+      },
       space: 4
     }) : /*#__PURE__*/_jsx(Spacer, {
       space: 4

package/lib/Notification/Notification.js

@@ -274,6 +274,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
 const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  var _variant$style;
   let {
     children,
     system,
@@ -290,6 +291,9 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     dictionary,
     copy
   });
+
+  // TODO: Remove this once the system style variant is deprecated
+  const isSystemEnabled = system || (variant === null || variant === void 0 || (_variant$style = variant.style) === null || _variant$style === void 0 ? void 0 : _variant$style.includes('system'));
   const {
     themeOptions
   } = useTheme();
@@ -298,7 +302,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   } = themeOptions;
   const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
   const themeTokens = useTokens('Notification', tokens, variant, {
-    system,
+    system: isSystemEnabled,
     viewport
   });
   const maxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
@@ -323,9 +327,9 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, isSystemEnabled);
   } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, system);
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
   }
   if (isDismissed) {
     return null;

package/lib/Search/Search.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps, contentfulProps } from '../utils';
@@ -7,6 +8,7 @@ import TextInputBase from '../TextInput/TextInputBase';
 import ButtonBase from '../Button/ButtonBase';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
+import Icon from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
@@ -33,7 +35,7 @@ const selectInputTokens = _ref => {
     paddingRight: paddingWithButtons
   };
 };
-const selectButtonTokens = tokens => selectTokens('Button', tokens);
+const selectButtonTokens = tokens => selectTokens('SearchButton', tokens);
 const selectIconTokens = _ref2 => {
   let {
     iconSize,
@@ -44,6 +46,26 @@ const selectIconTokens = _ref2 => {
     size: iconSize
   };
 };
+const selectBorderTokens = _ref3 => {
+  let {
+    borderWidth,
+    mobileBorderWidth,
+    ...tokens
+  } = _ref3;
+  return {
+    borderWidth: Platform.OS === 'web' ? borderWidth : mobileBorderWidth,
+    ...tokens
+  };
+};
+const modifyButtonTokens = tokens => {
+  const modifiedTokens = {
+    ...tokens
+  };
+  if (Platform.OS !== 'web') {
+    modifiedTokens.backgroundColor = tokens.mobileBackgroundColor;
+  }
+  return modifiedTokens;
+};
 
 /**
  * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
@@ -58,7 +80,7 @@ const selectIconTokens = _ref2 => {
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const Search = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     initialValue,
     value,
@@ -73,9 +95,10 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tokens,
     variant,
     nativeSubmitBtnID,
+    searchIconPosition = 'right',
     dataSet,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const {
     currentValue = '',
     setValue
@@ -139,8 +162,8 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       testID: testID,
       ...selectInputProps(rest),
       ref: ref,
-      tokens: appearances => selectInputTokens({
-        searchTokens: getThemeTokens(appearances),
+      tokens: pressableStates => selectInputTokens({
+        searchTokens: selectBorderTokens(getThemeTokens(pressableStates)),
         buttonTokens,
         buttonsGapSize,
         isEmpty
@@ -155,16 +178,17 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       onSubmitEditing: handleSubmit,
       onFocus: handleFocus,
       accessibilityLabel: a11yLabelText,
+      direction: searchIconPosition,
       buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
         accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
         onPress: handleClear,
-        tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
+        tokens: pressableStates => modifyButtonTokens(selectButtonTokens(getButtonTokens(pressableStates))),
         children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, {
           ...selectIconTokens(getButtonTokens(buttonState))
         })
-      }, "clear"), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
+      }, "clear"), SubmitButtonIcon && (searchIconPosition === 'right' ? /*#__PURE__*/_jsx(ButtonBase, {
         accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
@@ -180,7 +204,14 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             priority: 'high'
           }))
         })
-      }, "submit")]
+      }, "submit-right") : /*#__PURE__*/_jsx(Icon, {
+        icon: SubmitButtonIcon,
+        testID: "iconLeft",
+        tokens: {
+          color: themeTokens.iconLeftColor,
+          size: themeTokens.iconLeftSize
+        }
+      }, "submitIcon"))]
     })
   });
 });

package/lib/Select/Picker.native.js

@@ -5,7 +5,7 @@ import Platform from "react-native-web/dist/exports/Platform";
 import NativePicker from 'react-native-picker-select';
 import { a11yProps, componentPropType } from '../utils';
 import Group from './Group';
-import { ANDROID_HEIGHT_OFFSET, ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING } from './constants';
+import { ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING, ALLOW_FONT_SCALING, ADJUSTS_FONT_SIZE_TO_FIT, MAX_FONT_SIZE_MULTIPLIER } from './constants';
 
 // Styling of the native input is very limited, most of the styles have to be applied to an additional View
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
@@ -34,8 +34,7 @@ const selectAndroidContainerStyles = _ref2 => {
     paddingLeft: paddingLeft > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
     paddingRight: paddingRight > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
     paddingBottom: ANDROID_DEFAULT_PADDING,
-    paddingTop: ANDROID_DEFAULT_PADDING,
-    height: rest.height + ANDROID_HEIGHT_OFFSET
+    paddingTop: ANDROID_DEFAULT_PADDING
   };
 };
 const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
@@ -94,7 +93,12 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       inputIOS: style,
       inputAndroid: selectAndroidInputStyles(style)
     },
-    placeholder: placeholder !== undefined ? placeholder : {}
+    placeholder: placeholder !== undefined ? placeholder : {},
+    textInputProps: {
+      allowFontScaling: ALLOW_FONT_SCALING,
+      adjustFontSizeToFit: ADJUSTS_FONT_SIZE_TO_FIT,
+      maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER
+    }
   });
   return /*#__PURE__*/_jsx(_Fragment, {
     children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {

package/lib/Select/constants.js

@@ -1,5 +1,7 @@
 // Because Android
 export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
-export const ANDROID_HEIGHT_OFFSET = 12;
 export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
-export const ANDROID_DEFAULT_PADDING = 0;
+export const ANDROID_DEFAULT_PADDING = 0;
+export const ALLOW_FONT_SCALING = true;
+export const ADJUSTS_FONT_SIZE_TO_FIT = true;
+export const MAX_FONT_SIZE_MULTIPLIER = 3;

package/lib/StepTracker/StepTracker.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
@@ -108,7 +109,7 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     dictionary,
     copy
   });
-  const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
+  const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : getCopy('stepTrackerLabel');
   const getStepLabel = index => {
     if (themeTokens.showStepLabel) {
       var _getCopy;
@@ -122,7 +123,6 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
-    accessibilityLevel: 1,
     accessibilityRole: 'progressbar',
     accessibilityValue: {
       min: 0,
@@ -132,6 +132,8 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     },
     ...rest
   });
+  const stepsContainerAccessibilityRole = Platform.OS === 'web' ? 'list' : 'tablist';
+  const stepAccessibilityRole = Platform.OS === 'web' ? 'listitem' : 'tab';
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: selectContainerStyles(themeTokens),
@@ -140,6 +142,7 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       space: 0,
       children: [/*#__PURE__*/_jsx(View, {
         style: staticStyles.stepsContainer,
+        accessibilityRole: stepsContainerAccessibilityRole,
         children: steps.map((label, index) => {
           return /*#__PURE__*/_jsx(Step, {
             status: current,
@@ -147,13 +150,17 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
             name: getStepLabel(index),
             stepIndex: index,
             stepCount: steps.length,
-            tokens: themeTokens
+            tokens: themeTokens,
+            accessibilityRole: stepAccessibilityRole,
+            accessibilityCurrent: current === index && Platform.OS === 'web' && 'step'
           }, label);
         })
       }), showStepTrackerLabel && /*#__PURE__*/_jsx(View, {
         style: [staticStyles.stepTrackerLabelContainer, selectStepTrackerLabelContainerStyles(themeTokens)],
         children: /*#__PURE__*/_jsx(Text, {
           style: selectStepTrackerLabelStyles(themeTokens, themeOptions),
+          accessibilityRole: "header",
+          accessibilityLevel: 2,
           children: stepTrackerLabel
         })
       })]

package/lib/TextInput/TextArea.js

@@ -61,10 +61,6 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = selectProps(rest);
   const inputProps = {
     ...selectedProps,
-    variant: {
-      ...variant,
-      validation: supportsProps.validation
-    },
     multiline: true,
     onContentSizeChange: onHeightChange,
     height: inputHeight,
@@ -72,6 +68,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
+    inputValue: selectedProps === null || selectedProps === void 0 ? void 0 : selectedProps.value,
     children: _ref3 => {
       let {
         inputId,
@@ -79,9 +76,13 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       } = _ref3;
       return /*#__PURE__*/_jsx(TextInputBase, {
         ref: ref,
-        ...inputProps,
         nativeID: inputId,
-        ...props
+        ...props,
+        ...inputProps,
+        variant: {
+          ...variant,
+          validation: props.validation
+        }
       });
     }
   });

package/lib/TextInput/TextInput.js

@@ -38,16 +38,13 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = selectProps(rest);
   const inputProps = {
     ...selectedProps,
-    tokens,
-    variant: {
-      ...variant,
-      validation: supportsProps.validation
-    }
+    tokens
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(InputSupports, {
       nativeID: nativeID,
       ...supportsProps,
+      inputValue: selectedProps === null || selectedProps === void 0 ? void 0 : selectedProps.value,
       children: _ref2 => {
         let {
           inputId,
@@ -57,7 +54,11 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           ref: ref,
           nativeID: inputId,
           ...propsFromInputSupports,
-          ...inputProps
+          ...inputProps,
+          variant: {
+            ...variant,
+            validation: propsFromInputSupports.validation
+          }
         });
       }
     }), rest.children]

package/lib/TextInput/TextInputBase.js

@@ -37,6 +37,9 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let buttonSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
   let buttonsGapSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
   let isPassword = arguments.length > 7 ? arguments[7] : undefined;
+  let iconLeftWidth = arguments.length > 8 ? arguments[8] : undefined;
+  let iconLeftGap = arguments.length > 9 ? arguments[9] : undefined;
+  let direction = arguments.length > 10 ? arguments[10] : undefined;
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -63,6 +66,15 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
       resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
     }
   });
+  const getPaddingLeft = () => {
+    if (type === 'card') {
+      return offsetBorder(paddingLeft + 34);
+    }
+    if (direction === 'left') {
+      return offsetBorder(iconLeftWidth + iconLeftGap + staticStyles.iconLeftContainer.paddingLeft);
+    }
+    return offsetBorder(paddingLeft);
+  };
   const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
   const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
   const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
@@ -73,7 +85,7 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
+    paddingLeft: getPaddingLeft(),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -123,20 +135,26 @@ const selectIconContainerStyles = (_ref4, buttonCount) => {
     paddingBottom
   };
 };
-const selectLeftIconContainerStyles = _ref5 => {
+const selectIconCardLeftContainerStyles = _ref5 => {
   let {
     leftIconPaddingBottom
   } = _ref5;
   return {
-    // not tokenizing paddingLeft as it remains same across brands for now
-    paddingLeft: 10,
     paddingBottom: leftIconPaddingBottom
   };
 };
-const selectButtonsContainerStyle = _ref6 => {
+const selectIconLeftContainerStyles = _ref6 => {
   let {
-    buttonsPaddingRight
+    iconLeftPaddingBottom
   } = _ref6;
+  return {
+    paddingBottom: iconLeftPaddingBottom
+  };
+};
+const selectButtonsContainerStyle = _ref7 => {
+  let {
+    buttonsPaddingRight
+  } = _ref7;
   return {
     paddingRight: buttonsPaddingRight
   };
@@ -180,7 +198,7 @@ const getIcon = function () {
     testID: selectedIcon.testID
   });
 };
-const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -201,8 +219,9 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     variant = {},
     type,
     onKeyPress,
+    direction,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const [isFocused, setIsFocused] = React.useState(false);
   const [showPassword, setShowPassword] = React.useState(false);
   const handleFocus = event => {
@@ -288,14 +307,16 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     defaultCreditIcon,
     amexIcon,
     visaIcon,
-    masterCardIcon
+    masterCardIcon,
+    iconLeftGap
   } = themeTokens;
   const buttonsGapSize = useSpacingScale(buttonsGap);
   const getCopy = useCopy({
     dictionary,
     copy
   });
-  const textInputButtons = buttons;
+  const textInputButtons = direction === 'left' ? buttons.filter(button => button && button.key !== 'submitIcon') : buttons;
+  const submitIcon = direction === 'left' ? buttons.find(button => button && button.key === 'submitIcon') : null;
   if (onClear && isDirty) {
     textInputButtons === null || textInputButtons === void 0 || textInputButtons.unshift(/*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
@@ -339,15 +360,20 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const iconLeftWidth = submitIcon ? submitIcon.props.tokens.size ?? 0 : 0;
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
-  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
+  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword, iconLeftWidth, iconLeftGap, direction);
+  const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive;
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
-    children: [type === 'card' && /*#__PURE__*/_jsx(View, {
+    children: [shouldShowSubmitIcon && /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.iconLeftContainer, selectIconLeftContainerStyles(themeTokens)],
+      children: submitIcon
+    }), type === 'card' && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
-      style: [staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)],
+      style: [staticStyles.iconCardLeftContainer, selectIconCardLeftContainerStyles(themeTokens)],
       children: getIcon(currentValue, {
         defaultCreditIcon,
         amexIcon,
@@ -425,7 +451,15 @@ const staticStyles = StyleSheet.create({
     right: 0,
     bottom: 0
   },
-  leftIconContainer: {
+  iconCardLeftContainer: {
+    paddingLeft: 10,
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
+  },
+  iconLeftContainer: {
+    paddingLeft: 10,
     position: 'absolute',
     left: 0,
     bottom: 0,

package/lib/utils/props/inputSupportsProps.js

@@ -37,7 +37,15 @@ export default {
     /**
      * Use to visually mark an input as valid or invalid.
      */
-    validation: PropTypes.oneOf(['error', 'success'])
+    validation: PropTypes.oneOf(['error', 'success']),
+    /**
+     * The text value from an input field.
+     */
+    inputValue: PropTypes.string,
+    /**
+     * Max number of characters allowed id an input text.
+     */
+    maxCharacterAllowed: PropTypes.number
   },
   select: _ref => {
     let {
@@ -49,7 +57,9 @@ export default {
       feedbackTokens,
       feedbackProps,
       tooltip,
-      validation
+      validation,
+      inputValue,
+      maxCharacterAllowed
     } = _ref;
     return {
       supportsProps: {
@@ -61,7 +71,9 @@ export default {
         feedbackTokens,
         feedbackProps,
         tooltip,
-        validation
+        validation,
+        inputValue,
+        maxCharacterAllowed
       }
     };
   }