@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/InputFields/Label.cjs

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("../styles");
@@ -14,23 +13,116 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _typography = require("../styles/typography");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * Import React libraries.
  */
+
 /**
  * Import custom styles.
  */
+
 /**
  * Import third-party libraries.
  */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+
 // Add component-specific styles.
-const 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"])), props => (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme)), _styles.BREAKPOINTS.MEDIUM, props => (0, _typography.ComponentXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme)), props => (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme)), props => (0, _typography.ComponentXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme)));
-const LabelRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"])));
-const CopyContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), _typography.TypographyBase, props => _styles.COLORS.getColor('primary_800', props.theme), _typography.TypographyBase, props => _styles.COLORS.getColor('primary_700', props.theme), _typography.TypographyBase, props => _styles.COLORS.getColor('primary_700', props.theme), _typography.TypographyBase, props => _styles.COLORS.getColor('primary_700', props.theme), _typography.TypographyBase, props => _styles.COLORS.getColor('primary_600', props.theme), _typography.TypographyBase, props => _styles.COLORS.getColor('neutral_300', props.theme));
-const LabelRowInner = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"])));
+const Label = _styledComponents.default.label`
+  ${props => (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    ${props => (0, _typography.ComponentXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
+  }
+
+  &.small {
+    ${props => (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
+  }
+  &.medium {
+    ${props => (0, _typography.ComponentXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
+  }
+
+  pointer-events: none;
+`;
+const LabelRow = _styledComponents.default.div`
+  display: flex;
+  align-items: flex-start;
+  height: 16px;
+  margin-bottom: 4px;
+`;
+const CopyContainer = _styledComponents.default.div`
+  margin-left: auto;
+
+  &:visited:not(.disabled) {
+    ${_typography.TypographyBase}
+    {
+      color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    }
+  }
+
+  &:hover:not(.disabled),
+  &.hover-state:not(.disabled) {
+    ${_typography.TypographyBase}
+    {
+      color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      text-decoration-line: underline;
+    }
+  }
+
+  &:focus:not(.disabled),
+  &.focus-state:not(.disabled) {
+    ${_typography.TypographyBase}
+    {
+      color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      background-color: white;
+      text-decoration-line: underline;
+    }
+  }
+
+  &:active:not(.disabled),
+  &.active-state:not(.disabled) {
+    ${_typography.TypographyBase}
+    {
+      color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      background-color: white;
+      text-decoration-line: underline;
+    }
+  }
+
+  &:not(.disabled)
+  {
+    ${_typography.TypographyBase}
+    {
+      outline: none;
+      padding: 2px 0;
+      text-decoration-style: solid;
+      text-decoration-line: none;
+      font-weight: 700;
+      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
+    }
+  }
+
+  &.disabled
+  {
+    ${_typography.TypographyBase}
+    {
+      outline: none;
+      padding: 2px 0;
+      text-decoration-style: solid;
+      text-decoration-line: none;
+      font-weight: 700;
+      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    }
+  }
+  cursor: pointer;
+`;
+const LabelRowInner = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+`;
 
 // Add component-specific types
 var CopyState = /*#__PURE__*/function (CopyState) {
@@ -58,8 +150,7 @@ const InputLabel = _ref => {
    */
   React.useEffect(() => {
     if (requiredProp === undefined) {
-      var _document$getElementB;
-      if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
+      if (document.getElementById(inputId)?.getAttribute('required') === '') {
         setRequired(true);
       } else {
         setRequired(false);
@@ -71,14 +162,12 @@ const InputLabel = _ref => {
    * @param id - ID of the element which needs to be clicked.
    */
   const onTriggerClick = id => {
-    var _document$getElementB2;
-    (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 || _document$getElementB2.click();
+    document.getElementById(id)?.click();
   };
   const copyInputClick = e => {
-    var _document$getElementB3;
     e.preventDefault();
     if (copyState == CopyState.Copied) return;
-    const val = (_document$getElementB3 = document.getElementById(inputId)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.value;
+    const val = document.getElementById(inputId)?.value;
     if (val) {
       window.navigator.clipboard.writeText(val);
       setCopyState(CopyState.Copied);

package/dist/InputFields/Label.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.cjs","names":["React","_interopRequireWildcard","require","_styles","_types","_styledComponents","_typography","_icons","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Label","styled","label","_taggedTemplateLiteral2","props","ComponentXXSStyling","COLORS","getColor","theme","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","CopyContainer","TypographyBase","LabelRowInner","CopyState","InputLabel","_ref","inputId","text","size","margin","required","requiredProp","showCopyButton","useTheme","setRequired","useState","copyState","setCopyState","Available","useEffect","undefined","_document$getElementB","document","getElementById","getAttribute","Boolean","onTriggerClick","id","_document$getElementB2","click","copyInputClick","_document$getElementB3","preventDefault","Copied","val","value","window","navigator","clipboard","writeText","setTimeout","jsx","$margin","children","jsxs","$size","htmlFor","onClick","className","SystemIcons","Asterisk","color","Size","Medium","ComponentXS","ComponentXXS","propTypes","_propTypes","string","isRequired","bool","_default","exports"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';\r\nimport { SystemIcons } from '../icons';\r\nimport {HyperLink, StyledLink} from '../HyperLink';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n  &.medium {\r\n    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  pointer-events: none;\r\n`;\r\n\r\nconst LabelRow = styled.div<{ $margin?: string }>`\r\n  display: flex;\r\n  align-items: flex-start;\r\n  height: 16px;\r\n  margin-bottom: 4px;\r\n`;\r\n\r\nconst CopyContainer = styled.div`\r\n  margin-left: auto;\r\n\r\n  &:visited:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled),\r\n  &.hover-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled),\r\n  &.focus-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled),\r\n  &.active-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled)\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n  cursor: pointer;\r\n`;\r\n\r\nconst LabelRowInner = styled.div<{ $size: Size.Small | Size.Medium | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: 100%;\r\n  height: 100%;\r\n  align-items: center;\r\n`;\r\n\r\n// Add component-specific types\r\nexport type LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  required?: boolean;\r\n  showCopyButton?: boolean;\r\n};\r\n\r\nenum CopyState {\r\n  Disabled = 0,\r\n  Available = 1,\r\n  Copied = 2\r\n}\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp, showCopyButton }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const theme = useTheme();\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.Available);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if(requiredProp === undefined)\r\n    {\r\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n        setRequired(true);\r\n      } else {\r\n        setRequired(false);\r\n      }\r\n    }\r\n    else\r\n      setRequired(Boolean(requiredProp));\r\n  }, []);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  const copyInputClick = (e: any) => {\r\n    e.preventDefault();\r\n    if(copyState == CopyState.Copied)\r\n      return;\r\n    \r\n    const val = (document.getElementById(inputId) as HTMLInputElement)?.value;\r\n    if(val)\r\n    {\r\n      window.navigator.clipboard.writeText(val);\r\n      setCopyState(CopyState.Copied);\r\n      setTimeout(() => {\r\n        setCopyState(CopyState.Available);\r\n      }, 1000);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <LabelRow $margin={margin}>\r\n      <LabelRowInner $size={size}>\r\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n          {text}\r\n        </Label>\r\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.getColor('critical_500', theme)} />}\r\n\r\n        {showCopyButton && \r\n        <CopyContainer className={copyState != CopyState.Available ? \"disabled\" : \"\"} onClick={copyInputClick}>\r\n          { size == Size.Medium ? <ComponentXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXS> :\r\n          <ComponentXXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXXS> }\r\n        </CopyContainer> }\r\n      </LabelRowInner>\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Label.cjs","names":["React","_interopRequireWildcard","require","_styles","_types","_styledComponents","_typography","_icons","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Label","styled","label","props","ComponentXXSStyling","COLORS","getColor","theme","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","CopyContainer","TypographyBase","LabelRowInner","CopyState","InputLabel","_ref","inputId","text","size","margin","required","requiredProp","showCopyButton","useTheme","setRequired","useState","copyState","setCopyState","Available","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","copyInputClick","preventDefault","Copied","val","value","window","navigator","clipboard","writeText","setTimeout","jsx","$margin","children","jsxs","$size","htmlFor","onClick","className","SystemIcons","Asterisk","color","Size","Medium","ComponentXS","ComponentXXS","propTypes","_propTypes","string","isRequired","bool","_default","exports"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';\r\nimport { SystemIcons } from '../icons';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n  &.medium {\r\n    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  pointer-events: none;\r\n`;\r\n\r\nconst LabelRow = styled.div<{ $margin?: string }>`\r\n  display: flex;\r\n  align-items: flex-start;\r\n  height: 16px;\r\n  margin-bottom: 4px;\r\n`;\r\n\r\nconst CopyContainer = styled.div`\r\n  margin-left: auto;\r\n\r\n  &:visited:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled),\r\n  &.hover-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled),\r\n  &.focus-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled),\r\n  &.active-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled)\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n  cursor: pointer;\r\n`;\r\n\r\nconst LabelRowInner = styled.div<{ $size: Size.Small | Size.Medium | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: 100%;\r\n  height: 100%;\r\n  align-items: center;\r\n`;\r\n\r\n// Add component-specific types\r\nexport type LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  required?: boolean;\r\n  showCopyButton?: boolean;\r\n};\r\n\r\nenum CopyState {\r\n  Disabled = 0,\r\n  Available = 1,\r\n  Copied = 2\r\n}\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp, showCopyButton }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const theme = useTheme();\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.Available);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if(requiredProp === undefined)\r\n    {\r\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n        setRequired(true);\r\n      } else {\r\n        setRequired(false);\r\n      }\r\n    }\r\n    else\r\n      setRequired(Boolean(requiredProp));\r\n  }, []);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  const copyInputClick = (e: any) => {\r\n    e.preventDefault();\r\n    if(copyState == CopyState.Copied)\r\n      return;\r\n    \r\n    const val = (document.getElementById(inputId) as HTMLInputElement)?.value;\r\n    if(val)\r\n    {\r\n      window.navigator.clipboard.writeText(val);\r\n      setCopyState(CopyState.Copied);\r\n      setTimeout(() => {\r\n        setCopyState(CopyState.Available);\r\n      }, 1000);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <LabelRow $margin={margin}>\r\n      <LabelRowInner $size={size}>\r\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n          {text}\r\n        </Label>\r\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.getColor('critical_500', theme)} />}\r\n\r\n        {showCopyButton && \r\n        <CopyContainer className={copyState != CopyState.Available ? \"disabled\" : \"\"} onClick={copyInputClick}>\r\n          { size == Size.Medium ? <ComponentXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXS> :\r\n          <ComponentXXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXXS> }\r\n        </CopyContainer> }\r\n      </LabelRowInner>\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Label.d.ts

@@ -1,15 +1,15 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-export type LabelProps = {
-    inputId: string;
-    text: string;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-    required?: boolean;
-    showCopyButton?: boolean;
-};
-declare const InputLabel: React.FunctionComponent<LabelProps>;
-export default InputLabel;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+export type LabelProps = {
+    inputId: string;
+    text: string;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+    required?: boolean;
+    showCopyButton?: boolean;
+};
+declare const InputLabel: React.FunctionComponent<LabelProps>;
+export default InputLabel;

package/dist/InputFields/Label.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /**
  * Import React libraries.
  */
@@ -18,12 +16,104 @@ import { Size } from '../types';
 import styled, { useTheme } from 'styled-components';
 import { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';
 import { SystemIcons } from '../icons';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 // Add component-specific styles.
-const 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"])), props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme)), BREAKPOINTS.MEDIUM, props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme)), props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme)), props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme)));
-const LabelRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"])));
-const CopyContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), TypographyBase, props => COLORS.getColor('primary_800', props.theme), TypographyBase, props => COLORS.getColor('primary_700', props.theme), TypographyBase, props => COLORS.getColor('primary_700', props.theme), TypographyBase, props => COLORS.getColor('primary_700', props.theme), TypographyBase, props => COLORS.getColor('primary_600', props.theme), TypographyBase, props => COLORS.getColor('neutral_300', props.theme));
-const LabelRowInner = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"])));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Label = styled.label`
+  ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}
+
+  ${BREAKPOINTS.MEDIUM} {
+    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}
+  }
+
+  &.small {
+    ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}
+  }
+  &.medium {
+    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}
+  }
+
+  pointer-events: none;
+`;
+const LabelRow = styled.div`
+  display: flex;
+  align-items: flex-start;
+  height: 16px;
+  margin-bottom: 4px;
+`;
+const CopyContainer = styled.div`
+  margin-left: auto;
+
+  &:visited:not(.disabled) {
+    ${TypographyBase}
+    {
+      color: ${props => COLORS.getColor('primary_800', props.theme)};
+    }
+  }
+
+  &:hover:not(.disabled),
+  &.hover-state:not(.disabled) {
+    ${TypographyBase}
+    {
+      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      text-decoration-line: underline;
+    }
+  }
+
+  &:focus:not(.disabled),
+  &.focus-state:not(.disabled) {
+    ${TypographyBase}
+    {
+      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      background-color: white;
+      text-decoration-line: underline;
+    }
+  }
+
+  &:active:not(.disabled),
+  &.active-state:not(.disabled) {
+    ${TypographyBase}
+    {
+      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      background-color: white;
+      text-decoration-line: underline;
+    }
+  }
+
+  &:not(.disabled)
+  {
+    ${TypographyBase}
+    {
+      outline: none;
+      padding: 2px 0;
+      text-decoration-style: solid;
+      text-decoration-line: none;
+      font-weight: 700;
+      color: ${props => COLORS.getColor('primary_600', props.theme)};
+    }
+  }
+
+  &.disabled
+  {
+    ${TypographyBase}
+    {
+      outline: none;
+      padding: 2px 0;
+      text-decoration-style: solid;
+      text-decoration-line: none;
+      font-weight: 700;
+      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    }
+  }
+  cursor: pointer;
+`;
+const LabelRowInner = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+`;
 
 // Add component-specific types
 var CopyState = /*#__PURE__*/function (CopyState) {
@@ -51,8 +141,7 @@ const InputLabel = _ref => {
    */
   React.useEffect(() => {
     if (requiredProp === undefined) {
-      var _document$getElementB;
-      if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
+      if (document.getElementById(inputId)?.getAttribute('required') === '') {
         setRequired(true);
       } else {
         setRequired(false);
@@ -64,14 +153,12 @@ const InputLabel = _ref => {
    * @param id - ID of the element which needs to be clicked.
    */
   const onTriggerClick = id => {
-    var _document$getElementB2;
-    (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 || _document$getElementB2.click();
+    document.getElementById(id)?.click();
   };
   const copyInputClick = e => {
-    var _document$getElementB3;
     e.preventDefault();
     if (copyState == CopyState.Copied) return;
-    const val = (_document$getElementB3 = document.getElementById(inputId)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.value;
+    const val = document.getElementById(inputId)?.value;
     if (val) {
       window.navigator.clipboard.writeText(val);
       setCopyState(CopyState.Copied);

package/dist/InputFields/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["React","BREAKPOINTS","COLORS","Size","styled","useTheme","ComponentXS","ComponentXSStyling","ComponentXXS","ComponentXXSStyling","TypographyBase","SystemIcons","jsx","_jsx","jsxs","_jsxs","Label","label","_templateObject","_taggedTemplateLiteral","props","getColor","theme","MEDIUM","LabelRow","div","_templateObject2","CopyContainer","_templateObject3","LabelRowInner","_templateObject4","CopyState","InputLabel","_ref","inputId","text","size","margin","required","requiredProp","showCopyButton","setRequired","useState","copyState","setCopyState","Available","useEffect","undefined","_document$getElementB","document","getElementById","getAttribute","Boolean","onTriggerClick","id","_document$getElementB2","click","copyInputClick","e","_document$getElementB3","preventDefault","Copied","val","value","window","navigator","clipboard","writeText","setTimeout","$margin","children","$size","htmlFor","onClick","className","Asterisk","color","Medium","propTypes","_pt","string","isRequired","bool"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';\r\nimport { SystemIcons } from '../icons';\r\nimport {HyperLink, StyledLink} from '../HyperLink';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n  &.medium {\r\n    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  pointer-events: none;\r\n`;\r\n\r\nconst LabelRow = styled.div<{ $margin?: string }>`\r\n  display: flex;\r\n  align-items: flex-start;\r\n  height: 16px;\r\n  margin-bottom: 4px;\r\n`;\r\n\r\nconst CopyContainer = styled.div`\r\n  margin-left: auto;\r\n\r\n  &:visited:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled),\r\n  &.hover-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled),\r\n  &.focus-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled),\r\n  &.active-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled)\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n  cursor: pointer;\r\n`;\r\n\r\nconst LabelRowInner = styled.div<{ $size: Size.Small | Size.Medium | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: 100%;\r\n  height: 100%;\r\n  align-items: center;\r\n`;\r\n\r\n// Add component-specific types\r\nexport type LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  required?: boolean;\r\n  showCopyButton?: boolean;\r\n};\r\n\r\nenum CopyState {\r\n  Disabled = 0,\r\n  Available = 1,\r\n  Copied = 2\r\n}\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp, showCopyButton }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const theme = useTheme();\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.Available);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if(requiredProp === undefined)\r\n    {\r\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n        setRequired(true);\r\n      } else {\r\n        setRequired(false);\r\n      }\r\n    }\r\n    else\r\n      setRequired(Boolean(requiredProp));\r\n  }, []);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  const copyInputClick = (e: any) => {\r\n    e.preventDefault();\r\n    if(copyState == CopyState.Copied)\r\n      return;\r\n    \r\n    const val = (document.getElementById(inputId) as HTMLInputElement)?.value;\r\n    if(val)\r\n    {\r\n      window.navigator.clipboard.writeText(val);\r\n      setCopyState(CopyState.Copied);\r\n      setTimeout(() => {\r\n        setCopyState(CopyState.Available);\r\n      }, 1000);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <LabelRow $margin={margin}>\r\n      <LabelRowInner $size={size}>\r\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n          {text}\r\n        </Label>\r\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.getColor('critical_500', theme)} />}\r\n\r\n        {showCopyButton && \r\n        <CopyContainer className={copyState != CopyState.Available ? \"disabled\" : \"\"} onClick={copyInputClick}>\r\n          { size == Size.Medium ? <ComponentXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXS> :\r\n          <ComponentXXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXXS> }\r\n        </CopyContainer> }\r\n      </LabelRowInner>\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Label.js","names":["React","BREAKPOINTS","COLORS","Size","styled","useTheme","ComponentXS","ComponentXSStyling","ComponentXXS","ComponentXXSStyling","TypographyBase","SystemIcons","jsx","_jsx","jsxs","_jsxs","Label","label","props","getColor","theme","MEDIUM","LabelRow","div","CopyContainer","LabelRowInner","CopyState","InputLabel","_ref","inputId","text","size","margin","required","requiredProp","showCopyButton","setRequired","useState","copyState","setCopyState","Available","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","copyInputClick","e","preventDefault","Copied","val","value","window","navigator","clipboard","writeText","setTimeout","$margin","children","$size","htmlFor","onClick","className","Asterisk","color","Medium","propTypes","_pt","string","isRequired","bool"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';\r\nimport { SystemIcons } from '../icons';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n  &.medium {\r\n    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  pointer-events: none;\r\n`;\r\n\r\nconst LabelRow = styled.div<{ $margin?: string }>`\r\n  display: flex;\r\n  align-items: flex-start;\r\n  height: 16px;\r\n  margin-bottom: 4px;\r\n`;\r\n\r\nconst CopyContainer = styled.div`\r\n  margin-left: auto;\r\n\r\n  &:visited:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled),\r\n  &.hover-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled),\r\n  &.focus-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled),\r\n  &.active-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled)\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n  cursor: pointer;\r\n`;\r\n\r\nconst LabelRowInner = styled.div<{ $size: Size.Small | Size.Medium | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: 100%;\r\n  height: 100%;\r\n  align-items: center;\r\n`;\r\n\r\n// Add component-specific types\r\nexport type LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  required?: boolean;\r\n  showCopyButton?: boolean;\r\n};\r\n\r\nenum CopyState {\r\n  Disabled = 0,\r\n  Available = 1,\r\n  Copied = 2\r\n}\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp, showCopyButton }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const theme = useTheme();\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.Available);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if(requiredProp === undefined)\r\n    {\r\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n        setRequired(true);\r\n      } else {\r\n        setRequired(false);\r\n      }\r\n    }\r\n    else\r\n      setRequired(Boolean(requiredProp));\r\n  }, []);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  const copyInputClick = (e: any) => {\r\n    e.preventDefault();\r\n    if(copyState == CopyState.Copied)\r\n      return;\r\n    \r\n    const val = (document.getElementById(inputId) as HTMLInputElement)?.value;\r\n    if(val)\r\n    {\r\n      window.navigator.clipboard.writeText(val);\r\n      setCopyState(CopyState.Copied);\r\n      setTimeout(() => {\r\n        setCopyState(CopyState.Available);\r\n      }, 1000);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <LabelRow $margin={margin}>\r\n      <LabelRowInner $size={size}>\r\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n          {text}\r\n        </Label>\r\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.getColor('critical_500', theme)} />}\r\n\r\n        {showCopyButton && \r\n        <CopyContainer className={copyState != CopyState.Available ? \"disabled\" : \"\"} onClick={copyInputClick}>\r\n          { size == Size.Medium ? <ComponentXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXS> :\r\n          <ComponentXXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXXS> }\r\n        </CopyContainer> }\r\n      </LabelRowInner>\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"mappings":"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","ignoreList":[]}