@telus-uds/components-base 2.5.0 → 3.0.0

package/lib/cjs/TooltipButton/TooltipButton.js

@@ -0,0 +1,97 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const selectInnerContainerStyles = _ref => {
+  let {
+    borderRadius,
+    width,
+    backgroundColor
+  } = _ref;
+  return {
+    borderRadius,
+    width,
+    backgroundColor
+  };
+};
+const selectIconTokens = _ref2 => {
+  let {
+    iconSize,
+    iconColor,
+    iconScale = 1
+  } = _ref2;
+  return {
+    size: iconSize,
+    color: iconColor,
+    scale: iconScale
+  };
+};
+
+/**
+ * `TooltipButton` is a helper component used as a default control for the `Tooltip` component.
+ * 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) => {
+  let {
+    pressableState,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
+  const {
+    icon: IconComponent
+  } = themeTokens;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: [(0, _ThemeProvider.applyOuterBorder)(themeTokens), themeTokens.outerBorderWidth && {
+      margin: -themeTokens.outerBorderWidth
+    }, staticStyles.bubblePointerEvents],
+    ...selectProps(rest),
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectInnerContainerStyles(themeTokens),
+      children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: IconComponent,
+        tokens: selectIconTokens(themeTokens)
+      })
+    })
+  });
+});
+TooltipButton.displayName = 'TooltipButton';
+const staticStyles = _StyleSheet.default.create({
+  bubblePointerEvents: {
+    ..._Platform.default.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  }
+});
+TooltipButton.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Used as appearances when resolving theme tokens.
+   */
+  pressableState: _propTypes.default.shape({
+    pressed: _propTypes.default.bool,
+    hover: _propTypes.default.bool,
+    focus: _propTypes.default.bool
+  }),
+  tokens: (0, _utils.getTokensPropType)('TooltipButton'),
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = TooltipButton;

package/lib/cjs/TooltipButton/index.js

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

package/lib/cjs/Typography/Typography.js

@@ -0,0 +1,271 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @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]);
+const selectTextStyles = (_ref, themeOptions) => {
+  let {
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing,
+    textDecorationLine,
+    gradient
+  } = _ref;
+  return (0, _utils.applyTextStyles)({
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    themeOptions,
+    textAlign,
+    textTransform,
+    letterSpacing,
+    textDecorationLine,
+    gradient
+  });
+};
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const selectMobileSubSupStyles = (_ref2, type) => {
+  let {
+    fontSize
+  } = _ref2;
+  return {
+    fontSize: fontSize / HALF_FONT_SIZE,
+    lineHeight: fontSize,
+    position: 'relative',
+    top: type === 'sub' ? fontSize / QUARTER_FONT_SIZE : -fontSize / QUARTER_FONT_SIZE
+  };
+};
+
+// General-purpose flexible theme-neutral base component for text
+const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    children,
+    variant,
+    heading,
+    tag = typeof heading === 'string' ? heading : undefined,
+    accessibilityRole = heading === true ? 'header' : undefined,
+    block = false,
+    align = undefined,
+    tokens,
+    dataSet,
+    strikeThrough = false,
+    ...rest
+  } = _ref3;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Typography', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? (0, _utils2.getMaxFontMultiplier)(themeTokens[viewport]) : (0, _utils2.getMaxFontMultiplier)(themeTokens);
+  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const generateGradientString = gradientObj => {
+    let gradientStr = '';
+    const {
+      type,
+      angle,
+      stops: [stopOne, stopTwo],
+      specification
+    } = gradientObj;
+    if (type === 'radial') {
+      gradientStr = `radial-gradient(${specification}`;
+      gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${stopTwo.stop * 100}%`;
+    } else if (type === 'linear') {
+      gradientStr = `linear-gradient(${angle}deg`;
+      if (angle === 135) {
+        gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`;
+      } else {
+        gradientStr += `, ${stopOne.color}, ${stopTwo.color}`;
+      }
+    }
+    gradientStr += ')';
+    return gradientStr;
+  };
+  const getStyleWithGradient = styles => {
+    return styles.gradient ? {
+      ...styles,
+      color: 'transparent',
+      backgroundImage: generateGradientString(styles.gradient),
+      backgroundClip: 'text'
+    } : styles;
+  };
+  let textStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
+      acc[vp] = selectTextStyles({
+        textAlign: align,
+        textDecorationLine,
+        ...viewportTokens
+      }, themeOptions);
+      if (themeTokens[vp].gradient) {
+        const tokensWithGradient = {
+          ...acc[vp],
+          color: 'transparent',
+          backgroundImage: generateGradientString(themeTokens[vp].gradient),
+          backgroundClip: 'text'
+        };
+        return {
+          ...acc,
+          [vp]: tokensWithGradient
+        };
+      }
+      return acc;
+    }, {});
+    const mediaQueryStyles = (0, _utils2.createMediaQueryStyles)(transformedThemeTokens);
+    const {
+      ids,
+      styles
+    } = _utils2.StyleSheet.create({
+      text: mediaQueryStyles
+    });
+    textStyles = styles.text;
+    mediaIds = ids.text;
+  } else {
+    textStyles = selectTextStyles({
+      textAlign: align,
+      textDecorationLine,
+      ...themeTokens
+    }, themeOptions);
+  }
+  const resolvedTextProps = {
+    ...selectTextProps(rest),
+    maxFontSizeMultiplier
+  };
+  const containerProps = {
+    accessibilityRole,
+    ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...selectContainerProps(rest)
+  };
+  const resetTagStyling = child => {
+    if (typeof child !== 'object' || !(child?.type === 'sub' || child?.type === 'sup')) {
+      return child;
+    }
+    const childStyles = child?.props?.style || {};
+    const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
+    const isMobile = _Platform.default.OS === 'ios' || _Platform.default.OS === 'android';
+    const isSubSup = child?.type === 'sub' || child?.type === 'sup';
+    const mobileStyles = isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, 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, {
+        style: [childStyles, mobileStyles],
+        children: child.props.children
+      })
+    }) : child, {
+      style: {
+        ...childStyles,
+        ...defaultStyles
+      }
+    });
+    return sanitizedChild;
+  };
+  const sanitizeChildren = () => {
+    if (Array.isArray(children)) {
+      return children.map(resetTagStyling);
+    }
+    return resetTagStyling(children);
+  };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
+  return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...containerProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      ...resolvedTextProps,
+      style: getStyleWithGradient(textStyles),
+      dataSet: dataSetValue,
+      children: sanitizeChildren(children)
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    ref: ref,
+    ...containerProps,
+    ...resolvedTextProps,
+    style: getStyleWithGradient(textStyles),
+    dataSet: dataSetValue,
+    children: sanitizeChildren(children)
+  });
+});
+Typography.displayName = 'Typography';
+Typography.propTypes = {
+  ...selectedContainerPropTypes,
+  ...selectedTextPropTypes,
+  tokens: (0, _utils2.getTokensPropType)('Typography'),
+  variant: _utils2.variantProp.propType,
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: _propTypes.default.bool,
+  /**
+   * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
+   *
+   * Does not affect styling: <Typography heading="h2"> will render a <h2> that looks like plain text.
+   * Use both `heading` and `variant` props to render semantic headings that look like headings.
+   *
+   * 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]),
+  /**
+   * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
+   *
+   * `tag` and `heading` props set the same thing, so shouldn't be used together (`tag` overrides `heading`).
+   *
+   * 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),
+  /**
+   * If true, forces the element to behave as a View block even if nested in other text
+   */
+  block: _propTypes.default.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']),
+  /**
+   * Same children allowed as a React Native <Text> node
+   */
+  children: _propTypes.default.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: _propTypes.default.object
+};
+var _default = exports.default = Typography;

package/lib/cjs/Typography/index.js

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

package/lib/cjs/Validator/Validator.js

@@ -0,0 +1,228 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.inputSupportsProps]);
+const selectCodeTextInputTokens = _ref => {
+  let {
+    outerBorderColor,
+    outerBackgroundColor
+  } = _ref;
+  return {
+    outerBorderColor,
+    outerBackgroundColor,
+    icon: null
+  };
+};
+const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    value = '',
+    inactive,
+    mask = '',
+    onChange,
+    tokens = {},
+    variant = {},
+    ...rest
+  } = _ref2;
+  const defaultRef = _react.default.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 validatorsLength = 6;
+  const prefix = 'code';
+  const sufixValidation = 'Validation';
+  const [isHover, setIsHover] = _react.default.useState(false);
+  const handleMouseOver = () => {
+    setIsHover(true);
+  };
+  const handleMouseOut = () => {
+    setIsHover(false);
+  };
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, {
+    hover: isHover
+  });
+  const [codeReferences, singleCodes] = _react.default.useMemo(() => {
+    const codes = [];
+    const valueCodes = {};
+    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      codes[prefix + i] = /*#__PURE__*/_react.default.createRef();
+      valueCodes[prefix + i] = '';
+      valueCodes[prefix + i + sufixValidation] = '';
+    }
+    return [codes, valueCodes];
+  }, []);
+  const handleSingleCodes = (codeId, val, validation) => {
+    singleCodes[codeId] = val;
+    singleCodes[codeId + sufixValidation] = validation;
+    /* eslint-disable no-unused-expressions */
+    setIndividualCodes({
+      ...individualCodes,
+      [codeId]: val
+    });
+  };
+  const changeDataMasking = boxElement => {
+    let charMasking = '';
+    const element = boxElement;
+    if (mask && mask.length === 1) charMasking = mask;else if (mask && mask.length > 1) charMasking = mask.substring(0, 1);
+    if (charMasking) element.value = charMasking;
+  };
+  const handleChangeCode = () => {
+    let code = '';
+    for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
+    if (typeof onChange === 'function') onChange(code, singleCodes);
+  };
+  const handleChangeCodeValues = (event, codeId, nextIndex) => {
+    const codeElement = codeReferences[codeId]?.current;
+    const val = event.nativeEvent?.value || event.target?.value;
+    if (Number(val).toString() === 'NaN') {
+      codeElement.value = singleCodes[codeId] ?? '';
+      return;
+    }
+    handleSingleCodes(codeId, codeElement?.value ?? singleCodes[codeId], 'success');
+    handleChangeCode();
+    if (nextIndex === validatorsLength) {
+      codeElement.blur();
+      changeDataMasking(codeElement);
+      return;
+    }
+    if (codeElement?.value?.length > 0) {
+      codeReferences[prefix + nextIndex].current.focus();
+      changeDataMasking(codeElement);
+    }
+  };
+  const handleKeyPress = (event, currentIndex, previousIndex) => {
+    if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
+    if (currentIndex > 0) {
+      codeReferences[prefix + currentIndex].current.value = '';
+      codeReferences[prefix + previousIndex].current.focus();
+    }
+    handleSingleCodes(prefix + currentIndex, '', '');
+    handleChangeCode();
+  };
+  const getCodeComponents = () => {
+    const components = [];
+    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      const codeId = prefix + i;
+      const codeInputProps = {
+        nativeID: codeId,
+        keyboardType: 'numeric',
+        ref: codeReferences[codeId] ?? null,
+        validation: strValidation || singleCodes[codeId + sufixValidation],
+        tokens: selectCodeTextInputTokens(themeTokens),
+        onFocus: () => codeReferences[codeId]?.current?.select() ?? null,
+        onKeyPress: event => handleKeyPress(event, i, i - 1),
+        onMouseOver: handleMouseOver,
+        onMouseOut: handleMouseOut,
+        inactive
+      };
+      codeInputProps.validation || delete codeInputProps.validation;
+      components.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.codeInputWidth,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
+          ...codeInputProps
+        })
+      }, codeId));
+    }
+    return components;
+  };
+  _react.default.useEffect(() => {
+    /* eslint-disable no-unused-expressions */
+    if (Number(value).toString() !== 'NaN') setText(value);
+  }, [value]);
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  _react.default.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' : '');
+    }
+  }, [text]);
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  _react.default.useEffect(() => {
+    const handlePasteCode = event => {
+      setText('');
+      const clipBoardText = event.clipboardData.getData('text');
+      if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText);
+    };
+    const handleCopy = event => {
+      let clipBoardText = '';
+      for (let i = 0; i < validatorsLength; i += 1) singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i]);
+      event.clipboardData.setData('text/plain', clipBoardText);
+      event.preventDefault();
+    };
+    if (_Platform.default.OS === 'web') {
+      for (let i = 0; i < validatorsLength; i += 1) {
+        codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode);
+        codeReferences[prefix + i].current.addEventListener('copy', handleCopy);
+        codeReferences[prefix + i].current.addEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+      }
+    }
+    return () => {
+      if (_Platform.default.oldValue === 'web') {
+        for (let i = 0; i < validatorsLength; i += 1) {
+          codeReferences[prefix + i]?.current?.removeEventListener('paste', handlePasteCode);
+          codeReferences[prefix + i]?.current?.removeEventListener('copy', handleCopy);
+          codeReferences[prefix + i]?.current?.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+        }
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+    ...supportsProps,
+    feedbackProps: {
+      ...rest?.feedbackProps,
+      showFeedbackIcon: true
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      space: 2,
+      direction: "row",
+      ref: codeRef,
+      children: getCodeComponents()
+    })
+  });
+});
+Validator.displayName = 'Validator';
+Validator.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize
+   */
+  value: _propTypes.default.string,
+  /**
+   * If true, the component is inactive and non editable.
+   */
+  inactive: _propTypes.default.bool,
+  /**
+   * Show masked characters and obscure the actual input. For example: '*'
+   */
+  mask: _propTypes.default.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
+};
+var _default = exports.default = Validator;
+const staticStyles = _StyleSheet.default.create({
+  codeInputWidth: {
+    width: 43
+  }
+});

package/lib/cjs/Validator/index.js

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

package/lib/cjs/ViewportProvider/ViewportProvider.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _systemConstants = require("@telus-uds/system-constants");
+var _useViewport = require("./useViewport");
+var _useViewportListener = _interopRequireDefault(require("./useViewportListener"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
+ */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, {
+    value: viewport,
+    children: children
+  });
+};
+ViewportProvider.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = exports.default = ViewportProvider;

package/lib/cjs/ViewportProvider/index.js

@@ -0,0 +1,22 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _ViewportProvider.default;

package/lib/cjs/ViewportProvider/useViewport.js

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