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

package/lib/cjs/utils/useScrollBlocking.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useScrollBlocking = void 0;
 var _react = require("react");
 const addScrollBlocking = (preventScrolling, stopPropagation, ref) => {
   document.body.addEventListener('touchmove', preventScrolling, {
@@ -52,4 +52,4 @@ const useScrollBlocking = conditionProps => {
   }, [preventScrolling, conditionsMet, stopPropagation, refIsMounted]);
   return callbackRef;
 };
-var _default = exports.default = useScrollBlocking;
+exports.useScrollBlocking = useScrollBlocking;

package/lib/cjs/utils/useScrollBlocking.native.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useScrollBlocking = void 0;
 // This is a no-op to emphasize that the original hook is web-only
-var _default = () => {};
-exports.default = _default;
+const useScrollBlocking = () => {};
+exports.useScrollBlocking = useScrollBlocking;

package/lib/cjs/utils/useSpacingScale.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
+exports.useSpacingScale = void 0;
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _useResponsiveProp = require("./useResponsiveProp");
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
@@ -110,7 +110,7 @@ const resolveSpacingOptions = space => {
 const useSpacingScale = spaceValue => {
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     tokens,
     variant,
@@ -120,10 +120,10 @@ const useSpacingScale = spaceValue => {
   const space = !overridden && (spaceValue?.space ?? (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
   const {
     size
-  } = (0, _ThemeProvider.useThemeTokens)('spacingScale', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('spacingScale', tokens, variant, {
     space: typeof space === 'number' ? space : 0,
     viewport
   });
   return Math.max(size - subtract, 0);
 };
-var _default = exports.default = useSpacingScale;
+exports.useSpacingScale = useSpacingScale;

package/lib/cjs/utils/useUniqueId.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.useUniqueId = useUniqueId;
 var _react = require("react");
 function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const id = (0, _react.useId)();
   return `${prefix ? `${prefix}-` : ''}${id}`;
-}
-var _default = exports.default = useUniqueId;
+}

package/lib/cjs/utils/useVariants.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _ThemeProvider = require("../ThemeProvider");
+exports.useVariants = void 0;
+var _useTheme = require("../ThemeProvider/useTheme");
+var _themeTokens = require("../ThemeProvider/utils/theme-tokens");
 /**
  * Generates a label string for a variant based on the provided key and value.
  *
@@ -26,11 +27,11 @@ const getVariantLabel = (key, value) => `${key}${typeof value === 'string' ? `:
  * @throws {Error} If the theme does not define appearances for the given component.
  */
 const useVariants = componentName => {
-  const theme = (0, _ThemeProvider.useTheme)();
+  const theme = (0, _useTheme.useTheme)();
   if (!componentName) return [['default', {}]];
   const {
     appearances
-  } = (0, _ThemeProvider.getComponentTheme)(theme, componentName);
+  } = (0, _themeTokens.getComponentTheme)(theme, componentName);
   if (!appearances) {
     throw new Error(`Theme ${theme.metadata?.name} does not have any appearances set for ${componentName}`);
   }
@@ -43,4 +44,4 @@ const useVariants = componentName => {
   }, [[undefined, undefined, 'default style']]);
   return variants;
 };
-var _default = exports.default = useVariants;
+exports.useVariants = useVariants;

package/lib/cjs/utils/withLinkRouter.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.withLinkRouter = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _hasOwnProperty = _interopRequireDefault(require("./hasOwnProperty"));
+var _hasOwnProperty = require("./hasOwnProperty");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -36,7 +36,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * <Link href={href} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }}>Some link</Link>
  * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
  * ```
- */const withLinkRouter = Component => {
+ */
+const withLinkRouter = Component => {
   const wrappedComponent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     let {
       LinkRouter,
@@ -76,14 +77,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   // Forward any other properties explicitly set e.g. Component.SubComponent
   Object.keys(otherProperties).forEach(key => {
     // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
-    if ((0, _hasOwnProperty.default)(Component, key) && !(0, _hasOwnProperty.default)(wrappedComponent, key)) {
+    if ((0, _hasOwnProperty.hasOwnProperty)(Component, key) && !(0, _hasOwnProperty.hasOwnProperty)(wrappedComponent, key)) {
       wrappedComponent[key] = Component[key];
     }
   });
   return wrappedComponent;
 };
+exports.withLinkRouter = withLinkRouter;
 withLinkRouter.propTypes = {
   LinkRouter: _propTypes.default.elementType,
   linkRouterProps: _propTypes.default.object
-};
-var _default = exports.default = withLinkRouter;
+};

package/lib/esm/A11yInfoProvider/{index.js → A11yInfoProvider.js}

@@ -7,7 +7,7 @@ const ScreenReaderContext = /*#__PURE__*/React.createContext(false);
 const ReducedMotionContext = /*#__PURE__*/React.createContext(false);
 
 // eslint-disable-next-line no-unused-vars
-const A11yInfoProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
+export const A11yInfoProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
   let {
     children
   } = _ref;
@@ -54,7 +54,6 @@ A11yInfoProvider.displayName = 'A11yInfoProvider';
 A11yInfoProvider.propTypes = {
   children: PropTypes.node.isRequired
 };
-export default A11yInfoProvider;
 export const useA11yInfo = () => {
   const screenReaderEnabled = React.useContext(ScreenReaderContext);
   const reduceMotionEnabled = React.useContext(ReducedMotionContext);

package/lib/esm/A11yText/{index.js → A11yText.js}

@@ -3,7 +3,9 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
+import { a11yProps } from '../utils/props/a11yProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { viewProps } from '../utils/props/viewProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -13,7 +15,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const A11yText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     text,
     heading,
@@ -64,5 +66,4 @@ const styles = StyleSheet.create({
     // Ensures it is in the correct position on Native
     top: -1
   }
-});
-export default A11yText;
+});

package/lib/esm/ActionCard/ActionCard.js

@@ -4,10 +4,19 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, clickProps, hrefAttrsProp, linkProps } from '../utils';
-import Icon from '../Icon';
-import Card from '../Card';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { wrapStringsInText } from '../utils/children';
+import { clickProps } from '../utils/props/clickProps';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { linkProps } from '../utils/props/linkProps';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { Icon } from '../Icon/Icon';
+import { Card } from '../Card/Card';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 const selectCardStyles = styles => ['borderColor', 'borderRadius', 'borderWidth'].reduce((acc, key) => {
@@ -153,11 +162,11 @@ const selectActionIconStyles = _ref9 => {
     marginTop: actionIconMarginTop
   };
 };
-const selectActionIconProps = _ref10 => {
+const selectActionIconProps = _ref0 => {
   let {
     actionIcon,
     actionIconColor
-  } = _ref10;
+  } = _ref0;
   return {
     icon: actionIcon,
     tokens: {
@@ -186,7 +195,7 @@ const ACTION_ICON_ANIMATION_DURATION = 100;
  *   </ActionCard>
  * )
  */
-const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+export const ActionCard = /*#__PURE__*/React.forwardRef((_ref1, ref) => {
   let {
     icon,
     title,
@@ -197,7 +206,7 @@ const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref11;
+  } = _ref1;
   const themeTokens = useThemeTokens('ActionCard', tokens, variant);
   const actionIconAnimation = React.useRef(new Animated.Value(0)).current;
   const {
@@ -338,5 +347,4 @@ const staticStyles = StyleSheet.create({
   statusIcon: {
     marginLeft: 4
   }
-});
-export default ActionCard;
+});

package/lib/esm/ActivityIndicator/{index.js → ActivityIndicator.js}

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import { useScrollBlocking } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils/props';
-import FullScreenIndicator from './FullScreenIndicator';
-import OverlayIndicator from './OverlayIndicator';
-import InlineIndicator from './InlineIndicator';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useScrollBlocking } from '../utils/useScrollBlocking';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { FullScreenIndicator } from './FullScreenIndicator';
+import { OverlayIndicator } from './OverlayIndicator';
+import { InlineIndicator } from './InlineIndicator';
 import { jsx as _jsx } from "react/jsx-runtime";
 const labelMapping = {
   top: 'column-reverse',
@@ -19,7 +20,7 @@ const labelMapping = {
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-const ActivityIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ActivityIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
     tokens,
@@ -119,5 +120,4 @@ ActivityIndicator.propTypes = {
    * Background color of the full screen overlay
    */
   fullScreenBackgroundColor: PropTypes.string
-};
-export default ActivityIndicator;
+};

package/lib/esm/ActivityIndicator/Dots.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DOTS_TOTAL_ANIMATION_DURATION, OVERSHOOT_FACTOR, UNDERSHOOT_FACTOR, BOUNCY_CURVE, DOTS_SPACING_X, DOTS_BASE_Y_FACTOR, DOTS_JUMP_HEIGHT_FACTOR, DOTS_PADDING_FACTOR, DOTS_FADEOUT_KEYTIMES, DOTS_FADEOUT_VALUES, DOT1_COLOR_KEYTIMES, DOT2_COLOR_KEYTIMES, DOT3_COLOR_KEYTIMES, DOT1_ANIMATION_KEYTIMES, DOT2_ANIMATION_KEYTIMES, DOT3_ANIMATION_KEYTIMES, propTypes } from './shared';
-import { useA11yInfo } from '../A11yInfoProvider';
+import { useA11yInfo } from '../A11yInfoProvider/A11yInfoProvider';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const CY_PROPS = {
   attributeName: 'cy',
@@ -20,7 +20,7 @@ const OPACITY_PROPS = {
   dur: `${DOTS_TOTAL_ANIMATION_DURATION}ms`,
   repeatCount: 'indefinite'
 };
-const Dots = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Dots = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size,
     color,
@@ -154,5 +154,4 @@ const Dots = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 Dots.displayName = 'Dots';
-Dots.propTypes = propTypes;
-export default Dots;
+Dots.propTypes = propTypes;

package/lib/esm/ActivityIndicator/Dots.native.js

@@ -5,10 +5,10 @@ import Animated from "react-native-web/dist/exports/Animated";
 import Easing from "react-native-web/dist/exports/Easing";
 import Svg, { Circle } from 'react-native-svg';
 import { DOTS_TOTAL_ANIMATION_DURATION, OVERSHOOT_FACTOR, UNDERSHOOT_FACTOR, DOTS_SPACING_X, DOTS_BASE_Y_FACTOR, DOTS_JUMP_HEIGHT_FACTOR, DOTS_PADDING_FACTOR, DOT_FADEOUT_INPUT_RANGE, DOT_FADEOUT_OUTPUT_RANGE, DOT1_ANIMATION_INPUT_RANGE, DOT2_ANIMATION_INPUT_RANGE, DOT3_ANIMATION_INPUT_RANGE, propTypes } from './shared';
-import { useA11yInfo } from '../A11yInfoProvider';
+import { useA11yInfo } from '../A11yInfoProvider/A11yInfoProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
-const Dots = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Dots = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size,
     color,
@@ -208,5 +208,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center'
   }
-});
-export default Dots;
+});

package/lib/esm/ActivityIndicator/FullScreenIndicator.js

@@ -3,13 +3,13 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import StackView from '../StackView';
-import Typography from '../Typography';
-import RenderActivityIndicator from './RenderActivityIndicator';
+import { StackView } from '../StackView/StackView';
+import { Typography } from '../Typography/Typography';
+import { RenderActivityIndicator } from './RenderActivityIndicator';
 import { BACKDROP_Z_INDEX, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared';
 import { activityIndicatorCommonProps } from './sharedProptypes';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FullScreenIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const FullScreenIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variantProps,
     label,
@@ -78,5 +78,4 @@ FullScreenIndicator.propTypes = {
    * Background color for overlay
    * */
   backgroundColor: PropTypes.string.isRequired
-};
-export default FullScreenIndicator;
+};

package/lib/esm/ActivityIndicator/InlineIndicator.js

@@ -3,13 +3,13 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import StackView from '../StackView';
-import Typography from '../Typography';
-import RenderActivityIndicator from './RenderActivityIndicator';
+import { StackView } from '../StackView/StackView';
+import { Typography } from '../Typography/Typography';
+import { RenderActivityIndicator } from './RenderActivityIndicator';
 import { activityIndicatorCommonProps } from './sharedProptypes';
 import { SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const InlineIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const InlineIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variantProps,
     label,
@@ -53,5 +53,4 @@ InlineIndicator.propTypes = {
    * Whether the indicator sits inline with text/other elements
    * */
   inline: PropTypes.bool
-};
-export default InlineIndicator;
+};

package/lib/esm/ActivityIndicator/OverlayIndicator.js

@@ -3,9 +3,9 @@ import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
-import StackView from '../StackView';
-import Typography from '../Typography';
-import RenderActivityIndicator from './RenderActivityIndicator';
+import { StackView } from '../StackView/StackView';
+import { Typography } from '../Typography/Typography';
+import { RenderActivityIndicator } from './RenderActivityIndicator';
 import { BACKDROP_Z_INDEX, BACKDROP_OPACITY, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared';
 import { activityIndicatorCommonProps } from './sharedProptypes';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ const recursiveMap = (nodeChildren, fn) => React.Children.map(nodeChildren, chil
   }
   return fn(child);
 });
-const OverlayIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const OverlayIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variantProps,
     label,
@@ -145,5 +145,4 @@ OverlayIndicator.propTypes = {
    * Controls whether the overlay is active and should apply the presentation role
    * */
   isActive: PropTypes.bool
-};
-export default OverlayIndicator;
+};

package/lib/esm/ActivityIndicator/RenderActivityIndicator.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Spinner from './Spinner';
-import Dots from './Dots';
+import { Spinner } from './Spinner';
+import { Dots } from './Dots';
 import { DOTS_STYLE } from './shared';
 
 /**
@@ -9,7 +9,7 @@ import { DOTS_STYLE } from './shared';
  * Reused in all the variants of the component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const RenderActivityIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const RenderActivityIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant = {},
     dotSize,
@@ -79,5 +79,4 @@ RenderActivityIndicator.propTypes = {
    * if true, there's no animation for ActivityIndicator
    * */
   isStatic: PropTypes.bool
-};
-export default RenderActivityIndicator;
+};

package/lib/esm/ActivityIndicator/Spinner.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { DURATION, SVG_CIRCUMFERENCE, SVG_SIZE, ROTATION_TRANSFORM, SVG_CENTER, SPINNER_RADIUS, SPINNER_ROTATION_DEGREES, SPINNER_DASHARRAY_MIN, SPINNER_DASHARRAY_MAX, SPINNER_KEYTIMES, SPINNER_DASHARRAY_HALF, SPINNER_DASHOFFSET_FACTOR, propTypes } from './shared';
-import { useA11yInfo } from '../A11yInfoProvider';
+import { useA11yInfo } from '../A11yInfoProvider/A11yInfoProvider';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const animateProps = {
   keyTimes: SPINNER_KEYTIMES,
   repeatCount: 'indefinite'
 };
-const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size,
     color,
@@ -81,5 +81,4 @@ const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 Spinner.displayName = 'Spinner';
-Spinner.propTypes = propTypes;
-export default Spinner;
+Spinner.propTypes = propTypes;

package/lib/esm/ActivityIndicator/Spinner.native.js

@@ -4,9 +4,9 @@ import Animated from "react-native-web/dist/exports/Animated";
 import Easing from "react-native-web/dist/exports/Easing";
 import Svg, { Circle } from 'react-native-svg';
 import { DURATION, SVG_CIRCUMFERENCE, SVG_SIZE, SVG_CENTER, SPINNER_RADIUS, SPINNER_DASHARRAY_HALF, SPINNER_DASHARRAY_MIN, SPINNER_DASHOFFSET_FACTOR, propTypes } from './shared';
-import { useA11yInfo } from '../A11yInfoProvider';
+import { useA11yInfo } from '../A11yInfoProvider/A11yInfoProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size,
     color,
@@ -120,5 +120,4 @@ const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 Spinner.displayName = 'Spinner';
-Spinner.propTypes = propTypes;
-export default Spinner;
+Spinner.propTypes = propTypes;

package/lib/esm/Autocomplete/Autocomplete.js

@@ -6,16 +6,24 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import throttle from 'lodash.throttle';
 import matchAll from 'string.prototype.matchall';
-import { inputSupportsProps, selectSystemProps, textInputProps, textInputHandlerProps, useCopy, htmlAttrs, useOverlaidPosition, useSafeLayoutEffect, getTokensPropType } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import Listbox from '../Listbox';
-import Typography from '../Typography';
-import { TextInput } from '../TextInput';
-import InputSupports from '../InputSupports';
-import Loading from './Loading';
-import Suggestions from './Suggestions';
+import { inputSupportsProps } from '../utils/props/inputSupportsProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { textInputProps } from '../utils/props/textInputProps';
+import { textInputHandlerProps } from '../utils/props/handlerProps';
+import { useCopy } from '../utils/useCopy';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { useOverlaidPosition } from '../utils/useOverlaidPosition';
+import { useSafeLayoutEffect } from '../utils/useSafeLayoutEffect';
+import { getTokensPropType } from '../utils/props/tokens';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { ListboxOverlay } from '../Listbox/ListboxOverlay';
+import { Typography } from '../Typography/Typography';
+import { TextInput } from '../TextInput/TextInput';
+import { InputSupports } from '../InputSupports/InputSupports';
+import { Loading } from './Loading';
+import { Suggestions } from './Suggestions';
 import { DEFAULT_MAX_SUGGESTIONS, DEFAULT_MIN_TO_SUGGESTION, DEFAULT_MAX_DROPDOWN_HEIGHT, INPUT_LEFT_PADDING, MIN_LISTBOX_WIDTH } from './constants';
-import dictionary from './dictionary';
+import { dictionary } from './dictionary';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const staticStyles = StyleSheet.create({
   container: {
@@ -97,7 +105,7 @@ const highlight = function () {
     return [...acc, item];
   }, []);
 };
-const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     copy = 'en',
@@ -406,7 +414,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         });
       }
     }), (isExpanded || hintExpansionEnabled) && isInputVisible && (itemsToShow.length > 0 || isExpanded || hintExpansionEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Listbox.Overlay, {
+      children: [/*#__PURE__*/_jsx(ListboxOverlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,
         minWidth: fullWidth ? inputWidth : MIN_LISTBOX_WIDTH,
@@ -527,5 +535,4 @@ Autocomplete.propTypes = {
    * Input value for controlled usage
    */
   value: PropTypes.string
-};
-export default Autocomplete;
+};

package/lib/esm/Autocomplete/Loading.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ActivityIndicator from '../ActivityIndicator';
-import Typography from '../Typography';
-import Box from '../Box';
-import StackView from '../StackView';
+import { ActivityIndicator } from '../ActivityIndicator/ActivityIndicator';
+import { Typography } from '../Typography/Typography';
+import { Box } from '../Box/Box';
+import { StackView } from '../StackView/StackView';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Loading = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Loading = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     label
   } = _ref;
@@ -31,5 +31,4 @@ const Loading = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Loading.displayName = 'Loading';
 Loading.propTypes = {
   label: PropTypes.string
-};
-export default Loading;
+};

package/lib/esm/Autocomplete/Suggestions.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import A11yText from '../A11yText';
-import Typography from '../Typography';
-import Box from '../Box';
-import Listbox from '../Listbox';
+import { A11yText } from '../A11yText/A11yText';
+import { Typography } from '../Typography/Typography';
+import { Box } from '../Box/Box';
+import { Listbox } from '../Listbox/Listbox';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const Suggestions = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Suggestions = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     hasResults,
     items = [],
@@ -60,5 +60,4 @@ Suggestions.propTypes = {
   onClose: PropTypes.func.isRequired,
   onSelect: PropTypes.func.isRequired,
   parentRef: PropTypes.object.isRequired
-};
-export default Suggestions;
+};

package/lib/esm/Autocomplete/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     hasResults: 'Some results are available',
     loading: 'Searching...',

package/lib/esm/Badge/Badge.js

@@ -2,9 +2,13 @@ import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import Typography from '../Typography';
-import { htmlAttrs, selectSystemProps, getTokensPropType, variantProp, viewProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { Typography } from '../Typography/Typography';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const fontSizeMapping = {
   12: 'micro',
@@ -66,7 +70,7 @@ const getTypographyVariant = _ref5 => {
     size: fontSizeMapping[fontSize]
   };
 };
-const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+export const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,
@@ -92,7 +96,6 @@ Badge.propTypes = {
   variant: variantProp.propType
 };
 Badge.displayName = 'Badge';
-export default Badge;
 const staticStyles = StyleSheet.create({
   container: {
     display: 'flex',