@laerdal/life-react-components 6.0.0-dev.2 → 6.0.0-dev.20.full

package/dist/InputFields/styling.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.readOnlyState = exports.activeErrorMessageState = exports.Warning = exports.ValidationStyling = exports.ValidationMessage = exports.StyledIcon = exports.SearchIconWrapper = exports.NoteMessage = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
+exports.readOnlyState = exports.activeErrorMessageState = exports.Warning = exports.ValidationMessage = exports.StyledIcon = exports.SearchIconWrapper = exports.NoteMessage = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
 var _TooltipStyles = require("../Tooltips/TooltipStyles");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styles = require("../styles");
@@ -21,15 +21,27 @@ const InputWrapper = exports.InputWrapper = _styledComponents.default.div`
 
 `;
 const readOnlyState = exports.readOnlyState = (0, _styledComponents.css)`
-  background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
-  box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
-  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)} !important;
+  background-color: ${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)} !important;
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)} !important;
   pointer-events: none;
   outline: none;
   cursor: not-allowed;
 `;
 const activeErrorMessageState = exports.activeErrorMessageState = (0, _styledComponents.css)`
-  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 InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.input`
   height: 48px;
@@ -42,10 +54,22 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
   ${props => props.$withoutBorder ? `-webkit-box-shadow: none;
       -moz-box-shadow: none;
       box-shadow: none;
-      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.getColor('neutral_400', props.theme)};
-      -moz-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.getColor('neutral_400', props.theme)};
-      box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.getColor('neutral_400', props.theme)};`}
-  background-color: #fff;
+      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
+      -moz-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
+      box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};`}
+  background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   box-sizing: border-box;
   padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;
   text-overflow: ellipsis;
@@ -57,7 +81,10 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
   font-size: 16px;
 
   &::placeholder {
-    ${props => (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   ${_styles.BREAKPOINTS.MEDIUM} {
@@ -67,7 +94,10 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
     padding: 0 16px !important;
 
     &::placeholder {
-      ${props => (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+      ${props => (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
@@ -86,7 +116,9 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
     }
   }
 
-  color: ${props => _styles.COLORS.getColor('black', props.theme)} !important;
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text'
+}, props.theme)} !important;
 
   ${props => props.$activeErrorMessage ? activeErrorMessageState : ''}
 
@@ -95,15 +127,25 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
   }
 
   &:disabled {
-    border: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    border: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     pointer-events: none;
     box-shadow: none !important;
     outline: none;
     cursor: not-allowed;
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
   }
+
   &:focus:not(.focus-visible) {
-    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
 
   &.focus-visible {
@@ -111,10 +153,16 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
   }
 
   &.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)};
   }
   &.valid {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('correct_500', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'positive'
+}, props.theme)};
   }
 
   &:not(.placeholder) {
@@ -122,11 +170,17 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
   }
 
   &:hover {
-    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &.active {
-    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
   }
 
   &.show-checkmark.valid {
@@ -137,22 +191,6 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
     background-image: none;
   }
 `;
-const ValidationStyling = exports.ValidationStyling = (0, _styledComponents.css)`
-  &.error-msg {
-    ${props => (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
-    text-align: center;
-    font-weight: 400;
-    box-sizing: border-box;
-  }
-
-  &.error-msg {
-    padding-top: 8px;
-    padding-bottom: 0;
-    ${(0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468')}
-    font-weight: 700;
-    line-height: 15px;
-  }
-`;
 const Warning = exports.Warning = _styledComponents.default.div`
   display: flex;
   align-items: center;
@@ -197,19 +235,37 @@ const Warning = exports.Warning = _styledComponents.default.div`
   }
 `;
 const ErrorMessage = exports.ErrorMessage = (0, _styledComponents.default)(Warning)`
-  color: ${props => _styles.COLORS.getColor('critical_500', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical'
+}, props.theme)};
 `;
 const getStateColor = (type, theme) => {
-  if (type === _types.States.Valid) return _styles.COLORS.getColor('correct_500', theme);else if (type === _types.States.Default) return _styles.COLORS.getColor('neutral_500', theme);else return _styles.COLORS.getColor('critical_500', theme);
+  if (type === _types.States.Valid) return _styles.COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'positive'
+  }, theme);else if (type === _types.States.Default) return _styles.COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'default'
+  }, theme);else return _styles.COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'critical'
+  }, theme);
 };
 const ValidationMessage = exports.ValidationMessage = (0, _styledComponents.default)(Warning)`
   color: ${props => getStateColor(props.type, props.theme)};
 `;
 const NoteMessage = exports.NoteMessage = (0, _styledComponents.default)(Warning)`
-  color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
 `;
 const AutofilledMessage = exports.AutofilledMessage = (0, _styledComponents.default)(Warning)`
-  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 `;
 const StyledIcon = exports.StyledIcon = _styledComponents.default.div`
   border-radius: 50%;

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","exports","styled","div","props","$readOnly","$disabled","$margin","TooltipTrigger","readOnlyState","css","COLORS","getColor","theme","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","$extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","$activeErrorMessage","$suppressReadOnlyStyles","focusStyles","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","getStateColor","type","States","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $withoutBorder?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.$withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}\r\n  background-color: #fff;\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.getColor('correct_500', theme);\r\n  else if (type === States.Default)\r\n    return COLORS.getColor('neutral_500', theme);\r\n  else \r\n    return COLORS.getColor('critical_500', theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nexport { ValidationStyling, InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","exports","styled","div","props","$readOnly","$disabled","$margin","TooltipTrigger","readOnlyState","css","COLORS","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","$extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","$activeErrorMessage","$suppressReadOnlyStyles","focusStyles","Warning","ComponentXXSStyling","Regular","ComponentXSStyling","ErrorMessage","getStateColor","type","States","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $withoutBorder?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.$withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n  else if (type === States.Default)\r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n  else \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/styling.d.ts

@@ -14,7 +14,6 @@ declare const InputFieldStyling: import("styled-components/dist/types").IStyledC
     $suppressReadOnlyStyles?: boolean;
     $extraRightPadding?: number;
 }>> & string;
-declare const ValidationStyling: import("styled-components").RuleSet<object>;
 export declare const Warning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
 export declare const ValidationMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, {
@@ -22,6 +21,6 @@ export declare const ValidationMessage: import("styled-components/dist/types").I
 }>> & string;
 export declare const NoteMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
 export declare const AutofilledMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
-export { ValidationStyling, InputFieldStyling };
+export { InputFieldStyling };
 export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const SearchIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;

package/dist/InputFields/styling.js

@@ -13,15 +13,27 @@ export const InputWrapper = styled.div`
 
 `;
 export const readOnlyState = css`
-  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
-  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;
-  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)};
+  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)} !important;
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)} !important;
   pointer-events: none;
   outline: none;
   cursor: not-allowed;
 `;
 export const activeErrorMessageState = css`
-  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};
+  box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
 `;
 const InputFieldStyling = styled.input`
   height: 48px;
@@ -34,10 +46,22 @@ const InputFieldStyling = styled.input`
   ${props => props.$withoutBorder ? `-webkit-box-shadow: none;
       -moz-box-shadow: none;
       box-shadow: none;
-      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};
-      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};
-      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}
-  background-color: #fff;
+      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
+      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
+      box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};`}
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   box-sizing: border-box;
   padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;
   text-overflow: ellipsis;
@@ -49,7 +73,10 @@ const InputFieldStyling = styled.input`
   font-size: 16px;
 
   &::placeholder {
-    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   ${BREAKPOINTS.MEDIUM} {
@@ -59,7 +86,10 @@ const InputFieldStyling = styled.input`
     padding: 0 16px !important;
 
     &::placeholder {
-      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
@@ -78,7 +108,9 @@ const InputFieldStyling = styled.input`
     }
   }
 
-  color: ${props => COLORS.getColor('black', props.theme)} !important;
+  color: ${props => COLORS.generateToken({
+  componentType: 'text'
+}, props.theme)} !important;
 
   ${props => props.$activeErrorMessage ? activeErrorMessageState : ''}
 
@@ -87,15 +119,25 @@ const InputFieldStyling = styled.input`
   }
 
   &:disabled {
-    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+    border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     pointer-events: none;
     box-shadow: none !important;
     outline: none;
     cursor: not-allowed;
-    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
   }
+
   &:focus:not(.focus-visible) {
-    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
 
   &.focus-visible {
@@ -103,10 +145,16 @@ const InputFieldStyling = styled.input`
   }
 
   &.invalid {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
   &.valid {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'positive'
+}, props.theme)};
   }
 
   &:not(.placeholder) {
@@ -114,11 +162,17 @@ const InputFieldStyling = styled.input`
   }
 
   &:hover {
-    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &.active {
-    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
   }
 
   &.show-checkmark.valid {
@@ -129,22 +183,6 @@ const InputFieldStyling = styled.input`
     background-image: none;
   }
 `;
-const ValidationStyling = css`
-  &.error-msg {
-    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
-    text-align: center;
-    font-weight: 400;
-    box-sizing: border-box;
-  }
-
-  &.error-msg {
-    padding-top: 8px;
-    padding-bottom: 0;
-    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}
-    font-weight: 700;
-    line-height: 15px;
-  }
-`;
 export const Warning = styled.div`
   display: flex;
   align-items: center;
@@ -189,21 +227,39 @@ export const Warning = styled.div`
   }
 `;
 export const ErrorMessage = styled(Warning)`
-  color: ${props => COLORS.getColor('critical_500', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical'
+}, props.theme)};
 `;
 const getStateColor = (type, theme) => {
-  if (type === States.Valid) return COLORS.getColor('correct_500', theme);else if (type === States.Default) return COLORS.getColor('neutral_500', theme);else return COLORS.getColor('critical_500', theme);
+  if (type === States.Valid) return COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'positive'
+  }, theme);else if (type === States.Default) return COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'default'
+  }, theme);else return COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'critical'
+  }, theme);
 };
 export const ValidationMessage = styled(Warning)`
   color: ${props => getStateColor(props.type, props.theme)};
 `;
 export const NoteMessage = styled(Warning)`
-  color: ${props => COLORS.getColor('neutral_500', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
 `;
 export const AutofilledMessage = styled(Warning)`
-  color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 `;
-export { ValidationStyling, InputFieldStyling };
+export { InputFieldStyling };
 export const StyledIcon = styled.div`
   border-radius: 50%;
 `;

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","$readOnly","$disabled","$margin","readOnlyState","getColor","theme","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","$extraRightPadding","Italic","MEDIUM","$activeErrorMessage","$suppressReadOnlyStyles","ValidationStyling","Regular","Warning","ErrorMessage","getStateColor","type","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $withoutBorder?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.$withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}\r\n  background-color: #fff;\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.getColor('correct_500', theme);\r\n  else if (type === States.Default)\r\n    return COLORS.getColor('neutral_500', theme);\r\n  else \r\n    return COLORS.getColor('critical_500', theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nexport { ValidationStyling, InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","$readOnly","$disabled","$margin","readOnlyState","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","$extraRightPadding","Italic","MEDIUM","$activeErrorMessage","$suppressReadOnlyStyles","Warning","Regular","ErrorMessage","getStateColor","type","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $withoutBorder?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.$withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n  else if (type === States.Default)\r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n  else \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,2BAA2B;AAC1D,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAQ,WAAW;AAC5D,SAASC,mBAAmB,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AACxI,SAAcC,MAAM,QAAO,UAAU;AAErC,OAAO,MAAMC,YAAY,GAAGX,MAAM,CAACY,GAAmE;AACtG;AACA,IAAKC,KAAK,IAAMA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,SAAS,GAAG,sBAAsB,GAAG,EAAG;AACjF,IAAKF,KAAK,IAAMA,KAAK,CAACG,OAAO,GAAG,WAAWH,KAAK,CAACG,OAAO,GAAG,GAAG,EAAG;AACjE;AACA;AACA,IAAIjB,cAAc,CAAC,OAAO,CAAC;AAC3B;AACA,CAAC;AAED,OAAO,MAAMkB,aAAa,GAAGhB,GAAG;AAChC,sBAAsBY,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEC,KAAK,EAAC;AAAU,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAChH,gCAAgCR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEG,cAAc,EAAC;AAAS,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AAC9H,WAAWR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEG,cAAc,EAAC;AAAQ,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACvG;AACA;AACA;AACA,CAAC;AACD,OAAO,MAAME,uBAAuB,GAAGtB,GAAG;AAC1C,gCAAgCY,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAAEC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAW,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACnI,CAAC;AAED,MAAMG,iBAAiB,GAAGxB,MAAM,CAACyB,KAO/B;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKZ,KAAK,IACNA,KAAK,CAACa,cAAc,GAChB;AACR;AACA;AACA,OAAO,GACC,6CAA6CvB,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAS,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AAC5I,+CAA+ClB,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAS,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACtI,0CAA0ClB,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAS,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC,GAAG;AACpI,sBAAsBR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AAC5H;AACA,eAAeR,KAAK,IAAI,EAAE,IAAIA,KAAK,CAACc,kBAAkB,IAAI,CAAC,CAAC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMd,KAAK,IAAIN,iBAAiB,CAACD,kBAAkB,CAACsB,MAAM,EAAEzB,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,cAAc,EAAE;AAAQ,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC,CAAC;AAChJ;AACA;AACA,IAAInB,WAAW,CAAC2B,MAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,KAAK,IAAIL,iBAAiB,CAACF,kBAAkB,CAACsB,MAAM,EAAEzB,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,cAAc,EAAE;AAAQ,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC,CAAC;AAClJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAWR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE;AAAM,CAAC,EAAEN,KAAK,CAACQ,KAAK,CAAC;AAC9E;AACA,IAAKR,KAAK,IAAMA,KAAK,CAACiB,mBAAmB,GAAGP,uBAAuB,GAAG,EAAG;AACzE;AACA;AACA,MAAOV,KAAK,IAAMA,KAAK,CAACkB,uBAAuB,GAAG,EAAE,GAAGd,aAAc;AACrE;AACA;AACA;AACA,wBAAwBJ,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEC,KAAK,EAAE;AAAU,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAChH;AACA;AACA;AACA;AACA,aAAaR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAU,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AACnG;AACA;AACA;AACA,wCAAwCR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACzI;AACA;AACA;AACA,MAAMjB,WAAW;AACjB;AACA;AACA;AACA,kCAAkCS,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACnI;AACA;AACA,kCAAkCR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACnI;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwCR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEC,KAAK,EAAE;AAAO,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAC7H;AACA;AACA;AACA,wCAAwCR,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEC,KAAK,EAAE;AAAQ,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAC9H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMW,OAAO,GAAGhC,MAAM,CAACY,GAAG;AACjC;AACA;AACA;AACA,IAAIP,mBAAmB,CAACC,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA,IAAI/B,WAAW,CAAC2B,MAAM;AACtB,MAAMpB,kBAAkB,CAACH,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM5B,mBAAmB,CAACC,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA,MAAMxB,kBAAkB,CAACH,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,OAAO,MAAMC,YAAY,GAAGlC,MAAM,CAACgC,OAAO,CAAC;AAC3C,WAAWnB,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACzG,CAAC;AAED,MAAMc,aAAa,GAAGA,CAACC,IAAY,EAAEf,KAAU,KAAK;EAClD,IAAGe,IAAI,KAAK1B,MAAM,CAAC2B,KAAK,EACtB,OAAOlC,MAAM,CAACe,aAAa,CAAC;IAACC,aAAa,EAAE,MAAM;IAAEG,cAAc,EAAE;EAAU,CAAC,EAAED,KAAK,CAAC,CAAC,KACrF,IAAIe,IAAI,KAAK1B,MAAM,CAAC4B,OAAO,EAC9B,OAAOnC,MAAM,CAACe,aAAa,CAAC;IAACC,aAAa,EAAE,MAAM;IAAEG,cAAc,EAAE;EAAS,CAAC,EAAED,KAAK,CAAC,CAAC,KAEvF,OAAOlB,MAAM,CAACe,aAAa,CAAC;IAACC,aAAa,EAAE,MAAM;IAAEG,cAAc,EAAE;EAAU,CAAC,EAAED,KAAK,CAAC;AAC3F,CAAC;AAED,OAAO,MAAMkB,iBAAiB,GAAGvC,MAAM,CAACgC,OAAO,CAA0D;AACzG,WAAYnB,KAAK,IAAKsB,aAAa,CAACtB,KAAK,CAACuB,IAAI,EAAEvB,KAAK,CAACQ,KAAK,CAAC;AAC5D,CAAC;AAED,OAAO,MAAMmB,WAAW,GAAGxC,MAAM,CAACgC,OAAO,CAAC;AAC1C,WAAWnB,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEG,cAAc,EAAE;AAAS,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACzG,CAAC;AACD,OAAO,MAAMoB,iBAAiB,GAAGzC,MAAM,CAACgC,OAAO,CAAC;AAChD,WAAWnB,KAAK,IAAIV,MAAM,CAACe,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEG,cAAc,EAAE;AAAQ,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACxG,CAAC;AAED,SAASG,iBAAiB;AAE1B,OAAO,MAAMkB,UAAU,GAAG1C,MAAM,CAACY,GAAG;AACpC;AACA,CAAC;AAED,OAAO,MAAM+B,iBAAiB,GAAG3C,MAAM,CAAC0C,UAAU,CAAC;AACnD;AACA;AACA,CAAC","ignoreList":[]}