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

package/dist/InputFields/DatepickerFieldHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerFieldHeader.cjs","names":["React","_interopRequireWildcard","require","_icons","_styledComponents","_interopRequireDefault","_common","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HeaderLabelContainer","styled","div","props","COLORS","getColor","theme","CommonInteractionStyling","DatepickerFieldHeader","_ref","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","jsx","Fragment","children","jsxs","style","display","justifyContent","type","className","onClick","disabled","getFullYear","SystemIcons","ArrowDropUp","size","ArrowDropDown","exports","propTypes","_propTypes","instanceOf","Date","isRequired","customHeaderCount","number","bool","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DatepickerFieldHeader.cjs","names":["React","_interopRequireWildcard","require","_icons","_styledComponents","_interopRequireDefault","_common","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HeaderLabelContainer","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","CommonInteractionStyling","state","DatepickerFieldHeader","_ref","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","jsx","Fragment","children","jsxs","style","display","justifyContent","type","className","onClick","disabled","getFullYear","SystemIcons","ArrowDropUp","size","ArrowDropDown","exports","propTypes","_propTypes","instanceOf","Date","isRequired","customHeaderCount","number","bool","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/DatepickerFieldHeader.js

@@ -22,26 +22,41 @@ const HeaderLabelContainer = styled.div`
   }
 
   svg {
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   ${CommonInteractionStyling}
 
   &:hover {
     div {
-      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)} !important;
     }
     svg {
-      color: ${props => COLORS.getColor('primary_600', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
     }
   }
 
   &:active {
     div {
-      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)} !important;
     }
     svg {
-      color: ${props => COLORS.getColor('primary_600', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
     }
   }
 `;

package/dist/InputFields/DatepickerFieldHeader.js.map

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

package/dist/InputFields/Label.cjs

@@ -29,17 +29,21 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // Add component-specific styles.
 const Label = _styledComponents.default.label`
-  ${props => (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  ${props => (0, _typography.ComponentXXSStyling)(1, null)}
 
   ${_styles.BREAKPOINTS.MEDIUM} {
-    ${props => (0, _typography.ComponentXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (0, _typography.ComponentXSStyling)(1, null)}
   }
 
   &.small {
-    ${props => (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (0, _typography.ComponentXXSStyling)(1, null)}
   }
   &.medium {
-    ${props => (0, _typography.ComponentXSStyling)(1, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (0, _typography.ComponentXSStyling)(1, null)}
   }
 
   pointer-events: none;
@@ -56,7 +60,11 @@ const CopyContainer = _styledComponents.default.div`
   &:visited:not(.disabled) {
     ${_typography.TypographyBase}
     {
-      color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
     }
   }
 
@@ -64,7 +72,10 @@ const CopyContainer = _styledComponents.default.div`
   &.hover-state:not(.disabled) {
     ${_typography.TypographyBase}
     {
-      color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
       text-decoration-line: underline;
     }
   }
@@ -73,7 +84,10 @@ const CopyContainer = _styledComponents.default.div`
   &.focus-state:not(.disabled) {
     ${_typography.TypographyBase}
     {
-      color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
       background-color: white;
       text-decoration-line: underline;
     }
@@ -83,7 +97,10 @@ const CopyContainer = _styledComponents.default.div`
   &.active-state:not(.disabled) {
     ${_typography.TypographyBase}
     {
-      color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
       background-color: white;
       text-decoration-line: underline;
     }
@@ -98,7 +115,10 @@ const CopyContainer = _styledComponents.default.div`
       text-decoration-style: solid;
       text-decoration-line: none;
       font-weight: 700;
-      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
 
@@ -111,7 +131,11 @@ const CopyContainer = _styledComponents.default.div`
       text-decoration-style: solid;
       text-decoration-line: none;
       font-weight: 700;
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary',
+  state: 'disabled'
+}, props.theme)};
     }
   }
   cursor: pointer;
@@ -187,7 +211,10 @@ const InputLabel = _ref => {
         children: text
       }), required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Asterisk, {
         size: "16px",
-        color: _styles.COLORS.getColor('critical_500', theme)
+        color: _styles.COLORS.generateToken({
+          componentType: 'icon',
+          defaultVariant: 'critical'
+        }, theme)
       }), showCopyButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyContainer, {
         className: copyState != CopyState.Available ? "disabled" : "",
         onClick: copyInputClick,

package/dist/InputFields/Label.cjs.map

@@ -1 +1 @@
-{"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":[]}
+{"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","COLORS","generateToken","componentType","defaultVariant","theme","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","CopyContainer","TypographyBase","state","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  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n  ${props => ComponentXXSStyling(1, null)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentXSStyling(1, null)}\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentXXSStyling(1, null)}\r\n  }\r\n  &.medium {\r\n    ${props => ComponentXSStyling(1, null)}\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.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'active' }, 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.generateToken({componentType:'text-link', defaultVariant: 'primary' }, 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.generateToken({componentType:'text-link', defaultVariant: 'primary' }, 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.generateToken({componentType:'text-link', defaultVariant: 'primary' }, 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.generateToken({componentType:'text-link', defaultVariant: 'primary' }, 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.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'disabled' }, 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.generateToken({ componentType:'icon', defaultVariant:'critical' }, theme)} />}\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.js

@@ -20,17 +20,21 @@ import { SystemIcons } from '../icons';
 // Add component-specific styles.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Label = styled.label`
-  ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  ${props => ComponentXXSStyling(1, null)}
 
   ${BREAKPOINTS.MEDIUM} {
-    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}
+    ${props => ComponentXSStyling(1, null)}
   }
 
   &.small {
-    ${props => ComponentXXSStyling(1, COLORS.getColor('neutral_500', props.theme))}
+    ${props => ComponentXXSStyling(1, null)}
   }
   &.medium {
-    ${props => ComponentXSStyling(1, COLORS.getColor('neutral_500', props.theme))}
+    ${props => ComponentXSStyling(1, null)}
   }
 
   pointer-events: none;
@@ -47,7 +51,11 @@ const CopyContainer = styled.div`
   &:visited:not(.disabled) {
     ${TypographyBase}
     {
-      color: ${props => COLORS.getColor('primary_800', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
     }
   }
 
@@ -55,7 +63,10 @@ const CopyContainer = styled.div`
   &.hover-state:not(.disabled) {
     ${TypographyBase}
     {
-      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
       text-decoration-line: underline;
     }
   }
@@ -64,7 +75,10 @@ const CopyContainer = styled.div`
   &.focus-state:not(.disabled) {
     ${TypographyBase}
     {
-      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
       background-color: white;
       text-decoration-line: underline;
     }
@@ -74,7 +88,10 @@ const CopyContainer = styled.div`
   &.active-state:not(.disabled) {
     ${TypographyBase}
     {
-      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
       background-color: white;
       text-decoration-line: underline;
     }
@@ -89,7 +106,10 @@ const CopyContainer = styled.div`
       text-decoration-style: solid;
       text-decoration-line: none;
       font-weight: 700;
-      color: ${props => COLORS.getColor('primary_600', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
 
@@ -102,7 +122,11 @@ const CopyContainer = styled.div`
       text-decoration-style: solid;
       text-decoration-line: none;
       font-weight: 700;
-      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary',
+  state: 'disabled'
+}, props.theme)};
     }
   }
   cursor: pointer;
@@ -178,7 +202,10 @@ const InputLabel = _ref => {
         children: text
       }), required && /*#__PURE__*/_jsx(SystemIcons.Asterisk, {
         size: "16px",
-        color: COLORS.getColor('critical_500', theme)
+        color: COLORS.generateToken({
+          componentType: 'icon',
+          defaultVariant: 'critical'
+        }, theme)
       }), showCopyButton && /*#__PURE__*/_jsx(CopyContainer, {
         className: copyState != CopyState.Available ? "disabled" : "",
         onClick: copyInputClick,

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","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":[]}
+{"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","generateToken","componentType","defaultVariant","theme","MEDIUM","LabelRow","div","CopyContainer","state","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  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n  ${props => ComponentXXSStyling(1, null)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentXSStyling(1, null)}\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentXXSStyling(1, null)}\r\n  }\r\n  &.medium {\r\n    ${props => ComponentXSStyling(1, null)}\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.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'active' }, 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.generateToken({componentType:'text-link', defaultVariant: 'primary' }, 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.generateToken({componentType:'text-link', defaultVariant: 'primary' }, 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.generateToken({componentType:'text-link', defaultVariant: 'primary' }, 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.generateToken({componentType:'text-link', defaultVariant: 'primary' }, 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.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'disabled' }, 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.generateToken({ componentType:'icon', defaultVariant:'critical' }, theme)} />}\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/NumberField.cjs

@@ -29,7 +29,13 @@ const Container = _styledComponents.default.div``;
 const PrefixContainer = _styledComponents.default.div`
   width: ${props => props.$size === _types.Size.Small ? '10px' : '11px'};
   height: ${props => props.$size === _types.Size.Small ? '20px' : '24px'};
-  color: ${props => props.$disabled ? _styles.COLORS.getColor('neutral_300', props.theme) : _styles.COLORS.getColor('neutral_500', props.theme)};
+  color: ${props => props.$disabled ? _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   ${props => props.$size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null)}
   position: absolute;
   padding: ${props => props.$size === _types.Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px'};
@@ -48,7 +54,10 @@ const OperatorWrapper = _styledComponents.default.div`
 
   .divider {
     margin: 16px 0;
-    background: ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
     width: 1px;
   }
 `;
@@ -57,11 +66,23 @@ const NumberInput = _styledComponents.default.input`
   border: none;
   border-radius: 4px;
   text-overflow: ellipsis;
-  box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_400', props.theme)};
+  box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
   outline: none;
-  color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
-  ${props => props.$fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+  ${props => props.$fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   ${props => props.$type === 'NumberField' ? `
         padding: ${props.$fieldSize === _types.Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px'};
         padding-left: ${props.$hasPrefix ? '30px' : ''};
@@ -74,7 +95,10 @@ const NumberInput = _styledComponents.default.input`
   }
 
   &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &.focus-visible {
@@ -82,35 +106,61 @@ const NumberInput = _styledComponents.default.input`
   }
 
   &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &.disabled {
-    box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     cursor: not-allowed;
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     pointer-events: none;
 
     &::placeholder {
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
   &.readOnly {
-    background: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
-    box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)};
+    box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
     cursor: not-allowed;
-    background: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
     pointer-events: none;
-    color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &.valid {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('correct_400', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'positive'
+}, props.theme)};
   }
 
   &.invalid {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('critical_400', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
 `;
 const InputContainer = _styledComponents.default.div`