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

package/lib/cjs/RadioCard/RadioCardGroup.js

@@ -3,21 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.RadioCardGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _StackView = _interopRequireWildcard(require("../StackView"));
-var _RadioCard = _interopRequireDefault(require("./RadioCard"));
-var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+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 _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _StackView = require("../StackView/StackView");
+var _StackWrap = require("../StackView/StackWrap");
+var _RadioCard = require("./RadioCard");
+var _Fieldset = require("../Fieldset/Fieldset");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _viewProps.viewProps]);
 
 /**
  * A group of Cards that behave as a radio button group. Use when users select a single choice from mutually
@@ -69,7 +75,7 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * />
  * ```
  */
-const RadioCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const RadioCardGroup = exports.RadioCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,
@@ -90,7 +96,7 @@ const RadioCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inactive,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     space,
     fieldSpace,
@@ -102,7 +108,7 @@ const RadioCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     borderBottomLeftRadius,
     borderBottomRightRadius,
     outlineOffset
-  } = (0, _ThemeProvider.useThemeTokens)('RadioCardGroup', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('RadioCardGroup', tokens, variant, {
     viewport
   });
   const borderTokens = {
@@ -116,22 +122,22 @@ const RadioCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     currentValue,
     setValue
-  } = (0, _utils.useInputValue)({
+  } = (0, _input.useInputValue)({
     value: checkedId,
     initialValue: initialCheckedId,
     onChange,
     readOnly: readOnly || inactive
   });
-  const StackContainer = direction === 'row' ? _StackView.StackWrap : _StackView.default;
+  const StackContainer = direction === 'row' ? _StackWrap.StackWrap : _StackView.StackView;
   // Needs 'radiogroup' role on direct parent of radios for MacOS Voiceover's numbering to work,
   // and also needs 'radiogroup' role on fieldset for correct description on focusing the set.
   // TODO: test this on more web screen readers.
 
   const uniqueFields = ['id'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!(0, _containUniqueFields.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
     copy: copy,
     ref: ref,
     name: inputGroupName,
@@ -164,7 +170,7 @@ const RadioCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
           if (newCheckedState) setValue(cardId, event);
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioCard.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioCard.RadioCard, {
           id: cardId,
           checked: currentValue === cardId,
           onChange: handleChange,
@@ -192,15 +198,15 @@ RadioCardGroup.propTypes = {
   /**
    * Optional theme token overrides for the outer RadioCardGroup component
    */
-  tokens: (0, _utils.getTokensPropType)('RadioCardGroup'),
+  tokens: (0, _tokens.getTokensPropType)('RadioCardGroup'),
   /**
    * Optional theme token overrides for each inner RadioCard component
    */
-  radioCardTokens: (0, _utils.getTokensPropType)('RadioCard'),
+  radioCardTokens: (0, _tokens.getTokensPropType)('RadioCard'),
   /**
    * Theme variants, shared between both RadioCardGroup and RadioCard
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Array of objects containing specifics for each RadioCard to be rendered in the group.
    */
@@ -262,5 +268,4 @@ RadioCardGroup.propTypes = {
    * On Web, this is passed to the `name` attribute of the fieldset and each radio input.
    */
   name: _propTypes.default.string
-};
-var _default = exports.default = RadioCardGroup;
+};

package/lib/cjs/Responsive/Responsive.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Responsive = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _ResponsiveProp = _interopRequireDefault(require("./ResponsiveProp"));
-var _ResponsiveWithMediaQueryStyleSheet = _interopRequireDefault(require("./ResponsiveWithMediaQueryStyleSheet"));
+var _useTheme = require("../ThemeProvider/useTheme");
+var _ResponsiveProp = require("./ResponsiveProp");
+var _ResponsiveWithMediaQueryStyleSheet = require("./ResponsiveWithMediaQueryStyleSheet");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -22,7 +22,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  * If enableMediaQueryStyleSheet themeOption is set to true in ThemeProvider, then media query stylesheet
  * is used to hide and show children of `Responsive` within a View.
- */const Responsive = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+
+const Responsive = exports.Responsive = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     min = 'xs',
     max,
@@ -33,9 +35,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   if (enableMediaQueryStyleSheet) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveWithMediaQueryStyleSheet.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveWithMediaQueryStyleSheet.ResponsiveWithMediaQueryStyleSheet, {
       inheritedStyles: inheritedStyles,
       min: min,
       max: max,
@@ -43,7 +45,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
       children: children
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveProp.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveProp.ResponsiveProp, {
     min: min,
     max: max,
     children: children
@@ -66,5 +68,4 @@ Responsive.propTypes = {
    */
   inheritedStyles: _propTypes.default.arrayOf(_propTypes.default.string),
   children: _propTypes.default.node.isRequired
-};
-var _default = exports.default = Responsive;
+};

package/lib/cjs/Responsive/ResponsiveProp.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ResponsiveProp = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _systemConstants = require("@telus-uds/system-constants");
-var _utils = require("../utils");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ResponsiveProp = _ref => {
@@ -25,11 +25,12 @@ const ResponsiveProp = _ref => {
     const maxPlusOne = maxIndex >= 0 ? _systemConstants.viewports.keys[maxIndex + 1] : null;
     if (maxPlusOne) byViewports[maxPlusOne] = null;
   }
-  const responsiveProp = (0, _utils.useResponsiveProp)(byViewports, null);
+  const responsiveProp = (0, _useResponsiveProp.useResponsiveProp)(byViewports, null);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: responsiveProp
   });
 };
+exports.ResponsiveProp = ResponsiveProp;
 ResponsiveProp.displayName = 'Responsive';
 ResponsiveProp.propTypes = {
   /**
@@ -41,5 +42,4 @@ ResponsiveProp.propTypes = {
    */
   max: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl']),
   children: _propTypes.default.node.isRequired
-};
-var _default = exports.default = ResponsiveProp;
+};

package/lib/cjs/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ResponsiveWithMediaQueryStyleSheet = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _systemConstants = require("@telus-uds/system-constants");
-var _utils = require("../utils");
+var _BaseView = require("../utils/BaseView/BaseView");
+var _ssrMediaQuery = require("../utils/ssr-media-query/ssr-media-query");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function generateResponsiveStyles(min, max) {
@@ -29,9 +30,9 @@ function generateResponsiveStyles(min, max) {
       };
     }
   });
-  return (0, _utils.createMediaQueryStyles)(styles, false);
+  return (0, _ssrMediaQuery.createMediaQueryStyles)(styles, false);
 }
-const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ResponsiveWithMediaQueryStyleSheet = exports.ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     min,
     max,
@@ -41,7 +42,7 @@ const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/_react.default.forwardRe
   const {
     ids,
     styles
-  } = _utils.StyleSheet.create({
+  } = _ssrMediaQuery.StyleSheet.create({
     responsive: {
       ...inheritedStyles.reduce((acc, prop) => {
         acc[prop] = 'inherit';
@@ -50,7 +51,7 @@ const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/_react.default.forwardRe
       ...generateResponsiveStyles(min, max)
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseView.BaseView, {
     style: styles.responsive,
     dataSet: ids.responsive && {
       media: ids.responsive
@@ -71,5 +72,4 @@ ResponsiveWithMediaQueryStyleSheet.propTypes = {
   max: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   inheritedStyles: _propTypes.default.arrayOf(_propTypes.default.string),
   children: _propTypes.default.node.isRequired
-};
-var _default = exports.default = ResponsiveWithMediaQueryStyleSheet;
+};

package/lib/cjs/Search/Search.js

@@ -3,22 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Search = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _TextInputBase = _interopRequireDefault(require("../TextInput/TextInputBase"));
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
-var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _useSpacingScale = require("../utils/useSpacingScale");
+var _handlerProps = require("../utils/props/handlerProps");
+var _textInputProps = require("../utils/props/textInputProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _contentfulProps = require("../utils/props/contentfulProps");
+var _TextInputBase = require("../TextInput/TextInputBase");
+var _ButtonBase = require("../Button/ButtonBase");
+var _useCopy = require("../utils/useCopy");
+var _dictionary = require("./dictionary");
+var _Icon = require("../Icon/Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps, _utils.contentfulProps]);
-const [selectInputProps, selectedInputPropTypes] = (0, _utils.selectSystemProps)([_utils.textInputHandlerProps, _utils.textInputProps]);
+const [selectContainerProps, selectedContainerPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps, _contentfulProps.contentfulProps]);
+const [selectInputProps, selectedInputPropTypes] = (0, _selectSystemProps.selectSystemProps)([_handlerProps.textInputHandlerProps, _textInputProps.textInputProps]);
 const selectInputTokens = _ref => {
   let {
     searchTokens,
@@ -38,11 +47,11 @@ const selectInputTokens = _ref => {
   const buttonWidth = paddingLeft + paddingRight + iconSize;
   const paddingWithButtons = inputPaddingRight + (submitButtonIcon ? buttonWidth : 0) + (clearButtonIcon ? buttonsGapSize + buttonWidth : 0);
   return {
-    ...(0, _utils.selectTokens)('TextInput', searchTokens),
+    ...(0, _tokens.selectTokens)('TextInput', searchTokens),
     paddingRight: paddingWithButtons
   };
 };
-const selectButtonTokens = tokens => (0, _utils.selectTokens)('SearchButton', tokens);
+const selectButtonTokens = tokens => (0, _tokens.selectTokens)('SearchButton', tokens);
 const selectIconTokens = _ref2 => {
   let {
     iconSize,
@@ -87,7 +96,7 @@ const modifyButtonTokens = tokens => {
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-const Search = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const Search = exports.Search = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     initialValue,
     value,
@@ -109,22 +118,22 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   const {
     currentValue = '',
     setValue
-  } = (0, _utils.useInputValue)({
+  } = (0, _input.useInputValue)({
     value,
     initialValue,
     onChange
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, {
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Search', tokens, {
     inactive,
     ...variant
   });
-  const buttonTokens = (0, _ThemeProvider.useThemeTokens)('SearchButton', tokens, variant);
-  const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Search', tokens, variant);
-  const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('SearchButton', tokens, variant);
+  const buttonTokens = (0, _useThemeTokens.useThemeTokens)('SearchButton', tokens, variant);
+  const getThemeTokens = (0, _useThemeTokens.useThemeTokensCallback)('Search', tokens, variant);
+  const getButtonTokens = (0, _useThemeTokens.useThemeTokensCallback)('SearchButton', tokens, variant);
 
   // TODO: support overriding the a11y props using a custom dictionary
-  const getCopy = (0, _useCopy.default)({
-    dictionary: _dictionary.default,
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
   const {
@@ -135,7 +144,7 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   } = themeTokens;
 
   // get the actual gap value for the current viewport
-  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
+  const buttonsGapSize = (0, _useSpacingScale.useSpacingScale)(buttonsGap);
   const handleSubmit = event => {
     if (onSubmit !== undefined) {
       onSubmit(currentValue, event);
@@ -163,7 +172,7 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ...containerProps,
     dataSet: dataSet,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.TextInputBase, {
       nativeID: nativeID,
       testID: testID,
       ...selectInputProps(rest),
@@ -185,7 +194,7 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
       onFocus: handleFocus,
       accessibilityLabel: a11yLabelText,
       direction: searchIconPosition,
-      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.ButtonBase, {
         accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
@@ -194,7 +203,7 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
         children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, {
           ...selectIconTokens(getButtonTokens(buttonState))
         })
-      }, "clear"), SubmitButtonIcon && (searchIconPosition === 'right' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      }, "clear"), SubmitButtonIcon && (searchIconPosition === 'right' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.ButtonBase, {
         accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
@@ -210,7 +219,7 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
             priority: 'high'
           }))
         })
-      }, "submit-right") : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      }, "submit-right") : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         icon: SubmitButtonIcon,
         testID: "iconLeft",
         tokens: {
@@ -271,11 +280,10 @@ Search.propTypes = {
     clearButtonAccessibilityLabel: _propTypes.default.string,
     submitButtonAccessibilityLabel: _propTypes.default.string
   })]),
-  tokens: (0, _utils.getTokensPropType)('Search'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Search'),
+  variant: _variantProp.variantProp.propType,
   /**
    * ID for Submit button element on web
    */
   nativeSubmitBtnID: _propTypes.default.string
-};
-var _default = exports.default = Search;
+};

package/lib/cjs/Search/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: {
     accessibilityLabel: 'Search',
     clearButtonAccessibilityLabel: 'Clear',

package/lib/cjs/Select/Picker.js

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Picker = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _componentPropType = require("../utils/props/componentPropType");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _htmlAttrs = require("../utils/htmlAttrs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
-const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs]);
+const Picker = exports.Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     value,
     onChange,
@@ -73,8 +75,7 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     })
   );
 });
-Picker.displayName = 'Picker';
-var _default = exports.default = Picker;
+Picker.displayName = 'SelectPicker';
 Picker.propTypes = {
   ...selectedSystemPropTypes,
   value: _propTypes.default.string,
@@ -93,7 +94,7 @@ Picker.propTypes = {
   onClose: _propTypes.default.func,
   style: _propTypes.default.object,
   inactive: _propTypes.default.bool,
-  children: (0, _utils.componentPropType)(['Item', 'Group']),
+  children: (0, _componentPropType.componentPropType)(['Item', 'Group']),
   placeholder: _propTypes.default.shape({
     value: _propTypes.default.string,
     label: _propTypes.default.string

package/lib/cjs/Select/Picker.native.js

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Picker = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _reactNativePickerSelect = _interopRequireDefault(require("react-native-picker-select"));
-var _utils = require("../utils");
-var _Group = _interopRequireDefault(require("./Group"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _componentPropType = require("../utils/props/componentPropType");
+var _SelectGroup = require("./SelectGroup");
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -43,7 +44,7 @@ const selectAndroidContainerStyles = _ref2 => {
     paddingTop: _constants.ANDROID_DEFAULT_PADDING
   };
 };
-const Picker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Picker = exports.Picker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     value,
     onChange,
@@ -57,7 +58,7 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   } = _ref3;
   // Ungroup items, since there's no way to support groups on native
   const flatChildren = _react.default.Children.toArray(children).flatMap(child => {
-    if (child.type === _Group.default) {
+    if (child.type === _SelectGroup.SelectGroup) {
       return child.props.children;
     }
     return child;
@@ -87,7 +88,7 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     pickerProps: {
       ref
     },
-    touchableWrapperProps: _utils.a11yProps.select(rest),
+    touchableWrapperProps: _a11yProps.a11yProps.select(rest),
     onOpen: onFocus,
     onClose: onBlur,
     disabled: inactive,
@@ -114,7 +115,6 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   });
 });
 Picker.displayName = 'Picker';
-var _default = exports.default = Picker;
 Picker.propTypes = {
   value: _propTypes.default.string,
   onChange: _propTypes.default.func,
@@ -122,7 +122,7 @@ Picker.propTypes = {
   onBlur: _propTypes.default.func,
   style: _propTypes.default.object,
   inactive: _propTypes.default.bool,
-  children: (0, _utils.componentPropType)(['Item', 'Group']),
+  children: (0, _componentPropType.componentPropType)(['Item', 'Group']),
   placeholder: _propTypes.default.shape({
     value: _propTypes.default.string,
     label: _propTypes.default.string