@telus-uds/components-web 2.26.0 → 2.28.0

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 01 Dec 2023 20:57:37 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Jan 2024 20:08:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.28.0
+
+Mon, 08 Jan 2024 20:08:06 GMT
+
+### Minor changes
+
+- Get a theme wrapper to grab thteme from either server or client (wlsdud194@hotmail.com)
+- Update eslintrc (wlsdud194@hotmail.com)
+- update badge story to include subtle variant (evander.owusu@telus.com)
+- add the display token to the table component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.73.0
+- Bump @telus-uds/system-theme-tokens to v2.49.0
+
+## 2.27.0
+
+Wed, 13 Dec 2023 21:24:24 GMT
+
+### Minor changes
+
+- fixed WebVideo youtube callback type by adding event params (kristina.kirpichnikova@telus.com)
+- Bump @telus-uds/components-base to v1.72.0
+- Bump @telus-uds/system-theme-tokens to v2.48.0
+
+### Patches
+
+- `DatePicker`: Fix stacking context and positioning issue (shahzaibkhalidmalik@outlook.com)
+- fixes the size-by-height property (guillermo.peitzner@telus.com)
+- adding colour toggle to imports (mauricio.batresmontejo@telus.com)
+
 ## 2.26.0
 
-Fri, 01 Dec 2023 20:57:37 GMT
+Fri, 01 Dec 2023 21:08:36 GMT
 
 ### Minor changes
 

package/lib/DatePicker/DatePicker.js

@@ -54,6 +54,24 @@ const DateInputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   display: 'flex',
   flexDirection: 'column'
 });
+const PortalPositionedContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DatePicker__PortalPositionedContainer",
+  componentId: "components-web__sc-mz8fi3-2"
+})({
+  position: 'absolute',
+  left: _ref => {
+    let {
+      left
+    } = _ref;
+    return `${left}px`;
+  },
+  top: _ref2 => {
+    let {
+      top
+    } = _ref2;
+    return `${top}px`;
+  }
+});
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -76,7 +94,7 @@ const DateInputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   var _dictionary$copy;
   let {
     copy = 'en',
@@ -97,9 +115,33 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     prevTestID,
     nextTestID,
     ...rest
-  } = _ref;
+  } = _ref3;
   const [inputDate, setInputDate] = (0, _react.useState)(date instanceof _moment.default ? date : undefined);
   const [inputText, setInputText] = (0, _react.useState)(date instanceof _moment.default ? date.format(dateFormat) : '');
+  const textInputRef = (0, _react.useRef)();
+  const [datePickerPosition, setDatePickerPosition] = (0, _react.useState)({
+    left: 0,
+    top: 0
+  });
+  (0, _componentsBase.useSafeLayoutEffect)(() => {
+    const updateDimensions = () => {
+      if (inline) return;
+      const {
+        left,
+        top
+      } = textInputRef.current.getBoundingClientRect();
+      setDatePickerPosition({
+        left,
+        top: top + textInputRef.current.offsetHeight
+      });
+    };
+    const throttledUpdateDimensions = (0, _lodash.throttle)(updateDimensions, 100, {
+      leading: false
+    });
+    updateDimensions();
+    window.addEventListener('resize', throttledUpdateDimensions);
+    return () => window.removeEventListener('resize', throttledUpdateDimensions);
+  }, []);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isClickedInside, setIsClickedInside] = (0, _react.useState)(false);
   const getCopy = (0, _componentsBase.useCopy)({
@@ -116,10 +158,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setInputText(date instanceof _moment.default ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
-  const onFocusChange = _ref2 => {
+  const onFocusChange = _ref4 => {
     let {
       focused
-    } = _ref2;
+    } = _ref4;
     if (!isClickedInside) {
       setIsFocused(focused);
     }
@@ -164,7 +206,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const circleSize = getResponsiveCircleSize(inline, viewport);
   const HiddenInputFieldContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     displayName: "DatePicker__HiddenInputFieldContainer",
-    componentId: "components-web__sc-mz8fi3-2"
+    componentId: "components-web__sc-mz8fi3-3"
   })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
   const {
     hiddenInputFieldContainerHeight,
@@ -190,10 +232,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     fontName: remainingTokens.dayPickerWeekHeaderFontName,
     fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
   });
-  const renderPrevButton = _ref3 => {
+  const renderPrevButton = _ref5 => {
     let {
       onClick
-    } = _ref3;
+    } = _ref5;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
       onPress: () => {
         onClick();
@@ -205,10 +247,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       testID: prevTestID
     });
   };
-  const renderNextButton = _ref4 => {
+  const renderNextButton = _ref6 => {
     let {
       onClick
-    } = _ref4;
+    } = _ref6;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
       onPress: () => {
         onClick();
@@ -220,18 +262,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       testID: nextTestID
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
-    ...selectProps(rest),
-    daySize: daySize,
-    validation: validation,
-    remainingTokens: {
-      ...remainingTokens
-    },
-    calendarDayDefaultHeight: circleSize,
-    calendarDayDefaultWidth: circleSize,
-    calendarMonthFontTokens: calendarMonthFontTokens,
-    calendarWeekFontTokens: calendarWeekFontTokens,
-    defaultFontTokens: defaultFontTokens,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: inline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HiddenInputFieldContainer, {
         height: hiddenInputFieldContainerHeight,
@@ -243,68 +274,33 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           value: inputText,
           readOnly: true
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
-        date: inputDate,
-        onDateChange: onChange,
-        focused: isFocused,
-        onFocusChange: onFocusChange,
-        numberOfMonths: 1,
-        hideKeyboardShortcutsPanel: true,
-        keepOpenOnDateSelect: false,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
+        ...selectProps(rest),
         daySize: daySize,
-        renderNavPrevButton: renderPrevButton,
-        renderNavNextButton: renderNextButton,
-        isOutsideRange: isDayDisabled,
-        phrases: getCopy(),
-        renderMonthElement: _ref5 => {
-          let {
-            month
-          } = _ref5;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
-            })
-          });
-        },
-        renderWeekHeaderElement: day => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
-        })
-      })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateInputWrapper, {
-      onMouseDown: handleMouseDown,
-      onFocus: handleFocus,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
-        copy: copy,
-        feedback: feedback,
-        hint: hint,
-        placeholder: "DD / MM / YYYY",
-        onChange: onChangeInput,
-        tooltip: tooltip,
-        hintPosition: hintPosition,
-        label: ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
-        value: inputText,
         validation: validation,
-        inactive: disabled,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleDatePicker.default, {
+        remainingTokens: remainingTokens,
+        calendarDayDefaultHeight: circleSize,
+        calendarDayDefaultWidth: circleSize,
+        calendarMonthFontTokens: calendarMonthFontTokens,
+        calendarWeekFontTokens: calendarWeekFontTokens,
+        defaultFontTokens: defaultFontTokens,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
           date: inputDate,
-          disabled: disabled,
           onDateChange: onChange,
           focused: isFocused,
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,
-          keepOpenOnDateSelect: true,
+          keepOpenOnDateSelect: false,
           daySize: daySize,
-          ref: ref,
           renderNavPrevButton: renderPrevButton,
+          renderNavNextButton: renderNextButton,
           isOutsideRange: isDayDisabled,
           phrases: getCopy(),
-          id: id,
-          renderNavNextButton: renderNextButton,
-          renderMonthElement: _ref6 => {
+          renderMonthElement: _ref7 => {
             let {
               month
-            } = _ref6;
+            } = _ref7;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
@@ -315,6 +311,70 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
             children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
           })
         })
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateInputWrapper, {
+      onMouseDown: handleMouseDown,
+      onFocus: handleFocus,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
+        copy: copy,
+        feedback: feedback,
+        hint: hint,
+        placeholder: "DD / MM / YYYY",
+        onChange: onChangeInput,
+        tooltip: tooltip,
+        hintPosition: hintPosition,
+        label: ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
+        value: inputText,
+        validation: validation,
+        inactive: disabled,
+        ref: textInputRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PortalPositionedContainer, {
+            top: datePickerPosition.top,
+            left: datePickerPosition.left,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
+              ...selectProps(rest),
+              daySize: daySize,
+              validation: validation,
+              remainingTokens: remainingTokens,
+              calendarDayDefaultHeight: circleSize,
+              calendarDayDefaultWidth: circleSize,
+              calendarMonthFontTokens: calendarMonthFontTokens,
+              calendarWeekFontTokens: calendarWeekFontTokens,
+              defaultFontTokens: defaultFontTokens,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleDatePicker.default, {
+                date: inputDate,
+                disabled: disabled,
+                onDateChange: onChange,
+                focused: isFocused,
+                onFocusChange: onFocusChange,
+                numberOfMonths: 1,
+                hideKeyboardShortcutsPanel: true,
+                keepOpenOnDateSelect: true,
+                daySize: daySize,
+                ref: ref,
+                renderNavPrevButton: renderPrevButton,
+                isOutsideRange: isDayDisabled,
+                phrases: getCopy(),
+                id: id,
+                renderNavNextButton: renderNextButton,
+                renderMonthElement: _ref8 => {
+                  let {
+                    month
+                  } = _ref8;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                      children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+                    })
+                  });
+                },
+                renderWeekHeaderElement: day => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
+                })
+              })
+            })
+          })
+        })
       })
     })
   });

package/lib/Image/Image.js

@@ -6,40 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-var _utils = require("../utils");
+var _server = require("@telus-uds/components-base/server");
+var _logger = require("../utils/logger");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const StyledImage = /*#__PURE__*/_styledComponents.default.img.withConfig({
-  displayName: "Image__StyledImage",
-  componentId: "components-web__sc-blwu4l-0"
-})(_ref => {
-  let {
-    height
-  } = _ref;
-  return {
-    height: height ?? 'auto',
-    maxWidth: '100%'
-  };
-});
-const StyledRoundedImage = /*#__PURE__*/(0, _styledComponents.default)(StyledImage).withConfig({
-  displayName: "Image__StyledRoundedImage",
-  componentId: "components-web__sc-blwu4l-1"
-})(["border-radius:", "px;"], _ref2 => {
-  let {
-    borderRadius
-  } = _ref2;
-  return borderRadius;
-});
-const StyledCircularImage = /*#__PURE__*/(0, _styledComponents.default)(StyledImage).withConfig({
-  displayName: "Image__StyledCircularImage",
-  componentId: "components-web__sc-blwu4l-2"
-})({
-  borderRadius: '50%'
-});
-const Image = _ref3 => {
+const [selectProps, selectedSystemPropTypes] = (0, _server.selectSystemProps)([_server.htmlAttrs]);
+const Image = _ref => {
   let {
     src,
     width,
@@ -48,29 +20,32 @@ const Image = _ref3 => {
     rounded,
     loading = 'eager',
     tokens,
+    theme,
     variant,
     ...rest
-  } = _ref3;
-  const {
+  } = _ref;
+  let {
     borderRadius
-  } = (0, _componentsBase.useThemeTokens)('Image', tokens, variant);
+  } = theme;
   const isCircle = rounded === 'circle';
   const isCorners = rounded === 'corners';
   const isSquare = width === height;
   if (isCircle && !isSquare) {
-    (0, _utils.warn)('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
+    (0, _logger.warn)('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
   }
-  let ImageComponent;
   if (isCircle) {
-    ImageComponent = StyledCircularImage;
+    borderRadius = '50%';
   } else if (isCorners) {
-    ImageComponent = StyledRoundedImage;
-  } else {
-    ImageComponent = StyledImage;
+    borderRadius = '4px';
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageComponent, {
+  const style = {
+    borderRadius,
+    height: height ?? 'auto',
+    maxWidth: '100%'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
     ...selectProps(rest),
-    borderRadius: borderRadius,
+    style: style,
     src: src,
     width: width,
     height: height,
@@ -107,7 +82,8 @@ Image.propTypes = {
    * Make image render as a circle or with rounded corners.
    */
   rounded: _propTypes.default.oneOf(['circle', 'corners']),
-  tokens: (0, _componentsBase.getTokensPropType)('Image')
+  tokens: (0, _server.getTokensPropType)('Image')
 };
+Image.displayName = 'Image';
 var _default = Image;
 exports.default = _default;

package/lib/Image/index.js

@@ -3,8 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DefaultImage", {
+  enumerable: true,
+  get: function () {
+    return _Image.default;
+  }
+});
 exports.default = void 0;
 var _Image = _interopRequireDefault(require("./Image"));
+var _withClientTheme = _interopRequireDefault(require("../utils/theming/with-client-theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Image.default;
+// Exporting the unwrapped component separately for react-docgen to extract info for docsite
+
+const ClientThemedImage = (0, _withClientTheme.default)(_Image.default);
+var _default = ClientThemedImage;
 exports.default = _default;

package/lib/Image/server.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _withServerTheme = _interopRequireDefault(require("../utils/theming/with-server-theme"));
+var _Image = _interopRequireDefault(require("./Image"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ServerThemedImage = (0, _withServerTheme.default)(_Image.default, 'Image');
+var _default = ServerThemedImage;
+exports.default = _default;

package/lib/OptimizeImage/OptimizeImage.js

@@ -42,7 +42,7 @@ const OptimizeImage = _ref => {
         mdSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
         lgSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
         xlSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
-        fallbackSrc: (0, _utils.getFallbackUrl)(contentfulAssetUrl, xl, quality)
+        fallbackSrc: (0, _utils.getFallbackUrl)(contentfulAssetUrl, dimension, xl, quality)
       });
     });
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);

package/lib/OptimizeImage/utils/getFallbackUrl.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = getFallbackUrl;
 var _isSvgUrl = _interopRequireDefault(require("./isSvgUrl"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function getFallbackUrl(url, width, quality) {
+function getFallbackUrl(url, dimension, size, quality) {
   if (!(0, _isSvgUrl.default)(url)) {
-    return `${url}?w=${width}&q=${quality}`;
+    return `${url}?${dimension}=${size}&q=${quality}`;
   }
   return url;
 }

package/lib/Table/Cell.js

@@ -49,23 +49,30 @@ const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 =>
 const createStyledCell = htmlElement => _styledComponents.default[htmlElement].withConfig({
   displayName: "Cell__createStyledCell",
   componentId: "components-web__sc-ltgfic-0"
-})(["", ";box-shadow:", ";"], sharedStyles, _ref3 => {
+})(["", ";box-shadow:", ";", ""], sharedStyles, _ref3 => {
   let {
     cellBoxShadowColor,
     type
   } = _ref3;
   return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
+}, _ref4 => {
+  let {
+    display
+  } = _ref4;
+  return display && `*:not(:empty) {
+    display: ${display};
+  }`;
 });
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
-const Cell = _ref4 => {
+const Cell = _ref5 => {
   let {
     children,
     isFirstInRow,
     align = 'left',
     tokens: cellTokens,
     type = 'default'
-  } = _ref4;
+  } = _ref5;
   const {
     text,
     isScrollable: isTableScrollable,
@@ -90,7 +97,8 @@ const Cell = _ref4 => {
     fontSize,
     lineHeight,
     stickyBackgroundColor,
-    fontColor
+    fontColor,
+    display
   } = (0, _componentsBase.useThemeTokens)('Table', themeTokens, {
     spacing,
     type,
@@ -107,7 +115,8 @@ const Cell = _ref4 => {
     cellPaddingLeft,
     cellPaddingBottom,
     stickyBackgroundColor,
-    cellBoxShadowColor
+    cellBoxShadowColor,
+    display
   };
   const typographyTokens = {
     fontName,

package/lib/baseExports.js

@@ -93,6 +93,12 @@ Object.defineProperty(exports, "ChevronLink", {
     return _componentsBase.ChevronLink;
   }
 });
+Object.defineProperty(exports, "ColourToggle", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ColourToggle;
+  }
+});
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function () {

package/lib/index.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -19,6 +20,8 @@ var _exportNames = {
   Footnote: true,
   QuantitySelector: true,
   IconButton: true,
+  Image: true,
+  DefaultImage: true,
   transformGradient: true,
   ssrStyles: true,
   Breadcrumbs: true,
@@ -27,7 +30,6 @@ var _exportNames = {
   Testimonial: true,
   Toast: true,
   Table: true,
-  Image: true,
   WebVideo: true,
   WaffleGrid: true,
   Spinner: true,
@@ -85,6 +87,12 @@ Object.defineProperty(exports, "DatePicker", {
     return _DatePicker.default;
   }
 });
+Object.defineProperty(exports, "DefaultImage", {
+  enumerable: true,
+  get: function () {
+    return _Image.DefaultImage;
+  }
+});
 Object.defineProperty(exports, "Disclaimer", {
   enumerable: true,
   get: function () {
@@ -286,6 +294,7 @@ var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
 var _Footnote = _interopRequireDefault(require("./Footnote"));
 var _QuantitySelector = _interopRequireDefault(require("./QuantitySelector"));
 var _IconButton = _interopRequireDefault(require("./IconButton"));
+var _Image = _interopRequireWildcard(require("./Image"));
 var _utils = require("./utils");
 var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
 var _BlockQuote = _interopRequireDefault(require("./BlockQuote"));
@@ -293,7 +302,6 @@ var _OptimizeImage = _interopRequireDefault(require("./OptimizeImage"));
 var _Testimonial = _interopRequireDefault(require("./Testimonial"));
 var _Toast = _interopRequireDefault(require("./Toast"));
 var _Table = _interopRequireDefault(require("./Table"));
-var _Image = _interopRequireDefault(require("./Image"));
 var _WebVideo = _interopRequireDefault(require("./WebVideo"));
 var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
 var _Spinner = _interopRequireDefault(require("./Spinner"));
@@ -320,4 +328,6 @@ Object.keys(_baseExports).forEach(function (key) {
     }
   });
 });
+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 }; }

package/lib/server.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () {
+    return _server.default;
+  }
+});
+var _server = _interopRequireDefault(require("./Image/server"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/theming/get-theme-from-server.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getTheme;
+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 cachedTheme = {};
+const theme = process.env.UDS_THEME;
+async function importTheme(componentName) {
+  try {
+    cachedTheme[componentName] = await Promise.resolve(`@telus-uds/theme-${theme}/build/rn/${componentName}.js`).then(s => _interopRequireWildcard(require(s)));
+  } catch (_) {
+    throw new Error(`An error occurred while trying to import theme-${process.env.UDS_THEME}. Please check that the theme has been installed in your app or that you are not importing a server component inside a client component.`);
+  }
+}
+async function getTheme(componentName) {
+  if (cachedTheme[componentName]) {
+    return cachedTheme[componentName];
+  }
+  await importTheme(componentName);
+  return cachedTheme[componentName];
+}