@telus-uds/components-web 2.26.0 → 2.28.0

package/lib/utils/theming/with-client-theme.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const withClientTheme = Component => {
+  const UdsStyledComponent = _ref => {
+    let {
+      tokens: tokenOverrides,
+      variant,
+      ...props
+    } = _ref;
+    const theme = (0, _componentsBase.useThemeTokens)(Component.displayName, variant, tokenOverrides);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      theme: theme,
+      ...props
+    });
+  };
+  UdsStyledComponent.propTypes = {
+    tokens: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    variant: _propTypes.default.string
+  };
+  return UdsStyledComponent;
+};
+var _default = withClientTheme;
+exports.default = _default;

package/lib/utils/theming/with-server-theme.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _server = require("@telus-uds/components-base/server");
+var _getThemeFromServer = _interopRequireDefault(require("./get-theme-from-server"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const withServerTheme = (Component, componentName) => {
+  const UdsStyledComponent = async _ref => {
+    let {
+      tokens: tokenOverrides,
+      variant,
+      ...props
+    } = _ref;
+    const componentTheme = await (0, _getThemeFromServer.default)(componentName);
+    const themeTokens = (0, _server.getThemeTokens)(componentTheme, tokenOverrides, variant);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      theme: themeTokens,
+      ...props
+    });
+  };
+  UdsStyledComponent.propTypes = {
+    tokens: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    variant: _propTypes.default.string
+  };
+  return UdsStyledComponent;
+};
+var _default = withServerTheme;
+exports.default = _default;

package/lib-module/DatePicker/DatePicker.js

@@ -1,13 +1,13 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import momentPropTypes from 'react-moment-proptypes';
 import 'react-dates/initialize';
 import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
-import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType } from '@telus-uds/components-base';
+import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType, Portal, useSafeLayoutEffect } from '@telus-uds/components-base';
 import moment from 'moment';
-import { isUndefined } from 'lodash';
+import { isUndefined, throttle } from 'lodash';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
@@ -47,6 +47,24 @@ const DateInputWrapper = /*#__PURE__*/styled.div.withConfig({
   display: 'flex',
   flexDirection: 'column'
 });
+const PortalPositionedContainer = /*#__PURE__*/styled.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.
@@ -69,7 +87,7 @@ const DateInputWrapper = /*#__PURE__*/styled.div.withConfig({
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var _dictionary$copy;
   let {
     copy = 'en',
@@ -90,9 +108,33 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     prevTestID,
     nextTestID,
     ...rest
-  } = _ref;
+  } = _ref3;
   const [inputDate, setInputDate] = useState(date instanceof moment ? date : undefined);
   const [inputText, setInputText] = useState(date instanceof moment ? date.format(dateFormat) : '');
+  const textInputRef = useRef();
+  const [datePickerPosition, setDatePickerPosition] = useState({
+    left: 0,
+    top: 0
+  });
+  useSafeLayoutEffect(() => {
+    const updateDimensions = () => {
+      if (inline) return;
+      const {
+        left,
+        top
+      } = textInputRef.current.getBoundingClientRect();
+      setDatePickerPosition({
+        left,
+        top: top + textInputRef.current.offsetHeight
+      });
+    };
+    const throttledUpdateDimensions = throttle(updateDimensions, 100, {
+      leading: false
+    });
+    updateDimensions();
+    window.addEventListener('resize', throttledUpdateDimensions);
+    return () => window.removeEventListener('resize', throttledUpdateDimensions);
+  }, []);
   const [isFocused, setIsFocused] = useState(false);
   const [isClickedInside, setIsClickedInside] = useState(false);
   const getCopy = useCopy({
@@ -109,10 +151,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       setInputText(date instanceof moment ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
-  const onFocusChange = _ref2 => {
+  const onFocusChange = _ref4 => {
     let {
       focused
-    } = _ref2;
+    } = _ref4;
     if (!isClickedInside) {
       setIsFocused(focused);
     }
@@ -157,7 +199,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   const circleSize = getResponsiveCircleSize(inline, viewport);
   const HiddenInputFieldContainer = /*#__PURE__*/styled.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,
@@ -183,10 +225,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontName: remainingTokens.dayPickerWeekHeaderFontName,
     fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
   });
-  const renderPrevButton = _ref3 => {
+  const renderPrevButton = _ref5 => {
     let {
       onClick
-    } = _ref3;
+    } = _ref5;
     return /*#__PURE__*/_jsx(IconButton, {
       onPress: () => {
         onClick();
@@ -198,10 +240,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       testID: prevTestID
     });
   };
-  const renderNextButton = _ref4 => {
+  const renderNextButton = _ref6 => {
     let {
       onClick
-    } = _ref4;
+    } = _ref6;
     return /*#__PURE__*/_jsx(IconButton, {
       onPress: () => {
         onClick();
@@ -213,18 +255,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       testID: nextTestID
     });
   };
-  return /*#__PURE__*/_jsx(CalendarContainer, {
-    ...selectProps(rest),
-    daySize: daySize,
-    validation: validation,
-    remainingTokens: {
-      ...remainingTokens
-    },
-    calendarDayDefaultHeight: circleSize,
-    calendarDayDefaultWidth: circleSize,
-    calendarMonthFontTokens: calendarMonthFontTokens,
-    calendarWeekFontTokens: calendarWeekFontTokens,
-    defaultFontTokens: defaultFontTokens,
+  return /*#__PURE__*/_jsx(_Fragment, {
     children: inline ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(HiddenInputFieldContainer, {
         height: hiddenInputFieldContainerHeight,
@@ -236,68 +267,33 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
           value: inputText,
           readOnly: true
         })
-      }), /*#__PURE__*/_jsx(DayPickerSingleDateController, {
-        date: inputDate,
-        onDateChange: onChange,
-        focused: isFocused,
-        onFocusChange: onFocusChange,
-        numberOfMonths: 1,
-        hideKeyboardShortcutsPanel: true,
-        keepOpenOnDateSelect: false,
+      }), /*#__PURE__*/_jsx(CalendarContainer, {
+        ...selectProps(rest),
         daySize: daySize,
-        renderNavPrevButton: renderPrevButton,
-        renderNavNextButton: renderNextButton,
-        isOutsideRange: isDayDisabled,
-        phrases: getCopy(),
-        renderMonthElement: _ref5 => {
-          let {
-            month
-          } = _ref5;
-          return /*#__PURE__*/_jsx(MonthCenterContainer, {
-            children: /*#__PURE__*/_jsxs("div", {
-              children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
-            })
-          });
-        },
-        renderWeekHeaderElement: day => /*#__PURE__*/_jsx("div", {
-          children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
-        })
-      })]
-    }) : /*#__PURE__*/_jsx(DateInputWrapper, {
-      onMouseDown: handleMouseDown,
-      onFocus: handleFocus,
-      children: /*#__PURE__*/_jsx(TextInput, {
-        copy: copy,
-        feedback: feedback,
-        hint: hint,
-        placeholder: "DD / MM / YYYY",
-        onChange: onChangeInput,
-        tooltip: tooltip,
-        hintPosition: hintPosition,
-        label: ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
-        value: inputText,
         validation: validation,
-        inactive: disabled,
-        children: /*#__PURE__*/_jsx(SingleDatePicker, {
+        remainingTokens: remainingTokens,
+        calendarDayDefaultHeight: circleSize,
+        calendarDayDefaultWidth: circleSize,
+        calendarMonthFontTokens: calendarMonthFontTokens,
+        calendarWeekFontTokens: calendarWeekFontTokens,
+        defaultFontTokens: defaultFontTokens,
+        children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
           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__*/_jsx(MonthCenterContainer, {
               children: /*#__PURE__*/_jsxs("div", {
                 children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
@@ -308,6 +304,70 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
             children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
           })
         })
+      })]
+    }) : /*#__PURE__*/_jsx(DateInputWrapper, {
+      onMouseDown: handleMouseDown,
+      onFocus: handleFocus,
+      children: /*#__PURE__*/_jsx(TextInput, {
+        copy: copy,
+        feedback: feedback,
+        hint: hint,
+        placeholder: "DD / MM / YYYY",
+        onChange: onChangeInput,
+        tooltip: tooltip,
+        hintPosition: hintPosition,
+        label: ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
+        value: inputText,
+        validation: validation,
+        inactive: disabled,
+        ref: textInputRef,
+        children: /*#__PURE__*/_jsx(Portal, {
+          children: /*#__PURE__*/_jsx(PortalPositionedContainer, {
+            top: datePickerPosition.top,
+            left: datePickerPosition.left,
+            children: /*#__PURE__*/_jsx(CalendarContainer, {
+              ...selectProps(rest),
+              daySize: daySize,
+              validation: validation,
+              remainingTokens: remainingTokens,
+              calendarDayDefaultHeight: circleSize,
+              calendarDayDefaultWidth: circleSize,
+              calendarMonthFontTokens: calendarMonthFontTokens,
+              calendarWeekFontTokens: calendarWeekFontTokens,
+              defaultFontTokens: defaultFontTokens,
+              children: /*#__PURE__*/_jsx(SingleDatePicker, {
+                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__*/_jsx(MonthCenterContainer, {
+                    children: /*#__PURE__*/_jsxs("div", {
+                      children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+                    })
+                  });
+                },
+                renderWeekHeaderElement: day => /*#__PURE__*/_jsx("div", {
+                  children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
+                })
+              })
+            })
+          })
+        })
       })
     })
   });

package/lib-module/Image/Image.js

@@ -1,38 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { selectSystemProps, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import { htmlAttrs, warn } from '../utils';
+import { htmlAttrs, selectSystemProps, getTokensPropType } from '@telus-uds/components-base/server';
+import { warn } from '../utils/logger';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledImage = /*#__PURE__*/styled.img.withConfig({
-  displayName: "Image__StyledImage",
-  componentId: "components-web__sc-blwu4l-0"
-})(_ref => {
-  let {
-    height
-  } = _ref;
-  return {
-    height: height ?? 'auto',
-    maxWidth: '100%'
-  };
-});
-const StyledRoundedImage = /*#__PURE__*/styled(StyledImage).withConfig({
-  displayName: "Image__StyledRoundedImage",
-  componentId: "components-web__sc-blwu4l-1"
-})(["border-radius:", "px;"], _ref2 => {
-  let {
-    borderRadius
-  } = _ref2;
-  return borderRadius;
-});
-const StyledCircularImage = /*#__PURE__*/styled(StyledImage).withConfig({
-  displayName: "Image__StyledCircularImage",
-  componentId: "components-web__sc-blwu4l-2"
-})({
-  borderRadius: '50%'
-});
-const Image = _ref3 => {
+const Image = _ref => {
   let {
     src,
     width,
@@ -41,29 +13,32 @@ const Image = _ref3 => {
     rounded,
     loading = 'eager',
     tokens,
+    theme,
     variant,
     ...rest
-  } = _ref3;
-  const {
+  } = _ref;
+  let {
     borderRadius
-  } = useThemeTokens('Image', tokens, variant);
+  } = theme;
   const isCircle = rounded === 'circle';
   const isCorners = rounded === 'corners';
   const isSquare = width === height;
   if (isCircle && !isSquare) {
     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__*/_jsx(ImageComponent, {
+  const style = {
+    borderRadius,
+    height: height ?? 'auto',
+    maxWidth: '100%'
+  };
+  return /*#__PURE__*/_jsx("img", {
     ...selectProps(rest),
-    borderRadius: borderRadius,
+    style: style,
     src: src,
     width: width,
     height: height,
@@ -102,4 +77,5 @@ Image.propTypes = {
   rounded: PropTypes.oneOf(['circle', 'corners']),
   tokens: getTokensPropType('Image')
 };
+Image.displayName = 'Image';
 export default Image;

package/lib-module/Image/index.js

@@ -1,2 +1,7 @@
 import Image from './Image';
-export default Image;
+import withClientTheme from '../utils/theming/with-client-theme';
+
+// Exporting the unwrapped component separately for react-docgen to extract info for docsite
+export { Image as DefaultImage };
+const ClientThemedImage = withClientTheme(Image);
+export default ClientThemedImage;

package/lib-module/Image/server.js

@@ -0,0 +1,4 @@
+import withServerTheme from '../utils/theming/with-server-theme';
+import Image from './Image';
+const ServerThemedImage = withServerTheme(Image, 'Image');
+export default ServerThemedImage;

package/lib-module/OptimizeImage/OptimizeImage.js

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

package/lib-module/OptimizeImage/utils/getFallbackUrl.js

@@ -1,7 +1,7 @@
 import isSvgUrl from './isSvgUrl';
-export default function getFallbackUrl(url, width, quality) {
+export default function getFallbackUrl(url, dimension, size, quality) {
   if (!isSvgUrl(url)) {
-    return `${url}?w=${width}&q=${quality}`;
+    return `${url}?${dimension}=${size}&q=${quality}`;
   }
   return url;
 }

package/lib-module/Table/Cell.js

@@ -40,23 +40,30 @@ const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
 const createStyledCell = htmlElement => styled[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,
@@ -81,7 +88,8 @@ const Cell = _ref4 => {
     fontSize,
     lineHeight,
     stickyBackgroundColor,
-    fontColor
+    fontColor,
+    display
   } = useThemeTokens('Table', themeTokens, {
     spacing,
     type,
@@ -98,7 +106,8 @@ const Cell = _ref4 => {
     cellPaddingLeft,
     cellPaddingBottom,
     stickyBackgroundColor,
-    cellBoxShadowColor
+    cellBoxShadowColor,
+    display
   };
   const typographyTokens = {
     fontName,

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/lib-module/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 export { default as Badge } from './Badge';
 export { default as OrderedList } from './OrderedList';
 export { default as PreviewCard } from './PreviewCard';
@@ -13,6 +15,7 @@ export { default as PriceLockup } from './PriceLockup';
 export { default as Footnote } from './Footnote';
 export { default as QuantitySelector } from './QuantitySelector';
 export { default as IconButton } from './IconButton';
+export { default as Image, DefaultImage } from './Image';
 export { transformGradient } from './utils';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export { default as BlockQuote } from './BlockQuote';
@@ -20,7 +23,6 @@ export { default as OptimizeImage } from './OptimizeImage';
 export { default as Testimonial } from './Testimonial';
 export { default as Toast } from './Toast';
 export { default as Table } from './Table';
-export { default as Image } from './Image';
 export { default as WebVideo } from './WebVideo';
 export { default as WaffleGrid } from './WaffleGrid';
 export { default as Spinner } from './Spinner';

package/lib-module/server.js

@@ -0,0 +1,5 @@
+import ServerThemedImage from './Image/server';
+
+// Export themed components
+/* eslint-disable import/prefer-default-export */
+export { ServerThemedImage as Image };

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

@@ -0,0 +1,16 @@
+const cachedTheme = {};
+const theme = process.env.UDS_THEME;
+async function importTheme(componentName) {
+  try {
+    cachedTheme[componentName] = await import(`@telus-uds/theme-${theme}/build/rn/${componentName}.js`);
+  } 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.`);
+  }
+}
+export default async function getTheme(componentName) {
+  if (cachedTheme[componentName]) {
+    return cachedTheme[componentName];
+  }
+  await importTheme(componentName);
+  return cachedTheme[componentName];
+}

package/lib-module/utils/theming/with-client-theme.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
+const withClientTheme = Component => {
+  const UdsStyledComponent = _ref => {
+    let {
+      tokens: tokenOverrides,
+      variant,
+      ...props
+    } = _ref;
+    const theme = useThemeTokens(Component.displayName, variant, tokenOverrides);
+    return /*#__PURE__*/_jsx(Component, {
+      theme: theme,
+      ...props
+    });
+  };
+  UdsStyledComponent.propTypes = {
+    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    variant: PropTypes.string
+  };
+  return UdsStyledComponent;
+};
+export default withClientTheme;

package/lib-module/utils/theming/with-server-theme.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getThemeTokens } from '@telus-uds/components-base/server';
+import getTheme from './get-theme-from-server';
+import { jsx as _jsx } from "react/jsx-runtime";
+const withServerTheme = (Component, componentName) => {
+  const UdsStyledComponent = async _ref => {
+    let {
+      tokens: tokenOverrides,
+      variant,
+      ...props
+    } = _ref;
+    const componentTheme = await getTheme(componentName);
+    const themeTokens = getThemeTokens(componentTheme, tokenOverrides, variant);
+    return /*#__PURE__*/_jsx(Component, {
+      theme: themeTokens,
+      ...props
+    });
+  };
+  UdsStyledComponent.propTypes = {
+    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    variant: PropTypes.string
+  };
+  return UdsStyledComponent;
+};
+export default withServerTheme;