@telus-uds/components-web 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 10 Jan 2025 21:41:25 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Jan 2025 21:06:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.4.0
+
+Wed, 22 Jan 2025 21:06:14 GMT
+
+### Minor changes
+
+- `Badge`: new size variant (sergio.ramirez@telus.com)
+- `SSR`: add router property (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v2.5.0
+
+### Patches
+
+- `TermsAndConditions`: throws nested button error as `Pressable` tends to render as a `button` rather than a `div` with `button` role (shahzaibkhalidmalik@outlook.com)
+- `Tooltip`: Customized/optional props interface types update (shivam.gupta3@telus.com)
+- `Callout`: include `tokens` to type definition. (jaime.tuyuc@telus.com)
+
 ## 3.3.0
 
-Fri, 10 Jan 2025 21:41:25 GMT
+Fri, 10 Jan 2025 21:49:25 GMT
 
 ### Minor changes
 

package/lib/Badge/Badge.js

@@ -22,6 +22,8 @@ const BadgeContainer = styled.div`
 }};
   display: inline-flex;
   justify-content: center;
+  align-items: center;
+  height: fit-content;
   padding: ${_ref3 => {
   let {
     padding

package/lib/Card/Card.js

@@ -92,9 +92,9 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   const {
     borderRadius
   } = useThemeTokens('Card', tokens, variant);
-  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
     interactive: true,
-    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
+    ...(interactiveCard?.variant || {})
   });
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
@@ -118,7 +118,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     display: imgColCurrentViewport === 0 ? 'none' : undefined
   };
   const columnFlex = {
-    flexGrow: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? 0 : 1,
+    flexGrow: interactiveCard?.body ? 0 : 1,
     flexShrink: 1,
     justifyContent: 'space-between'
   };
@@ -140,13 +140,13 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     tokens: restOfTokens,
     backgroundImage: backgroundImage,
     ...selectProps(rest),
-    children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
+    children: [interactiveCard?.body ? /*#__PURE__*/_jsx(PressableCardBase, {
       ref: ref,
       tokens: getThemeTokens,
       dataSet: dataSet,
       onPress: onPress,
       ...selectProps(rest),
-      children: typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body() : interactiveCard.body
+      children: typeof interactiveCard?.body === 'function' ? interactiveCard.body() : interactiveCard.body
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
       direction: contentStackDirection,
       tokens: {

package/lib/DatePicker/DatePicker.js

@@ -82,7 +82,6 @@ const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
  * - Recommended for viewports greater than or equal to 576px
  */
 const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  var _dictionary$copy;
   let {
     copy = 'en',
     id,
@@ -118,7 +117,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const datePickerRef = React.useRef(null);
   useSafeLayoutEffect(() => {
     const updateDatePickerPosition = () => {
-      if (inline || !(textInputRef !== null && textInputRef !== void 0 && textInputRef.current)) return;
+      if (inline || !textInputRef?.current) return;
       const {
         left,
         top
@@ -174,8 +173,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }, [isFocused]);
   React.useEffect(() => {
     if (inputText !== '' && inputDate !== undefined) {
-      var _textInputRef$current;
-      textInputRef === null || textInputRef === void 0 || (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 || _textInputRef$current.focus();
+      textInputRef?.current?.focus();
     }
   }, [inputDate, inputText]);
   const onFocusChange = _ref4 => {
@@ -216,10 +214,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     if (value === '' || moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
       if (value === '') {
         setInputDate(undefined); // Set inputDate to undefined if input is empty
-        onDateChange === null || onDateChange === void 0 || onDateChange(undefined);
+        onDateChange?.(undefined);
       } else {
         setInputDate(moment(value, dateFormat));
-        onDateChange === null || onDateChange === void 0 || onDateChange(moment(value, dateFormat));
+        onDateChange?.(moment(value, dateFormat));
       }
       setInputText(value === '' ? '' : moment(value, dateFormatWithoutSpaces).format(dateFormat));
     } else {
@@ -229,7 +227,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const handleOnKeyPress = event => {
     if (event.key === 'Backspace' && inputText === '') {
       setInputDate(undefined);
-      onDateChange === null || onDateChange === void 0 || onDateChange(undefined);
+      onDateChange?.(undefined);
     }
   };
   const handleValidation = inputValidation => {
@@ -369,7 +367,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         onKeyPress: handleOnKeyPress,
         tooltip: tooltip,
         hintPosition: hintPosition,
-        label: label ?? ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription),
+        label: label ?? dictionary[copy]?.roleDescription,
         value: inputText,
         validation: handleValidation(validation),
         inactive: disabled,

package/lib/Footnote/Footnote.js

@@ -220,7 +220,6 @@ const usePrevious = value => {
  * - When `Footnote` is closed, focus must return to the initiating element
  */
 const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _theme$themeOptions;
   const {
     copy = 'en',
     number,
@@ -290,7 +289,7 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const prevProps = usePrevious(props);
   const theme = useTheme();
-  const maxWidth = useResponsiveProp((_theme$themeOptions = theme.themeOptions) === null || _theme$themeOptions === void 0 ? void 0 : _theme$themeOptions.contentMaxWidth);
+  const maxWidth = useResponsiveProp(theme.themeOptions?.contentMaxWidth);
   const [isScrollable, setIsScrollable] = React.useState(false);
   const closeFootnote = React.useCallback((event, options) => {
     onClose(event, options);
@@ -304,7 +303,6 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
    * if there are no interactive elements the focus will remain inside the close button.
    */
   const manageFootnoteFocusAndClose = React.useCallback(event => {
-    var _footnoteRef$current, _footnoteRef$current2;
     if (!isVisible) {
       return;
     }
@@ -325,11 +323,11 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
           firstElement.focus();
         }
       }
-    } else if ((event.type === 'click' || event.type === 'mousedown') && footnoteRef !== null && footnoteRef !== void 0 && footnoteRef.current && event.target && !(footnoteRef !== null && footnoteRef !== void 0 && (_footnoteRef$current = footnoteRef.current) !== null && _footnoteRef$current !== void 0 && _footnoteRef$current.contains(event.target)) && event.target.getAttribute('data-tds-id') !== 'footnote-link') {
+    } else if ((event.type === 'click' || event.type === 'mousedown') && footnoteRef?.current && event.target && !footnoteRef?.current?.contains(event.target) && event.target.getAttribute('data-tds-id') !== 'footnote-link') {
       closeFootnote(event, {
         returnFocus: false
       });
-    } else if (event.type === 'touchstart' && footnoteRef !== null && footnoteRef !== void 0 && footnoteRef.current && event.touches[0].target && !(footnoteRef !== null && footnoteRef !== void 0 && (_footnoteRef$current2 = footnoteRef.current) !== null && _footnoteRef$current2 !== void 0 && _footnoteRef$current2.contains(event.touches[0].target)) && event.touches[0].target.getAttribute('data-tds-id') !== 'footnote-link') {
+    } else if (event.type === 'touchstart' && footnoteRef?.current && event.touches[0].target && !footnoteRef?.current?.contains(event.touches[0].target) && event.touches[0].target.getAttribute('data-tds-id') !== 'footnote-link') {
       closeFootnote(event, {
         returnFocus: false
       });
@@ -381,8 +379,7 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Set height of header on mount
   React.useEffect(() => {
-    var _headerRef$current;
-    setHeaderHeight((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.offsetHeight);
+    setHeaderHeight(headerRef.current?.offsetHeight);
   }, []);
   const preventDefault = event => {
     if (!bodyRef.current.contains(event.touches[0].target)) {

package/lib/NavigationBar/NavigationBar.js

@@ -1,4 +1,3 @@
-var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, StackView, Typography, useHash, useInputValue, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
@@ -59,14 +58,14 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         let {
           items: parentItems
         } = _ref3;
-        return parentItems === null || parentItems === void 0 ? void 0 : parentItems.some(_ref4 => {
+        return parentItems?.some(_ref4 => {
           let {
             href
           } = _ref4;
           return hash === href;
         });
       });
-      hashItem = parentItem === null || parentItem === void 0 ? void 0 : parentItem.items.find(_ref5 => {
+      hashItem = parentItem?.items.find(_ref5 => {
         let {
           href
         } = _ref5;
@@ -87,14 +86,13 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const openOverlayRef = React.useRef(null);
   const [openSubMenuId, setOpenSubMenuId] = React.useState(null);
   const handleSubMenuClose = event => {
-    var _openOverlayRef$curre, _openOverlayRef$curre2;
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         setOpenSubMenuId(null);
       }
-    } 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))) {
+    } else if (event.type === 'click' && openOverlayRef?.current && event.target && !openOverlayRef?.current?.contains(event.target)) {
       setOpenSubMenuId(null);
-    } 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))) {
+    } else if (event.type === 'touchstart' && openOverlayRef?.current && event.touches[0].target && !openOverlayRef?.current?.contains(event.touches[0].target)) {
       setOpenSubMenuId(null);
     }
   };
@@ -155,7 +153,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         heading: headingLevel,
         children: heading
       })
-    }), itemsForViewport === null || itemsForViewport === void 0 ? void 0 : itemsForViewport.map((_ref6, index) => {
+    }), itemsForViewport?.map((_ref6, index) => {
       let {
         href,
         label,
@@ -173,22 +171,22 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null);
           return;
         }
-        if (href !== null && href !== void 0 && href.startsWith('#')) {
+        if (href?.startsWith('#')) {
           scrollToAnchor(href, event, () => setValue(itemId, event));
         } else {
           setValue(itemId, event);
         }
-        onClick === null || onClick === void 0 || onClick(event);
+        onClick?.(event);
       };
       const ItemComponent = nestedItems ? NavigationSubMenu : NavigationItem;
       const isOpen = itemId === openSubMenuId;
-      const scrollableNestedItems = (nestedItems === null || nestedItems === void 0 ? void 0 : nestedItems.map(item => ({
+      const scrollableNestedItems = nestedItems?.map(item => ({
         ...item,
         onPress: event => {
           const nestedItemId = item.id ?? item.label;
           scrollToAnchor(item.href, event, () => setValue(nestedItemId, event));
         }
-      }))) ?? nestedItems;
+      })) ?? nestedItems;
       return /*#__PURE__*/_jsx(ItemComponent, {
         ref: itemRef,
         href: href,
@@ -235,8 +233,8 @@ NavigationBar.propTypes = {
     id: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     selected: PropTypes.bool,
-    LinkRouter: (_withLinkRouter$propT = withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
-    linkRouterProps: (_withLinkRouter$propT2 = withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps,
+    LinkRouter: withLinkRouter.propTypes?.LinkRouter,
+    linkRouterProps: withLinkRouter.propTypes?.linkRouterProps,
     // One layer of nested links is allowed
     items: PropTypes.arrayOf(PropTypes.shape({
       label: PropTypes.string.isRequired,
@@ -244,8 +242,8 @@ NavigationBar.propTypes = {
       id: PropTypes.string.isRequired,
       onClick: PropTypes.func,
       selected: PropTypes.bool,
-      LinkRouter: (_withLinkRouter$propT3 = withLinkRouter.propTypes) === null || _withLinkRouter$propT3 === void 0 ? void 0 : _withLinkRouter$propT3.LinkRouter,
-      linkRouterProps: (_withLinkRouter$propT4 = withLinkRouter.propTypes) === null || _withLinkRouter$propT4 === void 0 ? void 0 : _withLinkRouter$propT4.linkRouterProps
+      LinkRouter: withLinkRouter.propTypes?.LinkRouter,
+      linkRouterProps: withLinkRouter.propTypes?.linkRouterProps
     }))
   })).isRequired,
   /**

package/lib/NavigationBar/NavigationSubMenu.js

@@ -99,7 +99,6 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       icon: icoMenu,
       tokens: tokens,
       children: _ref2 => {
-        var _textStyles$;
         let {
           textStyles
         } = _ref2;
@@ -109,7 +108,7 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             size: 'micro'
           },
           tokens: {
-            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color
+            color: textStyles[0]?.color
           }
         }, `${id}_icon`)];
       }

package/lib/NavigationBar/collapseItems.js

@@ -2,7 +2,7 @@
  * Make a list of items into a one-item list where all items are nested under the first item
  */
 const collapseItems = (items, selectedId) => {
-  if (!(items !== null && items !== void 0 && items.length)) return items;
+  if (!items?.length) return items;
 
   // Give the root item the label of the current active link
   // (or the first item if for some reason there's no match on the selectedId)
@@ -17,12 +17,11 @@ const collapseItems = (items, selectedId) => {
 
   // Linter doesn't like for loops, simulate loop that breaks
   items.some(item => {
-    var _item$items;
     if (isSelected(item)) {
       rootLabel = item.label;
       return true; // break
     }
-    const nestedMatch = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.find(isSelected);
+    const nestedMatch = item.items?.find(isSelected);
     if (nestedMatch) {
       rootLabel = nestedMatch.label;
       return true; // break

package/lib/NavigationBar/resolveItemSelection.js

@@ -7,7 +7,7 @@ const resolveItemSelection = (_ref, selectedId) => {
   const itemId = id ?? label;
 
   // Treat item as selected if it or any nested child matches the selected id
-  const selected = Boolean(selectedId === itemId || (items === null || items === void 0 ? void 0 : items.some(item => resolveItemSelection(item, selectedId).selected)));
+  const selected = Boolean(selectedId === itemId || items?.some(item => resolveItemSelection(item, selectedId).selected));
   return {
     itemId,
     selected

package/lib/OrderedList/OrderedList.js

@@ -38,9 +38,8 @@ const OrderedList = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariantsAndTokens = React.useMemo(() => {
     const addVariantAndTokensToProps = child => {
-      var _child$props, _child$props2;
-      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
+      const existingChildVariants = child.props?.variant ?? {};
+      const existingChildTokens = child.props?.tokens ?? {};
       return /*#__PURE__*/React.cloneElement(child, {
         variant: {
           ...existingChildVariants,

package/lib/SkeletonProvider/SkeletonImage.js

@@ -1,4 +1,3 @@
-var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton } from '@telus-uds/components-base';
@@ -30,9 +29,9 @@ SkeletonImage.displayName = 'SkeletonImage';
 SkeletonImage.propTypes = {
   imgHeight: PropTypes.number,
   rounded: PropTypes.oneOf(['circle', 'corners']),
-  size: (_Skeleton$propTypes = Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
-  sizeIndex: (_Skeleton$propTypes2 = Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
-  sizePixels: (_Skeleton$propTypes3 = Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
+  size: Skeleton.propTypes?.size,
+  sizeIndex: Skeleton.propTypes?.sizeIndex,
+  sizePixels: Skeleton.propTypes?.sizePixels,
   show: PropTypes.bool.isRequired,
   children: PropTypes.node
 };

package/lib/SkeletonProvider/SkeletonTypography.js

@@ -1,4 +1,3 @@
-var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3, _Skeleton$propTypes4, _Skeleton$propTypes5;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton } from '@telus-uds/components-base';
@@ -29,10 +28,10 @@ SkeletonTypography.displayName = 'SkeletonTypography';
 SkeletonTypography.propTypes = {
   show: PropTypes.bool.isRequired,
   children: PropTypes.node,
-  size: (_Skeleton$propTypes = Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
-  sizeIndex: (_Skeleton$propTypes2 = Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
-  sizePixels: (_Skeleton$propTypes3 = Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
-  characters: (_Skeleton$propTypes4 = Skeleton.propTypes) === null || _Skeleton$propTypes4 === void 0 ? void 0 : _Skeleton$propTypes4.characters,
-  lines: (_Skeleton$propTypes5 = Skeleton.propTypes) === null || _Skeleton$propTypes5 === void 0 ? void 0 : _Skeleton$propTypes5.lines
+  size: Skeleton.propTypes?.size,
+  sizeIndex: Skeleton.propTypes?.sizeIndex,
+  sizePixels: Skeleton.propTypes?.sizePixels,
+  characters: Skeleton.propTypes?.characters,
+  lines: Skeleton.propTypes?.lines
 };
 export default SkeletonTypography;

package/lib/Table/Table.js

@@ -62,9 +62,8 @@ const Table = _ref2 => {
   const [tableWidth, setTableWidth] = React.useState(0);
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {
-      var _containerRef$current, _tableRef$current;
-      const containerClientWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientWidth;
-      const responsiveTableWidth = fullWidth ? containerClientWidth : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.clientWidth;
+      const containerClientWidth = containerRef.current?.clientWidth;
+      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current?.clientWidth;
       setContainerWidth(containerClientWidth);
       setTableWidth(responsiveTableWidth);
     };

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -114,7 +114,8 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
               },
               tokens: iconTokens,
               focusable: false,
-              accessibilityLabel: label
+              accessibilityLabel: label,
+              accessibilityRole: "none"
             })
           }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
             tokens: getTokens(),

package/lib/Toast/Toast.js

@@ -1,4 +1,3 @@
-var _withLinkRouter$propT, _withLinkRouter$propT2;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport, getTokensPropType } from '@telus-uds/components-base';
@@ -201,8 +200,8 @@ Toast.propTypes = {
   link: PropTypes.shape({
     href: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
-    LinkRouter: (_withLinkRouter$propT = withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
-    linkRouterProps: (_withLinkRouter$propT2 = withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps
+    LinkRouter: withLinkRouter.propTypes?.LinkRouter,
+    linkRouterProps: withLinkRouter.propTypes?.linkRouterProps
   })
 };
 export default Toast;

package/lib/Video/ControlBar/Controls/VideoButton/VideoButton.js

@@ -45,9 +45,8 @@ const VideoButton = _ref2 => {
     }
   };
   const handleClick = event => {
-    var _rest$onClick;
     event.preventDefault();
-    (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 || _rest$onClick.call(rest, event);
+    rest.onClick?.(event);
   };
   return /*#__PURE__*/_jsxs(StyledButton, {
     "aria-label": label,

package/lib/Video/Video.js

@@ -553,8 +553,8 @@ const Video = _ref3 => {
 
     // This allows playing videos within components that act like
     // links, e.g. `PreviewCard`, `StoryCard`, etc.
-    event === null || event === void 0 || event.preventDefault();
-    event === null || event === void 0 || event.stopPropagation();
+    event?.preventDefault();
+    event?.stopPropagation();
   };
   const handleKeyboard = event => {
     const {

package/lib/VideoPicker/VideoPicker.js

@@ -82,10 +82,9 @@ const VideoListContainer = styled.div`
   ${props => props.isFramed && framedVideoListContainerStyle}
 `;
 const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  var _videoList$;
   let {
     videoList = [],
-    selectedVideo = (_videoList$ = videoList[0]) === null || _videoList$ === void 0 ? void 0 : _videoList$.videoId,
+    selectedVideo = videoList[0]?.videoId,
     frame,
     onStartVideo = () => {},
     onSelectVideo = () => {},

package/lib/VideoPicker/VideoPickerThumbnail.js

@@ -178,9 +178,8 @@ const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   const handleLayout = itemPositions !== undefined ? getItemPositionLayoutHandler(itemPositions.positions, index) : undefined;
   const onKeyPress = event => {
     if (['Space', 'Enter'].includes(event.key)) {
-      var _videoPlayerRef$curre;
       onSelectVideo(video);
-      const splashButton = (_videoPlayerRef$curre = videoPlayerRef.current) === null || _videoPlayerRef$curre === void 0 ? void 0 : _videoPlayerRef$curre.querySelector('button');
+      const splashButton = videoPlayerRef.current?.querySelector('button');
       if (splashButton) splashButton.focus();
     }
   };

package/lib/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-ActionCard, A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, DownloadApp, ExpandCollapse, Feedback, FlexGrid, FileUpload, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Status, Tabs, TabBar, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+ActionCard, A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, DownloadApp, ExpandCollapse, ExpandCollapseMini, Feedback, FlexGrid, FileUpload, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Status, Tabs, TabBar, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/lib/index.js

@@ -9,7 +9,6 @@ export { default as Countdown } from './Countdown';
 export { default as DatePicker } from './DatePicker';
 export { default as Paragraph } from './Paragraph';
 export { default as Span } from './Span';
-export { default as ExpandCollapseMini } from './ExpandCollapseMini';
 export { default as Callout } from './Callout';
 export { default as PriceLockup } from './PriceLockup';
 export { default as Footnote } from './Footnote';

package/lib/utils/scrollToAnchor.js

@@ -6,10 +6,10 @@
  * @param {Function} onAfterScroll - A callback function to be executed after the scroll action is completed.
  */
 const scrollToAnchor = (href, event, onAfterScroll) => {
-  if (href !== null && href !== void 0 && href.startsWith('#')) {
+  if (href?.startsWith('#')) {
     event.preventDefault();
     const target = document.getElementById(href.slice(1));
-    target === null || target === void 0 || target.scrollIntoView({
+    target?.scrollIntoView({
       behavior: 'smooth'
     });
     window.location.hash = href;

package/lib/utils/ssr.js

@@ -23,6 +23,7 @@ const ssrStyles = function () {
     styleGetters = [],
     collectStyles = renderedApp => renderedApp
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let router = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'pages';
   const {
     ServerStyleSheet
   } = styledComponents;
@@ -32,6 +33,12 @@ const ssrStyles = function () {
     sheet.seal();
     return styles;
   };
+  if (router === 'app') {
+    return baseSsrStyles(appName, {
+      styleGetters: [...styleGetters],
+      collectStyles
+    });
+  }
   return baseSsrStyles(appName, {
     styleGetters: [getStyledComponentsStyles, ...styleGetters],
     collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))

package/lib/utils/useOverlaidPosition.js

@@ -159,11 +159,10 @@ const useOverlaidPosition = _ref3 => {
   const readyToShow = Boolean(isShown && sourceRef.current);
   useEffect(() => {
     const handleDimensionsChange = _ref5 => {
-      var _sourceRef$current;
       let {
         window
       } = _ref5;
-      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 || _sourceRef$current.measureInWindow((x, y, width, height) => {
+      sourceRef.current?.measureInWindow((x, y, width, height) => {
         // Could add a debouncer here if there's too many rerenders during gradual resizes
         setWindowDimensions(window);
         setSourceLayout({
@@ -176,8 +175,7 @@ const useOverlaidPosition = _ref3 => {
     };
     let subscription;
     const unsubscribe = () => {
-      var _subscription;
-      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+      if (typeof subscription?.remove === 'function') {
         // React Native >=0.65.0
         subscription.remove();
       } else if (typeof Dimensions.remove === 'function') {

package/package.json

@@ -6,7 +6,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^2.4.0",
+    "@telus-uds/components-base": "^2.5.0",
     "@telus-uds/system-constants": "^2.0.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -81,5 +81,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "3.3.0"
+  "version": "3.4.0"
 }

package/src/Badge/Badge.jsx

@@ -17,6 +17,8 @@ const BadgeContainer = styled.div`
   border: ${({ border }) => border};
   display: inline-flex;
   justify-content: center;
+  align-items: center;
+  height: fit-content;
   padding: ${({ padding }) => padding};
   border-radius: ${({ radius }) => radius};
   width: fit-content;

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -96,12 +96,16 @@ const ExpandCollapse = React.forwardRef(
               return (
                 <ExpandCollapseControl ref={ref}>
                   <ExpandCollapseIconContainer tokens={getTokens()}>
-                    {/* Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants */}
+                    {/*
+                      Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants 
+                      Setting `accessibilityRole` to `none` for `IconButton` to render as a `div` instead of `button` to avoid nested `buttons`
+                    */}
                     <IconButton
                       variant={{ size: 'small' }}
                       tokens={iconTokens}
                       focusable={false}
                       accessibilityLabel={label}
+                      accessibilityRole="none"
                     />
                   </ExpandCollapseIconContainer>
                   <ExpandCollapseTitle tokens={getTokens()}>

package/src/baseExports.js

@@ -28,6 +28,7 @@ export {
   Divider,
   DownloadApp,
   ExpandCollapse,
+  ExpandCollapseMini,
   Feedback,
   FlexGrid,
   FileUpload,

package/src/index.js

@@ -9,7 +9,6 @@ export { default as Countdown } from './Countdown'
 export { default as DatePicker } from './DatePicker'
 export { default as Paragraph } from './Paragraph'
 export { default as Span } from './Span'
-export { default as ExpandCollapseMini } from './ExpandCollapseMini'
 export { default as Callout } from './Callout'
 export { default as PriceLockup } from './PriceLockup'
 export { default as Footnote } from './Footnote'

package/src/utils/ssr.js

@@ -19,7 +19,8 @@ import styledComponents from './theming/styled-components'
  */
 const ssrStyles = (
   appName = 'Allium app',
-  { styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {}
+  { styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {},
+  router = 'pages'
 ) => {
   const { ServerStyleSheet } = styledComponents
   const sheet = new ServerStyleSheet()
@@ -29,6 +30,13 @@ const ssrStyles = (
     return styles
   }
 
+  if (router === 'app') {
+    return baseSsrStyles(appName, {
+      styleGetters: [...styleGetters],
+      collectStyles
+    })
+  }
+
   return baseSsrStyles(appName, {
     styleGetters: [getStyledComponentsStyles, ...styleGetters],
     collectStyles: (renderedApp) => collectStyles(sheet.collectStyles(renderedApp))

package/types/Callout.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType, ElementType, ReactNode } from 'react'
-import type { HTMLAttrs, Variant } from './common'
+import type { HTMLAttrs, Tokens, Variant } from './common'
 
 export interface CalloutProps extends HTMLAttrs {
   children: ReactNode
@@ -7,6 +7,7 @@ export interface CalloutProps extends HTMLAttrs {
   icon?: ElementType
   verticalAlign?: 'top' | 'middle' | 'bottom'
   textAlignToFlex?: 'left' | 'center'
+  tokens?: Tokens
 }
 
 declare const Callout: ComponentType<CalloutProps>

package/types/Tooltip.d.ts

@@ -9,6 +9,7 @@ export interface TooltipProps extends A11yProps, ViewProps {
   copy?: CopyLang
   position?: TooltipPosition
   tokens?: Tokens
+  tooltipButtonTokens?: Tokens
   variant?: Variant
   onPress?: () => void
 }

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base';
-import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    onToggle = () => {},
-    tokens = {},
-    nativeID,
-    initialOpen = false,
-    ...rest
-  } = _ref;
-  const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
-  const handleChange = (openPanels, event) => {
-    if (typeof onToggle === 'function') {
-      const isOpen = openPanels.length > 0;
-      onToggle(event, isOpen);
-    }
-  };
-  return /*#__PURE__*/_jsx(ExpandCollapse, {
-    onChange: handleChange,
-    tokens: tokens,
-    initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
-    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
-      ...expandProps,
-      panelId: expandCollapeMiniPanelId,
-      variant: {
-        mini: true
-      },
-      controlTokens: {
-        // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
-        icon: null,
-        borderColor: 'transparent',
-        textLine: 'none',
-        backgroundColor: 'transparent'
-      }
-      // TODO refactor
-      // eslint-disable-next-line react/no-unstable-nested-components
-      ,
-      control: pressableState => /*#__PURE__*/_jsx(ExpandCollapseMiniControl, {
-        pressableState: pressableState,
-        ...rest
-      }),
-      controlRef: ref,
-      nativeID: nativeID,
-      children: children
-    })
-  });
-});
-ExpandCollapseMini.displayName = 'ExpandCollapseMini';
-ExpandCollapseMini.propTypes = {
-  ...ExpandCollapseMiniControl.propTypes,
-  /**
-   * Function to call on pressing the panel's control, which should open or close the panel.
-   */
-  onToggle: PropTypes.func,
-  /**
-   * ID for DOM element on web
-   */
-  nativeID: PropTypes.string,
-  /**
-   * Children nodes that can be added
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Controls if the panel and the content is opened by default on the first load
-   */
-  initialOpen: PropTypes.bool,
-  tokens: getTokensPropType('ExpandCollapseMini')
-};
-export default ExpandCollapseMini;

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -1,116 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { selectSystemProps, Link, useThemeTokens } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-
-// The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
-// and a more appropriate press area, defer interaction handling to it.
-const presentationOnly = {
-  accessibilityRole: null,
-  // Treat as regular flow content with the Control
-  pointerEvents: 'none',
-  // Stop RNW from stopping clicks from bubbling to Control
-  focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
-};
-const selectLinkTokens = _ref => {
-  let {
-    color,
-    textLine,
-    lineHeight,
-    fontSize
-  } = _ref;
-  return {
-    color,
-    textLine,
-    blockLineHeight: lineHeight,
-    blockFontSize: fontSize
-  };
-};
-const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    pressableState,
-    collapseTitle,
-    expandTitle = collapseTitle,
-    iconPosition = 'right',
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref2;
-  const {
-    expanded,
-    hover,
-    focus
-  } = pressableState || {};
-  // we only want focus outline when focusing, if user is pressing we don't want the border.
-  const {
-    outerBorderColor
-  } = useThemeTokens('Link', {}, {}, {
-    focus
-  });
-  const {
-    size,
-    icon,
-    ...themeTokens
-  } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
-    expanded,
-    focus
-  });
-
-  // Choose hover styles when any part of Control is hoverred
-  const appearance = {
-    ...variant,
-    hover
-  };
-  const getTokens = linkState => {
-    const {
-      hover: linkHover
-    } = linkState || {};
-    const isHovered = hover || linkHover;
-    if (isHovered) {
-      // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
-      return {
-        iconTranslateY: (expanded ? -1 : 1) * size
-      };
-    }
-    return {};
-  };
-  return /*#__PURE__*/_jsx(Link, {
-    variant: appearance,
-    icon: icon,
-    iconPosition: iconPosition,
-    tokens: linkState => ({
-      ...getTokens(linkState),
-      ...selectLinkTokens(themeTokens),
-      outerBorderColor
-    }),
-    ref: ref,
-    ...presentationOnly,
-    ...selectProps(rest),
-    children: expanded ? expandTitle : collapseTitle
-  });
-});
-ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl';
-ExpandCollapseMiniControl.propTypes = {
-  ...selectedSystemPropTypes,
-  ...Link.propTypes,
-  /**
-   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
-   */
-  onPress: PropTypes.func,
-  /**
-   * ExpandCollapseMiniControl title when expanded
-   */
-  expandTitle: PropTypes.string.isRequired,
-  /**
-   * ExpandCollapseMiniControl title when collapsed
-   */
-  collapseTitle: PropTypes.string.isRequired,
-  /**
-   * React Native's `Pressable`'s state object
-   */
-  pressableState: PropTypes.object,
-  variant: PropTypes.object
-};
-export default ExpandCollapseMiniControl;

package/lib/ExpandCollapseMini/index.js

@@ -1,2 +0,0 @@
-import ExpandCollapseMini from './ExpandCollapseMini';
-export default ExpandCollapseMini;

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,72 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base'
-import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
-
-const ExpandCollapseMini = React.forwardRef(
-  ({ children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, ...rest }, ref) => {
-    const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel'
-    const handleChange = (openPanels, event) => {
-      if (typeof onToggle === 'function') {
-        const isOpen = openPanels.length > 0
-        onToggle(event, isOpen)
-      }
-    }
-
-    return (
-      <ExpandCollapse
-        onChange={handleChange}
-        tokens={tokens}
-        initialOpen={initialOpen ? [expandCollapeMiniPanelId] : []}
-      >
-        {(expandProps) => (
-          <ExpandCollapse.Panel
-            {...expandProps}
-            panelId={expandCollapeMiniPanelId}
-            variant={{ mini: true }}
-            controlTokens={{
-              // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
-              icon: null,
-              borderColor: 'transparent',
-              textLine: 'none',
-              backgroundColor: 'transparent'
-            }}
-            // TODO refactor
-            // eslint-disable-next-line react/no-unstable-nested-components
-            control={(pressableState) => (
-              <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
-            )}
-            controlRef={ref}
-            nativeID={nativeID}
-          >
-            {children}
-          </ExpandCollapse.Panel>
-        )}
-      </ExpandCollapse>
-    )
-  }
-)
-ExpandCollapseMini.displayName = 'ExpandCollapseMini'
-
-ExpandCollapseMini.propTypes = {
-  ...ExpandCollapseMiniControl.propTypes,
-  /**
-   * Function to call on pressing the panel's control, which should open or close the panel.
-   */
-  onToggle: PropTypes.func,
-  /**
-   * ID for DOM element on web
-   */
-  nativeID: PropTypes.string,
-  /**
-   * Children nodes that can be added
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Controls if the panel and the content is opened by default on the first load
-   */
-  initialOpen: PropTypes.bool,
-  tokens: getTokensPropType('ExpandCollapseMini')
-}
-
-export default ExpandCollapseMini

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -1,104 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { selectSystemProps, Link, useThemeTokens } from '@telus-uds/components-base'
-import { htmlAttrs } from '../utils'
-
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
-
-// The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
-// and a more appropriate press area, defer interaction handling to it.
-const presentationOnly = {
-  accessibilityRole: null, // Treat as regular flow content with the Control
-  pointerEvents: 'none', // Stop RNW from stopping clicks from bubbling to Control
-  focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
-}
-
-const selectLinkTokens = ({ color, textLine, lineHeight, fontSize }) => ({
-  color,
-  textLine,
-  blockLineHeight: lineHeight,
-  blockFontSize: fontSize
-})
-
-const ExpandCollapseMiniControl = React.forwardRef(
-  (
-    {
-      pressableState,
-      collapseTitle,
-      expandTitle = collapseTitle,
-      iconPosition = 'right',
-      tokens,
-      variant = {},
-      ...rest
-    },
-    ref
-  ) => {
-    const { expanded, hover, focus } = pressableState || {}
-    // we only want focus outline when focusing, if user is pressing we don't want the border.
-    const { outerBorderColor } = useThemeTokens('Link', {}, {}, { focus })
-    const { size, icon, ...themeTokens } = useThemeTokens(
-      'ExpandCollapseMiniControl',
-      tokens,
-      variant,
-      { expanded, focus }
-    )
-
-    // Choose hover styles when any part of Control is hoverred
-    const appearance = { ...variant, hover }
-
-    const getTokens = (linkState) => {
-      const { hover: linkHover } = linkState || {}
-      const isHovered = hover || linkHover
-      if (isHovered) {
-        // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
-        return { iconTranslateY: (expanded ? -1 : 1) * size }
-      }
-
-      return {}
-    }
-
-    return (
-      <Link
-        variant={appearance}
-        icon={icon}
-        iconPosition={iconPosition}
-        tokens={(linkState) => ({
-          ...getTokens(linkState),
-          ...selectLinkTokens(themeTokens),
-          outerBorderColor
-        })}
-        ref={ref}
-        {...presentationOnly}
-        {...selectProps(rest)}
-      >
-        {expanded ? expandTitle : collapseTitle}
-      </Link>
-    )
-  }
-)
-
-ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl'
-
-ExpandCollapseMiniControl.propTypes = {
-  ...selectedSystemPropTypes,
-  ...Link.propTypes,
-  /**
-   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
-   */
-  onPress: PropTypes.func,
-  /**
-   * ExpandCollapseMiniControl title when expanded
-   */
-  expandTitle: PropTypes.string.isRequired,
-  /**
-   * ExpandCollapseMiniControl title when collapsed
-   */
-  collapseTitle: PropTypes.string.isRequired,
-  /**
-   * React Native's `Pressable`'s state object
-   */
-  pressableState: PropTypes.object,
-  variant: PropTypes.object
-}
-
-export default ExpandCollapseMiniControl

package/src/ExpandCollapseMini/index.js

@@ -1,3 +0,0 @@
-import ExpandCollapseMini from './ExpandCollapseMini'
-
-export default ExpandCollapseMini