@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

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

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType } from '@telus-uds/components-base';
-import Row from './Row';
+import { TableRow } from './TableRow';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const TableHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens
   } = _ref;
   return /*#__PURE__*/_jsx("thead", {
     ref: ref,
-    children: /*#__PURE__*/_jsx(Row, {
+    children: /*#__PURE__*/_jsx(TableRow, {
       tokens: tokens,
       children: React.Children.map(children, child =>
       /*#__PURE__*/
@@ -21,9 +21,8 @@ const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })
   });
 });
-Header.displayName = 'Header';
-Header.propTypes = {
+TableHeader.displayName = 'TableHeader';
+TableHeader.propTypes = {
   children: PropTypes.node,
   tokens: getTokensPropType('Table')
-};
-export default Header;
+};

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

@@ -4,35 +4,35 @@ 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"
+  displayName: "TableRow__StyledTR",
+  componentId: "components-web__sc-1rnznqr-0"
 })(["&:hover{background-color:", " !important;}border-style:", ";border-color:", ";border-width:", "px;border-top-width:", "px;"], _ref => {
   let {
-    tokens
+    $tokens
   } = _ref;
-  return tokens?.rowHoverBackgroundColor;
+  return $tokens?.rowHoverBackgroundColor;
 }, _ref2 => {
   let {
-    tokens
+    $tokens
   } = _ref2;
-  return tokens?.rowBorderWidth || tokens?.rowBorderTopWidth ? 'solid' : 'none';
+  return $tokens?.rowBorderWidth || $tokens?.rowBorderTopWidth ? 'solid' : 'none';
 }, _ref3 => {
   let {
-    tokens
+    $tokens
   } = _ref3;
-  return tokens?.rowBorderColor;
+  return $tokens?.rowBorderColor;
 }, _ref4 => {
   let {
-    tokens
+    $tokens
   } = _ref4;
-  return `${tokens?.rowBorderWidth}` || 0;
+  return `${$tokens?.rowBorderWidth}` || 0;
 }, _ref5 => {
   let {
-    tokens
+    $tokens
   } = _ref5;
-  return `${tokens?.rowBorderTopWidth}` || tokens?.rowBorderWidth;
+  return `${$tokens?.rowBorderTopWidth}` || $tokens?.rowBorderWidth;
 });
-const Row = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+export const TableRow = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens: rowTokens
@@ -46,14 +46,14 @@ const Row = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   };
   return /*#__PURE__*/_jsx(StyledTR, {
     ref: ref,
-    tokens: mergedTokens,
+    $tokens: mergedTokens,
     children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
       isFirstInRow: index === 0
     }))
   });
 });
-Row.displayName = 'Row';
-Row.propTypes = {
+TableRow.displayName = 'TableRow';
+TableRow.propTypes = {
   tokens: PropTypes.shape({
     borderColor: PropTypes.string,
     topBorderWidth: PropTypes.string,
@@ -63,5 +63,4 @@ Row.propTypes = {
     rowHoverBackgroundColor: PropTypes.string
   }),
   children: PropTypes.node
-};
-export default Row;
+};

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType } from '@telus-uds/components-base';
-import Row from './Row';
+import { TableRow } from './TableRow';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const TableSubHeading = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens
   } = _ref;
-  return /*#__PURE__*/_jsx(Row, {
+  return /*#__PURE__*/_jsx(TableRow, {
     ref: ref,
     tokens: tokens,
     children: React.Children.map(children, child =>
@@ -19,9 +19,8 @@ const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }))
   });
 });
-Header.displayName = 'Header';
-Header.propTypes = {
+TableSubHeading.displayName = 'TableSubHeading';
+TableSubHeading.propTypes = {
   children: PropTypes.node,
   tokens: getTokensPropType('Table')
-};
-export default Header;
+};

package/lib/esm/TermsAndConditions/ExpandCollapse.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ExpandCollapse as ExpandCollapseBase, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
+import { ExpandCollapse as ExpandCollapseBase, ExpandCollapsePanel, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ExpandCollapseControl = /*#__PURE__*/styled.div.withConfig({
@@ -18,14 +18,14 @@ const ExpandCollapseIconContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1l2mmq7-1"
 })(_ref => {
   let {
-    tokens
+    $tokens
   } = _ref;
   return {
-    alignItems: tokens.expandIconContainerAlignItems,
-    justifyContent: tokens.expandIconContainerJustifyContent,
-    marginLeft: `${tokens.expandIconContainerMarginY}px`,
-    marginRight: `${tokens.expandIconContainerMarginY}px`,
-    width: tokens.expandIconContainerWidth
+    alignItems: $tokens.expandIconContainerAlignItems,
+    justifyContent: $tokens.expandIconContainerJustifyContent,
+    marginLeft: `${$tokens.expandIconContainerMarginY}px`,
+    marginRight: `${$tokens.expandIconContainerMarginY}px`,
+    width: $tokens.expandIconContainerWidth
   };
 });
 const ExpandCollapseTitle = /*#__PURE__*/styled.h4.withConfig({
@@ -33,14 +33,14 @@ const ExpandCollapseTitle = /*#__PURE__*/styled.h4.withConfig({
   componentId: "components-web__sc-1l2mmq7-2"
 })(_ref2 => {
   let {
-    tokens
+    $tokens
   } = _ref2;
   return {
-    color: tokens.expandTitleColor,
-    fontFamily: `${tokens.expandTitleFontName}${tokens.expandTitleFontWeight}normal`,
-    fontSize: tokens.expandTitleFontSize,
-    lineHeight: tokens.expandTitleLineHeight,
-    margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
+    color: $tokens.expandTitleColor,
+    fontFamily: `${$tokens.expandTitleFontName}${$tokens.expandTitleFontWeight}normal`,
+    fontSize: $tokens.expandTitleFontSize,
+    lineHeight: $tokens.expandTitleLineHeight,
+    margin: `${$tokens.expandTitleMarginX}px ${$tokens.expandTitleMarginY}px`
   };
 });
 const getIconButtonTokens = _ref3 => {
@@ -63,7 +63,7 @@ const getIconButtonTokens = _ref3 => {
     outerBorderWidth: iconOuterBorderWidth
   };
 };
-const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+export const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     collapseTitle,
@@ -90,7 +90,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     tokens: {
       borderWidth: expandBaseBorderWidth
     },
-    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapseBase.Panel, {
+    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapsePanel, {
       ...expandProps,
       panelId: "ExpandCollapsePanel",
       controlTokens: {
@@ -113,7 +113,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
         return /*#__PURE__*/_jsxs(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/_jsx(ExpandCollapseIconContainer, {
-            tokens: getTokens(),
+            $tokens: getTokens(),
             children: /*#__PURE__*/_jsx(IconButton, {
               variant: {
                 size: 'small'
@@ -124,7 +124,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
               accessibilityRole: "none"
             })
           }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
-            tokens: getTokens(),
+            $tokens: getTokens(),
             children: expanded ? expandTitle : collapseTitle
           })]
         });
@@ -149,5 +149,4 @@ ExpandCollapse.propTypes = {
   expandTitle: PropTypes.string,
   collapseLabel: PropTypes.string,
   expandLabel: PropTypes.string
-};
-export default ExpandCollapse;
+};

package/lib/esm/TermsAndConditions/TermsAndConditions.js

@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens, useViewport, getTokensPropType, useTheme, useResponsiveThemeTokens, createMediaQueryStyles, StyleSheet } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import ExpandCollapse from './ExpandCollapse';
-import OrderedListBase from '../OrderedList/OrderedListBase';
+import { ExpandCollapse } from './ExpandCollapse';
+import { OrderedListBase } from '../OrderedList/OrderedListBase';
+import { OrderedListItemBase } from '../OrderedList/OrderedListItemBase';
 import { htmlAttrs, media, renderStructuredContent } from '../utils';
-import defaultDictionary from './dictionary';
+import { dictionary as defaultDictionary } from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const ContentContainer = /*#__PURE__*/styled.div.withConfig({
@@ -13,14 +14,14 @@ const ContentContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1199epn-0"
 })(_ref => {
   let {
-    tokens
+    $tokens
   } = _ref;
   return {
-    paddingBottom: tokens.contentPaddingBottom,
-    paddingLeft: tokens.contentPaddingLeft,
+    paddingBottom: $tokens.contentPaddingBottom,
+    paddingLeft: $tokens.contentPaddingLeft,
     ...media().from('md').css({
-      paddingBottom: tokens.mdContentPaddingBottom,
-      paddingLeft: tokens.mdContentPaddingLeft
+      paddingBottom: $tokens.mdContentPaddingBottom,
+      paddingLeft: $tokens.mdContentPaddingLeft
     })
   };
 });
@@ -29,11 +30,11 @@ const Ordered = /*#__PURE__*/styled(OrderedListBase).withConfig({
   componentId: "components-web__sc-1199epn-1"
 })(_ref2 => {
   let {
-    tokens
+    $tokens
   } = _ref2;
   return {
     listStylePosition: 'outside',
-    padding: tokens.orderedPadding
+    padding: $tokens.orderedPadding
   };
 });
 const Unordered = /*#__PURE__*/styled.ul.withConfig({
@@ -41,36 +42,36 @@ const Unordered = /*#__PURE__*/styled.ul.withConfig({
   componentId: "components-web__sc-1199epn-2"
 })(_ref3 => {
   let {
-    tokens
+    $tokens
   } = _ref3;
   return {
     listStyleType: 'none',
     margin: 0,
     padding: 0,
-    paddingTop: tokens.unorderedPadding
+    paddingTop: $tokens.unorderedPadding
   };
 });
-const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
+const ListItem = /*#__PURE__*/styled(OrderedListItemBase).withConfig({
   displayName: "TermsAndConditions__ListItem",
   componentId: "components-web__sc-1199epn-3"
 })(_ref4 => {
   let {
-    tokens
+    $tokens
   } = _ref4;
   return {
     display: 'list-item',
     '&::marker': {
-      fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
-      fontSize: tokens.listFontSize,
-      lineHeight: tokens.listLineHeight,
+      fontFamily: `${$tokens.listFontName}${$tokens.listFontWeight}normal`,
+      fontSize: $tokens.listFontSize,
+      lineHeight: $tokens.listLineHeight,
       textAlign: 'end !important'
     },
-    color: tokens.listColor,
-    fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
-    fontSize: tokens.listFontSize,
-    lineHeight: tokens.listLineHeight,
-    marginBottom: tokens.listMarginBottom,
-    marginLeft: tokens.listMarginLeft,
+    color: $tokens.listColor,
+    fontFamily: `${$tokens.listFontName}${$tokens.listFontWeight}normal`,
+    fontSize: $tokens.listFontSize,
+    lineHeight: $tokens.listLineHeight,
+    marginBottom: $tokens.listMarginBottom,
+    marginLeft: $tokens.listMarginLeft,
     wordBreak: 'break-word'
   };
 });
@@ -79,13 +80,13 @@ const NonIndexedContentTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1199epn-4"
 })(_ref5 => {
   let {
-    tokens
+    $tokens
   } = _ref5;
   return {
-    color: tokens.titleColor,
-    fontSize: tokens.titleFontSize,
-    lineHeight: tokens.titleLineHeight,
-    paddingLeft: tokens.titlePaddingLeft
+    color: $tokens.titleColor,
+    fontSize: $tokens.titleFontSize,
+    lineHeight: $tokens.titleLineHeight,
+    paddingLeft: $tokens.titlePaddingLeft
   };
 });
 
@@ -98,7 +99,7 @@ const NonIndexedContentTitle = /*#__PURE__*/styled.div.withConfig({
  * - Responsive display based on breakpoints
  * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
  */
-const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+export const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     copy = 'en',
     indexedContent = [],
@@ -182,22 +183,22 @@ const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       expandLabel: getCopy('expandLabel'),
       ref: ref,
       children: /*#__PURE__*/_jsxs(ContentContainer, {
-        tokens: themeTokens,
+        $tokens: themeTokens,
         children: [hasIndexedContent && /*#__PURE__*/_jsx(Ordered, {
-          tokens: themeTokens,
+          $tokens: themeTokens,
           children: indexedContent.map((contentItem, idx) =>
           /*#__PURE__*/
           // eslint-disable-next-line react/no-array-index-key
           _jsx(ListItem, {
-            tokens: listItemStyles,
-            media: listItemMediaIds,
+            $tokens: listItemStyles,
+            "data-media": listItemMediaIds,
             children: renderStructuredContent(contentItem)
           }, idx))
         }), hasNonIndexedContent && /*#__PURE__*/_jsxs(Box, {
           between: 3,
           children: [/*#__PURE__*/_jsx(NonIndexedContentTitle, {
-            tokens: nonIndexedContentStyles,
-            media: nonIndexedContentMediaIds,
+            $tokens: nonIndexedContentStyles,
+            "data-media": nonIndexedContentMediaIds,
             children: /*#__PURE__*/_jsx(Typography, {
               block: true,
               heading: true,
@@ -210,13 +211,13 @@ const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
               children: getCopy('nonIndexedTitle')
             })
           }), /*#__PURE__*/_jsx(Unordered, {
-            tokens: themeTokens,
+            $tokens: themeTokens,
             children: nonIndexedContent.map((contentItem, idx) =>
             /*#__PURE__*/
             // eslint-disable-next-line react/no-array-index-key
             _jsx(ListItem, {
-              tokens: listItemStyles,
-              media: listItemMediaIds,
+              $tokens: listItemStyles,
+              "data-media": listItemMediaIds,
               children: renderStructuredContent(contentItem)
             }, idx))
           })]
@@ -272,5 +273,4 @@ TermsAndConditions.propTypes = {
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   })
-};
-export default TermsAndConditions;
+};

package/lib/esm/TermsAndConditions/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     headingHide: 'Hide terms and conditions',
     headingView: 'View terms and conditions',

package/lib/esm/Testimonial/Testimonial.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import Image from '../Image';
+import { Image } from '../Image/Image';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -11,12 +11,12 @@ const TestimonialContainer = /*#__PURE__*/styled.figure.withConfig({
   componentId: "components-web__sc-1az53gr-0"
 })(_ref => {
   let {
-    testimonialContainerGap
+    $testimonialContainerGap
   } = _ref;
   return {
     display: 'flex',
     flexDirection: 'column',
-    gap: testimonialContainerGap,
+    gap: $testimonialContainerGap,
     margin: 0
   };
 });
@@ -25,12 +25,12 @@ const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1az53gr-1"
 })(_ref2 => {
   let {
-    quoteContainerGap
+    $quoteContainerGap
   } = _ref2;
   return {
     display: 'flex',
     alignItems: 'center',
-    gap: quoteContainerGap
+    gap: $quoteContainerGap
   };
 });
 const Divider = /*#__PURE__*/styled.div.withConfig({
@@ -38,12 +38,12 @@ const Divider = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1az53gr-2"
 })(_ref3 => {
   let {
-    dividerBorder,
-    dividerBackgroundColor
+    $dividerBorder,
+    $dividerBackgroundColor
   } = _ref3;
   return {
-    height: dividerBorder,
-    background: dividerBackgroundColor,
+    height: $dividerBorder,
+    background: $dividerBackgroundColor,
     width: '100%'
   };
 });
@@ -65,21 +65,20 @@ const Figcaption = /*#__PURE__*/styled.figcaption.withConfig({
   componentId: "components-web__sc-1az53gr-5"
 })(_ref4 => {
   let {
-    figcaptionGap
+    $figcaptionGap
   } = _ref4;
   return {
     display: 'flex',
     alignItems: 'center',
-    gap: figcaptionGap
+    gap: $figcaptionGap
   };
 });
-const Testimonial = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+export const Testimonial = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     showDivider,
     testimonial,
     title,
-    imageSrc,
-    image = imageSrc,
+    image,
     additionalInfo,
     testimonialStyle = 'large',
     tokens,
@@ -123,11 +122,11 @@ const Testimonial = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     return quote;
   };
   return /*#__PURE__*/_jsxs(TestimonialContainer, {
-    testimonialContainerGap: testimonialContainerGap,
+    $testimonialContainerGap: testimonialContainerGap,
     ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsxs(QuoteContainer, {
-      quoteContainerGap: quoteContainerGap,
+      $quoteContainerGap: quoteContainerGap,
       children: [/*#__PURE__*/_jsx(Icon, {
         tokens: {
           color: iconColor
@@ -137,8 +136,8 @@ const Testimonial = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         },
         icon: copy === 'en' ? icon : iconFr
       }), showDivider && /*#__PURE__*/_jsx(Divider, {
-        dividerBackgroundColor: dividerBackgroundColor,
-        dividerBorder: dividerBorder,
+        $dividerBackgroundColor: dividerBackgroundColor,
+        $dividerBorder: dividerBorder,
         role: "separator"
       })]
     }), /*#__PURE__*/_jsx(BlockQuote, {
@@ -156,7 +155,7 @@ const Testimonial = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         children: `${getQuoteTestimonial(true)}${testimonial}${getQuoteTestimonial()}`
       })
     }), (image || title || additionalInfo) && /*#__PURE__*/_jsxs(Figcaption, {
-      figcaptionGap: figcaptionGap,
+      $figcaptionGap: figcaptionGap,
       children: [image && (typeof image === 'string' ? /*#__PURE__*/_jsx(Image, {
         rounded: "circle",
         src: image,
@@ -191,8 +190,8 @@ const Testimonial = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         })]
       })]
     }), showDivider && /*#__PURE__*/_jsx(Divider, {
-      dividerBackgroundColor: dividerBackgroundColor,
-      dividerBorder: dividerBorder,
+      $dividerBackgroundColor: dividerBackgroundColor,
+      $dividerBorder: dividerBorder,
       role: "separator"
     })]
   });
@@ -224,11 +223,5 @@ Testimonial.propTypes = {
   /**
    * The src attribute for the Image component or custom JSX content to render instead
    */
-  image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /**
-   * The src attribute for the `Image` component to be displayed on the testimonial
-   * @deprecated please use the `image` prop instead
-   */
-  imageSrc: PropTypes.string
-};
-export default Testimonial;
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};

package/lib/esm/Toast/Toast.js

@@ -10,32 +10,32 @@ const slideDown = property => function (from, to) {
   let end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : to;
   return keyframes(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
 };
-const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter), transform('color')(props.animationFillColorBefore, props.animationFillColorAfter));
+const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.$animationHeightBefore}px`, `${props.$animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.$animationPaddingBottomBefore}px`, `${props.$animationPaddingBottomAfter}px`), transform('padding-top')(`${props.$animationPaddingTopBefore}px`, `${props.$animationPaddingTopAfter}px`), transform('background')(props.$animationBackgroundColorBefore, props.$animationBackgroundColorAfter), transform('color')(props.$animationColorBefore, props.$animationColorAfter), transform('color')(props.$animationDivColorBefore, props.$animationDivColorAfter), transform('fill')(props.$animationFillColorBefore, props.$animationFillColorAfter), transform('color')(props.$animationFillColorBefore, props.$animationFillColorAfter));
 const ToastContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
 })(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
   let {
-    padding
+    $padding
   } = _ref;
-  return padding;
+  return $padding;
 }, _ref2 => {
   let {
-    padding
+    $padding
   } = _ref2;
-  return padding;
+  return $padding;
 }, _ref3 => {
   let {
-    containerBackgroundColor
+    $containerBackgroundColor
   } = _ref3;
-  return containerBackgroundColor;
+  return $containerBackgroundColor;
 }, _ref4 => {
   let {
-    containerGap
+    $containerGap
   } = _ref4;
-  return containerGap;
+  return $containerGap;
 }, animation);
-const Toast = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+export const Toast = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     toast,
     copy,
@@ -79,22 +79,22 @@ const Toast = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     return null;
   }
   return /*#__PURE__*/_jsxs(ToastContainer, {
-    containerBackgroundColor: containerBackgroundColor,
-    containerGap: containerGap,
-    animationHeightBefore: animationHeightBefore,
-    animationHeightAfter: animationHeightAfter,
-    animationPaddingBottomBefore: animationPaddingBottomBefore,
-    animationPaddingBottomAfter: animationPaddingBottomAfter,
-    animationPaddingTopBefore: animationPaddingTopBefore,
-    animationPaddingTopAfter: animationPaddingTopAfter,
-    animationBackgroundColorBefore: animationBackgroundColorBefore,
-    animationBackgroundColorAfter: animationBackgroundColorAfter,
-    animationColorBefore: animationColorBefore,
-    animationColorAfter: animationColorAfter,
-    animationFillColorBefore: chevronInverseColor,
-    animationFillColorAfter: chevronDefaultColor,
+    $containerBackgroundColor: containerBackgroundColor,
+    $containerGap: containerGap,
+    $animationHeightBefore: animationHeightBefore,
+    $animationHeightAfter: animationHeightAfter,
+    $animationPaddingBottomBefore: animationPaddingBottomBefore,
+    $animationPaddingBottomAfter: animationPaddingBottomAfter,
+    $animationPaddingTopBefore: animationPaddingTopBefore,
+    $animationPaddingTopAfter: animationPaddingTopAfter,
+    $animationBackgroundColorBefore: animationBackgroundColorBefore,
+    $animationBackgroundColorAfter: animationBackgroundColorAfter,
+    $animationColorBefore: animationColorBefore,
+    $animationColorAfter: animationColorAfter,
+    $animationFillColorBefore: chevronInverseColor,
+    $animationFillColorAfter: chevronDefaultColor,
+    $padding: extraTokens.padding,
     ref: ref,
-    ...extraTokens,
     ...selectProps(rest),
     children: [headline && /*#__PURE__*/_jsx(Typography, {
       variant: {
@@ -152,5 +152,4 @@ Toast.propTypes = {
     LinkRouter: withLinkRouter.propTypes?.LinkRouter,
     linkRouterProps: withLinkRouter.propTypes?.linkRouterProps
   })
-};
-export default Toast;
+};