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

package/dist/esm/Banners/Banner.js

@@ -3,7 +3,8 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../styles';
 import { Tip, Attention, ThumbsUp, Help, Close } from '../icons/systemicons/SystemIcons';
-import { Button } from '../Button';
+import { IconButton } from '../Button';
+import { getButtonStyle } from './styles';
 /**
  * Styles for <Banner />
  */
@@ -16,20 +17,30 @@ const BannerContainer = styled.div`
   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 : COLORS.primary_20};
+    margin: 0 0 0 8px;
+    ${BREAKPOINTS.MEDIUM} {
+      margin: 0 0 0 16px;
+    }
+    ${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;
     }
@@ -39,32 +50,50 @@ const BannerContainer = styled.div`
   font-style: normal;
   font-weight: normal;
   font-size: 16px;
-  line-height: 140%;
+  line-height: 20px;
 `;
 const BannerCenter = styled.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;
   ${BREAKPOINTS.MEDIUM} {
-    margin: 0 32px;
+    margin: 0 22px 0 32px;
   }
   ${BREAKPOINTS.LARGE} {
-    margin: 0 56px;
+    margin: 0 46px 0 56px;
+  }
+  &.small {
+    margin: 0 6px 0 16px;
   }
-  ${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 = styled.div`
+  margin: 0 0 0 auto;
+  ${props => props.type ? getButtonStyle(props.type) : null};
+`;
+const BannerContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  &:not(:first-child) {
+    margin-left: 8px;
   }
 `;
 
 const Banner = ({
+  size,
   type,
   children,
   bottom,
@@ -72,7 +101,8 @@ const Banner = ({
   linkText,
   link,
   onClose,
-  icon
+  icon,
+  noIcon
 }) => {
   const formatTypeToLowerCase = type?.toLowerCase();
 
@@ -85,20 +115,25 @@ const Banner = ({
         hover: COLORS.warning_20,
         bottom: bottom
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.warning_700
-      }, icon ? icon : /*#__PURE__*/React.createElement(Help, {
+        color: COLORS.warning_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Help, {
         color: 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, {
-        variant: "text",
-        onClick: () => onClose()
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: () => onClose()
       }, /*#__PURE__*/React.createElement(Close, {
         color: COLORS.warning_500,
         size: "24px"
-      }))));
+      })))));
 
     case 'critical':
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -106,22 +141,28 @@ const Banner = ({
         type: COLORS.critical_100,
         link: COLORS.critical_700,
         hover: COLORS.critical_20,
-        bottom: bottom
+        bottom: bottom,
+        className: size
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.critical_700
-      }, icon ? icon : /*#__PURE__*/React.createElement(Attention, {
+        color: COLORS.critical_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Attention, {
         color: 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, {
-        variant: "text",
-        onClick: () => onClose()
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: () => onClose()
       }, /*#__PURE__*/React.createElement(Close, {
         color: COLORS.critical_500,
         size: "24px"
-      }))));
+      })))));
 
     case 'positive':
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -129,22 +170,28 @@ const Banner = ({
         type: COLORS.correct_100,
         link: COLORS.correct_700,
         hover: COLORS.correct_20,
-        bottom: bottom
+        bottom: bottom,
+        className: size
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.correct_700
-      }, icon ? icon : /*#__PURE__*/React.createElement(ThumbsUp, {
+        color: COLORS.correct_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(ThumbsUp, {
         color: 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, {
-        variant: "text",
-        onClick: () => onClose()
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: () => onClose()
       }, /*#__PURE__*/React.createElement(Close, {
         color: COLORS.correct_500,
         size: "24px"
-      }))));
+      })))));
 
     default:
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -152,26 +199,33 @@ const Banner = ({
         type: COLORS.primary_100,
         link: COLORS.primary_700,
         hover: COLORS.primary_20,
-        bottom: bottom
+        bottom: bottom,
+        className: size
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.primary_700
-      }, icon ? icon : /*#__PURE__*/React.createElement(Tip, {
+        color: COLORS.primary_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Tip, {
         color: 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, {
-        variant: "text",
-        onClick: () => onClose()
+      }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+        type: "neutral"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        action: () => onClose()
       }, /*#__PURE__*/React.createElement(Close, {
         color: COLORS.primary_500,
         size: "24px"
-      }))));
+      })))));
   }
 };
 
 Banner.propTypes = {
+  size: _pt.oneOf(['small', 'medium', 'large']),
   type: _pt.string,
   link: _pt.string,
   linkText: _pt.string,
@@ -179,7 +233,8 @@ Banner.propTypes = {
   bottom: _pt.bool,
   testId: _pt.string,
   icon: _pt.node,
-  onClose: _pt.func
+  onClose: _pt.func,
+  noIcon: _pt.bool
 };
 export default Banner;
 //# sourceMappingURL=Banner.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","Tip","Attention","ThumbsUp","Help","Close","Button","BannerContainer","div","props","type","correct_100","black","bottom","hover","primary_20","link","BannerCenter","color","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":["React","styled","BREAKPOINTS","COLORS","Tip","Attention","ThumbsUp","Help","Close","IconButton","getButtonStyle","BannerContainer","div","props","type","correct_100","black","bottom","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/esm/Banners/styles.js

@@ -0,0 +1,122 @@
+import { css } from 'styled-components';
+import { COLORS } from '../styles';
+export const getButtonStyle = type => {
+  switch (type) {
+    case 'warning':
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.warning_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.warning_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.warning_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.warning_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.warning_800};
+          }
+        }
+      `;
+
+    case 'critical':
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.critical_600};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.critical_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.critical_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.critical_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.critical_800};
+          }
+        }
+      `;
+
+    case 'positive':
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.correct_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.correct_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.correct_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.correct_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.correct_800};
+          }
+        }
+      `;
+
+    default:
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.primary_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.primary_200};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.primary_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.primary_300};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.primary_800};
+          }
+        }
+      `;
+  }
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Banners/styles.tsx"],"names":["css","COLORS","getButtonStyle","type","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,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,OAAO,MAAMC,cAAc,GAAIC,IAAD,IAAkB;AAC9C,UAAQA,IAAR;AACE,SAAK,SAAL;AACE,aAAOH,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACG,WAAY;AACrC;AACA;AACA;AACA,gCAAgCH,MAAM,CAACI,WAAY;AACnD;AACA;AACA;AACA,oBAAoBJ,MAAM,CAACK,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BL,MAAM,CAACM,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBN,MAAM,CAACO,WAAY;AACvC;AACA;AACA,OA1BM;;AA2BF,SAAK,UAAL;AACE,aAAOR,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACQ,YAAa;AACtC;AACA;AACA;AACA,gCAAgCR,MAAM,CAACS,YAAa;AACpD;AACA;AACA;AACA,oBAAoBT,MAAM,CAACU,YAAa;AACxC;AACA;AACA;AACA;AACA,0BAA0BV,MAAM,CAACW,YAAa;AAC9C;AACA;AACA;AACA,oBAAoBX,MAAM,CAACY,YAAa;AACxC;AACA;AACA,OA1BM;;AA2BF,SAAK,UAAL;AACE,aAAOb,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA,gCAAgCb,MAAM,CAACc,WAAY;AACnD;AACA;AACA;AACA,oBAAoBd,MAAM,CAACe,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0Bf,MAAM,CAACgB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBhB,MAAM,CAACiB,WAAY;AACvC;AACA;AACA,OA1BM;;AA2BF;AACE,aAAOlB,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACkB,WAAY;AACrC;AACA;AACA;AACA,gCAAgClB,MAAM,CAACmB,WAAY;AACnD;AACA;AACA;AACA,oBAAoBnB,MAAM,CAACoB,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BpB,MAAM,CAACqB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBrB,MAAM,CAACsB,WAAY;AACvC;AACA;AACA,OA1BM;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/esm/Button/Iconbutton.js

@@ -144,7 +144,7 @@ const StyledSecondaryIconButton = styled(StyledIconButton)`
 
   &:disabled {
     div {
-      background-color: ${COLORS.white};
+      background-color: ${props => props.useTransparentBackground ? 'transparent' : COLORS.white};
     }
     svg {
       path {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","COLORS","tabbedHereStyle","variant","primary_500","neutral_600","primary_700","white","StyledIconButton","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","useRef","setTabbedHere","useState","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":["React","styled","css","COLORS","tabbedHereStyle","variant","primary_500","neutral_600","primary_700","white","StyledIconButton","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","useRef","setTabbedHere","useState","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/esm/Chips/InputChip.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["React","SystemIcons","icons","IconButton","ChipContainer","InputChip","icon","text","variant","size","disabled","onClick","onRemove","getIconSize","iconSize","onRemoveClick","event","stopPropagation","className","Close"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAW,IAAIC,KAAxB,QAAqC,gBAArC;AACA,SAASC,UAAT,QAA2B,iBAA3B;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,cAA9B;AAEA;AACA;AACA;;AAGA,MAAMC,SAAkD,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,OAAd;AAAuBC,EAAAA,IAAvB;AAA6BC,EAAAA,QAA7B;AAAuCC,EAAAA,OAAvC;AAAgDC,EAAAA;AAAhD,CAAD,KAAgF;AACzI;AACF;AACA;AACA;AACE,QAAMC,WAAW,GAAG,MAAc;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,QAAMC,aAAa,GAAIC,KAAD,IAA4D;AAChF,QAAIA,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACC,eAAN;AACD;;AAEDL,IAAAA,QAAQ;AACT,GAND;AAQA;AACF;AACA;;;AACE,sBACE,uDACE,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAG,GAAEH,IAAK,gBAAeC,QAAQ,GAAG,UAAH,GAAgBF,OAAQ,IAAGF,IAAI,IAAI,WAAY,EAAxG;AAA2G,IAAA,OAAO,EAAE,MAAMK,OAAO;AAAjI,KAEGH,OAAO,KAAK,OAAZ,IAAuBF,IAAvB,IAA+BJ,KAAK,CAACI,IAAD,CAAL,CAAY;AAAEG,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBK,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFlC,EAKGX,IALH,eAQE,oBAAC,UAAD;AAAY,IAAA,MAAM,EAAGS,KAAD,IAA4DD,aAAa,CAACC,KAAD,CAA7F;AAAsG,IAAA,QAAQ,EAAEN;AAAhH,KACGR,KAAK,CAACiB,KAAN,CAAY;AAAEV,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBK,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CADH,CARF,CADF,CADF;AAgBD,CAnDD;;AAqDA,eAAeb,SAAf","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":["React","SystemIcons","icons","IconButton","ChipContainer","InputChip","icon","text","variant","size","disabled","onClick","onRemove","getIconSize","iconSize","onRemoveClick","event","stopPropagation","className","Close"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAW,IAAIC,KAAxB,QAAqC,gBAArC;AACA,SAASC,UAAT,QAA2B,iBAA3B;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,cAA9B;AAEA;AACA;AACA;;AAGA,MAAMC,SAAkD,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,OAAd;AAAuBC,EAAAA,IAAvB;AAA6BC,EAAAA,QAA7B;AAAuCC,EAAAA,OAAvC;AAAgDC,EAAAA;AAAhD,CAAD,KAAgF;AACzI;AACF;AACA;AACA;AACE,QAAMC,WAAW,GAAG,MAAc;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,QAAMC,aAAa,GAAIC,KAAD,IAA4D;AAChF,QAAIA,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACC,eAAN;AACD;;AAEDL,IAAAA,QAAQ;AACT,GAND;AAQA;AACF;AACA;;;AACE,sBACE,uDACE,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAG,GAAEH,IAAK,gBAAeC,QAAQ,GAAG,UAAH,GAAgBF,OAAQ,IAAGF,IAAI,IAAI,WAAY,EAAxG;AAA2G,IAAA,OAAO,EAAE,MAAMK,OAAO;AAAjI,KAEGH,OAAO,KAAK,OAAZ,IAAuBF,IAAvB,IAA+BJ,KAAK,CAACI,IAAD,CAAL,CAAY;AAAEG,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBK,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFlC,EAKGX,IALH,eAQE,oBAAC,UAAD;AACE,IAAA,OAAO,EAAC,WADV;AAEE,IAAA,KAAK,EAAC,UAFR;AAGE,IAAA,wBAAwB,MAH1B;AAIE,IAAA,MAAM,EAAGS,KAAD,IAA4DD,aAAa,CAACC,KAAD,CAJnF;AAKE,IAAA,QAAQ,EAAEN;AALZ,KAMGR,KAAK,CAACiB,KAAN,CAAY;AAAEV,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBK,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CANH,CARF,CADF,CADF;AAqBD,CAxDD;;AA0DA,eAAeb,SAAf","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/esm/Dropdown/DropdownButton.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","SystemIcons","icons","COLORS","DropdownContent","DropdownButton","DB","list","icon","iconSize","disabled","width","iconColor","onClick","dropdownOpen","setDropdownOpen","useState","dropdownContentRef","useRef","useEffect","document","addEventListener","handleClickOutside","removeEventListener","event","current","contains","target","clickListItem","id","preventDefault","getElements","options","length","map","item","showDividerAbove","label","renderItemIcon","renderIconButton","size","color","i","neutral_600"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,SAASC,WAAW,IAAIC,KAAxB,QAAqC,gBAArC;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA;AACA;AACA;;AACA,SAASC,eAAT,EAA0BC,cAAc,IAAIC,EAA5C,QAAsD,iBAAtD;AAEA;AACA;AACA;;AAGA,MAAMD,cAAc,GAAG,CAAC;AAAEE,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,QAAxB;AAAkCC,EAAAA,KAAlC;AAAyCC,EAAAA,SAAzC;AAAoDC,EAAAA;AAApD,CAAD,KAAwF;AAC7G;AACA,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkChB,KAAK,CAACiB,QAAN,CAAwB,KAAxB,CAAxC;AACA,QAAMC,kBAAkB,GAAGlB,KAAK,CAACmB,MAAN,CAA6B,IAA7B,CAA3B;AAEA;AACF;AACA;;AACEnB,EAAAA,KAAK,CAACoB,SAAN,CAAgB,MAAM;AACpBC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCC,kBAAnC;AACA,WAAO,MAAM;AACXF,MAAAA,QAAQ,CAACG,mBAAT,CAA6B,OAA7B,EAAsCD,kBAAtC;AACD,KAFD;AAGD,GALD;AAOA;AACF;AACA;AACA;;AACE,QAAMA,kBAAkB,GAAIE,KAAD,IAAgB;AACzC,QAAIP,kBAAkB,EAAEQ,OAApB,IAA+B,CAACR,kBAAkB,CAACQ,OAAnB,CAA2BC,QAA3B,CAAoCF,KAAK,CAACG,MAA1C,CAApC,EAAuF;AACrF,UAAIb,YAAJ,EAAkB;AAChBC,QAAAA,eAAe,CAAC,KAAD,CAAf;AACD;AACF;AACF,GAND;AAQA;AACF;AACA;AACA;AACA;;;AACE,QAAMa,aAAa,GAAG,CAACJ,KAAD,EAA0BK,EAA1B,KAA+C;AACnE;AACAL,IAAAA,KAAK,CAACM,cAAN,GAFmE,CAInE;;AACAjB,IAAAA,OAAO,CAACgB,EAAD,CAAP;AACAd,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAPD;AASA;AACF;AACA;AACA;;;AACE,QAAMgB,WAAW,GAAG,MAAM;AACxB,QAAIC,OAAO,GAAGzB,IAAd;;AAEA,QAAIyB,OAAO,CAACC,MAAR,KAAmB,CAAvB,EAA0B;AACxB,0BACE,oBAAC,EAAD;AAAI,QAAA,QAAQ;AAAZ,sBACE,mEADF,CADF;AAKD;;AACD,WAAOD,OAAO,CAACE,GAAR,CAAaC,IAAD,IAAU;AAC3B,0BACE,oBAAC,EAAD;AACE,QAAA,IAAI,EAAC,QADP;AAEE,QAAA,OAAO,EAAGX,KAAD,IAA6B;AACpC,cAAI,CAACW,IAAI,CAACzB,QAAV,EAAoBkB,aAAa,CAACJ,KAAD,EAAQW,IAAI,CAACN,EAAb,CAAb;AACrB,SAJH;AAKE,QAAA,GAAG,EAAEM,IAAI,CAACN,EALZ;AAME,QAAA,QAAQ,EAAEM,IAAI,CAACzB,QANjB;AAOE,QAAA,SAAS,EAAEyB,IAAI,CAACC,gBAAL,GAAwB,oBAAxB,GAA+C;AAP5D,SAQGD,IAAI,CAAC3B,IAAL,iBACC;AAAK,QAAA,SAAS,EAAC;AAAf,sBACE;AAAK,QAAA,SAAS,EAAC;AAAf,SAA6B2B,IAAI,CAACE,KAAlC,CADF,EAEGC,cAAc,CAACH,IAAI,CAAC3B,IAAN,CAFjB,CATJ,EAcG,CAAC2B,IAAI,CAAC3B,IAAN,iBAAc,kCAAO2B,IAAI,CAACE,KAAZ,CAdjB,CADF;AAkBD,KAnBM,CAAP;AAoBD,GA9BD;AAgCA;AACF;AACA;AACA;;;AACE,QAAME,gBAAgB,GAAG,MAAM;AAC7B,wBACE,oBAAC,UAAD;AAAY,MAAA,MAAM,EAAE,MAAMxB,eAAe,CAAC,CAACD,YAAF,CAAzC;AAA0D,MAAA,QAAQ,EAAEJ;AAApE,OACGF,IAAI,IAAIN,KAAK,CAACM,IAAD,CAAL,CAAY;AAAEgC,MAAAA,IAAI,EAAE/B,QAAR;AAAkBgC,MAAAA,KAAK,EAAE7B;AAAzB,KAAZ,CADX,CADF;AAKD,GAND;;AAQA,QAAM0B,cAAc,GAAII,CAAD,IAA0B;AAC/C,WAAOA,CAAC,iBAAI;AAAK,MAAA,SAAS,EAAC;AAAf,OAA4BxC,KAAK,CAACwC,CAAD,CAAL,CAAS;AAAEF,MAAAA,IAAI,EAAE,MAAR;AAAgBC,MAAAA,KAAK,EAAEtC,MAAM,CAACwC;AAA9B,KAAT,CAA5B,CAAZ;AACD,GAFD;;AAIA,sBACE,0CACGJ,gBAAgB,EADnB,EAGG,CAAC7B,QAAD,iBACC,oBAAC,eAAD;AAAiB,IAAA,QAAQ,EAAE,KAA3B;AAAkC,IAAA,KAAK,EAAE;AAAEC,MAAAA;AAAF,KAAzC;AAAoD,IAAA,GAAG,EAAEM,kBAAzD;AAA6E,IAAA,SAAS,EAAEH,YAAY,GAAG,MAAH,GAAY;AAAhH,KACGiB,WAAW,EADd,CAJJ,CADF;AAWD,CAxGD;;AA0GA,eAAe1B,cAAf","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":["React","IconButton","SystemIcons","icons","COLORS","DropdownContent","DropdownButton","DB","list","icon","iconSize","disabled","width","iconColor","onClick","dropdownOpen","setDropdownOpen","useState","dropdownContentRef","useRef","useEffect","document","addEventListener","handleClickOutside","removeEventListener","event","current","contains","target","clickListItem","id","preventDefault","getElements","options","length","map","item","showDividerAbove","label","renderItemIcon","renderIconButton","size","color","i","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/esm/Dropdown/DropdownFilter.js

@@ -267,7 +267,6 @@ const DropdownFilter = ({
       autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
       type: "search",
       placeholder: placeholderSearch,
-      id: `${id}_input`,
       value: input,
       className: size ? `${size} value` : 'value',
       onChange: e => {