@laerdal/life-react-components 1.9.9-dev.2 → 1.9.9-dev.27

package/dist/InputFields/RadioButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentTextStyle","Regular","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.cjs"}
+{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentTextStyle","Regular","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.cjs"}

package/dist/InputFields/RadioButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size } from '../types';
 interface Props {
-    id?: string;
+    id: string;
     selected: boolean;
     select: (selected: boolean) => void;
     label?: string;

package/dist/InputFields/RadioButton.js

@@ -76,7 +76,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, id);
 });
 RadioButton.propTypes = {
-  id: _pt.string,
+  id: _pt.string.isRequired,
   selected: _pt.bool.isRequired,
   select: _pt.func.isRequired,
   label: _pt.string,

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Medium","cls","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
+{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Medium","cls","undefined"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,cAAR,EAAwBC,aAAxB,QAA4C,kCAA5C;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,EAAoCC,WAApC,QAAsD,WAAtD;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,mBAAjE,QAA2F,WAA3F;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;AAEA,IAAMC,iBAAiB,GAAGZ,MAAM,CAACa,GAAV,ysDAMnB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CANc,EASZZ,MAAM,CAACa,KATK,EA0BR,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,QAAN,GAAiBd,MAAM,CAACe,WAAxB,GAAsCJ,KAAK,CAACK,OAAN,GAAgBhB,MAAM,CAACiB,YAAvB,GAAsCjB,MAAM,CAACkB,WAAxF;AAAA,CA1BG,EAwCfX,mBAAmB,CAACN,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACa,KAApC,CAxCJ,EA6CjBP,iBAAiB,CAACL,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACa,KAApC,CA7CA,EAoDjBR,iBAAiB,CAACJ,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACa,KAApC,CApDA,EA2DjBT,iBAAiB,CAACH,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACa,KAApC,CA3DA,EAkEjBX,WAlEiB,EAuEGF,MAAM,CAACoB,UAvEV,EA0ENpB,MAAM,CAACqB,WA1ED,EAiFHrB,MAAM,CAACsB,WAjFJ,EAoFNtB,MAAM,CAACuB,WApFD,EA4FVvB,MAAM,CAACwB,WA5FG,EAoGGxB,MAAM,CAACyB,KApGV,EAwGRzB,MAAM,CAACwB,WAxGC,EA8GGxB,MAAM,CAACoB,UA9GV,EAiHNpB,MAAM,CAACqB,WAjHD,CAAvB;AAsIA,IAAMK,WAAW,gBAAG9B,KAAK,CAAC+B,UAAN,CAAwC,gBAaWC,GAbX,EAamB;AAAA;;AAAA,MAZhBC,EAYgB,QAZhBA,EAYgB;AAAA,MAXhBf,QAWgB,QAXhBA,QAWgB;AAAA,MAVhBgB,KAUgB,QAVhBA,KAUgB;AAAA,MAThBC,eASgB,QAThBA,eASgB;AAAA,MARhBf,OAQgB,QARhBA,OAQgB;AAAA,MAPhBgB,MAOgB,QAPhBA,MAOgB;AAAA,MANhBC,QAMgB,QANhBA,QAMgB;AAAA,MALhBrB,MAKgB,QALhBA,MAKgB;AAAA,MAJhBsB,4BAIgB,QAJhBA,4BAIgB;AAAA,MAHhBC,IAGgB,QAHhBA,IAGgB;AAAA,MAFhBC,WAEgB,QAFhBA,WAEgB;AAAA,MADhBC,SACgB,QADhBA,SACgB;;AAC7E,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACP,QAAzB,EAAmC;AACjCD,MAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD;AACF,GAJD;;AAMAqB,EAAAA,IAAI,YAAGA,IAAH,yCAAWhC,IAAI,CAACsC,MAApB;AAEA,MAAMC,GAAG,aAAMP,IAAN,cAAcE,SAAS,IAAI,EAA3B,cAAiCJ,QAAQ,GAAG,WAAH,GAAiB,EAA1D,CAAT;AAEA,sBACE,MAAC,iBAAD;AAA4B,IAAA,MAAM,EAAErB,MAApC;AACmB,IAAA,GAAG,EAAEgB,GADxB;AAEmB,IAAA,OAAO,EAAE;AAAA,aAAM,CAACK,QAAD,IAAaD,MAAM,CAAC,CAAClB,QAAF,CAAzB;AAAA,KAF5B;AAGmB,IAAA,WAAW,EAAEN,yBAHhC;AAImB,IAAA,SAAS,EAAE8B,UAJ9B;AAKmB,IAAA,QAAQ,EAAEL,QAL7B;AAMmB,IAAA,SAAS,EAAES,GAN9B;AAOmB,IAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAASG,WAAW,GAAGA,WAAH,GAAiB,CAP1E;AAQmB,IAAA,OAAO,EAAEpB,OAR5B;AASmB,IAAA,QAAQ,EAAEF,QAT7B;AAAA,4BAUE;AAAK,MAAA,SAAS,EAAE,mBAAhB;AAAqC,MAAA,EAAE,EAAEe,EAAzC;AAAA,iBACGf,QAAQ,iBAAI,KAAC,aAAD;AAAe,QAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAAhF;AAAoF,QAAA,IAAI,EAAC;AAAzF,QADf,EAEG,CAACpB,QAAD,iBACC,KAAC,cAAD;AAAgB,QAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAAjF;AAAqF,QAAA,IAAI,EAAC;AAA1F,QAHJ;AAAA,MAVF,eAeE;AAAK,MAAA,SAAS,EAAE,oBAAhB;AAAA,iBACGJ,KAAK,iBAAI;AAAO,QAAA,OAAO,EAAED,EAAhB;AAAA,kBAAqBC;AAArB,QADZ,EAEGC,eAAe,KAAKY,SAApB,iBAAiC;AAAA,kBAAOZ;AAAP,QAFpC;AAAA,MAfF;AAAA,KAAwBF,EAAxB,CADF;AAsBD,CA9CmB,CAApB;;AAdEA,EAAAA,E;AACAf,EAAAA,Q;AACAkB,EAAAA,M;AACAF,EAAAA,K;AACAC,EAAAA,e;AACAf,EAAAA,O;AACAiB,EAAAA,Q;AACAC,EAAAA,4B;AACAtB,EAAAA,M;AAEAwB,EAAAA,W;AACAC,EAAAA,S;;AAmDF,eAAeX,WAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}

package/dist/InputFields/TextField.cjs

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var TextField = function TextField(_ref) {
   var id = _ref.id,
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
@@ -49,9 +49,6 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
       note = _ref.note;
   var elementRef = (0, _common.useFocusVisibleRef)();
-  React.useImperativeHandle(ref, function () {
-    return elementRef.current;
-  }, [elementRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.InputWrapper, {
       readOnly: readOnly,
@@ -101,7 +98,8 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })]
     })
   });
-});
+};
+
 TextField.propTypes = {
   id: _propTypes.default.string.isRequired,
   disabled: _propTypes.default.bool,

package/dist/InputFields/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","elementRef","useImperativeHandle","current","e","preventDefault","States","Invalid","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={`${state || (validationMessage ? States.Invalid : '')} ${size || ''}`}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"file":"TextField.cjs"}
+{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["TextField","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","elementRef","e","preventDefault","States","Invalid","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { Size, States } from '../types';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage } from './styling';\nimport { useFocusVisibleRef } from '../common';\nimport { TextFieldNote } from './types';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  readOnly,\n  onChange,\n  value,\n  validationMessage,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  pattern,\n  maxLength,\n  withoutBorder,\n  state,\n  size,\n  margin = '4px 0',\n  note,\n}: TextFieldProps) => {\n  const elementRef = useFocusVisibleRef();\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={`${state || (validationMessage ? States.Invalid : '')} ${size || ''}`}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.cjs"}

package/dist/InputFields/TextField.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Size, States } from '../types';
 import { TextFieldNote } from './types';
 declare type TextFieldProps = {
@@ -20,5 +19,5 @@ declare type TextFieldProps = {
     margin?: string;
     note?: TextFieldNote;
 };
-declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<unknown>>;
+declare const TextField: ({ id, disabled, readOnly, onChange, value, validationMessage, type, autoComplete, placeholder, required, pattern, maxLength, withoutBorder, state, size, margin, note, }: TextFieldProps) => JSX.Element;
 export default TextField;

package/dist/InputFields/TextField.js

@@ -8,7 +8,8 @@ import { useFocusVisibleRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+
+var TextField = function TextField(_ref) {
   var id = _ref.id,
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
@@ -28,9 +29,6 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
       note = _ref.note;
   var elementRef = useFocusVisibleRef();
-  React.useImperativeHandle(ref, function () {
-    return elementRef.current;
-  }, [elementRef]);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(InputWrapper, {
       readOnly: readOnly,
@@ -80,7 +78,8 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })]
     })
   });
-});
+};
+
 TextField.propTypes = {
   id: _pt.string.isRequired,
   disabled: _pt.bool,

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","elementRef","useImperativeHandle","current","e","preventDefault","Invalid","undefined","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={`${state || (validationMessage ? States.Invalid : '')} ${size || ''}`}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"file":"TextField.js"}
+{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","elementRef","e","preventDefault","Invalid","undefined","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { Size, States } from '../types';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage } from './styling';\nimport { useFocusVisibleRef } from '../common';\nimport { TextFieldNote } from './types';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  readOnly,\n  onChange,\n  value,\n  validationMessage,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  pattern,\n  maxLength,\n  withoutBorder,\n  state,\n  size,\n  margin = '4px 0',\n  note,\n}: TextFieldProps) => {\n  const elementRef = useFocusVisibleRef();\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={`${state || (validationMessage ? States.Invalid : '')} ${size || ''}`}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.js"}

package/dist/InputFields/index.cjs

@@ -5,18 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  TextField: true,
-  PasswordField: true,
-  Checkbox: true,
-  RadioButton: true,
-  SearchBar: true,
-  InputLabel: true,
-  DatepickerField: true,
-  Textarea: true,
-  QuickSearch: true,
-  NumberField: true
-};
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function get() {
@@ -97,18 +85,4 @@ var _Textarea = _interopRequireDefault(require("./Textarea"));
 var _QuickSearch = _interopRequireDefault(require("./QuickSearch"));
 
 var _NumberField = _interopRequireDefault(require("./NumberField"));
-
-var _styling = require("./styling");
-
-Object.keys(_styling).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _styling[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _styling[key];
-    }
-  });
-});
 //# sourceMappingURL=index.cjs.map

package/dist/InputFields/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n"],"file":"index.cjs"}

package/dist/InputFields/index.d.ts

@@ -8,5 +8,4 @@ import DatepickerField from './DatepickerField';
 import Textarea from './Textarea';
 import QuickSearch from './QuickSearch';
 import NumberField from './NumberField';
-export * from './styling';
 export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };

package/dist/InputFields/index.js

@@ -8,6 +8,5 @@ import DatepickerField from './DatepickerField';
 import Textarea from './Textarea';
 import QuickSearch from './QuickSearch';
 import NumberField from './NumberField';
-export * from './styling';
 export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
 //# sourceMappingURL=index.js.map

package/dist/InputFields/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,cAAc,WAAd;AAEA,SACET,SADF,EAEEC,aAFF,EAGEC,QAHF,EAIEC,WAJF,EAKEC,SALF,EAMEC,UANF,EAOEC,eAPF,EAQEC,QARF,EASEC,WATF,EAUEC,WAVF","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,SAAST,SAAT,EAAoBC,aAApB,EAAmCC,QAAnC,EAA6CC,WAA7C,EAA0DC,SAA1D,EAAqEC,UAArE,EAAiFC,eAAjF,EAAkGC,QAAlG,EAA4GC,WAA5G,EAAyHC,WAAzH","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n"],"file":"index.js"}

package/dist/Modals/ModalContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","openInstances","setState","body","position","state","scrollTo","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  height?: any;\n  width?: any;\n  overflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {\n  scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  private static openInstances = 0;\n\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n\n    if (this.props.showModal) {\n      this.preventScroll(window.scrollY);\n    }\n  }\n\n  getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n    return {scroll: window.scrollY};\n  }\n\n  componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n    if (this.props.showModal && !prevProps.showModal) {\n      this.preventScroll(snapshot!.scroll);\n    }\n    if (!this.props.showModal && prevProps.showModal) {\n      this.resetScroll();\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.props.showModal) {\n      this.resetScroll();\n    }\n  }\n\n  render() {\n    const {\n      id,\n      showModal,\n      closeModal,\n      children,\n      height = 'auto',\n      width = 'auto',\n      overflow = 'visible',\n      padding,\n      minWidth = '',\n      maxWidth = '',\n      zIndex = parseInt(Z_INDEXES.modal)\n    } = this.props;\n\n    // should be at least z-index of modal and below z-index of toast\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n    const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n      height,\n      width,\n      padding,\n      overflow,\n      minWidth,\n      maxWidth,\n      zIndex: zIndexValue\n    });\n    const styles = {content: stylesConfiguration};\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles}\n                  appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n\n  private preventScroll(offset: number) {\n    if (!ModalContainer.openInstances) {\n      this.setState({scroll: offset});\n      document.body.style.position = 'fixed';\n      document.body.style.left = `0px`;\n      document.body.style.right = `0px`;\n      document.body.style.top = `-${offset}px`;\n    }\n    ModalContainer.openInstances++\n  }\n\n  private resetScroll() {\n    ModalContainer.openInstances--;\n    if (!ModalContainer.openInstances) {\n      //@ts-ignore\n      document.body.style.position = null;\n      //@ts-ignore\n      document.body.style.left = null;\n      //@ts-ignore\n      document.body.style.top = null;\n      //@ts-ignore\n      document.body.style.right = null;\n      this.state.scroll && window.scrollTo(0, this.state.scroll);\n      this.setState({scroll: 0});\n    }\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","openInstances","setState","body","position","state","scrollTo","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  height?: any;\n  width?: any;\n  overflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {\n  scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  private static openInstances = 0;\n\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n\n    if (this.props.showModal) {\n      this.preventScroll(window.scrollY);\n    }\n  }\n\n  getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n    return {scroll: window.scrollY};\n  }\n\n  componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n    if (this.props.showModal && !prevProps.showModal) {\n      this.preventScroll(snapshot!.scroll);\n    }\n    if (!this.props.showModal && prevProps.showModal) {\n      this.resetScroll();\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.props.showModal) {\n      this.resetScroll();\n    }\n  }\n\n  render() {\n    const {\n      id,\n      showModal,\n      closeModal,\n      children,\n      height = 'auto',\n      width = 'auto',\n      overflow = 'visible',\n      padding,\n      minWidth = '',\n      maxWidth = '',\n      zIndex = parseInt(Z_INDEXES.modal)\n    } = this.props;\n\n    // should be at least z-index of modal and below z-index of toast\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n    const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n      height,\n      width,\n      padding,\n      overflow,\n      minWidth,\n      maxWidth,\n      zIndex: zIndexValue\n    });\n    const styles = {content: stylesConfiguration};\n\n    return (\n      <ReactModal id={id}\n                  isOpen={showModal}\n                  closeTimeoutMS={120}\n                  onRequestClose={() => closeModal()}\n                  style={styles}\n                  appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n\n  private preventScroll(offset: number) {\n    if (!ModalContainer.openInstances) {\n      this.setState({scroll: offset});\n      document.body.style.position = 'fixed';\n      document.body.style.left = `0px`;\n      document.body.style.right = `0px`;\n      document.body.style.top = `-${offset}px`;\n    }\n    ModalContainer.openInstances++\n  }\n\n  private resetScroll() {\n    ModalContainer.openInstances--;\n    if (!ModalContainer.openInstances) {\n      //@ts-ignore\n      document.body.style.position = null;\n      //@ts-ignore\n      document.body.style.left = null;\n      //@ts-ignore\n      document.body.style.top = null;\n      //@ts-ignore\n      document.body.style.right = null;\n      this.state.scroll && window.scrollTo(0, this.state.scroll);\n      this.setState({scroll: 0});\n    }\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}

package/dist/Modals/ModalContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","openInstances","setState","body","position","state","scrollTo","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  height?: any;\n  width?: any;\n  overflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {\n  scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  private static openInstances = 0;\n\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n\n    if (this.props.showModal) {\n      this.preventScroll(window.scrollY);\n    }\n  }\n\n  getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n    return {scroll: window.scrollY};\n  }\n\n  componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n    if (this.props.showModal && !prevProps.showModal) {\n      this.preventScroll(snapshot!.scroll);\n    }\n    if (!this.props.showModal && prevProps.showModal) {\n      this.resetScroll();\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.props.showModal) {\n      this.resetScroll();\n    }\n  }\n\n  render() {\n    const {\n      id,\n      showModal,\n      closeModal,\n      children,\n      height = 'auto',\n      width = 'auto',\n      overflow = 'visible',\n      padding,\n      minWidth = '',\n      maxWidth = '',\n      zIndex = parseInt(Z_INDEXES.modal)\n    } = this.props;\n\n    // should be at least z-index of modal and below z-index of toast\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n    const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n      height,\n      width,\n      padding,\n      overflow,\n      minWidth,\n      maxWidth,\n      zIndex: zIndexValue\n    });\n    const styles = {content: stylesConfiguration};\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles}\n                  appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n\n  private preventScroll(offset: number) {\n    if (!ModalContainer.openInstances) {\n      this.setState({scroll: offset});\n      document.body.style.position = 'fixed';\n      document.body.style.left = `0px`;\n      document.body.style.right = `0px`;\n      document.body.style.top = `-${offset}px`;\n    }\n    ModalContainer.openInstances++\n  }\n\n  private resetScroll() {\n    ModalContainer.openInstances--;\n    if (!ModalContainer.openInstances) {\n      //@ts-ignore\n      document.body.style.position = null;\n      //@ts-ignore\n      document.body.style.left = null;\n      //@ts-ignore\n      document.body.style.top = null;\n      //@ts-ignore\n      document.body.style.right = null;\n      this.state.scroll && window.scrollTo(0, this.state.scroll);\n      this.setState({scroll: 0});\n    }\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
+{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","openInstances","setState","body","position","state","scrollTo","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  height?: any;\n  width?: any;\n  overflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {\n  scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  private static openInstances = 0;\n\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n\n    if (this.props.showModal) {\n      this.preventScroll(window.scrollY);\n    }\n  }\n\n  getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n    return {scroll: window.scrollY};\n  }\n\n  componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n    if (this.props.showModal && !prevProps.showModal) {\n      this.preventScroll(snapshot!.scroll);\n    }\n    if (!this.props.showModal && prevProps.showModal) {\n      this.resetScroll();\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.props.showModal) {\n      this.resetScroll();\n    }\n  }\n\n  render() {\n    const {\n      id,\n      showModal,\n      closeModal,\n      children,\n      height = 'auto',\n      width = 'auto',\n      overflow = 'visible',\n      padding,\n      minWidth = '',\n      maxWidth = '',\n      zIndex = parseInt(Z_INDEXES.modal)\n    } = this.props;\n\n    // should be at least z-index of modal and below z-index of toast\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n    const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n      height,\n      width,\n      padding,\n      overflow,\n      minWidth,\n      maxWidth,\n      zIndex: zIndexValue\n    });\n    const styles = {content: stylesConfiguration};\n\n    return (\n      <ReactModal id={id}\n                  isOpen={showModal}\n                  closeTimeoutMS={120}\n                  onRequestClose={() => closeModal()}\n                  style={styles}\n                  appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n\n  private preventScroll(offset: number) {\n    if (!ModalContainer.openInstances) {\n      this.setState({scroll: offset});\n      document.body.style.position = 'fixed';\n      document.body.style.left = `0px`;\n      document.body.style.right = `0px`;\n      document.body.style.top = `-${offset}px`;\n    }\n    ModalContainer.openInstances++\n  }\n\n  private resetScroll() {\n    ModalContainer.openInstances--;\n    if (!ModalContainer.openInstances) {\n      //@ts-ignore\n      document.body.style.position = null;\n      //@ts-ignore\n      document.body.style.left = null;\n      //@ts-ignore\n      document.body.style.top = null;\n      //@ts-ignore\n      document.body.style.right = null;\n      this.state.scroll && window.scrollTo(0, this.state.scroll);\n      this.setState({scroll: 0});\n    }\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/Popover/Popover.cjs

@@ -169,9 +169,9 @@ var Popover = function Popover(_ref) {
       }
     };
 
-    document.addEventListener("mousedown", checkIfClickedOutside);
+    document.addEventListener('mousedown', checkIfClickedOutside);
     return function () {
-      document.removeEventListener("mousedown", checkIfClickedOutside);
+      document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [showPopover]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {

package/dist/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{size: Size, position: Position, showArrowPointer: boolean}>`\n  //height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n  min-width: ${props=>props.size===Size.Small ? '320px' : (props.size===Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${props => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${props => props.showArrowPointer ? renderArrowStyles(props.position) : ''}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n  max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{size: Size}>`\n  margin: 8px;\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n  max-width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n  padding: ${props=>props.size===Size.Small ? '0 8px' : (props.size===Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{size: Size}>`\n  height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\n  max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\n  display: flex;\n  flex-direction: column;\n  margin: ${props=>renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{size: Size}>`\n  ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\n`;\n\nconst CloseButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{size: Size}>`\n  margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{position: Position, showOnClick: boolean, showPopover: boolean}>`\n  position: relative;\n\n  .pointer-space {\n    height: ${props=>props.position===Position.Top || props.position===Position.Bottom ? '16px' : '100%'};\n    width: ${props=>props.position===Position.Left || props.position===Position.Right ? '16px' : '100%'};\n    position: absolute;\n\n    ${props=>props.position===Position.Left ? 'right:100%; bottom: 0%' : ''};\n    ${props=>props.position===Position.Right ? 'left:100%; bottom: 0%' : ''};\n\n    ${props=>props.position===Position.Top ? 'bottom: 100%' : ''};\n    ${props=>props.position===Position.Bottom ? 'top: 100%' : ''};\n  }\n\n  ${props=>props.showOnClick ? \n    `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;` \n    : \n    `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`\n  }\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if(isNotePresent){\n    return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\n  }\n  else{\n    return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\n  }\n}\n\nconst renderArrowStyles = (position: Position) => {\n  if(position === Position.Bottom){\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);`\n  }\n\n  if(position === Position.Top){\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`\n  }\n\n  if(position === Position.Left){\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`\n  }\n\n  if(position === Position.Right){\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`\n  }\n}\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n}\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: ()=>void;\n  label?: string;\n}\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n}\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n    size=Size.Medium,\n    topSectionProps,\n    bottomSectionProps,\n    mainContent,\n    children,\n    position,\n    showOnClick=false,\n    showArrowPointer=false\n}) => {\n\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(()=>{\n    const checkIfClickedOutside = (e: { target: any; }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    }\n\n    document.addEventListener(\"mousedown\", checkIfClickedOutside)\n\n    return () => {\n      document.removeEventListener(\"mousedown\", checkIfClickedOutside)\n    }\n  },[showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && \n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && \n                <NoteContainer size={size}>\n                  {topSectionProps.note}\n                </NoteContainer>\n              }\n              <LabelContainer size={size}>\n                {topSectionProps?.text}\n              </LabelContainer>\n            </TextContainer>\n\n            {showOnClick && \n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            }\n          </TopContainer>\n        }\n\n        <MainContentWrapper size={size}>\n          <MiddleContainer size={size}>\n            {mainContent}\n          </MiddleContainer>\n        </MainContentWrapper>\n\n        {!!bottomSectionProps && \n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && \n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            }\n\n            <div className='bottom-flex'/>\n            \n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) =>\n                \n                  <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\n                    {iconButton.icon}\n                  </IconButton>            \n              )}\n            </IconButtonContainer>\n          </BottomContainer>\n        }\n      </Container>\n\n      <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className='pointer-space'/>\n      </div>\n\n    </Wrapper>\n  );\n};\n\nexport default Popover;"],"file":"Popover.cjs"}
+{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{ size: Size; position: Position; showArrowPointer: boolean }>`\n  //height: ${(props) => (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px')};\n  min-width: ${(props) => (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\n`;\n\nconst TopContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px')};\n  max-width: ${(props) => (props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px')};\n  display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{ size: Size }>`\n  margin: 8px;\n`;\n\nconst MiddleContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px')};\n  max-width: ${(props) => (props.size === Size.Small ? '312px' : props.size === Size.Large ? '576px' : '424px')};\n  padding: ${(props) => (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px')};\n  max-width: ${(props) => (props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px')};\n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{ note: boolean; size: Size }>`\n  display: flex;\n  flex-direction: column;\n  margin: ${(props) => renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst CloseButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{ position: Position; showOnClick: boolean; showPopover: boolean }>`\n  position: relative;\n\n  .pointer-space {\n    height: ${(props) => (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%')};\n    width: ${(props) => (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%')};\n    position: absolute;\n\n    ${(props) => (props.position === Position.Left ? 'right:100%; bottom: 0%' : '')};\n    ${(props) => (props.position === Position.Right ? 'left:100%; bottom: 0%' : '')};\n\n    ${(props) => (props.position === Position.Top ? 'bottom: 100%' : '')};\n    ${(props) => (props.position === Position.Bottom ? 'top: 100%' : '')};\n  }\n\n  ${(props) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`}\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if (isNotePresent) {\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\n  } else {\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\n  }\n};\n\nconst renderArrowStyles = (position: Position) => {\n  if (position === Position.Bottom) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Top) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Left) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n\n  if (position === Position.Right) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n};\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n};\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: () => void;\n  label?: string;\n};\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n};\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n};\n\nconst Popover: React.FunctionComponent<PopoverProps> = ({\n  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\n}) => {\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    const checkIfClickedOutside = (e: { target: any }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    };\n\n    document.addEventListener('mousedown', checkIfClickedOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', checkIfClickedOutside);\n    };\n  }, [showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && (\n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</LabelContainer>\n            </TextContainer>\n\n            {showOnClick && (\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant=\"secondary\" shape=\"circular\">\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            )}\n          </TopContainer>\n        )}\n\n        <MainContentWrapper size={size}>\n          <MiddleContainer size={size}>{mainContent}</MiddleContainer>\n        </MainContentWrapper>\n\n        {!!bottomSectionProps && (\n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && (\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            )}\n\n            <div className=\"bottom-flex\" />\n\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\n                  {iconButton.icon}\n                </IconButton>\n              ))}\n            </IconButtonContainer>\n          </BottomContainer>\n        )}\n      </Container>\n\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className=\"pointer-space\" />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"file":"Popover.cjs"}

package/dist/Popover/Popover.js

@@ -134,9 +134,9 @@ var Popover = function Popover(_ref) {
       }
     };
 
-    document.addEventListener("mousedown", checkIfClickedOutside);
+    document.addEventListener('mousedown', checkIfClickedOutside);
     return function () {
-      document.removeEventListener("mousedown", checkIfClickedOutside);
+      document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [showPopover]);
   return /*#__PURE__*/_jsxs(Wrapper, {