@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.2

package/dist/InputFields/styling.js

@@ -1,6 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _StateColors, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 import { TooltipTrigger } from '../Tooltips/TooltipStyles';
 import styled, { css } from 'styled-components';
 import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
@@ -10,28 +9,66 @@ export var InputWrapper = styled.div(_templateObject || (_templateObject = _tagg
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, TooltipTrigger());
-export var readOnlyState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
-export var activeErrorMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.critical_400);
-var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\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: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
-  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";");
+}, TooltipTrigger('hover'));
+export var readOnlyState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+});
+export var activeErrorMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
+  return COLORS.getColor('critical_400', props.theme);
+});
+var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\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: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
+  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(COLORS.getColor('neutral_400', props.theme), ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.getColor('neutral_400', props.theme), ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.getColor('neutral_400', props.theme), ";");
 }, function (props) {
   var _props$extraRightPadd;
   return 16 + ((_props$extraRightPadd = props.extraRightPadding) !== null && _props$extraRightPadd !== void 0 ? _props$extraRightPadd : 0);
-}, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.black, function (props) {
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, BREAKPOINTS.MEDIUM, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return COLORS.getColor('black', props.theme);
+}, function (props) {
   return props.activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
   return props.suppressReadOnlyStyles ? '' : readOnlyState;
-}, COLORS.neutral_100, COLORS.neutral_300, COLORS.primary_800, focusStyles, COLORS.critical_400, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800);
-var ValidationStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  &.error-msg {\n    ", "\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    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468'));
+}, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, focusStyles, function (props) {
+  return COLORS.getColor('critical_400', props.theme);
+}, function (props) {
+  return COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+});
+var ValidationStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  &.error-msg {\n    ", "\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    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), function (props) {
+  return ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468'));
 export var Warning = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ", "\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ", " {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ", "\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ", "\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"])), ComponentXXSStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, ComponentXSStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), ComponentXSStyling(ComponentTextStyle.Regular, null));
-export var ErrorMessage = styled(Warning)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.critical_500);
-var StateColors = (_StateColors = {}, _defineProperty(_StateColors, States.Default, COLORS.neutral_500), _defineProperty(_StateColors, States.Valid, COLORS.correct_500), _defineProperty(_StateColors, States.Invalid, COLORS.critical_500), _StateColors);
+export var ErrorMessage = styled(Warning)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (props) {
+  return COLORS.getColor('critical_500', props.theme);
+});
+var getStateColor = function getStateColor(type, theme) {
+  if (type === States.Valid) return COLORS.getColor('correct_500', theme);else if (type === States.Default) return COLORS.getColor('neutral_500', theme);else return COLORS.getColor('critical_500', theme);
+};
 export var ValidationMessage = styled(Warning)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (props) {
-  return StateColors[props.type];
+  return getStateColor(props.type, props.theme);
+});
+export var NoteMessage = styled(Warning)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (props) {
+  return COLORS.getColor('neutral_500', props.theme);
+});
+export var AutofilledMessage = styled(Warning)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
 });
-export var NoteMessage = styled(Warning)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_500);
-export var AutofilledMessage = styled(Warning)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
 export { ValidationStyling, InputFieldStyling };
 export var StyledIcon = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n"])));
 export var SearchIconWrapper = styled(StyledIcon)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-radius: 50%;\n"])));

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","StateColors","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger()}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${COLORS.neutral_100};\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\r\n  color: ${COLORS.neutral_600} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  activeErrorMessage?: boolean;\r\n  active?: boolean;\r\n  withoutBorder?: boolean;\r\n  size?: string;\r\n  suppressReadOnlyStyles?: boolean;\r\n  extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\r\n  background-color: #fff;\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${COLORS.black} !important;\r\n\r\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${COLORS.neutral_100};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${COLORS.critical_500};\r\n`;\r\n\r\nconst StateColors = {\r\n  [States.Default]: COLORS.neutral_500,\r\n  [States.Valid]: COLORS.correct_500,\r\n  [States.Invalid]: COLORS.critical_500,\r\n}\r\n\r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => StateColors[props.type]};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${COLORS.neutral_500};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${COLORS.neutral_600};\r\n`;\r\n\r\nexport { ValidationStyling, InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":";;;AAAA,SAASA,cAAc,QAAQ,2BAA2B;AAC1D,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAQ,WAAW;AAC5D,SAASC,mBAAmB,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AACxI,SAAcC,MAAM,QAAO,UAAU;AAErC,OAAO,IAAMC,YAAY,GAAGX,MAAM,CAACY,GAAG,gJAElC,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,QAAQ,IAAID,KAAK,CAACE,QAAQ,GAAG,sBAAsB,GAAG,EAAE;AAAA,CAAC,EAC3E,UAACF,KAAK;EAAA,OAAMA,KAAK,CAACG,MAAM,qBAAcH,KAAK,CAACG,MAAM,SAAM,EAAE;AAAA,CAAC,EAG3DjB,cAAc,EAAE,CAEnB;AAED,OAAO,IAAMkB,aAAa,GAAGhB,GAAG,mPACVE,MAAM,CAACe,WAAW,EACRf,MAAM,CAACgB,WAAW,EACvChB,MAAM,CAACiB,WAAW,CAI5B;AACD,OAAO,IAAMC,uBAAuB,GAAGpB,GAAG,+GACVE,MAAM,CAACmB,YAAY,CAClD;AAED,IAAMC,iBAAiB,GAAGvB,MAAM,CAACwB,KAAK,+mDAelC,UAACX,KAAK;EAAA,OACNA,KAAK,CAACY,aAAa,oJAK8BtB,MAAM,CAACuB,WAAW,6DACxBvB,MAAM,CAACuB,WAAW,wDACvBvB,MAAM,CAACuB,WAAW,MAAG;AAAA,GAGhD,UAAAb,KAAK;EAAA;EAAA,OAAI,EAAE,6BAAIA,KAAK,CAACc,iBAAiB,yEAAI,CAAC,CAAC;AAAA,GASrDpB,iBAAiB,CAACD,kBAAkB,CAACsB,MAAM,EAAEzB,MAAM,CAAC0B,WAAW,CAAC,EAGlE3B,WAAW,CAAC4B,MAAM,EAOdtB,iBAAiB,CAACF,kBAAkB,CAACsB,MAAM,EAAEzB,MAAM,CAAC0B,WAAW,CAAC,EAmB7D1B,MAAM,CAAC4B,KAAK,EAEnB,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACmB,kBAAkB,GAAGX,uBAAuB,GAAG,EAAE;AAAA,CAAC,EAGlE,UAACR,KAAK;EAAA,OAAMA,KAAK,CAACoB,sBAAsB,GAAG,EAAE,GAAGhB,aAAa;AAAA,CAAC,EAI5Cd,MAAM,CAACe,WAAW,EAK7Bf,MAAM,CAACgB,WAAW,EAGShB,MAAM,CAAC+B,WAAW,EAIpD9B,WAAW,EAIiBD,MAAM,CAACmB,YAAY,EAGnBnB,MAAM,CAACgC,WAAW,EAQZhC,MAAM,CAACiC,WAAW,EAIlBjC,MAAM,CAAC+B,WAAW,CAUzD;AAED,IAAMG,iBAAiB,GAAGpC,GAAG,uTAEvBI,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAEnC,MAAM,CAAC4B,KAAK,CAAC,EAS7D1B,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAE,SAAS,CAAC,CAI/D;AAED,OAAO,IAAMC,OAAO,GAAGvC,MAAM,CAACY,GAAG,gkBAI7BP,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,EAOrDpC,WAAW,CAAC4B,MAAM,EAChBrB,kBAAkB,CAACH,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,EAQpDjC,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,EAOrD7B,kBAAkB,CAACH,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,CAezD;AACD,OAAO,IAAME,YAAY,GAAGxC,MAAM,CAACuC,OAAO,CAAC,0FAChCpC,MAAM,CAACsC,YAAY,CAC7B;AAED,IAAMC,WAAW,qDACdhC,MAAM,CAACiC,OAAO,EAAGxC,MAAM,CAAC0B,WAAW,iCACnCnB,MAAM,CAACkC,KAAK,EAAGzC,MAAM,CAACgC,WAAW,iCACjCzB,MAAM,CAACmC,OAAO,EAAG1C,MAAM,CAACsC,YAAY,gBACtC;AAED,OAAO,IAAMK,iBAAiB,GAAG9C,MAAM,CAACuC,OAAO,CAAC,0FACrC,UAAC1B,KAAK;EAAA,OAAK6B,WAAW,CAAC7B,KAAK,CAACkC,IAAI,CAAC;AAAA,EAC5C;AAED,OAAO,IAAMC,WAAW,GAAGhD,MAAM,CAACuC,OAAO,CAAC,0FAC/BpC,MAAM,CAAC0B,WAAW,CAC5B;AACD,OAAO,IAAMoB,iBAAiB,GAAGjD,MAAM,CAACuC,OAAO,CAAC,4FACrCpC,MAAM,CAACiB,WAAW,CAC5B;AAED,SAASiB,iBAAiB,EAAEd,iBAAiB;AAE7C,OAAO,IAAM2B,UAAU,GAAGlD,MAAM,CAACY,GAAG,kGAEnC;AAED,OAAO,IAAMuC,iBAAiB,GAAGnD,MAAM,CAACkD,UAAU,CAAC,yHAGlD"}
+{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","_templateObject","_taggedTemplateLiteral","props","readOnly","disabled","margin","concat","readOnlyState","_templateObject2","getColor","theme","activeErrorMessageState","_templateObject3","InputFieldStyling","input","_templateObject4","withoutBorder","_props$extraRightPadd","extraRightPadding","Italic","MEDIUM","activeErrorMessage","suppressReadOnlyStyles","ValidationStyling","_templateObject5","Regular","Warning","_templateObject6","ErrorMessage","_templateObject7","getStateColor","type","Valid","Default","ValidationMessage","_templateObject8","NoteMessage","_templateObject9","AutofilledMessage","_templateObject10","StyledIcon","_templateObject11","SearchIconWrapper","_templateObject12"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  activeErrorMessage?: boolean;\r\n  active?: boolean;\r\n  withoutBorder?: boolean;\r\n  size?: string;\r\n  suppressReadOnlyStyles?: boolean;\r\n  extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}\r\n  background-color: #fff;\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n\r\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.getColor('correct_500', theme);\r\n  else if (type === States.Default)\r\n    return COLORS.getColor('neutral_500', theme);\r\n  else \r\n    return COLORS.getColor('critical_500', theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nexport { ValidationStyling, InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\r\nimport React from 'react';\r\n\r\nexport type TextareaProps =\r\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\r\n  & {\r\n  id: string;\r\n  state?: States.Invalid | States.Valid;\r\n  onChange?: (text: string) => void;\r\n  validationMessage?: string;\r\n  size: Size.Small | Size.Medium;\r\n  autoHeight?: boolean;\r\n  margin?: string;\r\n  note?: TextFieldNote;\r\n};\r\n\r\nexport type TextFieldNote = {\r\n  message: string;\r\n  icon: React.ReactNode;\r\n};\r\n\r\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\r\n  id?: string;\r\n  selected: boolean;\r\n  select?: (selected: boolean) => void;\r\n  label?: string;\r\n  invalid?: boolean;\r\n  disabled?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  iconPointerEventsTransparent?: boolean;\r\n  semiSelected?: boolean;\r\n  readOnly?: boolean;\r\n  tabIndexVal?: number;\r\n  className?: string;\r\n};\r\n"],"mappings":";;;;;AAmCC"}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\r\nimport React from 'react';\r\n\r\nexport type TextareaProps =\r\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\r\n  & {\r\n  /**\r\n   * Required. The ID of the textarea.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The state of the textarea. Can be 'Invalid' or 'Valid'.\r\n   */\r\n  state?: States.Invalid | States.Valid;\r\n\r\n  /**\r\n   * Optional. A function to be called when the text in the textarea changes.\r\n   * It should take a string representing the new text.\r\n   */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n   * Optional. The validation message to be displayed when the textarea is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n   * Required. The size of the textarea. Can be 'Small' or 'Medium'.\r\n   */\r\n  size: Size.Small | Size.Medium;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the height of the textarea should automatically adjust to fit the text.\r\n   */\r\n  autoHeight?: boolean;\r\n\r\n  /**\r\n   * Optional. The margin of the textarea. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the textarea.\r\n   */\r\n  note?: TextFieldNote;\r\n};\r\n\r\nexport type TextFieldNote = {\r\n  message: string;\r\n  icon: React.ReactNode;\r\n};\r\n\r\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\r\n  /** Optional. Id of the checkbox. */\r\n  id?: string;\r\n  /** Required. Current state of the checkbox. */\r\n  selected: boolean;\r\n  /** Optional. Handler to be called when checkbox is selected/unselected */\r\n  select?: (selected: boolean) => void;\r\n  /** Optional. Label to be shown on the right side of the checkbox. */\r\n  label?: string;\r\n  /** Optional. If checkbox is selected and invalid flag is set, then checkbox will be shown in 'invalid' state. */\r\n  invalid?: boolean;\r\n  /** Optional. If set, then user can not interact with it. */\r\n  disabled?: boolean;\r\n  /** Optional. Margin property. */\r\n  margin?: string;\r\n  /** Optional. Size of the Checkbox. Defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Optional. pointer-events: none style will be set to the checkbox if this flag is set. */\r\n  iconPointerEventsTransparent?: boolean;\r\n  /** Optional. If set then checkbox will be shown in 'semi-selected' state. */\r\n  semiSelected?: boolean;\r\n  /** Optional. If set, then user can not select/unselect the checkbox */\r\n  readOnly?: boolean;\r\n  /** Optional. Tab index attribute of the checkbox. */\r\n  tabIndexVal?: number;\r\n  /** Optional. Custom classname to be set to the checkbox. */\r\n  className?: string;\r\n};\r\n"],"mappings":";;;;;AAgFC","ignoreList":[]}

package/dist/InputFields/types.d.ts

@@ -1,13 +1,38 @@
 import { Size, States, Testable } from '../types';
 import React from 'react';
 export type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
+    /**
+     * Required. The ID of the textarea.
+     */
     id: string;
+    /**
+     * Optional. The state of the textarea. Can be 'Invalid' or 'Valid'.
+     */
     state?: States.Invalid | States.Valid;
+    /**
+     * Optional. A function to be called when the text in the textarea changes.
+     * It should take a string representing the new text.
+     */
     onChange?: (text: string) => void;
+    /**
+     * Optional. The validation message to be displayed when the textarea is in an error state.
+     */
     validationMessage?: string;
+    /**
+     * Required. The size of the textarea. Can be 'Small' or 'Medium'.
+     */
     size: Size.Small | Size.Medium;
+    /**
+     * Optional. A boolean indicating whether the height of the textarea should automatically adjust to fit the text.
+     */
     autoHeight?: boolean;
+    /**
+     * Optional. The margin of the textarea. Can be any valid CSS margin value.
+     */
     margin?: string;
+    /**
+     * Optional. A note to be displayed below the textarea.
+     */
     note?: TextFieldNote;
 };
 export type TextFieldNote = {
@@ -15,17 +40,30 @@ export type TextFieldNote = {
     icon: React.ReactNode;
 };
 export interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'> {
+    /** Optional. Id of the checkbox. */
     id?: string;
+    /** Required. Current state of the checkbox. */
     selected: boolean;
+    /** Optional. Handler to be called when checkbox is selected/unselected */
     select?: (selected: boolean) => void;
+    /** Optional. Label to be shown on the right side of the checkbox. */
     label?: string;
+    /** Optional. If checkbox is selected and invalid flag is set, then checkbox will be shown in 'invalid' state. */
     invalid?: boolean;
+    /** Optional. If set, then user can not interact with it. */
     disabled?: boolean;
+    /** Optional. Margin property. */
     margin?: string;
-    size?: Size;
+    /** Optional. Size of the Checkbox. Defaults to 'medium'. */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** Optional. pointer-events: none style will be set to the checkbox if this flag is set. */
     iconPointerEventsTransparent?: boolean;
+    /** Optional. If set then checkbox will be shown in 'semi-selected' state. */
     semiSelected?: boolean;
+    /** Optional. If set, then user can not select/unselect the checkbox */
     readOnly?: boolean;
+    /** Optional. Tab index attribute of the checkbox. */
     tabIndexVal?: number;
+    /** Optional. Custom classname to be set to the checkbox. */
     className?: string;
 }

package/dist/InputFields/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\r\nimport React from 'react';\r\n\r\nexport type TextareaProps =\r\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\r\n  & {\r\n  id: string;\r\n  state?: States.Invalid | States.Valid;\r\n  onChange?: (text: string) => void;\r\n  validationMessage?: string;\r\n  size: Size.Small | Size.Medium;\r\n  autoHeight?: boolean;\r\n  margin?: string;\r\n  note?: TextFieldNote;\r\n};\r\n\r\nexport type TextFieldNote = {\r\n  message: string;\r\n  icon: React.ReactNode;\r\n};\r\n\r\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\r\n  id?: string;\r\n  selected: boolean;\r\n  select?: (selected: boolean) => void;\r\n  label?: string;\r\n  invalid?: boolean;\r\n  disabled?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  iconPointerEventsTransparent?: boolean;\r\n  semiSelected?: boolean;\r\n  readOnly?: boolean;\r\n  tabIndexVal?: number;\r\n  className?: string;\r\n};\r\n"],"mappings":"AAmCC;AAAC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\r\nimport React from 'react';\r\n\r\nexport type TextareaProps =\r\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\r\n  & {\r\n  /**\r\n   * Required. The ID of the textarea.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The state of the textarea. Can be 'Invalid' or 'Valid'.\r\n   */\r\n  state?: States.Invalid | States.Valid;\r\n\r\n  /**\r\n   * Optional. A function to be called when the text in the textarea changes.\r\n   * It should take a string representing the new text.\r\n   */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n   * Optional. The validation message to be displayed when the textarea is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n   * Required. The size of the textarea. Can be 'Small' or 'Medium'.\r\n   */\r\n  size: Size.Small | Size.Medium;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the height of the textarea should automatically adjust to fit the text.\r\n   */\r\n  autoHeight?: boolean;\r\n\r\n  /**\r\n   * Optional. The margin of the textarea. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the textarea.\r\n   */\r\n  note?: TextFieldNote;\r\n};\r\n\r\nexport type TextFieldNote = {\r\n  message: string;\r\n  icon: React.ReactNode;\r\n};\r\n\r\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\r\n  /** Optional. Id of the checkbox. */\r\n  id?: string;\r\n  /** Required. Current state of the checkbox. */\r\n  selected: boolean;\r\n  /** Optional. Handler to be called when checkbox is selected/unselected */\r\n  select?: (selected: boolean) => void;\r\n  /** Optional. Label to be shown on the right side of the checkbox. */\r\n  label?: string;\r\n  /** Optional. If checkbox is selected and invalid flag is set, then checkbox will be shown in 'invalid' state. */\r\n  invalid?: boolean;\r\n  /** Optional. If set, then user can not interact with it. */\r\n  disabled?: boolean;\r\n  /** Optional. Margin property. */\r\n  margin?: string;\r\n  /** Optional. Size of the Checkbox. Defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Optional. pointer-events: none style will be set to the checkbox if this flag is set. */\r\n  iconPointerEventsTransparent?: boolean;\r\n  /** Optional. If set then checkbox will be shown in 'semi-selected' state. */\r\n  semiSelected?: boolean;\r\n  /** Optional. If set, then user can not select/unselect the checkbox */\r\n  readOnly?: boolean;\r\n  /** Optional. Tab index attribute of the checkbox. */\r\n  tabIndexVal?: number;\r\n  /** Optional. Custom classname to be set to the checkbox. */\r\n  className?: string;\r\n};\r\n"],"mappings":"AAgFC;AAAC","ignoreList":[]}

package/dist/Layouts/index.cjs

@@ -21,7 +21,7 @@ var GRID = {
     LARGE: '32px 64px 128px'
   }
 };
-var PageWidth = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin: ", ";\n  ", "\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n  }\n"])), GRID.GUTTER.SMALL, function (props) {
+var PageWidth = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: block;\n  margin: ", ";\n  ", "\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n  }\n"])), GRID.GUTTER.SMALL, function (props) {
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, _styles.BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, function (props) {
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
@@ -33,7 +33,7 @@ var PageWidth = _styledComponents.default.div(_templateObject || (_templateObjec
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 });
 exports.PageWidth = PageWidth;
-var Columns = _styledComponents.default.section(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
+var Columns = _styledComponents["default"].section(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
   return props.gap || GRID.GAP.SMALL;
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
   return props.columns;

package/dist/Layouts/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","props","unsetMargin","BREAKPOINTS","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst GRID = {\r\n  GAP: {\r\n    SMALL: '16px',\r\n    MEDIUM: '24px',\r\n    LARGE: '32px',\r\n  },\r\n  GUTTER: {\r\n    SMALL: '16px 16px 32px',\r\n    MEDIUM: '24px 32px 64px',\r\n    LARGE: '32px 64px 128px',\r\n  },\r\n};\r\n\r\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\r\n  display: block;\r\n  margin: ${GRID.GUTTER.SMALL};\r\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: ${GRID.GUTTER.MEDIUM};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: ${GRID.GUTTER.LARGE};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: ${(props) => (\r\n            props.useMaxWidth\r\n                    ? (props.maxWidth\r\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\r\n                            : 'calc(100% - 128px)')\r\n                    : 'calc(1600px - 128px)')};\r\n\r\n    margin: 32px auto 128px;\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n`;\r\n\r\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\r\n  width: 100%;\r\n  display: grid;\r\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\r\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    grid-template-columns: ${(props) => props.columns};\r\n    -ms-grid-columns: ${(props) => props.columns};\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n    display: -ms-grid;\r\n\r\n    > *:not(:first-child) {\r\n      margin-left: ${GRID.GAP.MEDIUM};\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    grid-gap: 0;\r\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAAA;AAEA;AAAsC;AAEtC,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,+SAEvBR,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEC,mBAAW,CAACR,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACJ,UAACK,KAAK;EAAA,OACXA,KAAK,CAACG,WAAW,GACNH,KAAK,CAACI,QAAQ,GACP,mBAAmB,GAAGJ,KAAK,CAACI,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAJ,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAAC;AAEK,IAAMI,OAAO,GAAGP,yBAAM,CAACQ,OAAO,ooBAGvB,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDS,mBAAW,CAACR,MAAM,EACO,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAC7B,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAChC,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDQ,mBAAW,CAACP,KAAK,EACL,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACS,YAAY,IAAI,MAAM;AAAA,EAEnE;AAAC"}
+{"version":3,"file":"index.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_templateObject","_templateObject2","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","_taggedTemplateLiteral2","props","unsetMargin","BREAKPOINTS","useMaxWidth","maxWidth","exports","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst GRID = {\r\n  GAP: {\r\n    SMALL: '16px',\r\n    MEDIUM: '24px',\r\n    LARGE: '32px',\r\n  },\r\n  GUTTER: {\r\n    SMALL: '16px 16px 32px',\r\n    MEDIUM: '24px 32px 64px',\r\n    LARGE: '32px 64px 128px',\r\n  },\r\n};\r\n\r\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\r\n  display: block;\r\n  margin: ${GRID.GUTTER.SMALL};\r\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: ${GRID.GUTTER.MEDIUM};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: ${GRID.GUTTER.LARGE};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: ${(props) => (\r\n            props.useMaxWidth\r\n                    ? (props.maxWidth\r\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\r\n                            : 'calc(100% - 128px)')\r\n                    : 'calc(1600px - 128px)')};\r\n\r\n    margin: 32px auto 128px;\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n`;\r\n\r\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\r\n  width: 100%;\r\n  display: grid;\r\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\r\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    grid-template-columns: ${(props) => props.columns};\r\n    -ms-grid-columns: ${(props) => props.columns};\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n    display: -ms-grid;\r\n\r\n    > *:not(:first-child) {\r\n      margin-left: ${GRID.GAP.MEDIUM};\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    grid-gap: 0;\r\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAAsC,IAAAE,eAAA,EAAAC,gBAAA;AAEtC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,IAAME,SAAS,GAAGC,4BAAM,CAACC,GAAG,CAAAV,eAAA,KAAAA,eAAA,OAAAW,uBAAA,gPAEvBT,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAQ,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEC,mBAAW,CAACT,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACR,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACR,KAAK,EACJ,UAACM,KAAK;EAAA,OACXA,KAAK,CAACG,WAAW,GACNH,KAAK,CAACI,QAAQ,GACP,mBAAmB,GAAGJ,KAAK,CAACI,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAJ,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAACI,OAAA,CAAAT,SAAA,GAAAA,SAAA;AAEK,IAAMU,OAAO,GAAGT,4BAAM,CAACU,OAAO,CAAAlB,gBAAA,KAAAA,gBAAA,OAAAU,uBAAA,mkBAGvB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACQ,GAAG,IAAIlB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDU,mBAAW,CAACT,MAAM,EACO,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACS,OAAO;AAAA,GAC7B,UAACT,KAAK;EAAA,OAAKA,KAAK,CAACS,OAAO;AAAA,GAChC,UAACT,KAAK;EAAA,OAAKA,KAAK,CAACQ,GAAG,IAAIlB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDS,mBAAW,CAACR,KAAK,EACL,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACQ,GAAG,IAAIlB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACU,YAAY,IAAI,MAAM;AAAA,EAEnE;AAACL,OAAA,CAAAC,OAAA,GAAAA,OAAA","ignoreList":[]}

package/dist/Layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst GRID = {\r\n  GAP: {\r\n    SMALL: '16px',\r\n    MEDIUM: '24px',\r\n    LARGE: '32px',\r\n  },\r\n  GUTTER: {\r\n    SMALL: '16px 16px 32px',\r\n    MEDIUM: '24px 32px 64px',\r\n    LARGE: '32px 64px 128px',\r\n  },\r\n};\r\n\r\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\r\n  display: block;\r\n  margin: ${GRID.GUTTER.SMALL};\r\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: ${GRID.GUTTER.MEDIUM};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: ${GRID.GUTTER.LARGE};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: ${(props) => (\r\n            props.useMaxWidth\r\n                    ? (props.maxWidth\r\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\r\n                            : 'calc(100% - 128px)')\r\n                    : 'calc(1600px - 128px)')};\r\n\r\n    margin: 32px auto 128px;\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n`;\r\n\r\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\r\n  width: 100%;\r\n  display: grid;\r\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\r\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    grid-template-columns: ${(props) => props.columns};\r\n    -ms-grid-columns: ${(props) => props.columns};\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n    display: -ms-grid;\r\n\r\n    > *:not(:first-child) {\r\n      margin-left: ${GRID.GAP.MEDIUM};\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    grid-gap: 0;\r\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\r\n  }\r\n`;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,iSAEvBP,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEV,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAI,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACJ,UAACI,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAED,OAAO,IAAMG,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACL,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAC7B,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAChC,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACQ,YAAY,IAAI,MAAM;AAAA,EAEnE"}
+{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","_templateObject","_taggedTemplateLiteral","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","_templateObject2","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst GRID = {\r\n  GAP: {\r\n    SMALL: '16px',\r\n    MEDIUM: '24px',\r\n    LARGE: '32px',\r\n  },\r\n  GUTTER: {\r\n    SMALL: '16px 16px 32px',\r\n    MEDIUM: '24px 32px 64px',\r\n    LARGE: '32px 64px 128px',\r\n  },\r\n};\r\n\r\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\r\n  display: block;\r\n  margin: ${GRID.GUTTER.SMALL};\r\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: ${GRID.GUTTER.MEDIUM};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: ${GRID.GUTTER.LARGE};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: ${(props) => (\r\n            props.useMaxWidth\r\n                    ? (props.maxWidth\r\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\r\n                            : 'calc(100% - 128px)')\r\n                    : 'calc(1600px - 128px)')};\r\n\r\n    margin: 32px auto 128px;\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n`;\r\n\r\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\r\n  width: 100%;\r\n  display: grid;\r\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\r\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    grid-template-columns: ${(props) => props.columns};\r\n    -ms-grid-columns: ${(props) => props.columns};\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n    display: -ms-grid;\r\n\r\n    > *:not(:first-child) {\r\n      margin-left: ${GRID.GAP.MEDIUM};\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    grid-gap: 0;\r\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\r\n  }\r\n`;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,oOAEvBT,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAQ,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEZ,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEZ,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEZ,WAAW,CAACK,KAAK,EACJ,UAACM,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAED,OAAO,IAAMG,OAAO,GAAGhB,MAAM,CAACiB,OAAO,CAAAC,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,ujBAGvB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIjB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAC7B,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAChC,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIjB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIjB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACS,YAAY,IAAI,MAAM;AAAA,EAEnE","ignoreList":[]}

package/dist/LinearProgress/LinearProgress.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.LinearProgressVariant = exports.LinearProgressType = exports.LineFill = exports.Line = exports.Dot = exports.Bar = void 0;
+exports["default"] = exports.LinearProgressVariant = exports.LinearProgressType = exports.LineFill = exports.Line = exports.Dot = exports.Bar = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -16,19 +16,61 @@ var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["size", "type", "variant", "label", "value", "max", "className"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Bar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ", ";\n\n  &.active {\n    background-color: ", ";\n  }\n\n  &.current {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n  }\n\n  &.inverted.active {\n    background-color: ", ";\n  }\n\n  &.inverted.current {\n    background-color: ", ";\n  }\n\n"])), _styles.COLORS.neutral_100, _styles.COLORS.accent1_400, _styles.COLORS.accent1_800, _styles.COLORS.neutral_600, _styles.COLORS.accent1_400, _styles.COLORS.white);
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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"])), function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('accent1_400', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('accent1_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('accent1_400', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
 exports.Bar = Bar;
-var Dot = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ", ";\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ", ";\n  }\n\n  &.current:after {\n    background-color: ", ";\n  }\n\n  &.inverted:after {\n    background-color: ", ";\n  }\n\n  &.inverted.active:after {\n    background-color: ", ";\n  }\n\n  &.inverted.current:after {\n    background-color: ", ";\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.accent1_600, _styles.COLORS.accent1_800, _styles.COLORS.neutral_400, _styles.COLORS.accent1_400, _styles.COLORS.white);
+var Dot = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ", ";\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ", ";\n  }\n\n  &.current:after {\n    background-color: ", ";\n  }\n\n  &.inverted:after {\n    background-color: ", ";\n  }\n\n  &.inverted.active:after {\n    background-color: ", ";\n  }\n\n  &.inverted.current:after {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('accent1_600', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('accent1_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('accent1_400', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
 exports.Dot = Dot;
-var LineFill = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n"])));
+var LineFill = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n"])));
 exports.LineFill = LineFill;
-var Line = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ", " {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ", ";\n\n  ", " {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n\n    &:after,\n    &:before {\n      background-color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_500, _styles.COLORS.neutral_500, LineFill, LineFill, LineFill, _styles.COLORS.neutral_100, LineFill, _styles.COLORS.accent1_500, _styles.COLORS.neutral_700, _styles.COLORS.neutral_400, LineFill, _styles.COLORS.accent1_400);
+var Line = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ", " {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ", ";\n\n  ", " {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n\n    &:after,\n    &:before {\n      background-color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_500', props.theme);
+}, LineFill, LineFill, LineFill, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, LineFill, function (props) {
+  return _styles.COLORS.getColor('accent1_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_400', props.theme);
+}, LineFill, function (props) {
+  return _styles.COLORS.getColor('accent1_400', props.theme);
+});
 exports.Line = Line;
-var Label = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.black);
-var Content = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n"])));
-var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ", " {\n      color: ", ";\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 4px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 6px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 8px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ", " {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ", " {\n      padding: 0 3px;\n    }\n  }\n"])), Label, _styles.COLORS.white, Label, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Content, Content);
+var Label = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
+  return _styles.COLORS.getColor('black', props.theme);
+});
+var Content = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n"])));
+var Wrapper = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ", " {\n      color: ", ";\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 4px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 6px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 8px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ", " {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ", " {\n      padding: 0 3px;\n    }\n  }\n"])), Label, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, Label, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Content, Content);
 var LinearProgressType;
 exports.LinearProgressType = LinearProgressType;
 (function (LinearProgressType) {
@@ -53,7 +95,7 @@ var LinearProgress = function LinearProgress(_ref) {
     value = _ref.value,
     max = _ref.max,
     className = _ref.className,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var renderBars = function renderBars() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: Array.from(Array(max).keys()).map(function (i) {
@@ -106,12 +148,12 @@ var LinearProgress = function LinearProgress(_ref) {
   }));
 };
 LinearProgress.propTypes = {
-  type: _propTypes.default.oneOf(["dots", "line", "bars"]),
-  variant: _propTypes.default.oneOf(["normal", "inverted"]),
-  label: _propTypes.default.string,
-  value: _propTypes.default.number.isRequired,
-  max: _propTypes.default.number.isRequired
+  type: _propTypes["default"].oneOf(["dots", "line", "bars"]),
+  variant: _propTypes["default"].oneOf(["normal", "inverted"]),
+  label: _propTypes["default"].string,
+  value: _propTypes["default"].number.isRequired,
+  max: _propTypes["default"].number.isRequired
 };
 var _default = LinearProgress;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=LinearProgress.cjs.map

package/dist/LinearProgress/LinearProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgress.cjs","names":["Bar","styled","div","COLORS","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","LinearProgressType","LinearProgressVariant","LinearProgress","size","Size","Medium","type","variant","Normal","label","value","max","className","rest","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\n\r\nexport const Bar = styled.div`\r\n  flex: 1;\r\n  height: 6px;\r\n\r\n  &.small {\r\n    height: 6px;\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n  }\r\n\r\n  background-color: ${COLORS.neutral_100};\r\n\r\n  &.active {\r\n    background-color: ${COLORS.accent1_400};\r\n  }\r\n\r\n  &.current {\r\n    background-color: ${COLORS.accent1_800};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${COLORS.neutral_600};\r\n  }\r\n\r\n  &.inverted.active {\r\n    background-color: ${COLORS.accent1_400};\r\n  }\r\n\r\n  &.inverted.current {\r\n    background-color: ${COLORS.white};\r\n  }\r\n\r\n`;\r\n\r\nexport const Dot = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: ${COLORS.neutral_400};\r\n  }\r\n\r\n  &.small {\r\n    &:after {\r\n      width: 6px;\r\n      height: 6px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 10px;\r\n      height: 10px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    &:after {\r\n      width: 8px;\r\n      height: 8px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    &:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n\r\n\r\n  &.active:after {\r\n    background-color: ${COLORS.accent1_600};\r\n  }\r\n\r\n  &.current:after {\r\n    background-color: ${COLORS.accent1_800};\r\n  }\r\n\r\n  &.inverted:after {\r\n    background-color: ${COLORS.neutral_400};\r\n  }\r\n\r\n  &.inverted.active:after {\r\n    background-color: ${COLORS.accent1_400};\r\n  }\r\n\r\n  &.inverted.current:after {\r\n    background-color: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nexport const LineFill = styled.div`\r\n  height: 100%;\r\n  max-width: 100%;\r\n  position: absolute;\r\n  z-index: 1;\r\n`;\r\n\r\nexport const Line = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${COLORS.neutral_500};\r\n    position: absolute;\r\n    right: 0;\r\n  }\r\n\r\n  &:before {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${COLORS.neutral_500};\r\n    position: absolute;\r\n    left: 0;\r\n  }\r\n\r\n  &.small {\r\n    height: 6px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 3px;\r\n      border-top-right-radius: 6px;\r\n      border-bottom-right-radius: 6px;\r\n    }\r\n\r\n    &:before {\r\n      width: 3px;\r\n      border-top-left-radius: 6px;\r\n      border-bottom-left-radius: 6px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 4px;\r\n      border-top-right-radius: 8px;\r\n      border-bottom-right-radius: 8px;\r\n    }\r\n\r\n    &:before {\r\n      width: 4px;\r\n      border-top-left-radius: 8px;\r\n      border-bottom-left-radius: 8px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n    border-radius: 6px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 6px;\r\n    }\r\n\r\n    &:after {\r\n      width: 6px;\r\n      border-top-right-radius: 12px;\r\n      border-bottom-right-radius: 12px;\r\n    }\r\n\r\n    &:before {\r\n      width: 6px;\r\n      border-top-left-radius: 12px;\r\n      border-bottom-left-radius: 12px;\r\n    }\r\n  }\r\n\r\n  background-color: ${COLORS.neutral_100};\r\n\r\n  ${LineFill} {\r\n    background-color: ${COLORS.accent1_500};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${COLORS.neutral_700};\r\n\r\n    &:after,\r\n    &:before {\r\n      background-color: ${COLORS.neutral_400};\r\n    }\r\n\r\n    ${LineFill} {\r\n      background-color: ${COLORS.accent1_400};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Label = styled.div`\r\n  color: ${COLORS.black};\r\n`;\r\n\r\nconst Content = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  height: 16px;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n\r\n  &.inverted {\r\n    ${Label} {\r\n      color: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${Label} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 4px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 6px;\r\n        border-bottom-left-radius: 6px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 6px;\r\n        border-bottom-right-radius: 6px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${Label} {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 6px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 8px;\r\n        border-bottom-left-radius: 8px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 8px;\r\n        border-bottom-right-radius: 8px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${Label} {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 8px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 12px;\r\n        border-bottom-left-radius: 12px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 12px;\r\n        border-bottom-right-radius: 12px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dots.small,\r\n  &.dots.medium {\r\n    ${Content} {\r\n      padding: 0 2px;\r\n    }\r\n  }\r\n\r\n  &.dots.large {\r\n    ${Content} {\r\n      padding: 0 3px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum LinearProgressType {\r\n  Dots = 'dots',\r\n  Line = 'line',\r\n  Bars = 'bars',\r\n}\r\n\r\nexport enum LinearProgressVariant {\r\n  Normal = 'normal',\r\n  Inverted = 'inverted',\r\n}\r\n\r\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  type?: LinearProgressType;\r\n  variant?: LinearProgressVariant;\r\n\r\n  label?: string;\r\n\r\n  value: number;\r\n  max: number;\r\n}\r\n\r\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\r\n                                                                        size = Size.Medium,\r\n                                                                        type = LinearProgressType.Line,\r\n                                                                        variant = LinearProgressVariant.Normal,\r\n                                                                        label,\r\n                                                                        value,\r\n                                                                        max,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n\r\n  const renderBars = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Bar key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderDots = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Dot key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderLine = () =>\r\n    <>\r\n      <Line className={`${variant} ${size}`}>\r\n        <LineFill style={{width: `${value / max * 100}%`}}/>\r\n      </Line>\r\n    </>\r\n\r\n\r\n  const render = () => {\r\n    switch (type) {\r\n      case LinearProgressType.Bars:\r\n        return renderBars();\r\n      case LinearProgressType.Dots:\r\n        return renderDots();\r\n      case LinearProgressType.Line:\r\n      default:\r\n        return renderLine();\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\r\n      {label && <Label>{label}</Label>}\r\n      <Content>\r\n        {render()}\r\n      </Content>\r\n    </Wrapper>\r\n  )\r\n};\r\n\r\nexport default LinearProgress;\r\n"],"mappings":"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"}
+{"version":3,"file":"LinearProgress.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_styles","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Bar","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","exports","Dot","LineFill","Line","Label","Content","Wrapper","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","LinearProgressType","LinearProgressVariant","LinearProgress","_ref","_ref$size","size","Size","Medium","_ref$type","type","_ref$variant","variant","Normal","label","value","max","className","rest","_objectWithoutProperties2","renderBars","jsx","Fragment","children","Array","from","map","i","concat","Math","ceil","renderDots","renderLine","style","width","render","Bars","Dots","jsxs","propTypes","_propTypes","oneOf","string","number","isRequired","_default"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\n\r\nexport const Bar = styled.div`\r\n  flex: 1;\r\n  height: 6px;\r\n\r\n  &.small {\r\n    height: 6px;\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n  }\r\n\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  &.active {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.current {\r\n    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  &.inverted.active {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.current {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nexport const Dot = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    &:after {\r\n      width: 6px;\r\n      height: 6px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 10px;\r\n      height: 10px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    &:after {\r\n      width: 8px;\r\n      height: 8px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    &:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n\r\n\r\n  &.active:after {\r\n    background-color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n\r\n  &.current:after {\r\n    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n  }\r\n\r\n  &.inverted:after {\r\n    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.active:after {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.current:after {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const LineFill = styled.div`\r\n  height: 100%;\r\n  max-width: 100%;\r\n  position: absolute;\r\n  z-index: 1;\r\n`;\r\n\r\nexport const Line = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    position: absolute;\r\n    right: 0;\r\n  }\r\n\r\n  &:before {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    position: absolute;\r\n    left: 0;\r\n  }\r\n\r\n  &.small {\r\n    height: 6px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 3px;\r\n      border-top-right-radius: 6px;\r\n      border-bottom-right-radius: 6px;\r\n    }\r\n\r\n    &:before {\r\n      width: 3px;\r\n      border-top-left-radius: 6px;\r\n      border-bottom-left-radius: 6px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 4px;\r\n      border-top-right-radius: 8px;\r\n      border-bottom-right-radius: 8px;\r\n    }\r\n\r\n    &:before {\r\n      width: 4px;\r\n      border-top-left-radius: 8px;\r\n      border-bottom-left-radius: 8px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n    border-radius: 6px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 6px;\r\n    }\r\n\r\n    &:after {\r\n      width: 6px;\r\n      border-top-right-radius: 12px;\r\n      border-bottom-right-radius: 12px;\r\n    }\r\n\r\n    &:before {\r\n      width: 6px;\r\n      border-top-left-radius: 12px;\r\n      border-bottom-left-radius: 12px;\r\n    }\r\n  }\r\n\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  ${LineFill} {\r\n    background-color: ${props => COLORS.getColor('accent1_500', props.theme)};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n\r\n    &:after,\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    ${LineFill} {\r\n      background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Label = styled.div`\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n`;\r\n\r\nconst Content = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  height: 16px;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n\r\n  &.inverted {\r\n    ${Label} {\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${Label} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 4px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 6px;\r\n        border-bottom-left-radius: 6px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 6px;\r\n        border-bottom-right-radius: 6px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${Label} {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 6px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 8px;\r\n        border-bottom-left-radius: 8px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 8px;\r\n        border-bottom-right-radius: 8px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${Label} {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 8px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 12px;\r\n        border-bottom-left-radius: 12px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 12px;\r\n        border-bottom-right-radius: 12px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dots.small,\r\n  &.dots.medium {\r\n    ${Content} {\r\n      padding: 0 2px;\r\n    }\r\n  }\r\n\r\n  &.dots.large {\r\n    ${Content} {\r\n      padding: 0 3px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum LinearProgressType {\r\n  Dots = 'dots',\r\n  Line = 'line',\r\n  Bars = 'bars',\r\n}\r\n\r\nexport enum LinearProgressVariant {\r\n  Normal = 'normal',\r\n  Inverted = 'inverted',\r\n}\r\n\r\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Size of the component. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Progress type. Defaults to 'line' */\r\n  type?: LinearProgressType;\r\n  /** Progress variant. Defaults to 'normal' */\r\n  variant?: LinearProgressVariant;\r\n  /** Label of the component */\r\n  label?: string;\r\n /** Current value on the progress. */\r\n  value: number;\r\n  /** Maximum value of the progress bar. */\r\n  max: number;\r\n}\r\n\r\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\r\n                                                                        size = Size.Medium,\r\n                                                                        type = LinearProgressType.Line,\r\n                                                                        variant = LinearProgressVariant.Normal,\r\n                                                                        label,\r\n                                                                        value,\r\n                                                                        max,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n\r\n  const renderBars = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Bar key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderDots = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Dot key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderLine = () =>\r\n    <>\r\n      <Line className={`${variant} ${size}`}>\r\n        <LineFill style={{width: `${value / max * 100}%`}}/>\r\n      </Line>\r\n    </>\r\n\r\n\r\n  const render = () => {\r\n    switch (type) {\r\n      case LinearProgressType.Bars:\r\n        return renderBars();\r\n      case LinearProgressType.Dots:\r\n        return renderDots();\r\n      case LinearProgressType.Line:\r\n      default:\r\n        return renderLine();\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\r\n      {label && <Label>{label}</Label>}\r\n      <Content>\r\n        {render()}\r\n      </Content>\r\n    </Wrapper>\r\n  )\r\n};\r\n\r\nexport default LinearProgress;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/LinearProgress/LinearProgress.d.ts

@@ -14,11 +14,17 @@ export declare enum LinearProgressVariant {
     Inverted = "inverted"
 }
 export interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Size of the component. Defaults to 'medium' */
     size?: Size.Small | Size.Medium | Size.Large;
+    /** Progress type. Defaults to 'line' */
     type?: LinearProgressType;
+    /** Progress variant. Defaults to 'normal' */
     variant?: LinearProgressVariant;
+    /** Label of the component */
     label?: string;
+    /** Current value on the progress. */
     value: number;
+    /** Maximum value of the progress bar. */
     max: number;
 }
 declare const LinearProgress: React.FunctionComponent<LinearProgressProps>;