@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0-dev.3

package/dist/InputFields/DatepickerFieldHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerFieldHeader.cjs","names":["HeaderLabelContainer","styled","div","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","React","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"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"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAoBA,IAAMA,oBAAoB,GAAGC,yBAAA,CAAOC,GAAV,giBAcbC,cAAA,CAAOC,WAdM,EAiBtBC,gCAjBsB,EAqBXF,cAAA,CAAOG,WArBI,EAwBXH,cAAA,CAAOG,WAxBI,EA8BXH,cAAA,CAAOG,WA9BI,EAiCXH,cAAA,CAAOG,WAjCI,CAA1B;;AAsCO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,OASF;EAAA,IARjCC,IAQiC,QARjCA,IAQiC;EAAA,IAPjCC,aAOiC,QAPjCA,aAOiC;EAAA,IANjCC,aAMiC,QANjCA,aAMiC;EAAA,IALjCC,uBAKiC,QALjCA,uBAKiC;EAAA,IAJjCC,uBAIiC,QAJjCA,uBAIiC;EAAA,IAHjCC,iBAGiC,QAHjCA,iBAGiC;EAAA,IAFjCC,cAEiC,QAFjCA,cAEiC;EAAA,IADjCC,kBACiC,QADjCA,kBACiC;EACjC,IAAMC,MAAM,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,OAAxB,EAAiC,OAAjC,EAA0C,KAA1C,EAAiD,MAAjD,EAAyD,MAAzD,EAAiE,QAAjE,EAA2E,WAA3E,EAAwF,SAAxF,EAAmG,UAAnG,EAA+G,UAA/G,CAAf;;EACA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;IAChC,IAAIC,aAAa,GAAGV,IAAI,CAACW,QAAL,KAAkB,CAAtC;IACA,IAAID,aAAa,GAAG,CAApB,EAAuBA,aAAa,GAAGF,MAAM,CAACI,MAAP,GAAgB,CAAhC;IACvBL,kBAAkB,CAACG,aAAD,CAAlB;IACAT,aAAa;EACd,CALD;;EAOA,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;IAChC,IAAIC,SAAS,GAAGd,IAAI,CAACW,QAAL,KAAkB,CAAlC;IACA,IAAIG,SAAS,IAAIN,MAAM,CAACI,MAAP,GAAgB,CAAjC,EAAoCE,SAAS,GAAG,CAAZ;IACpCP,kBAAkB,CAACO,SAAD,CAAlB;IACAZ,aAAa;EACd,CALD;;EAOAa,KAAK,CAACC,SAAN,CAAgB,YAAM;IACpBT,kBAAkB,CAACP,IAAI,CAACW,QAAL,EAAD,CAAlB;EACD,CAFD,EAEG,CAACX,IAAD,CAFH;EAIA,oBACE;IAAA,uBACE;MACE,KAAK,EAAE;QACLiB,OAAO,EAAE,MADJ;QAELC,cAAc,EAAE;MAFX,CADT;MAAA,WAKG,CAACZ,cAAD,iBACC;QAAQ,SAAS,EAAC,qEAAlB;QAAwF,OAAO,EAAEG,mBAAjG;QAAsH,QAAQ,EAAEN,uBAAhI;QAAA;MAAA,EANJ,eAUE,sBAAC,oBAAD;QAAsB,OAAO,EAAE;UAAA,OAAME,iBAAiB,CAAC,CAACC,cAAF,CAAvB;QAAA,CAA/B;QAAA,wBACE;UAAK,SAAS,EAAC,iCAAf;UAAA,oBAAqDE,MAAM,CAACR,IAAI,CAACW,QAAL,EAAD,CAA3D,cAAgFX,IAAI,CAACmB,WAAL,EAAhF;QAAA,EADF,EAEGb,cAAc,gBAAG,qBAAC,wBAAD;UAAa,IAAI,EAAC;QAAlB,EAAH,gBAAiC,qBAAC,0BAAD;UAAe,IAAI,EAAC;QAApB,EAFlD;MAAA,EAVF,EAcG,CAACA,cAAD,iBACC;QAAQ,SAAS,EAAC,iEAAlB;QAAoF,OAAO,EAAEO,mBAA7F;QAAkH,QAAQ,EAAET,uBAA5H;QAAA;MAAA,EAfJ;IAAA;EADF,EADF;AAwBD,CArDM;;;;EAvDLJ,I;EAGAoB,iB;EAGAjB,uB;EACAC,uB;EAGAiB,sB;EACAC,sB;EACAhB,c"}
+{"version":3,"file":"DatepickerFieldHeader.cjs","names":["HeaderLabelContainer","styled","div","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","React","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"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"],"mappings":";;;;;;;;;;AAGA;AACA;AACA;AACA;AACA;AAAqD;AAAA;AAAA;AAAA;AAoBrD,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,giBAc1BC,cAAM,CAACC,WAAW,EAG3BC,gCAAwB,EAIbF,cAAM,CAACG,WAAW,EAGlBH,cAAM,CAACG,WAAW,EAMlBH,cAAM,CAACG,WAAW,EAGlBH,cAAM,CAACG,WAAW,CAGhC;AAEM,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OASC;EAAA,IARjCC,IAAI,QAAJA,IAAI;IACJC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IACbC,uBAAuB,QAAvBA,uBAAuB;IACvBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,cAAc,QAAdA,cAAc;IACdC,kBAAkB,QAAlBA,kBAAkB;EAElB,IAAMC,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;EACzI,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,aAAa,GAAGV,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACvC,IAAID,aAAa,GAAG,CAAC,EAAEA,aAAa,GAAGF,MAAM,CAACI,MAAM,GAAG,CAAC;IACxDL,kBAAkB,CAACG,aAAa,CAAC;IACjCT,aAAa,EAAE;EACjB,CAAC;EAED,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,SAAS,GAAGd,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACnC,IAAIG,SAAS,IAAIN,MAAM,CAACI,MAAM,GAAG,CAAC,EAAEE,SAAS,GAAG,CAAC;IACjDP,kBAAkB,CAACO,SAAS,CAAC;IAC7BZ,aAAa,EAAE;EACjB,CAAC;EAEDa,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBT,kBAAkB,CAACP,IAAI,CAACW,QAAQ,EAAE,CAAC;EACrC,CAAC,EAAE,CAACX,IAAI,CAAC,CAAC;EAEV,oBACE;IAAA,uBACE;MACE,KAAK,EAAE;QACLiB,OAAO,EAAE,MAAM;QACfC,cAAc,EAAE;MAClB,CAAE;MAAA,WACD,CAACZ,cAAc,iBACd;QAAQ,SAAS,EAAC,qEAAqE;QAAC,OAAO,EAAEG,mBAAoB;QAAC,QAAQ,EAAEN,uBAAwB;QAAA;MAAA,EAGzJ,eACD,sBAAC,oBAAoB;QAAC,OAAO,EAAE;UAAA,OAAME,iBAAiB,CAAC,CAACC,cAAc,CAAC;QAAA,CAAC;QAAA,wBACtE;UAAK,SAAS,EAAC,iCAAiC;UAAA,oBAAKE,MAAM,CAACR,IAAI,CAACW,QAAQ,EAAE,CAAC,cAAIX,IAAI,CAACmB,WAAW,EAAE;QAAA,EAAS,EAC1Gb,cAAc,gBAAG,qBAAC,wBAAW;UAAC,IAAI,EAAC;QAAM,EAAG,gBAAG,qBAAC,0BAAa;UAAC,IAAI,EAAC;QAAM,EAAG;MAAA,EACxD,EACtB,CAACA,cAAc,iBACd;QAAQ,SAAS,EAAC,iEAAiE;QAAC,OAAO,EAAEO,mBAAoB;QAAC,QAAQ,EAAET,uBAAwB;QAAA;MAAA,EAGrJ;IAAA;EACG,EACL;AAEP,CAAC;AAAC;AAAA;EA5GAJ,IAAI;EAGJoB,iBAAiB;EAGjBjB,uBAAuB;EACvBC,uBAAuB;EAGvBiB,sBAAsB;EACtBC,sBAAsB;EACtBhB,cAAc;AAAA"}

package/dist/InputFields/DatepickerFieldHeader.js

@@ -1,8 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject;
-
 /**
  * Import react libraries.
  */
@@ -17,29 +15,26 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 var HeaderLabelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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: ", ";\n  }\n\n  ", "\n\n  &:hover {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  &:active {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n"])), COLORS.neutral_600, CommonInteractionStyling, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600);
 export var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
   var date = _ref.date,
-      decreaseMonth = _ref.decreaseMonth,
-      increaseMonth = _ref.increaseMonth,
-      prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
-      nextMonthButtonDisabled = _ref.nextMonthButtonDisabled,
-      setYearPickerMode = _ref.setYearPickerMode,
-      yearPickerMode = _ref.yearPickerMode,
-      setActiveMonthPage = _ref.setActiveMonthPage;
+    decreaseMonth = _ref.decreaseMonth,
+    increaseMonth = _ref.increaseMonth,
+    prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
+    nextMonthButtonDisabled = _ref.nextMonthButtonDisabled,
+    setYearPickerMode = _ref.setYearPickerMode,
+    yearPickerMode = _ref.yearPickerMode,
+    setActiveMonthPage = _ref.setActiveMonthPage;
   var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
   var handleDecreaseMonth = function handleDecreaseMonth() {
     var previousMonth = date.getMonth() - 1;
     if (previousMonth < 0) previousMonth = months.length - 1;
     setActiveMonthPage(previousMonth);
     decreaseMonth();
   };
-
   var handleIncreaseMonth = function handleIncreaseMonth() {
     var nextMonth = date.getMonth() + 1;
     if (nextMonth >= months.length - 1) nextMonth = 0;
     setActiveMonthPage(nextMonth);
     increaseMonth();
   };
-
   React.useEffect(function () {
     setActiveMonthPage(date.getMonth());
   }, [date]);

package/dist/InputFields/DatepickerFieldHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerFieldHeader.js","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"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"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"],"mappings":"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"}
+{"version":3,"file":"DatepickerFieldHeader.js","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"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"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"],"mappings":"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"}

package/dist/InputFields/Label.cjs

@@ -1,73 +1,53 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styles = require("../styles");
-
 var _types = require("../types");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _typography = require("../styles/typography");
-
 var _icons = require("../icons");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Add component-specific styles.
 var Label = _styledComponents.default.label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
-
 var LabelRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ", "\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
-
 var LabelRowInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ", ";\n  align-items: center;\n"])), function (props) {
   return props.size === _types.Size.Small ? '2px' : '4px';
-}); // Add component-specific types
+});
 
+// Add component-specific types
 
 var InputLabel = function InputLabel(_ref) {
   var inputId = _ref.inputId,
-      text = _ref.text,
-      size = _ref.size,
-      margin = _ref.margin,
-      requiredProp = _ref.required;
-
+    text = _ref.text,
+    size = _ref.size,
+    margin = _ref.margin,
+    requiredProp = _ref.required;
   // Globally used variables within the component
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      required = _React$useState2[0],
-      setRequired = _React$useState2[1];
+    _React$useState2 = (0, _slicedToArray2.default)(_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 () {
     if (requiredProp === undefined) {
       var _document$getElementB;
-
       if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
         setRequired(true);
       } else {
@@ -79,13 +59,10 @@ var InputLabel = function InputLabel(_ref) {
    * 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$getElementB2;
-
     (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.click();
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelRow, {
     margin: margin,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelRowInner, {
@@ -104,7 +81,6 @@ var InputLabel = function InputLabel(_ref) {
     })
   });
 };
-
 InputLabel.propTypes = {
   inputId: _propTypes.default.string.isRequired,
   text: _propTypes.default.string.isRequired,

package/dist/InputFields/Label.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.cjs","names":["Label","styled","label","ComponentXXSStyling","COLORS","neutral_500","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","LabelRowInner","size","Size","Small","InputLabel","inputId","text","requiredProp","required","React","useState","setRequired","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","critical_500"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\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  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\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  required?: boolean;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp }: 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(requiredProp === undefined)\n    {\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\n        setRequired(true);\n      } else {\n        setRequired(false);\n      }\n    }\n    else\n      setRequired(Boolean(requiredProp));\n  }, []);\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      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":";;;;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,yBAAA,CAAOC,KAAV,+MACP,IAAAC,+BAAA,EAAoB,CAApB,EAAuBC,cAAA,CAAOC,WAA9B,CADO,EAGPC,mBAAA,CAAYC,MAHL,EAIL,IAAAC,8BAAA,EAAmB,CAAnB,EAAsBJ,cAAA,CAAOC,WAA7B,CAJK,EAQL,IAAAF,+BAAA,EAAoB,CAApB,EAAuBC,cAAA,CAAOC,WAA9B,CARK,EAWL,IAAAG,8BAAA,EAAmB,CAAnB,EAAsBJ,cAAA,CAAOC,WAA7B,CAXK,CAAX;;AAiBA,IAAMI,QAAQ,GAAGR,yBAAA,CAAOS,GAAV,+JAIV,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAJU,CAAd;;AAOA,IAAMC,aAAa,GAAGZ,yBAAA,CAAOS,GAAV,yLAIV,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACG,IAAN,KAAeC,WAAA,CAAKC,KAApB,GAA4B,KAA5B,GAAoC,KAAhD;AAAA,CAJU,CAAnB,C,CAQA;;;AASA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAyE;EAAA,IAAtEC,OAAsE,QAAtEA,OAAsE;EAAA,IAA7DC,IAA6D,QAA7DA,IAA6D;EAAA,IAAvDL,IAAuD,QAAvDA,IAAuD;EAAA,IAAjDF,MAAiD,QAAjDA,MAAiD;EAAA,IAA/BQ,YAA+B,QAAzCC,QAAyC;;EAC/H;EACA,sBAAgCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;EAAA;EAAA,IAAOF,QAAP;EAAA,IAAiBG,WAAjB;EAEA;AACF;AACA;;;EACEF,KAAK,CAACG,SAAN,CAAgB,YAAM;IACpB,IAAGL,YAAY,KAAKM,SAApB,EACA;MAAA;;MACE,IAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBV,OAAxB,iFAAkCW,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;QACrEL,WAAW,CAAC,IAAD,CAAX;MACD,CAFD,MAEO;QACLA,WAAW,CAAC,KAAD,CAAX;MACD;IACF,CAPD,MASEA,WAAW,CAACM,OAAO,CAACV,YAAD,CAAR,CAAX;EACH,CAXD,EAWG,EAXH;EAYA;AACF;AACA;AACA;;EACE,IAAMW,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;IAAA;;IAC3C,0BAAAL,QAAQ,CAACC,cAAT,CAAwBI,EAAxB,mFAA6BC,KAA7B;EACD,CAFD;;EAIA,oBACE,qBAAC,QAAD;IAAU,MAAM,EAAErB,MAAlB;IAAA,uBACE,sBAAC,aAAD;MAAe,IAAI,EAAEE,IAArB;MAAA,WACGO,QAAQ,iBAAI,qBAAC,kBAAD,CAAa,QAAb;QAAsB,IAAI,EAAC,MAA3B;QAAkC,KAAK,EAAEjB,cAAA,CAAO8B;MAAhD,EADf,eAEE,qBAAC,KAAD;QAAO,OAAO,EAAEhB,OAAhB;QAAyB,OAAO,EAAE;UAAA,OAAMa,cAAc,CAACb,OAAD,CAApB;QAAA,CAAlC;QAAiE,SAAS,EAAEJ,IAAI,IAAI,EAApF;QAAA,UACGK;MADH,EAFF;IAAA;EADF,EADF;AAUD,CArCD;;;EAPED,O;EACAC,I;EAEAP,M;EACAS,Q;;eA0CaJ,U"}
+{"version":3,"file":"Label.cjs","names":["Label","styled","label","ComponentXXSStyling","COLORS","neutral_500","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","LabelRowInner","size","Size","Small","InputLabel","inputId","text","requiredProp","required","React","useState","setRequired","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","critical_500"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\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  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\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  required?: boolean;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp }: 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(requiredProp === undefined)\n    {\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\n        setRequired(true);\n      } else {\n        setRequired(false);\n      }\n    }\n    else\n      setRequired(Boolean(requiredProp));\n  }, []);\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      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":";;;;;;;;;;;AAGA;AAKA;AACA;AAKA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAEvC;AACA,IAAMA,KAAK,GAAGC,yBAAM,CAACC,KAAK,+MACtB,IAAAC,+BAAmB,EAAC,CAAC,EAAEC,cAAM,CAACC,WAAW,CAAC,EAE1CC,mBAAW,CAACC,MAAM,EAChB,IAAAC,8BAAkB,EAAC,CAAC,EAAEJ,cAAM,CAACC,WAAW,CAAC,EAIzC,IAAAF,+BAAmB,EAAC,CAAC,EAAEC,cAAM,CAACC,WAAW,CAAC,EAG1C,IAAAG,8BAAkB,EAAC,CAAC,EAAEJ,cAAM,CAACC,WAAW,CAAC,CAI9C;AAED,IAAMI,QAAQ,GAAGR,yBAAM,CAACS,GAAG,+JAIvB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,MAAM,qBAAcD,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,CAC9D;AAED,IAAMC,aAAa,GAAGZ,yBAAM,CAACS,GAAG,yLAIvB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACG,IAAI,KAAKC,WAAI,CAACC,KAAK,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,CAE9D;;AAED;;AASA,IAAMC,UAA+C,GAAG,SAAlDA,UAA+C,OAA4E;EAAA,IAAtEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAEL,IAAI,QAAJA,IAAI;IAAEF,MAAM,QAANA,MAAM;IAAYQ,YAAY,QAAtBC,QAAQ;EAC9F;EACA,sBAAgCC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAvDF,QAAQ;IAAEG,WAAW;;EAE5B;AACF;AACA;EACEF,KAAK,CAACG,SAAS,CAAC,YAAM;IACpB,IAAGL,YAAY,KAAKM,SAAS,EAC7B;MAAA;MACE,IAAI,0BAAAC,QAAQ,CAACC,cAAc,CAACV,OAAO,CAAC,0DAAhC,sBAAkCW,YAAY,CAAC,UAAU,CAAC,MAAK,EAAE,EAAE;QACrEL,WAAW,CAAC,IAAI,CAAC;MACnB,CAAC,MAAM;QACLA,WAAW,CAAC,KAAK,CAAC;MACpB;IACF,CAAC,MAECA,WAAW,CAACM,OAAO,CAACV,YAAY,CAAC,CAAC;EACtC,CAAC,EAAE,EAAE,CAAC;EACN;AACF;AACA;AACA;EACE,IAAMW,cAAc,GAAG,SAAjBA,cAAc,CAAIC,EAAU,EAAW;IAAA;IAC3C,0BAAAL,QAAQ,CAACC,cAAc,CAACI,EAAE,CAAC,2DAA3B,uBAA6BC,KAAK,EAAE;EACtC,CAAC;EAED,oBACE,qBAAC,QAAQ;IAAC,MAAM,EAAErB,MAAO;IAAA,uBACvB,sBAAC,aAAa;MAAC,IAAI,EAAEE,IAAK;MAAA,WACvBO,QAAQ,iBAAI,qBAAC,kBAAW,CAAC,QAAQ;QAAC,IAAI,EAAC,MAAM;QAAC,KAAK,EAAEjB,cAAM,CAAC8B;MAAa,EAAG,eAC7E,qBAAC,KAAK;QAAC,OAAO,EAAEhB,OAAQ;QAAC,OAAO,EAAE;UAAA,OAAMa,cAAc,CAACb,OAAO,CAAC;QAAA,CAAC;QAAC,SAAS,EAAEJ,IAAI,IAAI,EAAG;QAAA,UACpFK;MAAI,EACC;IAAA;EACM,EACP;AAEf,CAAC;AAAC;EA5CAD,OAAO;EACPC,IAAI;EAEJP,MAAM;EACNS,QAAQ;AAAA;AAAA,eA0CKJ,UAAU;AAAA"}

package/dist/InputFields/Label.js

@@ -1,27 +1,26 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject, _templateObject2, _templateObject3;
-
 /**
  * Import React libraries.
  */
 import * as React from 'react';
+
 /**
  * Import custom styles.
  */
-
 import { BREAKPOINTS, COLORS } from '../styles';
 import { Size } from '../types';
+
 /**
  * Import third-party libraries.
  */
-
 import styled from 'styled-components';
 import { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
-import { SystemIcons } from '../icons'; // Add component-specific styles.
+import { SystemIcons } from '../icons';
 
+// 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\n  pointer-events: none;\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
@@ -30,29 +29,28 @@ var LabelRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplat
 });
 var LabelRowInner = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ", ";\n  align-items: center;\n"])), function (props) {
   return props.size === Size.Small ? '2px' : '4px';
-}); // Add component-specific types
+});
+
+// Add component-specific types
 
 var InputLabel = function InputLabel(_ref) {
   var inputId = _ref.inputId,
-      text = _ref.text,
-      size = _ref.size,
-      margin = _ref.margin,
-      requiredProp = _ref.required;
-
+    text = _ref.text,
+    size = _ref.size,
+    margin = _ref.margin,
+    requiredProp = _ref.required;
   // 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];
+    _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 () {
     if (requiredProp === undefined) {
       var _document$getElementB;
-
       if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
         setRequired(true);
       } else {
@@ -64,13 +62,10 @@ var InputLabel = function InputLabel(_ref) {
    * 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$getElementB2;
-
     (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.click();
   };
-
   return /*#__PURE__*/_jsx(LabelRow, {
     margin: margin,
     children: /*#__PURE__*/_jsxs(LabelRowInner, {
@@ -89,7 +84,6 @@ var InputLabel = function InputLabel(_ref) {
     })
   });
 };
-
 InputLabel.propTypes = {
   inputId: _pt.string.isRequired,
   text: _pt.string.isRequired,

package/dist/InputFields/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXSStyling","ComponentXXSStyling","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Small","InputLabel","inputId","text","requiredProp","required","useState","setRequired","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","critical_500"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\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  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\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  required?: boolean;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp }: 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(requiredProp === undefined)\n    {\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\n        setRequired(true);\n      } else {\n        setRequired(false);\n      }\n    }\n    else\n      setRequired(Boolean(requiredProp));\n  }, []);\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      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":"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"}
+{"version":3,"file":"Label.js","names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXSStyling","ComponentXXSStyling","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Small","InputLabel","inputId","text","requiredProp","required","useState","setRequired","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","critical_500"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\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  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\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  required?: boolean;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp }: 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(requiredProp === undefined)\n    {\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\n        setRequired(true);\n      } else {\n        setRequired(false);\n      }\n    }\n    else\n      setRequired(Boolean(requiredProp));\n  }, []);\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      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,MAAM,QAAQ,WAAW;AAC/C,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,sBAAsB;AAC9E,SAASC,WAAW,QAAQ,UAAU;;AAEtC;AAAA;AAAA;AACA,IAAMC,KAAK,GAAGJ,MAAM,CAACK,KAAK,iMACtBH,mBAAmB,CAAC,CAAC,EAAEJ,MAAM,CAACQ,WAAW,CAAC,EAE1CT,WAAW,CAACU,MAAM,EAChBN,kBAAkB,CAAC,CAAC,EAAEH,MAAM,CAACQ,WAAW,CAAC,EAIzCJ,mBAAmB,CAAC,CAAC,EAAEJ,MAAM,CAACQ,WAAW,CAAC,EAG1CL,kBAAkB,CAAC,CAAC,EAAEH,MAAM,CAACQ,WAAW,CAAC,CAI9C;AAED,IAAME,QAAQ,GAAGR,MAAM,CAACS,GAAG,iJAIvB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,MAAM,qBAAcD,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,CAC9D;AAED,IAAMC,aAAa,GAAGZ,MAAM,CAACS,GAAG,2KAIvB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACG,IAAI,KAAKd,IAAI,CAACe,KAAK,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,CAE9D;;AAED;;AASA,IAAMC,UAA+C,GAAG,SAAlDA,UAA+C,OAA4E;EAAA,IAAtEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAEJ,IAAI,QAAJA,IAAI;IAAEF,MAAM,QAANA,MAAM;IAAYO,YAAY,QAAtBC,QAAQ;EAC9F;EACA,sBAAgCvB,KAAK,CAACwB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAvDD,QAAQ;IAAEE,WAAW;;EAE5B;AACF;AACA;EACEzB,KAAK,CAAC0B,SAAS,CAAC,YAAM;IACpB,IAAGJ,YAAY,KAAKK,SAAS,EAC7B;MAAA;MACE,IAAI,0BAAAC,QAAQ,CAACC,cAAc,CAACT,OAAO,CAAC,0DAAhC,sBAAkCU,YAAY,CAAC,UAAU,CAAC,MAAK,EAAE,EAAE;QACrEL,WAAW,CAAC,IAAI,CAAC;MACnB,CAAC,MAAM;QACLA,WAAW,CAAC,KAAK,CAAC;MACpB;IACF,CAAC,MAECA,WAAW,CAACM,OAAO,CAACT,YAAY,CAAC,CAAC;EACtC,CAAC,EAAE,EAAE,CAAC;EACN;AACF;AACA;AACA;EACE,IAAMU,cAAc,GAAG,SAAjBA,cAAc,CAAIC,EAAU,EAAW;IAAA;IAC3C,0BAAAL,QAAQ,CAACC,cAAc,CAACI,EAAE,CAAC,2DAA3B,uBAA6BC,KAAK,EAAE;EACtC,CAAC;EAED,oBACE,KAAC,QAAQ;IAAC,MAAM,EAAEnB,MAAO;IAAA,uBACvB,MAAC,aAAa;MAAC,IAAI,EAAEE,IAAK;MAAA,WACvBM,QAAQ,iBAAI,KAAC,WAAW,CAAC,QAAQ;QAAC,IAAI,EAAC,MAAM;QAAC,KAAK,EAAErB,MAAM,CAACiC;MAAa,EAAG,eAC7E,KAAC,KAAK;QAAC,OAAO,EAAEf,OAAQ;QAAC,OAAO,EAAE;UAAA,OAAMY,cAAc,CAACZ,OAAO,CAAC;QAAA,CAAC;QAAC,SAAS,EAAEH,IAAI,IAAI,EAAG;QAAA,UACpFI;MAAI,EACC;IAAA;EACM,EACP;AAEf,CAAC;AAAC;EA5CAD,OAAO;EACPC,IAAI;EAEJN,MAAM;EACNQ,QAAQ;AAAA;AA0CV,eAAeJ,UAAU"}