@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/cjs/Tabs/TabsDropdown.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TabsDropdown = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -11,15 +11,26 @@ var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/expor
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _Listbox = _interopRequireDefault(require("../Listbox"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _pressability = require("../utils/pressability");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useOverlaidPosition = require("../utils/useOverlaidPosition");
+var _useCopy = require("../utils/useCopy");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _Icon = require("../Icon/Icon");
+var _Listbox = require("../Listbox/Listbox");
+var _ListboxOverlay = require("../Listbox/ListboxOverlay");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectButtonContentStyles = _ref => {
   let {
     backgroundColor,
@@ -53,7 +64,7 @@ const selectButtonContentStyles = _ref => {
  * This is rendered automatically by `Tabs` on mobile viewports and when variant
  * is dropdown and isn't intended to be used directly.
  */
-const TabsDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const TabsDropdown = exports.TabsDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     itemTokens,
     variant,
@@ -64,15 +75,15 @@ const TabsDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     linkRouterProps,
     accessibilityRole = 'button',
     copy = 'en',
-    dictionary: customDictionary = _dictionary.default,
+    dictionary: customDictionary = _dictionary.dictionary,
     ...rest
   } = _ref2;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  const viewport = (0, _ViewportProvider.useViewport)();
+  } = (0, _useTheme.useTheme)();
+  const viewport = (0, _useViewport.useViewport)();
   const [isOpen, setIsOpen] = _react.default.useState(false);
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', itemTokens, {
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('TabsItem', itemTokens, {
     viewport,
     ...variant
   });
@@ -86,7 +97,7 @@ const TabsDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     targetRef,
     onTargetLayout,
     isReady
-  } = (0, _utils.useOverlaidPosition)({
+  } = (0, _useOverlaidPosition.useOverlaidPosition)({
     isShown: isOpen,
     offsets: {
       vertical: 4
@@ -109,7 +120,7 @@ const TabsDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     onPress: event => handleItemSelect(item, event)
   }));
   const isSelected = Boolean(selectedItem && value);
-  const getCopy = (0, _utils.useCopy)({
+  const getCopy = (0, _useCopy.useCopy)({
     dictionary: customDictionary,
     copy
   });
@@ -127,13 +138,13 @@ const TabsDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       style: styles.pressable,
       children: pressableState => {
         // Use resolvePressableTokens like TabBarItem does for proper state handling
-        const resolvedTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
+        const resolvedTokens = (0, _pressability.resolvePressableTokens)(getTokens, pressableState, {
           viewport,
           expanded: isOpen,
           selected: isSelected
         });
-        const textStyles = (0, _ThemeProvider.applyTextStyles)({
-          ...(0, _utils.selectTokens)('Typography', resolvedTokens),
+        const textStyles = (0, _styles.applyTextStyles)({
+          ...(0, _tokens.selectTokens)('Typography', resolvedTokens),
           themeOptions
         });
 
@@ -144,7 +155,7 @@ const TabsDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
             style: textStyles,
             children: selectedItem?.label || getCopy('selectTab')
-          }), dropdownIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          }), dropdownIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             icon: dropdownIcon,
             variant: {
               size: 'micro'
@@ -155,13 +166,13 @@ const TabsDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           })]
         });
       }
-    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxOverlay.ListboxOverlay, {
       overlaidPosition: overlaidPosition,
       maxWidth: 400,
       minWidth: 200,
       isReady: isReady,
       onLayout: onTargetLayout,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.Listbox, {
         items: listboxItems,
         firstItemRef: targetRef,
         parentRef: sourceRef,
@@ -179,12 +190,12 @@ const dictionaryContentShape = _propTypes.default.shape({
 });
 TabsDropdown.propTypes = {
   ...selectedSystemPropTypes,
-  ..._utils.withLinkRouter.propTypes,
+  ..._withLinkRouter.withLinkRouter.propTypes,
   /**
    * Array of tab items
    */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    ..._utils.withLinkRouter.propTypes,
+    ..._withLinkRouter.withLinkRouter.propTypes,
     /** URL to navigate to when the tab is pressed */
     href: _propTypes.default.string,
     /** Display text for the tab */
@@ -207,15 +218,15 @@ TabsDropdown.propTypes = {
   /**
    * Custom tokens for the main Tabs container
    */
-  tokens: (0, _utils.getTokensPropType)('Tabs'),
+  tokens: (0, _tokens.getTokensPropType)('Tabs'),
   /**
    * Custom tokens for `TabsItem`
    */
-  itemTokens: (0, _utils.getTokensPropType)('TabsItem'),
+  itemTokens: (0, _tokens.getTokensPropType)('TabsItem'),
   /**
    * Visual and behavioral variants for the tabs dropdown
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Select English or French copy for the accessible labels.
    * You may also pass in a custom dictionary object.
@@ -247,5 +258,4 @@ const styles = _StyleSheet.default.create({
     width: '100%',
     minHeight: 44
   }
-});
-var _default = exports.default = TabsDropdown;
+});

package/lib/cjs/Tabs/TabsItem.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TabsItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -11,13 +11,23 @@ var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/expor
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-var _HorizontalScroll = require("../HorizontalScroll");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _clickProps = require("../utils/props/clickProps");
+var _tokens = require("../utils/props/tokens");
+var _linkProps = require("../utils/props/linkProps");
+var _pressability = require("../utils/pressability");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _Spacer = require("../Spacer/Spacer");
+var _HorizontalScroll = require("../HorizontalScroll/HorizontalScroll");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const {
   itemPositionsPropType,
   getItemPositionLayoutHandler
@@ -92,7 +102,7 @@ const selectContainerStyles = _ref3 => {
  *
  * This is rendered automatically by `Tabs` and isn't intended be used directly.
  */
-const TabsItem = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const TabsItemInner = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     href,
     variant,
@@ -114,12 +124,12 @@ const TabsItem = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
+  } = _clickProps.clickProps.toPressProps(rawRest);
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', tokens, variant);
-  const resolveTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
+  } = (0, _useTheme.useTheme)();
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('TabsItem', tokens, variant);
+  const resolveTokens = pressableState => (0, _pressability.resolvePressableTokens)(getTokens, pressableState, {
     selected
   });
   const getPressableStyle = pressableState => {
@@ -135,7 +145,7 @@ const TabsItem = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   const handleLayout = getItemPositionLayoutHandler(itemPositions.positions, index);
 
   // On press, update the selection, call any press handler, and open any href in platform-appropriate way
-  const openHref = href && _utils.linkProps.handleHref({
+  const openHref = href && _linkProps.linkProps.handleHref({
     href
   });
   const handlePress = onPress || openHref ? function () {
@@ -186,8 +196,8 @@ const TabsItem = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
       const hasHighlightTriangle = Boolean(themeTokens.highlightTriangleSize);
       const highlightTriangleStyle = hasHighlightTriangle && selectHighlightTriangleStyles(themeTokens);
       const containerStyles = selectContainerStyles(themeTokens);
-      const textStyles = (0, _ThemeProvider.applyTextStyles)({
-        ...(0, _utils.selectTokens)('Typography', themeTokens),
+      const textStyles = (0, _styles.applyTextStyles)({
+        ...(0, _tokens.selectTokens)('Typography', themeTokens),
         themeOptions,
         textAlign
       });
@@ -199,7 +209,7 @@ const TabsItem = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
             style: textStyles,
             children: children
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
           space: space
         }), hasHighlightBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.absolute, highlightBarStyle]
@@ -213,11 +223,11 @@ const TabsItem = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     }
   });
 });
-TabsItem.displayName = 'TabsItem';
-TabsItem.propTypes = {
+TabsItemInner.displayName = 'TabsItem';
+TabsItemInner.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('TabsItem'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('TabsItem'),
+  variant: _variantProp.variantProp.propType,
   onPress: _propTypes.default.func,
   href: _propTypes.default.string,
   index: _propTypes.default.number,
@@ -248,4 +258,4 @@ const staticStyles = _StyleSheet.default.create({
     })
   }
 });
-var _default = exports.default = (0, _utils.withLinkRouter)(TabsItem);
+const TabsItem = exports.TabsItem = (0, _withLinkRouter.withLinkRouter)(TabsItemInner);

package/lib/cjs/Tabs/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     selectTab: 'Select tab'
   },

package/lib/cjs/Tags/Tags.js

@@ -3,24 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Tags = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _StackView = require("../StackView");
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _ButtonBase = require("../Button/ButtonBase");
+var _Icon = require("../Icon/Icon");
+var _StackWrap = require("../StackView/StackWrap");
+var _getStackedContent = require("../StackView/getStackedContent");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _containUniqueFields = require("../utils/containUniqueFields");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _pressProps = require("../utils/props/pressProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
 var _pressability = require("../utils/pressability");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _pressProps.pressProps, _viewProps.viewProps]);
 const separateIconTextTokens = (_ref, returnRest) => {
   let {
     icon,
@@ -62,7 +70,7 @@ const separateIconTextTokens = (_ref, returnRest) => {
 };
 const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
 const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
-const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Tags = exports.Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     variant,
     tokens,
@@ -79,23 +87,23 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     }),
     ...rest
   } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tags', tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Tags', tokens, variant, {
     viewport
   });
-  const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
+  const stackTokens = (0, _tokens.selectTokens)('StackView', themeTokens);
   const {
     direction,
     space
   } = themeTokens;
-  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('TagsItem', tokens, variant);
+  const getItemTokens = (0, _useThemeTokens.useThemeTokensCallback)('TagsItem', tokens, variant);
   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)));
+  (0, _tokens.selectTokens)('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
   const {
     currentValues,
     toggleOneValue
-  } = (0, _utils.useMultipleInputValues)({
+  } = (0, _input.useMultipleInputValues)({
     initialValues,
     values,
     maxValues,
@@ -108,10 +116,10 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
   const itemA11yRole = 'checkbox';
   const uniqueFields = ['id', 'label'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!(0, _containUniqueFields.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.StackWrap, {
     ref: ref,
     ...selectedProps,
     space: space,
@@ -141,10 +149,10 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           checked: isSelected
         },
         accessibilityRole: itemA11yRole,
-        ..._utils.a11yProps.getPositionInSet(items.length, index),
+        ..._a11yProps.a11yProps.getPositionInSet(items.length, index),
         ...itemRest
       });
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.ButtonBase, {
         ref: itemRef,
         ...pressHandlers,
         onPress: handlePress,
@@ -173,7 +181,7 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           } = selectIconTextTokens(itemTokens);
           const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: iconWrapperStyle,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
               icon: IconComponent,
               tokens: iconTokens
             })
@@ -182,7 +190,7 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
             style: textStyles,
             children: label
           });
-          return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconContent, textContent] : [textContent, iconContent], {
+          return (0, _getStackedContent.getStackedContent)(iconPosition === 'left' ? [iconContent, textContent] : [textContent, iconContent], {
             space: iconSpace,
             direction: 'row'
           });
@@ -194,8 +202,8 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 Tags.displayName = 'Tags';
 Tags.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Tags'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Tags'),
+  variant: _variantProp.variantProp.propType,
   /**
    * If provided, sets a maximum number of items a user may select at once.
    */
@@ -224,7 +232,9 @@ Tags.propTypes = {
     /**
      * An optional ref for one individual Tag button in the tags
      */
-    ref: _airbnbPropTypes.default.ref()
+    ref: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+      current: _propTypes.default.any
+    })])
   })),
   /**
    * If provided, this function is called when the current selection is changed
@@ -248,5 +258,4 @@ Tags.propTypes = {
    * AccesibilityRole for the Tags
    */
   accessibilityRole: _propTypes.default.string
-};
-var _default = exports.default = Tags;
+};

package/lib/cjs/TextInput/TextArea.js

@@ -3,17 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TextArea = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../utils");
-var _InputSupports = _interopRequireDefault(require("../InputSupports"));
-var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
-var _ThemeProvider = require("../ThemeProvider");
-var _propTypes = _interopRequireDefault(require("./propTypes"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _inputSupportsProps = require("../utils/props/inputSupportsProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _textInputProps = require("../utils/props/textInputProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _InputSupports = require("../InputSupports/InputSupports");
+var _TextInputBase = require("./TextInputBase");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _propTypes = require("./propTypes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _inputSupportsProps.inputSupportsProps, _handlerProps.textInputHandlerProps, _textInputProps.textInputProps, _viewProps.viewProps]);
 
 /**
  * Use to collect long-form information such as product feedback or support queries.
@@ -39,13 +46,13 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const TextArea = exports.TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant = {},
     ...rest
   } = _ref;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('TextArea', tokens, variant);
   const [inputHeight, setInputHeight] = _react.default.useState();
   const isUpdatingHeight = _react.default.useRef(false);
 
@@ -82,7 +89,7 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     height: inputHeight,
     tokens: themeTokens
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.InputSupports, {
     ...supportsProps,
     inputValue: selectedProps?.value,
     children: _ref3 => {
@@ -90,7 +97,7 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         inputId,
         ...props
       } = _ref3;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.TextInputBase, {
         ref: ref,
         nativeID: inputId,
         ...props,
@@ -106,9 +113,8 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {
   ...selectedSystemPropTypes,
-  ..._propTypes.default,
-  tokens: (0, _utils.getTokensPropType)('TextArea', 'TextInput'),
+  ..._propTypes.textInputPropTypes,
+  tokens: (0, _tokens.getTokensPropType)('TextArea', 'TextInput'),
   // TODO: support both TextArea and TextInput tokens
-  variant: _utils.variantProp.propType
-};
-var _default = exports.default = TextArea;
+  variant: _variantProp.variantProp.propType
+};

package/lib/cjs/TextInput/TextInput.js

@@ -3,16 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TextInput = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
-var _InputSupports = _interopRequireDefault(require("../InputSupports"));
-var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
-var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _inputSupportsProps = require("../utils/props/inputSupportsProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _textInputProps = require("../utils/props/textInputProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _InputSupports = require("../InputSupports/InputSupports");
+var _TextInputBase = require("./TextInputBase");
+var _propTypes2 = require("./propTypes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _inputSupportsProps.inputSupportsProps, _handlerProps.textInputHandlerProps, _textInputProps.textInputProps, _viewProps.viewProps]);
 
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
@@ -32,7 +39,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const TextInput = exports.TextInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     nativeID,
@@ -48,7 +55,7 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.InputSupports, {
       nativeID: nativeID,
       ...supportsProps,
       inputValue: selectedProps?.value,
@@ -57,7 +64,7 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           inputId,
           ...propsFromInputSupports
         } = _ref2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.TextInputBase, {
           ref: ref,
           nativeID: inputId,
           ...propsFromInputSupports,
@@ -74,13 +81,12 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 TextInput.displayName = 'TextInput';
 TextInput.propTypes = {
   ...selectedSystemPropTypes,
-  ..._propTypes2.default,
+  ..._propTypes2.textInputPropTypes,
   /**
    * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
    */
   onClear: _propTypes.default.func,
   onKeyPress: _propTypes.default.func,
-  tokens: (0, _utils.getTokensPropType)('TextInput'),
-  variant: _utils.variantProp.propType
-};
-var _default = exports.default = TextInput;
+  tokens: (0, _tokens.getTokensPropType)('TextInput'),
+  variant: _variantProp.variantProp.propType
+};