@telus-uds/components-web 3.2.1 → 3.4.0

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.3.0",
+    "@telus-uds/components-base": "^2.5.0",
     "@telus-uds/system-constants": "^2.0.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -14,7 +14,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^3.2.0",
+    "@telus-uds/system-theme-tokens": "^3.3.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -81,5 +81,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "3.2.1"
+  "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/DatePicker/DatePicker.jsx

@@ -24,8 +24,7 @@ import { htmlAttrs, styledComponents } from '../utils'
 const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
-const dateFormat = 'DD / MM / YYYY'
-const dateFormatWithoutSpaces = 'DD/MM/YYYY'
+
 const getResponsiveDaySize = (inline = false, viewport = 'md') => {
   if (viewport === 'xs') {
     return inline ? undefined : 36
@@ -56,8 +55,6 @@ const PortalPositionedContainer = styled.div({
   top: ({ top }) => `${top}px`
 })
 
-const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/
-
 const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
   if (initialVisibleMonth === '' || inputDate instanceof moment) {
     return null
@@ -92,6 +89,7 @@ const DatePicker = React.forwardRef(
       copy = 'en',
       id,
       date,
+      dateFormat = 'DD / MM / YYYY',
       feedback,
       inline = false,
       isDayDisabled,
@@ -106,16 +104,20 @@ const DatePicker = React.forwardRef(
       disabled = false,
       prevTestID = '',
       nextTestID = '',
-      placeholder = 'DD / MM / YYYY',
+      placeholder = dateFormat,
+
       initialVisibleMonth = '',
       ...rest
     },
     ref
   ) => {
     const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined)
+
     const [inputText, setInputText] = React.useState(
       date instanceof moment ? date.format(dateFormat) : ''
     )
+    const dateFormatWithoutSpaces = dateFormat.replace(/\s/g, '')
+
     const textInputRef = React.useRef()
     const prevButtonRef = React.useRef()
     const [datePickerPosition, setDatePickerPosition] = React.useState({ left: 0, top: 0 })
@@ -136,7 +138,7 @@ const DatePicker = React.forwardRef(
       const throttledUpdate = throttle(updateDatePickerPosition, 100, { leading: false })
 
       // Initial call to set the position
-      updateDatePickerPosition()
+      throttledUpdate()
 
       // Register event listeners
       window.addEventListener('resize', throttledUpdate)
@@ -161,7 +163,7 @@ const DatePicker = React.forwardRef(
         setInputDate(date)
         setInputText(date instanceof moment ? date.format(dateFormat) : '')
       }
-    }, [date, inputDate])
+    }, [date, inputDate, dateFormat])
 
     React.useEffect(() => {
       let timeoutId
@@ -241,7 +243,10 @@ const DatePicker = React.forwardRef(
     }
 
     const handleValidation = (inputValidation) => {
-      if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+      const momentDate = moment(inputText, dateFormat, true)
+      const isValidDate = momentDate.isValid()
+
+      if (!isValidDate && inputText !== '') {
         return 'error'
       }
 
@@ -467,8 +472,11 @@ DatePicker.propTypes = {
    */
   date: momentPropTypes.momentObj,
   /**
-   * A detailed description of validation error/success or additional instructions.
-   * Visual variant is determined based on the `validation` prop.
+   * A Moment instance representing the currently selected date, i.e. `moment()`
+   */
+  dateFormat: PropTypes.string,
+  /**
+   * Optional date format for the date input. If not set, the default value will be `DD / MM / YYYY`
    */
   feedback: PropTypes.string,
   /**
@@ -524,7 +532,7 @@ DatePicker.propTypes = {
    */
   nextTestID: PropTypes.string,
   /**
-   * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
+   * Optional placeholder for the date input. If not set, the default value will be equal to the `dateFormat` prop
    */
   placeholder: PropTypes.string,
   /**

package/src/PriceLockup/PriceLockup.jsx

@@ -74,6 +74,10 @@ const StrikeThroughContainer = styled.div`
     position: absolute;
   }
 `
+const TypographyContainer = styled.div`
+  display: flex;
+  padding-top: ${({ paddingTop }) => `${paddingTop || 0}px`};
+`
 
 const selectFootnoteLinkStyles = ({
   footnoteLinkColor,
@@ -154,11 +158,17 @@ const PriceLockup = React.forwardRef(
     const cents = hasCents ? priceString.substring(separatorPosition + 1) : null
 
     const renderTypography = (value, tokens, position) => {
+      const { paddingTop, ...restOfTokens } = tokens
       const customProps =
         position === 'bottom'
           ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
-          : { tokens: { ...tokens, color: fontColor } }
-      return <Typography {...customProps}>{value}</Typography>
+          : { tokens: { ...restOfTokens, color: fontColor } }
+
+      return (
+        <TypographyContainer paddingTop={paddingTop}>
+          <Typography {...customProps}>{value}</Typography>
+        </TypographyContainer>
+      )
     }
 
     const renderCurrencySymbol = () =>

package/src/PriceLockup/tokens.js

@@ -6,12 +6,14 @@ export default ({
   currencySymbolFontSize,
   currencySymbolLineHeight,
   currencySymbolFontWeight,
+  currencySymbolPaddingTop,
   amountFontSize,
   amountLineHeight,
   amountLetterSpacing,
   amountFontWeight,
   centsFontSize,
   centsLineHeight,
+  centsPaddingTop,
   rateFontSize,
   rateLineHeight,
   bottomTextFontSize,
@@ -23,7 +25,8 @@ export default ({
   dollarSign: {
     fontSize: currencySymbolFontSize,
     lineHeight: currencySymbolLineHeight,
-    fontWeight: currencySymbolFontWeight
+    fontWeight: currencySymbolFontWeight,
+    paddingTop: currencySymbolPaddingTop
   },
   amount: {
     color: fontColor,
@@ -32,7 +35,16 @@ export default ({
     letterSpacing: amountLetterSpacing,
     fontWeight: amountFontWeight
   },
-  cents: { fontSize: centsFontSize, lineHeight: centsLineHeight, fontWeight: centsFontWeight },
-  rate: { fontSize: rateFontSize, lineHeight: rateLineHeight, fontWeight: rateFontWeight },
+  cents: {
+    fontSize: centsFontSize,
+    lineHeight: centsLineHeight,
+    fontWeight: centsFontWeight,
+    paddingTop: centsPaddingTop
+  },
+  rate: {
+    fontSize: rateFontSize,
+    lineHeight: rateLineHeight,
+    fontWeight: rateFontWeight
+  },
   bottomText: { fontSize: bottomTextFontSize, lineHeight: bottomTextLineHeight }
 })

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/types/common.d.ts

@@ -154,7 +154,7 @@ export interface PressableState {
 }
 
 // TODO: Make this more specific:
-// https://telus.com/universal-design-system/components/allium/skeleton/#props
+// https://telus.com/universal-design-system/components/allium/Skeleton/#props
 export type SkeletonProps = Record<string, any>
 
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

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;