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

package/dist/js/Banners/Banner.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 declare type BannerProps = {
+    size?: 'small' | 'medium' | 'large';
     type?: string;
     link?: string;
     linkText?: string;
@@ -8,6 +9,7 @@ declare type BannerProps = {
     testId?: string;
     icon?: React.ReactNode;
     onClose?: () => void;
+    noIcon?: boolean;
 };
 declare const Banner: React.FunctionComponent<BannerProps>;
 export default Banner;

package/dist/js/Banners/Banner.js

@@ -19,7 +19,9 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _Button = require("../Button");
 
-var _templateObject, _templateObject2;
+var _styles2 = require("./styles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -32,29 +34,35 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 /**
  * Styles for <Banner />
  */
-var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\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: ", ";\n  }\n\n  a {\n    color: ", ";\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"])), function (props) {
+var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\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: ", ";\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"])), function (props) {
   return props.type ? props.type : _styles.COLORS.correct_100;
 }, _styles.COLORS.black, function (props) {
   return props.bottom ? 'auto' : '0';
-}, function (props) {
-  return props.hover ? props.hover : _styles.COLORS.primary_20;
-}, function (props) {
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, function (props) {
   return props.link;
 });
 
-var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  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  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  ", " {\n    width: 1120px;\n    margin: 0 auto;\n  }\n  >svg {\n    margin-right:8px;\n  }\n"])), function (props) {
+var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 18px;\n  display: flex;\n  width: 100%;\n  margin: 0 6px 0 16px;\n  ", " {\n    margin: 0 22px 0 32px;\n  }\n  ", " {\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"])), function (props) {
   return props.color;
-}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.XLARGE);
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
+
+var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n  ", ";\n"])), function (props) {
+  return props.type ? (0, _styles2.getButtonStyle)(props.type) : null;
+});
+
+var BannerContentWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
 
 var Banner = function Banner(_ref) {
-  var type = _ref.type,
+  var size = _ref.size,
+      type = _ref.type,
       children = _ref.children,
       bottom = _ref.bottom,
       testId = _ref.testId,
       linkText = _ref.linkText,
       link = _ref.link,
       onClose = _ref.onClose,
-      icon = _ref.icon;
+      icon = _ref.icon,
+      noIcon = _ref.noIcon;
   var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
 
   switch (formatTypeToLowerCase) {
@@ -66,22 +74,27 @@ var Banner = function Banner(_ref) {
         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: function onClick() {
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: function action() {
           return onClose();
         }
       }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
         color: _styles.COLORS.warning_500,
         size: "24px"
-      }))));
+      })))));
 
     case 'critical':
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -89,24 +102,30 @@ var Banner = function Banner(_ref) {
         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: function onClick() {
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: function action() {
           return onClose();
         }
       }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
         color: _styles.COLORS.critical_500,
         size: "24px"
-      }))));
+      })))));
 
     case 'positive':
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -114,24 +133,30 @@ var Banner = function Banner(_ref) {
         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: function onClick() {
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: function action() {
           return onClose();
         }
       }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
         color: _styles.COLORS.correct_500,
         size: "24px"
-      }))));
+      })))));
 
     default:
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -139,28 +164,35 @@ var Banner = function Banner(_ref) {
         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: function onClick() {
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: "neutral"
+      }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: function action() {
           return onClose();
         }
       }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
         color: _styles.COLORS.primary_500,
         size: "24px"
-      }))));
+      })))));
   }
 };
 
 Banner.propTypes = {
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   type: _propTypes.default.string,
   link: _propTypes.default.string,
   linkText: _propTypes.default.string,
@@ -168,7 +200,8 @@ Banner.propTypes = {
   bottom: _propTypes.default.bool,
   testId: _propTypes.default.string,
   icon: _propTypes.default.node,
-  onClose: _propTypes.default.func
+  onClose: _propTypes.default.func,
+  noIcon: _propTypes.default.bool
 };
 var _default = Banner;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","type","COLORS","correct_100","black","bottom","hover","primary_20","link","BannerCenter","color","BREAKPOINTS","MEDIUM","LARGE","XLARGE","Banner","children","testId","linkText","onClose","icon","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_500"],"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 { 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","type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","color","ButtonWrapper","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"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/js/Banners/styles.d.ts

@@ -0,0 +1 @@
+export declare const getButtonStyle: (type: string) => import("styled-components").FlattenSimpleInterpolation;

package/dist/js/Banners/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getButtonStyle = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _styles = require("../styles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var getButtonStyle = function getButtonStyle(type) {
+  switch (type) {
+    case 'warning':
+      return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), _styles.COLORS.warning_500, _styles.COLORS.warning_200, _styles.COLORS.warning_700, _styles.COLORS.warning_300, _styles.COLORS.warning_800);
+
+    case 'critical':
+      return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), _styles.COLORS.critical_600, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _styles.COLORS.critical_300, _styles.COLORS.critical_800);
+
+    case 'positive':
+      return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), _styles.COLORS.correct_500, _styles.COLORS.correct_200, _styles.COLORS.correct_700, _styles.COLORS.correct_300, _styles.COLORS.correct_800);
+
+    default:
+      return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), _styles.COLORS.primary_500, _styles.COLORS.primary_200, _styles.COLORS.primary_700, _styles.COLORS.primary_300, _styles.COLORS.primary_800);
+  }
+};
+
+exports.getButtonStyle = getButtonStyle;
+//# sourceMappingURL=styles.js.map

package/dist/js/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":";;;;;;;AAAA;;AACA;;;;;;AAEO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAAkB;AAC9C,UAAQA,IAAR;AACE,SAAK,SAAL;AACE,iBAAOC,qBAAP,kmBAMYC,eAAOC,WANnB,EAU0BD,eAAOE,WAVjC,EAccF,eAAOG,WAdrB,EAmBoBH,eAAOI,WAnB3B,EAuBcJ,eAAOK,WAvBrB;;AA2BF,SAAK,UAAL;AACE,iBAAON,qBAAP,omBAMYC,eAAOM,YANnB,EAU0BN,eAAOO,YAVjC,EAccP,eAAOQ,YAdrB,EAmBoBR,eAAOS,YAnB3B,EAuBcT,eAAOU,YAvBrB;;AA2BF,SAAK,UAAL;AACE,iBAAOX,qBAAP,omBAMYC,eAAOW,WANnB,EAU0BX,eAAOY,WAVjC,EAccZ,eAAOa,WAdrB,EAmBoBb,eAAOc,WAnB3B,EAuBcd,eAAOe,WAvBrB;;AA2BF;AACE,iBAAOhB,qBAAP,omBAMYC,eAAOgB,WANnB,EAU0BhB,eAAOiB,WAVjC,EAccjB,eAAOkB,WAdrB,EAmBoBlB,eAAOmB,WAnB3B,EAuBcnB,eAAOoB,WAvBrB;AAtFJ;AAkHD,CAnHM","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/js/Button/Iconbutton.js

@@ -75,7 +75,9 @@ var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)
   return props.iconColor || _styles.COLORS.neutral_600;
 }, function (props) {
   return props.iconColor || _styles.COLORS.neutral_600;
-}, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, function (props) {
+}, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, function (props) {
+  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
+}, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, function (props) {
   return props.tabbedHere ? tabbedHereStyle('secondary') : '';
 });
 

package/dist/js/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","hideOnLowWidth","borderRadius","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","shape","action","isInMobileMenu","children","disabled","tabIndex","supressFocusRef","React","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"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","hideOnLowWidth","borderRadius","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","shape","action","isInMobileMenu","children","disabled","tabIndex","supressFocusRef","React","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"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/js/Chips/InputChip.js

@@ -83,6 +83,9 @@ var InputChip = function InputChip(_ref) {
     size: getIconSize(),
     className: 'icon'
   }), text, /*#__PURE__*/React.createElement(_index2.IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    useTransparentBackground: true,
     action: function action(event) {
       return onRemoveClick(event);
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["InputChip","icon","text","variant","size","disabled","onClick","onRemove","getIconSize","iconSize","onRemoveClick","event","stopPropagation","icons","className","Close"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;;;;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAQA,IAAMA,SAAkD,GAAG,SAArDA,SAAqD,OAAgF;AAAA,MAA7EC,IAA6E,QAA7EA,IAA6E;AAAA,MAAvEC,IAAuE,QAAvEA,IAAuE;AAAA,MAAjEC,OAAiE,QAAjEA,OAAiE;AAAA,MAAxDC,IAAwD,QAAxDA,IAAwD;AAAA,MAAlDC,QAAkD,QAAlDA,QAAkD;AAAA,MAAxCC,QAAwC,QAAxCA,OAAwC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;;AACzI;AACF;AACA;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIL,IAAI,KAAK,OAAb,EAAsB;AACpBK,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIL,IAAI,KAAK,QAAb,EAAuB;AAC5BK,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACF;AACA;AACA;;;AACE,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4D;AAChF,QAAIA,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACC,eAAN;AACD;;AAEDL,IAAAA,QAAQ;AACT,GAND;AAQA;AACF;AACA;;;AACE,sBACE,uDACE,oBAAC,yBAAD;AAAe,IAAA,SAAS,YAAKH,IAAL,0BAAyBC,QAAQ,GAAG,UAAH,GAAgBF,OAAjD,cAA4DF,IAAI,IAAI,WAApE,CAAxB;AAA2G,IAAA,OAAO,EAAE;AAAA,aAAMK,QAAO,EAAb;AAAA;AAApH,KAEGH,OAAO,KAAK,OAAZ,IAAuBF,IAAvB,IAA+BY,mBAAMZ,IAAN,EAAY;AAAEG,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBM,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFlC,EAKGZ,IALH,eAQE,oBAAC,kBAAD;AAAY,IAAA,MAAM,EAAE,gBAACS,KAAD;AAAA,aAA4DD,aAAa,CAACC,KAAD,CAAzE;AAAA,KAApB;AAAsG,IAAA,QAAQ,EAAEN;AAAhH,KACGQ,mBAAME,KAAN,CAAY;AAAEX,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBM,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CADH,CARF,CADF,CADF;AAgBD,CAnDD;;eAqDed,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","icon","text","variant","size","disabled","onClick","onRemove","getIconSize","iconSize","onRemoveClick","event","stopPropagation","icons","className","Close"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;;;;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAQA,IAAMA,SAAkD,GAAG,SAArDA,SAAqD,OAAgF;AAAA,MAA7EC,IAA6E,QAA7EA,IAA6E;AAAA,MAAvEC,IAAuE,QAAvEA,IAAuE;AAAA,MAAjEC,OAAiE,QAAjEA,OAAiE;AAAA,MAAxDC,IAAwD,QAAxDA,IAAwD;AAAA,MAAlDC,QAAkD,QAAlDA,QAAkD;AAAA,MAAxCC,QAAwC,QAAxCA,OAAwC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;;AACzI;AACF;AACA;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIL,IAAI,KAAK,OAAb,EAAsB;AACpBK,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIL,IAAI,KAAK,QAAb,EAAuB;AAC5BK,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACF;AACA;AACA;;;AACE,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4D;AAChF,QAAIA,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACC,eAAN;AACD;;AAEDL,IAAAA,QAAQ;AACT,GAND;AAQA;AACF;AACA;;;AACE,sBACE,uDACE,oBAAC,yBAAD;AAAe,IAAA,SAAS,YAAKH,IAAL,0BAAyBC,QAAQ,GAAG,UAAH,GAAgBF,OAAjD,cAA4DF,IAAI,IAAI,WAApE,CAAxB;AAA2G,IAAA,OAAO,EAAE;AAAA,aAAMK,QAAO,EAAb;AAAA;AAApH,KAEGH,OAAO,KAAK,OAAZ,IAAuBF,IAAvB,IAA+BY,mBAAMZ,IAAN,EAAY;AAAEG,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBM,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFlC,EAKGZ,IALH,eAQE,oBAAC,kBAAD;AACE,IAAA,OAAO,EAAC,WADV;AAEE,IAAA,KAAK,EAAC,UAFR;AAGE,IAAA,wBAAwB,MAH1B;AAIE,IAAA,MAAM,EAAE,gBAACS,KAAD;AAAA,aAA4DD,aAAa,CAACC,KAAD,CAAzE;AAAA,KAJV;AAKE,IAAA,QAAQ,EAAEN;AALZ,KAMGQ,mBAAME,KAAN,CAAY;AAAEX,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBM,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CANH,CARF,CADF,CADF;AAqBD,CAxDD;;eA0Ded,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/js/Dropdown/DropdownButton.js

@@ -124,6 +124,8 @@ var DropdownButton = function DropdownButton(_ref) {
 
   var renderIconButton = function renderIconButton() {
     return /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
       action: function action() {
         return setDropdownOpen(!dropdownOpen);
       },

package/dist/js/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["DropdownButton","list","icon","iconSize","disabled","width","iconColor","onClick","React","useState","dropdownOpen","setDropdownOpen","dropdownContentRef","useRef","useEffect","document","addEventListener","handleClickOutside","removeEventListener","event","current","contains","target","clickListItem","id","preventDefault","getElements","options","length","map","item","showDividerAbove","label","renderItemIcon","renderIconButton","icons","size","color","i","COLORS","neutral_600"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport { SystemIcons as icons } from '../icons/index';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { DropdownContent, DropdownButton as DB } from './CommonStyling';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps, Icons } from './DropdownButtonTypes';\n\nconst DropdownButton = ({ list, icon, iconSize, disabled, width, iconColor, onClick }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  /**\n   * Adds custom event handler.\n   */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * Checks if we have clicked outside the dropdown - then close the dropdown.\n   * @param event - Event handler from the mouse click.\n   */\n  const handleClickOutside = (event: any) => {\n    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(event.target)) {\n      if (dropdownOpen) {\n        setDropdownOpen(false);\n      }\n    }\n  };\n\n  /**\n   * Does all required actions when list item was selected.\n   * @param {Object} event - Event handler from the mouse click.\n   * @param {string} id - ID of the clicked list item.\n   */\n  const clickListItem = (event: React.MouseEvent, id: string): void => {\n    // Prevent default actions\n    event.preventDefault();\n\n    // Do all required actions\n    onClick(id);\n    setDropdownOpen(false);\n  };\n\n  /**\n   * Retrieves elements for the dropdown list.\n   * @returns Dropdown list elements HTML code.\n   */\n  const getElements = () => {\n    var options = list;\n\n    if (options.length === 0) {\n      return (\n        <DB disabled>\n          <span>There are no options available</span>\n        </DB>\n      );\n    }\n    return options.map((item) => {\n      return (\n        <DB\n          type=\"button\"\n          onClick={(event: React.MouseEvent) => {\n            if (!item.disabled) clickListItem(event, item.id);\n          }}\n          key={item.id}\n          disabled={item.disabled}\n          className={item.showDividerAbove ? 'show-divider-above' : ''}>\n          {item.icon && (\n            <div className=\"item-content\">\n              <div className=\"item-label\">{item.label}</div>\n              {renderItemIcon(item.icon)}\n            </div>\n          )}\n          {!item.icon && <span>{item.label}</span>}\n        </DB>\n      );\n    });\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon && icons[icon]({ size: iconSize, color: iconColor })}\n      </IconButton>\n    );\n  };\n\n  const renderItemIcon = (i: Icons | undefined) => {\n    return i && <div className=\"item-icon\">{icons[i]({ size: '20px', color: COLORS.neutral_600 })}</div>;\n  };\n\n  return (\n    <>\n      {renderIconButton()}\n\n      {!disabled && (\n        <DropdownContent isButton={false} style={{ width }} ref={dropdownContentRef} className={dropdownOpen ? 'show' : ''}>\n          {getElements()}\n        </DropdownContent>\n      )}\n    </>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["DropdownButton","list","icon","iconSize","disabled","width","iconColor","onClick","React","useState","dropdownOpen","setDropdownOpen","dropdownContentRef","useRef","useEffect","document","addEventListener","handleClickOutside","removeEventListener","event","current","contains","target","clickListItem","id","preventDefault","getElements","options","length","map","item","showDividerAbove","label","renderItemIcon","renderIconButton","icons","size","color","i","COLORS","neutral_600"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport { SystemIcons as icons } from '../icons/index';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { DropdownContent, DropdownButton as DB } from './CommonStyling';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps, Icons } from './DropdownButtonTypes';\n\nconst DropdownButton = ({ list, icon, iconSize, disabled, width, iconColor, onClick }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  /**\n   * Adds custom event handler.\n   */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * Checks if we have clicked outside the dropdown - then close the dropdown.\n   * @param event - Event handler from the mouse click.\n   */\n  const handleClickOutside = (event: any) => {\n    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(event.target)) {\n      if (dropdownOpen) {\n        setDropdownOpen(false);\n      }\n    }\n  };\n\n  /**\n   * Does all required actions when list item was selected.\n   * @param {Object} event - Event handler from the mouse click.\n   * @param {string} id - ID of the clicked list item.\n   */\n  const clickListItem = (event: React.MouseEvent, id: string): void => {\n    // Prevent default actions\n    event.preventDefault();\n\n    // Do all required actions\n    onClick(id);\n    setDropdownOpen(false);\n  };\n\n  /**\n   * Retrieves elements for the dropdown list.\n   * @returns Dropdown list elements HTML code.\n   */\n  const getElements = () => {\n    var options = list;\n\n    if (options.length === 0) {\n      return (\n        <DB disabled>\n          <span>There are no options available</span>\n        </DB>\n      );\n    }\n    return options.map((item) => {\n      return (\n        <DB\n          type=\"button\"\n          onClick={(event: React.MouseEvent) => {\n            if (!item.disabled) clickListItem(event, item.id);\n          }}\n          key={item.id}\n          disabled={item.disabled}\n          className={item.showDividerAbove ? 'show-divider-above' : ''}>\n          {item.icon && (\n            <div className=\"item-content\">\n              <div className=\"item-label\">{item.label}</div>\n              {renderItemIcon(item.icon)}\n            </div>\n          )}\n          {!item.icon && <span>{item.label}</span>}\n        </DB>\n      );\n    });\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton variant=\"secondary\" shape=\"circular\" action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon && icons[icon]({ size: iconSize, color: iconColor })}\n      </IconButton>\n    );\n  };\n\n  const renderItemIcon = (i: Icons | undefined) => {\n    return i && <div className=\"item-icon\">{icons[i]({ size: '20px', color: COLORS.neutral_600 })}</div>;\n  };\n\n  return (\n    <>\n      {renderIconButton()}\n\n      {!disabled && (\n        <DropdownContent isButton={false} style={{ width }} ref={dropdownContentRef} className={dropdownOpen ? 'show' : ''}>\n          {getElements()}\n        </DropdownContent>\n      )}\n    </>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}

package/dist/js/Dropdown/DropdownFilter.js

@@ -324,7 +324,6 @@ var DropdownFilter = function DropdownFilter(_ref) {
       autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
       type: "search",
       placeholder: placeholderSearch,
-      id: "".concat(id, "_input"),
       value: input,
       className: size ? "".concat(size, " value") : 'value',
       onChange: function onChange(e) {