@laerdal/life-react-components 1.4.1-dev.7 → 1.4.1-dev.9

package/dist/esm/Dropdown/CommonStyling.js

@@ -1,395 +0,0 @@
-import styled, { css } from 'styled-components';
-import { CommonInteractionStyling } from '../common';
-import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
-import { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
-import { Size } from '../types';
-import { Z_INDEXES } from '../styles/z-indexes';
-export const Dropdown = styled.div`
-  position: relative;
-  display: inline-block;
-  ${props => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}
-  ${props => props.locked || props.disabled ? 'cursor: not-allowed;' : ''}
-  ${props => props.margin ? `margin: ${props.margin};` : ''}
-
-  .show {
-    display: block;
-  }
-
-  .value {
-    flex-grow: 1;
-  }
-
-  input:hover + div {
-    color: ${COLORS.primary_600};
-  }
-
-  input:active + div {
-    color: ${COLORS.primary_800};
-  }
-`;
-const lockedState = css`
-  background-color: ${COLORS.neutral_100};
-  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};
-  color: ${COLORS.neutral_600};
-  pointer-events: none;
-  cursor: not-allowed;
-  input {
-    color: ${COLORS.neutral_600} !important;
-  }
-`;
-const disabledState = css`
-  background-color: ${COLORS.white};
-  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};
-  color: ${COLORS.neutral_300};
-  pointer-events: none;
-  cursor: not-allowed;
-  svg {
-    color: ${COLORS.neutral_300} !important;
-  }
-  input {
-    color: ${COLORS.neutral_300} !important;
-    ::placeholder {
-      color: ${COLORS.neutral_300} !important;
-    }
-  }
-`;
-const activeValidationMessage = css`
-  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
-  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
-  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
-`;
-const placeholderStyling = css`
-  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-`;
-export const InputField = styled.input`
-  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-  border: none;
-  outline: none;
-  background-color: inherit;
-  cursor: pointer;
-  color: ${COLORS.black} !important;
-  padding: 0;
-  ::-webkit-search-decoration,
-  ::-webkit-search-cancel-button,
-  ::-webkit-search-results-button,
-  ::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-  ::placeholder {
-    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-
-    ${BREAKPOINTS.MEDIUM} {
-      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-    }
-    &.small {
-      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-    }
-    &.medium {
-      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-    }
-  }
-`;
-export const StyledField = styled.div`
-  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
-
-  padding: 12px 16px;
-  height: 48px;
-  min-width: ${props => props.minWidth ? `${props.minWidth}` : '344px'};
-  width: 100%;
-
-  background: ${COLORS.white};
-  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};
-  box-sizing: border-box;
-  border-radius: 4px;
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  input {
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-  }
-
-  &::placeholder {
-    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-  }
-
-  ${BREAKPOINTS.MEDIUM} {
-    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}
-    padding: 16px;
-    height: 56px;
-    &::placeholder {
-      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-    }
-  }
-
-  &.small {
-    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
-    padding: 12px 16px;
-    height: 48px;
-    &::placeholder {
-      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-    }
-  }
-  &.medium {
-    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}
-    height: 56px;
-    padding: 16px;
-    &::placeholder {
-      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-    }
-  }
-
-  &:focus {
-    outline: 3px solid #ddd;
-  }
-  &:focus-within {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
-  }
-  &:hover {
-    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};
-    input {
-      ::placeholder {
-        color: ${COLORS.primary_600};
-      }
-    }
-    cursor: pointer;
-  }
-  &:active {
-    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};
-    input {
-      ::placeholder {
-        color: ${COLORS.primary_800};
-      }
-    }
-  }
-
-  &.button {
-    ${props => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}
-
-    box-sizing: border-box;
-    height: 32px;
-    padding: 0 8px;
-    width: initial;
-    min-width: initial;
-    border: none !important;
-    box-shadow: none;
-    border-radius: 4px;
-
-    &.expanded {
-      color: ${COLORS.neutral_800};
-      background: ${COLORS.neutral_20};
-    }
-  }
-
-  ${props => props.disabled ? disabledState : ''}
-  ${props => props.locked ? lockedState : ''}
-  ${props => props.showValidationMessage ? activeValidationMessage : ''}
-  ${props => props.isPlaceholder ? placeholderStyling : ''}
-
-  ${CommonInteractionStyling};
-`;
-export const ButtonDropdownContentStyling = css`
-  min-width: 344px;
-  right: 0;
-`;
-export const DropdownContentStyling = styled.div`
-  display: none;
-  position: absolute;
-  background-color: ${COLORS.white};
-  width: 100%;
-  z-index: ${Z_INDEXES.dropdown};
-  margin-top: ${props => props.isButton ? '-4px' : '2px'};
-
-  &.show {
-    display: block;
-  }
-
-  &.up {
-    top: auto;
-    bottom: 100%;
-  }
-
-  ${props => props.isButton ? ButtonDropdownContentStyling : ''};
-
-  border: 1px solid ${COLORS.neutral_100};
-  box-sizing: border-box;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  padding: 4px 0;
-
-  max-height: 240px;
-  overflow-y: auto;
-
-  /* width */
-  ::-webkit-scrollbar {
-    width: 4px;
-    cursor: pointer;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: ${COLORS.white};
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: ${COLORS.neutral_200};
-    border-radius: 8px;
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: ${COLORS.neutral_400};
-  }
-`;
-export const DropdownButton = styled.button`
-  ${props => DropdownButtonCSS(props.size)}
-`;
-export const DropdownButtonCSS = size => {
-  return css`
-    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
-    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
-  ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
-
-  position: relative;
-    text-decoration: none;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};
-    background-color: ${COLORS.white};
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    width: 100%;
-    text-align: left;
-
-    span {
-      margin: auto 0 auto 16px;
-      line-height: 48px;
-    }
-
-    div.item-content {
-      margin: auto 0 auto 16px;
-      display: flex;
-      align-items: center;
-
-      div.item-label {
-        flex: 1 0 calc(100% - 40px);
-      }
-
-      div.item-icon {
-        margin-right: 6px;
-        svg {
-          display: block;
-          margin: auto;
-        }
-      }
-      div.item-icon-old {
-        flex: 1 0 40px;
-        display: flex;
-        justify-content: flex-end;
-      }
-    }
-
-    ${CommonInteractionStyling};
-
-    &.active {
-      background: ${COLORS.neutral_20};
-
-      &::after {
-        position: absolute;
-        content: ' ';
-        width: 4px;
-        top: 0;
-        bottom: 0;
-        left: 2px;
-        background-color: ${COLORS.primary_500};
-
-        border-radius: 2px;
-      }
-    }
-
-    &:disabled {
-      background-color: transparent;
-      cursor: not-allowed;
-      color: ${COLORS.neutral_200};
-    }
-
-    &.active:hover {
-      background-color: ${COLORS.primary_20};
-
-      svg {
-        color: ${COLORS.primary_600};
-      }
-
-      &::after {
-        background-color: ${COLORS.primary_500};
-      }
-    }
-
-    &.active:active {
-      background-color: ${COLORS.primary_100};
-
-      svg {
-        color: ${COLORS.primary_800};
-      }
-
-      &::after {
-        background-color: ${COLORS.primary_500};
-      }
-    }
-  `;
-};
-export const ButtonDropdownWrapper = styled.div`
-  box-sizing: border-box;
-  min-height: 48px;
-  display: flex;
-  align-items: center;
-  width: fit-content;
-
-  .button {
-    min-width: 64px;
-  }
-
-  .value {
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-  }
-
-  .dropdown-arrow {
-    width: 24px;
-    height: 24px;
-  }
-
-  ${props => props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;'}
-  ${props => props.disabled ? 'pointer-events: none;' : ''}
-  
-  &:hover .button,
-  & > .button:hover {
-    background-color: ${COLORS.primary_20};
-    color: ${COLORS.primary_700};
-  }
-
-  &:focus .button,
-  & > .button:focus {
-    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;
-    outline: none;
-  }
-
-  &:active .button,
-  & > .button:active {
-    box-shadow: none;
-    background-color: ${COLORS.primary_100};
-    color: ${COLORS.primary_800};
-  }
-
-}`;
-//# sourceMappingURL=CommonStyling.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Size","Z_INDEXES","Dropdown","div","props","isButton","minWidth","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","InputField","input","Regular","black","MEDIUM","StyledField","neutral_400","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","ButtonDropdownContentStyling","DropdownContentStyling","dropdown","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Small","Medium","Large","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { Size } from '../types';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ${COLORS.neutral_300} !important;\n  }\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: ${Z_INDEXES.dropdown};\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    div.item-content {\n      margin: auto 0 auto 16px;\n      display: flex;\n      align-items: center;\n\n      div.item-label {\n        flex: 1 0 calc(100% - 40px);\n      }\n\n      div.item-icon {\n        margin-right: 6px;\n        svg {\n          display: block;\n          margin: auto;\n        }\n      }\n      div.item-icon-old {\n        flex: 1 0 40px;\n        display: flex;\n        justify-content: flex-end;\n      }\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.active:hover {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}

package/dist/esm/Dropdown/DropdownButton.js

@@ -1,128 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom components.
- */
-
-import { IconButton } from '../Button';
-import DropdownContent from './DropdownContent';
-import styled from 'styled-components';
-/**
- * Import custom types.
- */
-
-const Wrapper = styled.div`
-  position: relative;
-  display: inline-block;
-`;
-
-const DropdownButton = ({
-  items,
-  icon,
-  disabled,
-  onClick,
-  itemsType = 'normal',
-  action,
-  actionLabel = '',
-  actionVariant,
-  actionIcon,
-  actionLoading,
-  width,
-  size,
-  alignLeft,
-  multiSelect = false,
-  scrollable = false,
-  pinTopItem = false,
-  maxHeight,
-  className
-}) => {
-  // Globally used variables within the view.
-  const [dropdownOpen, setDropdownOpen] = React.useState(false);
-  const [selectedValues, setSelectedValues] = React.useState([]);
-  const [focused, setFocused] = React.useState(null);
-  const buttonRef = React.useRef(null);
-
-  const handleValueSelect = values => {
-    // Do all required actions
-    onClick(values);
-  };
-
-  const handleKeyDown = e => {
-    if (buttonRef?.current && buttonRef.current.contains(e.target)) {
-      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {
-        if (!dropdownOpen) setFocused(0);
-
-        if (e.keyCode != 40) {
-          e.preventDefault();
-          buttonRef?.current.click();
-        }
-      }
-    }
-  };
-
-  React.useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  });
-  /**
-   * Renders Icon Button dropdown menu.
-   * @returns HTML View for the Icon button dropdown menu.
-   */
-
-  const renderIconButton = () => {
-    return /*#__PURE__*/React.createElement(IconButton, {
-      ref: buttonRef,
-      variant: "secondary",
-      shape: "circular",
-      action: event => {
-        if (!event) {
-          //if no event details passed, then this means that user pressed 'enter'
-          if (!dropdownOpen) setFocused(0);
-        }
-
-        setDropdownOpen(!dropdownOpen);
-      },
-      disabled: disabled
-    }, icon);
-  };
-
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    className: className
-  }, renderIconButton(), /*#__PURE__*/React.createElement(DropdownContent, {
-    customizationProps: {
-      itemsType: itemsType,
-      action: action ?? (() => {}),
-      actionLabel: actionLabel,
-      actionVariant: actionVariant,
-      onValueUpdate: handleValueSelect,
-      multiSelect: multiSelect,
-      actionIcon: actionIcon,
-      actionLoading: actionLoading,
-      scrollable: scrollable,
-      pinTopItem: pinTopItem,
-      maxHeight: maxHeight,
-      items: items
-    },
-    focused: focused,
-    setFocused: setFocused,
-    size: size,
-    width: width,
-    alignLeft: alignLeft,
-    isOpen: dropdownOpen,
-    setIsOpen: setDropdownOpen,
-    hideOnClickOutside: true,
-    filter: "",
-    selectedValues: itemsType == 'normal' ? [] : selectedValues,
-    setSelectedValues: setSelectedValues,
-    messageOnNoResults: "No results",
-    isButton: true,
-    id: "dropdown-content"
-  }));
-};
-
-export default DropdownButton;
-//# sourceMappingURL=DropdownButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","Wrapper","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","dropdownOpen","setDropdownOpen","useState","selectedValues","setSelectedValues","focused","setFocused","buttonRef","useRef","handleValueSelect","values","handleKeyDown","e","current","contains","target","keyCode","preventDefault","click","useEffect","document","addEventListener","removeEventListener","renderIconButton","event","onValueUpdate"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AAGA,MAAMC,OAAO,GAAGD,MAAM,CAACE,GAAI;AAC3B;AACA;AACA,CAHA;;AAKA,MAAMC,cAAc,GAAG,CAAC;AACtBC,EAAAA,KADsB;AAEtBC,EAAAA,IAFsB;AAGtBC,EAAAA,QAHsB;AAItBC,EAAAA,OAJsB;AAKtBC,EAAAA,SAAS,GAAG,QALU;AAMtBC,EAAAA,MANsB;AAOtBC,EAAAA,WAAW,GAAG,EAPQ;AAQtBC,EAAAA,aARsB;AAStBC,EAAAA,UATsB;AAUtBC,EAAAA,aAVsB;AAWtBC,EAAAA,KAXsB;AAYtBC,EAAAA,IAZsB;AAatBC,EAAAA,SAbsB;AActBC,EAAAA,WAAW,GAAG,KAdQ;AAetBC,EAAAA,UAAU,GAAG,KAfS;AAgBtBC,EAAAA,UAAU,GAAG,KAhBS;AAiBtBC,EAAAA,SAjBsB;AAkBtBC,EAAAA;AAlBsB,CAAD,KAkBgB;AACrC;AACA,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkC1B,KAAK,CAAC2B,QAAN,CAAwB,KAAxB,CAAxC;AACA,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsC7B,KAAK,CAAC2B,QAAN,CAAyB,EAAzB,CAA5C;AACA,QAAM,CAACG,OAAD,EAAUC,UAAV,IAAwB/B,KAAK,CAAC2B,QAAN,CAA8B,IAA9B,CAA9B;AACA,QAAMK,SAAS,GAAGhC,KAAK,CAACiC,MAAN,CAAgC,IAAhC,CAAlB;;AAEA,QAAMC,iBAAiB,GAAIC,MAAD,IAAsB;AAC9C;AACAzB,IAAAA,OAAO,CAACyB,MAAD,CAAP;AACD,GAHD;;AAMA,QAAMC,aAAa,GAAIC,CAAD,IAAY;AAChC,QAAIL,SAAS,EAAEM,OAAX,IAAsBN,SAAS,CAACM,OAAV,CAAkBC,QAAlB,CAA2BF,CAAC,CAACG,MAA7B,CAA1B,EAAgE;AAC9D,UAAIH,CAAC,CAACI,OAAF,KAAc,EAAd,IAAoBJ,CAAC,CAACI,OAAF,KAAc,EAAlC,IAAwCJ,CAAC,CAACI,OAAF,KAAc,EAA1D,EAA8D;AAC5D,YAAG,CAAChB,YAAJ,EACEM,UAAU,CAAC,CAAD,CAAV;;AAEF,YAAGM,CAAC,CAACI,OAAF,IAAa,EAAhB,EACA;AACEJ,UAAAA,CAAC,CAACK,cAAF;AACAV,UAAAA,SAAS,EAAEM,OAAX,CAAmBK,KAAnB;AACD;AACF;AACF;AACF,GAbD;;AAeA3C,EAAAA,KAAK,CAAC4C,SAAN,CAAgB,MAAM;AACpBC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCV,aAArC;AACA,WAAO,MAAM;AACXS,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCX,aAAxC;AACD,KAFD;AAGD,GALD;AAOA;AACF;AACA;AACA;;AACE,QAAMY,gBAAgB,GAAG,MAAM;AAC7B,wBACE,oBAAC,UAAD;AAAY,MAAA,GAAG,EAAEhB,SAAjB;AAA6B,MAAA,OAAO,EAAC,WAArC;AAAiD,MAAA,KAAK,EAAC,UAAvD;AAAkE,MAAA,MAAM,EAAGiB,KAAD,IAC1E;AACE,YAAG,CAACA,KAAJ,EAAW;AAAE;AACX,cAAG,CAACxB,YAAJ,EACEM,UAAU,CAAC,CAAD,CAAV;AACH;;AACDL,QAAAA,eAAe,CAAC,CAACD,YAAF,CAAf;AACD,OAPD;AAOG,MAAA,QAAQ,EAAEhB;AAPb,OAQGD,IARH,CADF;AAYD,GAbD;;AAeA,sBACE,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAEgB;AAApB,KACGwB,gBAAgB,EADnB,eAEE,oBAAC,eAAD;AACE,IAAA,kBAAkB,EAAE;AAClBrC,MAAAA,SAAS,EAAEA,SADO;AAElBC,MAAAA,MAAM,EAAEA,MAAM,KAAK,MAAM,CAAE,CAAb,CAFI;AAGlBC,MAAAA,WAAW,EAAEA,WAHK;AAIlBC,MAAAA,aAAa,EAAEA,aAJG;AAKlBoC,MAAAA,aAAa,EAAEhB,iBALG;AAMlBd,MAAAA,WAAW,EAAEA,WANK;AAOlBL,MAAAA,UAAU,EAAEA,UAPM;AAQlBC,MAAAA,aAAa,EAAEA,aARG;AASlBK,MAAAA,UAAU,EAAEA,UATM;AAUlBC,MAAAA,UAAU,EAAEA,UAVM;AAWlBC,MAAAA,SAAS,EAAEA,SAXO;AAYlBhB,MAAAA,KAAK,EAAEA;AAZW,KADtB;AAeE,IAAA,OAAO,EAAEuB,OAfX;AAgBE,IAAA,UAAU,EAAEC,UAhBd;AAiBE,IAAA,IAAI,EAAEb,IAjBR;AAkBE,IAAA,KAAK,EAAED,KAlBT;AAmBE,IAAA,SAAS,EAAEE,SAnBb;AAoBE,IAAA,MAAM,EAAEM,YApBV;AAqBE,IAAA,SAAS,EAAEC,eArBb;AAsBE,IAAA,kBAAkB,EAAE,IAtBtB;AAuBE,IAAA,MAAM,EAAC,EAvBT;AAwBE,IAAA,cAAc,EAAEf,SAAS,IAAI,QAAb,GAAwB,EAAxB,GAA6BiB,cAxB/C;AAyBE,IAAA,iBAAiB,EAAEC,iBAzBrB;AA0BE,IAAA,kBAAkB,EAAC,YA1BrB;AA2BE,IAAA,QAAQ,EAAE,IA3BZ;AA4BE,IAAA,EAAE,EAAC;AA5BL,IAFF,CADF;AAmCD,CA3GD;;AA6GA,eAAevB,cAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight,\n  className }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  \n  const handleKeyDown = (e: any) => {\n    if (buttonRef?.current && buttonRef.current.contains(e.target)) {\n      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {\n        if(!dropdownOpen)\n          setFocused(0);\n          \n        if(e.keyCode != 40)\n        {\n          e.preventDefault();\n          buttonRef?.current.click();\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);      \n    };\n  });\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton ref={buttonRef}  variant=\"secondary\" shape=\"circular\" action={(event: any) => \n      {\n        if(!event) { //if no event details passed, then this means that user pressed 'enter'\n          if(!dropdownOpen)\n            setFocused(0);\n        }\n        setDropdownOpen(!dropdownOpen);\n      }} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper className={className}>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}