@thecb/components 4.2.7-beta.1 → 4.2.7-beta.10

package/dist/index.cjs.js

@@ -6481,7 +6481,7 @@ function _templateObject2$2() {
 }
 
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  overflow: ", ";\n  box-sizing: border-box;\n"]);
+  var data = _taggedTemplateLiteral(["\n  overflow: ", ";\n  box-sizing: border-box;\n  justify-self: ", ";\n  align-self: ", ";\n  flex-grow: ", ";\n  ", ";\n"]);
 
   _templateObject$3 = function _templateObject() {
     return data;
@@ -6499,27 +6499,39 @@ var ClusterWrapper = styled__default(function (_ref) {
 })(_templateObject$3(), function (_ref2) {
   var overflow = _ref2.overflow;
   return overflow ? "visible" : "hidden";
+}, function (_ref3) {
+  var justifySelf = _ref3.justifySelf;
+  return justifySelf;
+}, function (_ref4) {
+  var alignSelf = _ref4.alignSelf;
+  return alignSelf;
+}, function (_ref5) {
+  var flexGrow = _ref5.flexGrow;
+  return flexGrow;
+}, function (_ref6) {
+  var extraStyles = _ref6.extraStyles;
+  return extraStyles;
 });
-var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref3) {
-  var nowrap = _ref3.nowrap;
+var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref7) {
+  var nowrap = _ref7.nowrap;
   return nowrap ? "nowrap" : "wrap";
-}, function (_ref4) {
-  var justify = _ref4.justify;
+}, function (_ref8) {
+  var justify = _ref8.justify;
   return justify;
-}, function (_ref5) {
-  var align = _ref5.align;
+}, function (_ref9) {
+  var align = _ref9.align;
   return align;
-}, function (_ref6) {
-  var childGap = _ref6.childGap;
+}, function (_ref10) {
+  var childGap = _ref10.childGap;
   return childGap;
-}, function (_ref7) {
-  var minHeight = _ref7.minHeight;
+}, function (_ref11) {
+  var minHeight = _ref11.minHeight;
   return minHeight;
-}, function (_ref8) {
-  var minWidth = _ref8.minWidth;
+}, function (_ref12) {
+  var minWidth = _ref12.minWidth;
   return minWidth;
-}, function (_ref9) {
-  var childGap = _ref9.childGap;
+}, function (_ref13) {
+  var childGap = _ref13.childGap;
   return childGap;
 });
 
@@ -6541,12 +6553,21 @@ var Cluster = function Cluster(_ref) {
       nowrap = _ref.nowrap,
       _ref$overflow = _ref.overflow,
       overflow = _ref$overflow === void 0 ? false : _ref$overflow,
+      justifySelf = _ref.justifySelf,
+      alignSelf = _ref.alignSelf,
+      flexGrow = _ref.flexGrow,
+      extraStyles = _ref.extraStyles,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["justify", "align", "childGap", "minHeight", "minWidth", "nowrap", "overflow", "children"]);
+      rest = _objectWithoutProperties(_ref, ["justify", "align", "childGap", "minHeight", "minWidth", "nowrap", "overflow", "justifySelf", "alignSelf", "flexGrow", "extraStyles", "children"]);
 
   return /*#__PURE__*/React__default.createElement(ClusterWrapper, _extends({
     overflow: overflow
-  }, rest), /*#__PURE__*/React__default.createElement(ClusterInnerWrapper, {
+  }, rest, {
+    justifySelf: justifySelf,
+    alignSelf: alignSelf,
+    flexGrow: flexGrow,
+    extraStyles: extraStyles
+  }), /*#__PURE__*/React__default.createElement(ClusterInnerWrapper, {
     justify: justify,
     align: align,
     childGap: childGap,
@@ -6898,7 +6919,7 @@ function _templateObject3$2() {
 }
 
 function _templateObject2$4() {
-  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: ", ";\n  margin: ", ";\n\n  > * {\n    flex-grow: 1;\n    ", ";\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: ", ";\n  margin: ", ";\n  ", "\n\n  > * {\n    flex-grow: 1;\n    ", ";\n    ", "\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"]);
 
   _templateObject2$4 = function _templateObject2() {
     return data;
@@ -6924,22 +6945,28 @@ var SwitcherInnerContainer = styled__default.div(_templateObject2$4(), function
   var childGap = _ref2.childGap;
   return "calc((".concat(childGap, " / 2) * -1)");
 }, function (_ref3) {
-  var maxChildrenOnly = _ref3.maxChildrenOnly,
-      breakpoint = _ref3.breakpoint,
-      childGap = _ref3.childGap;
-  return !maxChildrenOnly ? "flex-basis: calc((".concat(breakpoint, " - (100% - ").concat(childGap, ")) * 999);") : "";
+  var constrainMobile = _ref3.constrainMobile;
+  return constrainMobile && "max-width: 100%; margin-left: 0; margin-right: 0;";
 }, function (_ref4) {
-  var childGap = _ref4.childGap;
-  return "margin: calc(".concat(childGap, " / 2);");
+  var maxChildrenOnly = _ref4.maxChildrenOnly,
+      breakpoint = _ref4.breakpoint,
+      childGap = _ref4.childGap;
+  return !maxChildrenOnly ? "flex-basis: calc((".concat(breakpoint, " - (100% - ").concat(childGap, ")) * 999);") : "";
 }, function (_ref5) {
-  var largeChild = _ref5.largeChild,
-      largeChildSize = _ref5.largeChildSize;
-  return largeChild && largeChildSize ? "> :nth-child(".concat(largeChild, ") {\n      flex-grow: ").concat(largeChildSize, ";\n    }") : "";
+  var childGap = _ref5.childGap;
+  return "margin: calc(".concat(childGap, " / 2);");
 }, function (_ref6) {
-  var maxChildren = _ref6.maxChildren;
-  return maxChildren ? "> :nth-last-child(".concat(maxChildren + 1, "), > :nth-last-child(").concat(maxChildren + 1, ") ~ * {\n      flex-basis: 100%;\n    }") : "";
+  var constrainMobile = _ref6.constrainMobile;
+  return constrainMobile && "margin-left: 0; margin-right: 0;";
 }, function (_ref7) {
-  var extraStyles = _ref7.extraStyles;
+  var largeChild = _ref7.largeChild,
+      largeChildSize = _ref7.largeChildSize;
+  return largeChild && largeChildSize ? "> :nth-child(".concat(largeChild, ") {\n      flex-grow: ").concat(largeChildSize, ";\n    }") : "";
+}, function (_ref8) {
+  var maxChildren = _ref8.maxChildren;
+  return maxChildren ? "> :nth-last-child(".concat(maxChildren + 1, "), > :nth-last-child(").concat(maxChildren + 1, ") ~ * {\n      flex-basis: 100%;\n    }") : "";
+}, function (_ref9) {
+  var extraStyles = _ref9.extraStyles;
   return styled.css(_templateObject3$2(), extraStyles);
 });
 
@@ -6968,6 +6995,11 @@ var SwitcherInnerContainer = styled__default.div(_templateObject2$4(), function
   products/services should share the same width no matter the orientation, otherwise
   one or more cards could be perceived as highlighted or featured in some way. Or
   a set of numbered steps in, for example, a list of items to complete or tasks to do."
+
+  New: Set the "constrainMobile" prop to true in order to prevent switcher content from
+  overflowing the mobile viewport:
+
+    <Switcher constrainMobile={isMobile} />
 */
 
 var Switcher = function Switcher(_ref) {
@@ -6984,7 +7016,9 @@ var Switcher = function Switcher(_ref) {
       padding = _ref$padding === void 0 ? "0" : _ref$padding,
       children = _ref.children,
       extraStyles = _ref.extraStyles,
-      rest = _objectWithoutProperties(_ref, ["breakpoint", "childGap", "largeChild", "largeChildSize", "maxChildren", "maxChildrenOnly", "padding", "children", "extraStyles"]);
+      _ref$constrainMobile = _ref.constrainMobile,
+      constrainMobile = _ref$constrainMobile === void 0 ? false : _ref$constrainMobile,
+      rest = _objectWithoutProperties(_ref, ["breakpoint", "childGap", "largeChild", "largeChildSize", "maxChildren", "maxChildrenOnly", "padding", "children", "extraStyles", "constrainMobile"]);
 
   return /*#__PURE__*/React__default.createElement(SwitcherOuterContainer, null, /*#__PURE__*/React__default.createElement(SwitcherInnerContainer, _extends({
     breakpoint: breakpoint,
@@ -6994,7 +7028,8 @@ var Switcher = function Switcher(_ref) {
     maxChildren: maxChildren,
     maxChildrenOnly: maxChildrenOnly,
     padding: padding,
-    extraStyles: extraStyles
+    extraStyles: extraStyles,
+    constrainMobile: constrainMobile
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null))));
 };
 
@@ -12684,14 +12719,16 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
       _ref2$extraStyles = _ref2.extraStyles,
       extraStyles = _ref2$extraStyles === void 0 ? "" : _ref2$extraStyles,
       tabIndex = _ref2.tabIndex,
-      children = _ref2.children;
+      children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, ["action", "variant", "text", "isLoading", "dataQa", "textExtraStyles", "contentOverride", "extraStyles", "tabIndex", "children"]);
+
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
   var isMobile = themeContext.isMobile;
   var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n    cursor: pointer;\n  ");
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
-  var disabledStyles = "\n    background-clor: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6D717E;\n      outline: none;\n    }\n  ";
-  return /*#__PURE__*/React__default.createElement(Box, {
+  var disabledStyles = "\n    background-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      box-shadow: 0 0 10px #6D717E;\n      outline: none;\n    }\n  ";
+  return /*#__PURE__*/React__default.createElement(Box, _extends({
     variant: variant,
     padding: themeValues.padding,
     minHeight: themeValues.height,
@@ -12708,7 +12745,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
     extraStyles: "margin: 0.5rem; ".concat(extraStyles),
     dataQa: dataQa,
     tabIndex: tabIndex
-  }, contentOverride ? children : /*#__PURE__*/React__default.createElement(Center, {
+  }, rest), contentOverride ? children : /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
     isMobile: isMobile
@@ -13738,6 +13775,93 @@ var IconAdd = function IconAdd() {
   }))))));
 };
 
+var IconQuit = function IconQuit(_ref) {
+  var _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? MINESHAFT_GREY : _ref$fill,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "24px" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "24px" : _ref$height;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    id: "quit",
+    d: "M18.9999989 6.40999946L17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "quitMask",
+    fill: "#fff"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#quit"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    fill: fill,
+    xlinkHref: "#quit"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: fill,
+    mask: "url(#quitMask)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }))));
+};
+
+var IconQuitLarge = function IconQuitLarge(_ref) {
+  var _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? "#091325" : _ref$fill;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "14px",
+    height: "14px",
+    viewBox: "0 0 14 14",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, /*#__PURE__*/React__default.createElement("title", null, "Icon/X"), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("polygon", {
+    id: "quit-large-path-1",
+    points: "18.9999989 6.40999946 17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    id: "quit-large-[D]-Cart---Slideout",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "quit-large-[D]-Cart-Slideout---Standard",
+    transform: "translate(-741.000000, -34.000000)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "quit-large-Close-Icon",
+    transform: "translate(724.000000, 17.000000)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "quit-large-Group",
+    transform: "translate(12.000000, 12.000000)"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "quit-large-mask-2",
+    fill: "white"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#quit-large-path-1"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    id: "quit-large-Fill-2",
+    fill: fill,
+    xlinkHref: "#quit-large-path-1"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#quit-large-mask-2)",
+    fill: fill,
+    id: "quit-large-\u2B91\uD83C\uDFA8"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("rect", {
+    id: "quit-large-\u279D\u270F\uFE0F",
+    x: "0",
+    y: "0",
+    width: "24",
+    height: "24"
+  }))))))));
+};
+
 var TimeoutImage = function TimeoutImage() {
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14818,6 +14942,45 @@ var ShoppingCartIcon = function ShoppingCartIcon() {
   })))));
 };
 
+var TrashIcon = function TrashIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "20px",
+    height: "20px",
+    viewBox: "0 0 20 20",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M15,7 L14,15.5714286 C14,16.3571429 13.25,17 12.3333333,17 L12.3333333,17 L7.66666667,17 C6.75,17 6,16.3571429 6,15.5714286 L6,15.5714286 L5,7 L15,7 Z M12.1428571,3 L13,4 L16,4 L16,6 L4,6 L4,4 L7,4 L7.85714286,3 L12.1428571,3 Z",
+    id: "trash-path-1"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    id: "trash-Icons-/-Small-/-20px-S-/-Trash---Mobile---20px",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "trash-mask-2",
+    fill: "white"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#trash-path-1"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    id: "trash-Mask",
+    fill: themeValues.singleIconColor,
+    fillRule: "nonzero",
+    xlinkHref: "#trash-path-1"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    id: "trash-Path",
+    fill: themeValues.singleIconColor,
+    fillRule: "nonzero",
+    mask: "url(#trash-mask-2)",
+    points: "0 0 20 0 20 20 0 20"
+  })));
+};
+
+var TrashIcon$1 = themeComponent(TrashIcon, "Icons", fallbackValues$2, "primary");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -15172,43 +15335,6 @@ var AlertWarningIcon = function AlertWarningIcon() {
   })))));
 };
 
-var IconQuit = function IconQuit(_ref) {
-  var _ref$fill = _ref.fill,
-      fill = _ref$fill === void 0 ? MINESHAFT_GREY : _ref$fill,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? "24px" : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? "24px" : _ref$height;
-  return /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: width,
-    height: height,
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
-    id: "quit",
-    d: "M18.9999989 6.40999946L17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993z"
-  })), /*#__PURE__*/React__default.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd",
-    stroke: "none",
-    strokeWidth: "1"
-  }, /*#__PURE__*/React__default.createElement("mask", {
-    id: "quitMask",
-    fill: "#fff"
-  }, /*#__PURE__*/React__default.createElement("use", {
-    xlinkHref: "#quit"
-  })), /*#__PURE__*/React__default.createElement("use", {
-    fill: fill,
-    xlinkHref: "#quit"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    fill: fill,
-    mask: "url(#quitMask)"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M0 0H24V24H0z"
-  }))));
-};
-
 var AlertIcons = {
   error: AlertErrorIcon,
   info: AlertInfoIcon,
@@ -34730,7 +34856,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     key: "header",
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    extraStyles: "z-index: 25;"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
@@ -34755,7 +34882,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     initial: initiallyOpen ? "open" : "closed",
     exit: "closed",
     variants: wrapper,
-    extraStyles: "transform-origin: 100% 0;"
+    extraStyles: "transform-origin: 100% 0; overflow-y: hidden;"
   }, children))));
 };
 
@@ -40855,6 +40982,8 @@ exports.HamburgerButton = HamburgerButton;
 exports.Heading = Heading$1;
 exports.HighlightTabRow = HighlightTabRow$1;
 exports.IconAdd = IconAdd;
+exports.IconQuit = IconQuit;
+exports.IconQuitLarge = IconQuitLarge;
 exports.Imposter = Imposter;
 exports.InternalLink = InternalLink;
 exports.Jumbo = Jumbo$1;
@@ -40924,6 +41053,7 @@ exports.Text = Text$1;
 exports.Timeout = Timeout$1;
 exports.TimeoutImage = TimeoutImage;
 exports.ToggleSwitch = ToggleSwitch$1;
+exports.TrashIcon = TrashIcon$1;
 exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.VoidedIcon = VoidedIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.2.7-beta.1",
+  "version": "4.2.7-beta.10",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/alert/Alert.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { AlertIcons, IconQuit } from "../../../deprecated/icons";
+import { AlertIcons } from "../../../deprecated/icons";
+import { IconQuit } from "../icons";
 import { Box, Center, Cluster, Stack, Cover, Sidebar } from "../layouts";
 import Text from "../text";
 import { fallbackValues } from "./Alert.theme";

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -70,7 +70,8 @@ const ButtonWithAction = ({
   contentOverride = false,
   extraStyles = "",
   tabIndex,
-  children
+  children,
+  ...rest
 }) => {
   const themeContext = useContext(ThemeContext);
   const themeValues = createThemeValues(
@@ -101,9 +102,10 @@ const ButtonWithAction = ({
     };
   `;
   const disabledStyles = `
-    background-clor: #6D717E;
+    background-color: #6D717E;
     border-color: #6D717E;
     color: #FFFFFF;
+    cursor: default;
     &:focus {
       box-shadow: 0 0 10px #6D717E;
       outline: none;
@@ -128,6 +130,7 @@ const ButtonWithAction = ({
       extraStyles={`margin: 0.5rem; ${extraStyles}`}
       dataQa={dataQa}
       tabIndex={tabIndex}
+      {...rest}
     >
       {contentOverride ? (
         children

package/src/{deprecated → components/atoms}/icons/IconQuit.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { MINESHAFT_GREY } from "../../constants/colors";
+import { MINESHAFT_GREY } from "../../../constants/colors";
 
-export const IconQuit = ({
+const IconQuit = ({
   fill = MINESHAFT_GREY,
   width = "24px",
   height = "24px"
@@ -30,3 +30,5 @@ export const IconQuit = ({
     </g>
   </svg>
 );
+
+export default IconQuit;

package/src/components/atoms/icons/IconQuitLarge.js

@@ -0,0 +1,61 @@
+import React from "react";
+
+const IconQuitLarge = ({ fill = "#091325" }) => (
+  <svg
+    width="14px"
+    height="14px"
+    viewBox="0 0 14 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <title>Icon/X</title>
+    <defs>
+      <polygon
+        id="quit-large-path-1"
+        points="18.9999989 6.40999946 17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993"
+      ></polygon>
+    </defs>
+    <g
+      id="quit-large-[D]-Cart---Slideout"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="quit-large-[D]-Cart-Slideout---Standard"
+        transform="translate(-741.000000, -34.000000)"
+      >
+        <g
+          id="quit-large-Close-Icon"
+          transform="translate(724.000000, 17.000000)"
+        >
+          <g id="quit-large-Group" transform="translate(12.000000, 12.000000)">
+            <mask id="quit-large-mask-2" fill="white">
+              <use xlinkHref="#quit-large-path-1"></use>
+            </mask>
+            <use
+              id="quit-large-Fill-2"
+              fill={fill}
+              xlinkHref="#quit-large-path-1"
+            ></use>
+            <g mask="url(#quit-large-mask-2)" fill={fill} id="quit-large-⮑🎨">
+              <g>
+                <rect
+                  id="quit-large-➝✏️"
+                  x="0"
+                  y="0"
+                  width="24"
+                  height="24"
+                ></rect>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default IconQuitLarge;

package/src/components/atoms/icons/TrashIcon.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const TrashIcon = ({ themeValues }) => (
+  <svg
+    width="20px"
+    height="20px"
+    viewBox="0 0 20 20"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <path
+        d="M15,7 L14,15.5714286 C14,16.3571429 13.25,17 12.3333333,17 L12.3333333,17 L7.66666667,17 C6.75,17 6,16.3571429 6,15.5714286 L6,15.5714286 L5,7 L15,7 Z M12.1428571,3 L13,4 L16,4 L16,6 L4,6 L4,4 L7,4 L7.85714286,3 L12.1428571,3 Z"
+        id="trash-path-1"
+      ></path>
+    </defs>
+    <g
+      id="trash-Icons-/-Small-/-20px-S-/-Trash---Mobile---20px"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <mask id="trash-mask-2" fill="white">
+        <use xlinkHref="#trash-path-1"></use>
+      </mask>
+      <use
+        id="trash-Mask"
+        fill={themeValues.singleIconColor}
+        fillRule="nonzero"
+        xlinkHref="#trash-path-1"
+      ></use>
+      <polygon
+        id="trash-Path"
+        fill={themeValues.singleIconColor}
+        fillRule="nonzero"
+        mask="url(#trash-mask-2)"
+        points="0 0 20 0 20 20 0 20"
+      ></polygon>
+    </g>
+  </svg>
+);
+
+export default themeComponent(TrashIcon, "Icons", fallbackValues, "primary");

package/src/components/atoms/icons/index.js

@@ -19,6 +19,8 @@ import BankIcon from "./BankIcon";
 import GenericCard from "./GenericCard";
 import PaymentIcon from "./PaymentIcon";
 import IconAdd from "./IconAdd";
+import IconQuit from "./IconQuit";
+import IconQuitLarge from "./IconQuitLarge";
 import TimeoutImage from "./TimeoutImage";
 import AutopayOnIcon from "./AutopayOnIcon";
 import NotFoundIcon from "./NotFoundIcon";
@@ -44,6 +46,7 @@ import ProfileIcon from "./ProfileIcon";
 import GenericCardLarge from "./GenericCardLarge";
 import EmptyCartIcon from "./EmptyCartIcon";
 import ShoppingCartIcon from "./ShoppingCartIcon";
+import TrashIcon from "./TrashIcon";
 
 export {
   AccountsIcon,
@@ -67,6 +70,8 @@ export {
   GenericCard,
   PaymentIcon,
   IconAdd,
+  IconQuit,
+  IconQuitLarge,
   TimeoutImage,
   AutopayOnIcon,
   NotFoundIcon,
@@ -91,5 +96,6 @@ export {
   ProfileIcon,
   GenericCardLarge,
   EmptyCartIcon,
-  ShoppingCartIcon
+  ShoppingCartIcon,
+  TrashIcon
 };

package/src/components/atoms/layouts/Cluster.js

@@ -19,10 +19,21 @@ const Cluster = ({
   minWidth,
   nowrap,
   overflow = false,
+  justifySelf,
+  alignSelf,
+  flexGrow,
+  extraStyles,
   children,
   ...rest
 }) => (
-  <ClusterWrapper overflow={overflow} {...rest}>
+  <ClusterWrapper
+    overflow={overflow}
+    {...rest}
+    justifySelf={justifySelf}
+    alignSelf={alignSelf}
+    flexGrow={flexGrow}
+    extraStyles={extraStyles}
+  >
     <ClusterInnerWrapper
       justify={justify}
       align={align}

package/src/components/atoms/layouts/Cluster.styled.js

@@ -7,6 +7,10 @@ export const ClusterWrapper = styled(({ overflow, ...props }) => (
 ))`
   overflow: ${({ overflow }) => (overflow ? "visible" : "hidden")};
   box-sizing: border-box;
+  justify-self: ${({ justifySelf }) => justifySelf};
+  align-self: ${({ alignSelf }) => alignSelf};
+  flex-grow: ${({ flexGrow }) => flexGrow};
+  ${({ extraStyles }) => extraStyles};
 `;
 
 export const ClusterInnerWrapper = styled.div`

package/src/components/atoms/layouts/Switcher.js

@@ -30,6 +30,11 @@ import {
   products/services should share the same width no matter the orientation, otherwise
   one or more cards could be perceived as highlighted or featured in some way. Or
   a set of numbered steps in, for example, a list of items to complete or tasks to do."
+
+  New: Set the "constrainMobile" prop to true in order to prevent switcher content from
+  overflowing the mobile viewport:
+
+    <Switcher constrainMobile={isMobile} />
 */
 
 const Switcher = ({
@@ -42,6 +47,7 @@ const Switcher = ({
   padding = "0",
   children,
   extraStyles,
+  constrainMobile = false,
   ...rest
 }) => (
   <SwitcherOuterContainer>
@@ -54,6 +60,7 @@ const Switcher = ({
       maxChildrenOnly={maxChildrenOnly}
       padding={padding}
       extraStyles={extraStyles}
+      constrainMobile={constrainMobile}
       {...rest}
     >
       {safeChildren(children, <Fragment />)}

package/src/components/atoms/layouts/Switcher.styled.js

@@ -12,6 +12,8 @@ export const SwitcherInnerContainer = styled.div`
   overflow: hidden;
   padding: ${({ padding }) => padding};
   margin: ${({ childGap }) => `calc((${childGap} / 2) * -1)`};
+  ${({ constrainMobile }) =>
+    constrainMobile && `max-width: 100%; margin-left: 0; margin-right: 0;`}
 
   > * {
     flex-grow: 1;
@@ -20,6 +22,8 @@ export const SwitcherInnerContainer = styled.div`
         ? `flex-basis: calc((${breakpoint} - (100% - ${childGap})) * 999);`
         : ``};
     ${({ childGap }) => `margin: calc(${childGap} / 2);`}
+    ${({ constrainMobile }) =>
+      constrainMobile && `margin-left: 0; margin-right: 0;`}
   }
 
   ${({ largeChild, largeChildSize }) =>

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -79,6 +79,7 @@ const CollapsibleSection = ({
           hoverStyles={`cursor: pointer;`}
           tabIndex="0"
           onKeyDown={handleKeyDown}
+          extraStyles={`z-index: 25;`}
         >
           <Cluster justify="space-between" align="center">
             {customTitle ? (
@@ -113,7 +114,7 @@ const CollapsibleSection = ({
               initial={initiallyOpen ? "open" : "closed"}
               exit="closed"
               variants={wrapper}
-              extraStyles={`transform-origin: 100% 0;`}
+              extraStyles={`transform-origin: 100% 0; overflow-y: hidden;`}
             >
               {children}
             </Motion>

package/src/deprecated/icons/index.js

@@ -13,7 +13,6 @@ import { AlertInfoIcon } from "./AlertInfoIcon";
 import { AlertErrorIcon } from "./AlertErrorIcon";
 import { AlertSuccessIcon } from "./AlertSuccessIcon";
 import { AlertWarningIcon } from "./AlertWarningIcon";
-import { IconQuit } from "./IconQuit";
 
 const AlertIcons = {
   error: AlertErrorIcon,
@@ -33,6 +32,5 @@ export {
   IconNeutral,
   IconValid,
   IconInvalid,
-  AlertIcons,
-  IconQuit
+  AlertIcons
 };