@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/{Ribbon → esm/Ribbon}/Ribbon.js

@@ -1,135 +1,109 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const RibbonWrapper = styled.div`
-  width: fit-content;
-  position: ${_ref => {
+const RibbonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Ribbon__RibbonWrapper",
+  componentId: "components-web__sc-186270k-0"
+})(["width:fit-content;position:", ";z-index:1;left:", ";top:", ";"], _ref => {
   let {
     left,
     top
   } = _ref;
   return left ?? top ? 'absolute' : 'relative';
-}};
-  z-index: 1;
-  left: ${_ref2 => {
+}, _ref2 => {
   let {
     left
   } = _ref2;
   return left && `${left}px`;
-}};
-  top: ${_ref3 => {
+}, _ref3 => {
   let {
     top
   } = _ref3;
   return top && `${top}px`;
-}};
-`;
-const RibbonContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  background: ${_ref4 => {
+});
+const RibbonContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Ribbon__RibbonContainer",
+  componentId: "components-web__sc-186270k-1"
+})(["display:flex;justify-content:center;background:", ";padding:", ";border-radius:", ";width:fit-content;box-shadow:", ";border-bottom-right-radius:", ";border-bottom-left-radius:", ";"], _ref4 => {
   let {
     backgroundColor
   } = _ref4;
   return backgroundColor;
-}};
-  padding: ${_ref5 => {
+}, _ref5 => {
   let {
     padding
   } = _ref5;
   return `${padding}`;
-}};
-  border-radius: ${_ref6 => {
+}, _ref6 => {
   let {
     borderRadius
   } = _ref6;
   return borderRadius;
-}};
-  width: fit-content;
-  box-shadow: ${_ref7 => {
+}, _ref7 => {
   let {
     boxShadow,
     shouldWrap
   } = _ref7;
   return shouldWrap && boxShadow;
-}};
-  border-bottom-right-radius: ${_ref8 => {
+}, _ref8 => {
   let {
     borderRadiusBottomLeft
   } = _ref8;
   return borderRadiusBottomLeft;
-}};
-  border-bottom-left-radius: ${_ref9 => {
+}, _ref9 => {
   let {
     borderRadiusBottomRight
   } = _ref9;
   return borderRadiusBottomRight;
-}};
-`;
-const RibbonCurve = styled.div`
-  background: ${_ref10 => {
+});
+const RibbonCurve = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Ribbon__RibbonCurve",
+  componentId: "components-web__sc-186270k-2"
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
   let {
     curveBackgroundColor
   } = _ref10;
   return curveBackgroundColor;
-}};
-  width: ${_ref11 => {
+}, _ref11 => {
   let {
     curveWidth
   } = _ref11;
   return curveWidth;
-}};
-  height: ${_ref12 => {
+}, _ref12 => {
   let {
     curveHeight
   } = _ref12;
   return curveHeight;
-}};
-  margin-top: -${_ref13 => {
+}, _ref13 => {
   let {
     curveMarginTop
   } = _ref13;
   return curveMarginTop;
-}};
-  border-radius: 0 0 0 100%;
-  position: relative;
-  z-index: -1;
-  overflow: hidden;
-  &::after {
-    content: '';
-    border-bottom-left-radius: ${_ref14 => {
+}, _ref14 => {
   let {
     curveAfterRadius
   } = _ref14;
   return curveAfterRadius;
-}};
-    position: absolute;
-    height: ${_ref15 => {
+}, _ref15 => {
   let {
     curveAfterHeight
   } = _ref15;
   return curveAfterHeight;
-}};
-    background: ${_ref16 => {
+}, _ref16 => {
   let {
     curveAfterBackgroundColor
   } = _ref16;
   return curveAfterBackgroundColor;
-}};
-    width: ${_ref17 => {
+}, _ref17 => {
   let {
     curveAfterWidth
   } = _ref17;
   return curveAfterWidth;
-}};
-  }
-`;
+});
 const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     children,

package/lib/{SkeletonProvider → esm/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/esm/SkeletonProvider/SkeletonTypography.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Skeleton } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SkeletonTypography = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    show,
+    size,
+    sizeIndex,
+    sizePixels,
+    characters,
+    lines,
+    children
+  } = _ref;
+  if (!show) {
+    return children;
+  }
+  return /*#__PURE__*/_jsx(Skeleton, {
+    size: size,
+    sizeIndex: sizeIndex,
+    sizePixels: sizePixels,
+    characters: characters,
+    lines: lines,
+    ref: ref
+  });
+});
+SkeletonTypography.displayName = 'SkeletonTypography';
+SkeletonTypography.propTypes = {
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  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/{Span → esm/Span}/Span.js

@@ -1,18 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, useTypographyTheme, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs, useTypographyTheme } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledSpan = styled.span`${_ref => {
+const StyledSpan = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Span__StyledSpan",
+  componentId: "components-web__sc-o7sihn-0"
+})(["", "};"], _ref => {
   let {
     flex
   } = _ref;
   return flex ? 'display: inline-flex' : '';
-}}};`;
+});
 
 /**
  * Text as an HTML ```<span>``` element.

package/lib/{Spinner → esm/Spinner}/Spinner.js

@@ -2,15 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, useScrollBlocking, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { Portal } from '@gorhom/portal';
+import styled from 'styled-components';
 import SpinnerContent from './SpinnerContent';
-import { htmlAttrs, media, styledComponents } from '../utils';
+import { htmlAttrs, media } from '../utils';
 import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const SpinnerContainer = styled.div(_ref => {
+const SpinnerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__SpinnerContainer",
+  componentId: "components-web__sc-116rqck-0"
+})(_ref => {
   let {
     inline,
     fullScreen
@@ -29,13 +30,19 @@ const SpinnerContainer = styled.div(_ref => {
     })
   };
 });
-const ContentOverlay = styled.div({
+const ContentOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__ContentOverlay",
+  componentId: "components-web__sc-116rqck-1"
+})({
   position: 'absolute',
   width: '100%',
   height: '100%',
   zIndex: BACKDROP_Z_INDEX
 });
-const FullscreenOverlay = styled.div(_ref2 => {
+const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__FullscreenOverlay",
+  componentId: "components-web__sc-116rqck-2"
+})(_ref2 => {
   let {
     fullScreenOverLayBackground
   } = _ref2;
@@ -49,7 +56,10 @@ const FullscreenOverlay = styled.div(_ref2 => {
     backgroundColor: fullScreenOverLayBackground
   };
 });
-const OpaqueContainer = styled.div({
+const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__OpaqueContainer",
+  componentId: "components-web__sc-116rqck-3"
+})({
   opacity: BACKDROP_OPACITY
 });
 const recursiveMap = (children, fn) => React.Children.map(children, child => {

package/lib/{Spinner → esm/Spinner}/SpinnerContent.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ActivityIndicator, StackView, Typography, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
 import { BACKDROP_Z_INDEX, LARGE } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Container = styled.div(_ref => {
+const Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpinnerContent__Container",
+  componentId: "components-web__sc-1c8bd8e-0"
+})(_ref => {
   let {
     overlay
   } = _ref;

package/lib/{StoryCard → esm/StoryCard}/StoryCard.js

@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box, Divider, PressableCardBase, selectSystemProps, Spacer, StackView, StackWrap, Typography, hrefAttrsProp, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useThemeTokens, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 
 // Passes React Native-oriented system props through UDS PressableCardBase
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 
 // Stop changes to the card's inner border width causing the size and
 // apparent position of the full bleed image to change.
-const FullBleedOffsetOuter = styled.div(_ref => {
+const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoryCard__FullBleedOffsetOuter",
+  componentId: "components-web__sc-yhvivu-0"
+})(_ref => {
   let {
     borderOffset
   } = _ref;
@@ -22,7 +22,10 @@ const FullBleedOffsetOuter = styled.div(_ref => {
     marginTop: borderOffset * 2
   };
 });
-const FullBleedOffsetInner = styled.div(_ref2 => {
+const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoryCard__FullBleedOffsetInner",
+  componentId: "components-web__sc-yhvivu-1"
+})(_ref2 => {
   let {
     borderOffset
   } = _ref2;

package/lib/{Table → esm/Table}/Cell.js

@@ -1,13 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+import styled, { css } from 'styled-components';
 import { useTableContext } from './Table';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled,
-  css
-} = styledComponents;
 const HEADER_TYPE = {
   HEADING: 'heading',
   SUBHEADING: 'subHeading',
@@ -19,28 +15,9 @@ const stickyStyles = _ref => {
     stickyBackgroundColor,
     type
   } = _ref;
-  return css`
-  position: sticky;
-  left: 0; // needed for sticky to work
-  z-index: 2;
-  clip-path: inset(0 -8px 0 0); // use clip path to cut off the shadow rendered below
-  // Override default cell background with stickyBackgroundColor with an exception to subheading and heading
-  ${type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined}
-  &::before {
-    // use a pseudo element for the sticky shadow, since we already use shadows for inner cells border
-    content: '';
-    box-shadow: ${cellStickyShadow};
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-  }
-`;
+  return css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);", " &::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
 };
-const sharedStyles = css`
-  ${_ref2 => {
+const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
   let {
     isSticky,
     align,
@@ -54,37 +31,29 @@ const sharedStyles = css`
     stickyBackgroundColor,
     type
   } = _ref2;
-  return css`
-    text-align: ${align};
-    min-width: ${cellMinWidth}px;
-    padding: ${cellPaddingTop}px ${cellPaddingRight}px ${cellPaddingBottom}px ${cellPaddingLeft}px;
-    background-color: ${cellBackground};
-    ${isSticky && stickyStyles({
+  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
     type,
     cellStickyShadow,
     stickyBackgroundColor
-  })};
-  `;
-}}
-`;
-const createStyledCell = htmlElement => styled[htmlElement]`
-  ${sharedStyles};
-  box-shadow: ${_ref3 => {
+  }));
+});
+const createStyledCell = htmlElement => styled[htmlElement].withConfig({
+  displayName: "Cell__createStyledCell",
+  componentId: "components-web__sc-ltgfic-0"
+})(["", ";box-shadow:", ";", ""], sharedStyles, _ref3 => {
   let {
     cellBoxShadowColor,
     type
   } = _ref3;
   return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
-}};
-  ${_ref4 => {
+}, _ref4 => {
   let {
     display
   } = _ref4;
   return display && `*:not(:empty) {
     display: ${display};
   }`;
-}}
-`;
+});
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
 const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
@@ -99,7 +68,8 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     text,
     isScrollable: isTableScrollable,
     tokens: tableTokens,
-    spacing
+    spacing,
+    variant
   } = useTableContext();
   const themeTokens = {
     ...tableTokens,
@@ -124,7 +94,8 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   } = useThemeTokens('Table', themeTokens, {
     spacing,
     type,
-    text
+    text,
+    ...variant
   });
   const sharedProps = {
     align,

package/lib/esm/Table/Row.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useTableContext } from './Table';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledTR = /*#__PURE__*/styled.tr.withConfig({
+  displayName: "Row__StyledTR",
+  componentId: "components-web__sc-6pbb9a-0"
+})(["&:hover{background-color:", " !important;}"], _ref => {
+  let {
+    rowHoverBackgroundColor
+  } = _ref;
+  return rowHoverBackgroundColor;
+});
+const Row = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    children
+  } = _ref2;
+  const {
+    themeTokens
+  } = useTableContext();
+  return /*#__PURE__*/_jsx(StyledTR, {
+    ref: ref,
+    rowHoverBackgroundColor: themeTokens?.rowHoverBackgroundColor,
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
+      isFirstInRow: index === 0
+    }))
+  });
+});
+Row.displayName = 'Row';
+Row.propTypes = {
+  children: PropTypes.node
+};
+export default Row;

package/lib/{Table → esm/Table}/Table.js

@@ -2,28 +2,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, useSafeLayoutEffect, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import throttle from 'lodash.throttle';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledContainer = styled.div`
-  overflow: auto;
-  padding-bottom: ${props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0};
-`;
-const StyledTable = styled.table`
-  margin: 0;
-  padding: 0;
-  width: ${_ref => {
+const StyledContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Table__StyledContainer",
+  componentId: "components-web__sc-10d9q3m-0"
+})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0);
+const StyledTable = /*#__PURE__*/styled.table.withConfig({
+  displayName: "Table__StyledTable",
+  componentId: "components-web__sc-10d9q3m-1"
+})(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
   let {
     fullWidth,
     tableWidth
   } = _ref;
   return fullWidth ? '100%' : `${tableWidth}px`;
-}};
-  border: ${props => `${props.borderWidth}px solid ${props.borderColor}`};
-`;
+}, props => `${props.borderWidth}px solid ${props.borderColor}`);
 const TableContext = /*#__PURE__*/React.createContext({});
 export const useTableContext = () => React.useContext(TableContext);
 
@@ -51,20 +47,20 @@ const Table = _ref2 => {
     variant,
     ...rest
   } = _ref2;
+  const themeTokens = useThemeTokens('Table', tokens, variant);
   const {
     tablePaddingBottom,
     borderColor,
     borderWidth
-  } = useThemeTokens('Table', tokens, variant);
+  } = themeTokens;
   const containerRef = React.useRef();
   const tableRef = React.useRef();
   const [containerWidth, setContainerWidth] = React.useState(0);
   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);
     };
@@ -91,7 +87,9 @@ const Table = _ref2 => {
         text,
         isScrollable,
         tokens,
-        spacing
+        spacing,
+        variant,
+        themeTokens
       },
       children: /*#__PURE__*/_jsx(StyledTable, {
         borderColor: borderColor,

package/lib/{TermsAndConditions → esm/TermsAndConditions}/ExpandCollapse.js

@@ -1,19 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ExpandCollapse as ExpandCollapseBase, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
-const ExpandCollapseControl = styled.div({
+const ExpandCollapseControl = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ExpandCollapse__ExpandCollapseControl",
+  componentId: "components-web__sc-1l2mmq7-0"
+})({
   alignItems: 'center',
   cursor: 'pointer',
   display: 'flex',
   flex: 1,
   justifyContent: 'flex-start'
 });
-const ExpandCollapseIconContainer = styled.div(_ref => {
+const ExpandCollapseIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ExpandCollapse__ExpandCollapseIconContainer",
+  componentId: "components-web__sc-1l2mmq7-1"
+})(_ref => {
   let {
     tokens
   } = _ref;
@@ -25,7 +28,10 @@ const ExpandCollapseIconContainer = styled.div(_ref => {
     width: tokens.expandIconContainerWidth
   };
 });
-const ExpandCollapseTitle = styled.h4(_ref2 => {
+const ExpandCollapseTitle = /*#__PURE__*/styled.h4.withConfig({
+  displayName: "ExpandCollapse__ExpandCollapseTitle",
+  componentId: "components-web__sc-1l2mmq7-2"
+})(_ref2 => {
   let {
     tokens
   } = _ref2;
@@ -114,7 +120,8 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
               },
               tokens: iconTokens,
               focusable: false,
-              accessibilityLabel: label
+              accessibilityLabel: label,
+              accessibilityRole: "none"
             })
           }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
             tokens: getTokens(),