@laerdal/life-react-components 1.7.0-dev.13.full → 1.7.0-dev.16

package/dist/Button/Iconbutton.cjs

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledSecondaryIconButton = exports.StyledPrimaryIconButton = void 0;
+exports.default = exports.StyledSecondaryIconButton = exports.StyledPrimaryIconButton = exports.IconButtonContent = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -21,7 +21,7 @@ var _common = require("../common");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var getBorderRadius = function getBorderRadius(props) {
   return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
@@ -43,11 +43,15 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
   }
 };
 
-var StyledIconButton = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\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\n  &:focus {\n    ", "\n  }\n"])), function (props) {
+var IconButtonContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.IconButtonContent = IconButtonContent;
+
+var StyledIconButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  ", " {\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\n  &:focus {\n    ", "\n  }\n"])), function (props) {
   return props.hideOnLowWidth ? 'none' : 'block';
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
   return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
-}, getBorderRadiusStyle, function (props) {
+}, IconButtonContent, getBorderRadiusStyle, function (props) {
   return props.unsetIconSize ? 'unset' : '24px';
 }, function (props) {
   return props.unsetIconSize ? 'unset' : '24px';
@@ -55,21 +59,21 @@ var StyledIconButton = _styledComponents.default.button(_templateObject || (_tem
   return props.invertFocus ? _styles.invertedFocusStyles : _styles.focusStyles;
 });
 
-var StyledPrimaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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\n"])), function (props) {
+var StyledPrimaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), IconButtonContent, function (props) {
   return props.useTransparentBackground ? 'transparent' : _styles.COLORS.primary_500;
 }, function (props) {
   return props.iconColor || _styles.COLORS.white;
 }, function (props) {
   return props.iconColor || _styles.COLORS.white;
-}, _styles.COLORS.primary_700, _styles.COLORS.white, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_200, _styles.COLORS.white, _styles.COLORS.white);
+}, IconButtonContent, _styles.COLORS.primary_700, IconButtonContent, IconButtonContent, _styles.COLORS.white, IconButtonContent, _styles.COLORS.primary_800, IconButtonContent, IconButtonContent, _styles.COLORS.white, IconButtonContent, _styles.COLORS.neutral_200, _styles.COLORS.white, _styles.COLORS.white);
 exports.StyledPrimaryIconButton = StyledPrimaryIconButton;
-var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\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"])), function (props) {
+var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  \n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), IconButtonContent, function (props) {
   return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
 }, function (props) {
   return props.iconColor || _styles.COLORS.neutral_600;
 }, function (props) {
   return props.iconColor || _styles.COLORS.neutral_600;
-}, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, function (props) {
+}, IconButtonContent, _styles.COLORS.primary_20, IconButtonContent, IconButtonContent, _styles.COLORS.primary_700, IconButtonContent, _styles.COLORS.primary_100, IconButtonContent, IconButtonContent, _styles.COLORS.primary_800, IconButtonContent, function (props) {
   return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
 }, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
 exports.StyledSecondaryIconButton = StyledSecondaryIconButton;
@@ -122,7 +126,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         style: style,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContent, {
           children: children
         })
       });
@@ -153,7 +157,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         style: style,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContent, {
           children: children
         })
       });

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} 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  invertFocus?: boolean;\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  position: relative;\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\n  &:focus {\n    ${props => props.invertFocus ? invertedFocusStyles : focusStyles}\n  }\n`;\n\nexport const 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\n`;\n\nexport const 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  \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`;\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  style?: CSSProperties | undefined;\n  invertFocus?: 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  style,\n  invertFocus\n}: IconButtonProps, ref) => {\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          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          style={style}\n          invertFocus={invertFocus}\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          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          style={style}\n          invertFocus={invertFocus}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} 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  invertFocus?: boolean;\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\nexport const IconButtonContent = styled.div``;\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\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  ${IconButtonContent} {\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\n  &:focus {\n    ${props => props.invertFocus ? invertedFocusStyles : focusStyles}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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  \n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\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`;\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  style?: CSSProperties | undefined;\n  invertFocus?: 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  style,\n  invertFocus\n}: IconButtonProps, ref) => {\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          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          style={style}\n          invertFocus={invertFocus}\n          focusBackgroundColor={focusBackgroundColor}>\n          <IconButtonContent>{children}</IconButtonContent>\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          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          style={style}\n          invertFocus={invertFocus}\n          focusBackgroundColor={focusBackgroundColor}>\n          <IconButtonContent>{children}</IconButtonContent>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}

package/dist/Button/Iconbutton.d.ts

@@ -12,6 +12,7 @@ interface HeaderItemProps {
     focusBackgroundColor?: string;
     invertFocus?: boolean;
 }
+export declare const IconButtonContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledPrimaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export declare const StyledSecondaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export interface IconButtonProps {

package/dist/Button/Iconbutton.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import React from 'react';
 import styled from 'styled-components';
@@ -29,31 +29,32 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
   }
 };
 
-var StyledIconButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\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\n  &:focus {\n    ", "\n  }\n"])), function (props) {
+export var IconButtonContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+var StyledIconButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  ", " {\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\n  &:focus {\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) {
+}, IconButtonContent, getBorderRadiusStyle, function (props) {
   return props.unsetIconSize ? 'unset' : '24px';
 }, function (props) {
   return props.unsetIconSize ? 'unset' : '24px';
 }, function (props) {
   return props.invertFocus ? invertedFocusStyles : focusStyles;
 });
-export 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\n"])), function (props) {
+export var StyledPrimaryIconButton = styled(StyledIconButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), IconButtonContent, 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);
-export 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  \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"])), function (props) {
+}, IconButtonContent, COLORS.primary_700, IconButtonContent, IconButtonContent, COLORS.white, IconButtonContent, COLORS.primary_800, IconButtonContent, IconButtonContent, COLORS.white, IconButtonContent, COLORS.neutral_200, COLORS.white, COLORS.white);
+export var StyledSecondaryIconButton = styled(StyledIconButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  \n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n"])), IconButtonContent, 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) {
+}, IconButtonContent, COLORS.primary_20, IconButtonContent, IconButtonContent, COLORS.primary_700, IconButtonContent, COLORS.primary_100, IconButtonContent, IconButtonContent, COLORS.primary_800, IconButtonContent, function (props) {
   return props.useTransparentBackground ? 'transparent' : COLORS.white;
 }, COLORS.neutral_300, COLORS.neutral_300);
 var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -104,7 +105,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         style: style,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor,
-        children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(IconButtonContent, {
           children: children
         })
       });
@@ -135,7 +136,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         style: style,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor,
-        children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(IconButtonContent, {
           children: children
         })
       });

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} 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  invertFocus?: boolean;\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  position: relative;\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\n  &:focus {\n    ${props => props.invertFocus ? invertedFocusStyles : focusStyles}\n  }\n`;\n\nexport const 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\n`;\n\nexport const 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  \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`;\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  style?: CSSProperties | undefined;\n  invertFocus?: 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  style,\n  invertFocus\n}: IconButtonProps, ref) => {\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          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          style={style}\n          invertFocus={invertFocus}\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          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          style={style}\n          invertFocus={invertFocus}\n          focusBackgroundColor={focusBackgroundColor}>\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","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} 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  invertFocus?: boolean;\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\nexport const IconButtonContent = styled.div``;\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\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  ${IconButtonContent} {\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\n  &:focus {\n    ${props => props.invertFocus ? invertedFocusStyles : focusStyles}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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  \n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\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`;\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  style?: CSSProperties | undefined;\n  invertFocus?: 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  style,\n  invertFocus\n}: IconButtonProps, ref) => {\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          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          style={style}\n          invertFocus={invertFocus}\n          focusBackgroundColor={focusBackgroundColor}>\n          <IconButtonContent>{children}</IconButtonContent>\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          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          style={style}\n          invertFocus={invertFocus}\n          focusBackgroundColor={focusBackgroundColor}>\n          <IconButtonContent>{children}</IconButtonContent>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/Toggles/ToggleButton.cjs

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ToggleButton = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("../Button");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Iconbutton = require("../Button/Iconbutton");
+
+var _styles = require("../styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), _Iconbutton.IconButtonContent, _Iconbutton.IconButtonContent, _styles.COLORS.white, _Iconbutton.IconButtonContent, _styles.COLORS.primary_500, _Iconbutton.IconButtonContent, _styles.COLORS.neutral_300);
+
+var ToggleButton = function ToggleButton(props) {
+  var _props$activeState$co, _props$activeState, _props$activeState$ic, _props$activeState2;
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      active = _React$useState2[0],
+      setActive = _React$useState2[1];
+
+  _react.default.useEffect(function () {
+    return setActive(props.active);
+  }, [props.active]);
+
+  var cls = "".concat(active ? 'active' : '', " ").concat(props.activeState ? 'state-change' : '', " ").concat(props.disabled ? 'disabled' : '');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    className: cls,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      variant: 'secondary',
+      useTransparentBackground: true,
+      shape: 'circular',
+      action: function action() {
+        setActive(!active);
+
+        if (props.onChange) {
+          props.onChange(!active);
+        }
+      },
+      iconColor: active ? (_props$activeState$co = (_props$activeState = props.activeState) === null || _props$activeState === void 0 ? void 0 : _props$activeState.color) !== null && _props$activeState$co !== void 0 ? _props$activeState$co : props.defaultState.color : props.defaultState.color,
+      disabled: props.disabled,
+      children: active ? (_props$activeState$ic = (_props$activeState2 = props.activeState) === null || _props$activeState2 === void 0 ? void 0 : _props$activeState2.icon) !== null && _props$activeState$ic !== void 0 ? _props$activeState$ic : props.defaultState.icon : props.defaultState.icon
+    })
+  });
+};
+
+exports.ToggleButton = ToggleButton;
+ToggleButton.propTypes = {
+  active: _propTypes.default.bool.isRequired,
+  onChange: _propTypes.default.func,
+  disabled: _propTypes.default.bool,
+  defaultState: _propTypes.default.shape({
+    icon: _propTypes.default.node.isRequired,
+    color: _propTypes.default.string
+  }).isRequired,
+  activeState: _propTypes.default.shape({
+    icon: _propTypes.default.node.isRequired,
+    color: _propTypes.default.string
+  })
+};
+var _default = ToggleButton;
+exports.default = _default;
+//# sourceMappingURL=ToggleButton.cjs.map

package/dist/Toggles/ToggleButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toggles/ToggleButton.tsx"],"names":["Wrapper","styled","div","IconButtonContent","COLORS","white","primary_500","neutral_300","ToggleButton","props","React","useState","active","setActive","useEffect","cls","activeState","disabled","onChange","color","defaultState","icon"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,okBACTC,6BADS,EAOPA,6BAPO,EAQOC,eAAOC,KARd,EAaPF,6BAbO,EAkBaC,eAAOE,WAlBpB,EA0BPH,6BA1BO,EA2BOC,eAAOG,WA3Bd,CAAb;;AA8CO,IAAMC,YAAwD,GAAG,SAA3DA,YAA2D,CAACC,KAAD,EAAW;AAAA;;AAEjF,wBAA4BC,eAAMC,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAH,iBAAMI,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACJ,KAAK,CAACG,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACH,KAAK,CAACG,MAAP,CAA/C;;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCH,KAAK,CAACO,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EP,KAAK,CAACQ,QAAN,GAAiB,UAAjB,GAA8B,EAAzG,CAAT;AAEA,sBACE,qBAAC,OAAD;AAAS,IAAA,SAAS,EAAEF,GAApB;AAAA,2BACE,qBAAC,kBAAD;AAAY,MAAA,OAAO,EAAE,WAArB;AACY,MAAA,wBAAwB,EAAE,IADtC;AAEY,MAAA,KAAK,EAAE,UAFnB;AAGY,MAAA,MAAM,EAAE,kBAAM;AACZF,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIH,KAAK,CAACS,QAAV,EAAoB;AAClBT,UAAAA,KAAK,CAACS,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OARb;AASY,MAAA,SAAS,EAAEA,MAAM,kDAAGH,KAAK,CAACO,WAAT,uDAAG,mBAAmBG,KAAtB,yEAA+BV,KAAK,CAACW,YAAN,CAAmBD,KAAlD,GAA0DV,KAAK,CAACW,YAAN,CAAmBD,KAT1G;AAUY,MAAA,QAAQ,EAAEV,KAAK,CAACQ,QAV5B;AAAA,gBAWGL,MAAM,mDAAGH,KAAK,CAACO,WAAT,wDAAG,oBAAmBK,IAAtB,yEAA8BZ,KAAK,CAACW,YAAN,CAAmBC,IAAjD,GAAwDZ,KAAK,CAACW,YAAN,CAAmBC;AAXpF;AADF,IADF;AAiBD,CAzBM;;;;AARLT,EAAAA,M;AACAM,EAAAA,Q;AACAD,EAAAA,Q;AAEAG,EAAAA,Y;AATAC,IAAAA,I;AACAF,IAAAA,K;;AASAH,EAAAA,W;AAVAK,IAAAA,I;AACAF,IAAAA,K;;;eAuCaX,Y","sourcesContent":["import React from 'react';\nimport {IconButton} from '../Button';\nimport styled from 'styled-components';\nimport {IconButtonContent} from '../Button/Iconbutton';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContent} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContent} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContent}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContent}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton: React.FunctionComponent<ToggleButtonProps> = (props) => {\n\n  const [active, setActive] = React.useState(false);\n\n  React.useEffect(() => setActive(props.active), [props.active]);\n\n  const cls = `${active ? 'active' : ''} ${props.activeState ? 'state-change' : ''} ${props.disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton variant={'secondary'}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  action={() => {\n                    setActive(!active);\n                    if (props.onChange) {\n                      props.onChange(!active);\n                    }\n                  }}\n                  iconColor={active ? props.activeState?.color ?? props.defaultState.color : props.defaultState.color}\n                  disabled={props.disabled}>\n        {active ? props.activeState?.icon ?? props.defaultState.icon : props.defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  )\n}\n\nexport default ToggleButton;\n"],"file":"ToggleButton.cjs"}

package/dist/Toggles/ToggleButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ToggleButtonState {
+    icon: React.ReactNode;
+    color?: string;
+}
+export interface ToggleButtonProps {
+    active: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    defaultState: ToggleButtonState;
+    activeState?: ToggleButtonState;
+}
+export declare const ToggleButton: React.FunctionComponent<ToggleButtonProps>;
+export default ToggleButton;

package/dist/Toggles/ToggleButton.js

@@ -0,0 +1,59 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject;
+
+import React from 'react';
+import { IconButton } from '../Button';
+import styled from 'styled-components';
+import { IconButtonContent } from '../Button/Iconbutton';
+import { COLORS } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContent, IconButtonContent, COLORS.white, IconButtonContent, COLORS.primary_500, IconButtonContent, COLORS.neutral_300);
+export var ToggleButton = function ToggleButton(props) {
+  var _props$activeState$co, _props$activeState, _props$activeState$ic, _props$activeState2;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      active = _React$useState2[0],
+      setActive = _React$useState2[1];
+
+  React.useEffect(function () {
+    return setActive(props.active);
+  }, [props.active]);
+  var cls = "".concat(active ? 'active' : '', " ").concat(props.activeState ? 'state-change' : '', " ").concat(props.disabled ? 'disabled' : '');
+  return /*#__PURE__*/_jsx(Wrapper, {
+    className: cls,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      variant: 'secondary',
+      useTransparentBackground: true,
+      shape: 'circular',
+      action: function action() {
+        setActive(!active);
+
+        if (props.onChange) {
+          props.onChange(!active);
+        }
+      },
+      iconColor: active ? (_props$activeState$co = (_props$activeState = props.activeState) === null || _props$activeState === void 0 ? void 0 : _props$activeState.color) !== null && _props$activeState$co !== void 0 ? _props$activeState$co : props.defaultState.color : props.defaultState.color,
+      disabled: props.disabled,
+      children: active ? (_props$activeState$ic = (_props$activeState2 = props.activeState) === null || _props$activeState2 === void 0 ? void 0 : _props$activeState2.icon) !== null && _props$activeState$ic !== void 0 ? _props$activeState$ic : props.defaultState.icon : props.defaultState.icon
+    })
+  });
+};
+ToggleButton.propTypes = {
+  active: _pt.bool.isRequired,
+  onChange: _pt.func,
+  disabled: _pt.bool,
+  defaultState: _pt.shape({
+    icon: _pt.node.isRequired,
+    color: _pt.string
+  }).isRequired,
+  activeState: _pt.shape({
+    icon: _pt.node.isRequired,
+    color: _pt.string
+  })
+};
+export default ToggleButton;
+//# sourceMappingURL=ToggleButton.js.map

package/dist/Toggles/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toggles/ToggleButton.tsx"],"names":["React","IconButton","styled","IconButtonContent","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","props","useState","active","setActive","useEffect","cls","activeState","disabled","onChange","color","defaultState","icon"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AACA,SAAQC,MAAR,QAAqB,WAArB;;AAEA,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAV,sjBACTH,iBADS,EAOPA,iBAPO,EAQOC,MAAM,CAACG,KARd,EAaPJ,iBAbO,EAkBaC,MAAM,CAACI,WAlBpB,EA0BPL,iBA1BO,EA2BOC,MAAM,CAACK,WA3Bd,CAAb;AA8CA,OAAO,IAAMC,YAAwD,GAAG,SAA3DA,YAA2D,CAACC,KAAD,EAAW;AAAA;;AAEjF,wBAA4BX,KAAK,CAACY,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAd,EAAAA,KAAK,CAACe,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACH,KAAK,CAACE,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACF,KAAK,CAACE,MAAP,CAA/C;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCF,KAAK,CAACM,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EN,KAAK,CAACO,QAAN,GAAiB,UAAjB,GAA8B,EAAzG,CAAT;AAEA,sBACE,KAAC,OAAD;AAAS,IAAA,SAAS,EAAEF,GAApB;AAAA,2BACE,KAAC,UAAD;AAAY,MAAA,OAAO,EAAE,WAArB;AACY,MAAA,wBAAwB,EAAE,IADtC;AAEY,MAAA,KAAK,EAAE,UAFnB;AAGY,MAAA,MAAM,EAAE,kBAAM;AACZF,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIF,KAAK,CAACQ,QAAV,EAAoB;AAClBR,UAAAA,KAAK,CAACQ,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OARb;AASY,MAAA,SAAS,EAAEA,MAAM,kDAAGF,KAAK,CAACM,WAAT,uDAAG,mBAAmBG,KAAtB,yEAA+BT,KAAK,CAACU,YAAN,CAAmBD,KAAlD,GAA0DT,KAAK,CAACU,YAAN,CAAmBD,KAT1G;AAUY,MAAA,QAAQ,EAAET,KAAK,CAACO,QAV5B;AAAA,gBAWGL,MAAM,mDAAGF,KAAK,CAACM,WAAT,wDAAG,oBAAmBK,IAAtB,yEAA8BX,KAAK,CAACU,YAAN,CAAmBC,IAAjD,GAAwDX,KAAK,CAACU,YAAN,CAAmBC;AAXpF;AADF,IADF;AAiBD,CAzBM;;AARLT,EAAAA,M;AACAM,EAAAA,Q;AACAD,EAAAA,Q;AAEAG,EAAAA,Y;AATAC,IAAAA,I;AACAF,IAAAA,K;;AASAH,EAAAA,W;AAVAK,IAAAA,I;AACAF,IAAAA,K;;;AAuCF,eAAeV,YAAf","sourcesContent":["import React from 'react';\nimport {IconButton} from '../Button';\nimport styled from 'styled-components';\nimport {IconButtonContent} from '../Button/Iconbutton';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContent} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContent} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContent}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContent}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton: React.FunctionComponent<ToggleButtonProps> = (props) => {\n\n  const [active, setActive] = React.useState(false);\n\n  React.useEffect(() => setActive(props.active), [props.active]);\n\n  const cls = `${active ? 'active' : ''} ${props.activeState ? 'state-change' : ''} ${props.disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton variant={'secondary'}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  action={() => {\n                    setActive(!active);\n                    if (props.onChange) {\n                      props.onChange(!active);\n                    }\n                  }}\n                  iconColor={active ? props.activeState?.color ?? props.defaultState.color : props.defaultState.color}\n                  disabled={props.disabled}>\n        {active ? props.activeState?.icon ?? props.defaultState.icon : props.defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  )\n}\n\nexport default ToggleButton;\n"],"file":"ToggleButton.js"}

package/dist/Toggles/index.cjs

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ToggleButton", {
+  enumerable: true,
+  get: function get() {
+    return _ToggleButton.default;
+  }
+});
 Object.defineProperty(exports, "ToggleSwitch", {
   enumerable: true,
   get: function get() {
@@ -13,4 +19,6 @@ Object.defineProperty(exports, "ToggleSwitch", {
 });
 
 var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+var _ToggleButton = _interopRequireDefault(require("./ToggleButton"));
 //# sourceMappingURL=index.cjs.map

package/dist/Toggles/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\n\nexport { ToggleSwitch };\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/Toggles/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\nimport ToggleButton from './ToggleButton';\n\nexport {ToggleSwitch, ToggleButton};\n"],"file":"index.cjs"}

package/dist/Toggles/index.d.ts

@@ -1,2 +1,3 @@
 import ToggleSwitch from './ToggleSwitch';
-export { ToggleSwitch };
+import ToggleButton from './ToggleButton';
+export { ToggleSwitch, ToggleButton };

package/dist/Toggles/index.js

@@ -1,3 +1,4 @@
 import ToggleSwitch from './ToggleSwitch';
-export { ToggleSwitch };
+import ToggleButton from './ToggleButton';
+export { ToggleSwitch, ToggleButton };
 //# sourceMappingURL=index.js.map

package/dist/Toggles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/index.ts"],"names":["ToggleSwitch"],"mappings":"AAAA,OAAOA,YAAP,MAAyB,gBAAzB;AAEA,SAASA,YAAT","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\n\nexport { ToggleSwitch };\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/Toggles/index.ts"],"names":["ToggleSwitch","ToggleButton"],"mappings":"AAAA,OAAOA,YAAP,MAAyB,gBAAzB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,SAAQD,YAAR,EAAsBC,YAAtB","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\nimport ToggleButton from './ToggleButton';\n\nexport {ToggleSwitch, ToggleButton};\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.7.0-dev.13.full",
+  "version": "1.7.0-dev.16",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [