@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/IconButton/IconButton.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+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 }; }
+// function to get the dimentionals of the conditionals
+const getPasswordDimensions = (password, width, height) => {
+  return password ? {
+    width,
+    height
+  } : {};
+};
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const selectOuterStyle = (_ref, password) => {
+  let {
+    backgroundColor,
+    outerBorderWidth,
+    outerBorderColor,
+    outerBorderGap,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    shadow,
+    width,
+    height
+  } = _ref;
+  return [{
+    backgroundColor,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...(0, _ThemeProvider.applyOuterBorder)({
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outerBorderWidth,
+      outerBorderColor,
+      outerBorderGap
+    }),
+    ...getPasswordDimensions(password, width, height),
+    ..._Platform.default.select({
+      web: {
+        outline: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    })
+  }, staticStyles.outer];
+};
+const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
+
+const selectInnerStyle = (_ref2, password) => {
+  let {
+    borderColor,
+    borderWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderRadius,
+    padding = 0,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    width,
+    height
+  } = _ref2;
+  return {
+    // Inner borders animate with the icon and should be treated like a themable feature of the icon
+    borderColor,
+    borderRadius,
+    borderWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    padding: calculatePadding(padding, borderWidth),
+    paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
+    paddingRight: calculatePadding(paddingRight, borderRightWidth),
+    paddingTop: calculatePadding(paddingTop, borderTopWidth),
+    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
+    ..._Platform.default.select({
+      web: {
+        pointerEvents: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }),
+    ...getPasswordDimensions(password, width, height)
+  };
+};
+
+/**
+ * A pressable themeless base component that handles pressable states and passes tokens
+ * based on these to an outer border and a base Card component. Not intended to be used in
+ * apps or sites directly: build themed components on top of this.
+ */
+const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    tokens,
+    variant = {},
+    icon: IconComponent,
+    href,
+    hrefAttrs,
+    testID,
+    accessibilityRole = href ? 'link' : 'button',
+    ...rawRest
+  } = _ref3;
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+  const selectedProps = selectProps({
+    ...rest,
+    accessibilityRole
+  });
+  const handlePress = () => {
+    _utils.linkProps.handleHref({
+      href,
+      onPress
+    })({
+      nativeEvent: {
+        target: ref?.current?.id
+      }
+    });
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, variant);
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState), variant.password));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    href: href,
+    onPress: handlePress,
+    hrefAttrs: hrefAttrs,
+    style: getOuterStyle,
+    ...selectedProps,
+    testID: testID,
+    children: pressableState => {
+      const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectInnerStyle(themeTokens, variant.password),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: IconComponent || themeTokens.icon,
+          title: selectedProps.accessibilityLabel,
+          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
+          variant: variant
+        })
+      });
+    }
+  });
+});
+IconButton.displayName = 'IconButton';
+IconButton.propTypes = {
+  ...selectedSystemPropTypes,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('IconButton'),
+  /**
+   * A unique identifier for testing purposes.
+   * Will be added as a `data-testid` attribute.
+   */
+  testID: _propTypes.default.string,
+  /**
+   * Defines the icon to be rendered
+   */
+  icon: _propTypes.default.elementType,
+  /**
+   * URL to navigate to when the `Iconbutton` is pressed
+   */
+  href: _propTypes.default.string,
+  /**
+   * URL options to navigate to when the `Iconbutton` is pressed
+   */
+  hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
+  /**
+   * Function to execute when the `Iconbutton` is pressed
+   */
+  onPress: _propTypes.default.func
+};
+const staticStyles = _StyleSheet.default.create({
+  outer: {
+    alignSelf: 'baseline'
+  }
+});
+var _default = exports.default = (0, _utils.withLinkRouter)(IconButton);

package/lib/cjs/IconButton/index.js

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

package/lib/cjs/InputLabel/InputLabel.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+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 _LabelContent = _interopRequireDefault(require("./LabelContent"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+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 selectLabelStyles = (tokens, themeOptions) => (0, _ThemeProvider.applyTextStyles)({
+  ...(0, _utils.selectTokens)('Typography', tokens),
+  themeOptions
+});
+const selectHintStyles = (_ref, themeOptions) => {
+  let {
+    hintColor,
+    hintFontName,
+    hintFontSize,
+    hintFontWeight,
+    hintLineHeight
+  } = _ref;
+  return (0, _ThemeProvider.applyTextStyles)({
+    color: hintColor,
+    fontName: hintFontName,
+    fontSize: hintFontSize,
+    fontWeight: hintFontWeight,
+    lineHeight: hintLineHeight,
+    themeOptions
+  });
+};
+const selectGapStyles = _ref2 => {
+  let {
+    gap
+  } = _ref2;
+  return {
+    marginRight: gap
+  };
+};
+const InputLabel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    copy = 'en',
+    label,
+    forId,
+    hint,
+    hintPosition = 'inline',
+    hintId,
+    tooltip,
+    tokens,
+    variant,
+    characterCount,
+    maxCharacterAllowed,
+    ...rest
+  } = _ref3;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
+  const hasTooltip = tooltip !== undefined;
+  const isHintInline = hintPosition === 'inline';
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      ref: ref,
+      style: staticStyles.container,
+      ...selectProps(rest),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [selectLabelStyles(themeTokens, themeOptions), selectGapStyles(themeTokens), staticStyles.label],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+          forId: forId,
+          children: label
+        })
+      }), hint && isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [selectHintStyles(themeTokens, themeOptions), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
+        nativeID: hintId,
+        children: hint
+      }), hasTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.tooltipAlign, {
+          height: themeTokens.fontSize * themeTokens.lineHeight,
+          color: themeTokens.color
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+          content: tooltip,
+          copy: copy
+        })
+      }), maxCharacterAllowed && isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+        style: [selectHintStyles({
+          ...themeTokens
+        }), staticStyles.characterCountlabel],
+        children: [characterCount, "/", maxCharacterAllowed]
+      })]
+    }), hint && !maxCharacterAllowed && !isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
+      nativeID: hintId,
+      children: hint
+    }), hint && maxCharacterAllowed && !isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: staticStyles.container,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [selectHintStyles(themeTokens), staticStyles.flexHintBelow],
+        nativeID: hintId,
+        children: hint
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+        style: [selectHintStyles(themeTokens), staticStyles.characterCountlabel],
+        children: [characterCount, "/", maxCharacterAllowed]
+      })]
+    })]
+  });
+});
+InputLabel.displayName = 'InputLabel';
+InputLabel.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  /**
+   * The input label.
+   */
+  label: _propTypes.default.string.isRequired,
+  /**
+   * The id attribute of the input which this label refers to.
+   */
+  forId: _propTypes.default.string,
+  /**
+   * A short description of the expected input.
+   */
+  hint: _propTypes.default.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  /**
+   * The id attribute passed down to the hint element.
+   */
+  hintId: _propTypes.default.string,
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string,
+  /**
+   * Current number of characterts of an input text.
+   */
+  characterCount: _propTypes.default.number,
+  /**
+   * Max number of characters that allows an input text.
+   */
+  maxCharacterAllowed: _propTypes.default.number,
+  tokens: (0, _utils.getTokensPropType)('InputLabel'),
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = InputLabel;
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flexShrink: 1,
+    flexDirection: 'row'
+  },
+  characterCountlabel: {
+    marginLeft: 'auto',
+    marginTop: 'auto'
+  },
+  label: {
+    flexShrink: 1,
+    alignSelf: 'center'
+  },
+  hintBelow: {
+    flexBasis: '100%',
+    flexShrink: 0
+  },
+  flexHintBelow: {
+    flexBasis: '100%',
+    flexShrink: 1
+  },
+  tooltipAlign: {
+    alignSelf: 'center',
+    justifyContent: 'center'
+  }
+});

package/lib/cjs/InputLabel/LabelContent.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    forId
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    ref: ref,
+    htmlFor: forId,
+    style: staticStyles.inheritCursor,
+    children: children
+  });
+});
+LabelContent.displayName = 'LabelContent';
+LabelContent.propTypes = {
+  children: _propTypes.default.string,
+  forId: _propTypes.default.string
+};
+
+// Note that <label> is not React Native, so we can't use `StyleSheet.create` here
+const staticStyles = {
+  inheritCursor: {
+    cursor: 'inherit'
+  }
+};
+var _default = exports.default = LabelContent;

package/lib/cjs/InputLabel/LabelContent.native.js

@@ -0,0 +1,26 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
+const LabelContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return ref ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    children: children
+  }) : children;
+});
+LabelContent.displayName = 'LabelContent';
+LabelContent.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = exports.default = LabelContent;

package/lib/cjs/InputLabel/index.js

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

package/lib/cjs/InputSupports/InputSupports.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _InputLabel = _interopRequireDefault(require("../InputLabel"));
+var _Feedback = _interopRequireDefault(require("../Feedback"));
+var _StackView = _interopRequireDefault(require("../StackView"));
+var _ThemeProvider = require("../ThemeProvider");
+var _useInputSupports = _interopRequireDefault(require("./useInputSupports"));
+var _utils = require("../utils");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    copy = 'en',
+    label,
+    hint,
+    hintPosition = 'inline',
+    feedback,
+    feedbackTokens = {},
+    feedbackProps = {},
+    tooltip,
+    validation,
+    maxCharacterAllowed,
+    inputValue,
+    nativeID
+  } = _ref;
+  const {
+    space
+  } = (0, _ThemeProvider.useThemeTokens)('InputSupports');
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const maxCharsReachedErrorMessage = inputValue?.length > maxCharacterAllowed ? getCopy('maxCharsMessage').replace(/%\{charCount\}/g, maxCharacterAllowed) : '';
+  const feedbackValidation = inputValue?.length > maxCharacterAllowed ? 'error' : validation;
+  const {
+    inputId,
+    hintId,
+    feedbackId,
+    a11yProps
+  } = (0, _useInputSupports.default)({
+    feedback,
+    hint,
+    label,
+    validation,
+    nativeID,
+    copy,
+    maxCharacterAllowed,
+    charactersCount: maxCharacterAllowed - inputValue?.length
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    space: space,
+    ref: ref,
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      copy: copy,
+      label: label,
+      hint: hint,
+      hintPosition: hintPosition,
+      hintId: hintId,
+      tooltip: tooltip,
+      forId: inputId,
+      characterCount: inputValue?.length,
+      maxCharacterAllowed: maxCharacterAllowed
+    }), typeof children === 'function' ? children({
+      inputId,
+      ...a11yProps,
+      validation: feedbackValidation
+    }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
+      id: feedbackId,
+      title: feedback || maxCharsReachedErrorMessage,
+      validation: feedbackValidation,
+      tokens: feedbackTokens,
+      variant: {
+        icon: feedbackProps.showFeedbackIcon
+      },
+      ...feedbackProps
+    }) : null]
+  });
+});
+InputSupports.displayName = 'InputSupports';
+InputSupports.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  /**
+   * The input label.
+   */
+  label: _propTypes.default.string,
+  /**
+   * A short description of the expected input.
+   */
+  hint: _propTypes.default.string,
+  /**
+   * Position of the hint relative to label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  /**
+   * A detailed description of validation error/success or additional instructions.
+   * Visual variant is determined based on the `validation` prop.
+   */
+  feedback: _propTypes.default.string,
+  /**
+   * Additional tokens to override the default feedback tokens.
+   */
+  feedbackTokens: (0, _utils.getTokensPropType)('Feedback'),
+  /**
+   * Additional props to pass to the `Feedback` component.
+   */
+  feedbackProps: _propTypes.default.object,
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string,
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success']),
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: _propTypes.default.string,
+  /**
+   * The text value of a TextArea or TextInput
+   */
+  inputValue: _propTypes.default.string,
+  /**
+   * Max number of characters that allows an input text.
+   */
+  maxCharacterAllowed: _propTypes.default.number
+};
+var _default = exports.default = InputSupports;

package/lib/cjs/InputSupports/dictionary.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    maxCharacters: 'Maximum %{charCount} characters',
+    charactersRemaining: '%{charCount} characters remaining',
+    maxCharsMessage: 'Must not exceed %{charCount} characters'
+  },
+  fr: {
+    maxCharacters: '%{charCount} caractères maximum',
+    charactersRemaining: '%{charCount} caractères restants',
+    maxCharsMessage: 'Ne doit pas dépasser %{charCount} caractères'
+  }
+};

package/lib/cjs/InputSupports/index.js

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

package/lib/cjs/InputSupports/useInputSupports.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
+var _utils = require("../utils");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const joinDefined = array => array.filter(item => item !== undefined).join(' ');
+const useInputSupports = _ref => {
+  let {
+    label,
+    feedback,
+    validation,
+    hint,
+    nativeID,
+    copy,
+    maxCharacterAllowed,
+    charactersCount
+  } = _ref;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const hasValidationError = validation === 'error';
+  const inputId = (0, _useUniqueId.default)('input');
+  const hintId = (0, _useUniqueId.default)('input-hint');
+  const feedbackId = (0, _useUniqueId.default)('input-feedback');
+  const a11yProps = {
+    accessibilityLabel: label,
+    accessibilityHint: joinDefined([!hasValidationError && feedback, hint, maxCharacterAllowed ? getCopy('maxCharacters').replace(/%\{charCount\}/g, maxCharacterAllowed) : undefined]),
+    // native only -> replaced with describedBy on web
+    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId,
+    // feedback receives a11yRole=alert on error, so there's no need to include it here
+    hint && hintId, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
+    accessibilityInvalid: hasValidationError
+  };
+  return {
+    inputId: nativeID || inputId,
+    hintId,
+    feedbackId,
+    a11yProps
+  };
+};
+var _default = exports.default = useInputSupports;