@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/InputFields/styling.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
 import styled, { css } from 'styled-components';
 import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
 import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"styling.js","names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/InputFields/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};"],"mappings":"AA2DC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};"],"mappings":"AA2DC;AAAC"}

package/dist/Layouts/index.cjs

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PageWidth = exports.ContainerMargins = exports.Columns = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../styles");
-
 var _templateObject, _templateObject2, _templateObject3;
-
 var GRID = {
   GAP: {
     SMALL: '24px',
@@ -27,13 +21,10 @@ var GRID = {
     LARGE: '56px'
   }
 };
-
 var PageWidth = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin: 0 ", ";\n\n  ", " {\n    margin: 0 ", ";\n  }\n  ", " {\n    margin: 0 ", ";\n  }\n\n  ", " {\n    max-width: ", ";\n    margin: 0 auto;\n  }\n"])), GRID.GUTTER.SMALL, _styles.BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, _styles.BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, _styles.BREAKPOINTS.XLARGE, function (props) {
   return props.useMaxWidth ? props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)' : '1088px';
 });
-
 exports.PageWidth = PageWidth;
-
 var Columns = _styledComponents.default.section(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
   return props.gap || GRID.GAP.SMALL;
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
@@ -47,10 +38,7 @@ var Columns = _styledComponents.default.section(_templateObject2 || (_templateOb
 }, GRID.GAP.MEDIUM, function (props) {
   return props.printColumns || 'none';
 });
-
 exports.Columns = Columns;
-
 var ContainerMargins = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n"])));
-
 exports.ContainerMargins = ContainerMargins;
 //# sourceMappingURL=index.cjs.map

package/dist/Layouts/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","BREAKPOINTS","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;;;AAEA,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MADJ;IAEHC,MAAM,EAAE,MAFL;IAGHC,KAAK,EAAE;EAHJ,CADM;EAMXC,MAAM,EAAE;IACNH,KAAK,EAAE,MADD;IAENC,MAAM,EAAE,MAFF;IAGNC,KAAK,EAAE;EAHD;AANG,CAAb;;AAaO,IAAME,SAAS,GAAGC,yBAAA,CAAOC,GAAV,kQAERR,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBO,mBAAA,CAAYN,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBM,mBAAA,CAAYL,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBK,mBAAA,CAAYC,MAXM,EAYL,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;;;;AAiBA,IAAMC,OAAO,GAAGP,yBAAA,CAAOQ,OAAV,ooBAGN,UAACJ,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBO,mBAAA,CAAYN,MANI,EAOS,UAACQ,KAAD;EAAA,OAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;EAAA,OAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBM,mBAAA,CAAYL,KAZI,EAaJ,UAACO,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACQ,KAAD;EAAA,OAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;;;;AA8BA,IAAMC,gBAAgB,GAAGZ,yBAAA,CAAOC,GAAV,k1BAAtB"}
+{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","BREAKPOINTS","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;;;;;;;AAAA;AAEA;AAAwC;AAExC,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,kQAErBR,IAAI,CAACK,MAAM,CAACH,KAAK,EAE3BO,mBAAW,CAACN,MAAM,EACNH,IAAI,CAACK,MAAM,CAACF,MAAM,EAE9BM,mBAAW,CAACL,KAAK,EACLJ,IAAI,CAACK,MAAM,CAACD,KAAK,EAG7BK,mBAAW,CAACC,MAAM,EACL,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,WAAW,GAAID,KAAK,CAACE,QAAQ,GAAG,mBAAmB,GAAGF,KAAK,CAACE,QAAQ,GAAG,KAAK,GAAG,oBAAoB,GAAI,QAAQ;AAAA,CAAC,CAGlJ;AAAC;AAEK,IAAMC,OAAO,GAAGP,yBAAM,CAACQ,OAAO,ooBAGvB,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDO,mBAAW,CAACN,MAAM,EACO,UAACQ,KAAK;EAAA,OAAKA,KAAK,CAACM,OAAO;AAAA,GAC7B,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACM,OAAO;AAAA,GAChC,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDM,mBAAW,CAACL,KAAK,EACL,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACQ,KAAK;EAAA,OAAKA,KAAK,CAACO,YAAY,IAAI,MAAM;AAAA,EAEnE;AAAC;AAEK,IAAMC,gBAAgB,GAAGZ,yBAAM,CAACC,GAAG,k1BA8BzC;AAAC"}

package/dist/Layouts/index.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3;
-
 import styled from 'styled-components';
 import { BREAKPOINTS } from '../styles';
 var GRID = {

package/dist/Layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,QAA4B,WAA5B;AAEA,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MADJ;IAEHC,MAAM,EAAE,MAFL;IAGHC,KAAK,EAAE;EAHJ,CADM;EAMXC,MAAM,EAAE;IACNH,KAAK,EAAE,MADD;IAENC,MAAM,EAAE,MAFF;IAGNC,KAAK,EAAE;EAHD;AANG,CAAb;AAaA,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAV,oPAERP,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBH,WAAW,CAACI,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBJ,WAAW,CAACK,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBL,WAAW,CAACS,MAXM,EAYL,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;AAiBP,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACe,OAAV,snBAGN,UAACJ,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBH,WAAW,CAACI,MANI,EAOS,UAACM,KAAD;EAAA,OAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;EAAA,OAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBJ,WAAW,CAACK,KAZI,EAaJ,UAACK,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACM,KAAD;EAAA,OAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;AA8BP,OAAO,IAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAV,o0BAAtB"}
+{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,WAAW,QAAQ,WAAW;AAEvC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,oPAErBP,IAAI,CAACK,MAAM,CAACH,KAAK,EAE3BH,WAAW,CAACI,MAAM,EACNH,IAAI,CAACK,MAAM,CAACF,MAAM,EAE9BJ,WAAW,CAACK,KAAK,EACLJ,IAAI,CAACK,MAAM,CAACD,KAAK,EAG7BL,WAAW,CAACS,MAAM,EACL,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,WAAW,GAAID,KAAK,CAACE,QAAQ,GAAG,mBAAmB,GAAGF,KAAK,CAACE,QAAQ,GAAG,KAAK,GAAG,oBAAoB,GAAI,QAAQ;AAAA,CAAC,CAGlJ;AAED,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACM,OAAO;AAAA,GAC7B,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACM,OAAO;AAAA,GAChC,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACO,YAAY,IAAI,MAAM;AAAA,EAEnE;AAED,OAAO,IAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAG,o0BA8BzC"}

package/dist/LinearProgress/LinearProgress.cjs

@@ -1,90 +1,59 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.LinearProgressVariant = exports.LinearProgressType = exports.LineFill = exports.Line = exports.Dot = exports.Bar = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _types = require("../types");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../styles");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["size", "type", "variant", "label", "value", "max", "className"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var Bar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ", ";\n\n  &.active {\n    background-color: ", ";\n  }\n\n  &.current {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n  }\n\n  &.inverted.active {\n    background-color: ", ";\n  }\n\n  &.inverted.current {\n    background-color: ", ";\n  }\n\n"])), _styles.COLORS.neutral_100, _styles.COLORS.accent1_400, _styles.COLORS.accent1_800, _styles.COLORS.neutral_600, _styles.COLORS.accent1_400, _styles.COLORS.white);
-
 exports.Bar = Bar;
-
 var Dot = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ", ";\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ", ";\n  }\n\n  &.current:after {\n    background-color: ", ";\n  }\n\n  &.inverted:after {\n    background-color: ", ";\n  }\n\n  &.inverted.active:after {\n    background-color: ", ";\n  }\n\n  &.inverted.current:after {\n    background-color: ", ";\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.accent1_600, _styles.COLORS.accent1_800, _styles.COLORS.neutral_400, _styles.COLORS.accent1_400, _styles.COLORS.white);
-
 exports.Dot = Dot;
-
 var LineFill = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n"])));
-
 exports.LineFill = LineFill;
-
 var Line = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ", " {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ", ";\n\n  ", " {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n\n    &:after,\n    &:before {\n      background-color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_500, _styles.COLORS.neutral_500, LineFill, LineFill, LineFill, _styles.COLORS.neutral_100, LineFill, _styles.COLORS.accent1_500, _styles.COLORS.neutral_700, _styles.COLORS.neutral_400, LineFill, _styles.COLORS.accent1_400);
-
 exports.Line = Line;
-
 var Label = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.black);
-
 var Content = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n"])));
-
 var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ", " {\n      color: ", ";\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 4px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 6px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 8px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ", " {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ", " {\n      padding: 0 3px;\n    }\n  }\n"])), Label, _styles.COLORS.white, Label, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Content, Content);
-
 var LinearProgressType;
 exports.LinearProgressType = LinearProgressType;
-
 (function (LinearProgressType) {
   LinearProgressType["Dots"] = "dots";
   LinearProgressType["Line"] = "line";
   LinearProgressType["Bars"] = "bars";
 })(LinearProgressType || (exports.LinearProgressType = LinearProgressType = {}));
-
 var LinearProgressVariant;
 exports.LinearProgressVariant = LinearProgressVariant;
-
 (function (LinearProgressVariant) {
   LinearProgressVariant["Normal"] = "normal";
   LinearProgressVariant["Inverted"] = "inverted";
 })(LinearProgressVariant || (exports.LinearProgressVariant = LinearProgressVariant = {}));
-
 var LinearProgress = function LinearProgress(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? LinearProgressType.Line : _ref$type,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? LinearProgressVariant.Normal : _ref$variant,
-      label = _ref.label,
-      value = _ref.value,
-      max = _ref.max,
-      className = _ref.className,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? LinearProgressType.Line : _ref$type,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? LinearProgressVariant.Normal : _ref$variant,
+    label = _ref.label,
+    value = _ref.value,
+    max = _ref.max,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var renderBars = function renderBars() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: Array.from(Array(max).keys()).map(function (i) {
@@ -94,7 +63,6 @@ var LinearProgress = function LinearProgress(_ref) {
       })
     });
   };
-
   var renderDots = function renderDots() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: Array.from(Array(max).keys()).map(function (i) {
@@ -104,7 +72,6 @@ var LinearProgress = function LinearProgress(_ref) {
       })
     });
   };
-
   var renderLine = function renderLine() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
@@ -117,21 +84,17 @@ var LinearProgress = function LinearProgress(_ref) {
       })
     });
   };
-
   var render = function render() {
     switch (type) {
       case LinearProgressType.Bars:
         return renderBars();
-
       case LinearProgressType.Dots:
         return renderDots();
-
       case LinearProgressType.Line:
       default:
         return renderLine();
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({
     className: "".concat(size, " ").concat(type, " ").concat(variant, " ").concat(className || '')
   }, rest), {}, {
@@ -142,7 +105,6 @@ var LinearProgress = function LinearProgress(_ref) {
     })]
   }));
 };
-
 LinearProgress.propTypes = {
   type: _propTypes.default.oneOf(["dots", "line", "bars"]),
   variant: _propTypes.default.oneOf(["normal", "inverted"]),

package/dist/LinearProgress/LinearProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgress.cjs","names":["Bar","styled","div","COLORS","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","LinearProgressType","LinearProgressVariant","LinearProgress","size","Size","Medium","type","variant","Normal","label","value","max","className","rest","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\n\nexport const Bar = styled.div`\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  &.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.current {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_600};\n  }\n\n  &.inverted.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current {\n    background-color: ${COLORS.white};\n  }\n\n`;\n\nexport const Dot = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.current:after {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted:after {\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.inverted.active:after {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current:after {\n    background-color: ${COLORS.white};\n  }\n`;\n\nexport const LineFill = styled.div`\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n`;\n\nexport const Line = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ${LineFill} {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  ${LineFill} {\n    background-color: ${COLORS.accent1_500};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_700};\n\n    &:after,\n    &:before {\n      background-color: ${COLORS.neutral_400};\n    }\n\n    ${LineFill} {\n      background-color: ${COLORS.accent1_400};\n    }\n  }\n`;\n\nconst Label = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ${Label} {\n      color: ${COLORS.white};\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ${Label} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 4px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ${Label} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 6px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ${Label} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 8px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ${Content} {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ${Content} {\n      padding: 0 3px;\n    }\n  }\n`;\n\nexport enum LinearProgressType {\n  Dots = 'dots',\n  Line = 'line',\n  Bars = 'bars',\n}\n\nexport enum LinearProgressVariant {\n  Normal = 'normal',\n  Inverted = 'inverted',\n}\n\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: LinearProgressType;\n  variant?: LinearProgressVariant;\n\n  label?: string;\n\n  value: number;\n  max: number;\n}\n\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\n                                                                        size = Size.Medium,\n                                                                        type = LinearProgressType.Line,\n                                                                        variant = LinearProgressVariant.Normal,\n                                                                        label,\n                                                                        value,\n                                                                        max,\n                                                                        className,\n                                                                        ...rest\n                                                                      }) => {\n\n  const renderBars = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Bar key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderDots = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Dot key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderLine = () =>\n    <>\n      <Line className={`${variant} ${size}`}>\n        <LineFill style={{width: `${value / max * 100}%`}}/>\n      </Line>\n    </>\n\n\n  const render = () => {\n    switch (type) {\n      case LinearProgressType.Bars:\n        return renderBars();\n      case LinearProgressType.Dots:\n        return renderDots();\n      case LinearProgressType.Line:\n      default:\n        return renderLine();\n    }\n  }\n\n  return (\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\n      {label && <Label>{label}</Label>}\n      <Content>\n        {render()}\n      </Content>\n    </Wrapper>\n  )\n};\n\nexport default LinearProgress;\n"],"mappings":"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"}
+{"version":3,"file":"LinearProgress.cjs","names":["Bar","styled","div","COLORS","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","LinearProgressType","LinearProgressVariant","LinearProgress","size","Size","Medium","type","variant","Normal","label","value","max","className","rest","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\n\nexport const Bar = styled.div`\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  &.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.current {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_600};\n  }\n\n  &.inverted.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current {\n    background-color: ${COLORS.white};\n  }\n\n`;\n\nexport const Dot = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.current:after {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted:after {\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.inverted.active:after {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current:after {\n    background-color: ${COLORS.white};\n  }\n`;\n\nexport const LineFill = styled.div`\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n`;\n\nexport const Line = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ${LineFill} {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  ${LineFill} {\n    background-color: ${COLORS.accent1_500};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_700};\n\n    &:after,\n    &:before {\n      background-color: ${COLORS.neutral_400};\n    }\n\n    ${LineFill} {\n      background-color: ${COLORS.accent1_400};\n    }\n  }\n`;\n\nconst Label = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ${Label} {\n      color: ${COLORS.white};\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ${Label} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 4px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ${Label} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 6px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ${Label} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 8px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ${Content} {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ${Content} {\n      padding: 0 3px;\n    }\n  }\n`;\n\nexport enum LinearProgressType {\n  Dots = 'dots',\n  Line = 'line',\n  Bars = 'bars',\n}\n\nexport enum LinearProgressVariant {\n  Normal = 'normal',\n  Inverted = 'inverted',\n}\n\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: LinearProgressType;\n  variant?: LinearProgressVariant;\n\n  label?: string;\n\n  value: number;\n  max: number;\n}\n\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\n                                                                        size = Size.Medium,\n                                                                        type = LinearProgressType.Line,\n                                                                        variant = LinearProgressVariant.Normal,\n                                                                        label,\n                                                                        value,\n                                                                        max,\n                                                                        className,\n                                                                        ...rest\n                                                                      }) => {\n\n  const renderBars = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Bar key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderDots = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Dot key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderLine = () =>\n    <>\n      <Line className={`${variant} ${size}`}>\n        <LineFill style={{width: `${value / max * 100}%`}}/>\n      </Line>\n    </>\n\n\n  const render = () => {\n    switch (type) {\n      case LinearProgressType.Bars:\n        return renderBars();\n      case LinearProgressType.Dots:\n        return renderDots();\n      case LinearProgressType.Line:\n      default:\n        return renderLine();\n    }\n  }\n\n  return (\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\n      {label && <Label>{label}</Label>}\n      <Content>\n        {render()}\n      </Content>\n    </Wrapper>\n  )\n};\n\nexport default LinearProgress;\n"],"mappings":"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"}

package/dist/LinearProgress/LinearProgress.js

@@ -3,13 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["size", "type", "variant", "label", "value", "max", "className"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { Size } from '../types';
 import styled from 'styled-components';
@@ -25,33 +21,28 @@ var Label = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLi
 var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n"])));
 var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ", " {\n      color: ", ";\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 4px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 6px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 8px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ", " {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ", " {\n      padding: 0 3px;\n    }\n  }\n"])), Label, COLORS.white, Label, ComponentSStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, ComponentMStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, ComponentLStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Content, Content);
 export var LinearProgressType;
-
 (function (LinearProgressType) {
   LinearProgressType["Dots"] = "dots";
   LinearProgressType["Line"] = "line";
   LinearProgressType["Bars"] = "bars";
 })(LinearProgressType || (LinearProgressType = {}));
-
 export var LinearProgressVariant;
-
 (function (LinearProgressVariant) {
   LinearProgressVariant["Normal"] = "normal";
   LinearProgressVariant["Inverted"] = "inverted";
 })(LinearProgressVariant || (LinearProgressVariant = {}));
-
 var LinearProgress = function LinearProgress(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? Size.Medium : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? LinearProgressType.Line : _ref$type,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? LinearProgressVariant.Normal : _ref$variant,
-      label = _ref.label,
-      value = _ref.value,
-      max = _ref.max,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? LinearProgressType.Line : _ref$type,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? LinearProgressVariant.Normal : _ref$variant,
+    label = _ref.label,
+    value = _ref.value,
+    max = _ref.max,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var renderBars = function renderBars() {
     return /*#__PURE__*/_jsx(_Fragment, {
       children: Array.from(Array(max).keys()).map(function (i) {
@@ -61,7 +52,6 @@ var LinearProgress = function LinearProgress(_ref) {
       })
     });
   };
-
   var renderDots = function renderDots() {
     return /*#__PURE__*/_jsx(_Fragment, {
       children: Array.from(Array(max).keys()).map(function (i) {
@@ -71,7 +61,6 @@ var LinearProgress = function LinearProgress(_ref) {
       })
     });
   };
-
   var renderLine = function renderLine() {
     return /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsx(Line, {
@@ -84,21 +73,17 @@ var LinearProgress = function LinearProgress(_ref) {
       })
     });
   };
-
   var render = function render() {
     switch (type) {
       case LinearProgressType.Bars:
         return renderBars();
-
       case LinearProgressType.Dots:
         return renderDots();
-
       case LinearProgressType.Line:
       default:
         return renderLine();
     }
   };
-
   return /*#__PURE__*/_jsxs(Wrapper, _objectSpread(_objectSpread({
     className: "".concat(size, " ").concat(type, " ").concat(variant, " ").concat(className || '')
   }, rest), {}, {
@@ -109,7 +94,6 @@ var LinearProgress = function LinearProgress(_ref) {
     })]
   }));
 };
-
 LinearProgress.propTypes = {
   type: _pt.oneOf(["dots", "line", "bars"]),
   variant: _pt.oneOf(["normal", "inverted"]),