@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/TooltipButton/TooltipButton.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
-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.viewProps]);
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { useThemeTokens, applyOuterBorder } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectInnerContainerStyles = _ref => {
   let {
     borderRadius,
@@ -45,26 +38,26 @@ const selectIconTokens = _ref2 => {
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-const TooltipButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const TooltipButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     pressableState,
     tokens,
     variant,
     ...rest
   } = _ref3;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
+  const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState);
   const {
     icon: IconComponent
   } = themeTokens;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: [(0, _ThemeProvider.applyOuterBorder)(themeTokens), themeTokens.outerBorderWidth && {
+  return /*#__PURE__*/_jsx(View, {
+    style: [applyOuterBorder(themeTokens), themeTokens.outerBorderWidth && {
       margin: -themeTokens.outerBorderWidth
     }, staticStyles.bubblePointerEvents],
     ...selectProps(rest),
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    children: /*#__PURE__*/_jsx(View, {
       style: selectInnerContainerStyles(themeTokens),
-      children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      children: IconComponent && /*#__PURE__*/_jsx(Icon, {
         icon: IconComponent,
         tokens: selectIconTokens(themeTokens)
       })
@@ -72,9 +65,9 @@ const TooltipButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   });
 });
 TooltipButton.displayName = 'TooltipButton';
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   bubblePointerEvents: {
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         pointerEvents: 'none'
       }
@@ -86,13 +79,12 @@ TooltipButton.propTypes = {
   /**
    * Used as appearances when resolving theme tokens.
    */
-  pressableState: _propTypes.default.shape({
-    pressed: _propTypes.default.bool,
-    hover: _propTypes.default.bool,
-    focus: _propTypes.default.bool
+  pressableState: PropTypes.shape({
+    pressed: PropTypes.bool,
+    hover: PropTypes.bool,
+    focus: PropTypes.bool
   }),
-  tokens: (0, _utils.getTokensPropType)('TooltipButton'),
-  variant: _utils.variantProp.propType
+  tokens: getTokensPropType('TooltipButton'),
+  variant: variantProp.propType
 };
-var _default = TooltipButton;
-exports.default = _default;
+export default TooltipButton;

package/lib/TooltipButton/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _TooltipButton = _interopRequireDefault(require("./TooltipButton"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _TooltipButton.default;
-exports.default = _default;
+import TooltipButton from './TooltipButton';
+export default TooltipButton;

package/lib/Typography/Typography.js

@@ -1,24 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../ThemeProvider/utils");
-var _utils2 = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
-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 Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider';
+import { applyTextStyles } from '../ThemeProvider/utils';
+import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag, StyleSheet, createMediaQueryStyles } from '../utils';
+import { useViewport } from '../ViewportProvider';
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
- */const [selectContainerProps, selectedContainerPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
-const [selectTextProps, selectedTextPropTypes] = (0, _utils2.selectSystemProps)([_utils2.textProps]);
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
 const selectTextStyles = (_ref, themeOptions) => {
   let {
     fontWeight,
@@ -32,7 +26,7 @@ const selectTextStyles = (_ref, themeOptions) => {
     textDecorationLine,
     gradient
   } = _ref;
-  return (0, _utils.applyTextStyles)({
+  return applyTextStyles({
     fontWeight,
     fontSize,
     color,
@@ -61,7 +55,7 @@ const selectMobileSubSupStyles = (_ref2, type) => {
 };
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -75,18 +69,18 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     strikeThrough = false,
     ...rest
   } = _ref3;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = useTheme();
   const {
     enableMediaQueryStyleSheet
   } = themeOptions;
-  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
   const themeTokens = useTokens('Typography', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
-  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? (0, _utils2.getMaxFontMultiplier)(themeTokens[viewport]) : (0, _utils2.getMaxFontMultiplier)(themeTokens);
+  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? getMaxFontMultiplier(themeTokens[viewport]) : getMaxFontMultiplier(themeTokens);
   const textDecorationLine = strikeThrough ? 'line-through' : 'none';
   const generateGradientString = gradientObj => {
     let gradientStr = '';
@@ -130,11 +124,11 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       }, themeOptions);
       return acc;
     }, {});
-    const mediaQueryStyles = (0, _utils2.createMediaQueryStyles)(transformedThemeTokens);
+    const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens);
     const {
       ids,
       styles
-    } = _utils2.StyleSheet.create({
+    } = StyleSheet.create({
       text: mediaQueryStyles
     });
     textStyles = styles.text;
@@ -152,7 +146,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   };
   const containerProps = {
     accessibilityRole,
-    ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectContainerProps(rest)
   };
   const resetTagStyling = child => {
@@ -160,17 +154,17 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     if (typeof child !== 'object' || !((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
       return child;
     }
-    const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
+    const childStyles = (child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
     const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
-    const isMobile = _Platform.default.OS === 'ios' || _Platform.default.OS === 'android';
+    const isMobile = Platform.OS === 'ios' || Platform.OS === 'android';
     const isSubSup = (child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup';
     const mobileStyles = isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child === null || child === void 0 ? void 0 : child.type) : {};
     const defaultStyles = !isMobile && isSubSup ? {
       fontSize: supFontSize,
       lineHeight: 0
     } : {};
-    const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(isMobile && isSubSup ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    const sanitizedChild = /*#__PURE__*/React.cloneElement(isMobile && isSubSup ? /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(Text, {
         style: [childStyles, mobileStyles],
         children: child.props.children
       })
@@ -192,16 +186,16 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     media: mediaIds,
     ...dataSet
   } : dataSet;
-  return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...containerProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    children: /*#__PURE__*/_jsx(Text, {
       ...resolvedTextProps,
       style: getStyleWithGradient(textStyles),
       dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+  }) : /*#__PURE__*/_jsx(Text, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
@@ -214,12 +208,12 @@ Typography.displayName = 'Typography';
 Typography.propTypes = {
   ...selectedContainerPropTypes,
   ...selectedTextPropTypes,
-  tokens: (0, _utils2.getTokensPropType)('Typography'),
-  variant: _utils2.variantProp.propType,
+  tokens: getTokensPropType('Typography'),
+  variant: variantProp.propType,
   /**
    * Renders the text with "text-decoration: 'line-through'" applied.
    */
-  strikeThrough: _propTypes.default.bool,
+  strikeThrough: PropTypes.bool,
   /**
    * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
    *
@@ -229,7 +223,7 @@ Typography.propTypes = {
    * In native apps, if this is `true` or any html heading tag string and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  heading: _propTypes.default.oneOf([..._utils2.headingTags, true]),
+  heading: PropTypes.oneOf([...headingTags, true]),
   /**
    * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
    *
@@ -238,24 +232,23 @@ Typography.propTypes = {
    * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  tag: _propTypes.default.oneOf(_utils2.textTags),
+  tag: PropTypes.oneOf(textTags),
   /**
    * If true, forces the element to behave as a View block even if nested in other text
    */
-  block: _propTypes.default.bool,
+  block: PropTypes.bool,
   /**
    * Works the same as css text-align, note that RN doesn't support "start" or "end" (see https://reactnative.dev/docs/text-style-props#textalign)
    * Justify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)
    */
-  align: _propTypes.default.oneOf(['auto', 'left', 'right', 'center', 'justify']),
+  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: _propTypes.default.node,
+  children: PropTypes.node,
   /**
    * Data attributes to be added to the element
    */
-  dataSet: _propTypes.default.object
+  dataSet: PropTypes.object
 };
-var _default = Typography;
-exports.default = _default;
+export default Typography;

package/lib/Typography/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Typography = _interopRequireDefault(require("./Typography"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Typography.default;
-exports.default = _default;
+import Typography from './Typography';
+export default Typography;

package/lib/Validator/Validator.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 _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../utils");
-var _TextInput = require("../TextInput");
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _InputSupports = _interopRequireDefault(require("../InputSupports"));
-var _ThemeProvider = require("../ThemeProvider");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.inputSupportsProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { inputSupportsProps, selectSystemProps } from '../utils';
+import { TextInput } from '../TextInput';
+import StackView from '../StackView';
+import InputSupports from '../InputSupports';
+import { useThemeTokens } from '../ThemeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([inputSupportsProps]);
 const selectCodeTextInputTokens = _ref => {
   let {
     outerBorderColor,
@@ -28,7 +21,7 @@ const selectCodeTextInputTokens = _ref => {
     icon: null
   };
 };
-const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value = '',
     inactive,
@@ -38,32 +31,32 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     variant = {},
     ...rest
   } = _ref2;
-  const defaultRef = _react.default.useRef();
+  const defaultRef = React.useRef();
   const codeRef = ref ?? defaultRef;
   const {
     supportsProps
   } = selectProps(rest);
   const strValidation = supportsProps.validation;
-  const [individualCodes, setIndividualCodes] = _react.default.useState({});
-  const [text, setText] = _react.default.useState(value);
+  const [individualCodes, setIndividualCodes] = React.useState({});
+  const [text, setText] = React.useState(value);
   const validatorsLength = 6;
   const prefix = 'code';
   const sufixValidation = 'Validation';
-  const [isHover, setIsHover] = _react.default.useState(false);
+  const [isHover, setIsHover] = React.useState(false);
   const handleMouseOver = () => {
     setIsHover(true);
   };
   const handleMouseOut = () => {
     setIsHover(false);
   };
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, {
+  const themeTokens = useThemeTokens('TextInput', tokens, variant, {
     hover: isHover
   });
-  const [codeReferences, singleCodes] = _react.default.useMemo(() => {
+  const [codeReferences, singleCodes] = React.useMemo(() => {
     const codes = [];
     const valueCodes = {};
     for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
-      codes[prefix + i] = /*#__PURE__*/_react.default.createRef();
+      codes[prefix + i] = /*#__PURE__*/React.createRef();
       valueCodes[prefix + i] = '';
       valueCodes[prefix + i + sufixValidation] = '';
     }
@@ -104,7 +97,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       changeDataMasking(codeElement);
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 0) {
+    if ((codeElement === null || codeElement === void 0 || (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 0) {
       codeReferences[prefix + nextIndex].current.focus();
       changeDataMasking(codeElement);
     }
@@ -129,8 +122,8 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         validation: strValidation || singleCodes[codeId + sufixValidation],
         tokens: selectCodeTextInputTokens(themeTokens),
         onFocus: () => {
-          var _codeReferences$codeI2, _codeReferences$codeI3;
-          return ((_codeReferences$codeI2 = codeReferences[codeId]) === null || _codeReferences$codeI2 === void 0 ? void 0 : (_codeReferences$codeI3 = _codeReferences$codeI2.current) === null || _codeReferences$codeI3 === void 0 ? void 0 : _codeReferences$codeI3.select()) ?? null;
+          var _codeReferences$codeI2;
+          return ((_codeReferences$codeI2 = codeReferences[codeId]) === null || _codeReferences$codeI2 === void 0 || (_codeReferences$codeI2 = _codeReferences$codeI2.current) === null || _codeReferences$codeI2 === void 0 ? void 0 : _codeReferences$codeI2.select()) ?? null;
         },
         onKeyPress: event => handleKeyPress(event, i, i - 1),
         onMouseOver: handleMouseOver,
@@ -138,22 +131,22 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         inactive
       };
       codeInputProps.validation || delete codeInputProps.validation;
-      components.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      components.push(/*#__PURE__*/_jsx(View, {
         style: staticStyles.codeInputWidth,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
+        children: /*#__PURE__*/_jsx(TextInput, {
           ...codeInputProps
         })
       }, codeId));
     }
     return components;
   };
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     /* eslint-disable no-unused-expressions */
     if (Number(value).toString() !== 'NaN') setText(value);
   }, [value]);
 
   /* eslint-disable react-hooks/exhaustive-deps */
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     for (let i = 0; i < validatorsLength; i += 1) {
       if (mask && text[i]) codeReferences[prefix + i].current.value = mask;else codeReferences[prefix + i].current.value = text[i] ?? '';
       handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
@@ -161,7 +154,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   }, [text]);
 
   /* eslint-disable react-hooks/exhaustive-deps */
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     const handlePasteCode = event => {
       setText('');
       const clipBoardText = event.clipboardData.getData('text');
@@ -173,7 +166,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       event.clipboardData.setData('text/plain', clipBoardText);
       event.preventDefault();
     };
-    if (_Platform.default.OS === 'web') {
+    if (Platform.OS === 'web') {
       for (let i = 0; i < validatorsLength; i += 1) {
         codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode);
         codeReferences[prefix + i].current.addEventListener('copy', handleCopy);
@@ -181,19 +174,19 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }
     }
     return () => {
-      if (_Platform.default.oldValue === 'web') {
+      if (Platform.oldValue === 'web') {
         for (let i = 0; i < validatorsLength; i += 1) {
-          var _codeReferences, _codeReferences$curre, _codeReferences2, _codeReferences2$curr, _codeReferences3, _codeReferences3$curr;
-          (_codeReferences = codeReferences[prefix + i]) === null || _codeReferences === void 0 ? void 0 : (_codeReferences$curre = _codeReferences.current) === null || _codeReferences$curre === void 0 ? void 0 : _codeReferences$curre.removeEventListener('paste', handlePasteCode);
-          (_codeReferences2 = codeReferences[prefix + i]) === null || _codeReferences2 === void 0 ? void 0 : (_codeReferences2$curr = _codeReferences2.current) === null || _codeReferences2$curr === void 0 ? void 0 : _codeReferences2$curr.removeEventListener('copy', handleCopy);
-          (_codeReferences3 = codeReferences[prefix + i]) === null || _codeReferences3 === void 0 ? void 0 : (_codeReferences3$curr = _codeReferences3.current) === null || _codeReferences3$curr === void 0 ? void 0 : _codeReferences3$curr.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+          var _codeReferences, _codeReferences2, _codeReferences3;
+          (_codeReferences = codeReferences[prefix + i]) === null || _codeReferences === void 0 || (_codeReferences = _codeReferences.current) === null || _codeReferences === void 0 || _codeReferences.removeEventListener('paste', handlePasteCode);
+          (_codeReferences2 = codeReferences[prefix + i]) === null || _codeReferences2 === void 0 || (_codeReferences2 = _codeReferences2.current) === null || _codeReferences2 === void 0 || _codeReferences2.removeEventListener('copy', handleCopy);
+          (_codeReferences3 = codeReferences[prefix + i]) === null || _codeReferences3 === void 0 || (_codeReferences3 = _codeReferences3.current) === null || _codeReferences3 === void 0 || _codeReferences3.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
         }
       }
     };
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+  return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    children: /*#__PURE__*/_jsx(StackView, {
       space: 2,
       direction: "row",
       ref: codeRef,
@@ -207,23 +200,22 @@ Validator.propTypes = {
   /**
    * The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize
    */
-  value: _propTypes.default.string,
+  value: PropTypes.string,
   /**
    * If true, the component is inactive and non editable.
    */
-  inactive: _propTypes.default.bool,
+  inactive: PropTypes.bool,
   /**
    * Show masked characters and obscure the actual input. For example: '*'
    */
-  mask: _propTypes.default.string,
+  mask: PropTypes.string,
   /**
    * 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 = Validator;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default Validator;
+const staticStyles = StyleSheet.create({
   codeInputWidth: {
     width: 43
   }

package/lib/Validator/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Validator = _interopRequireDefault(require("./Validator"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Validator.default;
-exports.default = _default;
+import Validator from './Validator';
+export default Validator;

package/lib/ViewportProvider/ViewportProvider.js

@@ -1,33 +1,27 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { ViewportContext } from './useViewport';
+import useViewportListener from './useViewportListener';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _systemConstants = require("@telus-uds/system-constants");
-var _useViewport = require("./useViewport");
-var _useViewportListener = _interopRequireDefault(require("./useViewportListener"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
- */const ViewportProvider = _ref => {
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ViewportProvider = _ref => {
   let {
     children
   } = _ref;
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
-  const [viewport, setViewport] = _react.default.useState(_systemConstants.viewports.keys[0]);
-  (0, _useViewportListener.default)(setViewport);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useViewport.ViewportContext.Provider, {
+  const [viewport, setViewport] = React.useState(viewports.keys[0]);
+  useViewportListener(setViewport);
+  return /*#__PURE__*/_jsx(ViewportContext.Provider, {
     value: viewport,
     children: children
   });
 };
 ViewportProvider.propTypes = {
-  children: _propTypes.default.node.isRequired
+  children: PropTypes.node.isRequired
 };
-var _default = ViewportProvider;
-exports.default = _default;
+export default ViewportProvider;

package/lib/ViewportProvider/index.js

@@ -1,23 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-exports.default = void 0;
-var _ViewportProvider = _interopRequireDefault(require("./ViewportProvider"));
-var _useViewport = require("./useViewport");
-Object.keys(_useViewport).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useViewport[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useViewport[key];
-    }
-  });
-});
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _ViewportProvider.default;
-exports.default = _default;
+import ViewportProvider from './ViewportProvider';
+export default ViewportProvider;
+export * from './useViewport';

package/lib/ViewportProvider/useViewport.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useViewport = exports.ViewportContext = void 0;
-var _react = require("react");
-const ViewportContext = /*#__PURE__*/(0, _react.createContext)({});
-exports.ViewportContext = ViewportContext;
-const useViewport = () => (0, _react.useContext)(ViewportContext);
-exports.useViewport = useViewport;
+import { createContext, useContext } from 'react';
+export const ViewportContext = /*#__PURE__*/createContext({});
+export const useViewport = () => useContext(ViewportContext);