@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.4.full

package/dist/InputFields/DatepickerFieldHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"names":["React","ArrowDropUp","ArrowDropDown","styled","CommonInteractionStyling","COLORS","HeaderLabelContainer","div","neutral_600","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { ArrowDropUp, ArrowDropDown } from '../icons/systemicons/SystemIcons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { scrollBarStyling, COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n  date: Date;\n  changeYear(year: number): void;\n  changeMonth(month: number): void;\n  customHeaderCount: number;\n  decreaseMonth(): void;\n  increaseMonth(): void;\n  prevMonthButtonDisabled: boolean;\n  nextMonthButtonDisabled: boolean;\n  decreaseYear(): void;\n  increaseYear(): void;\n  prevYearButtonDisabled: boolean;\n  nextYearButtonDisabled: boolean;\n  yearPickerMode: boolean;\n  setYearPickerMode(val: boolean): void;\n  setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n\n  ${CommonInteractionStyling}\n\n  &:hover {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  &:active {\n    div {\n      color: ${COLORS.primary_600} !important;\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport const DatepickerFieldHeader = ({\n  date,\n  decreaseMonth,\n  increaseMonth,\n  prevMonthButtonDisabled,\n  nextMonthButtonDisabled,\n  setYearPickerMode,\n  yearPickerMode,\n  setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  const handleDecreaseMonth = () => {\n    let previousMonth = date.getMonth() - 1;\n    if (previousMonth < 0) previousMonth = months.length - 1;\n    setActiveMonthPage(previousMonth);\n    decreaseMonth();\n  };\n\n  const handleIncreaseMonth = () => {\n    let nextMonth = date.getMonth() + 1;\n    if (nextMonth >= months.length - 1) nextMonth = 0;\n    setActiveMonthPage(nextMonth);\n    increaseMonth();\n  };\n\n  React.useEffect(() => {\n    setActiveMonthPage(date.getMonth());\n  }, [date]);\n\n  return (\n    <>\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'center',\n        }}>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n            Prevoius month\n          </button>\n        )}\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n          {yearPickerMode ? <ArrowDropUp size=\"24px\" /> : <ArrowDropDown size=\"24px\" />}\n        </HeaderLabelContainer>\n        {!yearPickerMode && (\n          <button className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n            Next month\n          </button>\n        )}\n      </div>\n    </>\n  );\n};\n"],"file":"DatepickerFieldHeader.js"}

package/dist/InputFields/Label.js

@@ -1,90 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-
-var _templateObject, _templateObject2;
-
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom styles.
- */
-
-import { BREAKPOINTS, COLORS } from '../styles';
-import { RequiredStar } from './styling';
-
-/**
- * Import third-party libraries.
- */
-import styled from 'styled-components';
-import { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography'; // Add component-specific styles.
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Label = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
-var LabelRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}); // Add component-specific types
-
-var InputLabel = function InputLabel(_ref) {
-  var _document$getElementB2;
-
-  var inputId = _ref.inputId,
-      text = _ref.text,
-      size = _ref.size,
-      margin = _ref.margin;
-
-  // Globally used variables within the component
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      required = _React$useState2[0],
-      setRequired = _React$useState2[1];
-  /**
-   * Checks if field is set as required and we have to mark it accordingly.
-   */
-
-
-  React.useEffect(function () {
-    var _document$getElementB;
-
-    if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
-      setRequired(true);
-    } else {
-      setRequired(false);
-    }
-  }, [(_document$getElementB2 = document.getElementById(inputId)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.getAttribute('required')]);
-  /**
-   * Triggers a click element on a specific element.
-   * @param id - ID of the element which needs to be clicked.
-   */
-
-  var onTriggerClick = function onTriggerClick(id) {
-    var _document$getElementB3;
-
-    (_document$getElementB3 = document.getElementById(id)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.click();
-  };
-
-  return /*#__PURE__*/_jsxs(LabelRow, {
-    margin: margin,
-    children: [/*#__PURE__*/_jsx(Label, {
-      htmlFor: inputId,
-      onClick: function onClick() {
-        return onTriggerClick(inputId);
-      },
-      className: size || '',
-      children: text
-    }), required && /*#__PURE__*/_jsx(RequiredStar, {
-      children: "*"
-    })]
-  });
-};
-
-InputLabel.propTypes = {
-  inputId: _pt.string.isRequired,
-  text: _pt.string.isRequired,
-  margin: _pt.string
-};
-export default InputLabel;
-//# sourceMappingURL=Label.js.map

package/dist/InputFields/Label.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","RequiredStar","styled","ComponentXSStyling","ComponentXXSStyling","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,WAA7B;;AAGA;AACA;AACA;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,kBAAT,EAA6BC,mBAA7B,QAAwD,sBAAxD,C,CAEA;;;;AACA,IAAMC,KAAK,GAAGH,MAAM,CAACI,KAAV,sKACPF,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CADZ,EAGPR,WAAW,CAACS,MAHL,EAILL,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAJb,EAQLH,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CARd,EAWLJ,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAXb,CAAX;AAeA,IAAME,QAAQ,GAAGP,MAAM,CAACQ,GAAV,uIAGV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAHU,CAAd,C,CAMA;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;AAAA;;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,IAA+B,QAA/BA,IAA+B;AAAA,MAAzBJ,MAAyB,QAAzBA,MAAyB;;AACvG;AACA,wBAAgCd,KAAK,CAACmB,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;AAEA;AACF;AACA;;;AACErB,EAAAA,KAAK,CAACsB,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,iFAAkCS,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;AACrEJ,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,CAAD,2DAAC,uBAAkCS,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;AAAA;;AAC3C,8BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,MAAC,QAAD;AAAU,IAAA,MAAM,EAAEd,MAAlB;AAAA,4BACE,KAAC,KAAD;AAAO,MAAA,OAAO,EAAEE,OAAhB;AAAyB,MAAA,OAAO,EAAE;AAAA,eAAMU,cAAc,CAACV,OAAD,CAApB;AAAA,OAAlC;AAAiE,MAAA,SAAS,EAAEE,IAAI,IAAI,EAApF;AAAA,gBACGD;AADH,MADF,EAIGG,QAAQ,iBAAI,KAAC,YAAD;AAAA;AAAA,MAJf;AAAA,IADF;AAQD,CA9BD;;;AANEJ,EAAAA,O;AACAC,EAAAA,I;AAEAH,EAAAA,M;;AAmCF,eAAeC,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  justify-content: space-between;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n        {text}\n      </Label>\n      {required && <RequiredStar>*</RequiredStar>}\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}

package/dist/InputFields/PasswordField.js

@@ -1,125 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-
-var _templateObject, _templateObject2;
-
-import * as React from 'react';
-import styled from 'styled-components';
-import { InputFieldStyling, InputWrapper } from './styling';
-import { Z_INDEXES } from '../styles/z-indexes';
-import { useFocusVisibleRef } from '../common/FocusVisible';
-import { IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var StyledPassSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  right: 0;\n  position: absolute;\n"])), Z_INDEXES.badge);
-var PasswordRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-
-var PasswordField = function PasswordField(_ref) {
-  var id = _ref.id,
-      disabled = _ref.disabled,
-      locked = _ref.locked,
-      _onChange = _ref.onChange,
-      hasError = _ref.hasError,
-      value = _ref.value,
-      validationMessage = _ref.validationMessage,
-      autoComplete = _ref.autoComplete,
-      placeholder = _ref.placeholder,
-      required = _ref.required,
-      readOnly = _ref.readOnly,
-      size = _ref.size,
-      margin = _ref.margin;
-
-  var _React$useState = React.useState(true),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      passwordHidden = _React$useState2[0],
-      setPasswordHidden = _React$useState2[1];
-
-  var inputRef = useFocusVisibleRef();
-
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === 13) {
-      setPasswordHidden(!passwordHidden);
-    }
-  };
-
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(InputWrapper, {
-      disabled: disabled,
-      locked: locked,
-      margin: margin,
-      children: /*#__PURE__*/_jsx("div", {
-        style: {
-          display: 'block'
-        },
-        children: /*#__PURE__*/_jsxs(PasswordRow, {
-          children: [/*#__PURE__*/_jsx(InputFieldStyling, {
-            id: id,
-            ref: inputRef,
-            type: passwordHidden ? 'password' : 'text',
-            name: "password",
-            value: value,
-            className: (hasError ? 'error' : '').concat(size ? size : ''),
-            tabIndex: disabled || locked ? -1 : 0,
-            autoComplete: autoComplete,
-            placeholder: placeholder,
-            disabled: disabled,
-            locked: locked,
-            required: required,
-            readOnly: readOnly,
-            onChange: function onChange(e) {
-              var _e$target;
-
-              return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
-            }
-          }), /*#__PURE__*/_jsx(StyledPassSwitch, {
-            className: size ? size : '',
-            children: !disabled && !locked ? passwordHidden ? /*#__PURE__*/_jsx(IconButton, {
-              id: "".concat(id, "_Visible"),
-              iconColor: '#666666',
-              variant: 'secondary',
-              shape: 'circular',
-              onKeyPress: handleKeyDown,
-              action: function action() {
-                return setPasswordHidden(!passwordHidden);
-              },
-              children: /*#__PURE__*/_jsx(SystemIcons.VisibleOff, {})
-            }) : /*#__PURE__*/_jsx(IconButton, {
-              id: "".concat(id, "_NotVisible"),
-              iconColor: '#666666',
-              variant: 'secondary',
-              shape: 'circular',
-              onKeyPress: handleKeyDown,
-              action: function action() {
-                return setPasswordHidden(!passwordHidden);
-              },
-              children: /*#__PURE__*/_jsx(SystemIcons.VisibleOn, {})
-            }) : null
-          })]
-        })
-      })
-    }), validationMessage && /*#__PURE__*/_jsx("span", {
-      className: "error-msg",
-      children: validationMessage
-    })]
-  });
-};
-
-PasswordField.propTypes = {
-  id: _pt.string.isRequired,
-  disabled: _pt.bool,
-  locked: _pt.bool,
-  onChange: _pt.func,
-  hasError: _pt.bool,
-  value: _pt.string,
-  validationMessage: _pt.string,
-  autoComplete: _pt.string,
-  placeholder: _pt.string,
-  required: _pt.bool,
-  readOnly: _pt.bool,
-  margin: _pt.string
-};
-export default PasswordField;
-//# sourceMappingURL=PasswordField.js.map

package/dist/InputFields/PasswordField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["React","styled","InputFieldStyling","InputWrapper","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","StyledPassSwitch","div","badge","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","useState","passwordHidden","setPasswordHidden","inputRef","handleKeyDown","e","keyCode","display","concat","target"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAGA,SAAQC,iBAAR,EAA2BC,YAA3B,QAA8C,WAA9C;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AACA,SAAQC,kBAAR,QAAiC,wBAAjC;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,SAAQC,WAAR,QAA0B,UAA1B;;;;AAkBA,IAAMC,gBAAgB,GAAGP,MAAM,CAACQ,GAAV,8HACTL,SAAS,CAACM,KADD,CAAtB;AAMA,IAAMC,WAAW,GAAGV,MAAM,CAACQ,GAAV,kKAAjB;;AAOA,IAAMG,aAAa,GAAG,SAAhBA,aAAgB,OAc2B;AAAA,MAbxBC,EAawB,QAbxBA,EAawB;AAAA,MAZxBC,QAYwB,QAZxBA,QAYwB;AAAA,MAXxBC,MAWwB,QAXxBA,MAWwB;AAAA,MAVxBC,SAUwB,QAVxBA,QAUwB;AAAA,MATxBC,QASwB,QATxBA,QASwB;AAAA,MARxBC,KAQwB,QARxBA,KAQwB;AAAA,MAPxBC,iBAOwB,QAPxBA,iBAOwB;AAAA,MANxBC,YAMwB,QANxBA,YAMwB;AAAA,MALxBC,WAKwB,QALxBA,WAKwB;AAAA,MAJxBC,QAIwB,QAJxBA,QAIwB;AAAA,MAHxBC,QAGwB,QAHxBA,QAGwB;AAAA,MAFxBC,IAEwB,QAFxBA,IAEwB;AAAA,MADxBC,MACwB,QADxBA,MACwB;;AAC/C,wBAA4CzB,KAAK,CAAC0B,QAAN,CAAwB,IAAxB,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,MAAMC,QAAQ,GAAGxB,kBAAkB,EAAnC;;AAEA,MAAMyB,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAAY;AAChC,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBJ,MAAAA,iBAAiB,CAAC,CAACD,cAAF,CAAjB;AACD;AACF,GAJD;;AAKA,sBACE;AAAA,4BACE,KAAC,YAAD;AACE,MAAA,QAAQ,EAAEb,QADZ;AAEE,MAAA,MAAM,EAAEC,MAFV;AAGE,MAAA,MAAM,EAAEU,MAHV;AAAA,6BAIE;AAAK,QAAA,KAAK,EAAE;AAACQ,UAAAA,OAAO,EAAE;AAAV,SAAZ;AAAA,+BACE,MAAC,WAAD;AAAA,kCACE,KAAC,iBAAD;AACE,YAAA,EAAE,EAAEpB,EADN;AAEE,YAAA,GAAG,EAAEgB,QAFP;AAGE,YAAA,IAAI,EAAEF,cAAc,GAAG,UAAH,GAAgB,MAHtC;AAIE,YAAA,IAAI,EAAC,UAJP;AAKE,YAAA,KAAK,EAAET,KALT;AAME,YAAA,SAAS,EAAE,CAACD,QAAQ,GAAG,OAAH,GAAa,EAAtB,EAA0BiB,MAA1B,CAAiCV,IAAI,GAAGA,IAAH,GAAU,EAA/C,CANb;AAOE,YAAA,QAAQ,EAAEV,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CAPtC;AAQE,YAAA,YAAY,EAAEK,YARhB;AASE,YAAA,WAAW,EAAEC,WATf;AAUE,YAAA,QAAQ,EAAEP,QAVZ;AAWE,YAAA,MAAM,EAAEC,MAXV;AAYE,YAAA,QAAQ,EAAEO,QAZZ;AAaE,YAAA,QAAQ,EAAEC,QAbZ;AAcE,YAAA,QAAQ,EAAE,kBAACQ,CAAD;AAAA;;AAAA,qBAAYf,SAAQ,IAAIA,SAAQ,CAAC,CAAAe,CAAC,SAAD,IAAAA,CAAC,WAAD,yBAAAA,CAAC,CAAEI,MAAH,wDAAWjB,KAAX,KAAoB,EAArB,CAAhC;AAAA;AAdZ,YADF,eAiBE,KAAC,gBAAD;AAAkB,YAAA,SAAS,EAAEM,IAAI,GAAGA,IAAH,GAAU,EAA3C;AAAA,sBACG,CAACV,QAAD,IAAa,CAACC,MAAd,GACCY,cAAc,gBACZ,KAAC,UAAD;AAAY,cAAA,EAAE,YAAKd,EAAL,aAAd;AACY,cAAA,SAAS,EAAE,SADvB;AAEY,cAAA,OAAO,EAAE,WAFrB;AAGY,cAAA,KAAK,EAAE,UAHnB;AAIY,cAAA,UAAU,EAAEiB,aAJxB;AAKY,cAAA,MAAM,EAAE;AAAA,uBAAMF,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA,eALpB;AAAA,qCAME,KAAC,WAAD,CAAa,UAAb;AANF,cADY,gBAUZ,KAAC,UAAD;AAAY,cAAA,EAAE,YAAKd,EAAL,gBAAd;AACY,cAAA,SAAS,EAAE,SADvB;AAEY,cAAA,OAAO,EAAE,WAFrB;AAGY,cAAA,KAAK,EAAE,UAHnB;AAIY,cAAA,UAAU,EAAEiB,aAJxB;AAKY,cAAA,MAAM,EAAE;AAAA,uBAAMF,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA,eALpB;AAAA,qCAME,KAAC,WAAD,CAAa,SAAb;AANF,cAXH,GAoBG;AArBN,YAjBF;AAAA;AADF;AAJF,MADF,EAiDGR,iBAAiB,iBAAI;AAAM,MAAA,SAAS,EAAC,WAAhB;AAAA,gBAA6BA;AAA7B,MAjDxB;AAAA,IADF;AAqDD,CA5ED;;;AA5BEN,EAAAA,E;AACAC,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,iB;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AAEAE,EAAAA,M;;AA8FF,eAAeb,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS} from '../styles';\nimport {Size} from '../types';\nimport {InputFieldStyling, InputWrapper} from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = ({\n                         id,\n                         disabled,\n                         locked,\n                         onChange,\n                         hasError,\n                         value,\n                         validationMessage,\n                         autoComplete,\n                         placeholder,\n                         required,\n                         readOnly,\n                         size,\n                         margin\n                       }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}>\n        <div style={{display: 'block'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={disabled || locked ? -1 : 0}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <IconButton id={`${id}_Visible`}\n                              iconColor={'#666666'}\n                              variant={'secondary'}\n                              shape={'circular'}\n                              onKeyPress={handleKeyDown}\n                              action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff/>\n                  </IconButton>\n                ) : (\n                  <IconButton id={`${id}_NotVisible`}\n                              iconColor={'#666666'}\n                              variant={'secondary'}\n                              shape={'circular'}\n                              onKeyPress={handleKeyDown}\n                              action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn/>\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/InputFields/QuickSearch.js

@@ -1,174 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-
-var _templateObject;
-
-import * as React from 'react';
-import styled from 'styled-components';
-import IconButton from '../Button/Iconbutton';
-import { SearchIconWrapper, StyledIcon } from './styling';
-import { Size } from '../types';
-import { COLORS, LoadingIndicator } from '..';
-import { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';
-import SearchBarInput from './components/SearchBarInput';
-import { StyledSearchField } from './components/SearchField';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var QuickSearchField = styled(StyledSearchField)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ", ";\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ", ";\n    }\n  }\n\n  box-shadow: ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, COLORS.white, COLORS.neutral_600, function (props) {
-  return props.expanded ? "inset 0px 0px 0px 2px ".concat(COLORS.primary_800) : 'none !important';
-}, function (props) {
-  return props.expanded ? "inset 0px 0px 0px 2px ".concat(COLORS.primary_700) : 'none !important';
-});
-
-var QuickSearch = function QuickSearch(_ref) {
-  var id = _ref.id,
-      searchTerm = _ref.searchTerm,
-      _setSearchTerm = _ref.setSearchTerm,
-      enterSearch = _ref.enterSearch,
-      removeSearch = _ref.removeSearch,
-      placeholder = _ref.placeholder,
-      performSearchLabel = _ref.performSearchLabel,
-      disabled = _ref.disabled,
-      onKeyDown = _ref.onKeyDown,
-      size = _ref.size,
-      margin = _ref.margin,
-      loading = _ref.loading;
-  var searchFieldRef = React.useRef(null);
-  var searchFieldInputRef = React.useRef(null);
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      searchFieldVisible = _React$useState2[0],
-      setSearchFieldVisible = _React$useState2[1];
-
-  var handleClickOutside = function handleClickOutside(e) {
-    if (searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(e.target)) {
-      if (searchFieldVisible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
-        setSearchFieldVisible(false);
-      }
-    }
-  };
-
-  React.useEffect(function () {
-    if (searchTerm !== null && searchTerm !== void 0 && searchTerm.length) {
-      setSearchFieldVisible(true);
-    }
-  }, [searchTerm]);
-  React.useEffect(function () {
-    document.addEventListener('click', handleClickOutside);
-    return function () {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  });
-  React.useEffect(function () {
-    if (searchFieldVisible) {
-      var _searchFieldInputRef$;
-
-      searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 ? void 0 : _searchFieldInputRef$.focus();
-    }
-  }, [searchFieldVisible, searchFieldInputRef, id]);
-
-  var handleKeyDown = function handleKeyDown(e) {
-    if (onKeyDown) {
-      onKeyDown(e);
-    }
-
-    if (e.key === 'Escape') {
-      if (searchFieldVisible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
-        setSearchFieldVisible(false);
-      }
-    }
-  };
-
-  return /*#__PURE__*/_jsxs(QuickSearchField, {
-    ref: searchFieldRef,
-    expanded: searchFieldVisible,
-    id: "".concat(id, "_main"),
-    onBlur: function onBlur(event) {
-      if (event.relatedTarget && searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {
-        setSearchFieldVisible(false);
-      }
-    },
-    "data-testid": "".concat(id, "_main"),
-    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat(searchFieldVisible ? ' expanded' : ''),
-    margin: margin,
-    children: [searchFieldVisible && /*#__PURE__*/_jsx(SearchBarInput, {
-      placeholder: disabled ? '' : placeholder,
-      id: id,
-      ref: searchFieldInputRef,
-      disabled: disabled,
-      onKeyDown: handleKeyDown,
-      size: size,
-      setSearchTerm: function setSearchTerm(term) {
-        return _setSearchTerm(term);
-      },
-      searchTerm: searchTerm,
-      enterSearch: enterSearch,
-      focusParentRefs: [searchFieldRef]
-    }), /*#__PURE__*/_jsx(SearchIconWrapper, {
-      className: size ? size : '',
-      role: "button",
-      "aria-label": performSearchLabel,
-      tabIndex: -1,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        id: "".concat(id, "_Searchbutton"),
-        variant: "secondary",
-        shape: "circular",
-        tabIndex: searchFieldVisible ? -1 : 0,
-        action: function action(e) {
-          return searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(!searchFieldVisible);
-        },
-        children: /*#__PURE__*/_jsx(SearchIcon, {
-          size: "24px",
-          color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
-        })
-      })
-    }), /*#__PURE__*/_jsx(StyledIcon, {
-      className: size ? size : '',
-      role: "button",
-      tabIndex: -1,
-      hidden: searchTerm === '' || searchTerm === undefined || !searchFieldVisible,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        id: "".concat(id, "_Clearicon"),
-        variant: "secondary",
-        shape: "circular",
-        action: function action(e) {
-          var _searchFieldInputRef$2;
-
-          removeSearch(e);
-          searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$2 = searchFieldInputRef.current) === null || _searchFieldInputRef$2 === void 0 ? void 0 : _searchFieldInputRef$2.focus();
-        },
-        children: /*#__PURE__*/_jsx(ClearIcon, {
-          size: "24px",
-          color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
-        })
-      })
-    }), loading && searchFieldVisible && /*#__PURE__*/_jsx(StyledIcon, {
-      className: size ? size : '',
-      tabIndex: -1,
-      children: /*#__PURE__*/_jsx(LoadingIndicator, {
-        size: Size.Small,
-        color: COLORS.neutral_600
-      })
-    })]
-  });
-};
-
-QuickSearch.propTypes = {
-  id: _pt.string.isRequired,
-  searchTerm: _pt.string,
-  setSearchTerm: _pt.func.isRequired,
-  enterSearch: _pt.func.isRequired,
-  removeSearch: _pt.func.isRequired,
-  placeholder: _pt.string,
-  performSearchLabel: _pt.string,
-  disabled: _pt.bool,
-  onKeyDown: _pt.func,
-  margin: _pt.string,
-  loading: _pt.bool
-};
-export default QuickSearch;
-//# sourceMappingURL=QuickSearch.js.map

package/dist/InputFields/QuickSearch.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","StyledSearchField","QuickSearchField","props","margin","white","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","useRef","searchFieldInputRef","useState","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","useEffect","document","addEventListener","removeEventListener","focus","handleKeyDown","key","event","relatedTarget","concat","term","neutral_300","undefined","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport { StyledSearchField } from './components/SearchField';\n\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ${COLORS.white};\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n\n  &:hover {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (searchTerm?.length) {\n      setSearchFieldVisible(true);\n    }\n  }, [searchTerm]);\n\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    if (searchFieldVisible) {\n      searchFieldInputRef?.current?.focus();\n    }\n  }, [searchFieldVisible, searchFieldInputRef, id]);\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      onBlur={(event: any) => {\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\n          setSearchFieldVisible(false);\n        }\n      }}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\n      margin={margin}>\n      {searchFieldVisible && (\n        <SearchBarInput\n          placeholder={disabled ? '' : placeholder}\n          id={id}\n          ref={searchFieldInputRef}\n          disabled={disabled}\n          onKeyDown={handleKeyDown}\n          size={size}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\n          focusParentRefs={[searchFieldRef]}\n        />\n      )}\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\n        <IconButton\n          id={`${id}_Searchbutton`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          tabIndex={searchFieldVisible ? -1 : 0}\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(!searchFieldVisible))}>\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </SearchIconWrapper>\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\n        <IconButton\n          id={`${id}_Clearicon`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          action={(e) => {\n            removeSearch(e);\n            searchFieldInputRef?.current?.focus();\n          }}>\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </StyledIcon>\n      {loading && searchFieldVisible && (\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\n          <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}

package/dist/InputFields/RadioButton.js

@@ -1,88 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-
-var _templateObject;
-
-import * as React from 'react';
-import styled from 'styled-components';
-import { RadioButtonOff, RadioButtonOn } from '../icons/systemicons/SystemIcons';
-import { COLORS, ComponentTextStyle } from '../styles';
-import { Size } from '../types';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var StyledRadioButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n \n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ", ";\n    }\n    \n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, COLORS.black, function (props) {
-  return props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600;
-}, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.white, COLORS.primary_500, COLORS.neutral_600, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300);
-var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _size;
-
-  var id = _ref.id,
-      selected = _ref.selected,
-      label = _ref.label,
-      additionalLabel = _ref.additionalLabel,
-      showWarning = _ref.showWarning,
-      select = _ref.select,
-      disabled = _ref.disabled,
-      margin = _ref.margin,
-      iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
-      size = _ref.size;
-
-  var onKeyPress = function onKeyPress(e) {
-    if (e.keyCode === 13 && !disabled) {
-      select(!selected);
-    }
-  };
-
-  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
-  return /*#__PURE__*/_jsxs(StyledRadioButton, {
-    margin: margin,
-    ref: ref,
-    onClick: function onClick() {
-      return !disabled && select(!selected);
-    },
-    onMouseDown: function onMouseDown(e) {
-      return e.preventDefault();
-    },
-    onKeyDown: onKeyPress,
-    disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
-    tabIndex: disabled ? -1 : 0,
-    showWarning: showWarning,
-    selected: selected,
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: 'radio-button-icon',
-      id: id,
-      children: [selected && /*#__PURE__*/_jsx(RadioButtonOn, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-        size: "24px"
-      }), !selected && /*#__PURE__*/_jsx(RadioButtonOff, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-        size: "24px"
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      className: 'radio-button-label',
-      children: [label && /*#__PURE__*/_jsx("label", {
-        htmlFor: id,
-        children: label
-      }), additionalLabel !== undefined && /*#__PURE__*/_jsx("span", {
-        children: additionalLabel
-      })]
-    })]
-  }, id);
-});
-RadioButton.propTypes = {
-  id: _pt.string.isRequired,
-  selected: _pt.bool.isRequired,
-  select: _pt.func.isRequired,
-  label: _pt.string,
-  additionalLabel: _pt.string,
-  showWarning: _pt.bool,
-  disabled: _pt.bool,
-  iconPointerEventsTransparent: _pt.bool,
-  margin: _pt.string
-};
-export default RadioButton;
-//# sourceMappingURL=RadioButton.js.map

package/dist/InputFields/RadioButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAA0B,mBAA1B;AACA,SAAQC,cAAR,EAAwBC,aAAxB,QAA4C,kCAA5C;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,mBAAjE,QAA2F,sBAA3F;;;AAEA,IAAMC,iBAAiB,GAAGV,MAAM,CAACW,GAAV,oyDAMnB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CANc,EASZV,MAAM,CAACW,KATK,EA0BR,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,QAAN,GAAiBZ,MAAM,CAACa,WAAxB,GAAsCJ,KAAK,CAACK,WAAN,GAAoBd,MAAM,CAACe,WAA3B,GAAyCf,MAAM,CAACgB,WAA3F;AAAA,CA1BG,EAwCfV,mBAAmB,CAACL,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CAxCJ,EA6CjBN,iBAAiB,CAACJ,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CA7CA,EAoDjBP,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CApDA,EA2DjBR,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACW,KAApC,CA3DA,EAqEGX,MAAM,CAACkB,KArEV,EAsEKlB,MAAM,CAACa,WAtEZ,EAyENb,MAAM,CAACgB,WAzED,EAgFGhB,MAAM,CAACmB,UAhFV,EAmFNnB,MAAM,CAACoB,WAnFD,EA0FHpB,MAAM,CAACqB,WA1FJ,EA8FNrB,MAAM,CAACsB,WA9FD,EAuGVtB,MAAM,CAACuB,WAvGG,EA+GGvB,MAAM,CAACkB,KA/GV,EAmHRlB,MAAM,CAACuB,WAnHC,CAAvB;AAqIA,IAAMC,WAAW,gBAAG5B,KAAK,CAAC6B,UAAN,CAAwC,gBAWlDC,GAXkD,EAW1C;AAAA;;AAAA,MAVhBC,EAUgB,QAVhBA,EAUgB;AAAA,MAThBf,QASgB,QAThBA,QASgB;AAAA,MARhBgB,KAQgB,QARhBA,KAQgB;AAAA,MAPhBC,eAOgB,QAPhBA,eAOgB;AAAA,MANhBf,WAMgB,QANhBA,WAMgB;AAAA,MALhBgB,MAKgB,QALhBA,MAKgB;AAAA,MAJhBC,QAIgB,QAJhBA,QAIgB;AAAA,MAHhBrB,MAGgB,QAHhBA,MAGgB;AAAA,MAFhBsB,4BAEgB,QAFhBA,4BAEgB;AAAA,MADhBC,IACgB,QADhBA,IACgB;;AAChB,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACL,QAAzB,EAAmC;AACjCD,MAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD;AACF,GAJD;;AAMAqB,EAAAA,IAAI,YAAGA,IAAH,yCAAW/B,IAAI,CAACmC,MAApB;AAEA,sBACE,MAAC,iBAAD;AAA4B,IAAA,MAAM,EAAE3B,MAApC;AACmB,IAAA,GAAG,EAAEgB,GADxB;AAEmB,IAAA,OAAO,EAAE;AAAA,aAAM,CAACK,QAAD,IAAaD,MAAM,CAAC,CAAClB,QAAF,CAAzB;AAAA,KAF5B;AAGmB,IAAA,WAAW,EAAE,qBAAAuB,CAAC;AAAA,aAAIA,CAAC,CAACG,cAAF,EAAJ;AAAA,KAHjC;AAImB,IAAA,SAAS,EAAEJ,UAJ9B;AAKmB,IAAA,QAAQ,EAAEH,QAL7B;AAMmB,IAAA,SAAS,EAAEE,IAAI,CAACM,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCV,QAAQ,GAAG,WAAH,GAAiB,EAA9D,CAN9B;AAOmB,IAAA,QAAQ,EAAEA,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP7C;AAQmB,IAAA,WAAW,EAAEjB,WARhC;AASmB,IAAA,QAAQ,EAAEF,QAT7B;AAAA,4BAUE;AAAK,MAAA,SAAS,EAAE,mBAAhB;AAAqC,MAAA,EAAE,EAAEe,EAAzC;AAAA,iBACIf,QAAQ,iBAAI,KAAC,aAAD;AAAe,QAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAAhF;AAAoF,QAAA,IAAI,EAAC;AAAzF,QADhB,EAEI,CAACpB,QAAD,iBAAa,KAAC,cAAD;AAAgB,QAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAAjF;AAAqF,QAAA,IAAI,EAAC;AAA1F,QAFjB;AAAA,MAVF,eAcE;AAAK,MAAA,SAAS,EAAE,oBAAhB;AAAA,iBACGJ,KAAK,iBAAI;AAAO,QAAA,OAAO,EAAED,EAAhB;AAAA,kBAAqBC;AAArB,QADZ,EAEGC,eAAe,KAAKa,SAApB,iBAAiC;AAAA,kBAAOb;AAAP,QAFpC;AAAA,MAdF;AAAA,KAAwBF,EAAxB,CADF;AAqBD,CAzCmB,CAApB;;AAZEA,EAAAA,E;AACAf,EAAAA,Q;AACAkB,EAAAA,M;AACAF,EAAAA,K;AACAC,EAAAA,e;AACAf,EAAAA,W;AACAiB,EAAAA,Q;AACAC,EAAAA,4B;AACAtB,EAAAA,M;;AA+CF,eAAec,WAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : 0}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}

package/dist/InputFields/ResponsiveComponentWrapper.js

@@ -1,53 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _pt from "prop-types";
-
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-/**
- * Import custom styles.
- */
-
-import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles'; // Add component-specific types
-
-import { jsx as _jsx } from "react/jsx-runtime";
-
-var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
-  var children = _ref.children,
-      size = _ref.size;
-
-  // Globally used variables within the component
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isMediumView = _React$useState2[0],
-      setIsMediumView = _React$useState2[1];
-
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      var mql = window.matchMedia("".concat(BREAKPOINTS.MEDIUM.replace('@media ', '')));
-      setIsMediumView(mql.matches);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return function cleanup() {
-      window.removeEventListener('resize', handleResize);
-    };
-  });
-  return size && size === Size.Medium ? /*#__PURE__*/_jsx(ComponentXS, {
-    children: children
-  }) : size && size === Size.Small ? /*#__PURE__*/_jsx(ComponentXXS, {
-    children: children
-  }) : isMediumView ? /*#__PURE__*/_jsx(ComponentXS, {
-    children: children
-  }) : /*#__PURE__*/_jsx(ComponentXXS, {
-    children: children
-  });
-};
-
-ReponsiveComponentWrapper.propTypes = {
-  children: _pt.any
-};
-export default ReponsiveComponentWrapper;
-//# sourceMappingURL=ResponsiveComponentWrapper.js.map

package/dist/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Medium","Small"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;;;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAP,MAAAA,eAAe,CAACG,GAAG,CAACK,OAAL,CAAf;AACD,KAHD;;AAIAJ,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;AACA,WAAO,SAASQ,OAAT,GAAmB;AACxBN,MAAAA,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,MAAtB,gBACL,KAAC,WAAD;AAAA,cAAchB;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACsB,KAAtB,gBACF,KAAC,YAAD;AAAA,cAAejB;AAAf,IADE,GAEAG,YAAY,gBACd,KAAC,WAAD;AAAA,cAAcH;AAAd,IADc,gBAGd,KAAC,YAAD;AAAA,cAAeA;AAAf,IAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;AA6BF,eAAeD,yBAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.js"}