@laerdal/life-react-components 0.0.280-dev.1 → 0.0.280-dev.12.full

package/dist/umd/Banners/Banner.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../icons/systemicons/SystemIcons", "../Button"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../icons/systemicons/SystemIcons", "../Button", "./styles"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../Button"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../Button"), require("./styles"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.SystemIcons, global.Button);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.SystemIcons, global.Button, global.styles);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _SystemIcons, _Button) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _SystemIcons, _Button, _styles2) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -90,20 +90,30 @@
   margin-top: ${props => props.bottom ? 'auto' : '0'};
 
   button:last-child {
-    margin: 0 0 0 auto;
     line-height: 0;
-    cursor: pointer;
-  }
-  button:last-child:hover {
-    margin: 0 0 0 auto;
-    background: ${props => props.hover ? props.hover : _styles.COLORS.primary_20};
+    margin: 0 0 0 8px;
+    ${_styles.BREAKPOINTS.MEDIUM} {
+      margin: 0 0 0 16px;
+    }
+    ${_styles.BREAKPOINTS.LARGE} {
+      margin: 0 0 0 32px;
+    }
+    &.small {
+      margin: 0 0 0 8px;
+    }
+    &.medium {
+      margin: 0 0 0 16px;
+    }
+    &.large {
+      margin: 0 0 0 32px;
+    }
   }
 
   a {
     color: ${props => props.link};
     font-weight: bold;
     text-decoration: none;
-    
+
     &:hover {
       text-decoration: underline;
     }
@@ -113,32 +123,50 @@
   font-style: normal;
   font-weight: normal;
   font-size: 16px;
-  line-height: 140%;
+  line-height: 20px;
 `;
   const BannerCenter = _styledComponents2.default.div`
   color: ${props => props.color};
   font-size: 18px;
   display: flex;
-  justify-content: flex-start;
-  align-items: center;
   width: 100%;
-  margin: 0 8px;
+  margin: 0 6px 0 16px;
   ${_styles.BREAKPOINTS.MEDIUM} {
-    margin: 0 32px;
+    margin: 0 22px 0 32px;
   }
   ${_styles.BREAKPOINTS.LARGE} {
-    margin: 0 56px;
+    margin: 0 46px 0 56px;
+  }
+  &.small {
+    margin: 0 6px 0 16px;
   }
-  ${_styles.BREAKPOINTS.XLARGE} {
-    width: 1120px;
-    margin: 0 auto;
+  &.medium {
+    margin: 0 22px 0 32px;
   }
-  >svg {
-    margin-right:8px;
+  &.large {
+    margin: 0 46px 0 56px;
+  }
+
+  > svg {
+    flex-shrink: 0;
+    margin: 12px 0;
+  }
+`;
+  const ButtonWrapper = _styledComponents2.default.div`
+  margin: 0 0 0 auto;
+  ${props => props.type ? (0, _styles2.getButtonStyle)(props.type) : null};
+`;
+  const BannerContentWrapper = _styledComponents2.default.div`
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  &:not(:first-child) {
+    margin-left: 8px;
   }
 `;
 
   const Banner = ({
+    size,
     type,
     children,
     bottom,
@@ -146,7 +174,8 @@
     linkText,
     link,
     onClose,
-    icon
+    icon,
+    noIcon
   }) => {
     const formatTypeToLowerCase = type?.toLowerCase();
 
@@ -159,20 +188,25 @@
           hover: _styles.COLORS.warning_20,
           bottom: bottom
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.warning_700
-        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.Help, {
+          color: _styles.COLORS.warning_700,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Help, {
           color: _styles.COLORS.warning_700,
           size: "24px"
-        }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
           href: link,
           target: "_blank"
-        }, linkText), onClose && /*#__PURE__*/React.createElement(_Button.Button, {
-          variant: "text",
-          onClick: () => onClose()
+        }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+          type: formatTypeToLowerCase
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          action: () => onClose()
         }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
           color: _styles.COLORS.warning_500,
           size: "24px"
-        }))));
+        })))));
 
       case 'critical':
         return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -180,22 +214,28 @@
           type: _styles.COLORS.critical_100,
           link: _styles.COLORS.critical_700,
           hover: _styles.COLORS.critical_20,
-          bottom: bottom
+          bottom: bottom,
+          className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.critical_700
-        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.Attention, {
+          color: _styles.COLORS.critical_700,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Attention, {
           color: _styles.COLORS.critical_700,
           size: "24px"
-        }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
           href: link,
           target: "_blank"
-        }, linkText), onClose && /*#__PURE__*/React.createElement(_Button.Button, {
-          variant: "text",
-          onClick: () => onClose()
+        }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+          type: formatTypeToLowerCase
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          action: () => onClose()
         }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
           color: _styles.COLORS.critical_500,
           size: "24px"
-        }))));
+        })))));
 
       case 'positive':
         return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -203,22 +243,28 @@
           type: _styles.COLORS.correct_100,
           link: _styles.COLORS.correct_700,
           hover: _styles.COLORS.correct_20,
-          bottom: bottom
+          bottom: bottom,
+          className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.correct_700
-        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.ThumbsUp, {
+          color: _styles.COLORS.correct_700,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.ThumbsUp, {
           color: _styles.COLORS.correct_700,
           size: "24px"
-        }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
           href: link,
           target: "_blank"
-        }, linkText), onClose && /*#__PURE__*/React.createElement(_Button.Button, {
-          variant: "text",
-          onClick: () => onClose()
+        }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+          type: formatTypeToLowerCase
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          action: () => onClose()
         }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
           color: _styles.COLORS.correct_500,
           size: "24px"
-        }))));
+        })))));
 
       default:
         return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -226,26 +272,33 @@
           type: _styles.COLORS.primary_100,
           link: _styles.COLORS.primary_700,
           hover: _styles.COLORS.primary_20,
-          bottom: bottom
+          bottom: bottom,
+          className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.primary_700
-        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.Tip, {
+          color: _styles.COLORS.primary_700,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Tip, {
           color: _styles.COLORS.primary_700,
           size: "24px"
-        }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
           href: link,
           target: "_blank"
-        }, linkText), onClose && /*#__PURE__*/React.createElement(_Button.Button, {
-          variant: "text",
-          onClick: () => onClose()
+        }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+          type: "neutral"
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          action: () => onClose()
         }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
           color: _styles.COLORS.primary_500,
           size: "24px"
-        }))));
+        })))));
     }
   };
 
   Banner.propTypes = {
+    size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
     type: _propTypes2.default.string,
     link: _propTypes2.default.string,
     linkText: _propTypes2.default.string,
@@ -253,7 +306,8 @@
     bottom: _propTypes2.default.bool,
     testId: _propTypes2.default.string,
     icon: _propTypes2.default.node,
-    onClose: _propTypes2.default.func
+    onClose: _propTypes2.default.func,
+    noIcon: _propTypes2.default.bool
   };
   exports.default = Banner;
 });

package/dist/umd/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","primary_20","link","BannerCenter","color","BREAKPOINTS","MEDIUM","LARGE","XLARGE","type","linkText","hover","bottom","testId","icon","onClose","Banner","formatTypeToLowerCase","warning_700","critical_700","correct_700","primary_700"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;AACA;AACA;AACA,QAAMA,eAAe,GAAGC,2BAAOC,GAAiB;AAChD,gBAAiBC,KAAD,IAAyBA,KAAK,CAALA,IAAAA,GAAaA,KAAK,CAAlBA,IAAAA,GAA0BC,eAAOC,WAAa;AACvF;AACA;AACA,WAAWD,eAAOE,KAAM;AACxB,gBAAiBH,KAAD,IAAyBA,KAAK,CAALA,MAAAA,GAAAA,MAAAA,GAAwB,GAAK;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAmBA,KAAD,IAAyBA,KAAK,CAALA,KAAAA,GAAcA,KAAK,CAAnBA,KAAAA,GAA4BC,eAAOG,UAAY;AAC1F;AACA;AACA;AACA,aAAcJ,KAAD,IAAyBA,KAAK,CAACK,IAAM;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA/BA,CAAA;AAkCA,QAAMC,YAAY,GAAGR,2BAAOC,GAAI;AAChC,WAAYC,KAAD,IAAWA,KAAK,CAACO,KAAM;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA,IAAID,oBAAYE,KAAM;AACtB;AACA;AACA,IAAIF,oBAAYG,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AApBA,CAAA;;AAkCA,QAAMQ,MAA4C,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAA2DF,IAAAA;AAA3D,GAAD,KAAuE;AAE1H,UAAMG,qBAAqB,GAAGR,IAAI,EAAlC,WAA8BA,EAA9B;;AACA,YAAA,qBAAA;AACE,WAAA,SAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEX,eAA5C,WAAA;AAAgE,UAAA,IAAI,EAAEA,eAAtE,WAAA;AAA0F,UAAA,KAAK,EAAEA,eAAjG,UAAA;AAAoH,UAAA,MAAM,EAAEc;AAA5H,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAEd,eAAOoB;AAA5B,SAAA,EACIJ,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAM,UAAA,KAAK,EAAEhB,eAAb,WAAA;AAAiC,UAAA,IAAI,EAAC;AAAtC,SAAA,CADlB,EAAA,QAAA,EAAA,UAAA,EAGGI,IAAI,IAAJA,QAAAA,IAAAA,aAAoB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,UAAA,IAAI,EAAP,IAAA;AAAe,UAAA,MAAM,EAAC;AAAtB,SAAA,EAHvB,QAGuB,CAHvB,EAIIa,OAAO,IAAA,aACP,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAQ,UAAA,OAAO,EAAf,MAAA;AAAuB,UAAA,OAAO,EAAE,MAAMA,OAAO;AAA7C,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEjB,eAAd,WAAA;AAAkC,UAAA,IAAI,EAAC;AAAvC,SAAA,CADF,CALJ,CADF,CADF;;AAcF,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEA,eAA5C,YAAA;AAAiE,UAAA,IAAI,EAAEA,eAAvE,YAAA;AAA4F,UAAA,KAAK,EAAEA,eAAnG,WAAA;AAAuH,UAAA,MAAM,EAAEc;AAA/H,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAEd,eAAOqB;AAA5B,SAAA,EACIL,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AAAW,UAAA,KAAK,EAAEhB,eAAlB,YAAA;AAAuC,UAAA,IAAI,EAAC;AAA5C,SAAA,CADlB,EAAA,QAAA,EAAA,UAAA,EAGGI,IAAI,IAAJA,QAAAA,IAAAA,aAAoB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,UAAA,IAAI,EAAP,IAAA;AAAe,UAAA,MAAM,EAAC;AAAtB,SAAA,EAHvB,QAGuB,CAHvB,EAIIa,OAAO,IAAA,aACP,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAQ,UAAA,OAAO,EAAf,MAAA;AAAuB,UAAA,OAAO,EAAE,MAAMA,OAAO;AAA7C,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEjB,eAAd,YAAA;AAAmC,UAAA,IAAI,EAAC;AAAxC,SAAA,CADF,CALJ,CADF,CADF;;AAcF,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEA,eAA5C,WAAA;AAAgE,UAAA,IAAI,EAAEA,eAAtE,WAAA;AAA0F,UAAA,KAAK,EAAEA,eAAjG,UAAA;AAAoH,UAAA,MAAM,EAAEc;AAA5H,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAEd,eAAOsB;AAA5B,SAAA,EACIN,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAU,UAAA,KAAK,EAAEhB,eAAjB,WAAA;AAAqC,UAAA,IAAI,EAAC;AAA1C,SAAA,CADlB,EAAA,QAAA,EAAA,UAAA,EAGGI,IAAI,IAAJA,QAAAA,IAAAA,aAAoB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,UAAA,IAAI,EAAP,IAAA;AAAe,UAAA,MAAM,EAAC;AAAtB,SAAA,EAHvB,QAGuB,CAHvB,EAIIa,OAAO,IAAA,aACP,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAQ,UAAA,OAAO,EAAf,MAAA;AAAuB,UAAA,OAAO,EAAE,MAAMA,OAAO;AAA7C,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEjB,eAAd,WAAA;AAAkC,UAAA,IAAI,EAAC;AAAvC,SAAA,CADF,CALJ,CADF,CADF;;AAcF;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEA,eAA5C,WAAA;AAAgE,UAAA,IAAI,EAAEA,eAAtE,WAAA;AAA0F,UAAA,KAAK,EAAEA,eAAjG,UAAA;AAAoH,UAAA,MAAM,EAAEc;AAA5H,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAEd,eAAOuB;AAA5B,SAAA,EACIP,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAK,UAAA,KAAK,EAAEhB,eAAZ,WAAA;AAAgC,UAAA,IAAI,EAAC;AAArC,SAAA,CADlB,EAAA,QAAA,EAAA,UAAA,EAGGI,IAAI,IAAJA,QAAAA,IAAAA,aAAoB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,UAAA,IAAI,EAAP,IAAA;AAAe,UAAA,MAAM,EAAC;AAAtB,SAAA,EAHvB,QAGuB,CAHvB,EAIIa,OAAO,IAAA,aACP,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAQ,UAAA,OAAO,EAAf,MAAA;AAAuB,UAAA,OAAO,EAAE,MAAMA,OAAO;AAA7C,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEjB,eAAd,WAAA;AAAkC,UAAA,IAAI,EAAC;AAAvC,SAAA,CADF,CALJ,CADF,CADF;AA/CJ;AAHF,GAAA;;;AAVEW,IAAAA,I;AACAP,IAAAA,I;AACAQ,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,M;AACAC,IAAAA,M;AACAC,IAAAA,I;AACAC,IAAAA,O;;oBAsEF,M","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Tip, Attention, ThumbsUp, Help, Close } from '../icons/systemicons/SystemIcons';\nimport { Button } from '../Button';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    margin: 0 0 0 auto;\n    line-height: 0;\n    cursor: pointer;\n  }\n  button:last-child:hover {\n    margin: 0 0 0 auto;\n    background: ${(props: BannerProps) => (props.hover ? props.hover : COLORS.primary_20)};\n  }\n\n  a {\n    color: ${(props: BannerProps) => (props.link)};\n    font-weight: bold;\n    text-decoration: none;\n    \n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  font-family: Lato;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 140%;\n`;\n\nconst BannerCenter = styled.div`\n  color: ${(props) => props.color};\n  font-size: 18px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  margin: 0 8px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  ${BREAKPOINTS.XLARGE} {\n    width: 1120px;\n    margin: 0 auto;\n  }\n  >svg {\n    margin-right:8px;\n  }\n`;\n\ntype BannerProps = {\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ type, children, bottom, testId, linkText, link, onClose, icon }) => {\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700}>\n            { icon ? icon : <Help color={COLORS.warning_700} size=\"24px\" /> }\n            {children}&nbsp;&nbsp;\n            {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n            { onClose &&\n              <Button variant=\"text\" onClick={() => onClose()}>\n                <Close color={COLORS.warning_500} size=\"24px\" />\n              </Button>\n            }\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom}>\n          <BannerCenter color={COLORS.critical_700}>\n            { icon ? icon : <Attention color={COLORS.critical_700} size=\"24px\" /> }\n            {children}&nbsp;&nbsp;\n            {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n            { onClose &&\n              <Button variant=\"text\" onClick={() => onClose()}>\n                <Close color={COLORS.critical_500} size=\"24px\" />\n              </Button>\n            }\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom}>\n          <BannerCenter color={COLORS.correct_700}>\n            { icon ? icon : <ThumbsUp color={COLORS.correct_700} size=\"24px\" /> }\n            {children}&nbsp;&nbsp;\n            {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n            { onClose &&\n              <Button variant=\"text\" onClick={() => onClose()}>\n                <Close color={COLORS.correct_500} size=\"24px\" />\n              </Button>\n            }\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom}>\n          <BannerCenter color={COLORS.primary_700}>\n            { icon ? icon : <Tip color={COLORS.primary_700} size=\"24px\" /> }          \n            {children}&nbsp;&nbsp;\n            {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n            { onClose &&\n              <Button variant=\"text\" onClick={() => onClose()}>\n                <Close color={COLORS.primary_500} size=\"24px\" />\n              </Button>\n            }\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","color","ButtonWrapper","getButtonStyle","BannerContentWrapper","size","type","linkText","hover","bottom","testId","icon","onClose","noIcon","Banner","formatTypeToLowerCase"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Tip, Attention, ThumbsUp, Help, Close } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link};\n    font-weight: bold;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  font-family: Lato;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 20px;\n`;\n\nconst BannerCenter = styled.div`\n  color: ${(props) => props.color};\n  font-size: 18px;\n  display: flex;\n  width: 100%;\n  margin: 0 6px 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 22px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 46px 0 56px;\n  }\n  &.small {\n    margin: 0 6px 0 16px;\n  }\n  &.medium {\n    margin: 0 22px 0 32px;\n  }\n  &.large {\n    margin: 0 46px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div<{ type?: string }>`\n  margin: 0 0 0 auto;\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: 'small' | 'medium' | 'large';\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              {children}&nbsp;&nbsp;\n              {link && linkText && (\n                <a href={link} target=\"_blank\">\n                  {linkText}\n                </a>\n              )}\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n                  <Close color={COLORS.warning_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <Attention color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              {children}&nbsp;&nbsp;\n              {link && linkText && (\n                <a href={link} target=\"_blank\">\n                  {linkText}\n                </a>\n              )}\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n                  <Close color={COLORS.critical_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              {children}&nbsp;&nbsp;\n              {link && linkText && (\n                <a href={link} target=\"_blank\">\n                  {linkText}\n                </a>\n              )}\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n                  <Close color={COLORS.correct_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              {children}&nbsp;&nbsp;\n              {link && linkText && (\n                <a href={link} target=\"_blank\">\n                  {linkText}\n                </a>\n              )}\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type=\"neutral\">\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n                  <Close color={COLORS.primary_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

package/dist/umd/Banners/styles.js

@@ -0,0 +1,141 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "styled-components", "../styles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("styled-components"), require("../styles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styledComponents, global.styles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styledComponents, _styles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.getButtonStyle = undefined;
+
+  const getButtonStyle = exports.getButtonStyle = type => {
+    switch (type) {
+      case 'warning':
+        return _styledComponents.css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${_styles.COLORS.warning_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${_styles.COLORS.warning_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${_styles.COLORS.warning_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${_styles.COLORS.warning_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${_styles.COLORS.warning_800};
+          }
+        }
+      `;
+
+      case 'critical':
+        return _styledComponents.css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${_styles.COLORS.critical_600};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${_styles.COLORS.critical_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${_styles.COLORS.critical_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${_styles.COLORS.critical_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${_styles.COLORS.critical_800};
+          }
+        }
+      `;
+
+      case 'positive':
+        return _styledComponents.css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${_styles.COLORS.correct_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${_styles.COLORS.correct_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${_styles.COLORS.correct_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${_styles.COLORS.correct_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${_styles.COLORS.correct_800};
+          }
+        }
+      `;
+
+      default:
+        return _styledComponents.css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${_styles.COLORS.primary_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${_styles.COLORS.primary_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${_styles.COLORS.primary_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${_styles.COLORS.primary_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${_styles.COLORS.primary_800};
+          }
+        }
+      `;
+    }
+  };
+});
+//# sourceMappingURL=styles.js.map

package/dist/umd/Banners/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Banners/styles.tsx"],"names":["getButtonStyle","type","css","COLORS","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800","primary_500","primary_200","primary_700","primary_300","primary_800"],"mappings":";;;;;;;;;;;;;;;;;;;;AAGO,QAAMA,cAAc,WAAdA,cAAc,GAAIC,IAAD,IAAkB;AAC9C,YAAA,IAAA;AACE,WAAA,SAAA;AACE,eAAOC,qBAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,eAAOC,WAAY;AACrC;AACA;AACA;AACA,gCAAgCD,eAAOE,WAAY;AACnD;AACA;AACA;AACA,oBAAoBF,eAAOG,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BH,eAAOI,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBJ,eAAOK,WAAY;AACvC;AACA;AAzBM,OAAA;;AA2BF,WAAA,UAAA;AACE,eAAON,qBAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,eAAOM,YAAa;AACtC;AACA;AACA;AACA,gCAAgCN,eAAOO,YAAa;AACpD;AACA;AACA;AACA,oBAAoBP,eAAOQ,YAAa;AACxC;AACA;AACA;AACA;AACA,0BAA0BR,eAAOS,YAAa;AAC9C;AACA;AACA;AACA,oBAAoBT,eAAOU,YAAa;AACxC;AACA;AAzBM,OAAA;;AA2BF,WAAA,UAAA;AACE,eAAOX,qBAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,eAAOW,WAAY;AACrC;AACA;AACA;AACA,gCAAgCX,eAAOY,WAAY;AACnD;AACA;AACA;AACA,oBAAoBZ,eAAOa,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0Bb,eAAOc,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBd,eAAOe,WAAY;AACvC;AACA;AAzBM,OAAA;;AA2BF;AACE,eAAOhB,qBAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,eAAOgB,WAAY;AACrC;AACA;AACA;AACA,gCAAgChB,eAAOiB,WAAY;AACnD;AACA;AACA;AACA,oBAAoBjB,eAAOkB,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BlB,eAAOmB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBnB,eAAOoB,WAAY;AACvC;AACA;AAzBM,OAAA;AAtFJ;AADK,GAAA","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n  switch (type) {\n    case 'warning':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.warning_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.warning_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.warning_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_800};\n          }\n        }\n      `;\n    case 'critical':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.critical_600};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.critical_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.critical_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_800};\n          }\n        }\n      `;\n    case 'positive':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.correct_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.correct_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.correct_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_800};\n          }\n        }\n      `;\n    default:\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.primary_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.primary_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.primary_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.primary_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.primary_800};\n          }\n        }\n      `;\n  }\n};\n"],"file":"styles.js"}

package/dist/umd/Button/Iconbutton.js

@@ -220,7 +220,7 @@
 
   &:disabled {
     div {
-      background-color: ${_styles.COLORS.white};
+      background-color: ${props => props.useTransparentBackground ? 'transparent' : _styles.COLORS.white};
     }
     svg {
       path {

package/dist/umd/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","css","COLORS","primary_500","neutral_600","primary_700","white","StyledIconButton","styled","button","props","borderRadius","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","IconButton","supressFocusRef","React","isPressingEnter","e","event","setTabbedHere","tabbedHere"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  tabbedHere?: boolean;\n}\n\nconst tabbedHereStyle = (variant: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${COLORS.primary_700};\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary') : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${COLORS.white};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary') : '')};\n`;\n\ntype Props = {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n};\n\nconst IconButton: React.FunctionComponent<Props> = ({\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  borderRadius,\n}): React.ReactElement<Props> => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","css","COLORS","primary_500","neutral_600","primary_700","white","StyledIconButton","styled","button","props","borderRadius","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","IconButton","supressFocusRef","React","isPressingEnter","e","event","setTabbedHere","tabbedHere"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  tabbedHere?: boolean;\n}\n\nconst tabbedHereStyle = (variant: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${COLORS.primary_700};\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary') : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary') : '')};\n`;\n\ntype Props = {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n};\n\nconst IconButton: React.FunctionComponent<Props> = ({\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  borderRadius,\n}): React.ReactElement<Props> => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/umd/Chips/InputChip.js

@@ -135,6 +135,9 @@
       size: getIconSize(),
       className: 'icon'
     }), text, /*#__PURE__*/React.createElement(_index2.IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      useTransparentBackground: true,
       action: event => onRemoveClick(event),
       disabled: disabled
     }, _index.SystemIcons.Close({

package/dist/umd/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["InputChip","onRemove","getIconSize","size","iconSize","onRemoveClick","event","disabled","variant","icon","onClick","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AAGA,QAAMA,SAAkD,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,OAAA;AAAgDC,IAAAA;AAAhD,GAAD,KAAgF;AACzI;AACF;AACA;AACA;AACE,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAR,OAAA,EAAsB;AACpBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAID,IAAI,KAAR,QAAA,EAAuB;AAC5BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACF;AACA;AACA;;;AACE,UAAMC,aAAa,GAAIC,KAAD,IAA4D;AAChF,UAAA,KAAA,EAAW;AACTA,QAAAA,KAAK,CAALA,eAAAA;AACD;;AAEDL,MAAAA,QAAQ;AALV,KAAA;AAQA;AACF;AACA;;;AACE,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAe,MAAA,SAAS,EAAG,GAAEE,IAAK,gBAAeI,QAAQ,GAAA,UAAA,GAAgBC,OAAQ,IAAGC,IAAI,IAAI,WAA5F,EAAA;AAA2G,MAAA,OAAO,EAAE,MAAMC,OAAO;AAAjI,KAAA,EAEGF,OAAO,KAAPA,OAAAA,IAAAA,IAAAA,IAA+B,mBAAA,IAAA,EAAY;AAAEL,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBS,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CAFlC,EAAA,IAAA,EAAA,aAQE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,MAAM,EAAGL,KAAD,IAA4DD,aAAa,CAA7F,KAA6F,CAA7F;AAAsG,MAAA,QAAQ,EAAEE;AAAhH,KAAA,EACG,mBAAA,KAAA,CAAY;AAAEJ,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBS,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CADH,CARF,CADF,CADF;AAnCF,GAAA;;oBAqDA,S","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons as icons } from '../icons/index';\nimport { IconButton } from '../Button/index';\n\n/**\n * Import custom styles.\n */\nimport { ChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { InputChipProps } from './ChipTypes';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({ icon, text, variant, size, disabled, onClick, onRemove }: InputChipProps) => {\n  /**\n   * Retrieves icon size based on the chip size.\n   * @returns A string indicating the icon size.\n   */\n  const getIconSize = (): string => {\n    let iconSize: string;\n\n    // Calculate correct icon size\n    if (size === 'small') {\n      iconSize = '16px';\n    } else if (size === 'medium') {\n      iconSize = '20px';\n    } else {\n      iconSize = '24px';\n    }\n\n    return iconSize;\n  };\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n        {/* Let's render icon if it is passed */}\n        {variant !== 'error' && icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n\n        {/* Let's render text */}\n        {text}\n\n        {/* Let's render clear icon */}\n        <IconButton action={(event: React.MouseEvent<HTMLButtonElement> | undefined) => onRemoveClick(event)} disabled={disabled}>\n          {icons.Close({ size: getIconSize(), className: 'remove' })}\n        </IconButton>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.js"}
+{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["InputChip","onRemove","getIconSize","size","iconSize","onRemoveClick","event","disabled","variant","icon","onClick","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AAGA,QAAMA,SAAkD,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,OAAA;AAAgDC,IAAAA;AAAhD,GAAD,KAAgF;AACzI;AACF;AACA;AACA;AACE,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAR,OAAA,EAAsB;AACpBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAID,IAAI,KAAR,QAAA,EAAuB;AAC5BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACF;AACA;AACA;;;AACE,UAAMC,aAAa,GAAIC,KAAD,IAA4D;AAChF,UAAA,KAAA,EAAW;AACTA,QAAAA,KAAK,CAALA,eAAAA;AACD;;AAEDL,MAAAA,QAAQ;AALV,KAAA;AAQA;AACF;AACA;;;AACE,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAe,MAAA,SAAS,EAAG,GAAEE,IAAK,gBAAeI,QAAQ,GAAA,UAAA,GAAgBC,OAAQ,IAAGC,IAAI,IAAI,WAA5F,EAAA;AAA2G,MAAA,OAAO,EAAE,MAAMC,OAAO;AAAjI,KAAA,EAEGF,OAAO,KAAPA,OAAAA,IAAAA,IAAAA,IAA+B,mBAAA,IAAA,EAAY;AAAEL,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBS,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CAFlC,EAAA,IAAA,EAAA,aAQE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,MAAA,OAAO,EADT,WAAA;AAEE,MAAA,KAAK,EAFP,UAAA;AAGE,MAAA,wBAAwB,EAH1B,IAAA;AAIE,MAAA,MAAM,EAAGL,KAAD,IAA4DD,aAAa,CAJnF,KAImF,CAJnF;AAKE,MAAA,QAAQ,EAAEE;AALZ,KAAA,EAMG,mBAAA,KAAA,CAAY;AAAEJ,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBS,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CANH,CARF,CADF,CADF;AAnCF,GAAA;;oBA0DA,S","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons as icons } from '../icons/index';\nimport { IconButton } from '../Button/index';\n\n/**\n * Import custom styles.\n */\nimport { ChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { InputChipProps } from './ChipTypes';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({ icon, text, variant, size, disabled, onClick, onRemove }: InputChipProps) => {\n  /**\n   * Retrieves icon size based on the chip size.\n   * @returns A string indicating the icon size.\n   */\n  const getIconSize = (): string => {\n    let iconSize: string;\n\n    // Calculate correct icon size\n    if (size === 'small') {\n      iconSize = '16px';\n    } else if (size === 'medium') {\n      iconSize = '20px';\n    } else {\n      iconSize = '24px';\n    }\n\n    return iconSize;\n  };\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n        {/* Let's render icon if it is passed */}\n        {variant !== 'error' && icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n\n        {/* Let's render text */}\n        {text}\n\n        {/* Let's render clear icon */}\n        <IconButton\n          variant=\"secondary\"\n          shape=\"circular\"\n          useTransparentBackground\n          action={(event: React.MouseEvent<HTMLButtonElement> | undefined) => onRemoveClick(event)}\n          disabled={disabled}>\n          {icons.Close({ size: getIconSize(), className: 'remove' })}\n        </IconButton>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.js"}

package/dist/umd/Dropdown/DropdownButton.js

@@ -171,6 +171,8 @@
 
     const renderIconButton = () => {
       return /*#__PURE__*/React.createElement(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
         action: () => setDropdownOpen(!dropdownOpen),
         disabled: disabled
       }, icon && _index.SystemIcons[icon]({