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

package/dist/esm/Button/CommonStyling.js

@@ -1,394 +0,0 @@
-import styled, { css } from 'styled-components';
-import { COLORS, TYPOGRAPHY } from '../styles';
-
-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_500 : 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};
-          }
-        `;
-  }
-};
-
-export const Primary = styled.button`
-border: none;
-background-color: transparent;
-cursor: pointer;
-padding: 0;
-margin: 0;
-box-sizing: border-box;
-min-height: ${props => props.size === 'big' ? '56px' : '48px'};
-&.loading-state {
-  cursor: wait;
-}
-&:focus:not(:focus-visible),
-&:focus:not(:focus-visible) > div.button-content {
-  outline: 0 !important;
-}
-div.button-content {
-  color: ${props => 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};
-  font-family: ${TYPOGRAPHY.fontFamily};
-  font-weight: bold;
-  font-size: ${props => props.size === 'big' ? '20px' : props.size === 'small' ? '16px' : '18px'};
-  line-height: ${props => props.size === 'big' ? '24px' : props.size === 'small' ? '20px' : '24px'};
-  width: ${props => props.width};
-  position: relative;
-
-  min-height: ${props => props.size === 'big' ? '56px' : props.size === 'small' ? '32px' : '40px'};
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  // paddings have -2px for border
-  padding: ${props => props.size === 'big' ? '14px 18px' : props.size === 'small' ? '4px 10px' : '6px 14px'};
-
-  span.loading {
-    opacity: 0;
-  }
-  .icon {
-    margin-left: -4px;
-    margin-top: -2px;
-    margin-bottom: -2px;
-    width: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'};
-    height: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'};
-    svg {
-      width: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'} !important;
-      height: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'} !important;
-    }
-  }
-
-  div {
-    position: absolute;
-    width: 100%;
-    svg {
-      height: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'};
-      width: ${props => props.size === 'big' ? '28px' : props.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 {
-  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};
-  cursor: not-allowed;
-  &:hover,
-  &:active {
-    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};
-  }
-}
-`;
-export 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};
-  }
-}
-&: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 {
-  background-color: white;
-  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,
-&.disabled-state {
-  cursor: not-allowed;
-}
-&: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};
-  cursor: not-allowed;
-}
-${props => props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : ''}
-&.focus-state {
-  ${props => tabbedHereStyle('secondary', props?.colorTheme)};
-}
-`;
-export 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,
-&.disabled-state {
-  cursor: not-allowed;
-}
-&:disabled > div.button-content,
-&.disabled-state > div.button-content {
-  background-color: white !important;
-  color: ${COLORS.neutral_300};
-  border-color: transparent;
-  cursor: not-allowed;
-}
-&:disabled,
-&.disabled-state {
-  cursor: not-allowed;
-}
-&:disabled > div.button-content,
-&.disabled-state > div.button-content {
-  background-color: white !important;
-  color: ${COLORS.neutral_300};
-  border-color: transparent !important;
-  cursor: not-allowed;
-}
-${props => props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : ''}
-&.focus-state {
-  ${props => tabbedHereStyle('tertiary', props?.colorTheme)};
-}
-`;
-export 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,
-&.disabled-state {
-  cursor: not-allowed;
-}
-&:disabled > div.button-content,
-&.disabled-state > div.button-content {
-  background-color: ${COLORS.neutral_100};
-  color: ${COLORS.neutral_300};
-  border-color: ${COLORS.neutral_100};
-  cursor: not-allowed;
-  &:hover,
-  &:active {
-    background-color: ${COLORS.neutral_100};
-    color: ${COLORS.neutral_300};
-    border-color: ${COLORS.neutral_100};
-  }
-}
-`;
-export 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,
-&.disabled-state {
-  cursor: not-allowed;
-}
-&:disabled > div.button-content,
-&.disabled-state > div.button-content {
-  background-color: ${COLORS.neutral_100};
-  color: ${COLORS.neutral_300};
-  border-color: ${COLORS.neutral_100};
-  cursor: not-allowed;
-  &:hover,
-  &:active {
-    background-color: ${COLORS.neutral_100};
-    color: ${COLORS.neutral_300};
-    border-color: ${COLORS.neutral_100};
-  }
-}
-`;
-export const Text = styled.button`
-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};
-background-color: transparent;
-padding: 0;
-border: none;
-text-decoration: underline;
-font-size: ${props => props.size === 'big' ? '22px' : props.size === 'small' ? '16px' : '19px'};
-line-height: ${props => props.size === 'big' ? '26.4px' : props.size === 'small' ? '19.2px' : '22.8px'};
-font-weight: bold;
-font-family: inherit;
-cursor: pointer;
-
-&:hover,
-&:focus,
-&.hover-state,
-&.focus-state {
-  color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700};
-  background: transparent;
-}
-&:active,
-&.active-state {
-  color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800};
-  background: transparent;
-}
-&:disabled,
-&.disabled-state {
-  color: ${COLORS.neutral_500};
-  background: transparent;
-  cursor: not-allowed;
-}
-`;
-//# sourceMappingURL=CommonStyling.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Button/CommonStyling.tsx"],"names":["styled","css","COLORS","TYPOGRAPHY","getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","focus_25","focus","accent1_700","primary_100","primary_700","primary_500","white","accent1","primary_800","primary","accent1_500","Primary","button","props","size","fontFamily","width","primary_600","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","Text","neutral_500"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { ButtonProps } from './Button'\r\nimport { COLORS, TYPOGRAPHY } from '../styles';\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\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_500 : 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\n\r\nexport const Primary = styled.button<ButtonProps>`\r\nborder: none;\r\nbackground-color: transparent;\r\ncursor: pointer;\r\npadding: 0;\r\nmargin: 0;\r\nbox-sizing: border-box;\r\nmin-height: ${props => (props.size === 'big' ? '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: 0 !important;\r\n}\r\ndiv.button-content {\r\n  color: ${props => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\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  font-family: ${TYPOGRAPHY.fontFamily};\r\n  font-weight: bold;\r\n  font-size: ${props => (props.size === 'big' ? '20px' : props.size === 'small' ? '16px' : '18px')};\r\n  line-height: ${props => (props.size === 'big' ? '24px' : props.size === 'small' ? '20px' : '24px')};\r\n  width: ${props => props.width};\r\n  position: relative;\r\n\r\n  min-height: ${props => (props.size === 'big' ? '56px' : props.size === 'small' ? '32px' : '40px')};\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 === 'big' ? '14px 18px' : props.size === 'small' ? '4px 10px' : '6px 14px')};\r\n\r\n  span.loading {\r\n    opacity: 0;\r\n  }\r\n  .icon {\r\n    margin-left: -4px;\r\n    margin-top: -2px;\r\n    margin-bottom: -2px;\r\n    width: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\r\n    height: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\r\n    svg {\r\n      width: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')} !important;\r\n      height: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')} !important;\r\n    }\r\n  }\r\n\r\n  div {\r\n    position: absolute;\r\n    width: 100%;\r\n    svg {\r\n      height: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\r\n      width: ${props => (props.size === 'big' ? '28px' : props.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  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  cursor: not-allowed;\r\n  &:hover,\r\n  &:active {\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\n\r\nexport const Secondary = styled(Primary)<ButtonProps>`\r\ndiv.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&: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  background-color: white;\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&: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  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  cursor: not-allowed;\r\n}\r\n${props => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\r\n&.focus-state {\r\n  ${props => tabbedHereStyle('secondary', props?.colorTheme)};\r\n}\r\n`;\r\n\r\nexport const Tertiary = styled(Primary)<ButtonProps>`\r\ndiv.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&: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  background-color: white !important;\r\n  color: ${COLORS.neutral_300};\r\n  border-color: transparent;\r\n  cursor: not-allowed;\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  background-color: white !important;\r\n  color: ${COLORS.neutral_300};\r\n  border-color: transparent !important;\r\n  cursor: not-allowed;\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\nexport const Correct = styled(Primary)<ButtonProps>`\r\ndiv.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&: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  background-color: ${COLORS.neutral_100};\r\n  color: ${COLORS.neutral_300};\r\n  border-color: ${COLORS.neutral_100};\r\n  cursor: not-allowed;\r\n  &:hover,\r\n  &:active {\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\n\r\nexport const Critical = styled(Primary)<ButtonProps>`\r\ndiv.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&: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  background-color: ${COLORS.neutral_100};\r\n  color: ${COLORS.neutral_300};\r\n  border-color: ${COLORS.neutral_100};\r\n  cursor: not-allowed;\r\n  &:hover,\r\n  &:active {\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\n\r\nexport const Text = styled.button<ButtonProps>`\r\ncolor: ${props => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\r\nbackground-color: transparent;\r\npadding: 0;\r\nborder: none;\r\ntext-decoration: underline;\r\nfont-size: ${props => (props.size === 'big' ? '22px' : props.size === 'small' ? '16px' : '19px')};\r\nline-height: ${props => (props.size === 'big' ? '26.4px' : props.size === 'small' ? '19.2px' : '22.8px')};\r\nfont-weight: bold;\r\nfont-family: inherit;\r\ncursor: pointer;\r\n\r\n&:hover,\r\n&:focus,\r\n&.hover-state,\r\n&.focus-state {\r\n  color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n  background: transparent;\r\n}\r\n&:active,\r\n&.active-state {\r\n  color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\r\n  background: transparent;\r\n}\r\n&:disabled,\r\n&.disabled-state {\r\n  color: ${COLORS.neutral_500};\r\n  background: transparent;\r\n  cursor: not-allowed;\r\n}\r\n`;"],"file":"CommonStyling.js"}

package/dist/esm/Button/DualFunctionButton.js

@@ -1,115 +0,0 @@
-import _pt from "prop-types";
-const _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"],
-      _excluded2 = ["loading", "icon", "onClick"];
-
-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 Button from './Button';
-import { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';
-import { Dropdown } from '../Dropdown/CommonStyling';
-import { Size } from '../types';
-import DropdownContent from '../Dropdown/DropdownContent';
-import styled from 'styled-components';
-const ButtonsContainer = styled.div`
-  display: flex;
-  align-items: center;
-
-  button:first-child {
-    margin-right: 2px;
-  }
-
-  div.button-content {
-    gap: 0px;
-    padding: ${props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px'};
-  }
-`;
-
-const DualFunctionButton = _ref => {
-  let {
-    children = 'Primary Button',
-    variant = 'primary',
-    type = 'button',
-    size = Size.Medium,
-    width = 'auto',
-    testId,
-    disabled,
-    id,
-    dropdownMenuValues,
-    setDropdownMenuValues,
-    dropdownCustomizationProps
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  // Let's filter out properties that we don't need to render.
-  const {
-    loading,
-    icon,
-    onClick
-  } = props,
-        renderProps = _objectWithoutProperties(props, _excluded2);
-
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [focused, setFocused] = React.useState(null);
-  const dropdownContainerRef = React.useRef(null);
-  const [selectedValues, setSelectedValues] = React.useState([]);
-  return /*#__PURE__*/React.createElement(ButtonsContainer, {
-    ref: dropdownContainerRef,
-    size: size
-  }, /*#__PURE__*/React.createElement(Dropdown, {
-    isButton: true,
-    locked: false,
-    disabled: false,
-    margin: ""
-  }, /*#__PURE__*/React.createElement(Button, _extends({}, renderProps, {
-    onClick: onClick,
-    disabled: disabled,
-    type: type,
-    loading: loading,
-    icon: icon,
-    size: size,
-    width: width,
-    variant: variant,
-    flatEdge: "right"
-  }), children), /*#__PURE__*/React.createElement(DropdownContent, {
-    customizationProps: dropdownCustomizationProps,
-    filter: "",
-    selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues,
-    setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
-    isButton: true,
-    setIsOpen: setIsOpen,
-    focused: focused,
-    setFocused: setFocused,
-    hideOnClickOutside: true,
-    size: size,
-    isOpen: isOpen,
-    id: id ?? 'dropdownId',
-    messageOnNoResults: "",
-    alignLeft: true
-  })), /*#__PURE__*/React.createElement(Button, _extends({
-    variant: variant
-  }, renderProps, {
-    disabled: disabled,
-    type: type,
-    size: size,
-    minWidth: 'unset',
-    onClick: () => setIsOpen(!isOpen),
-    icon: isOpen ? /*#__PURE__*/React.createElement(ArrowDropUp, {
-      size: "16px"
-    }) : /*#__PURE__*/React.createElement(ArrowDropDown, {
-      size: "16px"
-    }),
-    flatEdge: "left"
-  })));
-};
-
-DualFunctionButton.propTypes = {
-  dropdownMenuValues: _pt.arrayOf(_pt.string),
-  setDropdownMenuValues: _pt.func
-};
-export default DualFunctionButton;
-//# sourceMappingURL=DualFunctionButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Button/DualFunctionButton.tsx"],"names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","Size","DropdownContent","styled","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","isOpen","setIsOpen","useState","focused","setFocused","dropdownContainerRef","useRef","selectedValues","setSelectedValues","itemsType"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport Button, { ButtonProps } from './Button'\r\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\r\nimport { Dropdown } from '../Dropdown/CommonStyling';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\n\r\nconst ButtonsContainer = styled.div<{ size?: Size }>`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  button:first-child {\r\n    margin-right: 2px;\r\n  }\r\n\r\n  div.button-content {\r\n    gap: 0px;\r\n    padding: ${ props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px' };\r\n  }\r\n`;\r\n\r\nexport interface ButtonOption {\r\n  label: string;\r\n}\r\n\r\nexport interface DualButtonProps extends ButtonProps {\r\n  dropdownCustomizationProps: DropdownCustomizationProps;\r\n  dropdownMenuValues?: string[];\r\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\r\n}\r\n\r\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\r\n  children = 'Primary Button',\r\n  variant = 'primary',\r\n  type = 'button',\r\n  size = Size.Medium,\r\n  width = 'auto',\r\n  testId,\r\n  disabled,\r\n  id,\r\n  dropdownMenuValues,\r\n  setDropdownMenuValues,\r\n  dropdownCustomizationProps,\r\n  ...props\r\n}) => {\r\n  // Let's filter out properties that we don't need to render.\r\n  const { loading, icon, onClick, ...renderProps } = props;\r\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n    return <ButtonsContainer ref={dropdownContainerRef} size={size}>\r\n          <Dropdown isButton={true} locked={false} disabled={false} margin=''>\r\n            <Button\r\n            {...renderProps}\r\n            onClick={onClick}\r\n            disabled={disabled}\r\n            type={type}\r\n            loading={loading}\r\n            icon={icon}\r\n            size={size}\r\n            width={width}\r\n            variant={variant}\r\n            flatEdge=\"right\">\r\n                {children}\r\n            </Button>\r\n              <DropdownContent\r\n                    customizationProps={dropdownCustomizationProps}\r\n                    filter=''\r\n                    selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : (dropdownMenuValues ?? selectedValues)}\r\n                    setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\r\n                    isButton={true}\r\n                    setIsOpen={setIsOpen}\r\n                    focused={focused}\r\n                    setFocused={setFocused}\r\n                    hideOnClickOutside={true}\r\n                    size={size}\r\n                    isOpen={isOpen}\r\n                    id={id ?? 'dropdownId'}\r\n                    messageOnNoResults=''\r\n                    alignLeft={true} />\r\n          </Dropdown>\r\n          <Button variant={variant}\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          type={type}\r\n          size={size}\r\n          minWidth={'unset'}\r\n          onClick={() => setIsOpen(!isOpen)}\r\n          icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\"/>}\r\n          flatEdge=\"left\" />\r\n      </ButtonsContainer>;\r\n  };\r\n\r\n\r\nexport default DualFunctionButton;\r\n"],"file":"DualFunctionButton.js"}