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

package/lib/cjs/TermsAndConditions/ExpandCollapse.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ExpandCollapse = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -25,14 +25,14 @@ const ExpandCollapseIconContainer = /*#__PURE__*/_styledComponents.default.div.w
   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__*/_styledComponents.default.h4.withConfig({
@@ -40,14 +40,14 @@ const ExpandCollapseTitle = /*#__PURE__*/_styledComponents.default.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 => {
@@ -70,7 +70,7 @@ const getIconButtonTokens = _ref3 => {
     outerBorderWidth: iconOuterBorderWidth
   };
 };
-const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const ExpandCollapse = exports.ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     children,
     collapseTitle,
@@ -97,7 +97,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     tokens: {
       borderWidth: expandBaseBorderWidth
     },
-    children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, {
+    children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapsePanel, {
       ...expandProps,
       panelId: "ExpandCollapsePanel",
       controlTokens: {
@@ -120,7 +120,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
-            tokens: getTokens(),
+            $tokens: getTokens(),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
               variant: {
                 size: 'small'
@@ -131,7 +131,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
               accessibilityRole: "none"
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseTitle, {
-            tokens: getTokens(),
+            $tokens: getTokens(),
             children: expanded ? expandTitle : collapseTitle
           })]
         });
@@ -156,5 +156,4 @@ ExpandCollapse.propTypes = {
   expandTitle: _propTypes.default.string,
   collapseLabel: _propTypes.default.string,
   expandLabel: _propTypes.default.string
-};
-var _default = exports.default = ExpandCollapse;
+};

package/lib/cjs/TermsAndConditions/TermsAndConditions.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TermsAndConditions = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _ExpandCollapse = _interopRequireDefault(require("./ExpandCollapse"));
-var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
+var _ExpandCollapse = require("./ExpandCollapse");
+var _OrderedListBase = require("../OrderedList/OrderedListBase");
+var _OrderedListItemBase = require("../OrderedList/OrderedListItemBase");
 var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
@@ -20,27 +21,27 @@ const ContentContainer = /*#__PURE__*/_styledComponents.default.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,
     ...(0, _utils.media)().from('md').css({
-      paddingBottom: tokens.mdContentPaddingBottom,
-      paddingLeft: tokens.mdContentPaddingLeft
+      paddingBottom: $tokens.mdContentPaddingBottom,
+      paddingLeft: $tokens.mdContentPaddingLeft
     })
   };
 });
-const Ordered = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+const Ordered = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.OrderedListBase).withConfig({
   displayName: "TermsAndConditions__Ordered",
   componentId: "components-web__sc-1199epn-1"
 })(_ref2 => {
   let {
-    tokens
+    $tokens
   } = _ref2;
   return {
     listStylePosition: 'outside',
-    padding: tokens.orderedPadding
+    padding: $tokens.orderedPadding
   };
 });
 const Unordered = /*#__PURE__*/_styledComponents.default.ul.withConfig({
@@ -48,36 +49,36 @@ const Unordered = /*#__PURE__*/_styledComponents.default.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__*/(0, _styledComponents.default)(_OrderedListBase.default.Item).withConfig({
+const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListItemBase.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'
   };
 });
@@ -86,13 +87,13 @@ const NonIndexedContentTitle = /*#__PURE__*/_styledComponents.default.div.withCo
   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
   };
 });
 
@@ -105,14 +106,14 @@ const NonIndexedContentTitle = /*#__PURE__*/_styledComponents.default.div.withCo
  * - Responsive display based on breakpoints
  * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
  */
-const TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const TermsAndConditions = exports.TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     copy = 'en',
     indexedContent = [],
     nonIndexedContent = [],
     tokens = {},
     variant = {},
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     ...rest
   } = _ref6;
   const getCopy = (0, _componentsBase.useCopy)({
@@ -182,29 +183,29 @@ const TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) =
       tokens: {
         color: themeTokens.dividerColor
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.ExpandCollapse, {
       collapseTitle: getCopy('headingView'),
       expandTitle: getCopy('headingHide'),
       collapseLabel: getCopy('collapseLabel'),
       expandLabel: getCopy('expandLabel'),
       ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
-        tokens: themeTokens,
+        $tokens: themeTokens,
         children: [hasIndexedContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(Ordered, {
-          tokens: themeTokens,
+          $tokens: themeTokens,
           children: indexedContent.map((contentItem, idx) =>
           /*#__PURE__*/
           // eslint-disable-next-line react/no-array-index-key
           (0, _jsxRuntime.jsx)(ListItem, {
-            tokens: listItemStyles,
-            media: listItemMediaIds,
+            $tokens: listItemStyles,
+            "data-media": listItemMediaIds,
             children: (0, _utils.renderStructuredContent)(contentItem)
           }, idx))
         }), hasNonIndexedContent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
           between: 3,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NonIndexedContentTitle, {
-            tokens: nonIndexedContentStyles,
-            media: nonIndexedContentMediaIds,
+            $tokens: nonIndexedContentStyles,
+            "data-media": nonIndexedContentMediaIds,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
               block: true,
               heading: true,
@@ -217,13 +218,13 @@ const TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) =
               children: getCopy('nonIndexedTitle')
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Unordered, {
-            tokens: themeTokens,
+            $tokens: themeTokens,
             children: nonIndexedContent.map((contentItem, idx) =>
             /*#__PURE__*/
             // eslint-disable-next-line react/no-array-index-key
             (0, _jsxRuntime.jsx)(ListItem, {
-              tokens: listItemStyles,
-              media: listItemMediaIds,
+              $tokens: listItemStyles,
+              "data-media": listItemMediaIds,
               children: (0, _utils.renderStructuredContent)(contentItem)
             }, idx))
           })]
@@ -279,5 +280,4 @@ TermsAndConditions.propTypes = {
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   })
-};
-var _default = exports.default = TermsAndConditions;
+};

package/lib/cjs/TermsAndConditions/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     headingHide: 'Hide terms and conditions',
     headingView: 'View terms and conditions',

package/lib/cjs/Testimonial/Testimonial.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Testimonial = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _Image = _interopRequireDefault(require("../Image"));
+var _Image = require("../Image/Image");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,12 +18,12 @@ const TestimonialContainer = /*#__PURE__*/_styledComponents.default.figure.withC
   componentId: "components-web__sc-1az53gr-0"
 })(_ref => {
   let {
-    testimonialContainerGap
+    $testimonialContainerGap
   } = _ref;
   return {
     display: 'flex',
     flexDirection: 'column',
-    gap: testimonialContainerGap,
+    gap: $testimonialContainerGap,
     margin: 0
   };
 });
@@ -32,12 +32,12 @@ const QuoteContainer = /*#__PURE__*/_styledComponents.default.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__*/_styledComponents.default.div.withConfig({
@@ -45,12 +45,12 @@ const Divider = /*#__PURE__*/_styledComponents.default.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%'
   };
 });
@@ -72,21 +72,20 @@ const Figcaption = /*#__PURE__*/_styledComponents.default.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.default.forwardRef((_ref5, ref) => {
+const Testimonial = exports.Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     showDivider,
     testimonial,
     title,
-    imageSrc,
-    image = imageSrc,
+    image,
     additionalInfo,
     testimonialStyle = 'large',
     tokens,
@@ -130,11 +129,11 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     return quote;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TestimonialContainer, {
-    testimonialContainerGap: testimonialContainerGap,
+    $testimonialContainerGap: testimonialContainerGap,
     ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(QuoteContainer, {
-      quoteContainerGap: quoteContainerGap,
+      $quoteContainerGap: quoteContainerGap,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
         tokens: {
           color: iconColor
@@ -144,8 +143,8 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
         },
         icon: copy === 'en' ? icon : iconFr
       }), showDivider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
-        dividerBackgroundColor: dividerBackgroundColor,
-        dividerBorder: dividerBorder,
+        $dividerBackgroundColor: dividerBackgroundColor,
+        $dividerBorder: dividerBorder,
         role: "separator"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockQuote, {
@@ -163,8 +162,8 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
         children: `${getQuoteTestimonial(true)}${testimonial}${getQuoteTestimonial()}`
       })
     }), (image || title || additionalInfo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Figcaption, {
-      figcaptionGap: figcaptionGap,
-      children: [image && (typeof image === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+      $figcaptionGap: figcaptionGap,
+      children: [image && (typeof image === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.Image, {
         rounded: "circle",
         src: image,
         alt: title,
@@ -198,8 +197,8 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
         })]
       })]
     }), showDivider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
-      dividerBackgroundColor: dividerBackgroundColor,
-      dividerBorder: dividerBorder,
+      $dividerBackgroundColor: dividerBackgroundColor,
+      $dividerBorder: dividerBorder,
       role: "separator"
     })]
   });
@@ -231,11 +230,5 @@ Testimonial.propTypes = {
   /**
    * The src attribute for the Image component or custom JSX content to render instead
    */
-  image: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-  /**
-   * The src attribute for the `Image` component to be displayed on the testimonial
-   * @deprecated please use the `image` prop instead
-   */
-  imageSrc: _propTypes.default.string
-};
-var _default = exports.default = Testimonial;
+  image: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+};

package/lib/cjs/Toast/Toast.js

@@ -3,15 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Toast = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const transform = property => (from, to) => (0, _styledComponents.keyframes)(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
@@ -19,32 +18,32 @@ const slideDown = property => function (from, to) {
   let end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : to;
   return (0, _styledComponents.keyframes)(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
 };
-const animation = props => (0, _styledComponents.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 => (0, _styledComponents.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__*/_styledComponents.default.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.default.forwardRef((_ref5, ref) => {
+const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     toast,
     copy,
@@ -88,22 +87,22 @@ const Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       variant: {
@@ -161,5 +160,4 @@ Toast.propTypes = {
     LinkRouter: _componentsBase.withLinkRouter.propTypes?.LinkRouter,
     linkRouterProps: _componentsBase.withLinkRouter.propTypes?.linkRouterProps
   })
-};
-var _default = exports.default = Toast;
+};