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

package/lib/cjs/Button/ButtonGroup.js

@@ -3,26 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ButtonGroup = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _Fieldset = _interopRequireDefault(require("../Fieldset"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _ButtonBase = require("./ButtonBase");
+var _Fieldset = require("../Fieldset/Fieldset");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useSpacingScale = require("../utils/useSpacingScale");
+var _a11yProps = require("../utils/props/a11yProps");
+var _containUniqueFields = require("../utils/containUniqueFields");
+var _handlerProps = require("../utils/props/handlerProps");
+var _pressProps = require("../utils/props/pressProps");
+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 _pressability = require("../utils/pressability");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
-const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _pressProps.pressProps, _viewProps.viewProps]);
+const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
     buttonVariant,
@@ -50,8 +57,8 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }),
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('ButtonGroup', tokens, variant, {
     viewport
   });
   const {
@@ -64,8 +71,8 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     gap
   } = themeTokens;
   const isMobileNonContained = _Platform.default.OS !== 'web' && (!variant || variant?.style !== 'contained');
-  const themeButtonTokensCallback = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
-  const gapValue = (0, _utils.useSpacingScale)(gap || space);
+  const themeButtonTokensCallback = (0, _useThemeTokens.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
+  const gapValue = (0, _useSpacingScale.useSpacingScale)(gap || space);
   const getButtonTokens = (0, _react.useCallback)(state => {
     const themeButtonTokens = themeButtonTokensCallback(state);
     const shouldUseTransparentBackground = isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus;
@@ -94,7 +101,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     currentValues,
     toggleOneValue
-  } = (0, _utils.useMultipleInputValues)({
+  } = (0, _input.useMultipleInputValues)({
     initialValues,
     values,
     maxValues,
@@ -107,13 +114,13 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
   const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox';
   const uniqueFields = ['id', 'label'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!(0, _containUniqueFields.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
   const innerRole = _Platform.default.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
     ...systemProps,
     ref: ref,
     name: inputGroupName,
@@ -160,13 +167,13 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           },
           accessibilityRole: itemA11yRole,
           accessibilityLabel,
-          ..._utils.a11yProps.getPositionInSet(items.length, index)
+          ..._a11yProps.a11yProps.getPositionInSet(items.length, index)
         };
         const isInactive = itemInactive !== undefined ? itemInactive : inactive;
 
         // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
         // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.ButtonBase, {
           ref: itemRef,
           variant: buttonVariant,
           ...pressHandlers,
@@ -189,15 +196,15 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('ButtonGroup'),
+  tokens: (0, _tokens.getTokensPropType)('ButtonGroup'),
   /**
    * To allow Button specific variant
    */
-  buttonVariant: _utils.variantProp.propType,
+  buttonVariant: _variantProp.variantProp.propType,
   /**
    * Default variant prop
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves
    * like radio buttons. To have no limit and allow any number of selections, pass `null`.
@@ -227,7 +234,9 @@ ButtonGroup.propTypes = {
     /**
      * An optional ref for one individual button in the ButtonGroup
      */
-    ref: _airbnbPropTypes.default.ref(),
+    ref: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+      current: _propTypes.default.any
+    })]),
     /**
      * If true, this individual button cannot be interacted with. Takes precedence
      * over the group-level `inactive` prop. Useful for disabling specific options.
@@ -305,11 +314,11 @@ const staticStyles = _StyleSheet.default.create({
   },
   viewBase: {
     flexWrap: 'wrap',
+    alignContent: 'stretch',
     alignItems: 'center'
   },
   equalWidth: {
     width: '100%',
     flex: 1
   }
-});
-var _default = exports.default = ButtonGroup;
+});

package/lib/cjs/Button/ButtonLink.js

@@ -3,22 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ButtonLink = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
-var _props = require("../utils/props");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
+var _ButtonBase = require("./ButtonBase");
+var _propTypes2 = require("./propTypes");
+var _a11yProps = require("../utils/props/a11yProps");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _linkProps = require("../utils/props/linkProps");
+var _contentfulProps = require("../utils/props/contentfulProps");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
 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 }; }
 /**
  * `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.
- */const ButtonLink = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const ButtonLink = exports.ButtonLink = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'link',
     tokens,
@@ -29,14 +31,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   const {
     hrefAttrs,
     rest
-  } = _props.hrefAttrsProp.bundle(props);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  } = _hrefAttrsProp.hrefAttrsProp.bundle(props);
+  const viewport = (0, _useViewport.useViewport)();
   const buttonVariant = {
     viewport,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('Button', tokens, buttonVariant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.ButtonBase, {
     ref: ref,
     accessibilityRole: accessibilityRole,
     tokens: getTokens,
@@ -47,12 +49,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 });
 ButtonLink.displayName = 'ButtonLink';
 ButtonLink.propTypes = {
-  ..._props.a11yProps.types,
-  ..._propTypes2.default,
-  ..._props.linkProps.types,
-  ..._props.contentfulProps.types,
+  ..._a11yProps.a11yProps.types,
+  ..._propTypes2.buttonPropTypes,
+  ..._linkProps.linkProps.types,
+  ..._contentfulProps.contentfulProps.types,
   children: _propTypes2.textAndA11yText,
   dataSet: _propTypes.default.object,
   accessibilityRole: _propTypes.default.string
-};
-var _default = exports.default = ButtonLink;
+};

package/lib/cjs/Button/propTypes.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textAndA11yText = exports.default = void 0;
+exports.textAndA11yText = exports.buttonPropTypes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
-var _props = require("../utils/props");
-var _A11yText = _interopRequireDefault(require("../A11yText"));
-var _Icon = require("../Icon");
+var _variantProp = require("../utils/props/variantProp");
+var _tokens = require("../utils/props/tokens");
+var _Icon = require("../Icon/Icon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const textAndA11yText = exports.textAndA11yText = _airbnbPropTypes.default.childrenOf(_propTypes.default.oneOfType([_airbnbPropTypes.default.elementType(_A11yText.default), _propTypes.default.string]));
-const buttonPropTypes = {
-  tokens: (0, _props.getTokensPropType)('Button'),
+// Validates children are renderable content (strings, elements, etc.)
+const textAndA11yText = exports.textAndA11yText = _propTypes.default.node;
+const buttonPropTypes = exports.buttonPropTypes = {
+  tokens: (0, _tokens.getTokensPropType)('Button'),
   /**
    * If true, the button will honor the align-items value from its parent flex container.
    * If false, the button will always align to 'flex-start' in a flex container.
@@ -54,6 +54,5 @@ const buttonPropTypes = {
    * the link and any Typography the link is nested inside.
    */
   icon: _propTypes.default.func,
-  variant: _props.variantProp.propType
-};
-var _default = exports.default = buttonPropTypes;
+  variant: _variantProp.variantProp.propType
+};

package/lib/cjs/Card/Card.js

@@ -3,28 +3,41 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Card = 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 _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
-var _props = require("../utils/props");
-var _CardBase = _interopRequireWildcard(require("./CardBase"));
-var _PressableCardBase = _interopRequireDefault(require("./PressableCardBase"));
-var _CheckboxButton = _interopRequireDefault(require("../Checkbox/CheckboxButton"));
-var _RadioButton = _interopRequireDefault(require("../Radio/RadioButton"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useResponsiveThemeTokens = require("../ThemeProvider/useResponsiveThemeTokens");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _ssrMediaQuery = require("../utils/ssr-media-query/ssr-media-query");
+var _createMediaQueryStyles = require("../utils/ssr-media-query/utils/create-media-query-styles");
+var _a11yProps = require("../utils/props/a11yProps");
+var _linkProps = require("../utils/props/linkProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _viewProps = require("../utils/props/viewProps");
+var _responsiveProps = require("../utils/props/responsiveProps");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _CardBase = require("./CardBase");
+var _PressableCardBase = require("./PressableCardBase");
+var _CheckboxButton = require("../Checkbox/CheckboxButton");
+var _RadioButton = require("../Radio/RadioButton");
 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, _props.selectSystemProps)([_props.a11yProps, _props.viewProps, _props.linkProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps, _linkProps.linkProps]);
 const SelectionType = {
   Checkbox: 'checkbox',
   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,
@@ -117,7 +130,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.default.forwardRef((_ref4, ref) => {
+const Card = exports.Card = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     children,
     tokens,
@@ -130,14 +143,14 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     testID,
     ...rest
   } = _ref4;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const {
     enableMediaQueryStyleSheet
   } = themeOptions;
-  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const useTokens = enableMediaQueryStyleSheet ? _useResponsiveThemeTokens.useResponsiveThemeTokens : _useThemeTokens.useThemeTokens;
   const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
@@ -145,7 +158,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   const inactive = interactiveCard?.variant?.inactive;
   const selectionType = interactiveCard?.selectionType;
   const isControl = interactiveCard?.variant?.isControl === true;
-  const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Card', interactiveCard?.tokens, {
+  const getThemeTokens = (0, _useThemeTokens.useThemeTokensCallback)('Card', interactiveCard?.tokens, {
     interactive: true,
     ...(interactiveCard?.variant || {}),
     ...viewport
@@ -212,11 +225,11 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
       acc[vp] = tokensToTransform;
       return acc;
     }, {});
-    const mediaQueryStyleSheet = (0, _utils.createMediaQueryStyles)(transformedThemeTokens);
+    const mediaQueryStyleSheet = (0, _createMediaQueryStyles.createMediaQueryStyles)(transformedThemeTokens);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       card: {
         ...themeTokens[viewport],
         ...mediaQueryStyleSheet
@@ -240,7 +253,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: containerStyle,
           testID: inputTestID,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxButton.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxButton.CheckboxButton, {
             ...props,
             tokens: {
               ...checkboxTokens,
@@ -252,7 +265,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: containerStyle,
           testID: inputTestID,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.RadioButton, {
             ...props,
             tokens: {
               ...radioTokens,
@@ -265,7 +278,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardBase.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardBase.CardBase, {
       ref: ref,
       tokens: interactiveCard?.body ? restOfTokens : cardStyles,
       backgroundImage: backgroundImage,
@@ -274,13 +287,16 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
       },
       testID: testID,
       ...selectProps(rest),
-      children: [interactiveCard?.body && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.default, {
+      children: [interactiveCard?.body && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.PressableCardBase, {
         ref: ref,
         tokens: getThemeTokens,
         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 {
@@ -320,11 +336,11 @@ Card.propTypes = {
   /**
    * Card tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('Card'),
+  tokens: (0, _tokens.getTokensPropType)('Card'),
   /**
    * Card variant.
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Function to call on pressing the card.
    * Note: This is only available when `interactiveCard` prop is used.
@@ -347,11 +363,11 @@ Card.propTypes = {
    */
   interactiveCard: _propTypes.default.shape({
     body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-    tokens: (0, _utils.getTokensPropType)('Card'),
+    tokens: (0, _tokens.getTokensPropType)('Card'),
     selectionType: _propTypes.default.oneOf(Object.values(SelectionType)),
-    variant: _utils.variantProp.propType,
+    variant: _variantProp.variantProp.propType,
     href: _propTypes.default.string,
-    hrefAttrs: _propTypes.default.shape(_props.hrefAttrsProp.types),
+    hrefAttrs: _propTypes.default.shape(_hrefAttrsProp.hrefAttrsProp.types),
     inputPosition: _propTypes.default.oneOf(['left', 'right'])
   }),
   /**
@@ -362,9 +378,9 @@ Card.propTypes = {
     // src is an object when used responsively to provide different image sources for different screen sizes
     src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
-    resizeMode: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
-    position: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
-    align: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
+    resizeMode: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
+    align: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
   }),
   /**
    * Data set for the card.
@@ -374,5 +390,4 @@ Card.propTypes = {
    * Test ID used for e2e testing.
    */
   testID: _propTypes.default.string
-};
-var _default = exports.default = Card;
+};

package/lib/cjs/Card/CardBase.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectStyles = exports.fullBleedContentPropTypes = exports.default = void 0;
+exports.selectStyles = exports.fullBleedContentPropTypes = exports.CardBase = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -11,16 +11,21 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _props = require("../utils/props");
-var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
-var _FlexGrid = _interopRequireDefault(require("../FlexGrid/FlexGrid"));
-var _Row = _interopRequireDefault(require("../FlexGrid/Row"));
-var _Col = _interopRequireDefault(require("../FlexGrid/Col"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _tokens = require("../utils/props/tokens");
+var _responsiveProps = require("../utils/props/responsiveProps");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _formatImageSource = require("../utils/formatImageSource");
+var _a11yProps = require("../utils/props/a11yProps");
+var _viewProps = require("../utils/props/viewProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _backgroundImageStylesMap = require("./backgroundImageStylesMap");
+var _FlexGrid = require("../FlexGrid/FlexGrid");
+var _FlexGridRow = require("../FlexGrid/FlexGridRow/FlexGridRow");
+var _FlexGridCol = require("../FlexGrid/FlexGridCol/FlexGridCol");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const GRID_COLUMNS = 12;
 const isOverlayColor = color => {
   return color && typeof color === 'string' && color.startsWith('rgba(');
@@ -64,9 +69,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';
       }
@@ -84,7 +101,7 @@ const setBackgroundImage = _ref => {
         children: content
       });
     }
-    const positionStyles = _backgroundImageStylesMap.default[positionKey] || {};
+    const positionStyles = _backgroundImageStylesMap.backgroundImageStylesMap[positionKey] || {};
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.containContainer, {
         borderRadius: adjustedBorderRadius
@@ -204,7 +221,7 @@ const selectStyles = _ref4 => {
     marginLeft,
     marginRight,
     minWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...(0, _styles.applyShadowToken)(shadow),
     ...(gradient && _Platform.default.OS === 'web' ? {
       backgroundImage: backgroundImageValue,
       backgroundOrigin: `border-box`,
@@ -226,7 +243,7 @@ const selectStyles = _ref4 => {
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
 exports.selectStyles = selectStyles;
-const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const CardBase = exports.CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     children,
     tokens,
@@ -252,16 +269,16 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     position = '',
     align = ''
   } = backgroundImage || {};
-  const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
-  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position);
-  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align);
-  const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  const backgroundImageResizeMode = (0, _useResponsiveProp.useResponsiveProp)(resizeMode, 'cover');
+  const backgroundImagePosition = (0, _useResponsiveProp.useResponsiveProp)(position);
+  const backgroundImageAlign = (0, _useResponsiveProp.useResponsiveProp)(align);
+  const imageSourceViewport = (0, _formatImageSource.formatImageSource)((0, _useResponsiveProp.useResponsiveProp)(src));
   const {
     content: fullBleedImageContent,
     position: fullBleedContentPosition,
     imgCol
   } = fullBleedContent || {};
-  const fullBleedPosition = (0, _utils.useResponsiveProp)(fullBleedContentPosition, 'bottom');
+  const fullBleedPosition = (0, _useResponsiveProp.useResponsiveProp)(fullBleedContentPosition, 'bottom');
   if (backgroundImage && src) {
     const {
       paddingTop,
@@ -341,12 +358,12 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       textColumns[breakpoint] = GRID_COLUMNS - (imageColumns[breakpoint] || GRID_COLUMNS);
     });
     const imageFirst = fullBleedPosition === 'top' || fullBleedPosition === 'left';
-    const imageColContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+    const imageColContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGridCol.FlexGridCol, {
       ...imageColumns,
       style: staticStyles.fullBleedImageCol,
       children: fullBleedImageContent
     });
-    const textColContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+    const textColContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGridCol.FlexGridCol, {
       ...textColumns,
       style: {
         paddingTop,
@@ -361,8 +378,8 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       dataSet: dataSet,
       ref: ref,
       ...props,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid.FlexGrid, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGridRow.FlexGridRow, {
           children: imageFirst ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [imageColContent, textColContent]
           }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -384,8 +401,8 @@ CardBase.displayName = 'CardBase';
 const fullBleedContentPropTypes = exports.fullBleedContentPropTypes = _propTypes.default.shape({
   content: _propTypes.default.node.isRequired,
   alt: _propTypes.default.string,
-  position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
-  align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch'])),
+  position: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
+  align: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch'])),
   imgCol: _propTypes.default.object
 });
 const staticStyles = _StyleSheet.default.create({
@@ -417,7 +434,7 @@ const staticStyles = _StyleSheet.default.create({
 CardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: _propTypes.default.node,
-  tokens: (0, _utils.getTokensPropType)('Card'),
+  tokens: (0, _tokens.getTokensPropType)('Card'),
   /**
    * Apply background image to the card.
    */
@@ -426,10 +443,9 @@ CardBase.propTypes = {
     // src is an object when used responsively to provide different image sources for different screen sizes
     src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
-    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
-    position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
-    align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
+    resizeMode: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
+    align: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
   }),
   fullBleedContent: fullBleedContentPropTypes
-};
-var _default = exports.default = CardBase;
+};