@telus-uds/components-web 1.8.0 → 1.10.0

package/CHANGELOG.md

@@ -1,12 +1,51 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 24 Apr 2023 21:33:59 GMT and should not be manually modified.
+This log was last generated on Mon, 01 May 2023 22:02:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.10.0
+
+Mon, 01 May 2023 22:02:12 GMT
+
+### Minor changes
+
+- `Footnote`: Allow `content` prop to take custom JSX, override copy with custom `dictionary` (shahzaibkhalidmalik@outlook.com)
+- Set Item size to micro in Breadcrumbs (wlsdud194@hotmail.com)
+- List Box merged with List changes (akshay.pandey1@telus.com)
+- Added label to Breadcrumb component (wlsdud194@hotmail.com)
+- update snapshots (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.39.0
+- Bump @telus-uds/system-theme-tokens to v2.24.0
+
+## 1.9.0
+
+Thu, 27 Apr 2023 14:41:57 GMT
+
+### Minor changes
+
+- Moved OptimizeImage to components-web from ds-allium (kyle.king2@telus.com)
+- Countdown is now multibrand (akshay.pandey1@telus.com)
+- added color token to Icon in Callout component (ignacio.cuyun@telus.com)
+- Added Video components to componets.js and themes (wlsdud194@hotmail.com)
+- make storycard component multibrand (mauricio.batresmontejo@telus.com)
+- make Terms and Conditions multibrand (mauricio.batresmontejo@telus.com)
+- Testimonial multi-brand (samuraix221@hotmail.com)
+- Added Card component (wlsdud194@hotmail.com)
+- move 'IconButton' to components-web (kyle.king2@telus.com)
+- move 'WebVideo' & 'shared/SplashButton' to components-web (kyle.king2@telus.com)
+- updated spinner snapshot (ignacio.cuyun@telus.com)
+- move Autocomplete component to components web (evander.owusu@telus.com)
+- Bump @telus-uds/components-base to v1.38.0
+- Bump @telus-uds/system-theme-tokens to v2.23.0
+
+### Patches
+
+- Fix where `Modal`'s cancel link may not render correctly on Firefox (shahzaibkhalidmalik@outlook.com)
+
 ## 1.8.0
 
-Mon, 24 Apr 2023 21:33:59 GMT
+Mon, 24 Apr 2023 21:42:02 GMT
 
 ### Minor changes
 

package/lib/Autocomplete/Autocomplete.js

@@ -0,0 +1,393 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodash = require("lodash");
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _Listbox = _interopRequireDefault(require("../Listbox"));
+
+var _utils = require("../utils");
+
+var _Loading = _interopRequireDefault(require("./Loading"));
+
+var _Suggestions = _interopRequireDefault(require("./Suggestions"));
+
+var _constants = require("./constants");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+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; }
+
+/* eslint-disable react/require-default-props */
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs, _componentsBase.inputSupportsProps, _componentsBase.textInputHandlerProps, _componentsBase.textInputProps]);
+const inputTokens = {
+  paddingLeft: _constants.INPUT_LEFT_PADDING
+}; // Returns JSX to display a bold string `str` with unbolded occurrences of the
+// `substring` based in the array of `matchIndexes` provided
+
+const highlightAllMatches = function (str) {
+  let substring = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let matchIndexes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return (
+    /*#__PURE__*/
+    // Wrapping all in bold
+    (0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        bold: false
+      },
+      children: matchIndexes.reduce((acc, matchIndex, index) => [...acc, // Add a piece of the string up to the first occurrence of the substring
+      index === 0 && (str.slice(0, matchIndex) ?? ''),
+      /*#__PURE__*/
+      // Unbold the occurrence of the substring (while keeping the original casing)
+      (0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          bold: true
+        },
+        children: str.slice(matchIndex, matchIndex + substring.length)
+      }, matchIndex), // Add the rest of the string until the next occurrence or the end of it
+      str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length)], [])
+    })
+  );
+};
+
+const highlight = function () {
+  let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return items.reduce((acc, item) => {
+    var _Array$from;
+
+    const matches = (_Array$from = Array.from(item.label.toLowerCase().matchAll(text.toLowerCase()))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(_ref => {
+      let {
+        index
+      } = _ref;
+      return index;
+    });
+
+    if (matches !== null && matches !== void 0 && matches.length) {
+      return [...acc, { ...item,
+        label: highlightAllMatches(item.label, text, matches)
+      }];
+    }
+
+    return [...acc, item];
+  }, []);
+};
+
+const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  var _ref3;
+
+  let {
+    children,
+    copy = 'en',
+    fullWidth = true,
+    initialItems,
+    initialValue,
+    isLoading = false,
+    items,
+    maxSuggestions = _constants.DEFAULT_MAX_SUGGESTIONS,
+    minToSuggestion = _constants.DEFAULT_MIN_TO_SUGGESTION,
+    noResults,
+    onChange,
+    onClear,
+    onSelect,
+    readOnly,
+    validation,
+    value,
+    ...rest
+  } = _ref2;
+  // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
+  // but we also need to adjust suggestions based on the mode:
+  // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
+  // - in uncontrolled mode we filter the suggestions ourselves based on the `initialItems`
+  //   prop and the text entered
+  const isControlled = value !== undefined; // We need to store current items for uncontrolled usage
+
+  const [currentItems, setCurrentItems] = (0, _react.useState)(initialItems); // We need to store the current value as well to be able to highlight it
+
+  const [currentValue, setCurrentValue] = (0, _react.useState)(value ?? initialValue); // Setting up the overlay
+
+  const openOverlayRef = (0, _react.useRef)();
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
+  const {
+    overlaidPosition,
+    sourceRef: inputRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  } = (0, _utils.useOverlaidPosition)({
+    isShown: isExpanded,
+    offsets: {
+      vertical: 4
+    }
+  }); // We limit the number of suggestions displayed to avoid huge lists
+  // TODO: add a way to make the `Listbox` occupy fixed height and be scrollable
+  // within that height, which will unlock similar behaviour for `AutoComplete` as well
+
+  const itemsToSuggest = function () {
+    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    return maxSuggestions ? data.slice(0, maxSuggestions) : [...data];
+  };
+
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  }); // Tracking input width changes to resize the listbox overlay accordingly
+
+  const [inputWidth, setInputWidth] = (0, _react.useState)();
+  (0, _componentsBase.useSafeLayoutEffect)(() => {
+    const updateInputWidth = () => {
+      var _inputRef$current;
+
+      setInputWidth((inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.clientWidth) + 4); // adding back all the input borders / outlines
+
+      setIsExpanded(false); // close the suggestions while the input is changing
+    };
+
+    const throttledUpdateInputWidth = (0, _lodash.throttle)(updateInputWidth, 100, {
+      leading: false
+    });
+    updateInputWidth();
+    window.addEventListener('load', updateInputWidth);
+    window.addEventListener('resize', throttledUpdateInputWidth);
+    return () => {
+      window.removeEventListener('load', updateInputWidth);
+      window.removeEventListener('resize', throttledUpdateInputWidth);
+    };
+  }, [inputRef]);
+
+  const handleChange = newValue => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    setCurrentValue(newValue);
+    setIsExpanded((newValue === null || newValue === void 0 ? void 0 : newValue.length) >= minToSuggestion);
+
+    if (!isControlled && initialItems !== undefined) {
+      setCurrentItems(initialItems.filter(_ref4 => {
+        var _label$toLowerCase;
+
+        let {
+          label
+        } = _ref4;
+        return label === null || label === void 0 ? void 0 : (_label$toLowerCase = label.toLowerCase()) === null || _label$toLowerCase === void 0 ? void 0 : _label$toLowerCase.includes(newValue === null || newValue === void 0 ? void 0 : newValue.toLowerCase());
+      }));
+    }
+  };
+
+  const handleSelect = selectedId => {
+    var _ref5;
+
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedId);
+    const {
+      label: newValue
+    } = (_ref5 = isControlled ? items : currentItems) === null || _ref5 === void 0 ? void 0 : _ref5.find(_ref6 => {
+      let {
+        id
+      } = _ref6;
+      return id === selectedId;
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    setCurrentValue(newValue);
+    if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
+    setIsExpanded(false);
+  };
+
+  const handleClose = event => {
+    var _openOverlayRef$curre, _openOverlayRef$curre2;
+
+    if (event.type === 'keydown') {
+      if (event.key === 'Escape' || event.key === 27) {
+        setIsExpanded(false);
+      } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
+        targetRef.current.focus();
+      }
+    } else if (event.type === 'click' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target))) {
+      setIsExpanded(false);
+    } else if (event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
+      setIsExpanded(false);
+    }
+  };
+
+  const {
+    supportsProps,
+    ...selectedProps
+  } = selectProps(rest);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.InputSupports, { ...supportsProps,
+      accessibilityAutoComplete: "list",
+      accessibilityControls: "autocomplete",
+      accessibilityExpanded: isExpanded,
+      accessibilityRole: "combobox",
+      ...selectedProps,
+      validation: validation,
+      ref: ref,
+      children: _ref7 => {
+        let {
+          inputId,
+          ...props
+        } = _ref7;
+        if (typeof children === 'function') return children({
+          inputId,
+          inputRef,
+          onChange: handleChange,
+          onKeyPress: handleClose,
+          readOnly,
+          tokens: inputTokens,
+          ...selectedProps,
+          ...props,
+          ...(isControlled ? {
+            value
+          } : {
+            initialValue
+          })
+        });
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
+          onChange: handleChange,
+          onClear: onClear,
+          onKeyPress: handleClose,
+          readOnly: readOnly,
+          ref: inputRef,
+          tokens: inputTokens,
+          ...selectedProps,
+          ...props,
+          ...(isControlled ? {
+            value
+          } : {
+            initialValue
+          })
+        });
+      }
+    }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
+        overlaidPosition: overlaidPosition,
+        isReady: isReady,
+        minWidth: fullWidth ? inputWidth : _constants.MIN_LISTBOX_WIDTH,
+        maxWidth: inputWidth,
+        onLayout: onTargetLayout,
+        ref: openOverlayRef,
+        children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {
+          label: getCopy('loading')
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Suggestions.default, {
+          hasResults: getCopy('hasResults'),
+          id: "autocomplete",
+          items: itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue)),
+          noResults: noResults ?? getCopy('noResults'),
+          onClose: handleClose,
+          onSelect: handleSelect,
+          parentRef: inputRef,
+          ref: targetRef
+        })
+      }), (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        // This catches and shifts focus to other interactive elements.
+        onFocus: () => {
+          var _targetRef$current;
+
+          return targetRef === null || targetRef === void 0 ? void 0 : (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
+        } // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        ,
+        tabIndex: 0
+      })]
+    })]
+  });
+});
+Autocomplete.displayName = 'Autocomplete'; // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = _propTypes.default.shape({
+  hasResults: _propTypes.default.string.isRequired,
+  loading: _propTypes.default.string.isRequired,
+  noResults: _propTypes.default.string.isRequired
+});
+
+Autocomplete.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Can be used to provide a function that renders a custom input:
+   * <Autocomplete items={items} value={currentValue}>
+   *   {({ inputId, inputRef, onChange, onKeyPress, readOnly, tokens, value }) => (
+   *     <Search
+   *       nativeID={inputId}
+   *       ref={inputRef}
+   *       onChange={onChange}
+   *       onKeyPress={onKeyPress}
+   *       readOnly={readOnly}
+   *       tokens={tokens}
+   *       value={value}
+   *     />
+   *   )}
+   * </Autocomplete>
+   */
+  children: _propTypes.default.func,
+
+  /**
+   * Copy language identifier
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), dictionaryContentShape]),
+
+  /**
+   * Set to true in order to display the loading indicator instead of results
+   */
+  isLoading: _propTypes.default.bool,
+
+  /**
+   * List of items to display as suggestions
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    label: _propTypes.default.string
+  })),
+
+  /**
+   * Label to display alongside the spinner when in a loading state
+   */
+  loadingLabel: _propTypes.default.string,
+
+  /**
+   * Minimum number of characters typed for a list of suggestions to appear
+   */
+  minToSuggestion: _propTypes.default.number,
+
+  /**
+   * Maximum number of suggestions provided at the same time
+   */
+  maxSuggestions: _propTypes.default.number,
+
+  /**
+   * Text or JSX to render when no results are available
+   */
+  noResults: _propTypes.default.node,
+
+  /**
+   * Handler function to be called when the input value changes
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Handler function to be called when the clear button (appears if the handler is passed) is pressed
+   */
+  onClear: _propTypes.default.func,
+
+  /**
+   * Callback function to be called when an item is selected from the list
+   */
+  onSelect: _propTypes.default.func,
+
+  /**
+   * Input value for controlled usage
+   */
+  value: _propTypes.default.string
+};
+var _default = Autocomplete;
+exports.default = _default;

package/lib/Autocomplete/Loading.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Loading = _ref => {
+  let {
+    label
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
+    space: 3,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      direction: "row",
+      space: 2,
+      tokens: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+        inline: true,
+        show: true,
+        size: "small"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: 'small'
+        },
+        accessibilityLiveRegion: "polite",
+        children: label
+      })]
+    })
+  });
+};
+
+Loading.propTypes = {
+  label: _propTypes.default.string
+};
+var _default = Loading;
+exports.default = _default;

package/lib/Autocomplete/Suggestions.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _Listbox = _interopRequireDefault(require("../Listbox"));
+
+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 Suggestions = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    hasResults,
+    items = [],
+    noResults,
+    onClose,
+    onSelect,
+    parentRef
+  } = _ref;
+  const pressableItems = items.map(_ref2 => {
+    let {
+      id,
+      ...rest
+    } = _ref2;
+    return {
+      id,
+      onPress: () => onSelect(id),
+      ...rest
+    };
+  });
+  if (items !== null && items !== void 0 && items.length) return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.A11yText, {
+      accessibilityLiveRegion: "polite",
+      text: hasResults
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default, {
+      items: pressableItems,
+      firstItemRef: ref,
+      parentRef: parentRef,
+      onClose: onClose
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
+    space: 3,
+    children: typeof noResults === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        accessibilityLiveRegion: "polite",
+        variant: {
+          size: 'small'
+        },
+        children: noResults
+      })
+    }) : noResults
+  });
+});
+Suggestions.displayName = 'Suggestions';
+Suggestions.propTypes = {
+  hasResults: _propTypes.default.string.isRequired,
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    label: _propTypes.default.node
+  })).isRequired,
+  noResults: _propTypes.default.node.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  onSelect: _propTypes.default.func.isRequired,
+  parentRef: _propTypes.default.object.isRequired
+};
+var _default = Suggestions;
+exports.default = _default;

package/lib/Autocomplete/constants.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MIN_LISTBOX_WIDTH = exports.INPUT_LEFT_PADDING = exports.DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MAX_SUGGESTIONS = void 0;
+
+var _palette = _interopRequireDefault(require("@telus-uds/palette-allium/build/web/palette"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DEFAULT_MIN_TO_SUGGESTION = 1;
+exports.DEFAULT_MIN_TO_SUGGESTION = DEFAULT_MIN_TO_SUGGESTION;
+const DEFAULT_MAX_SUGGESTIONS = 5;
+exports.DEFAULT_MAX_SUGGESTIONS = DEFAULT_MAX_SUGGESTIONS;
+const INPUT_LEFT_PADDING = _palette.default.size.size16;
+exports.INPUT_LEFT_PADDING = INPUT_LEFT_PADDING;
+const MIN_LISTBOX_WIDTH = _palette.default.size.size288;
+exports.MIN_LISTBOX_WIDTH = MIN_LISTBOX_WIDTH;

package/lib/Autocomplete/dictionary.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    hasResults: 'Some results are available',
+    loading: 'Loading suggestions...',
+    noResults: 'No results found'
+  },
+  fr: {
+    hasResults: 'Quelques suggestions sont disponible',
+    loading: 'Chargement en cours...',
+    noResults: 'Aucun résultat trouvé'
+  }
+};
+exports.default = _default;

package/lib/Autocomplete/index.js

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

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -39,7 +39,8 @@ const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
   listStyle: 'none',
   listStylePosition: 'inside',
   margin: 0,
-  padding: 0
+  padding: 0,
+  alignItems: 'baseline'
 });
 
 const omitProps = _ref => {
@@ -173,7 +174,9 @@ const Breadcrumbs = _ref2 => {
       })
     })
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", { ...selectProps(rest),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
+    "aria-label": "Breadcrumb",
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
       children: items.map(_ref4 => {
         let {
@@ -194,7 +197,9 @@ const Breadcrumbs = _ref2 => {
             itemLinkRouterProps
           },
           reactRouterLinkComponent: linkComponent,
-          variant: variant,
+          variant: { ...variant,
+            size: 'micro'
+          },
           LinkRouter: ItemLinkRouter
         }, breadcrumbName);
       })

package/lib/Callout/Callout.js

@@ -94,6 +94,9 @@ const Callout = _ref2 => {
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     ...selectProps(rest),
     children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+      tokens: {
+        color
+      },
       icon: icon,
       variant: {
         rank: 'primary',