@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.3

package/dist/esm/Button/Button.js

@@ -1,541 +0,0 @@
-import _pt from "prop-types";
-const _excluded = ["children", "variant", "type", "size", "width", "minWidth", "testId", "disabled", "flatEdge", "icon"],
-      _excluded2 = ["loading"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-import { LoadingIndicator } from '../LoadingIndicator';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-import { COLORS } from '../styles';
-import { Size } from '../types';
-
-const getBorderRadius = (flatEdge, radius) => {
-  switch (flatEdge) {
-    case 'left':
-      return `0px ${radius}px ${radius}px 0px`;
-
-    case 'right':
-      return `${radius}px 0px 0px ${radius}px`;
-
-    case 'none':
-    default:
-      return `${radius}px`;
-  }
-};
-
-const tabbedHereStyle = (variant, colorTheme) => {
-  switch (variant) {
-    case 'primary':
-      return css`
-        outline: none;
-        div {
-          outline: none;
-          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-          color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};
-        }
-      `;
-
-    case 'secondary':
-      return css`
-        outline: none;
-        div {
-          outline: none;
-          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-          background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};
-          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};
-          color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};
-        }
-      `;
-
-    case 'tertiary':
-      return css`
-        outline: none;
-        div {
-          outline: none;
-          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-          background-color: ${COLORS.white};
-          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};
-          color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};
-        }
-      `;
-
-    default:
-      return css`
-        outline: none;
-        div {
-          outline: none;
-          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-          color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};
-        }
-      `;
-  }
-};
-
-const Primary = styled.button`
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  min-height: ${props => props.size === Size.Large ? '56px' : '48px'};
-  &.loading-state {
-    cursor: wait;
-  }
-  &:focus:not(:focus-visible),
-  &:focus:not(:focus-visible) > div.button-content {
-    outline: none !important;
-  }
-  div.button-content {
-    ${props => props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white) : props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white) : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};
-
-    background-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary};
-    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};
-    border-width: 2px;
-    border-style: solid;
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary};
-
-    width: ${props => props.width};
-    position: relative;
-
-    min-height: ${props => props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px'};
-    min-width: ${props => props.minWidth};
-
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    // paddings have -2px for border
-    padding: ${props => props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px'};
-
-    span.loading {
-      opacity: 0;
-    }
-    .icon {
-      margin: ${props => props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px'};
-      width: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'};
-      height: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'};
-      svg {
-        width: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'} !important;
-        height: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'} !important;
-      }
-    }
-
-    .extramargin {
-      margin-right: 4px;
-    }
-
-    div {
-      position: absolute;
-      width: 100%;
-      svg {
-        height: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'};
-        width: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'};
-        path {
-          fill: ${props => props.colorTheme === 'dark' ? COLORS.primary : COLORS.white};
-        }
-      }
-    }
-  }
-  &:hover > div.button-content,
-  &.hover-state > div.button-content {
-    background-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-    color: ${props => props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};
-  }
-  &:active > div.button-content,
-  &.active-state > div.button-content {
-    background-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800};
-    box-shadow: none !important;
-    color: ${props => props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white};
-  }
-  ${props => props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : ''}
-  &.focus-state {
-    ${props => tabbedHereStyle('primary', props?.colorTheme)};
-  }
-  &:disabled,
-  &.disabled-state {
-    cursor: not-allowed;
-  }
-  &:disabled > div.button-content,
-  &.disabled-state > div.button-content {
-    pointer-events: none;
-    background-color: ${props => props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
-    color: ${props => props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300};
-    border-color: ${props => props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
-  }
-`;
-const Secondary = styled(Primary)`
-  div.button-content {
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary};
-    background-color: transparent;
-    div svg path {
-      fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};
-    }
-  }
-
-  &:focus:not(:focus-visible),
-  &:focus:not(:focus-visible) > div.button-content {
-    outline: none !important;
-  }
-
-
-  &:hover > div.button-content,
-  &.hover-state > div.button-content {
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700};
-    background-color: transparent;
-    div {
-      svg {
-        path {
-          fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700};
-        }
-      }
-    }
-  }
-  &:active > div.button-content,
-  &.active-state > div.button-content {
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800};
-    background-color: transparent;
-    div {
-      svg {
-        path {
-          fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800};
-        }
-      }
-    }
-  }
-
-  &:disabled > div.button-content,
-  &.disabled-state > div.button-content {
-    background-color: transparent;
-    color: ${props => props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300};
-    border-color: ${props => props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
-  }
-  ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : ''}
-
-  &:focus,
-  &.focus-state {
-    ${props => tabbedHereStyle('secondary', props?.colorTheme)};
-  }
-`;
-const Tertiary = styled(Primary)`
-  div.button-content {
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500};
-    border-color: transparent;
-    background-color: transparent;
-    border-width: 1px;
-    div svg path {
-      fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};
-    }
-  }
-  &:hover > div.button-content,
-  &.hover-state > div.button-content {
-    background-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20};
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20};
-    div {
-      svg {
-        path {
-          fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700};
-        }
-      }
-    }
-  }
-  &:active > div.button-content,
-  &.active-state > div.button-content {
-    background-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100};
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100};
-    div {
-      svg {
-        path {
-          fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800};
-        }
-      }
-    }
-  }
-
-  &:disabled > div.button-content,
-  &.disabled-state > div.button-content {
-    background-color: white !important;
-    color: ${COLORS.neutral_300};
-    border-color: transparent !important;
-  }
-  ${props => props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : ''}
-  &.focus-state {
-    ${props => tabbedHereStyle('tertiary', props?.colorTheme)};
-  }
-`;
-const Correct = styled(Primary)`
-  div.button-content {
-    color: white;
-    border-color: ${COLORS.correct_500};
-    background-color: ${COLORS.correct_500};
-  }
-  &:hover > div.button-content,
-  &.hover-state > div.button-content {
-    border-color: ${COLORS.correct_700};
-    background-color: ${COLORS.correct_700};
-  }
-  &:focus > div.button-content,
-  &.focus-state > div.button-content {
-    border-color: ${COLORS.correct_700};
-    background-color: ${COLORS.correct_700};
-  }
-  &:active > div.button-content,
-  &.active-state > div.button-content {
-    border-color: ${COLORS.correct_800};
-    background-color: ${COLORS.correct_800};
-  }
-
-  &:disabled > div.button-content,
-  &.disabled-state > div.button-content {
-    background-color: ${COLORS.neutral_100};
-    color: ${COLORS.neutral_300};
-    border-color: ${COLORS.neutral_100};
-  }
-`;
-const Critical = styled(Primary)`
-  div.button-content {
-    color: white;
-    border-color: ${COLORS.critical_500};
-    background-color: ${COLORS.critical_500};
-  }
-  &:hover > div.button-content,
-  &.hover-state > div.button-content {
-    border-color: ${COLORS.critical_700};
-    background-color: ${COLORS.critical_700};
-  }
-  &:focus > div.button-content,
-  &.focus-state > div.button-content {
-    border-color: ${COLORS.critical_700};
-    background-color: ${COLORS.critical_700};
-  }
-  &:active > div.button-content,
-  &.active-state > div.button-content {
-    border-color: ${COLORS.critical_800};
-    background-color: ${COLORS.critical_800};
-  }
-
-  &:disabled > div.button-content,
-  &.disabled-state > div.button-content {
-    background-color: ${COLORS.neutral_100};
-    color: ${COLORS.neutral_300};
-    border-color: ${COLORS.neutral_100};
-  }
-`;
-
-const Button = _ref => {
-  let {
-    children = '',
-    variant = 'primary',
-    type = 'button',
-    size = Size.Medium,
-    width = 'auto',
-    minWidth = '64px',
-    testId,
-    disabled,
-    flatEdge,
-    icon
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  // Let's filter out properties that we don't need to render.
-  const {
-    loading
-  } = props,
-        renderProps = _objectWithoutProperties(props, _excluded2);
-
-  const supressFocusRef = React.useRef(null);
-  const [tabbedHere, setTabbedHere] = React.useState(false);
-
-  const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
-    className: (children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')
-  }, icon), children && /*#__PURE__*/React.createElement("span", {
-    className: loading ? 'label loading' : 'label'
-  }, children), loading && /*#__PURE__*/React.createElement(LoadingIndicator, null)); // Let's render button
-
-
-  switch (variant) {
-    case 'primary':
-      return /*#__PURE__*/React.createElement(Primary, _extends({}, renderProps, {
-        disabled: disabled,
-        iconOnly: !children,
-        type: type,
-        size: size,
-        flatEdge: flatEdge,
-        width: width,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        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
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
-
-    case 'secondary':
-      return /*#__PURE__*/React.createElement(Secondary, _extends({}, renderProps, {
-        disabled: disabled,
-        type: type,
-        size: size,
-        iconOnly: !children,
-        flatEdge: flatEdge,
-        width: width,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        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
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
-
-    case 'tertiary':
-      return /*#__PURE__*/React.createElement(Tertiary, _extends({}, renderProps, {
-        disabled: disabled,
-        type: type,
-        flatEdge: flatEdge,
-        size: size,
-        width: width,
-        iconOnly: !children,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        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
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
-
-    case 'correct':
-      return /*#__PURE__*/React.createElement(Correct, _extends({}, renderProps, {
-        disabled: disabled,
-        type: type,
-        size: size,
-        iconOnly: !children,
-        flatEdge: flatEdge,
-        width: width,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        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
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
-
-    case 'critical':
-      return /*#__PURE__*/React.createElement(Critical, _extends({}, renderProps, {
-        disabled: disabled,
-        flatEdge: flatEdge,
-        iconOnly: !children,
-        type: type,
-        size: size,
-        width: width,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        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
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
-
-    default:
-      return /*#__PURE__*/React.createElement(Primary, _extends({}, renderProps, {
-        flatEdge: flatEdge,
-        disabled: disabled,
-        iconOnly: !children,
-        type: type,
-        size: size,
-        width: width,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        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
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
-  }
-};
-
-Button.propTypes = {
-  variant: _pt.oneOf(['primary', 'secondary', 'tertiary', 'correct', 'critical']),
-  role: _pt.oneOfType([_pt.oneOf(['button']), _pt.string]),
-  title: _pt.string,
-  colorTheme: _pt.oneOf(['teal', 'dark']),
-  width: _pt.oneOfType([_pt.oneOf(['auto']), _pt.string]),
-  loading: _pt.bool,
-  testId: _pt.string,
-  tabbedHere: _pt.bool,
-  icon: _pt.node,
-  minWidth: _pt.string,
-  iconOnly: _pt.bool
-};
-export default Button;
-//# sourceMappingURL=Button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["React","styled","css","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Size","getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","button","props","size","Large","Bold","Small","width","minWidth","Medium","iconOnly","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","type","testId","disabled","icon","loading","renderProps","supressFocusRef","useRef","setTabbedHere","useState","renderContent","className","e","current","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\nimport { COLORS, TYPOGRAPHY } from '../styles';\r\nimport { Size } from '../types';\r\n\r\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\r\n  switch(flatEdge)\r\n  {\r\n      case 'left':\r\n          return `0px ${radius}px ${radius}px 0px`;\r\n      \r\n      case 'right':\r\n          return `${radius}px 0px 0px ${radius}px`;\r\n\r\n      case 'none':\r\n      default:\r\n          return `${radius}px`;\r\n  }\r\n}\r\n\r\n\r\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\r\n  switch (variant) {\r\n    case 'primary':\r\n      return css`\r\n        outline: none;\r\n        div {\r\n          outline: none;\r\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n          color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};\r\n        }\r\n      `;\r\n    case 'secondary':\r\n      return css`\r\n        outline: none;\r\n        div {\r\n          outline: none;\r\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n          background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\r\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\r\n          color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\r\n        }\r\n      `;\r\n    case 'tertiary':\r\n      return css`\r\n        outline: none;\r\n        div {\r\n          outline: none;\r\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n          background-color: ${COLORS.white};\r\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\r\n          color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\r\n        }\r\n      `;\r\n\r\n    default:\r\n      return css`\r\n        outline: none;\r\n        div {\r\n          outline: none;\r\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n          color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\r\n        }\r\n      `;\r\n  }\r\n};\r\n\r\nconst Primary = styled.button<ButtonProps>`\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  box-sizing: border-box;\r\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\r\n  &.loading-state {\r\n    cursor: wait;\r\n  }\r\n  &:focus:not(:focus-visible),\r\n  &:focus:not(:focus-visible) > div.button-content {\r\n    outline: none !important;\r\n  }\r\n  div.button-content {\r\n    ${(props) =>\r\n      props.size === Size.Large\r\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\r\n        : props.size === Size.Small\r\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\r\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\r\n\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\r\n    border-width: 2px;\r\n    border-style: solid;\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n\r\n    width: ${(props) => props.width};\r\n    position: relative;\r\n\r\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\r\n    min-width: ${props => props.minWidth};\r\n\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 4px;\r\n    // paddings have -2px for border\r\n    padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\r\n\r\n    span.loading {\r\n      opacity: 0;\r\n    }\r\n    .icon {\r\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\r\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n      svg {\r\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\r\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\r\n      }\r\n    }\r\n\r\n    .extramargin {\r\n      margin-right: 4px;\r\n    }\r\n\r\n    div {\r\n      position: absolute;\r\n      width: 100%;\r\n      svg {\r\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\r\n    box-shadow: none !important;\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\r\n  }\r\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\r\n  &.focus-state {\r\n    ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\r\n  }\r\n  &:disabled,\r\n  &.disabled-state {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    pointer-events: none;\r\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\r\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  }\r\n`;\r\n\r\nconst Secondary = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n    background-color: transparent;\r\n    div svg path {\r\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(:focus-visible),\r\n  &:focus:not(:focus-visible) > div.button-content {\r\n    outline: none !important;\r\n  }\r\n\r\n\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: transparent;\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\r\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  }\r\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\r\n  }\r\n`;\r\n\r\nconst Tertiary = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\r\n    border-color: transparent;\r\n    background-color: transparent;\r\n    border-width: 1px;\r\n    div svg path {\r\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\r\n    }\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: white !important;\r\n    color: ${COLORS.neutral_300};\r\n    border-color: transparent !important;\r\n  }\r\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\r\n  &.focus-state {\r\n    ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\r\n  }\r\n`;\r\n\r\nconst Correct = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: white;\r\n    border-color: ${COLORS.correct_500};\r\n    background-color: ${COLORS.correct_500};\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    border-color: ${COLORS.correct_700};\r\n    background-color: ${COLORS.correct_700};\r\n  }\r\n  &:focus > div.button-content,\r\n  &.focus-state > div.button-content {\r\n    border-color: ${COLORS.correct_700};\r\n    background-color: ${COLORS.correct_700};\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    border-color: ${COLORS.correct_800};\r\n    background-color: ${COLORS.correct_800};\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_300};\r\n    border-color: ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nconst Critical = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: white;\r\n    border-color: ${COLORS.critical_500};\r\n    background-color: ${COLORS.critical_500};\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    border-color: ${COLORS.critical_700};\r\n    background-color: ${COLORS.critical_700};\r\n  }\r\n  &:focus > div.button-content,\r\n  &.focus-state > div.button-content {\r\n    border-color: ${COLORS.critical_700};\r\n    background-color: ${COLORS.critical_700};\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    border-color: ${COLORS.critical_800};\r\n    background-color: ${COLORS.critical_800};\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_300};\r\n    border-color: ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  role?: 'button' | string;\r\n  title?: string;\r\n  size?: Size;\r\n  colorTheme?: 'teal' | 'dark';\r\n  width?: 'auto' | string;\r\n  loading?: boolean;\r\n  testId?: string;\r\n  tabbedHere?: boolean;\r\n  icon?: React.ReactNode;\r\n  minWidth?: string;\r\n  iconOnly?: boolean;\r\n}\r\n\r\nconst Button: React.FunctionComponent<ButtonProps> = ({\r\n  children = '',\r\n  variant = 'primary',\r\n  type = 'button',\r\n  size = Size.Medium,\r\n  width = 'auto',\r\n  minWidth = '64px',\r\n  testId,\r\n  disabled,\r\n  flatEdge,\r\n  icon,\r\n  ...props\r\n}) => {\r\n  // Let's filter out properties that we don't need to render.\r\n  const { loading, ...renderProps } = props;\r\n  const supressFocusRef = React.useRef<any>(null);\r\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\r\n\r\n  const renderContent = () => (\r\n    <>\r\n      {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\r\n      {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\r\n      {loading && <LoadingIndicator></LoadingIndicator>}\r\n    </>\r\n  );\r\n\r\n  // Let's render button\r\n  switch (variant) {\r\n    case 'primary':\r\n      return (\r\n        <Primary\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          iconOnly={!children}\r\n          type={type}\r\n          size={size}\r\n          flatEdge={flatEdge}\r\n          width={width}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Primary>\r\n      );\r\n    case 'secondary':\r\n      return (\r\n        <Secondary\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          type={type}\r\n          size={size}\r\n          iconOnly={!children}\r\n          flatEdge={flatEdge}\r\n          width={width}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Secondary>\r\n      );\r\n    case 'tertiary':\r\n      return (\r\n        <Tertiary\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          type={type}\r\n          flatEdge={flatEdge}\r\n          size={size}\r\n          width={width}\r\n          iconOnly={!children}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Tertiary>\r\n      );\r\n    case 'correct':\r\n      return (\r\n        <Correct\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          type={type}\r\n          size={size}\r\n          iconOnly={!children}\r\n          flatEdge={flatEdge}\r\n          width={width}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Correct>\r\n      );\r\n    case 'critical':\r\n      return (\r\n        <Critical\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          flatEdge={flatEdge}\r\n          iconOnly={!children}\r\n          type={type}\r\n          size={size}\r\n          width={width}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Critical>\r\n      );\r\n    default:\r\n      return (\r\n        <Primary\r\n          {...renderProps}\r\n          flatEdge={flatEdge}\r\n          disabled={disabled}\r\n          iconOnly={!children}\r\n          type={type}\r\n          size={size}\r\n          width={width}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Primary>\r\n      );\r\n  }\r\n};\r\n\r\nexport default Button;\r\n"],"file":"Button.js"}