@telus-uds/components-web 1.4.0 → 1.6.0

package/lib/Table/Cell.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _Table = require("./Table");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const stickyStyles = /*#__PURE__*/(0, _styledComponents.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;}"], _ref => {
+  let {
+    cellStickyShadow
+  } = _ref;
+  return cellStickyShadow;
+});
+const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 => {
+  let {
+    isSticky,
+    cellBoxShadowColor,
+    align,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingBottom,
+    cellPaddingLeft
+  } = _ref2;
+  return (0, _styledComponents.css)(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
+});
+
+const StyledHeading = /*#__PURE__*/_styledComponents.default.th.withConfig({
+  displayName: "Cell__StyledHeading",
+  componentId: "components-web__sc-ltgfic-0"
+})(["", ";", ""], sharedStyles, _ref3 => {
+  let {
+    cellHeadingBackground,
+    cellHeadingBoxShadowColor
+  } = _ref3;
+  return `
+  background-color: ${cellHeadingBackground};
+  box-shadow: inset 0 1px 0 ${cellHeadingBoxShadowColor}, inset 0 -1px 0 ${cellHeadingBoxShadowColor};`;
+});
+
+const StyledSubHeading = /*#__PURE__*/_styledComponents.default.th.withConfig({
+  displayName: "Cell__StyledSubHeading",
+  componentId: "components-web__sc-ltgfic-1"
+})(["", ";background-color:", ";"], sharedStyles, _ref4 => {
+  let {
+    cellSubheadingBackground
+  } = _ref4;
+  return cellSubheadingBackground;
+});
+
+const StyledCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
+  displayName: "Cell__StyledCell",
+  componentId: "components-web__sc-ltgfic-2"
+})(["", ";background-color:", ";"], sharedStyles, _ref5 => {
+  let {
+    cellBackground
+  } = _ref5;
+  return cellBackground;
+});
+
+const StyledRowHeading = /*#__PURE__*/_styledComponents.default.th.withConfig({
+  displayName: "Cell__StyledRowHeading",
+  componentId: "components-web__sc-ltgfic-3"
+})(["", ";background-color:", ";"], sharedStyles, _ref6 => {
+  let {
+    cellRowHeadingBackground
+  } = _ref6;
+  return cellRowHeadingBackground;
+});
+
+const Cell = _ref7 => {
+  let {
+    children,
+    type = 'default',
+    isFirstInRow,
+    align = 'left'
+  } = _ref7;
+  const {
+    text,
+    isScrollable: isTableScrollable,
+    variant,
+    tokens
+  } = (0, _Table.useTableContext)();
+  const {
+    cellHeadingBackground,
+    cellHeadingBoxShadowColor,
+    cellBoxShadowColor,
+    cellSubheadingBackground,
+    cellBackground,
+    cellRowHeadingBackground,
+    cellStickyShadow,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingLeft,
+    cellPaddingBottom
+  } = (0, _componentsBase.useThemeTokens)('Table', tokens, variant);
+  const sharedProps = {
+    align,
+    isSticky: isTableScrollable && isFirstInRow,
+    cellStickyShadow,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingLeft,
+    cellPaddingBottom,
+    cellBoxShadowColor
+  };
+
+  switch (type) {
+    case 'heading':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeading, {
+        scope: "col",
+        cellHeadingBackground: cellHeadingBackground,
+        cellHeadingBoxShadowColor: cellHeadingBoxShadowColor,
+        ...sharedProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            size: 'h4'
+          },
+          children: children
+        })
+      });
+
+    case 'subHeading':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSubHeading, {
+        scope: "col",
+        cellSubheadingBackground: cellSubheadingBackground,
+        ...sharedProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            size: 'h5'
+          },
+          children: children
+        })
+      });
+
+    case 'rowHeading':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledRowHeading, {
+        scope: "row",
+        cellRowHeadingBackground: cellRowHeadingBackground,
+        ...sharedProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            size: text === 'small' ? 'h5' : 'h4'
+          },
+          children: children
+        })
+      });
+
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCell, {
+        cellBackground: cellBackground,
+        ...sharedProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            size: text
+          },
+          children: children
+        })
+      });
+  }
+};
+
+Cell.propTypes = {
+  children: _propTypes.default.node,
+
+  /**
+   * Defines the visual styles of a cell, and whether it should be a `td` or `th` element
+   */
+  type: _propTypes.default.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
+
+  /**
+   * @ignore
+   * Used internally for making the first column sticky
+   */
+  isFirstInRow: _propTypes.default.bool,
+
+  /**
+   * Defines the text alignment within the cell
+   */
+  align: _propTypes.default.oneOf(['left', 'center', 'right'])
+};
+var _default = Cell;
+exports.default = _default;

package/lib/Table/Header.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Row = _interopRequireDefault(require("./Row"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Header = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+      children: _react.default.Children.map(children, child => /*#__PURE__*/(0, _react.cloneElement)(child, {
+        type: 'heading'
+      }))
+    })
+  });
+};
+
+Header.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = Header;
+exports.default = _default;

package/lib/Table/Row.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Row = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+    children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/(0, _react.cloneElement)(child, {
+      isFirstInRow: index === 0
+    }))
+  });
+};
+
+Row.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = Row;
+exports.default = _default;

package/lib/Table/SubHeading.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Row = _interopRequireDefault(require("./Row"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Header = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+    children: _react.default.Children.map(children, child => /*#__PURE__*/(0, _react.cloneElement)(child, {
+      type: 'subHeading'
+    }))
+  });
+};
+
+Header.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = Header;
+exports.default = _default;

package/lib/Table/Table.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableContext = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const StyledContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Table__StyledContainer",
+  componentId: "components-web__sc-10d9q3m-0"
+})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? props.tablePaddingBottom : 0);
+
+const StyledTable = /*#__PURE__*/_styledComponents.default.table.withConfig({
+  displayName: "Table__StyledTable",
+  componentId: "components-web__sc-10d9q3m-1"
+})(["margin:0;padding:0;"]);
+
+const TableContext = /*#__PURE__*/_react.default.createContext({});
+
+const useTableContext = () => (0, _react.useContext)(TableContext);
+/**
+ * Use `Table` to display tabular data.
+ *
+ * - Takes an optional `spacing` variant (compact)
+ * - Available in 2 text styles (medium, small)
+ * - When `Table` exceeds viewport, the first column becomes sticky, enabling horizontal scrolling
+ * - Right-align prices and numbers that display decimal points
+ *
+ * ### Building up a `Table`
+ * - Use `Table.Header` and `Table.Body` as direct children of `Table`
+ * - Use `Table.SubHeading` to render an intermediate data heading row
+ * - Use `Table.Row` and `Table.Cell` to build up the tabular data
+ * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
+ */
+
+
+exports.useTableContext = useTableContext;
+
+const Table = _ref => {
+  let {
+    children,
+    text = 'medium',
+    tokens,
+    variant,
+    ...rest
+  } = _ref;
+  const {
+    tablePaddingBottom
+  } = (0, _componentsBase.useThemeTokens)('Table', tokens, variant);
+  const containerRef = (0, _react.useRef)();
+  const tableRef = (0, _react.useRef)();
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
+  const [tableWidth, setTableWidth] = (0, _react.useState)(0);
+  (0, _componentsBase.useSafeLayoutEffect)(() => {
+    const updateDimensions = () => {
+      setContainerWidth(containerRef.current.clientWidth);
+      setTableWidth(tableRef.current.clientWidth);
+    };
+
+    const throttledUpdateDimensions = (0, _lodash.default)(updateDimensions, 100, {
+      leading: false
+    });
+    updateDimensions(); // a pretty naive way of repeating the measurement after the fonts are loaded
+
+    window.addEventListener('load', updateDimensions);
+    window.addEventListener('resize', throttledUpdateDimensions);
+    return () => {
+      window.removeEventListener('load', updateDimensions);
+      window.removeEventListener('resize', throttledUpdateDimensions);
+    };
+  }, []);
+  const isScrollable = tableWidth > containerWidth;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledContainer, {
+    ref: containerRef,
+    isScrollable: isScrollable,
+    tablePaddingBottom: `${tablePaddingBottom}px`,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContext.Provider, {
+      value: {
+        text,
+        isScrollable,
+        tokens,
+        variant
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
+        cellSpacing: 0,
+        ref: tableRef,
+        children: children
+      })
+    })
+  });
+};
+
+Table.propTypes = { ...selectedSystemPropTypes,
+  children: _propTypes.default.node,
+  text: _propTypes.default.oneOf(['medium', 'small'])
+};
+var _default = Table;
+exports.default = _default;

package/lib/Table/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Table = _interopRequireDefault(require("./Table"));
+
+var _Header = _interopRequireDefault(require("./Header"));
+
+var _Body = _interopRequireDefault(require("./Body"));
+
+var _Row = _interopRequireDefault(require("./Row"));
+
+var _SubHeading = _interopRequireDefault(require("./SubHeading"));
+
+var _Cell = _interopRequireDefault(require("./Cell"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Table.default.Header = _Header.default;
+_Table.default.Body = _Body.default;
+_Table.default.Row = _Row.default;
+_Table.default.SubHeading = _SubHeading.default;
+_Table.default.Cell = _Cell.default;
+var _default = _Table.default;
+exports.default = _default;

package/lib/Toast/Toast.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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");
+
+var _withLinkRouter$propT, _withLinkRouter$propT2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const transform = property => (from, to) => (0, _styledComponents.keyframes)(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
+
+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;}"], 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));
+
+const ToastContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Toast__ToastContainer",
+  componentId: "components-web__sc-p78jdh-0"
+})(["display:flex;justify-content:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+  let {
+    containerBackgroundColor
+  } = _ref;
+  return containerBackgroundColor;
+}, _ref2 => {
+  let {
+    containerGap
+  } = _ref2;
+  return containerGap;
+}, animation);
+
+const Toast = _ref3 => {
+  let {
+    toast,
+    copy,
+    headline,
+    link,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref3;
+  const {
+    containerBackgroundColor,
+    containerGap,
+    animationHeightBefore,
+    animationHeightAfter,
+    animationPaddingBottomBefore,
+    animationPaddingBottomAfter,
+    animationPaddingTopBefore,
+    animationPaddingTopAfter,
+    animationBackgroundColorBefore,
+    animationBackgroundColorAfter,
+    animationColorBefore,
+    animationColorAfter,
+    animationFillColorBefore,
+    animationFillColorAfter
+  } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant);
+
+  if (!toast) {
+    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: animationFillColorBefore,
+    animationFillColorAfter: animationFillColorAfter,
+    ...selectProps(rest),
+    children: [headline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        bold: true,
+        inverse: true
+      },
+      children: headline
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        inverse: true
+      },
+      children: copy
+    }), link && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ChevronLink, {
+      variant: {
+        inverse: true
+      },
+      href: link.href,
+      LinkRouter: link.LinkRouter,
+      linkRouterProps: link.linkRouterProps,
+      children: link.text
+    })]
+  });
+};
+
+Toast.propTypes = { ...selectedSystemPropTypes,
+  toast: _propTypes.default.bool,
+  copy: _propTypes.default.string.isRequired,
+  headline: _propTypes.default.string,
+  link: _propTypes.default.shape({
+    href: _propTypes.default.string.isRequired,
+    text: _propTypes.default.string.isRequired,
+    LinkRouter: (_withLinkRouter$propT = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
+    linkRouterProps: (_withLinkRouter$propT2 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps
+  })
+};
+var _default = Toast;
+exports.default = _default;

package/lib/Toast/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Toast = _interopRequireDefault(require("./Toast"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Toast.default;
+exports.default = _default;