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

package/dist/esm/InputFields/DatepickerFieldHeader.js.map

@@ -0,0 +1 @@
+{"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/esm/InputFields/Label.js

@@ -0,0 +1,83 @@
+import _pt from "prop-types";
+
+/**
+ * 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.
+
+const Label = styled.label`
+  ${ComponentXXSStyling(1, COLORS.neutral_500)}
+
+  ${BREAKPOINTS.MEDIUM} {
+    ${ComponentXSStyling(1, COLORS.neutral_500)}
+  }
+
+  &.small {
+    ${ComponentXXSStyling(1, COLORS.neutral_500)}
+  }
+  &.medium {
+    ${ComponentXSStyling(1, COLORS.neutral_500)}
+  }
+`;
+const LabelRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+`; // Add component-specific types
+
+const InputLabel = ({
+  inputId,
+  text,
+  size,
+  margin
+}) => {
+  // Globally used variables within the component
+  const [required, setRequired] = React.useState(false);
+  /**
+   * Checks if field is set as required and we have to mark it accordingly.
+   */
+
+  React.useEffect(() => {
+    if (document.getElementById(inputId)?.getAttribute('required') === '') {
+      setRequired(true);
+    } else {
+      setRequired(false);
+    }
+  }, [document.getElementById(inputId)?.getAttribute('required')]);
+  /**
+   * Triggers a click element on a specific element.
+   * @param id - ID of the element which needs to be clicked.
+   */
+
+  const onTriggerClick = id => {
+    document.getElementById(id)?.click();
+  };
+
+  return /*#__PURE__*/React.createElement(LabelRow, {
+    margin: margin
+  }, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: inputId,
+    onClick: () => onTriggerClick(inputId),
+    className: size || ''
+  }, text), required && /*#__PURE__*/React.createElement(RequiredStar, null, "*"));
+};
+
+InputLabel.propTypes = {
+  inputId: _pt.string.isRequired,
+  text: _pt.string.isRequired,
+  margin: _pt.string
+};
+export default InputLabel;
+//# sourceMappingURL=Label.js.map

package/dist/esm/InputFields/Label.js.map

@@ -0,0 +1 @@
+{"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","required","setRequired","useState","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,MAAMC,KAAK,GAAGH,MAAM,CAACI,KAAM;AAC3B,IAAIF,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AAC/C;AACA,IAAIR,WAAW,CAACS,MAAO;AACvB,MAAML,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA;AACA;AACA,MAAMH,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AACjD;AACA;AACA,MAAMJ,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA,CAbA;AAeA,MAAME,QAAQ,GAAGP,MAAM,CAACQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAChE,CAJA,C,CAMA;;AAQA,MAAMC,UAA+C,GAAG,CAAC;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,IAAX;AAAiBC,EAAAA,IAAjB;AAAuBJ,EAAAA;AAAvB,CAAD,KAAiD;AACvG;AACA,QAAM,CAACK,QAAD,EAAWC,WAAX,IAA0BpB,KAAK,CAACqB,QAAN,CAAwB,KAAxB,CAAhC;AAEA;AACF;AACA;;AACErB,EAAAA,KAAK,CAACsB,SAAN,CAAgB,MAAM;AACpB,QAAIC,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,GAAkCS,YAAlC,CAA+C,UAA/C,MAA+D,EAAnE,EAAuE;AACrEL,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,CAACG,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,GAAkCS,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,QAAMC,cAAc,GAAIC,EAAD,IAAsB;AAC3CJ,IAAAA,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,GAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEd;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE,MAAMU,cAAc,CAACV,OAAD,CAAtD;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGE,QAAQ,iBAAI,oBAAC,YAAD,YAJf,CADF;AAQD,CA9BD;;;AANEH,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/esm/InputFields/PasswordField.js

@@ -0,0 +1,151 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS } from '../styles';
+import { InputFieldStyling, InputWrapper } from './styling';
+const StyledPassSwitch = styled.div`
+  float: right;
+  margin-left: -40px;
+  margin-top: 8px;
+  position: relative;
+  z-index: 1;
+  height: 30px;
+  width: 30px;
+
+  ${BREAKPOINTS.MEDIUM} {
+    margin-top: 12px;
+  }
+
+  &.small {
+    margin-top: 8px;
+  }
+
+  &.medium {
+    margin-top: 12px;
+  }
+
+  svg {
+    cursor: pointer;
+  }
+  div {
+    &:focus {
+      outline: none;
+      svg {
+        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
+        border-radius: 4px;
+      }
+    }
+  }
+`;
+const PasswordRow = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const PasswordField = ({
+  id,
+  disabled,
+  locked,
+  onChange,
+  hasError,
+  value,
+  validationMessage,
+  autoComplete,
+  placeholder,
+  required,
+  readOnly,
+  size,
+  margin
+}) => {
+  const [passwordHidden, setPasswordHidden] = React.useState(true);
+  const inputRef = React.useRef(null);
+  const [tabbedHere, setTabbedHere] = React.useState(false);
+
+  const handleKeyDown = e => {
+    if (e.keyCode === 13) {
+      setPasswordHidden(!passwordHidden);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputWrapper, {
+    disabled: disabled,
+    locked: locked,
+    margin: margin,
+    tabIndex: disabled ? -1 : 0,
+    onFocus: e => {
+      if (!e?.target?.id.includes(id) && !disabled && !locked) {
+        setTabbedHere(true);
+        inputRef.current.focus();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'block'
+    }
+  }, /*#__PURE__*/React.createElement(PasswordRow, null, /*#__PURE__*/React.createElement(InputFieldStyling, {
+    id: id,
+    ref: inputRef,
+    type: passwordHidden ? 'password' : 'text',
+    name: "password",
+    value: value,
+    className: (hasError ? 'error' : '').concat(size ? size : ''),
+    tabIndex: -1,
+    autoComplete: autoComplete,
+    placeholder: placeholder,
+    disabled: disabled,
+    locked: locked,
+    required: required,
+    readOnly: readOnly,
+    onChange: e => onChange && onChange(e?.target?.value || ''),
+    tabbedHere: tabbedHere,
+    onBlur: () => setTabbedHere(false)
+  }), /*#__PURE__*/React.createElement(StyledPassSwitch, {
+    className: size ? size : ''
+  }, !disabled && !locked ? passwordHidden ? /*#__PURE__*/React.createElement("div", {
+    id: `${id}_Visible`,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    onClick: () => setPasswordHidden(!passwordHidden)
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 25 25",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z",
+    fill: "#666666"
+  }))) : /*#__PURE__*/React.createElement("div", {
+    id: `${id}_NotVisible`,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    onClick: () => setPasswordHidden(!passwordHidden)
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 25 25",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z",
+    fill: "#666666"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z",
+    fill: "#666666"
+  }))) : null)))), validationMessage && /*#__PURE__*/React.createElement("span", {
+    className: "error-msg"
+  }, 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/esm/InputFields/PasswordField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["React","styled","BREAKPOINTS","InputFieldStyling","InputWrapper","StyledPassSwitch","div","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","passwordHidden","setPasswordHidden","useState","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","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';\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  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\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        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\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={-1}\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              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\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/esm/InputFields/QuickSearch.js

@@ -0,0 +1,178 @@
+import _pt from "prop-types";
+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';
+const QuickSearchField = styled(StyledSearchField)`
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;
+  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;
+
+  background-color: transparent;
+  &.small {
+    width: 48px;
+  }
+
+  &.medium {
+    width: 56px;
+  }
+  
+  &.expanded{
+    width: 100%;
+    background-color: ${COLORS.white};
+  }
+
+  input {
+    ::placeholder {
+      font-style: italic;
+      color: ${COLORS.neutral_600};
+    }
+  }
+
+  box-shadow: ${props => props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important'};
+
+  &:hover {
+    box-shadow: ${props => props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important'};
+  }
+`;
+
+const QuickSearch = ({
+  id,
+  searchTerm,
+  setSearchTerm,
+  enterSearch,
+  removeSearch,
+  placeholder,
+  performSearchLabel,
+  disabled,
+  onKeyDown,
+  size,
+  margin,
+  loading
+}) => {
+  const searchFieldRef = React.useRef(null);
+  const searchFieldInputRef = React.useRef(null);
+  const [searchFieldVisible, setSearchFieldVisible] = React.useState(false);
+  const [tabbedHere, setTabbedHere] = React.useState(false);
+
+  const handleClickOutside = e => {
+    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {
+      if (searchFieldVisible && !searchTerm?.length) {
+        setSearchFieldVisible(false);
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    if (searchTerm?.length) {
+      setSearchFieldVisible(true);
+    }
+  }, [searchTerm]);
+  React.useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+  React.useEffect(() => {
+    if (searchFieldVisible) {
+      searchFieldInputRef?.current?.focus();
+    }
+  }, [searchFieldVisible, searchFieldInputRef, id]);
+
+  const handleKeyDown = e => {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+
+    if (e.key === 'Escape') {
+      if (searchFieldVisible && !searchTerm?.length) {
+        setSearchFieldVisible(false);
+      }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(QuickSearchField, {
+    ref: searchFieldRef,
+    expanded: searchFieldVisible,
+    id: `${id}_main`,
+    onBlur: event => {
+      if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {
+        setSearchFieldVisible(false);
+      }
+    },
+    "data-testid": `${id}_main`,
+    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat(searchFieldVisible ? ' expanded' : ''),
+    tabbedHere: tabbedHere,
+    tabIndex: -1,
+    margin: margin
+  }, searchFieldVisible && /*#__PURE__*/React.createElement(SearchBarInput, {
+    placeholder: disabled ? '' : placeholder,
+    id: id,
+    ref: searchFieldInputRef,
+    disabled: disabled,
+    onKeyDown: handleKeyDown,
+    size: size,
+    setTabbedHere: setTabbedHere,
+    setSearchTerm: term => setSearchTerm(term),
+    searchTerm: searchTerm,
+    enterSearch: enterSearch
+  }), /*#__PURE__*/React.createElement(SearchIconWrapper, {
+    className: size ? size : '',
+    role: "button",
+    "aria-label": performSearchLabel,
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    id: `${id}_Searchbutton`,
+    variant: "secondary",
+    shape: "circular",
+    tabIndex: searchFieldVisible ? -1 : 0,
+    action: e => searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true)
+  }, /*#__PURE__*/React.createElement(SearchIcon, {
+    size: "24px",
+    color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+  }))), /*#__PURE__*/React.createElement(StyledIcon, {
+    className: size ? size : '',
+    role: "button",
+    tabIndex: -1,
+    hidden: searchTerm === '' || searchTerm === undefined || !searchFieldVisible
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    id: `${id}_Clearicon`,
+    variant: "secondary",
+    shape: "circular",
+    action: e => {
+      removeSearch(e);
+      searchFieldInputRef?.current?.focus();
+    }
+  }, /*#__PURE__*/React.createElement(ClearIcon, {
+    size: "24px",
+    color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+  }))), loading && searchFieldVisible && /*#__PURE__*/React.createElement(StyledIcon, {
+    className: size ? size : '',
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(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/esm/InputFields/QuickSearch.js.map

@@ -0,0 +1 @@
+{"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","searchFieldVisible","setSearchFieldVisible","useState","tabbedHere","setTabbedHere","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  const [tabbedHere, setTabbedHere] = 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      tabbedHere={tabbedHere}\n      tabIndex={-1}\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          setTabbedHere={setTabbedHere}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\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 ? false : true))}>\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/esm/InputFields/RadioButton.js

@@ -0,0 +1,185 @@
+import _pt from "prop-types";
+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';
+const StyledRadioButton = styled.div`
+  display: flex;
+  width: 100%;
+  min-height: 48px;
+  min-width: 48px;
+
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+  cursor: pointer;
+ 
+  color: ${COLORS.black};
+
+  .pointerTransparent {
+    pointer-events: none;
+  }
+
+  .radio-button-icon {
+    margin: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 36px;
+    min-width: 36px;
+    border-radius: 50%;
+
+    svg {
+      color: ${props => props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600};
+    }
+  }
+
+  .radio-button-label {
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+
+    label{
+      cursor: inherit;
+    }
+
+    span {
+      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}
+    }
+  }
+
+  &.small {
+    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .radio-button-label {
+      padding-top: 14px;
+    }
+  }
+
+  &.medium {
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .radio-button-label {
+      padding-top: 12px;
+    }
+  }
+
+  &.large {
+    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}
+    .radio-button-label {
+      padding-top: 12px;
+    }
+  }
+
+  &:not(.disabled):focus {
+    outline: none;
+
+    .radio-button-icon {
+      background-color: ${COLORS.white};
+      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
+
+      svg {
+        color: ${COLORS.neutral_600};
+      }
+    }
+  }
+
+  &:not(.disabled):hover {
+    .radio-button-icon {
+      background-color: ${COLORS.primary_20};
+
+      svg {
+        color: ${COLORS.primary_700};
+      }
+    }
+  }
+
+  &:not(.disabled):active {
+    .radio-button-icon {
+      background: ${COLORS.primary_100};
+      box-shadow: none;
+
+      svg {
+        color: ${COLORS.primary_800};
+      }
+    }
+  }
+
+  &.disabled {
+    box-shadow: none;
+    cursor: not-allowed;
+
+    color: ${COLORS.neutral_300};
+
+    .radio-button-icon,
+    .radio-button-label {
+      pointer-events: none;
+    }
+
+    .radio-button-icon{
+      background-color: ${COLORS.white};
+    }
+    
+    .radio-button-icon svg {
+      color: ${COLORS.neutral_300};
+    }
+  }
+`;
+const RadioButton = /*#__PURE__*/React.forwardRef(({
+  id,
+  selected,
+  label,
+  additionalLabel,
+  showWarning,
+  select,
+  disabled,
+  margin,
+  iconPointerEventsTransparent,
+  size
+}, ref) => {
+  const onKeyPress = e => {
+    if (e.keyCode === 13 && !disabled) {
+      select(!selected);
+    }
+  };
+
+  size = size ?? Size.Medium;
+  return /*#__PURE__*/React.createElement(StyledRadioButton, {
+    key: id,
+    margin: margin,
+    ref: ref,
+    onClick: () => !disabled && select(!selected),
+    onMouseDown: e => e.preventDefault(),
+    onKeyDown: onKeyPress,
+    disabled: disabled,
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    tabIndex: disabled ? -1 : 0,
+    showWarning: showWarning,
+    selected: selected
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'radio-button-icon',
+    id: id
+  }, selected && /*#__PURE__*/React.createElement(RadioButtonOn, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+    size: "24px"
+  }), !selected && /*#__PURE__*/React.createElement(RadioButtonOff, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+    size: "24px"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: 'radio-button-label'
+  }, label && /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));
+});
+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