@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -1,17 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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 _helpers = require("../helpers");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ButtonContainer = /*#__PURE__*/_styledComponents.default.button.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Typography, useThemeTokens } from '@telus-uds/components-base';
+import { getAriaLabel, getTimestamp } from '../helpers';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ButtonContainer = /*#__PURE__*/styled.button.withConfig({
   displayName: "SplashButtonWithDetails__ButtonContainer",
   componentId: "components-web__sc-1edwy9o-0"
 })({
@@ -23,7 +16,7 @@ const ButtonContainer = /*#__PURE__*/_styledComponents.default.button.withConfig
   padding: 0,
   cursor: 'pointer'
 });
-const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const ButtonContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "SplashButtonWithDetails__ButtonContent",
   componentId: "components-web__sc-1edwy9o-1"
 })({
@@ -89,7 +82,7 @@ const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
     }
   }
 });
-const PlayIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const PlayIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "SplashButtonWithDetails__PlayIconContainer",
   componentId: "components-web__sc-1edwy9o-2"
 })({
@@ -107,7 +100,7 @@ const PlayIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   borderRadius: '100%',
   transition: 'background 0.2s ease-in-out'
 });
-const DetailsContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const DetailsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "SplashButtonWithDetails__DetailsContainer",
   componentId: "components-web__sc-1edwy9o-3"
 })({
@@ -179,36 +172,36 @@ const SplashButtonWithDetails = _ref16 => {
   } = _ref16;
   const {
     buttonContentChildrenBackground
-  } = (0, _componentsBase.useThemeTokens)('SplashButtonWithDetails', tokens, variant, {
+  } = useThemeTokens('SplashButtonWithDetails', tokens, variant, {
     hover: true
   });
   const {
     playIcon: PlayIcon,
     playIconColor,
     ...themeTokens
-  } = (0, _componentsBase.useThemeTokens)('SplashButtonWithDetails', tokens, variant);
-  const mappedVideoLength = (0, _helpers.getTimestamp)(videoLength, copy);
-  const ariaLabel = (0, _helpers.getAriaLabel)(mappedVideoLength, copy);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+  } = useThemeTokens('SplashButtonWithDetails', tokens, variant);
+  const mappedVideoLength = getTimestamp(videoLength, copy);
+  const ariaLabel = getAriaLabel(mappedVideoLength, copy);
+  return /*#__PURE__*/_jsx(ButtonContainer, {
     "aria-label": ariaLabel,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonContent, {
+    children: /*#__PURE__*/_jsxs(ButtonContent, {
       ...selectButtonContentTokens(themeTokens),
       buttonContentChildrenBackground: buttonContentChildrenBackground,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIconContainer, {
+      children: [/*#__PURE__*/_jsx(PlayIconContainer, {
         ...selectPlayIconContainerTokens(themeTokens),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIcon, {
+        children: /*#__PURE__*/_jsx(PlayIcon, {
           size: 13,
           color: playIconColor
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DetailsContainer, {
+      }), /*#__PURE__*/_jsxs(DetailsContainer, {
         ...selectDetailsContainerTokens(themeTokens),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        children: [/*#__PURE__*/_jsx(Typography, {
           variant: {
             bold: true
           },
           tokens: getLabelTokens(themeTokens),
           children: label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        }), /*#__PURE__*/_jsx(Typography, {
           variant: {
             colour: 'secondary' /* TODO: this is not the same color as in designs */,
             size: 'micro'
@@ -220,11 +213,10 @@ const SplashButtonWithDetails = _ref16 => {
   });
 };
 SplashButtonWithDetails.propTypes = {
-  label: _propTypes.default.string,
-  tokens: _propTypes.default.object,
-  variant: _propTypes.default.object,
-  videoLength: _propTypes.default.number,
-  copy: _propTypes.default.oneOf(['en', 'fr'])
+  label: PropTypes.string,
+  tokens: PropTypes.object,
+  variant: PropTypes.object,
+  videoLength: PropTypes.number,
+  copy: PropTypes.oneOf(['en', 'fr'])
 };
-var _default = SplashButtonWithDetails;
-exports.default = _default;
+export default SplashButtonWithDetails;

package/lib/shared/VideoSplash/VideoSplash.js

@@ -1,22 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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 _systemConstants = require("@telus-uds/system-constants");
-var _SplashButton = _interopRequireDefault(require("./SplashButton/SplashButton"));
-var _SplashButtonWithDetails = _interopRequireDefault(require("./SplashButtonWithDetails/SplashButtonWithDetails"));
-var _videoText = _interopRequireDefault(require("../../Video/videoText"));
-var _utils = require("../../utils");
-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 SplashBackground = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps, useViewport } from '@telus-uds/components-base';
+import { viewports } from '@telus-uds/system-constants';
+import SplashButton from './SplashButton/SplashButton';
+import SplashButtonWithDetails from './SplashButtonWithDetails/SplashButtonWithDetails';
+import videoText from '../../Video/videoText';
+import { htmlAttrs } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const SplashBackground = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoSplash__SplashBackground",
   componentId: "components-web__sc-1ejxt6-0"
 })(_ref => {
@@ -44,18 +37,18 @@ const VideoSplash = _ref2 => {
     onClick,
     ...rest
   } = _ref2;
-  const viewport = (0, _componentsBase.useViewport)();
-  const showDetails = !simpleMode && viewport !== _systemConstants.viewports.xs;
-  const label = _videoText.default[copy].watch;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SplashBackground, {
+  const viewport = useViewport();
+  const showDetails = !simpleMode && viewport !== viewports.xs;
+  const label = videoText[copy].watch;
+  return /*#__PURE__*/_jsx(SplashBackground, {
     ...selectProps(rest),
     onClick: onClick,
     videoPoster: poster,
-    children: showDetails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SplashButtonWithDetails.default, {
+    children: showDetails ? /*#__PURE__*/_jsx(SplashButtonWithDetails, {
       videoLength: videoLength,
       copy: copy,
       label: label
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SplashButton.default, {
+    }) : /*#__PURE__*/_jsx(SplashButton, {
       videoLength: videoLength,
       copy: copy
     })
@@ -63,11 +56,10 @@ const VideoSplash = _ref2 => {
 };
 VideoSplash.propTypes = {
   ...selectedSystemPropTypes,
-  onClick: _propTypes.default.func,
-  poster: _propTypes.default.string,
-  videoLength: _propTypes.default.number.isRequired,
-  simpleMode: _propTypes.default.bool,
-  copy: _propTypes.default.oneOf(['en', 'fr'])
+  onClick: PropTypes.func,
+  poster: PropTypes.string,
+  videoLength: PropTypes.number.isRequired,
+  simpleMode: PropTypes.bool,
+  copy: PropTypes.oneOf(['en', 'fr'])
 };
-var _default = VideoSplash;
-exports.default = _default;
+export default VideoSplash;

package/lib/shared/VideoSplash/helpers.js

@@ -1,12 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTimestamp = exports.getAriaLabel = void 0;
-var _videoText = _interopRequireDefault(require("../../Video/videoText"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const getTimestamp = (videoLength, copy) => {
+import videoText from '../../Video/videoText';
+export const getTimestamp = (videoLength, copy) => {
   const minutes = Math.floor(videoLength / 60);
   const seconds = Math.ceil(videoLength % 60);
   const minutesText = minutes > 0 ? `${minutes}min ` : '';
@@ -18,15 +11,13 @@ const getTimestamp = (videoLength, copy) => {
     timestamp
   };
 };
-exports.getTimestamp = getTimestamp;
-const getAriaLabel = (timestamp, copy) => {
+export const getAriaLabel = (timestamp, copy) => {
   const {
     minutes,
     seconds
   } = timestamp;
-  const text = _videoText.default[copy];
+  const text = videoText[copy];
   const minutesText = `${minutes} ${minutes !== 1 ? text.minutes : text.minute}`;
   const secondsText = `${seconds} ${seconds !== 1 ? text.seconds : text.second}`;
   return text.ariaLabel.replace('{minutes}', minutesText).replace('{seconds}', secondsText);
-};
-exports.getAriaLabel = getAriaLabel;
+};

package/lib/utils/index.js

@@ -1,75 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "deprecate", {
-  enumerable: true,
-  get: function () {
-    return _logger.deprecate;
-  }
-});
-Object.defineProperty(exports, "htmlAttrs", {
-  enumerable: true,
-  get: function () {
-    return _componentsBase.htmlAttrs;
-  }
-});
-Object.defineProperty(exports, "isElementFocusable", {
-  enumerable: true,
-  get: function () {
-    return _isElementFocusable.default;
-  }
-});
-Object.defineProperty(exports, "media", {
-  enumerable: true,
-  get: function () {
-    return _media.default;
-  }
-});
-Object.defineProperty(exports, "renderStructuredContent", {
-  enumerable: true,
-  get: function () {
-    return _renderStructuredContent.default;
-  }
-});
-Object.defineProperty(exports, "ssrStyles", {
-  enumerable: true,
-  get: function () {
-    return _ssr.default;
-  }
-});
-Object.defineProperty(exports, "transformGradient", {
-  enumerable: true,
-  get: function () {
-    return _transforms.transformGradient;
-  }
-});
-Object.defineProperty(exports, "useOverlaidPosition", {
-  enumerable: true,
-  get: function () {
-    return _useOverlaidPosition.default;
-  }
-});
-Object.defineProperty(exports, "useTypographyTheme", {
-  enumerable: true,
-  get: function () {
-    return _useTypographyTheme.default;
-  }
-});
-Object.defineProperty(exports, "warn", {
-  enumerable: true,
-  get: function () {
-    return _logger.warn;
-  }
-});
-var _componentsBase = require("@telus-uds/components-base");
-var _logger = require("./logger");
-var _transforms = require("./transforms");
-var _useTypographyTheme = _interopRequireDefault(require("./useTypographyTheme"));
-var _media = _interopRequireDefault(require("./media"));
-var _ssr = _interopRequireDefault(require("./ssr"));
-var _isElementFocusable = _interopRequireDefault(require("./isElementFocusable"));
-var _renderStructuredContent = _interopRequireDefault(require("./renderStructuredContent"));
-var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import { htmlAttrs } from '@telus-uds/components-base';
+import { warn, deprecate } from './logger';
+import { transformGradient } from './transforms';
+import useTypographyTheme from './useTypographyTheme';
+import media from './media';
+import ssrStyles from './ssr';
+import isElementFocusable from './isElementFocusable';
+import renderStructuredContent from './renderStructuredContent';
+import useOverlaidPosition from './useOverlaidPosition';
+export { deprecate, htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition };

package/lib/utils/isElementFocusable.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /**
  * Returns focusable elements inside of the Footnote
  */
@@ -11,5 +5,4 @@ const isElementFocusable = element => {
   const focusableElements = `a[href], button, textarea, input, select, form, label, audio, video, source, track, canvas, rect, polygon, iframe[data-src], [tabindex]:not([tabindex="-1"]), [contenteditable]`;
   return element.matches(focusableElements) && !element.hasAttribute('disabled') && !element.matches('[tabindex="-1"]');
 };
-var _default = isElementFocusable;
-exports.default = _default;
+export default isElementFocusable;

package/lib/utils/logger.js

@@ -1,25 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.warn = exports.deprecate = exports.default = void 0;
-const deprecate = (componentName, message) => {
+export const deprecate = (componentName, message) => {
   if (process.env.NODE_ENV === 'production') {
     return;
   }
-  console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`); // eslint-disable-line no-console
+  console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`);
 };
-exports.deprecate = deprecate;
-const warn = (componentName, message) => {
+export const warn = (componentName, message) => {
   if (process.env.NODE_ENV === 'production') {
     return;
   }
-  console.warn(`[Allium] ${componentName}: ${message}`); // eslint-disable-line no-console
+  console.warn(`[Allium] ${componentName}: ${message}`);
 };
-exports.warn = warn;
-var _default = {
+export default {
   deprecate,
   warn
-};
-exports.default = _default;
+};

package/lib/utils/media.js

@@ -1,15 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = media;
-var _systemConstants = require("@telus-uds/system-constants");
-function media() {
+import { viewports } from '@telus-uds/system-constants';
+export default function media() {
   return {
     query: {},
     from(breakpoint) {
-      if (breakpoint !== _systemConstants.viewports.xs) {
+      if (breakpoint !== viewports.xs) {
         this.query.minWidth = breakpoint;
       }
       return this;
@@ -28,8 +22,8 @@ function media() {
         maxWidth,
         and
       } = this.query;
-      const min = minWidth ? `(min-width: ${_systemConstants.viewports.map.get(minWidth)}px)` : undefined;
-      const max = maxWidth ? `(max-width: ${_systemConstants.viewports.map.get(maxWidth) - 1}px)` : undefined;
+      const min = minWidth ? `(min-width: ${viewports.map.get(minWidth)}px)` : undefined;
+      const max = maxWidth ? `(max-width: ${viewports.map.get(maxWidth) - 1}px)` : undefined;
       if (typeof min !== 'undefined' || typeof max !== 'undefined' || typeof and !== 'undefined') {
         const mediaQuery = `@media ${[min, max, and].filter(a => a).join(' and ')}`;
         this.query = {};

package/lib/utils/renderStructuredContent.js

@@ -1,18 +1,12 @@
-"use strict";
+import React, { createElement as _createElement } from 'react';
+import { Link } from '@telus-uds/components-base';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _componentsBase = require("@telus-uds/components-base");
-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; }
 /**
  * Takes a string content and marks up all the links in it by wrapping them
  * in `Link` component.
- */const generateLinks = content => {
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const generateLinks = content => {
   const linkRegex = /<\s*a([^>]*)>(.*?)<\s*\/\s*a>/g;
   const attributeRegex = /(\w+)\s*=\s*((["'])(.*?)\3|(?=\s|\/>))/g;
   const parts = content.split(linkRegex);
@@ -37,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     // Remove anchor attributes from parts
     parts[i - 1] = undefined;
     // Replace anchor text with Link in parts
-    parts[i] = /*#__PURE__*/(0, _react.createElement)(_componentsBase.Link, {
+    parts[i] = /*#__PURE__*/_createElement(Link, {
       ...o,
       key: i
     }, parts[i]);
@@ -55,7 +49,7 @@ const generateBreaks = parts => {
     if (typeof partsWithBreaks[i] === 'string' && partsWithBreaks[i].search(breakRegex) !== -1) {
       const toSplit = partsWithBreaks[i].split(breakRegex);
       for (let x = 1; x < toSplit.length; x += 2) {
-        toSplit.splice(x, 0, /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}, `break-${i}-${x}`));
+        toSplit.splice(x, 0, /*#__PURE__*/_jsx("br", {}, `break-${i}-${x}`));
       }
       partsWithBreaks[i] = toSplit;
     }
@@ -68,5 +62,4 @@ const renderStructuredContent = content => {
   }
   return generateBreaks(generateLinks(content));
 };
-var _default = renderStructuredContent;
-exports.default = _default;
+export default renderStructuredContent;

package/lib/utils/ssr.js

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = require("styled-components");
-var _componentsBase = require("@telus-uds/components-base");
+import { ServerStyleSheet } from 'styled-components';
+import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base';
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -29,16 +23,15 @@ const ssrStyles = function () {
     styleGetters = [],
     collectStyles = renderedApp => renderedApp
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const sheet = new _styledComponents.ServerStyleSheet();
+  const sheet = new ServerStyleSheet();
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement();
     sheet.seal();
     return styles;
   };
-  return (0, _componentsBase.ssrStyles)(appName, {
+  return baseSsrStyles(appName, {
     styleGetters: [getStyledComponentsStyles, ...styleGetters],
     collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
   });
 };
-var _default = ssrStyles;
-exports.default = _default;
+export default ssrStyles;

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

@@ -1,21 +1,13 @@
-"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)));
+    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.`);
   }
 }
-async function getTheme(componentName) {
+export default async function getTheme(componentName) {
   if (cachedTheme[componentName]) {
     return cachedTheme[componentName];
   }

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

@@ -1,14 +1,7 @@
-"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 }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
 const withClientTheme = Component => {
   const UdsStyledComponent = _ref => {
     let {
@@ -16,17 +9,16 @@ const withClientTheme = Component => {
       variant,
       ...props
     } = _ref;
-    const theme = (0, _componentsBase.useThemeTokens)(Component.displayName, tokenOverrides, variant);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+    const theme = useThemeTokens(Component.displayName, tokenOverrides, variant);
+    return /*#__PURE__*/_jsx(Component, {
       theme: theme,
       ...props
     });
   };
   UdsStyledComponent.propTypes = {
-    tokens: (0, _componentsBase.getTokensPropType)(Component.displayName),
-    variant: _propTypes.default.string
+    tokens: getTokensPropType(Component.displayName),
+    variant: PropTypes.string
   };
   return UdsStyledComponent;
 };
-var _default = withClientTheme;
-exports.default = _default;
+export default withClientTheme;

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

@@ -1,15 +1,8 @@
-"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 }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getThemeTokens, getTokensPropType } 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 {
@@ -17,18 +10,17 @@ const withServerTheme = (Component, componentName) => {
       variant,
       ...props
     } = _ref;
-    const componentTheme = await (0, _getThemeFromServer.default)(componentName);
-    const themeTokens = (0, _server.getThemeTokens)(componentTheme, tokenOverrides, variant);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+    const componentTheme = await getTheme(componentName);
+    const themeTokens = getThemeTokens(componentTheme, tokenOverrides, variant);
+    return /*#__PURE__*/_jsx(Component, {
       theme: themeTokens,
       ...props
     });
   };
   UdsStyledComponent.propTypes = {
-    tokens: (0, _server.getTokensPropType)(componentName),
-    variant: _propTypes.default.string
+    tokens: getTokensPropType(componentName),
+    variant: PropTypes.string
   };
   return UdsStyledComponent;
 };
-var _default = withServerTheme;
-exports.default = _default;
+export default withServerTheme;

package/lib/utils/transforms.js

@@ -1,12 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.transformGradient = exports.default = void 0;
-const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
-exports.transformGradient = transformGradient;
-var _default = {
+export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
+export default {
   transformGradient
-};
-exports.default = _default;
+};