@laerdal/life-react-components 1.11.0 → 2.0.0

package/dist/InputFields/components/SearchField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAGO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,iIAEzBC,kBAFyB,CAAxB;;;;AAMA,IAAMC,iBAAiB,GAAGH,0BAAOC,GAAV,4nCAGEG,cAAOC,WAHT,EAURD,cAAOE,KAVC,EAY1B,+BAAkBC,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAZ0B,EAkBxB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CAlBwB,EAqB1BC,mBAAYC,MArBc,EAsBxB,+BAAkBN,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAtBwB,EA4BtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CA5BsB,EAiCxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAjCwB,EAsCtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CAtCsB,EA2CxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CA3CwB,EA+CtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CA/CsB,EAoDIP,cAAOU,WApDX,EAwDIV,cAAOU,WAxDX,EA4DjBV,cAAOW,WA5DU,EAiEIX,cAAOY,YAjEX,EAqEIZ,cAAOa,WArEX,CAAvB;;;AAoFP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;AAAA,MAA3FC,EAA2F,QAA3FA,EAA2F;AAAA,MAAvFC,UAAuF,QAAvFA,UAAuF;AAAA,MAA3EC,QAA2E,QAA3EA,QAA2E;AAAA,MAAjEC,iBAAiE,QAAjEA,iBAAiE;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;AAClK,MAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;AAMA,sBACE,qBAAC,kBAAD;AAAoB,IAAA,GAAG,EAAEP,GAAzB;AAAA,2BACE,qBAAC,iBAAD;AAAmB,MAAA,EAAE,YAAKC,EAAL,UAArB;AAAqC,+BAAgBA,EAAhB,UAArC;AAAgE,MAAA,SAAS,EAAEQ;AAA3E,OAAoFD,IAApF;AAAA,gBACGH;AADH;AADF,IADF;AAOD,CAdmB,CAApB;;AAREJ,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,Q;;eAoBaR,W","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.cjs"}
+{"version":3,"file":"SearchField.cjs","names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAGO,IAAMA,kBAAkB,GAAGC,yBAAA,CAAOC,GAAV,iIAEzBC,kBAFyB,CAAxB;;;;AAMA,IAAMC,iBAAiB,GAAGH,yBAAA,CAAOC,GAAV,4nCAGEG,aAAA,CAAOC,WAHT,EAURD,aAAA,CAAOE,KAVC,EAY1B,IAAAC,yBAAA,EAAkBC,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAZ0B,EAkBxB,IAAAH,yBAAA,EAAkBC,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CAlBwB,EAqB1BC,kBAAA,CAAYC,MArBc,EAsBxB,IAAAC,yBAAA,EAAkBP,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAtBwB,EA4BtB,IAAAK,yBAAA,EAAkBP,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CA5BsB,EAiCxB,IAAAL,yBAAA,EAAkBC,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAjCwB,EAsCtB,IAAAH,yBAAA,EAAkBC,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CAtCsB,EA2CxB,IAAAG,yBAAA,EAAkBP,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CA3CwB,EA+CtB,IAAAK,yBAAA,EAAkBP,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CA/CsB,EAoDIR,aAAA,CAAOY,WApDX,EAwDIZ,aAAA,CAAOY,WAxDX,EA4DjBZ,aAAA,CAAOa,WA5DU,EAiEIb,aAAA,CAAOc,YAjEX,EAqEId,aAAA,CAAOe,WArEX,CAAvB;;;AAoFP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;EAAA,IAA3FC,EAA2F,QAA3FA,EAA2F;EAAA,IAAvFC,UAAuF,QAAvFA,UAAuF;EAAA,IAA3EC,QAA2E,QAA3EA,QAA2E;EAAA,IAAjEC,iBAAiE,QAAjEA,iBAAiE;EAAA,IAA9CC,QAA8C,QAA9CA,QAA8C;EAAA,IAApCC,IAAoC,QAApCA,IAAoC;EAAA,IAA9BC,SAA8B,QAA9BA,SAA8B;EAAA,IAAhBC,IAAgB;EAClK,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;EAMA,oBACE,qBAAC,kBAAD;IAAoB,GAAG,EAAEP,GAAzB;IAAA,uBACE,qBAAC,iBAAD;MAAmB,EAAE,YAAKC,EAAL,UAArB;MAAqC,yBAAgBA,EAAhB,UAArC;MAAgE,SAAS,EAAEQ;IAA3E,GAAoFD,IAApF;MAAA,UACGH;IADH;EADF,EADF;AAOD,CAdmB,CAApB;;EAREJ,E;EACAC,U;EACAC,Q;EACAC,iB;EACAC,Q;;eAoBaR,W"}

package/dist/InputFields/components/SearchField.js

@@ -6,9 +6,9 @@ var _excluded = ["id", "searchTerm", "disabled", "validationMessage", "children"
 
 var _templateObject, _templateObject2;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import * as React from 'react';
 import styled from 'styled-components';

package/dist/InputFields/components/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","SearchFieldWrapper","div","StyledSearchField","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,kBAA9B,EAAkDC,WAAlD,QAAqE,oBAArE;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,QAAqD,cAArD;;AAGA,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAV,mHAEzBJ,WAFyB,CAAxB;AAMP,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAV,8mCAGEN,MAAM,CAACQ,WAHT,EAURR,MAAM,CAACS,KAVC,EAY1BL,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAZS,EAkBxBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAlBO,EAqB1Bd,WAAW,CAACe,MArBc,EAsBxBX,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAtBO,EA4BtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA5BK,EAiCxBT,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjCO,EAsCtBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAtCK,EA2CxBV,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CA3CO,EA+CtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA/CK,EAoDIb,MAAM,CAACe,WApDX,EAwDIf,MAAM,CAACe,WAxDX,EA4DjBf,MAAM,CAACgB,WA5DU,EAiEIhB,MAAM,CAACiB,YAjEX,EAqEIjB,MAAM,CAACkB,WArEX,CAAvB;AAoFP,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;AAAA,MAA3FC,EAA2F,QAA3FA,EAA2F;AAAA,MAAvFC,UAAuF,QAAvFA,UAAuF;AAAA,MAA3EC,QAA2E,QAA3EA,QAA2E;AAAA,MAAjEC,iBAAiE,QAAjEA,iBAAiE;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;;AAClK,MAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;AAMA,sBACE,KAAC,kBAAD;AAAoB,IAAA,GAAG,EAAEP,GAAzB;AAAA,2BACE,KAAC,iBAAD;AAAmB,MAAA,EAAE,YAAKC,EAAL,UAArB;AAAqC,+BAAgBA,EAAhB,UAArC;AAAgE,MAAA,SAAS,EAAEQ;AAA3E,OAAoFD,IAApF;AAAA,gBACGH;AADH;AADF,IADF;AAOD,CAdmB,CAApB;;AAREJ,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,Q;;AAoBF,eAAeP,WAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.js"}
+{"version":3,"file":"SearchField.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","SearchFieldWrapper","div","StyledSearchField","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,kBAA9B,EAAkDC,WAAlD,QAAqE,oBAArE;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,QAAqD,cAArD;;AAGA,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAV,mHAEzBJ,WAFyB,CAAxB;AAMP,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAV,8mCAGEN,MAAM,CAACQ,WAHT,EAURR,MAAM,CAACS,KAVC,EAY1BL,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAZS,EAkBxBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAlBO,EAqB1Bd,WAAW,CAACe,MArBc,EAsBxBX,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAtBO,EA4BtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA5BK,EAiCxBT,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjCO,EAsCtBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAtCK,EA2CxBV,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CA3CO,EA+CtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA/CK,EAoDIb,MAAM,CAACe,WApDX,EAwDIf,MAAM,CAACe,WAxDX,EA4DjBf,MAAM,CAACgB,WA5DU,EAiEIhB,MAAM,CAACiB,YAjEX,EAqEIjB,MAAM,CAACkB,WArEX,CAAvB;AAoFP,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;EAAA,IAA3FC,EAA2F,QAA3FA,EAA2F;EAAA,IAAvFC,UAAuF,QAAvFA,UAAuF;EAAA,IAA3EC,QAA2E,QAA3EA,QAA2E;EAAA,IAAjEC,iBAAiE,QAAjEA,iBAAiE;EAAA,IAA9CC,QAA8C,QAA9CA,QAA8C;EAAA,IAApCC,IAAoC,QAApCA,IAAoC;EAAA,IAA9BC,SAA8B,QAA9BA,SAA8B;EAAA,IAAhBC,IAAgB;;EAClK,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;EAMA,oBACE,KAAC,kBAAD;IAAoB,GAAG,EAAEP,GAAzB;IAAA,uBACE,KAAC,iBAAD;MAAmB,EAAE,YAAKC,EAAL,UAArB;MAAqC,yBAAgBA,EAAhB,UAArC;MAAgE,SAAS,EAAEQ;IAA3E,GAAoFD,IAApF;MAAA,UACGH;IADH;EADF,EADF;AAOD,CAdmB,CAApB;;EAREJ,E;EACAC,U;EACAC,Q;EACAC,iB;EACAC,Q;;AAoBF,eAAeP,WAAf"}

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,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

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,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"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"],"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"}

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","readOnly","disabled","margin","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAGO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,gJAErB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,IAAkBD,KAAK,CAACE,QAAxB,GAAmC,sBAAnC,GAA4D,EAAxE;AAAA,CAFqB,EAGrB,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAxD;AAAA,CAHqB,CAAlB;;;AAOP,IAAMC,aAAa,OAAGC,qBAAH,kQACGC,eAAOC,WADV,EAEaD,eAAOE,WAFpB,EAGRF,eAAOG,WAHC,CAAnB;AAQO,IAAMC,uBAAuB,OAAGL,qBAAH,8HACJC,eAAOK,YADH,CAA7B;;;AAIP,IAAMC,iBAAiB,GAAGd,0BAAOe,KAAV,ynDAanB,UAACb,KAAD;AAAA,SACAA,KAAK,CAACc,aAAN,oJAKiDR,eAAOS,WALxD,6DAM2CT,eAAOS,WANlD,wDAOsCT,eAAOS,WAP7C,MADA;AAAA,CAbmB,EAgCjB,mCAAkBC,+BAAmBC,MAArC,EAA6CX,eAAOY,WAApD,CAhCiB,EAmCnBC,oBAAYC,MAnCO,EA0Cf,mCAAkBJ,+BAAmBC,MAArC,EAA6CX,eAAOY,WAApD,CA1Ce,EA6DZZ,eAAOe,KA7DK,EA+DnB,UAACrB,KAAD;AAAA,SAAYA,KAAK,CAACsB,kBAAN,GAA2BZ,uBAA3B,GAAqD,EAAjE;AAAA,CA/DmB,EAkEjB,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACuB,sBAAN,GAA+B,EAA/B,GAAoCnB,aAAhD;AAAA,CAlEiB,EAsECE,eAAOC,WAtER,EA2EVD,eAAOE,WA3EG,EA8EiBF,eAAOkB,WA9ExB,EAkFjBC,mBAlFiB,EAsFWnB,eAAOK,YAtFlB,EAyFWL,eAAOoB,WAzFlB,EAqGiBpB,eAAOqB,WArGxB,EAyGiBrB,eAAOkB,WAzGxB,CAAvB;;;AAqHA,IAAMI,iBAAiB,OAAGvB,qBAAH,sUAEjB,qCAAoBW,+BAAmBa,OAAvC,EAAgDvB,eAAOe,KAAvD,CAFiB,EAWjB,qCAAoBL,+BAAmBa,OAAvC,EAAgD,SAAhD,CAXiB,CAAvB;;;AAiBO,IAAMC,OAAO,GAAGhC,0BAAOC,GAAV,ujBAGhB,qCAAoBiB,+BAAmBa,OAAvC,EAAgD,IAAhD,CAHgB,EAUhBV,oBAAYC,MAVI,EAWd,oCAAmBJ,+BAAmBa,OAAtC,EAA+C,IAA/C,CAXc,EAmBd,qCAAoBb,+BAAmBa,OAAvC,EAAgD,IAAhD,CAnBc,EA0Bd,oCAAmBb,+BAAmBa,OAAtC,EAA+C,IAA/C,CA1Bc,CAAb;;;AA0CA,IAAME,YAAY,GAAG,+BAAOD,OAAP,CAAH,wGACdxB,eAAO0B,YADO,CAAlB;;AAIA,IAAMC,iBAAiB,GAAG,+BAAOH,OAAP,CAAH,wGACnB,UAAC9B,KAAD;AAAA,SAAYA,KAAK,CAACkC,IAAN,KAAe,SAAf,GAA2B5B,eAAO0B,YAAlC,GAAiD1B,eAAOoB,WAApE;AAAA,CADmB,CAAvB;;AAIA,IAAMS,WAAW,GAAG,+BAAOL,OAAP,CAAH,wGACbxB,eAAOY,WADM,CAAjB;;AAGA,IAAMkB,iBAAiB,GAAG,+BAAON,OAAP,CAAH,0GACnBxB,eAAOG,WADY,CAAvB;;;AAMA,IAAM4B,UAAU,GAAGvC,0BAAOC,GAAV,gHAAhB;;;AAIA,IAAMuC,iBAAiB,GAAG,+BAAOD,UAAP,CAAH,uIAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.cjs"}
+{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/InputFields/styling.js.map

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

package/dist/InputFields/types.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.cjs"}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n"],"mappings":""}

package/dist/InputFields/types.d.ts

@@ -1,4 +1,5 @@
 import { Size } from '../types';
+import React from 'react';
 export declare type TextFieldProps = {
     id: string;
     disabled?: boolean;

package/dist/InputFields/types.js.map

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

package/dist/Layouts/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Layouts/index.ts"],"names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","BREAKPOINTS","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;;;AAEA,IAAMA,IAAI,GAAG;AACXC,EAAAA,GAAG,EAAE;AACHC,IAAAA,KAAK,EAAE,MADJ;AAEHC,IAAAA,MAAM,EAAE,MAFL;AAGHC,IAAAA,KAAK,EAAE;AAHJ,GADM;AAMXC,EAAAA,MAAM,EAAE;AACNH,IAAAA,KAAK,EAAE,MADD;AAENC,IAAAA,MAAM,EAAE,MAFF;AAGNC,IAAAA,KAAK,EAAE;AAHD;AANG,CAAb;;AAaO,IAAME,SAAS,GAAGC,0BAAOC,GAAV,kQAERR,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBO,oBAAYN,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBM,oBAAYL,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBK,oBAAYC,MAXM,EAYL,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;;;;AAiBA,IAAMC,OAAO,GAAGP,0BAAOQ,OAAV,ooBAGN,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBO,oBAAYN,MANI,EAOS,UAACQ,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBM,oBAAYL,KAZI,EAaJ,UAACO,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACQ,KAAD;AAAA,SAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;;;;AA8BA,IAAMC,gBAAgB,GAAGZ,0BAAOC,GAAV,k1BAAtB","sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"file":"index.cjs"}
+{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","BREAKPOINTS","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;;;AAEA,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MADJ;IAEHC,MAAM,EAAE,MAFL;IAGHC,KAAK,EAAE;EAHJ,CADM;EAMXC,MAAM,EAAE;IACNH,KAAK,EAAE,MADD;IAENC,MAAM,EAAE,MAFF;IAGNC,KAAK,EAAE;EAHD;AANG,CAAb;;AAaO,IAAME,SAAS,GAAGC,yBAAA,CAAOC,GAAV,kQAERR,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBO,mBAAA,CAAYN,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBM,mBAAA,CAAYL,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBK,mBAAA,CAAYC,MAXM,EAYL,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;;;;AAiBA,IAAMC,OAAO,GAAGP,yBAAA,CAAOQ,OAAV,ooBAGN,UAACJ,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBO,mBAAA,CAAYN,MANI,EAOS,UAACQ,KAAD;EAAA,OAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;EAAA,OAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBM,mBAAA,CAAYL,KAZI,EAaJ,UAACO,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACQ,KAAD;EAAA,OAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;;;;AA8BA,IAAMC,gBAAgB,GAAGZ,yBAAA,CAAOC,GAAV,k1BAAtB"}

package/dist/Layouts/index.js.map

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

package/dist/LinearProgress/LinearProgress.cjs

@@ -29,9 +29,9 @@ var _excluded = ["size", "type", "variant", "label", "value", "max", "className"
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Bar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ", ";\n\n  &.active {\n    background-color: ", ";\n  }\n\n  &.current {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n  }\n\n  &.inverted.active {\n    background-color: ", ";\n  }\n\n  &.inverted.current {\n    background-color: ", ";\n  }\n\n"])), _styles.COLORS.neutral_100, _styles.COLORS.accent1_400, _styles.COLORS.accent1_800, _styles.COLORS.neutral_600, _styles.COLORS.accent1_400, _styles.COLORS.white);
 

package/dist/LinearProgress/LinearProgress.cjs.map

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

package/dist/LinearProgress/LinearProgress.js

@@ -6,9 +6,9 @@ var _excluded = ["size", "type", "variant", "label", "value", "max", "className"
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import { Size } from '../types';

package/dist/LinearProgress/LinearProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinearProgress/LinearProgress.tsx"],"names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Bar","div","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","size","Medium","type","variant","Normal","label","value","max","className","rest","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,iBAAnC,EAAsDC,iBAAtD,EAAyEC,kBAAzE,QAAkG,WAAlG;;;;AAEA,OAAO,IAAMC,GAAG,GAAGN,MAAM,CAACO,GAAV,ugBAgBMN,MAAM,CAACO,WAhBb,EAmBQP,MAAM,CAACQ,WAnBf,EAuBQR,MAAM,CAACS,WAvBf,EA2BQT,MAAM,CAACU,WA3Bf,EA+BQV,MAAM,CAACQ,WA/Bf,EAmCQR,MAAM,CAACW,KAnCf,CAAT;AAwCP,OAAO,IAAMC,GAAG,GAAGb,MAAM,CAACO,GAAV,wkCAcQN,MAAM,CAACa,WAdf,EAuDQb,MAAM,CAACc,WAvDf,EA2DQd,MAAM,CAACS,WA3Df,EA+DQT,MAAM,CAACa,WA/Df,EAmEQb,MAAM,CAACQ,WAnEf,EAuEQR,MAAM,CAACW,KAvEf,CAAT;AA2EP,OAAO,IAAMI,QAAQ,GAAGhB,MAAM,CAACO,GAAV,oJAAd;AAOP,OAAO,IAAMU,IAAI,GAAGjB,MAAM,CAACO,GAAV,svDAWON,MAAM,CAACiB,WAXd,EAoBOjB,MAAM,CAACiB,WApBd,EA6BXF,QA7BW,EAkDXA,QAlDW,EAuEXA,QAvEW,EAwFKf,MAAM,CAACO,WAxFZ,EA0FbQ,QA1Fa,EA2FOf,MAAM,CAACkB,WA3Fd,EA+FOlB,MAAM,CAACmB,WA/Fd,EAmGSnB,MAAM,CAACa,WAnGhB,EAsGXE,QAtGW,EAuGSf,MAAM,CAACQ,WAvGhB,CAAV;AA4GP,IAAMY,KAAK,GAAGrB,MAAM,CAACO,GAAV,0FACAN,MAAM,CAACqB,KADP,CAAX;AAIA,IAAMC,OAAO,GAAGvB,MAAM,CAACO,GAAV,4JAAb;AAOA,IAAMiB,OAAO,GAAGxB,MAAM,CAACO,GAAV,k1CAOPc,KAPO,EAQEpB,MAAM,CAACW,KART,EAePS,KAfO,EAgBLjB,iBAAiB,CAACC,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAhBZ,EAmBPF,OAnBO,EAsBLjB,GAtBK,EA2BLA,GA3BK,EAmCPe,KAnCO,EAoCLlB,iBAAiB,CAACE,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CApCZ,EAuCPF,OAvCO,EA0CLjB,GA1CK,EA+CLA,GA/CK,EAuDPe,KAvDO,EAwDLnB,iBAAiB,CAACG,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAxDZ,EA2DPF,OA3DO,EA8DLjB,GA9DK,EAmELA,GAnEK,EA4EPiB,OA5EO,EAkFPA,OAlFO,CAAb;AAwFA,WAAYG,kBAAZ;;WAAYA,kB;AAAAA,EAAAA,kB;AAAAA,EAAAA,kB;AAAAA,EAAAA,kB;GAAAA,kB,KAAAA,kB;;AAMZ,WAAYC,qBAAZ;;WAAYA,qB;AAAAA,EAAAA,qB;AAAAA,EAAAA,qB;GAAAA,qB,KAAAA,qB;;AAgBZ,IAAMC,cAA4D,GAAG,SAA/DA,cAA+D,OASO;AAAA,uBARJC,IAQI;AAAA,MARJA,IAQI,0BARG9B,IAAI,CAAC+B,MAQR;AAAA,uBAPJC,IAOI;AAAA,MAPJA,IAOI,0BAPGL,kBAAkB,CAACT,IAOtB;AAAA,0BANJe,OAMI;AAAA,MANJA,OAMI,6BANML,qBAAqB,CAACM,MAM5B;AAAA,MALJC,KAKI,QALJA,KAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,GAGI,QAHJA,GAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AAE1E,MAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,wBACjB;AAAA,gBACGC,KAAK,CAACC,IAAN,CAAWD,KAAK,CAACJ,GAAD,CAAL,CAAWM,IAAX,EAAX,EAA8BC,GAA9B,CAAkC,UAAAC,CAAC;AAAA,4BAClC,KAAC,GAAD;AACK,UAAA,SAAS,YAAKC,IAAI,CAACC,IAAL,CAAUX,KAAV,KAAoBS,CAAC,GAAG,CAAxB,GAA4B,QAA5B,GAAuC,EAA5C,cAAkDC,IAAI,CAACC,IAAL,CAAUX,KAAV,MAAqBS,CAAC,GAAG,CAAzB,GAA6B,SAA7B,GAAyC,EAA3F,cAAiGZ,OAAjG,cAA4GH,IAA5G;AADd,WAAUe,CAAV,CADkC;AAAA,OAAnC;AADH,MADiB;AAAA,GAAnB;;AAQA,MAAMG,UAAU,GAAG,SAAbA,UAAa;AAAA,wBACjB;AAAA,gBACGP,KAAK,CAACC,IAAN,CAAWD,KAAK,CAACJ,GAAD,CAAL,CAAWM,IAAX,EAAX,EAA8BC,GAA9B,CAAkC,UAAAC,CAAC;AAAA,4BAClC,KAAC,GAAD;AACK,UAAA,SAAS,YAAKC,IAAI,CAACC,IAAL,CAAUX,KAAV,KAAoBS,CAAC,GAAG,CAAxB,GAA4B,QAA5B,GAAuC,EAA5C,cAAkDC,IAAI,CAACC,IAAL,CAAUX,KAAV,MAAqBS,CAAC,GAAG,CAAzB,GAA6B,SAA7B,GAAyC,EAA3F,cAAiGZ,OAAjG,cAA4GH,IAA5G;AADd,WAAUe,CAAV,CADkC;AAAA,OAAnC;AADH,MADiB;AAAA,GAAnB;;AAQA,MAAMI,UAAU,GAAG,SAAbA,UAAa;AAAA,wBACjB;AAAA,6BACE,KAAC,IAAD;AAAM,QAAA,SAAS,YAAKhB,OAAL,cAAgBH,IAAhB,CAAf;AAAA,+BACE,KAAC,QAAD;AAAU,UAAA,KAAK,EAAE;AAACoB,YAAAA,KAAK,YAAKd,KAAK,GAAGC,GAAR,GAAc,GAAnB;AAAN;AAAjB;AADF;AADF,MADiB;AAAA,GAAnB;;AAQA,MAAMc,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB,YAAQnB,IAAR;AACE,WAAKL,kBAAkB,CAACyB,IAAxB;AACE,eAAOZ,UAAU,EAAjB;;AACF,WAAKb,kBAAkB,CAAC0B,IAAxB;AACE,eAAOL,UAAU,EAAjB;;AACF,WAAKrB,kBAAkB,CAACT,IAAxB;AACA;AACE,eAAO+B,UAAU,EAAjB;AAPJ;AASD,GAVD;;AAYA,sBACE,MAAC,OAAD;AAAS,IAAA,SAAS,YAAKnB,IAAL,cAAaE,IAAb,cAAqBC,OAArB,cAAgCK,SAAS,IAAI,EAA7C;AAAlB,KAAyEC,IAAzE;AAAA,eACGJ,KAAK,iBAAI,KAAC,KAAD;AAAA,gBAAQA;AAAR,MADZ,eAEE,KAAC,OAAD;AAAA,gBACGgB,MAAM;AADT,MAFF;AAAA,KADF;AAQD,CAvDD;;;AATEnB,EAAAA,I;AACAC,EAAAA,O;AAEAE,EAAAA,K;AAEAC,EAAAA,K;AACAC,EAAAA,G;;AA4DF,eAAeR,cAAf","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\n\nexport const Bar = styled.div`\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  &.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.current {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_600};\n  }\n\n  &.inverted.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current {\n    background-color: ${COLORS.white};\n  }\n\n`;\n\nexport const Dot = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.current:after {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted:after {\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.inverted.active:after {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current:after {\n    background-color: ${COLORS.white};\n  }\n`;\n\nexport const LineFill = styled.div`\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n`;\n\nexport const Line = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ${LineFill} {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  ${LineFill} {\n    background-color: ${COLORS.accent1_500};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_700};\n\n    &:after,\n    &:before {\n      background-color: ${COLORS.neutral_400};\n    }\n\n    ${LineFill} {\n      background-color: ${COLORS.accent1_400};\n    }\n  }\n`;\n\nconst Label = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ${Label} {\n      color: ${COLORS.white};\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ${Label} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 4px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ${Label} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 6px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ${Label} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 8px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ${Content} {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ${Content} {\n      padding: 0 3px;\n    }\n  }\n`;\n\nexport enum LinearProgressType {\n  Dots = 'dots',\n  Line = 'line',\n  Bars = 'bars',\n}\n\nexport enum LinearProgressVariant {\n  Normal = 'normal',\n  Inverted = 'inverted',\n}\n\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: LinearProgressType;\n  variant?: LinearProgressVariant;\n\n  label?: string;\n\n  value: number;\n  max: number;\n}\n\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\n                                                                        size = Size.Medium,\n                                                                        type = LinearProgressType.Line,\n                                                                        variant = LinearProgressVariant.Normal,\n                                                                        label,\n                                                                        value,\n                                                                        max,\n                                                                        className,\n                                                                        ...rest\n                                                                      }) => {\n\n  const renderBars = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Bar key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderDots = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Dot key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderLine = () =>\n    <>\n      <Line className={`${variant} ${size}`}>\n        <LineFill style={{width: `${value / max * 100}%`}}/>\n      </Line>\n    </>\n\n\n  const render = () => {\n    switch (type) {\n      case LinearProgressType.Bars:\n        return renderBars();\n      case LinearProgressType.Dots:\n        return renderDots();\n      case LinearProgressType.Line:\n      default:\n        return renderLine();\n    }\n  }\n\n  return (\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\n      {label && <Label>{label}</Label>}\n      <Content>\n        {render()}\n      </Content>\n    </Wrapper>\n  )\n};\n\nexport default LinearProgress;\n"],"file":"LinearProgress.js"}
+{"version":3,"file":"LinearProgress.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Bar","div","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","size","Medium","type","variant","Normal","label","value","max","className","rest","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\n\nexport const Bar = styled.div`\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  &.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.current {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_600};\n  }\n\n  &.inverted.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current {\n    background-color: ${COLORS.white};\n  }\n\n`;\n\nexport const Dot = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.current:after {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted:after {\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.inverted.active:after {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current:after {\n    background-color: ${COLORS.white};\n  }\n`;\n\nexport const LineFill = styled.div`\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n`;\n\nexport const Line = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ${LineFill} {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  ${LineFill} {\n    background-color: ${COLORS.accent1_500};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_700};\n\n    &:after,\n    &:before {\n      background-color: ${COLORS.neutral_400};\n    }\n\n    ${LineFill} {\n      background-color: ${COLORS.accent1_400};\n    }\n  }\n`;\n\nconst Label = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ${Label} {\n      color: ${COLORS.white};\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ${Label} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 4px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ${Label} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 6px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ${Label} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 8px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ${Content} {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ${Content} {\n      padding: 0 3px;\n    }\n  }\n`;\n\nexport enum LinearProgressType {\n  Dots = 'dots',\n  Line = 'line',\n  Bars = 'bars',\n}\n\nexport enum LinearProgressVariant {\n  Normal = 'normal',\n  Inverted = 'inverted',\n}\n\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: LinearProgressType;\n  variant?: LinearProgressVariant;\n\n  label?: string;\n\n  value: number;\n  max: number;\n}\n\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\n                                                                        size = Size.Medium,\n                                                                        type = LinearProgressType.Line,\n                                                                        variant = LinearProgressVariant.Normal,\n                                                                        label,\n                                                                        value,\n                                                                        max,\n                                                                        className,\n                                                                        ...rest\n                                                                      }) => {\n\n  const renderBars = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Bar key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderDots = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Dot key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderLine = () =>\n    <>\n      <Line className={`${variant} ${size}`}>\n        <LineFill style={{width: `${value / max * 100}%`}}/>\n      </Line>\n    </>\n\n\n  const render = () => {\n    switch (type) {\n      case LinearProgressType.Bars:\n        return renderBars();\n      case LinearProgressType.Dots:\n        return renderDots();\n      case LinearProgressType.Line:\n      default:\n        return renderLine();\n    }\n  }\n\n  return (\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\n      {label && <Label>{label}</Label>}\n      <Content>\n        {render()}\n      </Content>\n    </Wrapper>\n  )\n};\n\nexport default LinearProgress;\n"],"mappings":"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"}

package/dist/LinearProgress/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinearProgress/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["import LinearProgress, {LinearProgressType, LinearProgressVariant} from './LinearProgress';\n\nexport {LinearProgressType, LinearProgressVariant};\nexport {LinearProgress}\n"],"file":"index.cjs"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/LinearProgress/index.ts"],"sourcesContent":["import LinearProgress, {LinearProgressType, LinearProgressVariant} from './LinearProgress';\n\nexport {LinearProgressType, LinearProgressVariant};\nexport {LinearProgress}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA"}

package/dist/LinearProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinearProgress/index.ts"],"names":["LinearProgress","LinearProgressType","LinearProgressVariant"],"mappings":"AAAA,OAAOA,cAAP,IAAwBC,kBAAxB,EAA4CC,qBAA5C,QAAwE,kBAAxE;AAEA,SAAQD,kBAAR,EAA4BC,qBAA5B;AACA,SAAQF,cAAR","sourcesContent":["import LinearProgress, {LinearProgressType, LinearProgressVariant} from './LinearProgress';\n\nexport {LinearProgressType, LinearProgressVariant};\nexport {LinearProgress}\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["LinearProgress","LinearProgressType","LinearProgressVariant"],"sources":["../../src/LinearProgress/index.ts"],"sourcesContent":["import LinearProgress, {LinearProgressType, LinearProgressVariant} from './LinearProgress';\n\nexport {LinearProgressType, LinearProgressVariant};\nexport {LinearProgress}\n"],"mappings":"AAAA,OAAOA,cAAP,IAAwBC,kBAAxB,EAA4CC,qBAA5C,QAAwE,kBAAxE;AAEA,SAAQD,kBAAR,EAA4BC,qBAA5B;AACA,SAAQF,cAAR"}

package/dist/List/ListRow.cjs

@@ -47,9 +47,9 @@ 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Row = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.neutral_300, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600);
 

package/dist/List/ListRow.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentTextStyle","Regular","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","React","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,GAAG,GAAGC,0BAAOC,GAAV,k5EAKoBC,eAAOC,WAL3B,EAQED,eAAOE,WART,EASaF,eAAOG,KATpB,EAuBeH,eAAOI,UAvBtB,EAwBIJ,eAAOK,WAxBX,EAyBMC,kBAAUC,KAzBhB,EA6BeP,eAAOQ,WA7BtB,EA8BIR,eAAOS,WA9BX,EA+BMH,kBAAUI,MA/BhB,EAmCHC,mBAnCG,EAwCMX,eAAOY,WAxCb,EAsDD,+BAAkBC,2BAAmBC,OAArC,EAA8C,IAA9C,CAtDC,EAuED,+BAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CAvEC,EAwFD,+BAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CAxFC,EA4HH,iCAAoBD,2BAAmBC,OAAvC,EAAgD,IAAhD,CA5HG,EAgIId,eAAOE,WAhIX,EAkIH,gCAAmBW,2BAAmBC,OAAtC,EAA+C,IAA/C,CAlIG,EAiJId,eAAOE,WAjJX,CAAT;;AA2JA,IAAMa,SAAS,GAAGjB,0BAAOC,GAAV,qFAAf;;AAmBA,IAAMiB,OAAuC,GAAG,SAA1CA,OAA0C,OAgBc;AAAA,uBAfXC,IAeW;AAAA,MAfXA,IAeW,0BAfJC,YAAKC,MAeD;AAAA,0BAdXC,OAcW;AAAA,MAdXA,OAcW,6BAdD,QAcC;AAAA,MAbXC,IAaW,QAbXA,IAaW;AAAA,MAZXC,QAYW,QAZXA,QAYW;AAAA,MAXXC,aAWW,QAXXA,aAWW;AAAA,MAVXC,QAUW,QAVXA,QAUW;AAAA,MATXC,IASW,QATXA,IASW;AAAA,MARXC,WAQW,QARXA,WAQW;AAAA,2BAPXC,QAOW;AAAA,MAPXA,QAOW,8BAPA,KAOA;AAAA,MANXC,MAMW,QANXA,MAMW;AAAA,MALXC,aAKW,QALXA,aAKW;AAAA,MAJXC,eAIW,QAJXA,eAIW;AAAA,MAHXC,qBAGW,QAHXA,qBAGW;AAAA,MAFXC,SAEW,QAFXA,SAEW;AAAA,MADRC,IACQ;;AAE5D,wBAAgCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAAY;AAChC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBZ,MAAAA,MAAM,IAAIA,MAAM,EAAhB;AACD;AACF,GAJD;;AAMA,MAAMa,YAAY,GAAG,CAACL,QAAQ,GAAG,YAAH,GAAkB,EAA3B,EAClBM,MADkB,CACXf,QAAQ,GAAG,WAAH,GAAiB,EADd,EAElBe,MAFkB,CAEX,CAAC,CAACd,MAAF,GAAW,cAAX,GAA4B,EAFjB,EAGlBc,MAHkB,CAGX,gBAHW,EAIlBA,MAJkB,WAIRtB,OAJQ,QAKlBsB,MALkB,WAKRzB,IALQ,GAMlByB,MANkB,CAMXV,SAAS,cAAOA,SAAP,IAAqB,EANnB,CAArB;AAQA,sBACE,sBAAC,GAAD;AAAK,IAAA,QAAQ,EAAE,CAACJ,MAAD,IAAWD,QAAX,GAAsB,CAAC,CAAvB,GAA2B,CAA1C;AACK,IAAA,SAAS,EAAEc,YADhB;AAEK,IAAA,WAAW,EAAEE,iCAFlB;AAGK,IAAA,SAAS,EAAE,mBAACJ,CAAD;AAAA,aAAO,CAACZ,QAAD,IAAaW,aAAa,CAACC,CAAD,CAAjC;AAAA,KAHhB;AAIK,IAAA,OAAO,EAAE,iBAAAA,CAAC,EAAI;AACZ,OAACZ,QAAD,IAAaC,MAAb,IAAuBA,MAAM,EAA7B;AACD,KANN;AAOK;AAPL,KAQSK,IART;AAAA,eAUI,CAAC,CAACZ,IAAF,iBACA;AAAK,MAAA,SAAS,EAAE,gBAAhB;AAAA,gBAAmCA;AAAnC,MAXJ,eAaE;AAAK,MAAA,SAAS,EAAE,mBAAhB;AAAA,8BACE;AAAK,QAAA,SAAS,EAAE,qBAAhB;AAAA,kBAAwCC;AAAxC,QADF,EAEG,CAAC,CAACC,aAAF,iBAAmB;AAAK,QAAA,SAAS,EAAE,0BAAhB;AAAA,kBAA6CA;AAA7C,QAFtB;AAAA,MAbF,EAkBI,CAAC,CAACE,IAAF,iBACA;AAAA,iBAEI,CAAC,CAACC,WAAF,iBACA;AAAK,QAAA,SAAS,EAAE,6BAAhB;AAAA,+BACE,qBAAC,wBAAD;AAAgB,UAAA,KAAK,EAAEA,WAAvB;AACgB,UAAA,IAAI,EAAET,IAAI,KAAKC,YAAK0B,KAAd,GAAsB1B,YAAKC,MAA3B,GAAoCF,IAAI,KAAKC,YAAK2B,KAAd,GAAsB3B,YAAK4B,MAA3B,GAAoC5B,YAAK2B,KADnG;AAEgB,UAAA,QAAQ,EAAE,KAF1B;AAGgB,UAAA,QAAQ,EAAElB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAH1C;AAIgB,UAAA,SAAS,EAAE,IAJ3B;AAAA,oBAKGF;AALH;AADF,QAHJ,EAcI,CAACC,WAAD,iBACA;AAAK,QAAA,SAAS,EAAE,gBAAhB;AAAA,kBACGD;AADH,QAfJ;AAAA,MAnBJ,EAyCI,CAAC,CAACD,QAAF,iBACA;AAAK,MAAA,SAAS,EAAE,mBAAhB;AACK,MAAA,YAAY,EAAE;AAAA,eAAMa,WAAW,CAAC,EAACb,QAAD,aAACA,QAAD,eAACA,QAAQ,CAAEG,QAAX,CAAD,CAAjB;AAAA,OADnB;AAEK,MAAA,YAAY,EAAE;AAAA,eAAMU,WAAW,CAAC,KAAD,CAAjB;AAAA,OAFnB;AAAA,6BAGE,qBAAC,wBAAD,kCAAoBb,QAApB;AACgB,QAAA,IAAI,EAAE,MADtB;AAEgB,QAAA,QAAQ,EAAEG,QAAQ,IAAIH,QAAQ,CAACG,QAF/C;AAGgB,QAAA,IAAI,EAAEP,OAAO,KAAK,SAAZ,gBACF,qBAAC,kBAAD,CAAa,aAAb,KADE,gBAEF,qBAAC,kBAAD,CAAa,YAAb;AALpB;AAHF,MA1CJ,EAuDI,CAAC,CAACS,aAAF,iBACA,qBAAC,SAAD;AAAW,MAAA,SAAS,EAAE,mBAAtB;AAAA,6BACE,qBAAC,kBAAD;AAAY,QAAA,MAAM,EAAE;AAAA,iBAAM,CAAC,CAACC,eAAF,IAAqBA,eAAe,EAA1C;AAAA,SAApB;AAAkE,QAAA,OAAO,EAAC,WAA1E;AAAsF,QAAA,KAAK,EAAC,UAA5F;AAAuG,QAAA,QAAQ,EAAEH,QAAQ,IAAII,qBAA7H;AAAA,kBACGF;AADH;AADF,MAxDJ;AAAA,KADF;AAiED,CAnGD;;;AAdET,EAAAA,O,4BAAU,Q,EAAW,S;AACrBC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,a;AAEAE,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,a;AACAC,EAAAA,e;AACAC,EAAAA,qB;;eAwGaf,O","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { IconButton } from '../Button';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\nconst RightIcon = styled.div``;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n  rightSideIcon?: React.ReactNode;\n  rightSideAction?: () => void;\n  rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action,\n                                                   rightSideIcon,\n                                                   rightSideAction,\n                                                   rightSideIconDisabled,\n                                                   className,\n                                                   ...rest\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`)\n    .concat(className ? ` ${className}` : '');\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress\n         {...rest}>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          type={'icon'}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n      {\n        !!rightSideIcon &&\n        <RightIcon className={'list-item-actions'}>\n          <IconButton action={() => !!rightSideAction && rightSideAction()} variant='secondary' shape='circular' disabled={disabled || rightSideIconDisabled}>\n            {rightSideIcon}\n          </IconButton>\n        </RightIcon>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.cjs"}
+{"version":3,"file":"ListRow.cjs","names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","React","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { IconButton } from '../Button';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\nconst RightIcon = styled.div``;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n  rightSideIcon?: React.ReactNode;\n  rightSideAction?: () => void;\n  rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action,\n                                                   rightSideIcon,\n                                                   rightSideAction,\n                                                   rightSideIconDisabled,\n                                                   className,\n                                                   ...rest\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`)\n    .concat(className ? ` ${className}` : '');\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress\n         {...rest}>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          type={'icon'}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n      {\n        !!rightSideIcon &&\n        <RightIcon className={'list-item-actions'}>\n          <IconButton action={() => !!rightSideAction && rightSideAction()} variant='secondary' shape='circular' disabled={disabled || rightSideIconDisabled}>\n            {rightSideIcon}\n          </IconButton>\n        </RightIcon>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"mappings":"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"}

package/dist/List/ListRow.js

@@ -7,9 +7,9 @@ var _excluded = ["size", "variant", "icon", "mainText", "secondaryText", "dropdo
 
 var _templateObject, _templateObject2;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import * as React from 'react';
 import styled from 'styled-components';