@telus-uds/components-base 1.49.0 → 1.51.0

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
 import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp } from '../utils';
 import dictionary from './dictionary';
+import { useViewport } from '../ViewportProvider';
 import Box from '../Box';
 import { Button, ButtonDropdown } from '../Button';
 import { CheckboxGroup } from '../Checkbox';
@@ -13,6 +14,7 @@ import StackView from '../StackView';
 import Typography from '../Typography';
 import { TextButton } from '../Link';
 import ModalOverlay from './ModalOverlay';
+import Modal from '../Modal';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -54,6 +56,7 @@ const MultiSelectFilter = _ref3 => {
     tokens,
     items = [],
     values,
+    maxHeight = false,
     initialValues,
     maxValues,
     onChange,
@@ -63,6 +66,7 @@ const MultiSelectFilter = _ref3 => {
     rowLimit = 12,
     ...rest
   } = _ref3;
+  const viewport = useViewport();
   const {
     currentValues,
     setValues
@@ -73,6 +77,9 @@ const MultiSelectFilter = _ref3 => {
     onChange,
     readOnly
   });
+  const [isOpen, setIsOpen] = useState(false);
+  const [checkedIds, setCheckedIds] = useState(currentValues ?? []);
+  const [maxWidth, setMaxWidth] = useState(false);
   const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
   const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
 
@@ -82,10 +89,34 @@ const MultiSelectFilter = _ref3 => {
     dictionary,
     copy
   });
-  const [isOpen, setIsOpen] = useState(false);
-  const [checkedIds, setCheckedIds] = useState(currentValues ?? []);
-  const colSize = items.length > rowLimit ? 2 : 1;
+  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;
+  useEffect(() => {
+    if (colSize === 1) return setMaxWidth(false);
+    return colSize === 2 && setMaxWidth(true);
+  }, [colSize]);
+  const {
+    headerFontColor,
+    headerFontSize,
+    buttonDirection,
+    headerFontWeight,
+    headerLineHeight,
+    subHeaderFontWeight,
+    subHeaderFontSize,
+    maxHeightSize,
+    maxWidthSize,
+    subHeaderLineHeight,
+    minHeight,
+    minWidth
+  } = useThemeTokens('MultiSelectFilter', tokens, { ...variant,
+    maxHeight,
+    maxWidth
+  }, {
+    viewport
+  });
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
@@ -109,6 +140,11 @@ const MultiSelectFilter = _ref3 => {
     setIsOpen(false);
   };
 
+  const onClear = () => {
+    setCheckedIds(() => []);
+    onApply([]);
+  };
+
   const {
     align,
     offsets
@@ -116,9 +152,7 @@ const MultiSelectFilter = _ref3 => {
     xs: {
       align: {
         top: 'top',
-        left: 'left',
-        bottom: 'bottom',
-        right: 'right'
+        left: 'left'
       }
     },
     sm: {
@@ -131,6 +165,16 @@ const MultiSelectFilter = _ref3 => {
       }
     }
   });
+  const headerStyles = applyTextStyles({
+    fontSize: headerFontSize,
+    fontWeight: headerFontWeight,
+    fontColor: headerFontColor
+  });
+  const subeHeaderStyles = applyTextStyles({
+    fontSize: subHeaderFontSize,
+    fontWeight: subHeaderFontWeight,
+    fontColor: selectSubTitleTokens(themeTokens)
+  });
   const {
     overlaidPosition,
     onTargetLayout,
@@ -151,20 +195,96 @@ const MultiSelectFilter = _ref3 => {
       onChange: handleChange,
       tokens: getButtonTokens,
       inactive: inactive
-    }, id), isOpen && /*#__PURE__*/_jsxs(ModalOverlay, {
+    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsxs(Modal, {
+      isOpen: isOpen,
+      onClose: () => setIsOpen(false),
+      children: [/*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsx(Typography, {
+          tokens: { ...headerStyles,
+            lineHeight: headerLineHeight
+          },
+          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
+        })
+      }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Spacer, {
+          space: 5
+        }), /*#__PURE__*/_jsx(Row, {
+          children: /*#__PURE__*/_jsx(Typography, {
+            tokens: { ...subeHeaderStyles,
+              lineHeight: subHeaderLineHeight
+            },
+            children: subtitle
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(Box, {
+        scroll: true,
+        children: /*#__PURE__*/_jsx(Row, {
+          distribute: "between",
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
+            xs: 12 / colSize,
+            children: [/*#__PURE__*/_jsx(CheckboxGroup, {
+              items: items.slice(i * rowLength, (i + 1) * rowLength),
+              checkedIds: checkedIds,
+              onChange: e => setCheckedIds(e, i)
+            }), /*#__PURE__*/_jsx(Spacer, {
+              size: 4
+            })]
+          }, i))
+        })
+      }), /*#__PURE__*/_jsx(Divider, {
+        variant: selectDividerToknes({ ...themeTokens,
+          width: 'full'
+        }),
+        space: 4
+      }), /*#__PURE__*/_jsx(Row, {
+        horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
+        children: /*#__PURE__*/_jsxs(StackView, {
+          direction: buttonDirection,
+          space: 3,
+          tokens: {
+            alignItems: 'center',
+            ...(viewport === 'xs' && {
+              flexGrow: 1
+            })
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            onPress: () => onApply(checkedIds),
+            variant: {
+              size: 'small',
+              priority: 'high',
+              ...(viewport === 'xs' && {
+                width: 'full'
+              })
+            },
+            children: getCopy('applyButtonLabel')
+          }), /*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/_jsx(TextButton, {
+              onPress: () => onClear(),
+              children: getCopy('clearButtonLabel')
+            })
+          })]
+        })
+      })]
+    }), isOpen && viewport !== 'xs' && /*#__PURE__*/_jsxs(ModalOverlay, {
       overlaidPosition: overlaidPosition,
-      variant: {
-        width: colSize > 1 ? 'size576' : 's'
-      },
       onClose: () => setIsOpen(false),
-      tokens: tokens,
+      maxHeight: maxHeight,
+      maxHeightSize: maxHeightSize,
+      maxWidthSize: maxWidthSize,
+      minHeight: minHeight,
+      minWidth: minWidth,
+      tokens: { ...tokens,
+        maxWidth
+      },
       copy: copy,
       isReady: isReady,
       onLayout: onTargetLayout,
       children: [/*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            size: 'h4'
+          tokens: { ...headerStyles,
+            lineHeight: headerLineHeight
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
@@ -173,10 +293,9 @@ const MultiSelectFilter = _ref3 => {
           space: 5
         }), /*#__PURE__*/_jsx(Row, {
           children: /*#__PURE__*/_jsx(Typography, {
-            variant: {
-              size: 'h5'
+            tokens: { ...subeHeaderStyles,
+              lineHeight: subHeaderLineHeight
             },
-            tokens: selectSubTitleTokens(themeTokens),
             children: subtitle
           })
         })]
@@ -189,7 +308,7 @@ const MultiSelectFilter = _ref3 => {
           children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
             xs: 12 / colSize,
             children: [/*#__PURE__*/_jsx(CheckboxGroup, {
-              items: items.slice(i * rowLimit, (i + 1) * rowLimit),
+              items: items.slice(i * rowLength, (i + 1) * rowLength),
               checkedIds: checkedIds,
               onChange: e => setCheckedIds(e, i)
             }), /*#__PURE__*/_jsx(Spacer, {
@@ -203,22 +322,29 @@ const MultiSelectFilter = _ref3 => {
         }),
         space: 4
       }), /*#__PURE__*/_jsx(Row, {
+        horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
         children: /*#__PURE__*/_jsxs(StackView, {
-          direction: "row",
+          direction: buttonDirection,
           space: 3,
           tokens: {
-            alignItems: 'center'
+            alignItems: 'center',
+            ...(viewport === 'xs' && {
+              flexGrow: 1
+            })
           },
           children: [/*#__PURE__*/_jsx(Button, {
             onPress: () => onApply(checkedIds),
             variant: {
               size: 'small',
-              priority: 'high'
+              priority: 'high',
+              ...(viewport === 'xs' && {
+                width: 'full'
+              })
             },
             children: getCopy('applyButtonLabel')
           }), /*#__PURE__*/_jsx(Box, {
             children: /*#__PURE__*/_jsx(TextButton, {
-              onPress: () => setCheckedIds([]),
+              onPress: () => onClear(),
               children: getCopy('clearButtonLabel')
             })
           })]
@@ -292,6 +418,11 @@ MultiSelectFilter.propTypes = {
    */
   maxValues: PropTypes.number,
 
+  /**
+   * If provided sets maxHeight to be active
+   */
+  maxHeight: PropTypes.bool,
+
   /**
    * If provided, this function is called when the current selection is changed
    * and is passed an array of the `id`s of all currently selected `items`.

package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Image from "react-native-web/dist/exports/Image";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -6,7 +6,7 @@ import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 import { getTokensPropType, variantProp, withLinkRouter, a11yProps, linkProps, selectSystemProps } from '../utils';
 import { useViewport } from '../ViewportProvider';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
 import { Link } from '../Link';
 import { StackWrap } from '../StackView'; // pass through and type relevant system props - add more sets for interactive components
 
@@ -32,6 +32,7 @@ const selectContainerStyle = _ref => {
   } = _ref;
   return {
     textAlign,
+    outline: 'red',
     width: contentMaxDimension,
     overflow: 'hidden'
   };
@@ -43,6 +44,15 @@ const selectImageContainerStyle = contentMaxDimension => ({
   justifyContent: 'center',
   alignItems: 'center'
 });
+
+const selectLinkToken = _ref2 => {
+  let {
+    outerBorderColor
+  } = _ref2;
+  return {
+    outerBorderColor
+  };
+};
 /**
  * Component export along with QuickLinksFeature to be used as children
  *
@@ -50,7 +60,7 @@ const selectImageContainerStyle = contentMaxDimension => ({
  */
 
 
-const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -58,52 +68,63 @@ const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     imageAccessibilityLabel,
     imageSource,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const viewport = useViewport();
   const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant);
-  const [hover, setHover] = useState(false);
-  const {
-    contentDirection,
-    contentSpace,
-    contentAlignItems,
-    contentMaxDimension,
-    imageDimension,
-    textAlign
-  } = getTokens({
-    viewport,
-    hover
-  });
   return /*#__PURE__*/_jsx(Link, {
     ref: ref,
-    tokens: state => {
-      setHover(state.hover);
-      return getTokens(state);
-    },
     ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(View, {
-      style: selectContainerStyle({
+    tokens: state => selectLinkToken(getTokens(state)),
+    children: _ref4 => {
+      let {
+        hovered: hover,
+        pressed,
+        focused: focus
+      } = _ref4;
+      const {
+        contentDirection,
+        contentSpace,
+        contentAlignItems,
         contentMaxDimension,
-        textAlign
-      }),
-      children: /*#__PURE__*/_jsxs(StackWrap, {
-        direction: contentDirection,
-        space: contentSpace,
-        tokens: {
-          alignItems: contentAlignItems
-        },
-        children: [/*#__PURE__*/_jsx(View, {
-          style: selectImageContainerStyle(contentMaxDimension),
-          children: /*#__PURE__*/_jsx(Image, {
-            accessibilityIgnoresInvertColors: true,
-            imageAccessibilityLabel: imageAccessibilityLabel,
-            source: imageSource,
-            style: selectImageStyle(imageDimension)
-          })
-        }), /*#__PURE__*/_jsx(Text, {
-          children: children
-        })]
-      })
-    })
+        imageDimension,
+        textLine,
+        gap,
+        ...themeTokens
+      } = getTokens({
+        viewport,
+        hover,
+        pressed,
+        focus
+      });
+      const textStyle = { ...applyTextStyles(themeTokens),
+        textDecorationLine: textLine
+      };
+      return /*#__PURE__*/_jsx(View, {
+        style: selectContainerStyle({ ...themeTokens,
+          contentMaxDimension
+        }),
+        children: /*#__PURE__*/_jsxs(StackWrap, {
+          direction: contentDirection,
+          space: contentSpace,
+          gap: gap,
+          tokens: {
+            alignItems: contentAlignItems
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            style: selectImageContainerStyle(contentMaxDimension),
+            children: /*#__PURE__*/_jsx(Image, {
+              accessibilityIgnoresInvertColors: true,
+              imageAccessibilityLabel: imageAccessibilityLabel,
+              source: imageSource,
+              style: selectImageStyle(imageDimension)
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: textStyle,
+            children: children
+          })]
+        })
+      });
+    }
   });
 });
 QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';

package/lib-module/StepTracker/Step.js

@@ -78,17 +78,18 @@ const selectKnobStyles = (_ref4, isCompleted, isCurrent) => {
     height: knobSize,
     width: knobSize,
     ...(isCompleted && {
-      backgroundColor: knobCompletedBackgroundColor,
-      borderColor: knobCompletedBorderColor,
-      paddingLeft: knobCompletedPaddingLeft,
-      paddingTop: knobCompletedPaddingTop
-    }),
-    ...(isCurrent && {
       backgroundColor: knobCurrentBackgroundColor,
       borderColor: knobCurrentBorderColor,
       borderWidth: knobCurrentBorderWidth,
       paddingLeft: knobCurrentPaddingLeft,
       paddingTop: knobCurrentPaddingTop
+    }),
+    ...(isCurrent && {
+      backgroundColor: knobCompletedBackgroundColor,
+      borderColor: knobCompletedBorderColor,
+      borderWidth: knobCurrentBorderWidth,
+      paddingLeft: knobCompletedPaddingLeft,
+      paddingTop: knobCompletedPaddingTop
     })
   };
 };
@@ -110,7 +111,26 @@ const selectLabelContainerStyles = _ref5 => {
   };
 };
 
-const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
+const selectStepLabelStyles = (_ref6, themeOptions, isCurrent) => {
+  let {
+    stepLabelColor,
+    labelCurrentColor,
+    stepLabelFontWeight,
+    stepLabelFontSize,
+    stepLabelFontName,
+    stepLabelLineHeight
+  } = _ref6;
+  return applyTextStyles({
+    color: isCurrent ? labelCurrentColor : stepLabelColor,
+    fontSize: stepLabelFontSize,
+    lineHeight: stepLabelLineHeight,
+    fontWeight: stepLabelFontWeight,
+    fontName: stepLabelFontName,
+    themeOptions
+  });
+};
+
+const selectLabelStyles = (_ref7, themeOptions, isCurrent) => {
   let {
     labelColor,
     labelCurrentColor,
@@ -119,7 +139,7 @@ const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
     labelFontWeight,
     labelFontName,
     labelLineHeight
-  } = _ref6;
+  } = _ref7;
   return applyTextStyles({
     color: isCurrent ? labelCurrentColor : labelColor,
     fontSize: labelFontSize,
@@ -146,7 +166,7 @@ const getStepTestID = (isCompleted, isCurrent) => {
  */
 
 
-const Step = _ref7 => {
+const Step = _ref8 => {
   let {
     label,
     name,
@@ -155,11 +175,12 @@ const Step = _ref7 => {
     stepIndex = 0,
     tokens,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     completedIcon,
     showStepLabel,
     showStepName,
+    textStepTrackerLabel,
     ...themeTokens
   } = tokens;
   const isFirst = stepIndex === 0;
@@ -193,11 +214,11 @@ const Step = _ref7 => {
       }), /*#__PURE__*/_jsxs(View, {
         style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
         testID: getStepTestID(isCompleted, isCurrent),
-        children: [isCompleted && completedIcon && /*#__PURE__*/_jsx(Icon, {
+        children: [(isCompleted && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/_jsx(View, {
+          style: selectCurrentInnerStyles(themeTokens)
+        }), isCurrent && completedIcon && /*#__PURE__*/_jsx(Icon, {
           icon: completedIcon,
           tokens: selectCompletedIconTokens(themeTokens)
-        }), isCurrent && /*#__PURE__*/_jsx(View, {
-          style: selectCurrentInnerStyles(themeTokens)
         })]
       }), /*#__PURE__*/_jsx(View, {
         style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]
@@ -205,7 +226,7 @@ const Step = _ref7 => {
     }), showStepLabel && /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
       children: [showStepName && /*#__PURE__*/_jsx(Text, {
-        style: [staticStyles.centeredText, selectLabelStyles(tokens, themeOptions, isCurrent)],
+        style: [staticStyles.centeredText, selectStepLabelStyles(tokens, themeOptions, isCurrent)],
         children: name
       }), /*#__PURE__*/_jsx(StackView, {
         direction: "row",

package/lib-module/StepTracker/StepTracker.js

@@ -106,13 +106,16 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
   } = useThemeTokens('StepTracker', tokens, variant, {
     viewport
   });
+  const {
+    textStepTrackerLabel
+  } = themeTokens;
   const getCopy = useCopy({
     dictionary,
     copy
   });
-  const stepTrackerLabel = showStepTrackerLabel ? 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]) : '';
 
-  const getStepLabel = index => themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : '';
+  const getStepLabel = index => themeTokens.showStepLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepLabel : getCopy('stepLabel')).replace('%{stepNumber}', index + 1) : '';
 
   const {
     themeOptions

package/lib-module/StepTracker/dictionary.js

@@ -1,10 +1,30 @@
 export default {
   en: {
-    stepLabel: 'Step %{stepNumber}',
-    stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
+    1: {
+      stepLabel: 'Step %{stepNumber}',
+      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
+    },
+    2: {
+      stepLabel: '%{stepNumber}.',
+      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
+    },
+    3: {
+      stepLabel: 'Step %{stepNumber}',
+      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
+    }
   },
   fr: {
-    stepLabel: 'Étape %{stepNumber}',
-    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+    1: {
+      stepLabel: 'Étape %{stepNumber}',
+      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+    },
+    2: {
+      stepLabel: '%{stepNumber}.',
+      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+    },
+    3: {
+      stepLabel: 'Étape %{stepNumber}',
+      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+    }
   }
 };

package/lib-module/TextInput/TextInput.js

@@ -5,6 +5,8 @@ import InputSupports from '../InputSupports';
 import TextInputBase from './TextInputBase';
 import textInputPropTypes from './propTypes';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
@@ -42,21 +44,23 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/_jsx(InputSupports, {
-    nativeID: nativeID,
-    ...supportsProps,
-    children: _ref2 => {
-      let {
-        inputId,
-        ...propsFromInputSupports
-      } = _ref2;
-      return /*#__PURE__*/_jsx(TextInputBase, {
-        ref: ref,
-        nativeID: inputId,
-        ...propsFromInputSupports,
-        ...inputProps
-      });
-    }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InputSupports, {
+      nativeID: nativeID,
+      ...supportsProps,
+      children: _ref2 => {
+        let {
+          inputId,
+          ...propsFromInputSupports
+        } = _ref2;
+        return /*#__PURE__*/_jsx(TextInputBase, {
+          ref: ref,
+          nativeID: inputId,
+          ...propsFromInputSupports,
+          ...inputProps
+        });
+      }
+    }), rest.children]
   });
 });
 TextInput.displayName = 'TextInput';

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { validateThemeTokensVersion } from './utils';
 import responsiveProps from '../utils/props/responsiveProps';
@@ -24,6 +24,11 @@ const ThemeProvider = _ref => {
     themeOptions = {}
   } = _ref;
   const [theme, setTheme] = useState(defaultTheme);
+  useEffect(() => {
+    if (theme.metadata.name !== defaultTheme.metadata.name) {
+      setTheme(defaultTheme);
+    }
+  }, [theme.metadata.name, defaultTheme]);
   const appliedThemeOptions = { ...defaultThemeOptions,
     ...themeOptions
   }; // Validate the theme tokens version on every render.
@@ -46,7 +51,8 @@ ThemeProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: PropTypes.shape({
     metadata: PropTypes.shape({
-      themeTokensVersion: PropTypes.string.isRequired
+      themeTokensVersion: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
     }).isRequired
   }).isRequired,