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

package/dist/InputFields/Textarea.cjs

@@ -39,30 +39,51 @@ const TextareaWrapper = _styledComponents.default.div`
 `;
 const TextArea = _styledComponents.default.textarea`
   display: block;
-  background: ${props => _styles.COLORS.getColor('white', props.theme)};
+  background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 4px;
   outline: none;
   margin-bottom: 4px;
   padding: 16px;
   border: none;
-  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)};
 
   resize: ${props => props.$autoHeight ? 'none' : ''};
 
-  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   &.small {
-    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     width: 304px;
 
     &::placeholder {
-      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
-    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     &::placeholder {
-      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
     width: 344px;
   }
@@ -76,19 +97,31 @@ const TextArea = _styledComponents.default.textarea`
   }
 
   &.invalid {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('critical_500', 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)};
   }
 
   &:hover {
-    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)};
   }
 
   &.active {
-    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: 'active'
+}, props.theme)};
   }
 
   &:read-only:not(:disabled) {
@@ -97,17 +130,29 @@ const TextArea = _styledComponents.default.textarea`
 
   &:disabled {
     cursor: not-allowed;
-    border: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    border: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     box-shadow: none !important;
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
 
     &::placeholder {
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
   &::placeholder {
-    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 `;
 const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -148,9 +193,15 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       className: size || '',
       type: state ?? _types.States.Invalid,
       children: [state === _types.States.Valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.CheckMark, {
-        color: _styles.COLORS.getColor('correct_400', theme)
+        color: _styles.COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'positive'
+        }, theme)
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
-        color: _styles.COLORS.getColor('critical_400', theme)
+        color: _styles.COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'critical'
+        }, theme)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage
       })]

package/dist/InputFields/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","names":["React","_interopRequireWildcard","require","_styles","_styling","_types","_icons","_styledComponents","_common","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextareaWrapper","styled","div","props","$margin","TextArea","textarea","COLORS","getColor","theme","$autoHeight","ComponentMStyling","ComponentTextStyle","Regular","ComponentSStyling","Italic","focusStyles","readOnlyState","Textarea","forwardRef","_ref","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","useTheme","useImperativeHandle","current","cls","States","Invalid","jsxs","children","jsx","undefined","target","ValidationMessage","type","Valid","SystemIcons","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","_default","exports"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\r\nimport { States } from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { SystemIcons } from '../icons';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\r\nimport { TextareaProps, TextFieldNote } from './types';\r\nimport {useFocusVisibleRef} from \"../common\";\r\n\r\n// Add component-specific styles.\r\nconst TextareaWrapper = styled.div<{ $margin?: string }>`\r\n  width: 100%;\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\nconst TextArea = styled.textarea<{ $autoHeight?: boolean }>`\r\n  display: block;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 4px;\r\n  outline: none;\r\n  margin-bottom: 4px;\r\n  padding: 16px;\r\n  border: none;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n\r\n  resize: ${(props) => (props.$autoHeight ? 'none' : '')};\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    width: 304px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n    width: 344px;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0 0 0 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_500', props.theme)};\r\n  }\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  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${readOnlyState}\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    box-shadow: none !important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n\r\n    &::placeholder {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n`;\r\n\r\nconst Textarea = React.forwardRef<any, TextareaProps>(({\r\n  id,\r\n  placeholder,\r\n  state,\r\n  value,\r\n  size,\r\n  disabled,\r\n  validationMessage,\r\n  onChange,\r\n  margin,\r\n  autoHeight,\r\n  note,\r\n  required,\r\n  className,\r\n  dataTestId,\r\n  ...rest\r\n}: TextareaProps, ref) => {\r\n\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\r\n  return (\r\n    <TextareaWrapper>\r\n      <TextArea\r\n        id={id}\r\n        data-testid={dataTestId}\r\n        ref={elementRef}\r\n        value={value}\r\n        placeholder={disabled ? undefined : placeholder}\r\n        $autoHeight={autoHeight}\r\n        className={cls}\r\n        disabled={disabled}\r\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n        required={required}\r\n        {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.getColor('correct_400', theme)} /> : <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} />}\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </TextareaWrapper>\r\n  );\r\n});\r\n\r\nexport default Textarea;\r\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAMA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AAKA,IAAAK,iBAAA,GAAAN,uBAAA,CAAAC,OAAA;AAGA,IAAAM,OAAA,GAAAN,OAAA;AAA6C,IAAAO,WAAA,GAAAP,OAAA;AAAA,MAAAQ,SAAA;AAxB7C;AACA;AACA;AAIA;AACA;AACA;AAKA;AACA;AACA;AAGA;AACA;AACA;AAMA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AACA,MAAMkC,eAAe,GAAGC,yBAAM,CAACC,GAAyB;AACxD;AACA,IAAKC,KAAK,IAAMA,KAAK,CAACC,OAAO,GAAG,WAAWD,KAAK,CAACC,OAAO,GAAG,GAAG,EAAG;AACjE,CAAC;AACD,MAAMC,QAAQ,GAAGJ,yBAAM,CAACK,QAAmC;AAC3D;AACA,gBAAgBH,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA,gCAAgCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACpF;AACA,YAAaN,KAAK,IAAMA,KAAK,CAACO,WAAW,GAAG,MAAM,GAAG,EAAG;AACxD;AACA,IAAIP,KAAK,IAAI,IAAAQ,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEN,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACjG;AACA,MAAMN,KAAK,IAAI,IAAAW,yBAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAEN,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACnG;AACA;AACA;AACA,QAAQN,KAAK,IAAI,IAAAW,yBAAiB,EAACF,0BAAkB,CAACG,MAAM,EAAER,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AAC1G;AACA;AACA;AACA;AACA,MAAMN,KAAK,IAAI,IAAAQ,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEN,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACnG;AACA,QAAQN,KAAK,IAAI,IAAAQ,yBAAiB,EAACC,0BAAkB,CAACG,MAAM,EAAER,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AAC1G;AACA;AACA;AACA;AACA;AACA,kCAAkCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACtF;AACA;AACA;AACA,MAAMO,mBAAW;AACjB;AACA;AACA;AACA,kCAAkCb,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEL,KAAK,CAACM,KAAK,CAAC;AACvF;AACA;AACA;AACA,kCAAkCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACtF;AACA;AACA;AACA,kCAAkCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACtF;AACA;AACA;AACA,kCAAkCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACtF;AACA;AACA;AACA,MAAMQ,sBAAa;AACnB;AACA;AACA;AACA;AACA,wBAAwBd,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC5E;AACA,aAAaN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACjE;AACA;AACA,eAAeN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA,MAAMN,KAAK,IAAI,IAAAQ,yBAAiB,EAACC,0BAAkB,CAACG,MAAM,EAAER,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACxG;AACA,CAAC;AAED,MAAMS,QAAQ,gBAAGhE,KAAK,CAACiE,UAAU,CAAqB,CAAAC,IAAA,EAgBpCC,GAAG,KAAK;EAAA,IAhB6B;MACrDC,EAAE;MACFC,WAAW;MACXC,KAAK;MACLC,KAAK;MACLC,IAAI;MACJC,QAAQ;MACRC,iBAAiB;MACjBC,QAAQ;MACRC,MAAM;MACNC,UAAU;MACVC,IAAI;MACJC,QAAQ;MACRC,SAAS;MACTC;IAEa,CAAC,GAAAf,IAAA;IADXgB,IAAI,OAAAC,yBAAA,CAAAlE,OAAA,EAAAiD,IAAA,EAAAxD,SAAA;EAGP,MAAM0E,UAAU,GAAG,IAAAC,0BAAkB,EAAC,CAAC;EACvC,MAAM9B,KAAK,GAAG,IAAA+B,0BAAQ,EAAC,CAAC;EAExBtF,KAAK,CAACuF,mBAAmB,CAACpB,GAAG,EAAE,MAAMiB,UAAU,CAACI,OAAO,EAAE,CAACJ,UAAU,CAAC,CAAC;EAEtE,MAAMK,GAAG,GAAG,GAAGjB,IAAI,IAAIF,KAAK,KAAKI,iBAAiB,GAAGgB,aAAM,CAACC,OAAO,GAAG,EAAE,CAAC,IAAIX,SAAS,IAAI,EAAE,EAAE;EAC9F,oBACE,IAAAvE,WAAA,CAAAmF,IAAA,EAAC9C,eAAe;IAAA+C,QAAA,gBACd,IAAApF,WAAA,CAAAqF,GAAA,EAAC3C,QAAQ,EAAAZ,aAAA;MACP6B,EAAE,EAAEA,EAAG;MACP,eAAaa,UAAW;MACxBd,GAAG,EAAEiB,UAAW;MAChBb,KAAK,EAAEA,KAAM;MACbF,WAAW,EAAEI,QAAQ,GAAGsB,SAAS,GAAG1B,WAAY;MAChDb,WAAW,EAAEqB,UAAW;MACxBG,SAAS,EAAES,GAAI;MACfhB,QAAQ,EAAEA,QAAS;MACnBE,QAAQ,EAAG/D,CAAM,IAAK+D,QAAQ,IAAIA,QAAQ,CAAC/D,CAAC,EAAEoF,MAAM,EAAEzB,KAAK,IAAI,EAAE,CAAE;MACnEQ,QAAQ,EAAEA;IAAS,GACfG,IAAI,CACT,CAAC,EACDR,iBAAiB,iBAChB,IAAAjE,WAAA,CAAAmF,IAAA,EAACxF,QAAA,CAAA6F,iBAAiB;MAACjB,SAAS,EAAER,IAAI,IAAI,EAAG;MAAC0B,IAAI,EAAE5B,KAAK,IAAIoB,aAAM,CAACC,OAAQ;MAAAE,QAAA,GACrEvB,KAAK,KAAKoB,aAAM,CAACS,KAAK,gBAAG,IAAA1F,WAAA,CAAAqF,GAAA,EAACxF,MAAA,CAAA8F,WAAW,CAACC,SAAS;QAACC,KAAK,EAAEjD,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK;MAAE,CAAE,CAAC,gBAAG,IAAA9C,WAAA,CAAAqF,GAAA,EAACxF,MAAA,CAAA8F,WAAW,CAACG,gBAAgB;QAACD,KAAK,EAAEjD,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEC,KAAK;MAAE,CAAE,CAAC,eACnL,IAAA9C,WAAA,CAAAqF,GAAA;QAAAD,QAAA,EAAOnB;MAAiB,CAAO,CAAC;IAAA,CACf,CACpB,EACAI,IAAI,IAAI,CAACL,QAAQ,iBAChB,IAAAhE,WAAA,CAAAmF,IAAA,EAACxF,QAAA,CAAAoG,WAAW;MAACxB,SAAS,EAAER,IAAK;MAAAqB,QAAA,GAC1Bf,IAAI,CAAC2B,IAAI,eACV,IAAAhG,WAAA,CAAAqF,GAAA;QAAAD,QAAA,EAAOf,IAAI,CAAC4B;MAAO,CAAO,CAAC;IAAA,CAChB,CACd;EAAA,CACc,CAAC;AAEtB,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3F,OAAA,GAEY+C,QAAQ","ignoreList":[]}
+{"version":3,"file":"Textarea.cjs","names":["React","_interopRequireWildcard","require","_styles","_styling","_types","_icons","_styledComponents","_common","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextareaWrapper","styled","div","props","$margin","TextArea","textarea","COLORS","generateToken","componentType","defaultVariant","theme","$autoHeight","ComponentMStyling","ComponentTextStyle","Regular","ComponentSStyling","Italic","getColor","focusStyles","state","readOnlyState","Textarea","forwardRef","_ref","ref","id","placeholder","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","useTheme","useImperativeHandle","current","cls","States","Invalid","jsxs","children","jsx","undefined","target","ValidationMessage","type","Valid","SystemIcons","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","_default","exports"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\r\nimport { States } from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { SystemIcons } from '../icons';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\r\nimport { TextareaProps, TextFieldNote } from './types';\r\nimport {useFocusVisibleRef} from \"../common\";\r\n\r\n// Add component-specific styles.\r\nconst TextareaWrapper = styled.div<{ $margin?: string }>`\r\n  width: 100%;\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\nconst TextArea = styled.textarea<{ $autoHeight?: boolean }>`\r\n  display: block;\r\n  background: ${props => COLORS.generateToken({ componentType:'bg-surface', defaultVariant:'default' }, props.theme)};\r\n  border-radius: 4px;\r\n  outline: none;\r\n  margin-bottom: 4px;\r\n  padding: 16px;\r\n  border: none;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'default' }, props.theme)};\r\n\r\n  resize: ${(props) => (props.$autoHeight ? 'none' : '')};\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n    width: 304px;\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\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n    }\r\n    width: 344px;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0 0 0 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.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n  }\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  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', state: 'hover' }, props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${readOnlyState}\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    border: 1px solid ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)};\r\n    box-shadow: none !important;\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)} !important;\r\n\r\n    &::placeholder {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\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\nconst Textarea = React.forwardRef<any, TextareaProps>(({\r\n  id,\r\n  placeholder,\r\n  state,\r\n  value,\r\n  size,\r\n  disabled,\r\n  validationMessage,\r\n  onChange,\r\n  margin,\r\n  autoHeight,\r\n  note,\r\n  required,\r\n  className,\r\n  dataTestId,\r\n  ...rest\r\n}: TextareaProps, ref) => {\r\n\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\r\n  return (\r\n    <TextareaWrapper>\r\n      <TextArea\r\n        id={id}\r\n        data-testid={dataTestId}\r\n        ref={elementRef}\r\n        value={value}\r\n        placeholder={disabled ? undefined : placeholder}\r\n        $autoHeight={autoHeight}\r\n        className={cls}\r\n        disabled={disabled}\r\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n        required={required}\r\n        {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)} /> : \r\n            <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)} />}\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </TextareaWrapper>\r\n  );\r\n});\r\n\r\nexport default Textarea;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Textarea.js

@@ -35,30 +35,51 @@ const TextareaWrapper = styled.div`
 `;
 const TextArea = styled.textarea`
   display: block;
-  background: ${props => COLORS.getColor('white', props.theme)};
+  background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 4px;
   outline: none;
   margin-bottom: 4px;
   padding: 16px;
   border: none;
-  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};
+  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
 
   resize: ${props => props.$autoHeight ? 'none' : ''};
 
-  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   &.small {
-    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     width: 304px;
 
     &::placeholder {
-      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     &::placeholder {
-      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
     width: 344px;
   }
@@ -72,19 +93,31 @@ const TextArea = styled.textarea`
   }
 
   &.invalid {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', 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)};
   }
 
   &:hover {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &.active {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
   }
 
   &:read-only:not(:disabled) {
@@ -93,17 +126,29 @@ const TextArea = styled.textarea`
 
   &:disabled {
     cursor: not-allowed;
-    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+    border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     box-shadow: none !important;
-    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
 
     &::placeholder {
-      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
   &::placeholder {
-    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 `;
 const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -144,9 +189,15 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       className: size || '',
       type: state ?? States.Invalid,
       children: [state === States.Valid ? /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
-        color: COLORS.getColor('correct_400', theme)
+        color: COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'positive'
+        }, theme)
       }) : /*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-        color: COLORS.getColor('critical_400', theme)
+        color: COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'critical'
+        }, theme)
       }), /*#__PURE__*/_jsx("span", {
         children: validationMessage
       })]

package/dist/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","useTheme","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","jsx","_jsx","jsxs","_jsxs","TextareaWrapper","div","props","$margin","TextArea","textarea","getColor","theme","$autoHeight","Regular","Italic","Textarea","forwardRef","_ref","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","useImperativeHandle","current","cls","Invalid","children","_objectSpread","undefined","e","target","type","Valid","CheckMark","color","TechnicalWarning","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\r\nimport { States } from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { SystemIcons } from '../icons';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\r\nimport { TextareaProps, TextFieldNote } from './types';\r\nimport {useFocusVisibleRef} from \"../common\";\r\n\r\n// Add component-specific styles.\r\nconst TextareaWrapper = styled.div<{ $margin?: string }>`\r\n  width: 100%;\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\nconst TextArea = styled.textarea<{ $autoHeight?: boolean }>`\r\n  display: block;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 4px;\r\n  outline: none;\r\n  margin-bottom: 4px;\r\n  padding: 16px;\r\n  border: none;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n\r\n  resize: ${(props) => (props.$autoHeight ? 'none' : '')};\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    width: 304px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n    width: 344px;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0 0 0 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_500', props.theme)};\r\n  }\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  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${readOnlyState}\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    box-shadow: none !important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n\r\n    &::placeholder {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n`;\r\n\r\nconst Textarea = React.forwardRef<any, TextareaProps>(({\r\n  id,\r\n  placeholder,\r\n  state,\r\n  value,\r\n  size,\r\n  disabled,\r\n  validationMessage,\r\n  onChange,\r\n  margin,\r\n  autoHeight,\r\n  note,\r\n  required,\r\n  className,\r\n  dataTestId,\r\n  ...rest\r\n}: TextareaProps, ref) => {\r\n\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\r\n  return (\r\n    <TextareaWrapper>\r\n      <TextArea\r\n        id={id}\r\n        data-testid={dataTestId}\r\n        ref={elementRef}\r\n        value={value}\r\n        placeholder={disabled ? undefined : placeholder}\r\n        $autoHeight={autoHeight}\r\n        className={cls}\r\n        disabled={disabled}\r\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n        required={required}\r\n        {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.getColor('correct_400', theme)} /> : <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} />}\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </TextareaWrapper>\r\n  );\r\n});\r\n\r\nexport default Textarea;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","useTheme","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","jsx","_jsx","jsxs","_jsxs","TextareaWrapper","div","props","$margin","TextArea","textarea","generateToken","componentType","defaultVariant","theme","$autoHeight","Regular","Italic","getColor","state","Textarea","forwardRef","_ref","ref","id","placeholder","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","useImperativeHandle","current","cls","Invalid","children","_objectSpread","undefined","e","target","type","Valid","CheckMark","color","TechnicalWarning","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\r\nimport { States } from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { SystemIcons } from '../icons';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\r\nimport { TextareaProps, TextFieldNote } from './types';\r\nimport {useFocusVisibleRef} from \"../common\";\r\n\r\n// Add component-specific styles.\r\nconst TextareaWrapper = styled.div<{ $margin?: string }>`\r\n  width: 100%;\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\nconst TextArea = styled.textarea<{ $autoHeight?: boolean }>`\r\n  display: block;\r\n  background: ${props => COLORS.generateToken({ componentType:'bg-surface', defaultVariant:'default' }, props.theme)};\r\n  border-radius: 4px;\r\n  outline: none;\r\n  margin-bottom: 4px;\r\n  padding: 16px;\r\n  border: none;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'default' }, props.theme)};\r\n\r\n  resize: ${(props) => (props.$autoHeight ? 'none' : '')};\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n    width: 304px;\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\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n    }\r\n    width: 344px;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0 0 0 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.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n  }\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  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', state: 'hover' }, props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${readOnlyState}\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    border: 1px solid ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)};\r\n    box-shadow: none !important;\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)} !important;\r\n\r\n    &::placeholder {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\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\nconst Textarea = React.forwardRef<any, TextareaProps>(({\r\n  id,\r\n  placeholder,\r\n  state,\r\n  value,\r\n  size,\r\n  disabled,\r\n  validationMessage,\r\n  onChange,\r\n  margin,\r\n  autoHeight,\r\n  note,\r\n  required,\r\n  className,\r\n  dataTestId,\r\n  ...rest\r\n}: TextareaProps, ref) => {\r\n\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\r\n  return (\r\n    <TextareaWrapper>\r\n      <TextArea\r\n        id={id}\r\n        data-testid={dataTestId}\r\n        ref={elementRef}\r\n        value={value}\r\n        placeholder={disabled ? undefined : placeholder}\r\n        $autoHeight={autoHeight}\r\n        className={cls}\r\n        disabled={disabled}\r\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n        required={required}\r\n        {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)} /> : \r\n            <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)} />}\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </TextareaWrapper>\r\n  );\r\n});\r\n\r\nexport default Textarea;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/components/SearchBarInput.cjs

@@ -42,7 +42,10 @@ const Search = exports.Search = _styledComponents.default.input.attrs(() => ({
   }
 
   &::placeholder {
-    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   height: 32px;
@@ -50,14 +53,23 @@ const Search = exports.Search = _styledComponents.default.input.attrs(() => ({
   margin-left: 48px;
   outline: none;
 
-  ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme))}
+  ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   ::placeholder {
-    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   ${_index.BREAKPOINTS.MEDIUM} {
     ::placeholder {
-      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
@@ -65,16 +77,25 @@ const Search = exports.Search = _styledComponents.default.input.attrs(() => ({
     margin-left: 44px;
 
     ::placeholder {
-      ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
     margin-left: 48px;
-    ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     
     ::placeholder {
-      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 

package/dist/InputFields/components/SearchBarInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","exports","styled","input","attrs","type","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","getColor","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","key","preventDefault","stopPropagation","jsx","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_propTypes","string","isRequired","func","bool","array","_default"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","exports","styled","input","attrs","type","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","generateToken","componentType","defaultVariant","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","key","preventDefault","stopPropagation","jsx","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_propTypes","string","isRequired","func","bool","array","_default"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\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  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\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    ::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    margin-left: 44px;\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\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\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  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/components/SearchBarInput.js

@@ -33,7 +33,10 @@ export const Search = styled.input.attrs(() => ({
   }
 
   &::placeholder {
-    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   height: 32px;
@@ -41,14 +44,23 @@ export const Search = styled.input.attrs(() => ({
   margin-left: 48px;
   outline: none;
 
-  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   ::placeholder {
-    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   ${BREAKPOINTS.MEDIUM} {
     ::placeholder {
-      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
@@ -56,16 +68,25 @@ export const Search = styled.input.attrs(() => ({
     margin-left: 44px;
 
     ::placeholder {
-      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
     margin-left: 48px;
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     
     ::placeholder {
-      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }