@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/esm/Button/Iconbutton.js

@@ -1,209 +1,84 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3;
+
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
 
-const tabbedHereStyle = (variant, tabbedHereBackgroundColor) => {
-  switch (variant) {
-    case 'secondary':
-      return css`
-        div {
-          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;
-          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.neutral_600};
-        }
-      `;
-
-    case 'primary':
-    default:
-      return css`
-        div {
-          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;
-          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.white};
-        }
-      `;
-  }
+var getBorderRadius = function getBorderRadius(props) {
+  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
 };
 
-const getBorderRadius = props => props.borderRadius ? `${props.borderRadius}px` : '4px';
-
-const getBorderRadiusStyle = props => {
-  const radius = getBorderRadius(props);
+var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
+  var radius = getBorderRadius(props);
 
   switch (props.flatEdge) {
     case 'left':
-      return `0px ${radius} ${radius} 0px`;
+      return "0px ".concat(radius, " ").concat(radius, " 0px");
 
     case 'right':
-      return `${radius} 0px 0px ${radius}`;
+      return "".concat(radius, " 0px 0px ").concat(radius);
 
     case 'none':
     default:
-      return `${radius}`;
+      return "".concat(radius);
   }
 };
 
-const StyledIconButton = styled.button`
-  border-width: 0;
-  cursor: pointer;
-  height: 48px;
-  width: 48px;
-  background: transparent;
-
-  display: ${props => props.hideOnLowWidth ? 'none' : 'block'};
-  ${BREAKPOINTS.MEDIUM} {
-    display: block;
-  }
-
-  border-radius: ${props => props.borderRadius ? `${props.borderRadius}px` : '4px'};
-  div {
-    height: 36px;
-    width: 36px;
-    border-radius: ${getBorderRadiusStyle};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    svg {
-      height: ${props => props.unsetIconSize ? 'unset' : '24px'};
-      width: ${props => props.unsetIconSize ? 'unset' : '24px'};
-      padding: 0;
-    }
-  }
-  &:only-child {
-    margin: 0;
-  }
-  &:disabled {
-    cursor: not-allowed;
-  }
-  &:focus:not(:disabled) {
-    outline: none;
-    div {
-      outline: none;
-    }
-  }
-  &:active:not(:disabled) {
-    div {
-      box-shadow: none;
-    }
-  }
-`;
-const StyledPrimaryIconButton = styled(StyledIconButton)`
-  div {
-    background-color: ${props => props.useTransparentBackground ? 'transparent' : COLORS.primary_500};
-
-    svg {
-      fill: ${props => props.iconColor || COLORS.white};
-      path {
-        fill: ${props => props.iconColor || COLORS.white};
-      }
-    }
-  }
-  &:hover:not(:disabled) {
-    div {
-      background-color: ${COLORS.primary_700};
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.white};
-    }
-  }
-  &:active:not(:disabled) {
-    div {
-      background: ${COLORS.primary_800};
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.white};
-    }
-  }
-  &:disabled {
-    div {
-      background-color: ${COLORS.neutral_200};
-    }
-    svg {
-      path {
-        fill: ${COLORS.white};
-      }
-      fill: ${COLORS.white};
-    }
-  }
-  ${props => props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : ''};
-`;
-const StyledSecondaryIconButton = styled(StyledIconButton)`
-  div {
-    background-color: ${props => props.useTransparentBackground ? 'transparent' : COLORS.white};
-
-    svg {
-      fill: ${props => props.iconColor || COLORS.neutral_600};
-      path {
-        fill: ${props => props.iconColor || COLORS.neutral_600};
-      }
-    }
-  }
-  &:hover:not(:disabled) {
-    div {
-      background-color: ${COLORS.primary_20};
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.primary_700};
-    }
-  }
-  &:active:not(:disabled) {
-    div {
-      background: ${COLORS.primary_100};
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.primary_800};
-    }
-  }
-
-  &:disabled {
-    div {
-      background-color: ${props => props.useTransparentBackground ? 'transparent' : COLORS.white};
-    }
-    svg {
-      path {
-        fill: ${COLORS.neutral_300};
-      }
-      fill: ${COLORS.neutral_300};
-    }
-  }
-
-  ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : ''};
-`;
-const IconButton = /*#__PURE__*/React.forwardRef(({
-  id,
-  variant,
-  shape,
-  action,
-  hideOnLowWidth,
-  isInMobileMenu,
-  children,
-  useTransparentBackground,
-  disabled,
-  iconColor,
-  unsetIconSize,
-  tabIndex,
-  flatEdge,
-  borderRadius,
-  onKeyPress,
-  tabbedHereBackgroundColor,
-  type,
-  hidden
-}, ref) => {
-  const supressFocusRef = React.useRef(null);
-  const [tabbedHere, setTabbedHere] = React.useState(false);
-
-  const isPressingEnter = e => {
+var StyledIconButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\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 !important;\n    }\n  }\n"])), function (props) {
+  return props.hideOnLowWidth ? 'none' : 'block';
+}, BREAKPOINTS.MEDIUM, function (props) {
+  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
+}, getBorderRadiusStyle, function (props) {
+  return props.unsetIconSize ? 'unset' : '24px';
+}, function (props) {
+  return props.unsetIconSize ? 'unset' : '24px';
+});
+var StyledPrimaryIconButton = styled(StyledIconButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\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  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n  &:focus:not(:disabled) {\n    div {\n      background-color: ", " !important;\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: ", ";\n    }\n  }\n"])), function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.primary_500;
+}, function (props) {
+  return props.iconColor || COLORS.white;
+}, function (props) {
+  return props.iconColor || COLORS.white;
+}, COLORS.primary_700, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.neutral_200, COLORS.white, COLORS.white, function (props) {
+  return props.focusBackgroundColor || COLORS.primary_700;
+}, COLORS.white);
+var StyledSecondaryIconButton = styled(StyledIconButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\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\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    div {\n      background-color: ", " !important;\n      box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.white;
+}, function (props) {
+  return props.iconColor || COLORS.neutral_600;
+}, function (props) {
+  return props.iconColor || COLORS.neutral_600;
+}, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.white;
+}, COLORS.neutral_300, COLORS.neutral_300, function (props) {
+  return props.focusBackgroundColor || 'transparent';
+}, COLORS.primary_500, COLORS.neutral_600);
+var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      variant = _ref.variant,
+      shape = _ref.shape,
+      action = _ref.action,
+      hideOnLowWidth = _ref.hideOnLowWidth,
+      isInMobileMenu = _ref.isInMobileMenu,
+      children = _ref.children,
+      useTransparentBackground = _ref.useTransparentBackground,
+      disabled = _ref.disabled,
+      iconColor = _ref.iconColor,
+      unsetIconSize = _ref.unsetIconSize,
+      tabIndex = _ref.tabIndex,
+      flatEdge = _ref.flatEdge,
+      borderRadius = _ref.borderRadius,
+      onKeyPress = _ref.onKeyPress,
+      focusBackgroundColor = _ref.focusBackgroundColor,
+      type = _ref.type,
+      hidden = _ref.hidden;
+
+  var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
@@ -211,21 +86,23 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     }
 
     return false;
-  };
+  }; // Let's render button
 
-  React.useEffect(() => {
-    !!disabled && setTabbedHere(false);
-  }, [disabled]); // Let's render button
 
   switch (variant) {
     case 'secondary':
-      return /*#__PURE__*/React.createElement(StyledSecondaryIconButton, {
+      return /*#__PURE__*/_jsx(StyledSecondaryIconButton, {
         id: id,
-        type: type ?? 'button',
+        type: type !== null && type !== void 0 ? type : 'button',
         "data-testid": id,
         ref: ref,
-        onClick: event => action(event),
-        onKeyDown: e => isPressingEnter(e) ? action() : null,
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          action(event);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return isPressingEnter(e) ? action() : null;
+        },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,
         inMobileMenu: isInMobileMenu,
@@ -234,33 +111,30 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex || 0,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: e => {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: e => {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: () => {
-          setTabbedHere(false);
-        },
-        tabbedHere: tabbedHere,
+        onMouseDown: defaultOnMouseDownHandler,
         onKeyPress: onKeyPress,
         hidden: hidden,
-        tabbedHereBackgroundColor: tabbedHereBackgroundColor
-      }, /*#__PURE__*/React.createElement("div", null, children));
+        focusBackgroundColor: focusBackgroundColor,
+        children: /*#__PURE__*/_jsx("div", {
+          children: children
+        })
+      });
 
     case 'primary':
     default:
-      return /*#__PURE__*/React.createElement(StyledPrimaryIconButton, {
+      return /*#__PURE__*/_jsx(StyledPrimaryIconButton, {
         id: id,
-        type: type ?? 'button',
+        type: type !== null && type !== void 0 ? type : 'button',
         "data-testid": id,
         flatEdge: flatEdge,
         ref: ref,
-        onClick: event => action(event),
-        onKeyDown: e => isPressingEnter(e) ? action() : null,
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          action(event);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return isPressingEnter(e) ? action() : null;
+        },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,
         inMobileMenu: isInMobileMenu,
@@ -269,22 +143,14 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex || 0,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: e => {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: e => {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: () => {
-          setTabbedHere(false);
-        },
-        tabbedHere: tabbedHere,
+        onMouseDown: defaultOnMouseDownHandler,
         onKeyPress: onKeyPress,
         hidden: hidden,
-        tabbedHereBackgroundColor: tabbedHereBackgroundColor
-      }, /*#__PURE__*/React.createElement("div", null, children));
+        focusBackgroundColor: focusBackgroundColor,
+        children: /*#__PURE__*/_jsx("div", {
+          children: children
+        })
+      });
   }
 });
 IconButton.propTypes = {
@@ -301,7 +167,7 @@ IconButton.propTypes = {
   tabIndex: _pt.number,
   borderRadius: _pt.number,
   onKeyPress: _pt.func,
-  tabbedHereBackgroundColor: _pt.string,
+  focusBackgroundColor: _pt.string,
   children: _pt.node,
   hidden: _pt.bool
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","forwardRef","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","ref","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","event","current"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, 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  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\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: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\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 getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\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\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\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', props.tabbedHereBackgroundColor) : '')};\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', props.tabbedHereBackgroundColor) : '')};\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: IconButtonProps, ref) => {\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  React.useEffect(() => {\n    !!disabled && setTabbedHere(false)\n  }, [disabled]);\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\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={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\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={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\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","BREAKPOINTS","COLORS","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","focusBackgroundColor","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","isPressingEnter","e","key","preventDefault","stopPropagation","event"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\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  flatEdge?: string;\n  focusBackgroundColor?: string;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\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\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\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 !important;\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  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || COLORS.primary_700} !important;\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\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  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || 'transparent'} !important;\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`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  focusBackgroundColor,\n  type,\n  hidden\n}: IconButtonProps, ref) => {\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          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); 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={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) =>  {event.stopPropagation(); 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={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/esm/Button/index.js

@@ -1,4 +1,5 @@
 export { default as IconButton } from './Iconbutton';
 export { default as Button } from './Button';
 export { default as BackButton } from './BackButton';
+export { default as DualFunctionButton } from './DualFunctionButton';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/index.ts"],"names":["default","IconButton","Button","BackButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC;AACA,SAASD,OAAO,IAAIE,MAApB,QAAkC,UAAlC;AACA,SAASF,OAAO,IAAIG,UAApB,QAAsC,cAAtC","sourcesContent":["export { default as IconButton } from './Iconbutton';\nexport { default as Button } from './Button';\nexport { default as BackButton } from './BackButton';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Button/index.ts"],"names":["default","IconButton","Button","BackButton","DualFunctionButton"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,UAAnB,QAAoC,cAApC;AACA,SAAQD,OAAO,IAAIE,MAAnB,QAAgC,UAAhC;AACA,SAAQF,OAAO,IAAIG,UAAnB,QAAoC,cAApC;AACA,SAAQH,OAAO,IAAII,kBAAnB,QAA4C,sBAA5C","sourcesContent":["export {default as IconButton} from './Iconbutton';\nexport {default as Button} from './Button';\nexport {default as BackButton} from './BackButton';\nexport {default as DualFunctionButton} from './DualFunctionButton';\n"],"file":"index.js"}

package/dist/esm/Chips/ActionChip.js

@@ -17,20 +17,24 @@ import { ActionChipContainer } from './ChipStyles';
  * Import custom types.
  */
 
-const ActionChip = ({
-  icon,
-  text,
-  variant,
-  size,
-  disabled,
-  onClick
-}) => {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var ActionChip = function ActionChip(_ref) {
+  var icon = _ref.icon,
+      text = _ref.text,
+      variant = _ref.variant,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      _onClick = _ref.onClick;
+
   /**
    * Retrieves icon size based on the chip size.
    * @returns A string indicating the icon size.
    */
-  const getIconSize = () => {
-    let iconSize; // Calculate correct icon size
+  var getIconSize = function getIconSize() {
+    var iconSize; // Calculate correct icon size
 
     if (size === Size.Small) {
       iconSize = '16px';
@@ -47,13 +51,18 @@ const ActionChip = ({
    */
 
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionChipContainer, {
-    className: `${size} ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`,
-    onClick: () => onClick()
-  }, icon && icons[icon]({
-    size: getIconSize(),
-    className: 'icon'
-  }), text));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(ActionChipContainer, {
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : variant, " ").concat(icon && 'icon-chip'),
+      onClick: function onClick() {
+        return _onClick();
+      },
+      children: [icon && icons[icon]({
+        size: getIconSize(),
+        className: 'icon'
+      }), text]
+    })
+  });
 };
 
 export default ActionChip;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/ActionChip.tsx"],"names":["React","SystemIcons","icons","Size","ActionChipContainer","ActionChip","icon","text","variant","size","disabled","onClick","getIconSize","iconSize","Small","Medium","className"],"mappings":"AAAA;AACA;AACA;AACC,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACD;AACA;;AACC,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA;AACD;AACA;;AACC,SAASC,mBAAT,QAAoC,cAApC;AAEA;AACD;AACA;;AAGC,MAAMC,UAAoD,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,OAAd;AAAuBC,EAAAA,IAAvB;AAA6BC,EAAAA,QAA7B;AAAuCC,EAAAA;AAAvC,CAAD,KAAuE;AAClI;AACH;AACA;AACA;AACG,QAAMC,WAAW,GAAG,MAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAKN,IAAI,CAACW,KAAlB,EAAyB;AACvBD,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAKN,IAAI,CAACY,MAAlB,EAA0B;AAC/BF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE,uDACE,oBAAC,mBAAD;AAAqB,IAAA,SAAS,EAAG,GAAEJ,IAAK,IAAGC,QAAQ,GAAG,UAAH,GAAgBF,OAAQ,IAAGF,IAAI,IAAI,WAAY,EAAlG;AAAqG,IAAA,OAAO,EAAE,MAAMK,OAAO;AAA3H,KAEGL,IAAI,IAAIJ,KAAK,CAACI,IAAD,CAAL,CAAY;AAAEG,IAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBI,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFX,EAKGT,IALH,CADF,CADF;AAWD,CAlCD;;AAoCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n import {Size} from '../types'; \n /**\n  * Import custom styles.\n  */\n import { ActionChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { ActionChipProps } from './ChipTypes';\n \n const ActionChip: React.FunctionComponent<ActionChipProps> = ({ icon, text, variant, size, disabled, onClick }: ActionChipProps) => {\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 === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Action Chip component.\n    */\n   return (\n     <>\n       <ActionChipContainer className={`${size} ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n         { /* Let's render icon if it is passed */ }\n         {icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </ActionChipContainer>\n     </>\n   );\n };\n \n export default ActionChip;\n "],"file":"ActionChip.js"}
+{"version":3,"sources":["../../../src/Chips/ActionChip.tsx"],"names":["React","SystemIcons","icons","Size","ActionChipContainer","ActionChip","icon","text","variant","size","disabled","onClick","getIconSize","iconSize","Small","Medium","className"],"mappings":"AAAA;AACA;AACA;AACC,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACD;AACA;;AACC,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA;AACD;AACA;;AACC,SAASC,mBAAT,QAAoC,cAApC;AAEA;AACD;AACA;;;;;;AAGC,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAAuE;AAAA,MAApEC,IAAoE,QAApEA,IAAoE;AAAA,MAA9DC,IAA8D,QAA9DA,IAA8D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,IAA+C,QAA/CA,IAA+C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,MAA/BC,QAA+B,QAA/BA,OAA+B;;AAClI;AACH;AACA;AACA;AACG,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAKN,IAAI,CAACW,KAAlB,EAAyB;AACvBD,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAKN,IAAI,CAACY,MAAlB,EAA0B;AAC/BF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE;AAAA,2BACE,MAAC,mBAAD;AAAqB,MAAA,SAAS,YAAKJ,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBF,OAArC,cAAgDF,IAAI,IAAI,WAAxD,CAA9B;AAAqG,MAAA,OAAO,EAAE;AAAA,eAAMK,QAAO,EAAb;AAAA,OAA9G;AAAA,iBAEGL,IAAI,IAAIJ,KAAK,CAACI,IAAD,CAAL,CAAY;AAAEG,QAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBI,QAAAA,SAAS,EAAE;AAAlC,OAAZ,CAFX,EAKGT,IALH;AAAA;AADF,IADF;AAWD,CAlCD;;AAoCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n import {Size} from '../types'; \n /**\n  * Import custom styles.\n  */\n import { ActionChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { ActionChipProps } from './ChipTypes';\n \n const ActionChip: React.FunctionComponent<ActionChipProps> = ({ icon, text, variant, size, disabled, onClick }: ActionChipProps) => {\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 === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Action Chip component.\n    */\n   return (\n     <>\n       <ActionChipContainer className={`${size} ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n         { /* Let's render icon if it is passed */ }\n         {icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </ActionChipContainer>\n     </>\n   );\n };\n \n export default ActionChip;\n "],"file":"ActionChip.js"}