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

package/lib/esm/index.js

@@ -1,74 +1,167 @@
-export { default as A11yText } from './A11yText';
-export { default as ActionCard } from './ActionCard';
-export { default as ActivityIndicator } from './ActivityIndicator';
-export { default as Autocomplete } from './Autocomplete';
-export { default as Box } from './Box';
-export { default as Badge } from './Badge';
-export * from './Button';
-export { default as Card, PressableCardBase } from './Card';
-export { default as CardGroup } from './CardGroup';
-export * from './Carousel';
-export { default as FileUpload } from './FileUpload';
-export { default as Listbox } from './Listbox';
-export { default as Checkbox } from './Checkbox';
-export * from './Checkbox';
-export { default as CheckboxCard } from './CheckboxCard';
-export { default as CheckboxCardGroup } from './CheckboxCardGroup';
-export { default as ColourToggle } from './ColourToggle';
-export { default as DownloadApp } from './DownloadApp';
-export { default as Divider } from './Divider';
-export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
-export { default as ExpandCollapseMini } from './ExpandCollapseMini';
-export { default as Feedback } from './Feedback';
-export { default as Fieldset } from './Fieldset';
-export * from './FlexGrid';
-export { default as FlexGrid } from './FlexGrid';
-export { default as Footnote } from './Footnote';
-export { default as HorizontalScroll, horizontalScrollUtils, HorizontalScrollButton } from './HorizontalScroll';
-export { default as Icon, IconText, iconComponentPropTypes } from './Icon';
-export { default as IconButton } from './IconButton';
-export { default as InputLabel } from './InputLabel';
-export { default as InputSupports } from './InputSupports';
-export * from './Link';
-export { default as List, ListItem, ListBase } from './List';
-export { default as Modal } from './Modal';
-export { default as MultiSelectFilter } from './MultiSelectFilter';
-export { default as Notification } from './Notification';
-export { default as OrderedList, OrderedListItem } from './OrderedList';
-export { default as Pagination } from './Pagination';
-export { default as PriceLockup } from './PriceLockup';
-export { default as ProductCard } from './ProductCard';
-export { default as ProductCardGroup } from './ProductCardGroup';
-export { default as Progress } from './Progress';
-export { default as QuickLinks } from './QuickLinks';
-export { default as QuickLinksFeature } from './QuickLinksFeature';
-export { default as Radio, RadioGroup } from './Radio';
-export { default as RadioCard, RadioCardGroup } from './RadioCard';
-export { default as Responsive } from './Responsive';
-export { default as Search } from './Search';
-export { default as Select } from './Select';
-export { default as Shortcuts, ShortcutsItem } from './Shortcuts';
-export { default as SideNav } from './SideNav';
-export { default as Skeleton } from './Skeleton';
-export { default as SkipLink } from './SkipLink';
-export { default as Spacer } from './Spacer';
-export { default as StackView, StackWrap, getStackedContent } from './StackView';
-export { default as Status } from './Status';
-export { default as StepTracker } from './StepTracker';
-export { default as Tabs } from './Tabs';
-export { default as TabBar } from './TabBar';
-export { default as Tags } from './Tags';
-export * from './TextInput';
-export { default as Timeline } from './Timeline';
-export * from './ToggleSwitch';
-export { default as Tooltip } from './Tooltip';
-export { default as TooltipButton } from './TooltipButton';
-export { default as Typography } from './Typography';
-export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
-export { default as BaseProvider } from './BaseProvider';
+export { A11yInfoProvider, useA11yInfo } from './A11yInfoProvider/A11yInfoProvider';
+export { A11yText } from './A11yText/A11yText';
+export { ActionCard } from './ActionCard/ActionCard';
+export { ActivityIndicator } from './ActivityIndicator/ActivityIndicator';
+export { Autocomplete } from './Autocomplete/Autocomplete';
+export { Badge } from './Badge/Badge';
+export { BaseProvider } from './BaseProvider/BaseProvider';
 export { useHydrationContext } from './BaseProvider/HydrationContext';
-export { default as Validator } from './Validator';
-export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken, useResponsiveThemeTokens, useResponsiveThemeTokensCallback } from './ThemeProvider';
-export * from './utils';
-export { default as Portal } from './Portal';
+export { Box } from './Box/Box';
+export { Button } from './Button/Button';
+export { ButtonLink } from './Button/ButtonLink';
+export { ButtonGroup } from './Button/ButtonGroup';
+export { ButtonDropdown } from './Button/ButtonDropdown';
+export { Card } from './Card/Card';
+export { PressableCardBase } from './Card/PressableCardBase';
+export { CardGroup } from './CardGroup/CardGroup';
+export { Carousel } from './Carousel/Carousel';
+export { CarouselItem } from './Carousel/CarouselItem/CarouselItem';
+export { CarouselProvider, useCarousel } from './Carousel/CarouselContext';
+export { Checkbox } from './Checkbox/Checkbox';
+export { CheckboxGroup } from './Checkbox/CheckboxGroup';
+export { CheckboxCard } from './CheckboxCard/CheckboxCard';
+export { CheckboxCardGroup } from './CheckboxCardGroup/CheckboxCardGroup';
+export { ColourToggle } from './ColourToggle/ColourToggle';
+export { Divider } from './Divider/Divider';
+export { DownloadApp } from './DownloadApp/DownloadApp';
+export { ExpandCollapse } from './ExpandCollapse/ExpandCollapse';
+export { ExpandCollapseAccordion } from './ExpandCollapse/ExpandCollapseAccordion';
+export { ExpandCollapsePanel } from './ExpandCollapse/ExpandCollapsePanel';
+export { ExpandCollapseMini } from './ExpandCollapseMini/ExpandCollapseMini';
+export { Feedback } from './Feedback/Feedback';
+export { Fieldset } from './Fieldset/Fieldset';
+export { FileUpload } from './FileUpload/FileUpload';
+export { FlexGrid } from './FlexGrid/FlexGrid';
+export { FlexGridRow } from './FlexGrid/FlexGridRow/FlexGridRow';
+export { FlexGridCol } from './FlexGrid/FlexGridCol/FlexGridCol';
+export { Footnote } from './Footnote/Footnote';
+export { FootnoteLink } from './Footnote/FootnoteLink';
+export { HorizontalScroll, horizontalScrollUtils } from './HorizontalScroll/HorizontalScroll';
+export { HorizontalScrollButton } from './HorizontalScroll/HorizontalScrollButton';
+export { Icon, iconComponentPropTypes } from './Icon/Icon';
+export { IconText } from './Icon/IconText';
+export { IconButton, IconButtonBase } from './IconButton/IconButton';
+export { InputLabel } from './InputLabel/InputLabel';
+export { InputSupports } from './InputSupports/InputSupports';
+export { ChevronLink } from './Link/ChevronLink';
+export { Link } from './Link/Link';
+export { LinkBase } from './Link/LinkBase';
+export { TextButton } from './Link/TextButton';
+export { List } from './List/List';
+export { ListItem } from './List/ListItem';
+export { Listbox } from './Listbox/Listbox';
+export { ListboxOverlay } from './Listbox/ListboxOverlay';
+export { Modal } from './Modal/Modal';
+export { MultiSelectFilter } from './MultiSelectFilter/MultiSelectFilter';
+export { Notification } from './Notification/Notification';
+export { OrderedList } from './OrderedList/OrderedList';
+export { OrderedListItem } from './OrderedList/OrderedListItem';
+export { Pagination } from './Pagination/Pagination';
+export { PaginationPageButton, PaginationPageButtonBase } from './Pagination/PaginationPageButton';
+export { Portal } from './Portal/Portal';
+export { PriceLockup } from './PriceLockup/PriceLockup';
+export { ProductCard } from './ProductCard/ProductCard';
+export { ProductCardGroup } from './ProductCardGroup/ProductCardGroup';
+export { Progress } from './Progress/Progress';
+export { ProgressBar } from './Progress/ProgressBar';
+export { QuickLinks } from './QuickLinks/QuickLinks';
+export { QuickLinksItem, QuickLinksItemBase } from './QuickLinks/QuickLinksItem';
+export { QuickLinksFeature } from './QuickLinksFeature/QuickLinksFeature';
+export { QuickLinksFeatureItem, QuickLinksFeatureItemBase } from './QuickLinksFeature/QuickLinksFeatureItem';
+export { Radio } from './Radio/Radio';
+export { RadioGroup } from './Radio/RadioGroup';
+export { RadioCard } from './RadioCard/RadioCard';
+export { RadioCardGroup } from './RadioCard/RadioCardGroup';
+export { Responsive } from './Responsive/Responsive';
+export { Search } from './Search/Search';
+export { Select } from './Select/Select';
+export { SelectItem } from './Select/SelectItem';
+export { SelectGroup } from './Select/SelectGroup';
+export { Shortcuts } from './Shortcuts/Shortcuts';
+export { ShortcutsItem } from './Shortcuts/ShortcutsItem';
+export { SideNav } from './SideNav/SideNav';
+export { SideNavItem } from './SideNav/SideNavItem';
+export { SideNavItemsGroup } from './SideNav/SideNavItemsGroup';
+export { Skeleton } from './Skeleton/Skeleton';
+export { SkipLink, SkipLinkBase } from './SkipLink/SkipLink';
+export { Spacer } from './Spacer/Spacer';
+export { StackView } from './StackView/StackView';
+export { StackWrap } from './StackView/StackWrap';
+export { getStackedContent } from './StackView/getStackedContent';
+export { Status } from './Status/Status';
+export { StepTracker } from './StepTracker/StepTracker';
+export { TabBar } from './TabBar/TabBar';
+export { TabBarItem } from './TabBar/TabBarItem';
+export { Tabs } from './Tabs/Tabs';
+export { Tags } from './Tags/Tags';
+export { TextInput } from './TextInput/TextInput';
+export { TextArea } from './TextInput/TextArea';
+export { ThemeProvider } from './ThemeProvider/ThemeProvider';
+export { useResponsiveThemeTokens } from './ThemeProvider/useResponsiveThemeTokens';
+export { useResponsiveThemeTokensCallback } from './ThemeProvider/useResponsiveThemeTokensCallback';
+export { useSetTheme } from './ThemeProvider/useSetTheme';
+export { useTheme } from './ThemeProvider/useTheme';
+export { useThemeTokens, useThemeTokensCallback } from './ThemeProvider/useThemeTokens';
+export { getThemeTokens, getComponentTheme } from './ThemeProvider/utils/theme-tokens';
+export { applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider/utils/styles';
+export { Timeline } from './Timeline/Timeline';
+export { ToggleSwitch } from './ToggleSwitch/ToggleSwitch';
+export { ToggleSwitchGroup } from './ToggleSwitch/ToggleSwitchGroup';
+export { Tooltip } from './Tooltip/Tooltip.native';
+export { TooltipButton } from './TooltipButton/TooltipButton';
+export { Typography } from './Typography/Typography';
+export { Validator } from './Validator/Validator';
+export { useViewport, ViewportContext } from './ViewportProvider/useViewport';
+export { ViewportProvider } from './ViewportProvider/ViewportProvider';
+
+// utils
+export { scaleWithText, getMaxFontMultiplier } from './utils/a11y/textSize';
+export { tagsToRoles, headingTags, supportedTags, layoutTags, textTags, getHeadingLevel, getA11yPropsFromHtmlTag } from './utils/a11y/semantics';
+export { useVerticalExpandAnimation } from './utils/animation/useVerticalExpandAnimation';
+export { unpackFragment, wrapStringsInText } from './utils/children';
+export { useInputValue, useMultipleInputValues } from './utils/input';
+export { getCursorStyle, resolvePressableState, resolvePressableTokens, getPressHandlersWithArgs } from './utils/pressability';
+export { getTokenNames, selectTokens, getTokensPropType, getTokensSetPropType } from './utils/props/tokens';
+export { focusHandlerProps, textInputHandlerProps } from './utils/props/handlerProps';
+export { a11yProps } from './utils/props/a11yProps';
+export { clickProps } from './utils/props/clickProps';
+export { copyPropTypes } from './utils/props/copyPropTypes';
+export { componentPropType } from './utils/props/componentPropType';
+export { hrefAttrsProp } from './utils/props/hrefAttrsProp';
+export { inputSupportsProps } from './utils/props/inputSupportsProps';
+export { linkProps } from './utils/props/linkProps';
+export { pressProps } from './utils/props/pressProps';
+export { paddingProp } from './utils/props/paddingProp';
+export { rectProp } from './utils/props/rectProp';
+export { responsiveProps } from './utils/props/responsiveProps';
+export { spacingProps } from './utils/props/spacingProps';
+export { selectSystemProps } from './utils/props/selectSystemProps';
+export { textInputProps } from './utils/props/textInputProps';
+export { textProps } from './utils/props/textProps';
+export { variantProp } from './utils/props/variantProp';
+export { viewProps } from './utils/props/viewProps';
+export { contentfulProps } from './utils/props/contentfulProps';
+export { StyleSheet, createMediaQueryStyles, useAllViewportTokens } from './utils/ssr-media-query/ssr-media-query';
+export { info } from './utils/info/info';
+export { useCopy } from './utils/useCopy';
+export { useHash } from './utils/useHash';
+export { useSpacingScale } from './utils/useSpacingScale';
+export { useMediaQuerySpacing } from './utils/useMediaQuerySpacing';
+export { useResponsiveProp } from './utils/useResponsiveProp';
+export { useOverlaidPosition } from './utils/useOverlaidPosition';
+export { useSafeLayoutEffect } from './utils/useSafeLayoutEffect';
+export { useScrollBlocking } from './utils/useScrollBlocking';
+export { resolveResponsiveProp } from './utils/useResponsiveProp';
+export { useUniqueId } from './utils/useUniqueId';
+export { withLinkRouter } from './utils/withLinkRouter';
+export { ssrStyles, getReactNativeWebSSRStyles, getSSRStyles } from './utils/ssr';
+export { containUniqueFields } from './utils/containUniqueFields';
+export { BaseView } from './utils/BaseView/BaseView';
+export { htmlAttrs } from './utils/htmlAttrs';
+export { transformGradient } from './utils/transformGradient';
+export { convertFromMegaByteToByte } from './utils/convertFromMegaByteToByte';
+export { formatImageSource } from './utils/formatImageSource';
+export { getSpacingScale } from './utils/getSpacingScale';
+export { useVariants } from './utils/useVariants';
+export { isTouchDevice } from './utils/isTouchDevice';
+export { resolveContentMaxWidth } from './utils/resolveContentMaxWidth';

package/lib/esm/server.js

@@ -1,4 +1,4 @@
-export { default as selectSystemProps } from './utils/props/selectSystemProps';
+export { selectSystemProps } from './utils/props/selectSystemProps';
 export { getTokensPropType } from './utils/props/tokens';
-export { default as htmlAttrs } from './utils/htmlAttrs';
+export { htmlAttrs } from './utils/htmlAttrs';
 export { getComponentTheme, getThemeTokens } from './ThemeProvider/utils/theme-tokens';

package/lib/esm/utils/BaseView/BaseView.js

@@ -2,14 +2,14 @@ import React from 'react';
 import NativeView from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
-import { useTheme } from '../../ThemeProvider';
+import { useTheme } from '../../ThemeProvider/useTheme';
 
 /**
  * Identical to React Native's View and supporting all the same props, but with:
  *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const BaseView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const BaseView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     style,
@@ -38,5 +38,4 @@ const styles = StyleSheet.create({
 BaseView.propTypes = {
   children: PropTypes.node,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
-};
-export default BaseView;
+};

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

@@ -1,5 +1,4 @@
-import BaseView from "react-native-web/dist/exports/View";
 /**
  * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
  */
-export default BaseView;
+export { default as BaseView } from "react-native-web/dist/exports/View";

package/lib/esm/utils/animation/useVerticalExpandAnimation.js

@@ -2,11 +2,11 @@ import { useEffect, useRef, useState } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Easing from "react-native-web/dist/exports/Easing";
 import Platform from "react-native-web/dist/exports/Platform";
-import useSafeLayoutEffect from '../useSafeLayoutEffect';
+import { useSafeLayoutEffect } from '../useSafeLayoutEffect';
 
 // TODO: systematise animations
 // https://github.com/telus/universal-design-system/issues/487
-function useVerticalExpandAnimation(_ref) {
+export function useVerticalExpandAnimation(_ref) {
   let {
     containerHeight,
     isExpanded,
@@ -56,7 +56,7 @@ function useVerticalExpandAnimation(_ref) {
       containerStyles.display = 'none';
     } else {
       // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
-      // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
+      // Without some form of hiding, some children leak through even when closed e.g. `ListItem` bullets.
       containerStyles.opacity = 0;
     }
   }
@@ -82,5 +82,4 @@ function useVerticalExpandAnimation(_ref) {
     containerStyles.height = expandAnimatedValue;
   }
   return [containerStyles, elementRef];
-}
-export default useVerticalExpandAnimation;
+}

package/lib/esm/utils/children.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Text from "react-native-web/dist/exports/Text";
-import A11yText from '../A11yText';
+import { A11yText } from '../A11yText/A11yText';
 
 /**
  * Unpacks top-level fragments, so that common compositional patterns such as the following examples

package/lib/esm/utils/containUniqueFields.js

@@ -3,7 +3,7 @@
 // otherwise.
 // Note that if a value of a field in an item is not set, it will be
 // excluded from comparison.
-const containUniqueFields = (items, fields) => {
+export const containUniqueFields = (items, fields) => {
   const map = new Map();
   const itemsHaveDuplicateFields = items.some(item => fields.some(field => {
     if (!map.has(field)) {
@@ -20,5 +20,4 @@ const containUniqueFields = (items, fields) => {
     return false;
   }));
   return !itemsHaveDuplicateFields;
-};
-export default containUniqueFields;
+};

package/lib/esm/utils/convertFromMegaByteToByte.js

@@ -5,6 +5,6 @@
  * @returns {number} The converted value in bytes.
  */
 const BYTES_IN_A_MEGABYTE = 1024 * 1024;
-export default function convertFromMegaByteToByte(megaByte) {
+export function convertFromMegaByteToByte(megaByte) {
   return megaByte * BYTES_IN_A_MEGABYTE;
 }

package/lib/esm/utils/formatImageSource.js

@@ -21,7 +21,6 @@
  * @param {string|number} source - The image source, either a URI string or a number (when a local image source is bundled in IOS or Android app).
  * @returns {object|string} - The formatted image source.
  */
-const formatImageSource = source => typeof source === 'string' && (source.startsWith('http') || source.startsWith('data:')) ? {
+export const formatImageSource = source => typeof source === 'string' && (source.startsWith('http') || source.startsWith('data:')) ? {
   uri: source
-} : source;
-export default formatImageSource;
+} : source;

package/lib/esm/utils/getSpacingScale.js

@@ -41,7 +41,7 @@ const resolveSpacingOptions = space => {
  * @param {Function} getSpacingTokens - A function that retrieves spacing tokens based on the provided options.
  * @returns {number} The calculated spacing scale, ensuring it is non-negative.
  */
-const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
+export const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
   const {
     tokens,
     variant,
@@ -57,5 +57,4 @@ const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
     viewport
   }, tokens);
   return Math.max(size - subtract, 0);
-};
-export default getSpacingScale;
+};

package/lib/esm/utils/hasOwnProperty.js

@@ -6,6 +6,6 @@
  * @param {String} key
  * @returns {Boolean}
  */
-export default function hasOwnProperty(object, key) {
+export function hasOwnProperty(object, key) {
   return Object.prototype.hasOwnProperty.call(object, key);
 }

package/lib/esm/utils/htmlAttrs.js

@@ -11,7 +11,7 @@ const htmlAttrTypes = {
   testID: PropTypes.string,
   title: PropTypes.string
 };
-export default {
+export const htmlAttrs = {
   types: htmlAttrTypes,
   select: props => Object.entries(props).reduce((items, _ref) => {
     let [key, value] = _ref;

package/lib/esm/utils/info/info.js

@@ -0,0 +1,6 @@
+import { platform } from './platform/platform';
+import { versions } from './versions';
+export const info = {
+  platform,
+  versions
+};

package/lib/esm/utils/info/platform/platform.android.js

@@ -1 +1 @@
-export default '.android';
+export const fileSuffix = '.android';

package/lib/esm/utils/info/platform/platform.ios.js

@@ -1 +1 @@
-export default '.ios';
+export const fileSuffix = '.ios';

package/lib/esm/utils/info/platform/platform.js

@@ -1 +1,10 @@
-export default '.web (default)';
+import Platform from "react-native-web/dist/exports/Platform"; // Allows consuming libraries that might not have a direct dependency on
+// React Native to check what the current platform is.
+// Particularly useful for validating Jest config: it is possible for Jest to
+// get configured such that Platform.OS returns a different mocked value to the
+// OS being used to select files by platform suffix (e.g. .web, .native).
+export const fileSuffix = '.web (default)';
+export const platform = {
+  OS: Platform.OS,
+  fileSuffix
+};

package/lib/esm/utils/info/platform/platform.native.js

@@ -1,4 +1,4 @@
 // This shouldn't ever be chosen, as the more specific '.ios' and '.android' are available.
 // If this gets picked, either an unsupported React Native platform is being used somehow
 // (e.g. a native Windows app), or there's a serious config problem somewhere.
-export default '.native';
+export const fileSuffix = '.native';

package/lib/esm/utils/info/versions.js

@@ -1,6 +1,6 @@
 import pkgJson from '../../../package.json';
 
 // Add more versions if they are useful e.g. theme schema version
-export default {
+export const versions = {
   uds: pkgJson.version
 };

package/lib/esm/utils/isTouchDevice.js

@@ -4,7 +4,7 @@ import Platform from "react-native-web/dist/exports/Platform";
  *
  * @returns {boolean} True if the device supports touch, false otherwise
  */
-const isTouchDevice = () => {
+export const isTouchDevice = () => {
   if (Platform.OS !== 'web') {
     return true;
   }
@@ -23,5 +23,4 @@ const isTouchDevice = () => {
     }
   }
   return false;
-};
-export default isTouchDevice;
+};

package/lib/esm/utils/pressability.js

@@ -1,6 +1,6 @@
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import pressProps from './props/pressProps';
+import { pressProps } from './props/pressProps';
 
 /**
  * @typedef {import('react').ReactNode} ReactNode

package/lib/esm/utils/props/a11yProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 
 // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
 // so we have to define them ourselves.
@@ -246,7 +246,7 @@ if (Platform.OS === 'web') {
     };
   };
 }
-export default {
+export const a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
    * Spread this in the propTypes of components that accept React Native a11y props.

package/lib/esm/utils/props/clickProps.js

@@ -4,7 +4,7 @@ const clickHandlerMapping = {
   onMouseDown: 'onPressIn',
   onMouseUp: 'onPressOut'
 };
-export default {
+export const clickProps = {
   /**
    * Web-oriented HTML click handlers that may be mapped to React Native press handlers
    */

package/lib/esm/utils/props/componentPropType.js

@@ -7,7 +7,7 @@
  * @param {string|string[]} passedName
  * @return {function}
  */
-export default function componentPropType(passedName) {
+export function componentPropType(passedName) {
   const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
   const checkProp = (props, propName, componentName) => {
     if (props[propName] === undefined || props[propName] === null) {

package/lib/esm/utils/props/contentfulProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 const contentfulPropsTypes = {
   ...Platform.select({
     web: {
@@ -10,7 +10,7 @@ const contentfulPropsTypes = {
     default: {}
   })
 };
-export default {
+export const contentfulProps = {
   /**
    * Set of contentful properties used for the content preview inspector.
    */

package/lib/esm/utils/props/copyPropTypes.js

@@ -1,2 +1,2 @@
 import PropTypes from 'prop-types';
-export default PropTypes.oneOf(['en', 'fr']);
+export const copyPropTypes = PropTypes.oneOf(['en', 'fr']);

package/lib/esm/utils/props/getPropSelector.js

@@ -1,5 +1,5 @@
 import merge from 'lodash.merge';
-import hasOwnProperty from '../hasOwnProperty';
+import { hasOwnProperty } from '../hasOwnProperty';
 
 /**
  * @callback PropSelectorCallback - a callback called for each prop passed to a component
@@ -36,7 +36,7 @@ const applyCallback = (callback, items, key, value) => {
  * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
  * @returns {object} - valid props for this component
  */
-export default function getPropSelector(propTypes, regexp, callback) {
+export function getPropSelector(propTypes, regexp, callback) {
   return props => Object.entries(props).reduce((items, _ref) => {
     let [key, value] = _ref;
     return (

package/lib/esm/utils/props/handlerProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 const focusHandlerProps = {
   types: {
     /**

package/lib/esm/utils/props/hrefAttrsProp.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 // Props related to HTML <a> anchor link attributes.
 const targetValues = ['_self', '_blank', '_parent', '_top'];
-export default {
+export const hrefAttrsProp = {
   types: {
     // React Native Web >= 0.15.0 supports hrefAttrs prop with only these properties
     // and passes them to <a> if an element has a href prop or accessibilityRole "link"

package/lib/esm/utils/props/inputSupportsProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import tooltipPropTypes from '../../Tooltip/shared';
-export default {
+import { propTypes as tooltipPropTypes } from '../../Tooltip/shared';
+export const inputSupportsProps = {
   types: {
     /**
      * Whether the English or French copy will be used (e.g. for accessibility labels).

package/lib/esm/utils/props/linkProps.js

@@ -2,16 +2,16 @@ import Linking from "react-native-web/dist/exports/Linking";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { pressPropTypes } from './pressProps';
-import a11yProps from './a11yProps';
-import hrefAttrsProp from './hrefAttrsProp';
-import getPropSelector from './getPropSelector';
+import { a11yProps } from './a11yProps';
+import { hrefAttrsProp } from './hrefAttrsProp';
+import { getPropSelector } from './getPropSelector';
 const linkPropTypes = {
   ...pressPropTypes,
   href: PropTypes.string,
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   ...a11yProps.types
 };
-export default {
+export const linkProps = {
   /**
    * Proptypes for components that, on Web, can output <a href="..."> link elements
    */

package/lib/esm/utils/props/paddingProp.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-export default {
+export const paddingProp = {
   propType: PropTypes.shape({
     paddingBottom: PropTypes.number,
     paddingLeft: PropTypes.number,

package/lib/esm/utils/props/pressProps.js

@@ -1,7 +1,7 @@
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import rectProp from './rectProp';
-import getPropSelector from './getPropSelector';
+import { rectProp } from './rectProp';
+import { getPropSelector } from './getPropSelector';
 const pressHandlerPropTypes = {
   onPress: PropTypes.func,
   onPressIn: PropTypes.func,
@@ -29,7 +29,7 @@ export const pressPropTypes = {
     }
   })
 };
-export default {
+export const pressProps = {
   /**
    * Proptypes for clickable or pressable components, including web-only props
    */

package/lib/esm/utils/props/rectProp.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-export default {
+export const rectProp = {
   propType: PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,