@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

package/lib/TextInput/TextArea.js

@@ -1,11 +1,34 @@
-import React, { useState } from 'react';
-import { Platform } from 'react-native';
-import { getTokensPropType, variantProp } from '../utils';
-import InputSupports from '../InputSupports';
-import TextInputBase from './TextInputBase';
-import { useThemeTokens } from '../ThemeProvider';
-import inputSupportProps from '../InputSupports/propTypes';
-import textInputPropTypes from './propTypes';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _utils = require("../utils");
+
+var _InputSupports = _interopRequireDefault(require("../InputSupports"));
+
+var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _propTypes = _interopRequireDefault(require("../InputSupports/propTypes"));
+
+var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * Use to collect long-form information such as product feedback or support queries.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -30,14 +53,13 @@ import textInputPropTypes from './propTypes';
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-
-function TextArea({
+const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
   ...remainingProps
-}) {
-  const themeTokens = useThemeTokens('TextArea', tokens, variant);
-  const [inputHeight, setInputHeight] = useState(); // adjust the text area's height as new lines are added to the content
+}, ref) => {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
+  const [inputHeight, setInputHeight] = (0, _react.useState)(); // adjust the text area's height as new lines are added to the content
 
   const onHeightChange = ({
     nativeEvent: {
@@ -47,7 +69,7 @@ function TextArea({
     }
   }) => {
     // on native this is happens out of the box
-    if (Platform.OS === 'web') {
+    if (_Platform.default.OS === 'web') {
       setInputHeight(height);
     }
   };
@@ -55,7 +77,8 @@ function TextArea({
   const {
     props: supportsProps,
     rest
-  } = inputSupportProps.select(remainingProps);
+  } = _propTypes.default.select(remainingProps);
+
   const inputProps = { ...rest,
     variant: { ...variant,
       validation: supportsProps.validation
@@ -65,18 +88,24 @@ function TextArea({
     height: inputHeight,
     tokens: themeTokens
   };
-  return /*#__PURE__*/React.createElement(InputSupports, supportsProps, ({
-    a11yProps,
-    inputId
-  }) => /*#__PURE__*/React.createElement(TextInputBase, Object.assign({}, inputProps, a11yProps, {
-    nativeID: inputId
-  })));
-}
-
-TextArea.propTypes = { ...inputSupportProps.types,
-  ...textInputPropTypes,
-  tokens: getTokensPropType('TextArea', 'TextInput'),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+    children: ({
+      a11yProps,
+      inputId
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      ref: ref,
+      ...inputProps,
+      ...a11yProps,
+      nativeID: inputId
+    })
+  });
+});
+TextArea.displayName = 'TextArea';
+TextArea.propTypes = { ..._propTypes.default.types,
+  ..._propTypes2.default,
+  tokens: (0, _utils.getTokensPropType)('TextArea', 'TextInput'),
   // TODO: support both TextArea and TextInput tokens
-  variant: variantProp.propType
+  variant: _utils.variantProp.propType
 };
-export default TextArea;
+var _default = TextArea;
+exports.default = _default;

package/lib/TextInput/TextInput.js

@@ -1,9 +1,30 @@
-import React from 'react';
-import { getTokensPropType, variantProp } from '../utils';
-import InputSupports from '../InputSupports';
-import TextInputBase from './TextInputBase';
-import inputSupportProps from '../InputSupports/propTypes';
-import textInputPropTypes from './propTypes';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("../utils");
+
+var _InputSupports = _interopRequireDefault(require("../InputSupports"));
+
+var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
+
+var _propTypes = _interopRequireDefault(require("../InputSupports/propTypes"));
+
+var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -22,33 +43,39 @@ import textInputPropTypes from './propTypes';
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-
-function TextInput({
+const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
   ...remainingProps
-}) {
+}, ref) => {
   const {
     props: supportsProps,
     rest
-  } = inputSupportProps.select(remainingProps);
+  } = _propTypes.default.select(remainingProps);
+
   const inputProps = { ...rest,
     tokens,
     variant: { ...variant,
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/React.createElement(InputSupports, supportsProps, ({
-    a11yProps,
-    inputId
-  }) => /*#__PURE__*/React.createElement(TextInputBase, Object.assign({}, inputProps, a11yProps, {
-    nativeID: inputId
-  })));
-}
-
-TextInput.propTypes = { ...inputSupportProps.types,
-  ...textInputPropTypes,
-  tokens: getTokensPropType('TextInput'),
-  variant: variantProp.propType
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+    children: ({
+      a11yProps,
+      inputId
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      ref: ref,
+      ...inputProps,
+      ...a11yProps,
+      nativeID: inputId
+    })
+  });
+});
+TextInput.displayName = 'TextInput';
+TextInput.propTypes = { ..._propTypes.default.types,
+  ..._propTypes2.default,
+  tokens: (0, _utils.getTokensPropType)('TextInput'),
+  variant: _utils.variantProp.propType
 };
-export default TextInput;
+var _default = TextInput;
+exports.default = _default;

package/lib/TextInput/TextInputBase.js

@@ -1,8 +1,33 @@
-import React, { useState } from 'react';
-import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, useInputValue, variantProp } from '../utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _TextInput = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TextInput"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const selectInputStyles = ({
   backgroundColor,
@@ -29,7 +54,7 @@ const selectInputStyles = ({
   // 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 = applyTextStyles({
+  const textStyles = (0, _ThemeProvider.applyTextStyles)({
     fontName,
     fontSize,
     lineHeight,
@@ -45,7 +70,8 @@ const selectInputStyles = ({
 
   const minHeight = linesToHeight(minLines);
   const maxHeight = linesToHeight(maxLines);
-  const webStyles = Platform.select({
+
+  const webStyles = _Platform.default.select({
     web: {
       outline: 'none',
       cursor: inactive ? 'not-allowed' : undefined,
@@ -53,6 +79,7 @@ const selectInputStyles = ({
 
     }
   });
+
   const paddingWithIcon = iconSize + paddingRight;
   return {
     backgroundColor,
@@ -75,25 +102,17 @@ const selectInputStyles = ({
 
 const selectOuterBorderStyles = ({
   outerBackgroundColor,
-  outerBorderWidth = 0,
+  outerBorderWidth,
   outerBorderColor,
-  outerBorderRadius = 0
-}) => {
-  // Use negative margins so that the outer border doesn't expand the input's bounding box
-  const margin = -1 * outerBorderWidth; // Account for the border width since we style it as an outline
-
-  const borderRadius = outerBorderRadius + outerBorderWidth;
-  return {
-    background: outerBackgroundColor,
-    borderWidth: outerBorderWidth,
-    borderColor: outerBorderColor,
-    borderRadius,
-    marginTop: margin,
-    marginBottom: margin,
-    marginLeft: margin,
-    marginRight: margin
-  };
-};
+  borderRadius
+}) => ({
+  background: outerBackgroundColor,
+  ...(0, _ThemeProvider.applyOuterBorder)({
+    outerBorderColor,
+    outerBorderWidth,
+    borderRadius
+  })
+});
 
 const selectIconTokens = ({
   iconSize,
@@ -111,7 +130,7 @@ const selectIconContainerStyles = ({
   paddingBottom
 });
 
-function TextInputBase({
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   height,
   initialValue,
@@ -126,8 +145,8 @@ function TextInputBase({
   tokens,
   variant = {},
   ...remainingProps
-}) {
-  const [isFocused, setIsFocused] = useState(false);
+}, ref) => {
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   const handleFocus = event => {
     setIsFocused(true);
@@ -139,7 +158,7 @@ function TextInputBase({
     if (typeof onBlur === 'function') onBlur(event);
   };
 
-  const [isHovered, setIsHovered] = useState(false);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
 
   const handleMouseOver = event => {
     setIsHovered(true);
@@ -155,16 +174,19 @@ function TextInputBase({
     currentValue,
     setValue,
     isControlled
-  } = useInputValue({
+  } = (0, _utils.useInputValue)({
     value,
     initialValue,
     onChange,
     readOnly
   });
 
-  const handleChangeText = text => {
-    setValue(text);
-    if (typeof onChangeText === 'function') onChangeText(text);
+  const handleChangeText = event => {
+    var _event$nativeEvent, _event$target;
+
+    const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+    setValue(text, event);
+    if (typeof onChangeText === 'function') onChangeText(text, event);
   };
 
   const states = {
@@ -172,7 +194,7 @@ function TextInputBase({
     hover: isHovered,
     inactive
   };
-  const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
   const {
     icon: IconComponent
   } = themeTokens;
@@ -182,7 +204,7 @@ function TextInputBase({
     onBlur: handleBlur,
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
-    onChangeText: handleChangeText,
+    onChange: handleChangeText,
     defaultValue: initialValue,
     // currentValue is being updated even if the input is not controlled, passing it down to the
     // Input could lead to changing its state from uncontrolled to controlled
@@ -191,36 +213,41 @@ function TextInputBase({
   const nativeInputStyle = selectInputStyles({ ...themeTokens,
     height
   }, inactive);
-  return /*#__PURE__*/React.createElement(View, {
-    style: selectOuterBorderStyles(themeTokens)
-  }, /*#__PURE__*/React.createElement(NativeTextInput, Object.assign({
-    style: nativeInputStyle
-  }, inputProps)), IconComponent && /*#__PURE__*/React.createElement(View, {
-    pointerEvents: "none" // avoid hijacking input press events
-    ,
-    style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]
-  }, /*#__PURE__*/React.createElement(IconComponent, {
-    tokens: selectIconTokens(themeTokens)
-  })));
-}
-
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: selectOuterBorderStyles(themeTokens),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      ref: ref,
+      style: nativeInputStyle,
+      ...inputProps
+    }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      pointerEvents: "none" // avoid hijacking input press events
+      ,
+      style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
+      })
+    })]
+  });
+});
+TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = {
-  value: PropTypes.string,
-  height: PropTypes.number,
-  initialValue: PropTypes.string,
-  inactive: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  onChange: PropTypes.func,
-  onChangeText: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  tokens: getTokensPropType('TextInput', 'TextArea'),
-  variant: variantProp.propType
+  value: _propTypes.default.string,
+  height: _propTypes.default.number,
+  initialValue: _propTypes.default.string,
+  inactive: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onChangeText: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onMouseOver: _propTypes.default.func,
+  onMouseOut: _propTypes.default.func,
+  tokens: (0, _utils.getTokensPropType)('TextInput', 'TextArea'),
+  variant: _utils.variantProp.propType
 };
-export default TextInputBase;
-const staticStyles = StyleSheet.create({
+var _default = TextInputBase;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
   iconContainer: {
     position: 'absolute',
     right: 0,

package/lib/TextInput/index.js

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

package/lib/TextInput/propTypes.js

@@ -1,31 +1,42 @@
-import PropTypes from 'prop-types';
+"use strict";
+
+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 }; }
+
 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.string,
+  value: _propTypes.default.string,
 
   /**
    * Use this to set the initial value of an uncontrolled input.
    * Updating `initialValue` will **not** update the actual value.
    */
-  initialValue: PropTypes.string,
+  initialValue: _propTypes.default.string,
 
   /**
    * Disables all user interactions with the input.
    */
-  inactive: PropTypes.bool,
+  inactive: _propTypes.default.bool,
 
   /**
    * Makes it impossible to change the input's value.
    */
-  readOnly: PropTypes.bool,
+  readOnly: _propTypes.default.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.func
+  onChange: _propTypes.default.func
 };
-export default textInputPropTypes;
+var _default = textInputPropTypes;
+exports.default = _default;

package/lib/ThemeProvider/ThemeProvider.js

@@ -1,28 +1,56 @@
-import React, { createContext, useState } from 'react';
-import PropTypes from 'prop-types';
-export const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
-export const ThemeContext = /*#__PURE__*/createContext(uninitialisedError);
-export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError); // TODO: develop this as theme metadata is added
-// https://github.com/telus/universal-design-system/issues/92
+"use strict";
 
-export const themeType = PropTypes.object;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ThemeSetterContext = exports.ThemeContext = exports.uninitialisedError = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("./utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
+exports.uninitialisedError = uninitialisedError;
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
+exports.ThemeContext = ThemeContext;
+const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
+exports.ThemeSetterContext = ThemeSetterContext;
 
 const ThemeProvider = ({
   children,
   defaultTheme
 }) => {
-  const [theme, setTheme] = useState(defaultTheme);
-  return /*#__PURE__*/React.createElement(ThemeSetterContext.Provider, {
-    value: setTheme
-  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-    value: theme
-  }, children));
+  const [theme, setTheme] = (0, _react.useState)(defaultTheme); // 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, {
+    value: setTheme,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
+      value: theme,
+      children: children
+    })
+  });
 };
 
 ThemeProvider.propTypes = {
-  // TODO: implement a custom propType that validates schema version
-  // https://github.com/telus/universal-design-system/issues/92
-  children: PropTypes.node.isRequired,
-  defaultTheme: themeType.isRequired
+  children: _propTypes.default.node.isRequired,
+  defaultTheme: _propTypes.default.shape({
+    metadata: _propTypes.default.shape({
+      themeTokensVersion: _propTypes.default.string.isRequired
+    }).isRequired
+  }).isRequired
 };
-export default ThemeProvider;
+var _default = ThemeProvider;
+exports.default = _default;