@telus-uds/components-base 1.84.0 → 1.85.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 06 May 2024 16:33:57 GMT and should not be manually modified.
+This log was last generated on Fri, 17 May 2024 16:25:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.85.0
+
+Fri, 17 May 2024 16:25:37 GMT
+
+### Minor changes
+
+- Add `CardGroup` component (Mauricio.BatresMontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.56.0
+
+### Patches
+
+- `Modal`: Fix an issue where `Modal` may not render correctly when wrapped into another container (shahzaibkhalidmalik@outlook.com)
+- `Carousel`: Fix an issue where slide navigation causes a scroll of `Carousel` into view (shahzaibkhalidmalik@outlook.com)
+- `Modal`: add aria-modal prop (guillermo.peitzner@telus.com)
+- `QuickLinksFeature`: storybook examples not working in iOS and Android (35577399+JoshHC@users.noreply.github.com)
+
 ## 1.84.0
 
-Mon, 06 May 2024 16:33:57 GMT
+Mon, 06 May 2024 16:39:58 GMT
 
 ### Minor changes
 

package/lib/A11yInfoProvider/index.js

@@ -4,23 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useA11yInfo = exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AccessibilityInfo = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AccessibilityInfo"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const ScreenReaderContext = /*#__PURE__*/(0, _react.createContext)(false);
-const ReducedMotionContext = /*#__PURE__*/(0, _react.createContext)(false);
+const ScreenReaderContext = /*#__PURE__*/_react.default.createContext(false);
+const ReducedMotionContext = /*#__PURE__*/_react.default.createContext(false);
 const A11yInfoProvider = _ref => {
   let {
     children
   } = _ref;
-  const [reduceMotionEnabled, setReduceMotionEnabled] = (0, _react.useState)(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = _react.default.useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = _react.default.useState(false);
+  _react.default.useEffect(() => {
     if (process.env.NODE_ENV === 'test') {
       // On Jest these effects do nothing but can cause `act` state change warnings
       // and "...after the Jest environment has been torn down" errors, so skip them.
@@ -63,8 +61,8 @@ A11yInfoProvider.propTypes = {
 var _default = A11yInfoProvider;
 exports.default = _default;
 const useA11yInfo = () => {
-  const screenReaderEnabled = (0, _react.useContext)(ScreenReaderContext);
-  const reduceMotionEnabled = (0, _react.useContext)(ReducedMotionContext);
+  const screenReaderEnabled = _react.default.useContext(ScreenReaderContext);
+  const reduceMotionEnabled = _react.default.useContext(ReducedMotionContext);
   return {
     reduceMotionEnabled,
     screenReaderEnabled

package/lib/A11yText/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -12,8 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _props = require("../utils/props");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
 
 /**
@@ -22,7 +20,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_p
  * 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__*/(0, _react.forwardRef)((_ref, ref) => {
+const A11yText = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     text,
     heading,

package/lib/ActivityIndicator/Spinner.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _shared = require("./shared");
 var _A11yInfoProvider = require("../A11yInfoProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const SVG_RADIUS = 20;
 const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
 const MIN_SVG_LENGTH = _shared.MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
@@ -27,7 +26,7 @@ const bezierProps = {
 };
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     size,
     color,

package/lib/ActivityIndicator/Spinner.native.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -13,11 +13,9 @@ var _shared = require("./shared");
 var _A11yInfoProvider = require("../A11yInfoProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const ea = _shared.MIN_EMPTY_ANGLE / 2;
 const sa = _shared.MIN_STROKE_ANGLE / 2;
-const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     size,
     color,

package/lib/Autocomplete/Autocomplete.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -24,10 +24,6 @@ var _constants = require("./constants");
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable react/require-default-props */
-
 const staticStyles = _StyleSheet.default.create({
   container: {
     zIndex: 100,
@@ -95,7 +91,7 @@ const highlight = function () {
     return [...acc, item];
   }, []);
 };
-const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   var _ref3;
   let {
     children,
@@ -130,23 +126,23 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const isControlled = value !== undefined;
 
   // We need to store current items for uncontrolled usage
-  const [currentItems, setCurrentItems] = (0, _react.useState)(initialItems);
-  const [otherItems, setOtherItems] = (0, _react.useState)(items);
+  const [currentItems, setCurrentItems] = _react.default.useState(initialItems);
+  const [otherItems, setOtherItems] = _react.default.useState(items);
 
   // We need to store the current value as well to be able to highlight it
-  const [currentValue, setCurrentValue] = (0, _react.useState)(value ?? initialValue);
+  const [currentValue, setCurrentValue] = _react.default.useState(value ?? initialValue);
   const inputTokens = {
     paddingLeft: _constants.INPUT_LEFT_PADDING
   };
 
   // Setting up the overlay
-  const openOverlayRef = (0, _react.useRef)();
-  const [isExpanded, setIsExpanded] = (0, _react.useState)(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
-  const [isFocused, setisFocused] = (0, _react.useState)(false);
-  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null);
+  const openOverlayRef = _react.default.useRef();
+  const [isExpanded, setIsExpanded] = _react.default.useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
+  const [isFocused, setisFocused] = _react.default.useState(false);
+  const [sourceLayout, setSourceLayout] = _react.default.useState(null);
 
   // When it's nested, selected value
-  const [nestedSelectedValue, setNestedSelectedValue] = (0, _react.useState)(null);
+  const [nestedSelectedValue, setNestedSelectedValue] = _react.default.useState(null);
   const {
     supportsProps,
     ...selectedProps
@@ -168,7 +164,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       vertical: _Platform.default.OS !== 'web' && (hint || inputLabel) ? 28 : 4
     }
   });
-  const targetRef = (0, _react.useRef)(null);
+  const targetRef = _react.default.useRef(null);
   // We limit the number of suggestions displayed to avoid huge lists
   // TODO: add a way to make the `Listbox` occupy fixed height and be scrollable
   // within that height, which will unlock similar behaviour for `AutoComplete` as well
@@ -181,7 +177,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     copy
   });
   // Tracking input width changes to resize the listbox overlay accordingly
-  const [inputWidth, setInputWidth] = (0, _react.useState)();
+  const [inputWidth, setInputWidth] = _react.default.useState();
   (0, _utils.useSafeLayoutEffect)(() => {
     if (_Platform.default.OS === 'web') {
       const updateInputWidth = () => {
@@ -256,7 +252,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
    * within the list, if doesn't exist the nested item is added to the top of the list,
    * the nested item is added with an id equal "0"
    */
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (nestedSelectedValue && !items.find(item => item.id === 0)) {
       const tmpItems = [...items];
       tmpItems.unshift({

package/lib/Autocomplete/Loading.js

@@ -12,12 +12,13 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _StackView = _interopRequireDefault(require("../StackView"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Loading = _ref => {
+const Loading = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     label
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
     space: 3,
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       direction: "row",
       space: 2,
@@ -33,7 +34,8 @@ const Loading = _ref => {
       })]
     })
   });
-};
+});
+Loading.displayName = 'Loading';
 Loading.propTypes = {
   label: _propTypes.default.string
 };

package/lib/Autocomplete/Suggestions.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _A11yText = _interopRequireDefault(require("../A11yText"));
 var _Typography = _interopRequireDefault(require("../Typography"));
@@ -12,9 +12,7 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _Listbox = _interopRequireDefault(require("../Listbox"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const Suggestions = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Suggestions = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     hasResults,
     items = [],

package/lib/Badge/Badge.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,8 +13,6 @@ var _Typography = _interopRequireDefault(require("../Typography"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const fontSizeMapping = {
   12: 'micro',
   14: 'small',
@@ -75,7 +73,7 @@ const getTypographyVariant = _ref5 => {
     size: fontSizeMapping[fontSize]
   };
 };
-const Badge = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,

package/lib/BaseProvider/HydrationContext.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useHydrationContext = exports.default = exports.HydrationProvider = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const HydrationContext = /*#__PURE__*/(0, _react.createContext)();
+const HydrationContext = /*#__PURE__*/_react.default.createContext();
 const isSSR = typeof window === 'undefined';
 const hasWebStyleTag = () => {
   var _document;
@@ -28,7 +26,7 @@ const hasWebStyleTag = () => {
  * during the very first client-side render or hydration, but not available on the server,
  * to ensure no changes happen until the original SSR DOM has been hydrated.
  */
-const useHydrationContext = () => (0, _react.useContext)(HydrationContext);
+const useHydrationContext = () => _react.default.useContext(HydrationContext);
 
 /**
  * Allows components and hooks to observe if SSR hydration is currently in progress
@@ -39,8 +37,8 @@ const HydrationProvider = _ref => {
   let {
     children
   } = _ref;
-  const [hasMounted, setHasMounted] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
+  const [hasMounted, setHasMounted] = _react.default.useState(false);
+  _react.default.useEffect(() => {
     setHasMounted(true);
   }, []);
 

package/lib/Box/Box.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
@@ -17,8 +17,6 @@ var _utils = require("../utils");
 var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
 /**
@@ -178,7 +176,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__*/(0, _react.forwardRef)((_ref3, ref) => {
+const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     space,
     horizontal = space,
@@ -226,8 +224,8 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
   const backgroundImagePosition = (0, _utils.useResponsiveProp)(position, 'none');
   const backgroundImageAlign = (0, _utils.useResponsiveProp)(align, 'stretch');
-  const [backgroundImageWidth, setBackgroundImageWidth] = (0, _react.useState)(0);
-  const [backgroundImageHeight, setBackgroundImageHeight] = (0, _react.useState)(0);
+  const [backgroundImageWidth, setBackgroundImageWidth] = _react.default.useState(0);
+  const [backgroundImageHeight, setBackgroundImageHeight] = _react.default.useState(0);
   if (backgroundImage) content = setBackgroundImage({
     src,
     alt,
@@ -238,7 +236,7 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     backgroundImageHeight,
     content
   });
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
       _Image.default.getSize(src, (width, height) => {
         // Only update the state if the size has changed

package/lib/Button/Button.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 var _propTypes = _interopRequireWildcard(require("./propTypes"));
 var _ThemeProvider = require("../ThemeProvider");
 var _props = require("../utils/props");
 var _ViewportProvider = require("../ViewportProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'button',
     tokens,

package/lib/Button/ButtonBase.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -16,8 +16,6 @@ var _utils = require("../utils");
 var _Icon = require("../Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.linkProps, _utils.viewProps]);
 const getOuterBorderOffset = _ref => {
   let {
@@ -227,7 +225,7 @@ const selectItemIconTokens = _ref10 => {
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
+const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
   let {
     id,
     href,
@@ -330,9 +328,6 @@ ButtonBase.propTypes = {
   ...selectedSystemPropTypes,
   ..._propTypes2.default
 };
-ButtonBase.defaultProps = {
-  id: undefined
-};
 const staticStyles = _StyleSheet.default.create({
   row: {
     // Apply all button alignment horizontally; no vertical stacking within a button

package/lib/Button/ButtonDropdown.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
@@ -17,9 +17,9 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _StackView = require("../StackView");
 var _pressability = require("../utils/pressability");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const selectIconTokens = _ref => {
   let {
     icon,
@@ -58,7 +58,7 @@ const selectIconTokens = _ref => {
     }
   };
 };
-const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     value,
     initialValue,

package/lib/Button/ButtonGroup.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(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"));
@@ -17,11 +17,9 @@ var _utils = require("../utils");
 var _pressability = require("../utils/pressability");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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__*/(0, _react.forwardRef)((_ref, ref) => {
+const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
     buttonVariant,

package/lib/Button/ButtonLink.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
@@ -12,13 +12,13 @@ var _props = require("../utils/props");
 var _ThemeProvider = require("../ThemeProvider");
 var _ViewportProvider = require("../ViewportProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * `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__*/(0, _react.forwardRef)((_ref, ref) => {
+ */const ButtonLink = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'link',
     tokens,