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

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

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { PortalProvider } from '@gorhom/portal';
 import { viewports } from '@telus-uds/system-constants';
-import A11yInfoProvider from '../A11yInfoProvider';
-import ViewportProvider from '../ViewportProvider';
-import ThemeProvider from '../ThemeProvider';
+import { A11yInfoProvider } from '../A11yInfoProvider/A11yInfoProvider';
+import { ViewportProvider } from '../ViewportProvider/ViewportProvider';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { HydrationProvider } from './HydrationContext';
 
 // eslint-disable-next-line no-unused-vars
 import { jsx as _jsx } from "react/jsx-runtime";
-const BaseProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
+export const BaseProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
   let {
     defaultTheme,
     children,
@@ -39,5 +39,4 @@ BaseProvider.propTypes = {
     forceZIndex: PropTypes.bool,
     defaultViewport: PropTypes.oneOf(viewports.keys)
   })
-};
-export default BaseProvider;
+};

package/lib/esm/BaseProvider/HydrationContext.js

@@ -43,5 +43,4 @@ export const HydrationProvider = _ref => {
 };
 HydrationProvider.propTypes = {
   children: PropTypes.node
-};
-export default HydrationProvider;
+};

package/lib/esm/Box/Box.js

@@ -6,10 +6,25 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import Image from "react-native-web/dist/exports/Image";
-import { useTheme, useThemeTokens, useResponsiveThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, createMediaQueryStyles, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps, StyleSheet as RNMQStyleSheet, getSpacingScale, formatImageSource } from '../utils';
-import backgroundImageStylesMap, { backgroundPositions } from './backgroundImageStylesMap';
-import { useViewport } from '../ViewportProvider';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { useResponsiveThemeTokens } from '../ThemeProvider/useResponsiveThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { createMediaQueryStyles } from '../utils/ssr-media-query/utils/create-media-query-styles';
+import { getA11yPropsFromHtmlTag, layoutTags } from '../utils/a11y/semantics';
+import { getTokensPropType } from '../utils/props/tokens';
+import { responsiveProps } from '../utils/props/responsiveProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { spacingProps } from '../utils/props/spacingProps';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { useSpacingScale } from '../utils/useSpacingScale';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { StyleSheet as RNMQStyleSheet } from '../utils/ssr-media-query/ssr-media-query';
+import { getSpacingScale } from '../utils/getSpacingScale';
+import { formatImageSource } from '../utils/formatImageSource';
+import { backgroundImageStylesMap, backgroundPositions } from './backgroundImageStylesMap';
+import { useViewport } from '../ViewportProvider/useViewport';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -182,7 +197,7 @@ const setBackgroundImage = _ref2 => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     space,
     horizontal = space,
@@ -448,7 +463,6 @@ Box.propTypes = {
     align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
   })
 };
-export default Box;
 const staticStyles = StyleSheet.create({
   imageBackground: {
     width: '100%',

package/lib/esm/Box/backgroundImageStylesMap.js

@@ -198,4 +198,4 @@ const nativeStyles = {
   }
 };
 export const backgroundPositions = Platform.OS === 'web' ? webBackgroundPositions : {};
-export default Platform.OS === 'web' ? webStyles : nativeStyles;
+export const backgroundImageStylesMap = Platform.OS === 'web' ? webStyles : nativeStyles;

package/lib/esm/Button/Button.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import ButtonBase from './ButtonBase';
-import buttonPropTypes, { textAndA11yText } from './propTypes';
-import { useThemeTokensCallback, useResponsiveThemeTokensCallback, useTheme } from '../ThemeProvider';
-import { a11yProps } from '../utils/props';
-import { useViewport } from '../ViewportProvider';
+import { ButtonBase } from './ButtonBase';
+import { buttonPropTypes, textAndA11yText } from './propTypes';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { useResponsiveThemeTokensCallback } from '../ThemeProvider/useResponsiveThemeTokensCallback';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { a11yProps } from '../utils/props/a11yProps';
+import { useViewport } from '../ViewportProvider/useViewport';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'button',
     tokens,
@@ -39,5 +41,4 @@ Button.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
   children: textAndA11yText
-};
-export default Button;
+};

package/lib/esm/Button/ButtonBase.js

@@ -4,10 +4,22 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 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 { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
-import buttonPropTypes from './propTypes';
-import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter, contentfulProps, createMediaQueryStyles, StyleSheet as StyleSheetUtils } from '../utils';
-import { IconText } from '../Icon';
+import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { buttonPropTypes } from './propTypes';
+import { a11yProps } from '../utils/props/a11yProps';
+import { clickProps } from '../utils/props/clickProps';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { getCursorStyle, resolvePressableState, resolvePressableTokens } from '../utils/pressability';
+import { linkProps } from '../utils/props/linkProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { viewProps } from '../utils/props/viewProps';
+import { wrapStringsInText } from '../utils/children';
+import { withLinkRouter } from '../utils/withLinkRouter';
+import { contentfulProps } from '../utils/props/contentfulProps';
+import { createMediaQueryStyles } from '../utils/ssr-media-query/utils/create-media-query-styles';
+import { StyleSheet as StyleSheetUtils } from '../utils/ssr-media-query/ssr-media-query';
+import { IconText } from '../Icon/IconText';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps, contentfulProps]);
 const getOuterBorderOffset = _ref => {
@@ -218,27 +230,27 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref9) => {
     default: {}
   });
 };
-const selectButtonStyles = _ref10 => {
+const selectButtonStyles = _ref0 => {
   let {
     textAlign
-  } = _ref10;
+  } = _ref0;
   return {
     flexDirection: 'row',
     justifyContent: textAlign
   };
 };
-const selectItemIconTokens = _ref11 => {
+const selectItemIconTokens = _ref1 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref11;
+  } = _ref1;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+const ButtonBaseInner = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
     id,
     href,
@@ -254,7 +266,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     iconProps,
     heightFull = true,
     ...rawRest
-  } = _ref12;
+  } = _ref10;
   const {
     themeOptions
   } = useTheme();
@@ -282,8 +294,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
       focused: false
     };
     const defaultTokensByViewport = resolveButtonTokens(defaultPressableState);
-    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref13) => {
-      let [vp, viewportTokens] = _ref13;
+    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref11) => {
+      let [vp, viewportTokens] = _ref11;
       const flexAndWidthStyles = viewportTokens.width === '100%' && viewportTokens.flex === 1 ? selectFlexAndWidthStyles(viewportTokens) : {};
       acc[vp] = {
         ...staticStyles.row,
@@ -385,8 +397,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     }
   });
 });
-ButtonBase.displayName = 'ButtonBase';
-ButtonBase.propTypes = {
+ButtonBaseInner.displayName = 'ButtonBase';
+ButtonBaseInner.propTypes = {
   id: PropTypes.string,
   ...selectedSystemPropTypes,
   ...buttonPropTypes
@@ -414,4 +426,4 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'center'
   }
 });
-export default withLinkRouter(ButtonBase);
+export const ButtonBase = withLinkRouter(ButtonBaseInner);

package/lib/esm/Button/ButtonDropdown.js

@@ -4,12 +4,16 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-import buttonPropTypes, { textAndA11yText } from './propTypes';
-import ButtonBase from './ButtonBase';
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
-import Icon from '../Icon';
-import { getPressHandlersWithArgs } from '../utils/pressability';
+import { buttonPropTypes, textAndA11yText } from './propTypes';
+import { ButtonBase } from './ButtonBase';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { resolvePressableState, getPressHandlersWithArgs } from '../utils/pressability';
+import { useInputValue } from '../utils/input';
+import { Icon } from '../Icon/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FULL_WIDTH_STYLE = 'full';
 const selectIconTokens = _ref => {
@@ -89,7 +93,7 @@ const selectStackedContentStyles = (tokens, iconPosition, isFullWidth) => ({
     flex: 1
   })
 });
-const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value,
     initialValue,
@@ -265,5 +269,4 @@ const staticStyles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center'
   }
-});
-export default ButtonDropdown;
+});

package/lib/esm/Button/ButtonGroup.js

@@ -1,19 +1,27 @@
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import ButtonBase from './ButtonBase';
-import Fieldset from '../Fieldset';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { useSpacingScale, a11yProps, containUniqueFields, focusHandlerProps, pressProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { ButtonBase } from './ButtonBase';
+import { Fieldset } from '../Fieldset/Fieldset';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { useSpacingScale } from '../utils/useSpacingScale';
+import { a11yProps } from '../utils/props/a11yProps';
+import { containUniqueFields } from '../utils/containUniqueFields';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { pressProps } from '../utils/props/pressProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useMultipleInputValues } from '../utils/input';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
 import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
-const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
     buttonVariant,
@@ -218,7 +226,9 @@ ButtonGroup.propTypes = {
     /**
      * An optional ref for one individual button in the ButtonGroup
      */
-    ref: ABBPropTypes.ref(),
+    ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      current: PropTypes.any
+    })]),
     /**
      * If true, this individual button cannot be interacted with. Takes precedence
      * over the group-level `inactive` prop. Useful for disabling specific options.
@@ -296,11 +306,11 @@ const staticStyles = StyleSheet.create({
   },
   viewBase: {
     flexWrap: 'wrap',
+    alignContent: 'stretch',
     alignItems: 'center'
   },
   equalWidth: {
     width: '100%',
     flex: 1
   }
-});
-export default ButtonGroup;
+});

package/lib/esm/Button/ButtonLink.js

@@ -1,17 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ButtonBase from './ButtonBase';
-import buttonPropTypes, { textAndA11yText } from './propTypes';
-import { a11yProps, hrefAttrsProp, linkProps, contentfulProps } from '../utils/props';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
+import { ButtonBase } from './ButtonBase';
+import { buttonPropTypes, textAndA11yText } from './propTypes';
+import { a11yProps } from '../utils/props/a11yProps';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { linkProps } from '../utils/props/linkProps';
+import { contentfulProps } from '../utils/props/contentfulProps';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { useViewport } from '../ViewportProvider/useViewport';
 
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ButtonLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ButtonLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'link',
     tokens,
@@ -47,5 +50,4 @@ ButtonLink.propTypes = {
   children: textAndA11yText,
   dataSet: PropTypes.object,
   accessibilityRole: PropTypes.string
-};
-export default ButtonLink;
+};

package/lib/esm/Button/propTypes.js

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import { variantProp, getTokensPropType } from '../utils/props';
-import A11yText from '../A11yText';
-import { iconComponentPropTypes } from '../Icon';
-export const textAndA11yText = ABBPropTypes.childrenOf(PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string]));
-const buttonPropTypes = {
+import { variantProp } from '../utils/props/variantProp';
+import { getTokensPropType } from '../utils/props/tokens';
+import { iconComponentPropTypes } from '../Icon/Icon';
+
+// Validates children are renderable content (strings, elements, etc.)
+export const textAndA11yText = PropTypes.node;
+export const buttonPropTypes = {
   tokens: getTokensPropType('Button'),
   /**
    * If true, the button will honor the align-items value from its parent flex container.
@@ -48,5 +49,4 @@ const buttonPropTypes = {
    */
   icon: PropTypes.func,
   variant: variantProp.propType
-};
-export default buttonPropTypes;
+};

package/lib/esm/Card/Card.js

@@ -1,14 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
-import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps, hrefAttrsProp } from '../utils/props';
-import CardBase, { selectStyles } from './CardBase';
-import PressableCardBase from './PressableCardBase';
-import CheckboxButton from '../Checkbox/CheckboxButton';
-import RadioButton from '../Radio/RadioButton';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { useResponsiveThemeTokens } from '../ThemeProvider/useResponsiveThemeTokens';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { getTokensPropType } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { StyleSheet } from '../utils/ssr-media-query/ssr-media-query';
+import { createMediaQueryStyles } from '../utils/ssr-media-query/utils/create-media-query-styles';
+import { a11yProps } from '../utils/props/a11yProps';
+import { linkProps } from '../utils/props/linkProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { viewProps } from '../utils/props/viewProps';
+import { responsiveProps } from '../utils/props/responsiveProps';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { CardBase, selectStyles } from './CardBase';
+import { PressableCardBase } from './PressableCardBase';
+import { CheckboxButton } from '../Checkbox/CheckboxButton';
+import { RadioButton } from '../Radio/RadioButton';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, linkProps]);
 const SelectionType = {
@@ -16,6 +26,11 @@ const SelectionType = {
   Radio: 'radiogroup',
   None: undefined
 };
+const getAccessibilityRole = (selectionType, href) => {
+  if (selectionType === SelectionType.Checkbox) return 'checkbox';
+  if (selectionType === SelectionType.Radio) return 'radio';
+  return href ? 'link' : 'button';
+};
 const selectInputStyle = (_ref, _ref2) => {
   let {
     paddingTop,
@@ -108,7 +123,7 @@ const getInputProps = _ref3 => {
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+export const Card = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     tokens,
@@ -271,7 +286,10 @@ const Card = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
         dataSet: dataSet,
         onPress: onPress,
         href: interactiveCard?.href,
-        hrefAttrs: interactiveCard?.hrefAttrs,
+        hrefAttrs: interactiveCard?.hrefAttrs
+        // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role -- getAccessibilityRole returns only valid values ('checkbox', 'radio', 'link', 'button') but linter cannot statically verify function calls
+        ,
+        accessibilityRole: getAccessibilityRole(selectionType, interactiveCard?.href),
         ...selectProps(rest),
         children: cardState => {
           const {
@@ -365,5 +383,4 @@ Card.propTypes = {
    * Test ID used for e2e testing.
    */
   testID: PropTypes.string
-};
-export default Card;
+};

package/lib/esm/Card/CardBase.js

@@ -5,13 +5,18 @@ import Platform from "react-native-web/dist/exports/Platform";
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import Image from "react-native-web/dist/exports/Image";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { applyShadowToken } from '../ThemeProvider';
-import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils';
-import { a11yProps, viewProps, selectSystemProps } from '../utils/props';
-import backgroundImageStylesMap from './backgroundImageStylesMap';
-import FlexGrid from '../FlexGrid/FlexGrid';
-import FlexGridRow from '../FlexGrid/Row';
-import FlexGridCol from '../FlexGrid/Col';
+import { applyShadowToken } from '../ThemeProvider/utils/styles';
+import { getTokensPropType } from '../utils/props/tokens';
+import { responsiveProps } from '../utils/props/responsiveProps';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { formatImageSource } from '../utils/formatImageSource';
+import { a11yProps } from '../utils/props/a11yProps';
+import { viewProps } from '../utils/props/viewProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { backgroundImageStylesMap } from './backgroundImageStylesMap';
+import { FlexGrid } from '../FlexGrid/FlexGrid';
+import { FlexGridRow } from '../FlexGrid/FlexGridRow/FlexGridRow';
+import { FlexGridCol } from '../FlexGrid/FlexGridCol/FlexGridCol';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const GRID_COLUMNS = 12;
@@ -57,9 +62,21 @@ const setBackgroundImage = _ref => {
         case 'left-center':
           backgroundPosition = 'left center';
           break;
+        case 'left-start':
+          backgroundPosition = 'left top';
+          break;
+        case 'left-end':
+          backgroundPosition = 'left bottom';
+          break;
         case 'right-center':
           backgroundPosition = 'right center';
           break;
+        case 'right-start':
+          backgroundPosition = 'right top';
+          break;
+        case 'right-end':
+          backgroundPosition = 'right bottom';
+          break;
         default:
           backgroundPosition = 'center center';
       }
@@ -218,7 +235,7 @@ export const selectStyles = _ref4 => {
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+export const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     children,
     tokens,
@@ -423,5 +440,4 @@ CardBase.propTypes = {
     align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
   }),
   fullBleedContent: fullBleedContentPropTypes
-};
-export default CardBase;
+};

package/lib/esm/Card/PressableCardBase.js

@@ -4,10 +4,20 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { useViewport } from '../ViewportProvider';
-import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
-import { a11yProps, clickProps, focusHandlerProps, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import CardBase, { fullBleedContentPropTypes } from './CardBase';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { applyOuterBorder } from '../ThemeProvider/utils/styles';
+import { validateThemeTokens } from '../ThemeProvider/utils/theme-tokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { clickProps } from '../utils/props/clickProps';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { getTokensSetPropType, selectTokens } from '../utils/props/tokens';
+import { linkProps } from '../utils/props/linkProps';
+import { resolvePressableState, resolvePressableTokens } from '../utils/pressability';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { withLinkRouter } from '../utils/withLinkRouter';
+import { CardBase, fullBleedContentPropTypes } from './CardBase';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const selectFocusOverlayContainerStyles = tokens => {
@@ -87,7 +97,7 @@ export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const PressableCardBaseInner = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -194,7 +204,10 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       }),
       ...Platform.select({
         web: {
-          outline: 'none'
+          outlineStyle: 'none',
+          // Reset default <button> centering behavior when react-native-web renders Pressable as a button
+          alignItems: 'stretch',
+          textAlign: 'inherit'
         }
       })
     };
@@ -307,7 +320,7 @@ const staticStyles = StyleSheet.create({
     position: 'relative'
   },
   webOutlineNone: {
-    outline: 'none'
+    outlineStyle: 'none'
   },
   focusBorder: {
     position: 'absolute',
@@ -318,8 +331,8 @@ const staticStyles = StyleSheet.create({
     pointerEvents: 'none'
   }
 });
-PressableCardBase.displayName = 'PressableCardBase';
-PressableCardBase.propTypes = {
+PressableCardBaseInner.displayName = 'PressableCardBase';
+PressableCardBaseInner.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   tokens: getTokensSetPropType(tokenKeys, {
@@ -338,4 +351,4 @@ PressableCardBase.propTypes = {
   }),
   fullBleedContent: fullBleedContentPropTypes
 };
-export default withLinkRouter(PressableCardBase);
+export const PressableCardBase = withLinkRouter(PressableCardBaseInner);

package/lib/esm/Card/backgroundImageStylesMap.js

@@ -187,4 +187,4 @@ const nativeStyles = {
     width: '100%'
   }
 };
-export default Platform.OS === 'web' ? webStyles : nativeStyles;
+export const backgroundImageStylesMap = Platform.OS === 'web' ? webStyles : nativeStyles;

package/lib/esm/CardGroup/CardGroup.js

@@ -1,17 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { a11yProps, focusHandlerProps, containUniqueFields, selectSystemProps, useMultipleInputValues, useInputValue, useCopy, viewProps, variantProp, getTokensPropType, copyPropTypes } from '../utils';
-import defaultDictionary from './dictionary';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import StackView, { StackWrap } from '../StackView';
-import Card from '../Card';
-import Fieldset from '../Fieldset';
+import { a11yProps } from '../utils/props/a11yProps';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { containUniqueFields } from '../utils/containUniqueFields';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useMultipleInputValues, useInputValue } from '../utils/input';
+import { useCopy } from '../utils/useCopy';
+import { viewProps } from '../utils/props/viewProps';
+import { variantProp } from '../utils/props/variantProp';
+import { getTokensPropType } from '../utils/props/tokens';
+import { copyPropTypes } from '../utils/props/copyPropTypes';
+import { dictionary as defaultDictionary } from './dictionary';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { StackView } from '../StackView/StackView';
+import { StackWrap } from '../StackView/StackWrap';
+import { Card } from '../Card/Card';
+import { Fieldset } from '../Fieldset/Fieldset';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const uniqueFields = ['id'];
-const CardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const CardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens = {},
@@ -206,5 +216,4 @@ CardGroup.propTypes = {
    * On Web, this is passed to the `name` attribute of the fieldset and each input.
    */
   name: PropTypes.string
-};
-export default CardGroup;
+};

package/lib/esm/CardGroup/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     prefixId: 'Card'
   },