@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/TextInput/TextInputBase.js

@@ -1,24 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _TextInput = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TextInput"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ThemeProvider = require("../ThemeProvider");
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import NativeTextInput from "react-native-web/dist/exports/TextInput";
+import View from "react-native-web/dist/exports/View";
+import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
+import StackView from '../StackView';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useCopy, useInputValue, useSpacingScale, variantProp, viewProps } from '../utils';
+import dictionary from './dictionary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
 const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let {
     backgroundColor,
@@ -47,7 +40,7 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
-  const textStyles = (0, _ThemeProvider.applyTextStyles)({
+  const textStyles = applyTextStyles({
     fontName: isPassword ? undefined : fontName,
     // In this case, we don't want to apply the fontName to the input if it's a password because Monotype don't have support for the masked characters in mobile.
     fontSize,
@@ -63,14 +56,13 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   }
   const minHeight = linesToHeight(minLines);
   const maxHeight = linesToHeight(maxLines);
-  const webStyles = _Platform.default.select({
+  const webStyles = Platform.select({
     web: {
       outline: 'none',
       cursor: inactive ? 'not-allowed' : undefined,
       resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
     }
   });
-
   const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
   const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
   const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
@@ -102,7 +94,7 @@ const selectOuterBorderStyles = _ref2 => {
   } = _ref2;
   return {
     background: outerBackgroundColor,
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...applyOuterBorder({
       outerBorderColor,
       outerBorderWidth,
       borderRadius
@@ -180,7 +172,7 @@ const getIcon = function () {
     testID: 'mastercard'
   };
   if (visaRange) selectedIcon = objVisaIcon;else if (amexRange) selectedIcon = objAmexIcon;else if (masterCardRange) selectedIcon = objMasterCardIcon;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+  return /*#__PURE__*/_jsx(Icon, {
     icon: selectedIcon.icon,
     variant: {
       size: 'large'
@@ -188,7 +180,7 @@ const getIcon = function () {
     testID: selectedIcon.testID
   });
 };
-const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -211,8 +203,8 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     onKeyPress,
     ...rest
   } = _ref7;
-  const [isFocused, setIsFocused] = _react.default.useState(false);
-  const [showPassword, setShowPassword] = _react.default.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [showPassword, setShowPassword] = React.useState(false);
   const handleFocus = event => {
     setIsFocused(true);
     if (typeof onFocus === 'function') onFocus(event);
@@ -221,7 +213,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     setIsFocused(false);
     if (typeof onBlur === 'function') onBlur(event);
   };
-  const [isHovered, setIsHovered] = _react.default.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
   const handleMouseOver = event => {
     setIsHovered(true);
     if (typeof onMouseOver === 'function') onMouseOver(event);
@@ -230,7 +222,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     setIsHovered(false);
     if (typeof onMouseOut === 'function') onMouseOut(event);
   };
-  const defaultRef = _react.default.useRef();
+  const defaultRef = React.useRef();
   const inputRef = ref ?? defaultRef;
   const {
     currentValue,
@@ -238,7 +230,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     setValue,
     isControlled,
     isDirty
-  } = (0, _utils.useInputValue)({
+  } = useInputValue({
     value,
     initialValue,
     inputRef,
@@ -252,8 +244,8 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   const isNumeric = numeric || type === 'card' || type === 'number';
   const isPassword = password || type === 'password';
   const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-  _react.default.useEffect(() => {
-    if (_Platform.default.OS === 'web' && pattern && element) {
+  React.useEffect(() => {
+    if (Platform.OS === 'web' && pattern && element) {
       // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
       // which a `pattern` user must provide anyway to call .checkValidity() on the element.
       element.pattern = pattern;
@@ -277,12 +269,12 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     hover: isHovered,
     inactive
   };
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
+  const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
   const handleClear = event => {
     var _inputRef$current;
-    onClear === null || onClear === void 0 ? void 0 : onClear(event);
+    onClear === null || onClear === void 0 || onClear(event);
     resetValue(event);
-    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
   };
   const handleShowOrHide = () => {
     if (!variant.inactive) setShowPassword(!showPassword);
@@ -298,14 +290,14 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     visaIcon,
     masterCardIcon
   } = themeTokens;
-  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const buttonsGapSize = useSpacingScale(buttonsGap);
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const textInputButtons = buttons;
   if (onClear && isDirty) {
-    textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    textInputButtons === null || textInputButtons === void 0 || textInputButtons.unshift(/*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
       icon: ClearButtonIcon,
       onPress: handleClear,
@@ -315,7 +307,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     }, "clear"));
   }
   if (isPassword) {
-    textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    textInputButtons === null || textInputButtons === void 0 || textInputButtons.unshift(/*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: !showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
       onPress: handleShowOrHide,
@@ -346,14 +338,14 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   };
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = useTheme();
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
   }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
-    children: [type === 'card' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    children: [type === 'card' && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
       style: [staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)],
       children: getIcon(currentValue, {
@@ -362,26 +354,26 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
         visaIcon,
         masterCardIcon
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+    }), /*#__PURE__*/_jsx(NativeTextInput, {
       ref: inputRef,
       keyboardType: isNumeric ? 'numeric' : 'default',
-      inputMode: isNumeric && 'numeric',
+      inputMode: isNumeric ? 'numeric' : undefined,
       style: nativeInputStyle,
       secureTextEntry: isPassword && !showPassword,
       ...inputProps
-    }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), IconComponent && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
       style: [staticStyles.rightIconContainer, selectIconContainerStyles({
         ...themeTokens,
         buttonsGapSize
       }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+      children: /*#__PURE__*/_jsx(IconComponent, {
         ...selectIconTokens(themeTokens)
       })
-    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/_jsx(View, {
       style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      children: /*#__PURE__*/_jsx(StackView, {
         direction: "row",
         space: buttonsGap,
         children: textInputButtons
@@ -392,34 +384,33 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
 TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = {
   ...selectedSystemPropTypes,
-  buttons: _propTypes.default.arrayOf(_propTypes.default.node),
+  buttons: PropTypes.arrayOf(PropTypes.node),
   /**
    * Select English or French copy for the accessible labels.
    * You may also pass in a custom dictionary object.
    */
-  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
-    clearButtonAccessibilityLabel: _propTypes.default.string
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
+    clearButtonAccessibilityLabel: PropTypes.string
   })]),
-  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['password', 'card', 'number'])]),
-  height: _propTypes.default.number,
-  inactive: _propTypes.default.bool,
-  initialValue: _propTypes.default.string,
-  onBlur: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  onChangeText: _propTypes.default.func,
-  onClear: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  onMouseOut: _propTypes.default.func,
-  onMouseOver: _propTypes.default.func,
-  onKeyPress: _propTypes.default.func,
-  readOnly: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('TextInput', 'TextArea'),
-  value: _propTypes.default.string,
-  variant: _utils.variantProp.propType
+  type: PropTypes.oneOfType([PropTypes.oneOf(['password', 'card', 'number'])]),
+  height: PropTypes.number,
+  inactive: PropTypes.bool,
+  initialValue: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onChangeText: PropTypes.func,
+  onClear: PropTypes.func,
+  onFocus: PropTypes.func,
+  onMouseOut: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  readOnly: PropTypes.bool,
+  tokens: getTokensPropType('TextInput', 'TextArea'),
+  value: PropTypes.string,
+  variant: variantProp.propType
 };
-var _default = TextInputBase;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default TextInputBase;
+const staticStyles = StyleSheet.create({
   buttonsContainer: {
     position: 'absolute',
     flexDirection: 'row',

package/lib/TextInput/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     clearButtonAccessibilityLabel: 'Clear',
     showPasswordAccessibilityLabel: 'Show Password',
@@ -15,5 +9,4 @@ var _default = {
     showPasswordAccessibilityLabel: 'montrer le mot de passe',
     hidePasswordAccessibilityLabel: 'masquer le mot de passe'
   }
-};
-exports.default = _default;
+};

package/lib/TextInput/index.js

@@ -1,20 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TextArea", {
-  enumerable: true,
-  get: function () {
-    return _TextArea.default;
-  }
-});
-Object.defineProperty(exports, "TextInput", {
-  enumerable: true,
-  get: function () {
-    return _TextInput.default;
-  }
-});
-var _TextInput = _interopRequireDefault(require("./TextInput"));
-var _TextArea = _interopRequireDefault(require("./TextArea"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import TextInput from './TextInput';
+import TextArea from './TextArea';
+export { TextInput, TextArea };

package/lib/TextInput/propTypes.js

@@ -1,11 +1,5 @@
-"use strict";
+import PropTypes from 'prop-types';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
 // for generic React Native props and HTML input attrs that are passed through.
 const textInputPropTypes = {
@@ -13,29 +7,28 @@ const textInputPropTypes = {
    * If the input's state is to be controlled by a parent component, use this prop
    * together with the `onChange` to pass down and update the lifted state.
    */
-  value: _propTypes.default.string,
+  value: PropTypes.string,
   /**
    * Use this to set the type of the input. Defaults to `text`.
    */
-  type: _propTypes.default.string,
+  type: PropTypes.string,
   /**
    * Use this to set the initial value of an uncontrolled input.
    * Updating `initialValue` will **not** update the actual value.
    */
-  initialValue: _propTypes.default.string,
+  initialValue: PropTypes.string,
   /**
    * Disables all user interactions with the input.
    */
-  inactive: _propTypes.default.bool,
+  inactive: PropTypes.bool,
   /**
    * Makes it impossible to change the input's value.
    */
-  readOnly: _propTypes.default.bool,
+  readOnly: PropTypes.bool,
   /**
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: _propTypes.default.func
+  onChange: PropTypes.func
 };
-var _default = textInputPropTypes;
-exports.default = _default;
+export default textInputPropTypes;

package/lib/ThemeProvider/ThemeProvider.js

@@ -1,24 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.uninitialisedError = exports.default = exports.ThemeSetterContext = exports.ThemeContext = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("./utils");
-var _responsiveProps = _interopRequireDefault(require("../utils/props/responsiveProps"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
-exports.uninitialisedError = uninitialisedError;
-const ThemeContext = /*#__PURE__*/_react.default.createContext(uninitialisedError);
-exports.ThemeContext = ThemeContext;
-const ThemeSetterContext = /*#__PURE__*/_react.default.createContext(uninitialisedError);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { validateThemeTokensVersion } from './utils';
+import responsiveProps from '../utils/props/responsiveProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
+export const ThemeContext = /*#__PURE__*/React.createContext(uninitialisedError);
+export const ThemeSetterContext = /*#__PURE__*/React.createContext(uninitialisedError);
 
 // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
 // This should change in future major releases to become "opt-in" legacy support.
-exports.ThemeSetterContext = ThemeSetterContext;
 const defaultThemeOptions = {
   // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
   forceAbsoluteFontSizing: true,
@@ -34,8 +24,8 @@ const ThemeProvider = _ref => {
     defaultTheme,
     themeOptions = {}
   } = _ref;
-  const [theme, setTheme] = _react.default.useState(defaultTheme);
-  _react.default.useEffect(() => {
+  const [theme, setTheme] = React.useState(defaultTheme);
+  React.useEffect(() => {
     if (theme.metadata.name !== defaultTheme.metadata.name) {
       setTheme(defaultTheme);
     }
@@ -48,10 +38,10 @@ const ThemeProvider = _ref => {
   // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
   // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
-  (0, _utils.validateThemeTokensVersion)(theme);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
+  validateThemeTokensVersion(theme);
+  return /*#__PURE__*/_jsx(ThemeSetterContext.Provider, {
     value: setTheme,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
+    children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
       value: {
         ...theme,
         themeOptions: appliedThemeOptions
@@ -61,11 +51,11 @@ const ThemeProvider = _ref => {
   });
 };
 ThemeProvider.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  defaultTheme: _propTypes.default.shape({
-    metadata: _propTypes.default.shape({
-      themeTokensVersion: _propTypes.default.string.isRequired,
-      name: _propTypes.default.string.isRequired
+  children: PropTypes.node.isRequired,
+  defaultTheme: PropTypes.shape({
+    metadata: PropTypes.shape({
+      themeTokensVersion: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
     }).isRequired
   }).isRequired,
   /**
@@ -83,13 +73,12 @@ ThemeProvider.propTypes = {
    *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
    * - `enableMediaQueryStyleSheet`: enables the use of Media Query StyleSheet.
    */
-  themeOptions: _propTypes.default.shape({
-    forceAbsoluteFontSizing: _propTypes.default.bool,
-    forceZIndex: _propTypes.default.bool,
-    enableHelmetSSR: _propTypes.default.bool,
-    contentMaxWidth: _responsiveProps.default.getTypeOptionallyByViewport(_propTypes.default.number),
-    enableMediaQueryStyleSheet: _propTypes.default.bool
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool,
+    forceZIndex: PropTypes.bool,
+    enableHelmetSSR: PropTypes.bool,
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+    enableMediaQueryStyleSheet: PropTypes.bool
   })
 };
-var _default = ThemeProvider;
-exports.default = _default;
+export default ThemeProvider;

package/lib/ThemeProvider/index.js

@@ -1,60 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  useTheme: true,
-  useSetTheme: true,
-  useResponsiveThemeTokens: true
-};
-exports.default = void 0;
-Object.defineProperty(exports, "useResponsiveThemeTokens", {
-  enumerable: true,
-  get: function () {
-    return _useResponsiveThemeTokens.default;
-  }
-});
-Object.defineProperty(exports, "useSetTheme", {
-  enumerable: true,
-  get: function () {
-    return _useSetTheme.default;
-  }
-});
-Object.defineProperty(exports, "useTheme", {
-  enumerable: true,
-  get: function () {
-    return _useTheme.default;
-  }
-});
-var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-var _useSetTheme = _interopRequireDefault(require("./useSetTheme"));
-var _useResponsiveThemeTokens = _interopRequireDefault(require("./useResponsiveThemeTokens"));
-var _useThemeTokens = require("./useThemeTokens");
-Object.keys(_useThemeTokens).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useThemeTokens[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useThemeTokens[key];
-    }
-  });
-});
-var _utils = require("./utils");
-Object.keys(_utils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _utils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _utils[key];
-    }
-  });
-});
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _ThemeProvider.default;
-exports.default = _default;
+import ThemeProvider from './ThemeProvider';
+export { default as useTheme } from './useTheme';
+export { default as useSetTheme } from './useSetTheme';
+export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens';
+export * from './useThemeTokens';
+export * from './utils';
+export default ThemeProvider;

package/lib/ThemeProvider/useResponsiveThemeTokens.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _systemConstants = require("@telus-uds/system-constants");
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-var _utils = require("./utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import { viewports } from '@telus-uds/system-constants';
+import useTheme from './useTheme';
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils';
 const getResponsiveThemeTokens = function (_ref, tokensProp) {
   let {
     rules = [],
@@ -15,8 +8,8 @@ const getResponsiveThemeTokens = function (_ref, tokensProp) {
   } = _ref;
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let states = arguments.length > 3 ? arguments[3] : undefined;
-  const appearances = (0, _utils.mergeAppearances)(variants, states);
-  const tokensByViewport = Object.fromEntries(_systemConstants.viewports.keys.map(viewport => [viewport, {
+  const appearances = mergeAppearances(variants, states);
+  const tokensByViewport = Object.fromEntries(viewports.keys.map(viewport => [viewport, {
     ...defaultThemeTokens
   }]));
 
@@ -24,7 +17,7 @@ const getResponsiveThemeTokens = function (_ref, tokensProp) {
   rules.forEach(rule => {
     if (doesRuleApply(rule, appearances)) {
       // If the rule does not have a viewport specified, we collect it in all viewports
-      let targetViewports = rule.if.viewport || _systemConstants.viewports.keys;
+      let targetViewports = rule.if.viewport || viewports.keys;
       if (!Array.isArray(targetViewports)) {
         targetViewports = [targetViewports];
       }
@@ -37,7 +30,7 @@ const getResponsiveThemeTokens = function (_ref, tokensProp) {
     }
   });
   Object.keys(tokensByViewport).forEach(viewport => {
-    tokensByViewport[viewport] = (0, _utils.resolveThemeTokens)(tokensByViewport[viewport], appearances, tokensProp);
+    tokensByViewport[viewport] = resolveThemeTokens(tokensByViewport[viewport], appearances, tokensProp);
   });
   return tokensByViewport;
 };
@@ -80,10 +73,9 @@ const useResponsiveThemeTokens = function (componentName) {
   let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  const theme = (0, _useTheme.default)();
-  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const theme = useTheme();
+  const componentTheme = getComponentTheme(theme, componentName);
   const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states);
   return themeTokens;
 };
-var _default = useResponsiveThemeTokens;
-exports.default = _default;
+export default useResponsiveThemeTokens;

package/lib/ThemeProvider/useSetTheme.js

@@ -1,21 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _ThemeProvider = require("./ThemeProvider");
+import { useCallback, useContext } from 'react';
+import { ThemeSetterContext } from './ThemeProvider';
 const useSetTheme = () => {
   // Replace current theme with provided object
-  const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext);
+  const setTheme = useContext(ThemeSetterContext);
   // Fail fast if dev uses useSetTheme outside of ThemeProvider
   if (setTheme instanceof Error) {
     throw setTheme;
   }
 
   // Merge provided object into current theme
-  const editTheme = (0, _react.useCallback)(newTheme => setTheme(function () {
+  const editTheme = useCallback(newTheme => setTheme(function () {
     let oldTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     return {
       ...oldTheme,
@@ -27,5 +21,4 @@ const useSetTheme = () => {
     editTheme
   };
 };
-var _default = useSetTheme;
-exports.default = _default;
+export default useSetTheme;