@laerdal/life-react-components 1.8.0-dev.32 → 1.8.0-dev.35

package/dist/InputFields/NumberField.cjs

@@ -65,9 +65,11 @@ var OperatorWrapper = _styledComponents.default.div(_templateObject7 || (_templa
   return props.size === _types.Size.Medium ? '4px 0' : '';
 }, _styles.COLORS.neutral_200);
 
-var NumberInput = _styledComponents.default.input(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%; \n    height: ", ";   \n    border: none;\n    color: ", ";\n    padding: 0;    \n    ", "\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n"])), function (props) {
+var NumberInput = _styledComponents.default.input(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%; \n    height: ", ";   \n    border: none;\n    color: ", ";\n    padding: 0;    \n    ", "\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n\n    &::placeholder {\n        ", "\n    }\n"])), function (props) {
   return props.fieldSize === _types.Size.Small ? '20px' : '24px';
 }, _styles.COLORS.neutral_500, function (props) {
+  return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black);
+}, function (props) {
   return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, null);
 });
 
@@ -79,9 +81,9 @@ var NoteIcon = _styledComponents.default.div(_templateObject10 || (_templateObje
 
 var NoteContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ", " {\n            color: ", ";\n        }\n\n        ", " {\n            svg path {\n                fill: ", ";\n            }\n        }\n    }\n\n    &.invalid {\n        ", " {\n            color: ", ";\n        }\n\n        ", " {\n            svg path {\n                fill: ", ";\n            }\n        }\n    }\n"])), NoteLabel, _styles.COLORS.correct_500, NoteIcon, _styles.COLORS.correct_500, NoteLabel, _styles.COLORS.critical_500, NoteIcon, _styles.COLORS.critical_500);
 
-var InputContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 160px;\n    height: ", ";\n    display: flex;\n    border: 0;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &.disabled {\n        border: 1px solid ", ";\n        cursor: not-allowed;\n        \n        ", "{\n            color: ", ";\n        }\n\n        ", "{\n            color: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.readOnly {\n        background: ", ";\n        border: 1px solid ", ";\n        cursor: not-allowed;\n\n        ", "{\n            background: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ", ";\n        box-shadow: none;\n    }\n\n    &.invalid {\n        border: 2px solid ", ";\n        box-shadow: none;\n    }\n"])), function (props) {
+var InputContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 160px;\n    height: ", ";\n    display: flex;\n    border: 0;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &.disabled {\n        border: 1px solid ", ";\n        cursor: not-allowed;\n        \n        ", "{\n            color: ", ";\n        }\n\n        ", "{\n            color: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n\n            &::placeholder {\n                color: ", ";\n            }\n        }\n    }\n\n    &.readOnly {\n        background: ", ";\n        border: 1px solid ", ";\n        cursor: not-allowed;\n\n        ", "{\n            background: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ", ";\n        box-shadow: none;\n    }\n\n    &.invalid {\n        border: 2px solid ", ";\n        box-shadow: none;\n    }\n"])), function (props) {
   return props.size === _types.Size.Small ? '48px' : '56px';
-}, _styles.COLORS.neutral_400, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, PrefixContainer, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_100, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
+}, _styles.COLORS.neutral_400, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, PrefixContainer, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_100, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
 
 var NumberField = function NumberField(_ref) {
   var _ref$size = _ref.size,

package/dist/InputFields/NumberField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["Container","styled","div","LabelContainer","COLORS","neutral_500","props","size","Size","Small","ComponentTextStyle","Regular","LabelText","LabelIcon","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","React","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{size: Size}>`\n    margin-bottom: 4px;\n    color: ${COLORS.neutral_500};\n    display: flex;\n    ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n    margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n    svg {\n        height: 9px;\n        width: 9px;\n    }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n    margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n    display: flex;\n    flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n    margin-right: 4px;\n    width: ${props => props.size === Size.Small?'10px':'11px'};\n    height: ${props => props.size === Size.Small?'20px':'24px'};\n    color: ${COLORS.neutral_500};\n    ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n    display: flex;\n    margin:${props => props.size === Size.Medium?'4px 0':''};\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ${COLORS.neutral_200};\n        width: 1px;\n    }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n    width: 100%; \n    height: ${props => props.fieldSize === Size.Small?'20px':'24px'};   \n    border: none;\n    color: ${COLORS.neutral_500};\n    padding: 0;    \n    ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n`;\n\nconst NoteLabel = styled.div<{size: Size}>`\n    color: ${COLORS.neutral_500};\n    ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}    \n`;\n\nconst NoteIcon = styled.div`\n    svg {\n        height: 16px;\n    }\n`;\n\nconst NoteContainer = styled.div`\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ${NoteLabel} {\n            color: ${COLORS.correct_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.correct_500};\n            }\n        }\n    }\n\n    &.invalid {\n        ${NoteLabel} {\n            color: ${COLORS.critical_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.critical_500};\n            }\n        }\n    }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n    min-width: 160px;\n    height: ${props => props.size === Size.Small?'48px':'56px'};\n    display: flex;\n    border: 0;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    }\n\n    &.disabled {\n        border: 1px solid ${COLORS.neutral_100};\n        cursor: not-allowed;\n        \n        ${PrefixContainer}{\n            color: ${COLORS.neutral_300};\n        }\n\n        ${NumberInput}{\n            color: ${COLORS.neutral_300};\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.readOnly {\n        background: ${COLORS.neutral_100};\n        border: 1px solid ${COLORS.neutral_300};\n        cursor: not-allowed;\n\n        ${NumberInput}{\n            background: ${COLORS.neutral_100};\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ${COLORS.correct_400};\n        box-shadow: none;\n    }\n\n    &.invalid {\n        border: 2px solid ${COLORS.critical_400};\n        box-shadow: none;\n    }\n`;\n\ntype NumberFieldProps = {\n    size: Size.Small | Size.Medium;\n    prefix?: string;\n    interval?: number;\n    label: string;\n    note?: string;\n    noteIcon?: React.ReactNode;\n    required?: boolean;\n    minValue?: number;\n    maxValue?: number;\n    allowNegative?: boolean;\n    decimalPrecision?: number;\n    disabled?: boolean;\n    readOnly?: boolean;\n    valid?: boolean;\n    defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n    {size=Size.Small, \n     label,\n     note, \n     noteIcon, \n     required, \n     prefix,\n     interval=1, \n     minValue, \n     maxValue, \n     allowNegative, \n     decimalPrecision, \n     disabled=false, \n     readOnly=false, \n     valid,\n     defaultVal}) => {\n    const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n    let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        switch(e.key){\n            case 'ArrowUp': addInterval();\n                            break;\n            case 'ArrowDown': subtractInterval();\n                            break;\n            default: break;\n        }\n    }\n\n    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n        let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n        let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n        \n        let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/);        \n        let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n        let negativeAndDecimalRegex =  (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n        \n        let val = e.target.value;    \n        if(val!==''){\n            if(allowNegative && decimalPrecision){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else{\n                    if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n\n                    else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n                        setUserInput(val);\n                    \n                    else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n                }\n            }\n\n            else if(allowNegative){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n                    setUserInput(val);\n            }\n\n            else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n                if(decimalPrecisionRegex!.test(val))\n                    setUserInput(val);\n                else if(decimalFormationRegEx.test(val))\n                    setUserInput(val);\n                else if(!val.includes('.') && simpleRegex.test(val))\n                    setUserInput(val);\n            }\n\n            else if(simpleRegex.test(val) && isInRange(val, false)){\n                setUserInput(val);\n            }\n        }\n\n        if(val==='')\n            setUserInput('');\n    }\n\n    const isInRange = (value: string, isDecimal: boolean): boolean => {\n        let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n        if(minValue && minValue>x)\n            return false;\n        else if(maxValue && maxValue<x)\n            return false;\n        else\n            return true;\n    }\n\n    const addInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (minValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val +=1;\n\n            if(maxValue && maxValue>=val)\n                setUserInput(val.toString());\n            else if(!maxValue)\n                setUserInput(val.toString());\n        }\n    }\n\n    const subtractInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (maxValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val -=1;\n            \n            if(minValue && minValue<=val)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n            else if(!minValue)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n        }\n    }\n\n    const isLocked = (input: string, operator: string): boolean => {\n        let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n        val = isNaN(val) && userInput === '' ? 0 : val;\n        let operatorState = false;\n        if(operator === 'add' && maxValue)\n            operatorState = val < maxValue ? false : true;\n        \n        if(operator === 'subtract' && minValue)\n            operatorState =  val > minValue ? false : true;\n\n        if(operator === 'subtract' && !minValue && !allowNegative)\n            operatorState =  val > 0 ? false : true;\n\n        return operatorState;\n    }\n\n    return (\n        <Container>\n            <LabelContainer size={size}>\n                {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n                    <SystemIcons.Asterisk color={COLORS.critical_500}/>\n                </LabelIcon>\n                }\n                <LabelText>\n                    {label}\n                </LabelText>\n            </LabelContainer>\n\n            <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n                                                                .concat(readOnly?' readOnly':'')\n                                                                .concat(fieldState?` ${fieldState}`:'')}>\n                <InputWrapper size={size}>\n                    {prefix && <PrefixContainer size={size}>\n                        {prefix}\n                    </PrefixContainer>}\n                    <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n                </InputWrapper>\n\n                <OperatorWrapper data-testid={'operators'} size={size}>\n                    <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n                        <SystemIcons.Minus size='14px'/>\n                    </IconButton>                    \n                    <div className='divider'></div>\n                    <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n                        <SystemIcons.Plus size='14px'/>\n                    </IconButton>\n                </OperatorWrapper>\n            </InputContainer>\n\n            {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n                <NoteIcon>\n                    {noteIcon}\n                </NoteIcon>\n                <NoteLabel size={size}>\n                    {note}\n                </NoteLabel>                \n            </NoteContainer>\n            }\n        </Container>\n    );    \n}\n\nexport default NumberField;\n"],"file":"NumberField.cjs"}
+{"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["Container","styled","div","LabelContainer","COLORS","neutral_500","props","size","Size","Small","ComponentTextStyle","Regular","LabelText","LabelIcon","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","black","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","React","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,mFAAf;;AAEA,IAAMC,cAAc,GAAGF,0BAAOC,GAAV,iKAEPE,eAAOC,WAFA,EAId,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,qCAAoBC,+BAAmBC,OAAvC,EAA+C,IAA/C,CAA1B,GAAiF,oCAAmBD,+BAAmBC,OAAtC,EAA8C,IAA9C,CAAnF;AAAA,CAJS,CAApB;;AAOA,IAAMC,SAAS,GAAGX,0BAAOC,GAAV,qFAAf;;AAEA,IAAMW,SAAS,GAAGZ,0BAAOC,GAAV,8KACK,UAAAI,KAAK;AAAA,SAAIA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA0B,KAA1B,GAAgC,KAApC;AAAA,CADV,CAAf;;AAQA,IAAMK,YAAY,GAAGb,0BAAOC,GAAV,kJACJ,UAAAI,KAAK;AAAA,SAAIA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA0B,kBAA1B,GAA6C,kBAAjD;AAAA,CADD,CAAlB;;AAMA,IAAMM,eAAe,GAAGd,0BAAOC,GAAV,iLAER,UAAAI,KAAK;AAAA,SAAIA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA0B,MAA1B,GAAiC,MAArC;AAAA,CAFG,EAGP,UAAAH,KAAK;AAAA,SAAIA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA0B,MAA1B,GAAiC,MAArC;AAAA,CAHE,EAIRL,eAAOC,WAJC,EAKf,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAAwB,mCAAkBC,+BAAmBC,OAArC,EAA6C,IAA7C,CAAxB,GAA2E,mCAAkBD,+BAAmBC,OAArC,EAA6C,IAA7C,CAA7E;AAAA,CALU,CAArB;;AAQA,IAAMK,eAAe,GAAGf,0BAAOC,GAAV,6RAER,UAAAI,KAAK;AAAA,SAAIA,KAAK,CAACC,IAAN,KAAeC,YAAKS,MAApB,GAA2B,OAA3B,GAAmC,EAAvC;AAAA,CAFG,EASCb,eAAOc,WATR,CAArB;;AAcA,IAAMC,WAAW,GAAGlB,0BAAOmB,KAAV,qTAEH,UAAAd,KAAK;AAAA,SAAIA,KAAK,CAACe,SAAN,KAAoBb,YAAKC,KAAzB,GAA+B,MAA/B,GAAsC,MAA1C;AAAA,CAFF,EAIJL,eAAOC,WAJH,EAMX,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACe,SAAN,KAAoBb,YAAKC,KAAzB,GAA+B,mCAAkBC,+BAAmBC,OAArC,EAA8CP,eAAOkB,KAArD,CAA/B,GAA2F,mCAAkBZ,+BAAmBC,OAArC,EAA8CP,eAAOkB,KAArD,CAA/F;AAAA,CANM,EAaP,UAAAhB,KAAK;AAAA,SAAIA,KAAK,CAACe,SAAN,KAAoBb,YAAKC,KAAzB,GAA+B,mCAAkBC,+BAAmBa,MAArC,EAA6C,IAA7C,CAA/B,GAAkF,mCAAkBb,+BAAmBa,MAArC,EAA6C,IAA7C,CAAtF;AAAA,CAbE,CAAjB;;AAiBA,IAAMC,SAAS,GAAGvB,0BAAOC,GAAV,wHACFE,eAAOC,WADL,EAET,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,IAAN,KAAaC,YAAKC,KAAlB,GAA0B,qCAAoBC,+BAAmBC,OAAvC,EAA+C,IAA/C,CAA1B,GAAiF,oCAAmBD,+BAAmBC,OAAtC,EAA8C,IAA9C,CAAnF;AAAA,CAFI,CAAf;;AAKA,IAAMc,QAAQ,GAAGxB,0BAAOC,GAAV,kIAAd;;AAMA,IAAMwB,aAAa,GAAGzB,0BAAOC,GAAV,keAKTsB,SALS,EAMEpB,eAAOuB,WANT,EASTF,QATS,EAWKrB,eAAOuB,WAXZ,EAiBTH,SAjBS,EAkBEpB,eAAOwB,YAlBT,EAqBTH,QArBS,EAuBKrB,eAAOwB,YAvBZ,CAAnB;;AA6BA,IAAMC,cAAc,GAAG5B,0BAAOC,GAAV,w3CAEN,UAAAI,KAAK;AAAA,SAAIA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA0B,MAA1B,GAAiC,MAArC;AAAA,CAFC,EAMoBL,eAAO0B,WAN3B,EASwB1B,eAAO2B,WAT/B,EAawB3B,eAAO4B,WAb/B,EAiBwB5B,eAAO4B,WAjB/B,EAqBQ5B,eAAO6B,WArBf,EAwBVlB,eAxBU,EAyBCX,eAAO8B,WAzBR,EA4BVf,WA5BU,EA6BCf,eAAO8B,WA7BR,EAkCK9B,eAAO8B,WAlCZ,EAwCE9B,eAAO6B,WAxCT,EAyCQ7B,eAAO8B,WAzCf,EA4CVf,WA5CU,EA6CMf,eAAO6B,WA7Cb,EAoDQ7B,eAAO+B,WApDf,EAyDQ/B,eAAOgC,YAzDf,CAApB;;AAgFA,IAAMC,WAAsD,GAAG,SAAzDA,WAAyD,OAe1C;AAAA,uBAdhB9B,IAcgB;AAAA,MAdhBA,IAcgB,0BAdXC,YAAKC,KAcM;AAAA,MAbhB6B,KAagB,QAbhBA,KAagB;AAAA,MAZhBC,IAYgB,QAZhBA,IAYgB;AAAA,MAXhBC,QAWgB,QAXhBA,QAWgB;AAAA,MAVhBC,QAUgB,QAVhBA,QAUgB;AAAA,MAThBC,MASgB,QAThBA,MASgB;AAAA,2BARhBC,QAQgB;AAAA,MARhBA,QAQgB,8BARP,CAQO;AAAA,MAPhBC,QAOgB,QAPhBA,QAOgB;AAAA,MANhBC,QAMgB,QANhBA,QAMgB;AAAA,MALhBC,aAKgB,QALhBA,aAKgB;AAAA,MAJhBC,gBAIgB,QAJhBA,gBAIgB;AAAA,2BAHhBC,QAGgB;AAAA,MAHhBA,QAGgB,8BAHP,KAGO;AAAA,2BAFhBC,QAEgB;AAAA,MAFhBA,QAEgB,8BAFP,KAEO;AAAA,MADhBC,KACgB,QADhBA,KACgB;AAAA,MAAhBC,UAAgB,QAAhBA,UAAgB;;AACjB,wBAAkCC,KAAK,CAACC,QAAN,CAAeF,UAAU,GAACA,UAAU,CAACG,QAAX,EAAD,GAAuB,EAAhD,CAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AACA,MAAIC,UAAU,GAAIP,KAAK,KAAGQ,SAAT,GAAuBR,KAAK,GAAC,OAAD,GAAS,SAArC,GAAkDQ,SAAnE;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD,EAA8C;AACjE,YAAOA,CAAC,CAACC,GAAT;AACI,WAAK,SAAL;AAAgBC,QAAAA,WAAW;AACX;;AAChB,WAAK,WAAL;AAAkBC,QAAAA,gBAAgB;AAClB;;AAChB;AAAS;AALb;AAOH,GARD;;AAUA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACJ,CAAD,EAA4C;AAC5DA,IAAAA,CAAC,CAACK,cAAF;AACA,QAAIC,WAAW,GAAG,IAAIC,MAAJ,CAAW,YAAX,CAAlB;AACA,QAAIC,qBAAqB,GAAG,IAAID,MAAJ,CAAW,cAAX,CAA5B;AACA,QAAIE,6BAA6B,GAAG,IAAIF,MAAJ,CAAW,iBAAX,CAApC;AAEA,QAAIG,kBAAkB,GAAG,IAAIH,MAAJ,CAAW,eAAX,CAAzB;AACA,QAAII,qBAAqB,GAAGxB,gBAAgB,GAAG,IAAIoB,MAAJ,mCAAsCpB,gBAAgB,GAAC,CAAvD,QAAH,GAAmEW,SAA/G;AACA,QAAIc,uBAAuB,GAAKzB,gBAAgB,IAAID,aAArB,GAAsC,IAAIqB,MAAJ,sCAAyCpB,gBAAgB,GAAC,CAA1D,QAAtC,GAAwGW,SAAvI;AAEA,QAAIe,GAAG,GAAGb,CAAC,CAACc,MAAF,CAASC,KAAnB;;AACA,QAAGF,GAAG,KAAG,EAAT,EAAY;AACR,UAAG3B,aAAa,IAAIC,gBAApB,EAAqC;AACjC,YAAG0B,GAAG,CAACG,MAAJ,KAAa,CAAb,IAAkBH,GAAG,CAACI,MAAJ,CAAW,CAAX,MAAgB,GAArC,EACIrB,YAAY,CAACiB,GAAD,CAAZ,CADJ,KAEI;AACA,cAAG,CAACD,uBAAuB,CAAEM,IAAzB,CAA8BL,GAA9B,KAAsCF,qBAAqB,CAAEO,IAAvB,CAA4BL,GAA5B,CAAvC,KAA4EM,SAAS,CAACN,GAAD,EAAK,IAAL,CAAxF,EACIjB,YAAY,CAACiB,GAAD,CAAZ,CADJ,KAGK,IAAG,CAACJ,6BAA6B,CAACS,IAA9B,CAAmCL,GAAnC,KAA2CL,qBAAqB,CAACU,IAAtB,CAA2BL,GAA3B,CAA5C,KAAgFM,SAAS,CAACN,GAAG,CAACO,OAAJ,CAAY,GAAZ,EAAgB,EAAhB,CAAD,EAAqB,IAArB,CAA5F,EACDxB,YAAY,CAACiB,GAAD,CAAZ,CADC,KAGA,IAAG,CAACH,kBAAkB,CAACQ,IAAnB,CAAwBL,GAAxB,KAAgCP,WAAW,CAACY,IAAZ,CAAiBL,GAAjB,CAAjC,KAA2DM,SAAS,CAACN,GAAD,EAAK,IAAL,CAAvE,EACDjB,YAAY,CAACiB,GAAD,CAAZ;AACP;AACJ,OAbD,MAeK,IAAG3B,aAAH,EAAiB;AAClB,YAAG2B,GAAG,CAACG,MAAJ,KAAa,CAAb,IAAkBH,GAAG,CAACI,MAAJ,CAAW,CAAX,MAAgB,GAArC,EACIrB,YAAY,CAACiB,GAAD,CAAZ,CADJ,KAEK,IAAG,CAACH,kBAAkB,CAACQ,IAAnB,CAAwBL,GAAxB,KAAgCP,WAAW,CAACY,IAAZ,CAAiBL,GAAjB,CAAjC,KAA2DM,SAAS,CAACN,GAAD,EAAK,KAAL,CAAvE,EACDjB,YAAY,CAACiB,GAAD,CAAZ;AACP,OALI,MAOA,IAAG1B,gBAAgB,IAAK0B,GAAG,CAACQ,OAAJ,CAAY,GAAZ,MAAmBR,GAAG,CAACS,WAAJ,CAAgB,GAAhB,CAAxC,IAAiEH,SAAS,CAACN,GAAD,EAAK,IAAL,CAA7E,EAAwF;AACzF,YAAGF,qBAAqB,CAAEO,IAAvB,CAA4BL,GAA5B,CAAH,EACIjB,YAAY,CAACiB,GAAD,CAAZ,CADJ,KAEK,IAAGL,qBAAqB,CAACU,IAAtB,CAA2BL,GAA3B,CAAH,EACDjB,YAAY,CAACiB,GAAD,CAAZ,CADC,KAEA,IAAG,CAACA,GAAG,CAACU,QAAJ,CAAa,GAAb,CAAD,IAAsBjB,WAAW,CAACY,IAAZ,CAAiBL,GAAjB,CAAzB,EACDjB,YAAY,CAACiB,GAAD,CAAZ;AACP,OAPI,MASA,IAAGP,WAAW,CAACY,IAAZ,CAAiBL,GAAjB,KAAyBM,SAAS,CAACN,GAAD,EAAM,KAAN,CAArC,EAAkD;AACnDjB,QAAAA,YAAY,CAACiB,GAAD,CAAZ;AACH;AACJ;;AAED,QAAGA,GAAG,KAAG,EAAT,EACIjB,YAAY,CAAC,EAAD,CAAZ;AACP,GAlDD;;AAoDA,MAAMuB,SAAS,GAAG,SAAZA,SAAY,CAACJ,KAAD,EAAgBS,SAAhB,EAAgD;AAC9D,QAAIC,CAAC,GAAGD,SAAS,GAAGE,UAAU,CAACX,KAAD,CAAV,CAAkBY,OAAlB,CAA0BxC,gBAA1B,CAAH,GAAiDyC,QAAQ,CAACb,KAAD,CAA1E;AACA,QAAG/B,QAAQ,IAAIA,QAAQ,GAACyC,CAAxB,EACI,OAAO,KAAP,CADJ,KAEK,IAAGxC,QAAQ,IAAIA,QAAQ,GAACwC,CAAxB,EACD,OAAO,KAAP,CADC,KAGD,OAAO,IAAP;AACP,GARD;;AAUA,MAAMvB,WAAW,GAAG,SAAdA,WAAc,GAAM;AACtB,QAAIW,GAAG,GAAG1B,gBAAgB,GAAGuC,UAAU,CAAC/B,SAAD,CAAb,GAA2BiC,QAAQ,CAACjC,SAAD,CAA7D;AACAkB,IAAAA,GAAG,GAAGgB,KAAK,CAAChB,GAAD,CAAL,IAAclB,SAAS,KAAK,EAA5B,GAAkCX,QAAlC,aAAkCA,QAAlC,cAAkCA,QAAlC,GAA8C,CAA9C,GAAmD6B,GAAzD;;AACA,QAAG,CAACgB,KAAK,CAAChB,GAAD,CAAT,EAAe;AACX,UAAG1B,gBAAH,EACI0B,GAAG,GAAGiB,IAAI,CAACC,KAAL,CAAW,CAAClB,GAAG,GAAC9B,QAAL,IAAe+C,IAAI,CAACE,GAAL,CAAS,EAAT,EAAY7C,gBAAZ,CAA1B,IAA0D2C,IAAI,CAACE,GAAL,CAAS,EAAT,EAAY7C,gBAAZ,CAAhE,CADJ,KAGI0B,GAAG,IAAG,CAAN;AAEJ,UAAG5B,QAAQ,IAAIA,QAAQ,IAAE4B,GAAzB,EACIjB,YAAY,CAACiB,GAAG,CAACnB,QAAJ,EAAD,CAAZ,CADJ,KAEK,IAAG,CAACT,QAAJ,EACDW,YAAY,CAACiB,GAAG,CAACnB,QAAJ,EAAD,CAAZ;AACP;AACJ,GAdD;;AAgBA,MAAMS,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC3B,QAAIU,GAAG,GAAG1B,gBAAgB,GAAGuC,UAAU,CAAC/B,SAAD,CAAb,GAA2BiC,QAAQ,CAACjC,SAAD,CAA7D;AACAkB,IAAAA,GAAG,GAAGgB,KAAK,CAAChB,GAAD,CAAL,IAAclB,SAAS,KAAK,EAA5B,GAAkCV,QAAlC,aAAkCA,QAAlC,cAAkCA,QAAlC,GAA8C,CAA9C,GAAmD4B,GAAzD;;AACA,QAAG,CAACgB,KAAK,CAAChB,GAAD,CAAT,EAAe;AACX,UAAG1B,gBAAH,EACI0B,GAAG,GAAGiB,IAAI,CAACC,KAAL,CAAW,CAAClB,GAAG,GAAC9B,QAAL,IAAe+C,IAAI,CAACE,GAAL,CAAS,EAAT,EAAY7C,gBAAZ,CAA1B,IAA0D2C,IAAI,CAACE,GAAL,CAAS,EAAT,EAAY7C,gBAAZ,CAAhE,CADJ,KAGI0B,GAAG,IAAG,CAAN;AAEJ,UAAG7B,QAAQ,IAAIA,QAAQ,IAAE6B,GAAzB,EACI3B,aAAa,GAAGU,YAAY,CAACiB,GAAG,CAACnB,QAAJ,EAAD,CAAf,GAAmCmB,GAAG,IAAE,CAAL,GAASjB,YAAY,CAACiB,GAAG,CAACnB,QAAJ,EAAD,CAArB,GAAwCI,SAAxF,CADJ,KAEK,IAAG,CAACd,QAAJ,EACDE,aAAa,GAAGU,YAAY,CAACiB,GAAG,CAACnB,QAAJ,EAAD,CAAf,GAAmCmB,GAAG,IAAE,CAAL,GAASjB,YAAY,CAACiB,GAAG,CAACnB,QAAJ,EAAD,CAArB,GAAwCI,SAAxF;AACP;AACJ,GAdD;;AAgBA,MAAMmC,QAAQ,GAAG,SAAXA,QAAW,CAACzE,KAAD,EAAgB0E,QAAhB,EAA8C;AAC3D,QAAIrB,GAAG,GAAG1B,gBAAgB,GAAGuC,UAAU,CAAClE,KAAD,CAAb,GAAuBoE,QAAQ,CAACpE,KAAD,CAAzD;AACAqD,IAAAA,GAAG,GAAGgB,KAAK,CAAChB,GAAD,CAAL,IAAclB,SAAS,KAAK,EAA5B,GAAiC,CAAjC,GAAqCkB,GAA3C;AACA,QAAIsB,aAAa,GAAG,KAApB;AACA,QAAGD,QAAQ,KAAK,KAAb,IAAsBjD,QAAzB,EACIkD,aAAa,GAAGtB,GAAG,GAAG5B,QAAN,GAAiB,KAAjB,GAAyB,IAAzC;AAEJ,QAAGiD,QAAQ,KAAK,UAAb,IAA2BlD,QAA9B,EACImD,aAAa,GAAItB,GAAG,GAAG7B,QAAN,GAAiB,KAAjB,GAAyB,IAA1C;AAEJ,QAAGkD,QAAQ,KAAK,UAAb,IAA2B,CAAClD,QAA5B,IAAwC,CAACE,aAA5C,EACIiD,aAAa,GAAItB,GAAG,GAAG,CAAN,GAAU,KAAV,GAAkB,IAAnC;AAEJ,WAAOsB,aAAP;AACH,GAdD;;AAgBA,sBACI,sBAAC,SAAD;AAAA,4BACI,sBAAC,cAAD;AAAgB,MAAA,IAAI,EAAExF,IAAtB;AAAA,iBACKkC,QAAQ,iBAAI,qBAAC,SAAD;AAAW,QAAA,IAAI,EAAElC,IAAjB;AAAuB,uBAAa,WAApC;AAAA,+BACT,qBAAC,kBAAD,CAAa,QAAb;AAAsB,UAAA,KAAK,EAAEH,eAAOwB;AAApC;AADS,QADjB,eAKI,qBAAC,SAAD;AAAA,kBACKU;AADL,QALJ;AAAA,MADJ,eAWI,sBAAC,cAAD;AAAgB,MAAA,IAAI,EAAE/B,IAAtB;AAA4B,qBAAa,gBAAzC;AAA2D,MAAA,QAAQ,EAAE,CAAC,CAAtE;AAAyE,MAAA,SAAS,EAAE,cAAcyF,MAAd,CAAqBhD,QAAQ,GAAC,WAAD,GAAa,EAA1C,EAC/BgD,MAD+B,CACxB/C,QAAQ,GAAC,WAAD,GAAa,EADG,EAE/B+C,MAF+B,CAExBvC,UAAU,cAAKA,UAAL,IAAkB,EAFJ,CAApF;AAAA,8BAGI,sBAAC,YAAD;AAAc,QAAA,IAAI,EAAElD,IAApB;AAAA,mBACKmC,MAAM,iBAAI,qBAAC,eAAD;AAAiB,UAAA,IAAI,EAAEnC,IAAvB;AAAA,oBACNmC;AADM,UADf,eAII,qBAAC,WAAD;AAAa,UAAA,SAAS,EAAEnC,IAAxB;AAA8B,UAAA,WAAW,EAAC,cAA1C;AAAyD,UAAA,KAAK,EAAEgD,SAAhE;AAA2E,UAAA,QAAQ,EAAGP,QAAQ,IAAIC,QAAb,GAAyB,CAAC,CAA1B,GAA8B,CAAnH;AAAsH,UAAA,QAAQ,EAAE,kBAAAW,CAAC;AAAA,mBAAEI,WAAW,CAACJ,CAAD,CAAb;AAAA,WAAjI;AAAmJ,UAAA,SAAS,EAAE,mBAAAA,CAAC;AAAA,mBAAED,cAAc,CAACC,CAAD,CAAhB;AAAA;AAA/J,UAJJ;AAAA,QAHJ,eAUI,sBAAC,eAAD;AAAiB,uBAAa,WAA9B;AAA2C,QAAA,IAAI,EAAErD,IAAjD;AAAA,gCACI,qBAAC,kBAAD;AAAY,UAAA,QAAQ,EAAE,CAAC,CAAvB;AAA0B,UAAA,OAAO,EAAC,WAAlC;AAA8C,UAAA,KAAK,EAAC,QAApD;AAA6D,UAAA,MAAM,EAAE;AAAA,mBAAIwD,gBAAgB,EAApB;AAAA,WAArE;AAA6F,UAAA,wBAAwB,MAArH;AAAsH,UAAA,QAAQ,EAAEf,QAAQ,IAAIC,QAAZ,IAAwB4C,QAAQ,CAACtC,SAAD,EAAW,UAAX,CAAhK;AAAA,iCACI,qBAAC,kBAAD,CAAa,KAAb;AAAmB,YAAA,IAAI,EAAC;AAAxB;AADJ,UADJ,eAII;AAAK,UAAA,SAAS,EAAC;AAAf,UAJJ,eAKI,qBAAC,kBAAD;AAAY,UAAA,QAAQ,EAAE,CAAC,CAAvB;AAA0B,UAAA,OAAO,EAAC,WAAlC;AAA8C,UAAA,KAAK,EAAC,QAApD;AAA6D,UAAA,MAAM,EAAE;AAAA,mBAAIO,WAAW,EAAf;AAAA,WAArE;AAAwF,UAAA,wBAAwB,MAAhH;AAAiH,UAAA,QAAQ,EAAEd,QAAQ,IAAIC,QAAZ,IAAwB4C,QAAQ,CAACtC,SAAD,EAAW,KAAX,CAA3J;AAAA,iCACI,qBAAC,kBAAD,CAAa,IAAb;AAAkB,YAAA,IAAI,EAAC;AAAvB;AADJ,UALJ;AAAA,QAVJ;AAAA,MAXJ,EAgCKhB,IAAI,iBAAI,sBAAC,aAAD;AAAe,MAAA,SAAS,EAAE,YAAYyD,MAAZ,CAAmBvC,UAAU,cAAKA,UAAL,IAAkB,EAA/C,CAA1B;AAAA,8BACL,qBAAC,QAAD;AAAA,kBACKjB;AADL,QADK,eAIL,qBAAC,SAAD;AAAW,QAAA,IAAI,EAAEjC,IAAjB;AAAA,kBACKgC;AADL,QAJK;AAAA,MAhCb;AAAA,IADJ;AA4CH,CAvLD;;;AAhBIG,EAAAA,M;AACAC,EAAAA,Q;AACAL,EAAAA,K;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAG,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,U;;eA4LWd,W","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{size: Size}>`\n    margin-bottom: 4px;\n    color: ${COLORS.neutral_500};\n    display: flex;\n    ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n    margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n    svg {\n        height: 9px;\n        width: 9px;\n    }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n    margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n    display: flex;\n    flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n    margin-right: 4px;\n    width: ${props => props.size === Size.Small?'10px':'11px'};\n    height: ${props => props.size === Size.Small?'20px':'24px'};\n    color: ${COLORS.neutral_500};\n    ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n    display: flex;\n    margin:${props => props.size === Size.Medium?'4px 0':''};\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ${COLORS.neutral_200};\n        width: 1px;\n    }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n    width: 100%; \n    height: ${props => props.fieldSize === Size.Small?'20px':'24px'};   \n    border: none;\n    color: ${COLORS.neutral_500};\n    padding: 0;    \n    ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Regular, COLORS.black):ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n\n    &::placeholder {\n        ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n    }\n`;\n\nconst NoteLabel = styled.div<{size: Size}>`\n    color: ${COLORS.neutral_500};\n    ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}    \n`;\n\nconst NoteIcon = styled.div`\n    svg {\n        height: 16px;\n    }\n`;\n\nconst NoteContainer = styled.div`\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ${NoteLabel} {\n            color: ${COLORS.correct_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.correct_500};\n            }\n        }\n    }\n\n    &.invalid {\n        ${NoteLabel} {\n            color: ${COLORS.critical_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.critical_500};\n            }\n        }\n    }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n    min-width: 160px;\n    height: ${props => props.size === Size.Small?'48px':'56px'};\n    display: flex;\n    border: 0;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    }\n\n    &.disabled {\n        border: 1px solid ${COLORS.neutral_100};\n        cursor: not-allowed;\n        \n        ${PrefixContainer}{\n            color: ${COLORS.neutral_300};\n        }\n\n        ${NumberInput}{\n            color: ${COLORS.neutral_300};\n            cursor: not-allowed;\n            pointer-events: none;\n\n            &::placeholder {\n                color: ${COLORS.neutral_300};\n            }\n        }\n    }\n\n    &.readOnly {\n        background: ${COLORS.neutral_100};\n        border: 1px solid ${COLORS.neutral_300};\n        cursor: not-allowed;\n\n        ${NumberInput}{\n            background: ${COLORS.neutral_100};\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ${COLORS.correct_400};\n        box-shadow: none;\n    }\n\n    &.invalid {\n        border: 2px solid ${COLORS.critical_400};\n        box-shadow: none;\n    }\n`;\n\ntype NumberFieldProps = {\n    size: Size.Small | Size.Medium;\n    prefix?: string;\n    interval?: number;\n    label: string;\n    note?: string;\n    noteIcon?: React.ReactNode;\n    required?: boolean;\n    minValue?: number;\n    maxValue?: number;\n    allowNegative?: boolean;\n    decimalPrecision?: number;\n    disabled?: boolean;\n    readOnly?: boolean;\n    valid?: boolean;\n    defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n    {size=Size.Small, \n     label,\n     note, \n     noteIcon, \n     required, \n     prefix,\n     interval=1, \n     minValue, \n     maxValue, \n     allowNegative, \n     decimalPrecision, \n     disabled=false, \n     readOnly=false, \n     valid,\n     defaultVal}) => {\n    const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n    let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        switch(e.key){\n            case 'ArrowUp': addInterval();\n                            break;\n            case 'ArrowDown': subtractInterval();\n                            break;\n            default: break;\n        }\n    }\n\n    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n        let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n        let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n        \n        let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/);        \n        let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n        let negativeAndDecimalRegex =  (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n        \n        let val = e.target.value;    \n        if(val!==''){\n            if(allowNegative && decimalPrecision){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else{\n                    if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n\n                    else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n                        setUserInput(val);\n                    \n                    else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n                }\n            }\n\n            else if(allowNegative){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n                    setUserInput(val);\n            }\n\n            else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n                if(decimalPrecisionRegex!.test(val))\n                    setUserInput(val);\n                else if(decimalFormationRegEx.test(val))\n                    setUserInput(val);\n                else if(!val.includes('.') && simpleRegex.test(val))\n                    setUserInput(val);\n            }\n\n            else if(simpleRegex.test(val) && isInRange(val, false)){\n                setUserInput(val);\n            }\n        }\n\n        if(val==='')\n            setUserInput('');\n    }\n\n    const isInRange = (value: string, isDecimal: boolean): boolean => {\n        let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n        if(minValue && minValue>x)\n            return false;\n        else if(maxValue && maxValue<x)\n            return false;\n        else\n            return true;\n    }\n\n    const addInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (minValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val +=1;\n\n            if(maxValue && maxValue>=val)\n                setUserInput(val.toString());\n            else if(!maxValue)\n                setUserInput(val.toString());\n        }\n    }\n\n    const subtractInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (maxValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val -=1;\n            \n            if(minValue && minValue<=val)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n            else if(!minValue)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n        }\n    }\n\n    const isLocked = (input: string, operator: string): boolean => {\n        let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n        val = isNaN(val) && userInput === '' ? 0 : val;\n        let operatorState = false;\n        if(operator === 'add' && maxValue)\n            operatorState = val < maxValue ? false : true;\n        \n        if(operator === 'subtract' && minValue)\n            operatorState =  val > minValue ? false : true;\n\n        if(operator === 'subtract' && !minValue && !allowNegative)\n            operatorState =  val > 0 ? false : true;\n\n        return operatorState;\n    }\n\n    return (\n        <Container>\n            <LabelContainer size={size}>\n                {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n                    <SystemIcons.Asterisk color={COLORS.critical_500}/>\n                </LabelIcon>\n                }\n                <LabelText>\n                    {label}\n                </LabelText>\n            </LabelContainer>\n\n            <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n                                                                .concat(readOnly?' readOnly':'')\n                                                                .concat(fieldState?` ${fieldState}`:'')}>\n                <InputWrapper size={size}>\n                    {prefix && <PrefixContainer size={size}>\n                        {prefix}\n                    </PrefixContainer>}\n                    <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n                </InputWrapper>\n\n                <OperatorWrapper data-testid={'operators'} size={size}>\n                    <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n                        <SystemIcons.Minus size='14px'/>\n                    </IconButton>                    \n                    <div className='divider'></div>\n                    <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n                        <SystemIcons.Plus size='14px'/>\n                    </IconButton>\n                </OperatorWrapper>\n            </InputContainer>\n\n            {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n                <NoteIcon>\n                    {noteIcon}\n                </NoteIcon>\n                <NoteLabel size={size}>\n                    {note}\n                </NoteLabel>                \n            </NoteContainer>\n            }\n        </Container>\n    );    \n}\n\nexport default NumberField;\n"],"file":"NumberField.cjs"}

package/dist/InputFields/NumberField.js

@@ -34,9 +34,11 @@ var PrefixContainer = styled.div(_templateObject6 || (_templateObject6 = _tagged
 var OperatorWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    margin:", ";\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ", ";\n        width: 1px;\n    }\n"])), function (props) {
   return props.size === Size.Medium ? '4px 0' : '';
 }, COLORS.neutral_200);
-var NumberInput = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 100%; \n    height: ", ";   \n    border: none;\n    color: ", ";\n    padding: 0;    \n    ", "\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n"])), function (props) {
+var NumberInput = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 100%; \n    height: ", ";   \n    border: none;\n    color: ", ";\n    padding: 0;    \n    ", "\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n\n    &::placeholder {\n        ", "\n    }\n"])), function (props) {
   return props.fieldSize === Size.Small ? '20px' : '24px';
 }, COLORS.neutral_500, function (props) {
+  return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black);
+}, function (props) {
   return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null);
 });
 var NoteLabel = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    color: ", ";\n    ", "    \n"])), COLORS.neutral_500, function (props) {
@@ -44,9 +46,9 @@ var NoteLabel = styled.div(_templateObject9 || (_templateObject9 = _taggedTempla
 });
 var NoteIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    svg {\n        height: 16px;\n    }\n"])));
 var NoteContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ", " {\n            color: ", ";\n        }\n\n        ", " {\n            svg path {\n                fill: ", ";\n            }\n        }\n    }\n\n    &.invalid {\n        ", " {\n            color: ", ";\n        }\n\n        ", " {\n            svg path {\n                fill: ", ";\n            }\n        }\n    }\n"])), NoteLabel, COLORS.correct_500, NoteIcon, COLORS.correct_500, NoteLabel, COLORS.critical_500, NoteIcon, COLORS.critical_500);
-var InputContainer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    min-width: 160px;\n    height: ", ";\n    display: flex;\n    border: 0;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &.disabled {\n        border: 1px solid ", ";\n        cursor: not-allowed;\n        \n        ", "{\n            color: ", ";\n        }\n\n        ", "{\n            color: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.readOnly {\n        background: ", ";\n        border: 1px solid ", ";\n        cursor: not-allowed;\n\n        ", "{\n            background: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ", ";\n        box-shadow: none;\n    }\n\n    &.invalid {\n        border: 2px solid ", ";\n        box-shadow: none;\n    }\n"])), function (props) {
+var InputContainer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    min-width: 160px;\n    height: ", ";\n    display: flex;\n    border: 0;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &.disabled {\n        border: 1px solid ", ";\n        cursor: not-allowed;\n        \n        ", "{\n            color: ", ";\n        }\n\n        ", "{\n            color: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n\n            &::placeholder {\n                color: ", ";\n            }\n        }\n    }\n\n    &.readOnly {\n        background: ", ";\n        border: 1px solid ", ";\n        cursor: not-allowed;\n\n        ", "{\n            background: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ", ";\n        box-shadow: none;\n    }\n\n    &.invalid {\n        border: 2px solid ", ";\n        box-shadow: none;\n    }\n"])), function (props) {
   return props.size === Size.Small ? '48px' : '56px';
-}, COLORS.neutral_400, COLORS.primary_700, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_100, PrefixContainer, COLORS.neutral_300, NumberInput, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_300, NumberInput, COLORS.neutral_100, COLORS.correct_400, COLORS.critical_400);
+}, COLORS.neutral_400, COLORS.primary_700, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_100, PrefixContainer, COLORS.neutral_300, NumberInput, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_300, NumberInput, COLORS.neutral_100, COLORS.correct_400, COLORS.critical_400);
 
 var NumberField = function NumberField(_ref) {
   var _ref$size = _ref.size,

package/dist/InputFields/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["React","styled","IconButton","SystemIcons","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","ComponentXSStyling","Size","Container","div","LabelContainer","neutral_500","props","size","Small","Regular","LabelText","LabelIcon","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{size: Size}>`\n    margin-bottom: 4px;\n    color: ${COLORS.neutral_500};\n    display: flex;\n    ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n    margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n    svg {\n        height: 9px;\n        width: 9px;\n    }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n    margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n    display: flex;\n    flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n    margin-right: 4px;\n    width: ${props => props.size === Size.Small?'10px':'11px'};\n    height: ${props => props.size === Size.Small?'20px':'24px'};\n    color: ${COLORS.neutral_500};\n    ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n    display: flex;\n    margin:${props => props.size === Size.Medium?'4px 0':''};\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ${COLORS.neutral_200};\n        width: 1px;\n    }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n    width: 100%; \n    height: ${props => props.fieldSize === Size.Small?'20px':'24px'};   \n    border: none;\n    color: ${COLORS.neutral_500};\n    padding: 0;    \n    ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n`;\n\nconst NoteLabel = styled.div<{size: Size}>`\n    color: ${COLORS.neutral_500};\n    ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}    \n`;\n\nconst NoteIcon = styled.div`\n    svg {\n        height: 16px;\n    }\n`;\n\nconst NoteContainer = styled.div`\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ${NoteLabel} {\n            color: ${COLORS.correct_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.correct_500};\n            }\n        }\n    }\n\n    &.invalid {\n        ${NoteLabel} {\n            color: ${COLORS.critical_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.critical_500};\n            }\n        }\n    }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n    min-width: 160px;\n    height: ${props => props.size === Size.Small?'48px':'56px'};\n    display: flex;\n    border: 0;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    }\n\n    &.disabled {\n        border: 1px solid ${COLORS.neutral_100};\n        cursor: not-allowed;\n        \n        ${PrefixContainer}{\n            color: ${COLORS.neutral_300};\n        }\n\n        ${NumberInput}{\n            color: ${COLORS.neutral_300};\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.readOnly {\n        background: ${COLORS.neutral_100};\n        border: 1px solid ${COLORS.neutral_300};\n        cursor: not-allowed;\n\n        ${NumberInput}{\n            background: ${COLORS.neutral_100};\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ${COLORS.correct_400};\n        box-shadow: none;\n    }\n\n    &.invalid {\n        border: 2px solid ${COLORS.critical_400};\n        box-shadow: none;\n    }\n`;\n\ntype NumberFieldProps = {\n    size: Size.Small | Size.Medium;\n    prefix?: string;\n    interval?: number;\n    label: string;\n    note?: string;\n    noteIcon?: React.ReactNode;\n    required?: boolean;\n    minValue?: number;\n    maxValue?: number;\n    allowNegative?: boolean;\n    decimalPrecision?: number;\n    disabled?: boolean;\n    readOnly?: boolean;\n    valid?: boolean;\n    defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n    {size=Size.Small, \n     label,\n     note, \n     noteIcon, \n     required, \n     prefix,\n     interval=1, \n     minValue, \n     maxValue, \n     allowNegative, \n     decimalPrecision, \n     disabled=false, \n     readOnly=false, \n     valid,\n     defaultVal}) => {\n    const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n    let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        switch(e.key){\n            case 'ArrowUp': addInterval();\n                            break;\n            case 'ArrowDown': subtractInterval();\n                            break;\n            default: break;\n        }\n    }\n\n    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n        let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n        let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n        \n        let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/);        \n        let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n        let negativeAndDecimalRegex =  (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n        \n        let val = e.target.value;    \n        if(val!==''){\n            if(allowNegative && decimalPrecision){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else{\n                    if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n\n                    else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n                        setUserInput(val);\n                    \n                    else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n                }\n            }\n\n            else if(allowNegative){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n                    setUserInput(val);\n            }\n\n            else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n                if(decimalPrecisionRegex!.test(val))\n                    setUserInput(val);\n                else if(decimalFormationRegEx.test(val))\n                    setUserInput(val);\n                else if(!val.includes('.') && simpleRegex.test(val))\n                    setUserInput(val);\n            }\n\n            else if(simpleRegex.test(val) && isInRange(val, false)){\n                setUserInput(val);\n            }\n        }\n\n        if(val==='')\n            setUserInput('');\n    }\n\n    const isInRange = (value: string, isDecimal: boolean): boolean => {\n        let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n        if(minValue && minValue>x)\n            return false;\n        else if(maxValue && maxValue<x)\n            return false;\n        else\n            return true;\n    }\n\n    const addInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (minValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val +=1;\n\n            if(maxValue && maxValue>=val)\n                setUserInput(val.toString());\n            else if(!maxValue)\n                setUserInput(val.toString());\n        }\n    }\n\n    const subtractInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (maxValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val -=1;\n            \n            if(minValue && minValue<=val)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n            else if(!minValue)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n        }\n    }\n\n    const isLocked = (input: string, operator: string): boolean => {\n        let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n        val = isNaN(val) && userInput === '' ? 0 : val;\n        let operatorState = false;\n        if(operator === 'add' && maxValue)\n            operatorState = val < maxValue ? false : true;\n        \n        if(operator === 'subtract' && minValue)\n            operatorState =  val > minValue ? false : true;\n\n        if(operator === 'subtract' && !minValue && !allowNegative)\n            operatorState =  val > 0 ? false : true;\n\n        return operatorState;\n    }\n\n    return (\n        <Container>\n            <LabelContainer size={size}>\n                {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n                    <SystemIcons.Asterisk color={COLORS.critical_500}/>\n                </LabelIcon>\n                }\n                <LabelText>\n                    {label}\n                </LabelText>\n            </LabelContainer>\n\n            <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n                                                                .concat(readOnly?' readOnly':'')\n                                                                .concat(fieldState?` ${fieldState}`:'')}>\n                <InputWrapper size={size}>\n                    {prefix && <PrefixContainer size={size}>\n                        {prefix}\n                    </PrefixContainer>}\n                    <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n                </InputWrapper>\n\n                <OperatorWrapper data-testid={'operators'} size={size}>\n                    <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n                        <SystemIcons.Minus size='14px'/>\n                    </IconButton>                    \n                    <div className='divider'></div>\n                    <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n                        <SystemIcons.Plus size='14px'/>\n                    </IconButton>\n                </OperatorWrapper>\n            </InputContainer>\n\n            {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n                <NoteIcon>\n                    {noteIcon}\n                </NoteIcon>\n                <NoteLabel size={size}>\n                    {note}\n                </NoteLabel>                \n            </NoteContainer>\n            }\n        </Container>\n    );    \n}\n\nexport default NumberField;\n"],"file":"NumberField.js"}
+{"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["React","styled","IconButton","SystemIcons","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","ComponentXSStyling","Size","Container","div","LabelContainer","neutral_500","props","size","Small","Regular","LabelText","LabelIcon","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","black","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{size: Size}>`\n    margin-bottom: 4px;\n    color: ${COLORS.neutral_500};\n    display: flex;\n    ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n    margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n    svg {\n        height: 9px;\n        width: 9px;\n    }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n    margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n    display: flex;\n    flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n    margin-right: 4px;\n    width: ${props => props.size === Size.Small?'10px':'11px'};\n    height: ${props => props.size === Size.Small?'20px':'24px'};\n    color: ${COLORS.neutral_500};\n    ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n    display: flex;\n    margin:${props => props.size === Size.Medium?'4px 0':''};\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ${COLORS.neutral_200};\n        width: 1px;\n    }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n    width: 100%; \n    height: ${props => props.fieldSize === Size.Small?'20px':'24px'};   \n    border: none;\n    color: ${COLORS.neutral_500};\n    padding: 0;    \n    ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Regular, COLORS.black):ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n\n    &::placeholder {\n        ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n    }\n`;\n\nconst NoteLabel = styled.div<{size: Size}>`\n    color: ${COLORS.neutral_500};\n    ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}    \n`;\n\nconst NoteIcon = styled.div`\n    svg {\n        height: 16px;\n    }\n`;\n\nconst NoteContainer = styled.div`\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ${NoteLabel} {\n            color: ${COLORS.correct_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.correct_500};\n            }\n        }\n    }\n\n    &.invalid {\n        ${NoteLabel} {\n            color: ${COLORS.critical_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.critical_500};\n            }\n        }\n    }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n    min-width: 160px;\n    height: ${props => props.size === Size.Small?'48px':'56px'};\n    display: flex;\n    border: 0;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    }\n\n    &.disabled {\n        border: 1px solid ${COLORS.neutral_100};\n        cursor: not-allowed;\n        \n        ${PrefixContainer}{\n            color: ${COLORS.neutral_300};\n        }\n\n        ${NumberInput}{\n            color: ${COLORS.neutral_300};\n            cursor: not-allowed;\n            pointer-events: none;\n\n            &::placeholder {\n                color: ${COLORS.neutral_300};\n            }\n        }\n    }\n\n    &.readOnly {\n        background: ${COLORS.neutral_100};\n        border: 1px solid ${COLORS.neutral_300};\n        cursor: not-allowed;\n\n        ${NumberInput}{\n            background: ${COLORS.neutral_100};\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ${COLORS.correct_400};\n        box-shadow: none;\n    }\n\n    &.invalid {\n        border: 2px solid ${COLORS.critical_400};\n        box-shadow: none;\n    }\n`;\n\ntype NumberFieldProps = {\n    size: Size.Small | Size.Medium;\n    prefix?: string;\n    interval?: number;\n    label: string;\n    note?: string;\n    noteIcon?: React.ReactNode;\n    required?: boolean;\n    minValue?: number;\n    maxValue?: number;\n    allowNegative?: boolean;\n    decimalPrecision?: number;\n    disabled?: boolean;\n    readOnly?: boolean;\n    valid?: boolean;\n    defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n    {size=Size.Small, \n     label,\n     note, \n     noteIcon, \n     required, \n     prefix,\n     interval=1, \n     minValue, \n     maxValue, \n     allowNegative, \n     decimalPrecision, \n     disabled=false, \n     readOnly=false, \n     valid,\n     defaultVal}) => {\n    const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n    let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        switch(e.key){\n            case 'ArrowUp': addInterval();\n                            break;\n            case 'ArrowDown': subtractInterval();\n                            break;\n            default: break;\n        }\n    }\n\n    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n        let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n        let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n        \n        let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/);        \n        let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n        let negativeAndDecimalRegex =  (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n        \n        let val = e.target.value;    \n        if(val!==''){\n            if(allowNegative && decimalPrecision){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else{\n                    if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n\n                    else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n                        setUserInput(val);\n                    \n                    else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n                }\n            }\n\n            else if(allowNegative){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n                    setUserInput(val);\n            }\n\n            else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n                if(decimalPrecisionRegex!.test(val))\n                    setUserInput(val);\n                else if(decimalFormationRegEx.test(val))\n                    setUserInput(val);\n                else if(!val.includes('.') && simpleRegex.test(val))\n                    setUserInput(val);\n            }\n\n            else if(simpleRegex.test(val) && isInRange(val, false)){\n                setUserInput(val);\n            }\n        }\n\n        if(val==='')\n            setUserInput('');\n    }\n\n    const isInRange = (value: string, isDecimal: boolean): boolean => {\n        let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n        if(minValue && minValue>x)\n            return false;\n        else if(maxValue && maxValue<x)\n            return false;\n        else\n            return true;\n    }\n\n    const addInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (minValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val +=1;\n\n            if(maxValue && maxValue>=val)\n                setUserInput(val.toString());\n            else if(!maxValue)\n                setUserInput(val.toString());\n        }\n    }\n\n    const subtractInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (maxValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val -=1;\n            \n            if(minValue && minValue<=val)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n            else if(!minValue)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n        }\n    }\n\n    const isLocked = (input: string, operator: string): boolean => {\n        let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n        val = isNaN(val) && userInput === '' ? 0 : val;\n        let operatorState = false;\n        if(operator === 'add' && maxValue)\n            operatorState = val < maxValue ? false : true;\n        \n        if(operator === 'subtract' && minValue)\n            operatorState =  val > minValue ? false : true;\n\n        if(operator === 'subtract' && !minValue && !allowNegative)\n            operatorState =  val > 0 ? false : true;\n\n        return operatorState;\n    }\n\n    return (\n        <Container>\n            <LabelContainer size={size}>\n                {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n                    <SystemIcons.Asterisk color={COLORS.critical_500}/>\n                </LabelIcon>\n                }\n                <LabelText>\n                    {label}\n                </LabelText>\n            </LabelContainer>\n\n            <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n                                                                .concat(readOnly?' readOnly':'')\n                                                                .concat(fieldState?` ${fieldState}`:'')}>\n                <InputWrapper size={size}>\n                    {prefix && <PrefixContainer size={size}>\n                        {prefix}\n                    </PrefixContainer>}\n                    <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n                </InputWrapper>\n\n                <OperatorWrapper data-testid={'operators'} size={size}>\n                    <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n                        <SystemIcons.Minus size='14px'/>\n                    </IconButton>                    \n                    <div className='divider'></div>\n                    <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n                        <SystemIcons.Plus size='14px'/>\n                    </IconButton>\n                </OperatorWrapper>\n            </InputContainer>\n\n            {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n                <NoteIcon>\n                    {noteIcon}\n                </NoteIcon>\n                <NoteLabel size={size}>\n                    {note}\n                </NoteLabel>                \n            </NoteContainer>\n            }\n        </Container>\n    );    \n}\n\nexport default NumberField;\n"],"file":"NumberField.js"}

package/dist/MenuItem/MenuItem.cjs

@@ -53,12 +53,20 @@ var ItemIconRight = _styledComponents.default.div(_templateObject4 || (_template
 
 exports.ItemIconRight = ItemIconRight;
 
-var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, ItemIconRight);
+var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: ", ";\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: ", ";\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), function (props) {
+  return props.size === _types.Size.Small ? 'auto 0 auto 10px' : props.size === _types.Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
+}, ItemLabel, ItemIcon, function (props) {
+  return props.size === _types.Size.Small ? '6px' : '8px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '20px' : '';
+}, function (props) {
+  return props.size === _types.Size.Small ? '20px' : '';
+}, ItemIconRight);
 
 exports.ItemContent = ItemContent;
 
 var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\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    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600);
+  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, ItemLabel, ItemIcon, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, ItemLabel, ItemIcon, _styles.COLORS.primary_700, _styles.focusStyles, _styles.COLORS.primary_100, ItemLabel, ItemIcon, _styles.COLORS.primary_800, _styles.COLORS.neutral_20, ItemLabel, ItemIcon, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, ItemIcon, ItemLabel, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_100, ItemIcon, ItemLabel, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600);
 };
 
 exports.DropdownButtonCSS = DropdownButtonCSS;
@@ -87,6 +95,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [item.showDividerAbove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "divider"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemContent, {
+      size: size,
       children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemIcon, {
         children: item.icon
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemLabel, {

package/dist/MenuItem/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","css","Size","Small","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","Large","white","CommonInteractionStyling","neutral_20","primary_500","neutral_500","primary_20","primary_600","primary_100","primary_800","neutral_200","MenuItem","React","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${ItemIconRight} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\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    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\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, &.active-active-state {\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    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Size","Small","Large","css","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","white","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_200","primary_600","MenuItem","React","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n    margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\n      svg {\n        display: block;\n        margin: auto;\n        height:${props=>props.size===Size.Small?'20px':''};\n        width:${props=>props.size===Size.Small?'20px':''};\n      }\n    }\n\n    ${ItemIconRight} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\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: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${ItemLabel}, ${ItemIcon} {\n      color: ${COLORS.neutral_600};\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ${COLORS.primary_20};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_700};\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ${focusStyles}\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ${COLORS.primary_100};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.neutral_800};\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_700};\n      }      \n\n      &::after {\n        background-color: ${COLORS.primary_700};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent size={size}>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}

package/dist/MenuItem/MenuItem.d.ts

@@ -17,7 +17,9 @@ export declare const DropdownButton: import("styled-components").StyledComponent
 export declare const ItemLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemIconRight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+}, never>;
 export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
 declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default MenuItem;

package/dist/MenuItem/MenuItem.js

@@ -5,11 +5,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import * as React from 'react';
 import styled, { css } from 'styled-components';
-import { COLORS, ComponentTextStyle } from '../styles';
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
 import { LockedOn } from '../icons/systemicons/SystemIcons';
 import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
-import { CommonInteractionStyling, defaultOnMouseDownHandler } from '../common';
+import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DropdownButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
@@ -18,9 +18,17 @@ export var DropdownButton = styled.button(_templateObject || (_templateObject =
 export var ItemLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 export var ItemIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
 export var ItemIconRight = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
-export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, ItemIconRight);
+export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: ", ";\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: ", ";\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), function (props) {
+  return props.size === Size.Small ? 'auto 0 auto 10px' : props.size === Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
+}, ItemLabel, ItemIcon, function (props) {
+  return props.size === Size.Small ? '6px' : '8px';
+}, function (props) {
+  return props.size === Size.Small ? '20px' : '';
+}, function (props) {
+  return props.size === Size.Small ? '20px' : '';
+}, ItemIconRight);
 export var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\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    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), 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), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, CommonInteractionStyling, COLORS.neutral_20, COLORS.primary_500, COLORS.neutral_500, COLORS.primary_20, COLORS.primary_600, COLORS.primary_500, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600);
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), 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), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, ItemLabel, ItemIcon, COLORS.neutral_600, COLORS.primary_20, ItemLabel, ItemIcon, COLORS.primary_700, focusStyles, COLORS.primary_100, ItemLabel, ItemIcon, COLORS.primary_800, COLORS.neutral_20, ItemLabel, ItemIcon, COLORS.neutral_800, COLORS.primary_500, COLORS.neutral_500, COLORS.primary_20, ItemIcon, ItemLabel, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, ItemIcon, ItemLabel, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600);
 };
 var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _item$displayLabel;
@@ -47,6 +55,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [item.showDividerAbove && /*#__PURE__*/_jsx("div", {
       className: "divider"
     }), /*#__PURE__*/_jsxs(ItemContent, {
+      size: size,
       children: [item.icon && /*#__PURE__*/_jsx(ItemIcon, {
         children: item.icon
       }), /*#__PURE__*/_jsxs(ItemLabel, {

package/dist/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","CommonInteractionStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Small","Regular","neutral_600","Medium","Large","white","neutral_20","primary_500","neutral_500","primary_20","primary_600","primary_100","primary_800","neutral_200","MenuItem","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${ItemIconRight} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\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    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\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, &.active-active-state {\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    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","focusStyles","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Small","Large","Regular","neutral_600","Medium","white","primary_20","primary_700","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_200","primary_600","MenuItem","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n    margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\n      svg {\n        display: block;\n        margin: auto;\n        height:${props=>props.size===Size.Small?'20px':''};\n        width:${props=>props.size===Size.Small?'20px':''};\n      }\n    }\n\n    ${ItemIconRight} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\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: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${ItemLabel}, ${ItemIcon} {\n      color: ${COLORS.neutral_600};\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ${COLORS.primary_20};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_700};\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ${focusStyles}\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ${COLORS.primary_100};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.neutral_800};\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_700};\n      }      \n\n      &::after {\n        background-color: ${COLORS.primary_700};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent size={size}>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}

package/dist/ProfileButton/ProfileButton.cjs

@@ -59,7 +59,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
         src: portraitSrc
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PortraitOverlay, {})]
-    }) || initials && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentS, {
+    }) || initials && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentM, {
       className: "initials",
       textStyle: _styles.ComponentTextStyle.Bold,
       color: disabled ? _.COLORS.neutral_300 : _.COLORS.white,
@@ -82,7 +82,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       hideOnLowWidth: hideOnLowWidth,
       children: [renderIcon(), notificationVariant && /*#__PURE__*/(0, _jsxRuntime.jsx)(NotificationContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
-          size: _.Size.Medium,
+          size: _.Size.Small,
           variant: notificationVariant
         })
       })]

package/dist/ProfileButton/ProfileButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","Container","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAcA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,8vBAMXI,mCANW,EAOA,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTC,oBAAYC,MATH,EAkBPC,6BAlBO,EAmBaR,SAAOS,WAnBpB,EAsBGT,SAAOU,WAtBV,EA6BPb,eA7BO,EAqCPA,eArCO,CAAf;;AA6CA,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTf,cAKS,QALTA,cAKS;AAAA,MAJTgB,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEO,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEN,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO4B,KAD1D;AAAA,gBAEGT;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,SAAD;AAAW,IAAA,cAAc,EAAEb,cAA3B;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB,cAP5B;AAAA,iBAQGoB,UAAU,EARb,EASGH,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEO,OAAKC,MAA5B;AAAoC,UAAA,OAAO,EAAER;AAA7C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAlB,EAAAA,c;AACAmB,EAAAA,Q;;eA+HaX,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  disabled?: boolean;\n  notificationVariant?: 'positive' | 'critical';\n  className?: string;\n  hideOnLowWidth?: boolean;\n  tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <Container hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </Container>\n  );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}
+{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","Container","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","ComponentTextStyle","Bold","white","Size","Small"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAcA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,8vBAMXI,mCANW,EAOA,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTC,oBAAYC,MATH,EAkBPC,6BAlBO,EAmBaR,SAAOS,WAnBpB,EAsBGT,SAAOU,WAtBV,EA6BPb,eA7BO,EAqCPA,eArCO,CAAf;;AA6CA,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTf,cAKS,QALTA,cAKS;AAAA,MAJTgB,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEO,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEN,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO4B,KAD1D;AAAA,gBAEGT;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,SAAD;AAAW,IAAA,cAAc,EAAEb,cAA3B;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB,cAP5B;AAAA,iBAQGoB,UAAU,EARb,EASGH,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEO,OAAKC,KAA5B;AAAmC,UAAA,OAAO,EAAER;AAA5C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAlB,EAAAA,c;AACAmB,EAAAA,Q;;eA+HaX,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentM, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  disabled?: boolean;\n  notificationVariant?: 'positive' | 'critical';\n  className?: string;\n  hideOnLowWidth?: boolean;\n  tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentM className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentM>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <Container hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Small} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </Container>\n  );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}

package/dist/ProfileButton/ProfileButton.js

@@ -8,7 +8,7 @@ import styled from 'styled-components';
 import { COLORS, IconButton, Size } from '..';
 import { IconButtonContent, StyledPrimaryIconButton } from '../Button/Iconbutton';
 import { NotificationDot } from '../NotificationDot';
-import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
+import { BREAKPOINTS, ComponentM, ComponentTextStyle } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -34,7 +34,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: [/*#__PURE__*/_jsx("img", {
         src: portraitSrc
       }), /*#__PURE__*/_jsx(PortraitOverlay, {})]
-    }) || initials && /*#__PURE__*/_jsx(ComponentS, {
+    }) || initials && /*#__PURE__*/_jsx(ComponentM, {
       className: "initials",
       textStyle: ComponentTextStyle.Bold,
       color: disabled ? COLORS.neutral_300 : COLORS.white,
@@ -57,7 +57,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       hideOnLowWidth: hideOnLowWidth,
       children: [renderIcon(), notificationVariant && /*#__PURE__*/_jsx(NotificationContainer, {
         children: /*#__PURE__*/_jsx(NotificationDot, {
-          size: Size.Medium,
+          size: Size.Small,
           variant: notificationVariant
         })
       })]

package/dist/ProfileButton/ProfileButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","PortraitOverlay","div","black","Container","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","Bold","white","Medium"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,UAAhB,EAA4BC,IAA5B,QAAuC,IAAvC;AACA,SAAQC,iBAAR,EAA2BC,uBAA3B,QAAyD,sBAAzD;AACA,SAAQC,eAAR,QAA8B,oBAA9B;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,kBAAjC,QAA0D,WAA1D;;;;AAcA,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAV,4NAICV,MAAM,CAACW,KAJR,CAArB;AAWA,IAAMC,SAAS,GAAGb,MAAM,CAACW,GAAV,gvBAMXN,uBANW,EAOA,UAAAS,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTR,WAAW,CAACS,MATH,EAkBPZ,iBAlBO,EAmBaH,MAAM,CAACgB,WAnBpB,EAsBGhB,MAAM,CAACiB,WAtBV,EA6BPR,eA7BO,EAqCPA,eArCO,CAAf;AA6CA,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAV,gIAA3B;AAMA,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAV,uOAAlB;AAaA,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTZ,cAKS,QALTA,cAKS;AAAA,MAJTa,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,MAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,KAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEjB,kBAAkB,CAACwB,IAA/D;AACY,MAAA,KAAK,EAAEL,QAAQ,GAAG3B,MAAM,CAACiB,WAAV,GAAwBjB,MAAM,CAACiC,KAD1D;AAAA,gBAEGR;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,KAAC,SAAD;AAAW,IAAA,cAAc,EAAEV,cAA3B;AAAA,2BACE,MAAC,UAAD;AAAY,MAAA,GAAG,EAAEQ,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEhB,cAP5B;AAAA,iBAQGiB,UAAU,EARb,EASGH,mBAAmB,iBAClB,KAAC,qBAAD;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAE1B,IAAI,CAACgC,MAA5B;AAAoC,UAAA,OAAO,EAAEN;AAA7C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,aAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAf,EAAAA,c;AACAgB,EAAAA,Q;;AA+HF,eAAeV,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  disabled?: boolean;\n  notificationVariant?: 'positive' | 'critical';\n  className?: string;\n  hideOnLowWidth?: boolean;\n  tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <Container hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </Container>\n  );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.js"}
+{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentM","ComponentTextStyle","PortraitOverlay","div","black","Container","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","Bold","white","Small"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,UAAhB,EAA4BC,IAA5B,QAAuC,IAAvC;AACA,SAAQC,iBAAR,EAA2BC,uBAA3B,QAAyD,sBAAzD;AACA,SAAQC,eAAR,QAA8B,oBAA9B;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,kBAAjC,QAA0D,WAA1D;;;;AAcA,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAV,4NAICV,MAAM,CAACW,KAJR,CAArB;AAWA,IAAMC,SAAS,GAAGb,MAAM,CAACW,GAAV,gvBAMXN,uBANW,EAOA,UAAAS,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTR,WAAW,CAACS,MATH,EAkBPZ,iBAlBO,EAmBaH,MAAM,CAACgB,WAnBpB,EAsBGhB,MAAM,CAACiB,WAtBV,EA6BPR,eA7BO,EAqCPA,eArCO,CAAf;AA6CA,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAV,gIAA3B;AAMA,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAV,uOAAlB;AAaA,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTZ,cAKS,QALTA,cAKS;AAAA,MAJTa,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,MAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,KAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEjB,kBAAkB,CAACwB,IAA/D;AACY,MAAA,KAAK,EAAEL,QAAQ,GAAG3B,MAAM,CAACiB,WAAV,GAAwBjB,MAAM,CAACiC,KAD1D;AAAA,gBAEGR;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,KAAC,SAAD;AAAW,IAAA,cAAc,EAAEV,cAA3B;AAAA,2BACE,MAAC,UAAD;AAAY,MAAA,GAAG,EAAEQ,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEhB,cAP5B;AAAA,iBAQGiB,UAAU,EARb,EASGH,mBAAmB,iBAClB,KAAC,qBAAD;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAE1B,IAAI,CAACgC,KAA5B;AAAmC,UAAA,OAAO,EAAEN;AAA5C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,aAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAf,EAAAA,c;AACAgB,EAAAA,Q;;AA+HF,eAAeV,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentM, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  disabled?: boolean;\n  notificationVariant?: 'positive' | 'critical';\n  className?: string;\n  hideOnLowWidth?: boolean;\n  tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentM className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentM>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <Container hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Small} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </Container>\n  );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.js"}

package/dist/styles/colors.cjs

@@ -85,6 +85,7 @@ var COLORS = {
   critical_800: '#6B0613',
   neutral_20: '#FAFAFA',
   // 020 Core
+  neutral_50: '#F2F2F2',
   neutral_100: '#E5E5E5',
   neutral_200: '#CCCCCC',
   neutral_300: '#B3B3B3',

package/dist/styles/colors.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n  black: '#1F1F1F', // Neutrals / Black\n  white: '#FFFFFF', // Neutrals / White\n  grey:  '#949494', // Neutrals / grey\n  primary: '#2E7FA1', // Brand / Primary - Core 500\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\n  correct: '#37A851', // Semantic / Correct - Core 400\n  warning: '#E97116', // Semantic / Warning  - Core 400\n  critical: '#DC3449', // Semantic / Critical - Core 500\n\n  primary_20: '#F1FBFE',\n  primary_100: '#D4E9F2',\n  primary_200: '#A9D3E5',\n  primary_300: '#7FBCD7',\n  primary_400: '#519DBD',\n  primary_500: '#2E7FA1', // 500 Core\n  primary_600: '#276D8B',\n  primary_700: '#215369',\n  primary_800: '#163746',\n\n  accent1_20:  '#EDFCFB',\n  accent1_100: '#C8EEEC',\n  accent1_200: '#98D8D5',\n  accent1_300: '#6BC2BE',\n  accent1_400: '#3EA39E',\n  accent1_500: '#25837E', // 500 Core\n  accent1_600: '#23716D',\n  accent1_700: '#145653',\n  accent1_800: '#0F3937',\n\n  accent2_20:  '#FFFAEE',\n  accent2_100: '#F8E2BF',\n  accent2_200: '#EAC785', // 200 Core\n  accent2_300: '#D6AD61',\n  accent2_400: '#B58E45',\n  accent2_500: '#92702F',\n  accent2_600: '#806128',\n  accent2_700: '#604920',\n  accent2_800: '#42300F',\n\n  correct_20:  '#ECFEF1',\n  correct_100: '#CCEED2',\n  correct_200: '#A0D9AD',\n  correct_300: '#77C589',\n  correct_400: '#37A851', // 400 Core\n  correct_500: '#14892F',\n  correct_600: '#13772A',\n  correct_700: '#025A15',\n  correct_800: '#003D0E',\n\n  warning_20:  '#FEF7F1',\n  warning_100: '#FCDDC5',\n  warning_200: '#F8C096',\n  warning_300: '#F4A162',\n  warning_400: '#E97116', // 400 Core\n  warning_500: '#C45402',\n  warning_600: '#AD4B00',\n  warning_700: '#803700',\n  warning_800: '#572600',\n\n  critical_20:  '#FEF5F7',\n  critical_100: '#FDDEE2',\n  critical_200: '#FDBAC2',\n  critical_300: '#FD96A4',\n  critical_400: '#FC5A6F',\n  critical_500: '#DC3449', // 500 Core\n  critical_600: '#C32238',\n  critical_700: '#9C0D1D',\n  critical_800: '#6B0613',\n\n  neutral_20:  '#FAFAFA', // 020 Core\n  neutral_100: '#E5E5E5',\n  neutral_200: '#CCCCCC',\n  neutral_300: '#B3B3B3',\n  neutral_400: '#949494',\n  neutral_500: '#767676',\n  neutral_600: '#666666',\n  neutral_700: '#4D4D4D',\n  neutral_800: '#333333',\n\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n  toast_info: '#2E7FA1',\n  toast_success: '#37A851',\n  toast_warning: '#E97116',\n  toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.cjs"}
+{"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n  black: '#1F1F1F', // Neutrals / Black\n  white: '#FFFFFF', // Neutrals / White\n  grey:  '#949494', // Neutrals / grey\n  primary: '#2E7FA1', // Brand / Primary - Core 500\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\n  correct: '#37A851', // Semantic / Correct - Core 400\n  warning: '#E97116', // Semantic / Warning  - Core 400\n  critical: '#DC3449', // Semantic / Critical - Core 500\n\n  primary_20: '#F1FBFE',\n  primary_100: '#D4E9F2',\n  primary_200: '#A9D3E5',\n  primary_300: '#7FBCD7',\n  primary_400: '#519DBD',\n  primary_500: '#2E7FA1', // 500 Core\n  primary_600: '#276D8B',\n  primary_700: '#215369',\n  primary_800: '#163746',\n\n  accent1_20:  '#EDFCFB',\n  accent1_100: '#C8EEEC',\n  accent1_200: '#98D8D5',\n  accent1_300: '#6BC2BE',\n  accent1_400: '#3EA39E',\n  accent1_500: '#25837E', // 500 Core\n  accent1_600: '#23716D',\n  accent1_700: '#145653',\n  accent1_800: '#0F3937',\n\n  accent2_20:  '#FFFAEE',\n  accent2_100: '#F8E2BF',\n  accent2_200: '#EAC785', // 200 Core\n  accent2_300: '#D6AD61',\n  accent2_400: '#B58E45',\n  accent2_500: '#92702F',\n  accent2_600: '#806128',\n  accent2_700: '#604920',\n  accent2_800: '#42300F',\n\n  correct_20:  '#ECFEF1',\n  correct_100: '#CCEED2',\n  correct_200: '#A0D9AD',\n  correct_300: '#77C589',\n  correct_400: '#37A851', // 400 Core\n  correct_500: '#14892F',\n  correct_600: '#13772A',\n  correct_700: '#025A15',\n  correct_800: '#003D0E',\n\n  warning_20:  '#FEF7F1',\n  warning_100: '#FCDDC5',\n  warning_200: '#F8C096',\n  warning_300: '#F4A162',\n  warning_400: '#E97116', // 400 Core\n  warning_500: '#C45402',\n  warning_600: '#AD4B00',\n  warning_700: '#803700',\n  warning_800: '#572600',\n\n  critical_20:  '#FEF5F7',\n  critical_100: '#FDDEE2',\n  critical_200: '#FDBAC2',\n  critical_300: '#FD96A4',\n  critical_400: '#FC5A6F',\n  critical_500: '#DC3449', // 500 Core\n  critical_600: '#C32238',\n  critical_700: '#9C0D1D',\n  critical_800: '#6B0613',\n\n  neutral_20:  '#FAFAFA', // 020 Core\n  neutral_50:  '#F2F2F2',\n  neutral_100: '#E5E5E5',\n  neutral_200: '#CCCCCC',\n  neutral_300: '#B3B3B3',\n  neutral_400: '#949494',\n  neutral_500: '#767676',\n  neutral_600: '#666666',\n  neutral_700: '#4D4D4D',\n  neutral_800: '#333333',\n\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n  toast_info: '#2E7FA1',\n  toast_success: '#37A851',\n  toast_warning: '#E97116',\n  toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.cjs"}

package/dist/styles/colors.d.ts

@@ -63,6 +63,7 @@ declare const COLORS: {
     critical_700: string;
     critical_800: string;
     neutral_20: string;
+    neutral_50: string;
     neutral_100: string;
     neutral_200: string;
     neutral_300: string;

package/dist/styles/colors.js

@@ -79,6 +79,7 @@ var COLORS = {
   critical_800: '#6B0613',
   neutral_20: '#FAFAFA',
   // 020 Core
+  neutral_50: '#F2F2F2',
   neutral_100: '#E5E5E5',
   neutral_200: '#CCCCCC',
   neutral_300: '#B3B3B3',

package/dist/styles/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n  black: '#1F1F1F', // Neutrals / Black\n  white: '#FFFFFF', // Neutrals / White\n  grey:  '#949494', // Neutrals / grey\n  primary: '#2E7FA1', // Brand / Primary - Core 500\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\n  correct: '#37A851', // Semantic / Correct - Core 400\n  warning: '#E97116', // Semantic / Warning  - Core 400\n  critical: '#DC3449', // Semantic / Critical - Core 500\n\n  primary_20: '#F1FBFE',\n  primary_100: '#D4E9F2',\n  primary_200: '#A9D3E5',\n  primary_300: '#7FBCD7',\n  primary_400: '#519DBD',\n  primary_500: '#2E7FA1', // 500 Core\n  primary_600: '#276D8B',\n  primary_700: '#215369',\n  primary_800: '#163746',\n\n  accent1_20:  '#EDFCFB',\n  accent1_100: '#C8EEEC',\n  accent1_200: '#98D8D5',\n  accent1_300: '#6BC2BE',\n  accent1_400: '#3EA39E',\n  accent1_500: '#25837E', // 500 Core\n  accent1_600: '#23716D',\n  accent1_700: '#145653',\n  accent1_800: '#0F3937',\n\n  accent2_20:  '#FFFAEE',\n  accent2_100: '#F8E2BF',\n  accent2_200: '#EAC785', // 200 Core\n  accent2_300: '#D6AD61',\n  accent2_400: '#B58E45',\n  accent2_500: '#92702F',\n  accent2_600: '#806128',\n  accent2_700: '#604920',\n  accent2_800: '#42300F',\n\n  correct_20:  '#ECFEF1',\n  correct_100: '#CCEED2',\n  correct_200: '#A0D9AD',\n  correct_300: '#77C589',\n  correct_400: '#37A851', // 400 Core\n  correct_500: '#14892F',\n  correct_600: '#13772A',\n  correct_700: '#025A15',\n  correct_800: '#003D0E',\n\n  warning_20:  '#FEF7F1',\n  warning_100: '#FCDDC5',\n  warning_200: '#F8C096',\n  warning_300: '#F4A162',\n  warning_400: '#E97116', // 400 Core\n  warning_500: '#C45402',\n  warning_600: '#AD4B00',\n  warning_700: '#803700',\n  warning_800: '#572600',\n\n  critical_20:  '#FEF5F7',\n  critical_100: '#FDDEE2',\n  critical_200: '#FDBAC2',\n  critical_300: '#FD96A4',\n  critical_400: '#FC5A6F',\n  critical_500: '#DC3449', // 500 Core\n  critical_600: '#C32238',\n  critical_700: '#9C0D1D',\n  critical_800: '#6B0613',\n\n  neutral_20:  '#FAFAFA', // 020 Core\n  neutral_100: '#E5E5E5',\n  neutral_200: '#CCCCCC',\n  neutral_300: '#B3B3B3',\n  neutral_400: '#949494',\n  neutral_500: '#767676',\n  neutral_600: '#666666',\n  neutral_700: '#4D4D4D',\n  neutral_800: '#333333',\n\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n  toast_info: '#2E7FA1',\n  toast_success: '#37A851',\n  toast_warning: '#E97116',\n  toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.js"}
+{"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n  black: '#1F1F1F', // Neutrals / Black\n  white: '#FFFFFF', // Neutrals / White\n  grey:  '#949494', // Neutrals / grey\n  primary: '#2E7FA1', // Brand / Primary - Core 500\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\n  correct: '#37A851', // Semantic / Correct - Core 400\n  warning: '#E97116', // Semantic / Warning  - Core 400\n  critical: '#DC3449', // Semantic / Critical - Core 500\n\n  primary_20: '#F1FBFE',\n  primary_100: '#D4E9F2',\n  primary_200: '#A9D3E5',\n  primary_300: '#7FBCD7',\n  primary_400: '#519DBD',\n  primary_500: '#2E7FA1', // 500 Core\n  primary_600: '#276D8B',\n  primary_700: '#215369',\n  primary_800: '#163746',\n\n  accent1_20:  '#EDFCFB',\n  accent1_100: '#C8EEEC',\n  accent1_200: '#98D8D5',\n  accent1_300: '#6BC2BE',\n  accent1_400: '#3EA39E',\n  accent1_500: '#25837E', // 500 Core\n  accent1_600: '#23716D',\n  accent1_700: '#145653',\n  accent1_800: '#0F3937',\n\n  accent2_20:  '#FFFAEE',\n  accent2_100: '#F8E2BF',\n  accent2_200: '#EAC785', // 200 Core\n  accent2_300: '#D6AD61',\n  accent2_400: '#B58E45',\n  accent2_500: '#92702F',\n  accent2_600: '#806128',\n  accent2_700: '#604920',\n  accent2_800: '#42300F',\n\n  correct_20:  '#ECFEF1',\n  correct_100: '#CCEED2',\n  correct_200: '#A0D9AD',\n  correct_300: '#77C589',\n  correct_400: '#37A851', // 400 Core\n  correct_500: '#14892F',\n  correct_600: '#13772A',\n  correct_700: '#025A15',\n  correct_800: '#003D0E',\n\n  warning_20:  '#FEF7F1',\n  warning_100: '#FCDDC5',\n  warning_200: '#F8C096',\n  warning_300: '#F4A162',\n  warning_400: '#E97116', // 400 Core\n  warning_500: '#C45402',\n  warning_600: '#AD4B00',\n  warning_700: '#803700',\n  warning_800: '#572600',\n\n  critical_20:  '#FEF5F7',\n  critical_100: '#FDDEE2',\n  critical_200: '#FDBAC2',\n  critical_300: '#FD96A4',\n  critical_400: '#FC5A6F',\n  critical_500: '#DC3449', // 500 Core\n  critical_600: '#C32238',\n  critical_700: '#9C0D1D',\n  critical_800: '#6B0613',\n\n  neutral_20:  '#FAFAFA', // 020 Core\n  neutral_50:  '#F2F2F2',\n  neutral_100: '#E5E5E5',\n  neutral_200: '#CCCCCC',\n  neutral_300: '#B3B3B3',\n  neutral_400: '#949494',\n  neutral_500: '#767676',\n  neutral_600: '#666666',\n  neutral_700: '#4D4D4D',\n  neutral_800: '#333333',\n\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n  toast_info: '#2E7FA1',\n  toast_success: '#37A851',\n  toast_warning: '#E97116',\n  toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.js"}

package/package.json

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