@laerdal/life-react-components 6.0.0-dev.24 → 6.0.0-dev.26

package/dist/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.js","names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","FilterChip","_ref","selected","text","size","Medium","disabled","onClick","className","dataTestId","rest","_objectWithoutProperties","_excluded","_objectSpread","role","tabIndex","onKeyDown","e","key","onMouseDown","children","CheckMark"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {FilterChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\r\n                                                                selected,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: FilterChipProps) => {\r\n\r\n\r\n  /**\r\n   * Return Filter Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer\r\n      role=\"checkbox\"\r\n      aria-checked={selected}\r\n      data-testid={dataTestId}\r\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n      tabIndex={disabled || !onClick ? -1 : 0}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      onClick={() => !disabled && onClick && onClick()}\r\n      {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\r\n          <div>{text}</div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default FilterChip;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;AACA,SAAQC,WAAW,QAAO,gBAAgB;;AAE1C;AACA;AACA;AACA,SAAQC,WAAW,EAAEC,oBAAoB,EAAEC,aAAa,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,MAAMC,UAAoD,GAAGC,IAAA,IASwB;EAAA,IATvB;MACEC,QAAQ;MACRC,IAAI;MACJC,IAAI,GAAGd,IAAI,CAACe,MAAM;MAClBC,QAAQ;MACRC,OAAO;MACPC,SAAS;MACTC;IAEe,CAAC,GAAAR,IAAA;IADbS,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAIrE;AACF;AACA;EACE,oBACEf,IAAA,CAACH,aAAa,EAAAmB,aAAA,CAAAA,aAAA;IACZC,IAAI,EAAC,UAAU;IACf,gBAAcZ,QAAS;IACvB,eAAaO,UAAW;IACxBD,SAAS,EAAE,GAAGJ,IAAI,IAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIJ,QAAQ,GAAG,SAAS,GAAG,SAAS,IAAI,CAAC,CAACK,OAAO,GAAG,aAAa,GAAG,EAAE,IAAIC,SAAS,IAAI,EAAE,EAAG;IAC5IO,QAAQ,EAAET,QAAQ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxCS,SAAS,EAAEC,CAAC,IAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACZ,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC,CAAE;IAC1FY,WAAW,EAAExB,yBAA0B;IACvCY,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC;EAAE,GAC7CG,IAAI;IAAAU,QAAA,eACRvB,IAAA,CAACJ,oBAAoB;MAAA2B,QAAA,eACnBrB,KAAA,CAACP,WAAW;QAAA4B,QAAA,GACTlB,QAAQ,iBAAIL,IAAA;UAAKW,SAAS,EAAE,qBAAsB;UAAAY,QAAA,eAACvB,IAAA,CAACN,WAAW,CAAC8B,SAAS;YAACb,SAAS,EAAE;UAAO,CAAC;QAAC,CAAK,CAAC,eACrGX,IAAA;UAAAuB,QAAA,EAAMjB;QAAI,CAAM,CAAC;MAAA,CACN;IAAC,CACM;EAAC,EACV,CAAC;AAEpB,CAAC;AAED,eAAeH,UAAU","ignoreList":[]}
+{"version":3,"file":"FilterChip.js","names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","FilterChip","_ref","selected","text","size","Medium","disabled","onClick","className","dataTestId","rest","_objectWithoutProperties","_excluded","_objectSpread","role","tabIndex","onKeyDown","e","key","onMouseDown","children","style","color","CheckMark"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {FilterChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\r\n                                                                selected,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: FilterChipProps) => {\r\n\r\n\r\n  /**\r\n   * Return Filter Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer\r\n      role=\"checkbox\"\r\n      aria-checked={selected}\r\n      data-testid={dataTestId}\r\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'selected' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n      tabIndex={disabled || !onClick ? -1 : 0}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      onClick={() => !disabled && onClick && onClick()}\r\n      {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {selected && <div style={{color:'inherit'}} className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\r\n          <div style={{color:'inherit'}}>{text}</div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default FilterChip;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;AACA,SAAQC,WAAW,QAAO,gBAAgB;;AAE1C;AACA;AACA;AACA,SAAQC,WAAW,EAAEC,oBAAoB,EAAEC,aAAa,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,MAAMC,UAAoD,GAAGC,IAAA,IASwB;EAAA,IATvB;MACEC,QAAQ;MACRC,IAAI;MACJC,IAAI,GAAGd,IAAI,CAACe,MAAM;MAClBC,QAAQ;MACRC,OAAO;MACPC,SAAS;MACTC;IAEe,CAAC,GAAAR,IAAA;IADbS,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAIrE;AACF;AACA;EACE,oBACEf,IAAA,CAACH,aAAa,EAAAmB,aAAA,CAAAA,aAAA;IACZC,IAAI,EAAC,UAAU;IACf,gBAAcZ,QAAS;IACvB,eAAaO,UAAW;IACxBD,SAAS,EAAE,GAAGJ,IAAI,IAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIJ,QAAQ,GAAG,UAAU,GAAG,SAAS,IAAI,CAAC,CAACK,OAAO,GAAG,aAAa,GAAG,EAAE,IAAIC,SAAS,IAAI,EAAE,EAAG;IAC7IO,QAAQ,EAAET,QAAQ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxCS,SAAS,EAAEC,CAAC,IAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACZ,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC,CAAE;IAC1FY,WAAW,EAAExB,yBAA0B;IACvCY,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC;EAAE,GAC7CG,IAAI;IAAAU,QAAA,eACRvB,IAAA,CAACJ,oBAAoB;MAAA2B,QAAA,eACnBrB,KAAA,CAACP,WAAW;QAAA4B,QAAA,GACTlB,QAAQ,iBAAIL,IAAA;UAAKwB,KAAK,EAAE;YAACC,KAAK,EAAC;UAAS,CAAE;UAACd,SAAS,EAAE,qBAAsB;UAAAY,QAAA,eAACvB,IAAA,CAACN,WAAW,CAACgC,SAAS;YAACf,SAAS,EAAE;UAAO,CAAC;QAAC,CAAK,CAAC,eAC/HX,IAAA;UAAKwB,KAAK,EAAE;YAACC,KAAK,EAAC;UAAS,CAAE;UAAAF,QAAA,EAAEjB;QAAI,CAAM,CAAC;MAAA,CAChC;IAAC,CACM;EAAC,EACV,CAAC;AAEpB,CAAC;AAED,eAAeH,UAAU","ignoreList":[]}

package/dist/Chips/InputChip.cjs

@@ -12,6 +12,8 @@ var _index = require("../icons/index");
 var _ChipStyles = require("./ChipStyles");
 var _common = require("../common");
 var _types = require("../types");
+var _styledComponents = require("styled-components");
+var _colors = _interopRequireDefault(require("../styles/colors"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["icon", "text", "variant", "size", "disabled", "onClick", "disableRemove", "dataTestId", "onRemove", "className"];
 /**
@@ -46,6 +48,7 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const containerRef = ref ?? React.useRef(null);
   const removeRef = React.useRef(null);
+  const theme = (0, _styledComponents.useTheme)();
   (0, _common.useActionWithin)(containerRef, [removeRef]);
 
   /**
@@ -64,6 +67,11 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       !disableRemove && onRemove && onRemove(event);
     }
   };
+  console.log(_colors.default.generateToken({
+    componentType: 'bg-surface',
+    defaultVariant: 'critical',
+    state: 'hover'
+  }, theme));
 
   /**
    * Return Input Chip component.
@@ -83,9 +91,15 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
         className: 'with-action-right',
         children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            color: 'inherit'
+          },
           className: 'chip-icon icon-left',
           children: icon
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            color: 'inherit'
+          },
           children: text
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           ref: removeRef,

package/dist/Chips/InputChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.cjs","names":["React","_interopRequireWildcard","require","_index","_ChipStyles","_common","_types","_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","InputChip","forwardRef","_ref","ref","icon","text","variant","States","Default","size","Size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","_objectWithoutProperties2","containerRef","useRef","removeRef","useActionWithin","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","jsx","ChipContainer","role","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","children","ChipContentContainer","jsxs","ChipContent","SystemIcons","Close","_default","exports"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ChipVariant, InputChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\r\nimport {Size, States} from '../types';\r\n\r\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\r\n                                                                               icon,\r\n                                                                               text,\r\n                                                                               variant = States.Default,\r\n                                                                               size = Size.Medium,\r\n                                                                               disabled,\r\n                                                                               onClick,\r\n                                                                               disableRemove,\r\n                                                                               dataTestId,\r\n                                                                               onRemove,\r\n                                                                               className,\r\n                                                                               ...rest\r\n                                                                             }: InputChipProps, ref) => {\r\n\r\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\r\n  const removeRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [removeRef]);\r\n\r\n  /**\r\n   * Calls onRemove action when remove button is clicked.\r\n   * @param event - Event handler from the button click.\r\n   */\r\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\r\n    !!event && event.stopPropagation();\r\n    onRemove(event);\r\n  };\r\n\r\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      !disabled && onClick && onClick();\r\n    }\r\n    if (event.key === 'Backspace' && !disableRemove) {\r\n      !disableRemove && onRemove && onRemove(event);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Input Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer ref={containerRef}\r\n                   role=\"button\"\r\n                   data-testid={dataTestId}\r\n                   aria-roledescription='Removable filter'\r\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   onKeyDown={handleContainerKeyDown}\r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent className={'with-action-right'}>\r\n          {icon && <div className={'chip-icon icon-left'}>{icon}</div>}\r\n\r\n          <div>{text}</div>\r\n\r\n          <div ref={removeRef}\r\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\r\n               tabIndex={disableRemove || disabled ? -1 : 0}\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\r\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\r\n            <div className={'chip-icon'}>\r\n              <SystemIcons.Close className={'remove'}/>\r\n            </div>\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n});\r\n\r\nexport default InputChip;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"InputChip.cjs","names":["React","_interopRequireWildcard","require","_index","_ChipStyles","_common","_types","_styledComponents","_colors","_interopRequireDefault","_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","InputChip","forwardRef","_ref","ref","icon","text","variant","States","Default","size","Size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","_objectWithoutProperties2","containerRef","useRef","removeRef","theme","useTheme","useActionWithin","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","console","log","COLORS","generateToken","componentType","defaultVariant","state","jsx","ChipContainer","role","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","children","ChipContentContainer","jsxs","ChipContent","style","color","SystemIcons","Close","_default","exports"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {InputChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\r\nimport {Size, States} from '../types';\r\nimport { useTheme } from 'styled-components';\r\nimport COLORS from '../styles/colors';\r\n\r\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\r\n                                                                               icon,\r\n                                                                               text,\r\n                                                                               variant = States.Default,\r\n                                                                               size = Size.Medium,\r\n                                                                               disabled,\r\n                                                                               onClick,\r\n                                                                               disableRemove,\r\n                                                                               dataTestId,\r\n                                                                               onRemove,\r\n                                                                               className,\r\n                                                                               ...rest\r\n                                                                             }: InputChipProps, ref) => {\r\n\r\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\r\n  const removeRef = React.useRef<HTMLDivElement>(null);\r\n  const theme = useTheme();\r\n\r\n  useActionWithin(containerRef, [removeRef]);\r\n\r\n  /**\r\n   * Calls onRemove action when remove button is clicked.\r\n   * @param event - Event handler from the button click.\r\n   */\r\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\r\n    !!event && event.stopPropagation();\r\n    onRemove(event);\r\n  };\r\n\r\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      !disabled && onClick && onClick();\r\n    }\r\n    if (event.key === 'Backspace' && !disableRemove) {\r\n      !disableRemove && onRemove && onRemove(event);\r\n    }\r\n  };\r\n\r\n  console.log(COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical', state: 'hover' }, theme));\r\n\r\n  /**\r\n   * Return Input Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer ref={containerRef}\r\n                   role=\"button\"\r\n                   data-testid={dataTestId}\r\n                   aria-roledescription='Removable filter'\r\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   onKeyDown={handleContainerKeyDown}\r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent className={'with-action-right'}>\r\n          {icon && <div style={{color:'inherit'}} className={'chip-icon icon-left'}>{icon}</div>}\r\n\r\n          <div style={{color:'inherit'}}>{text}</div>\r\n\r\n          <div ref={removeRef}\r\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\r\n               tabIndex={disableRemove || disabled ? -1 : 0}\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\r\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\r\n            <div className={'chip-icon'}>\r\n              <SystemIcons.Close className={'remove'}/>\r\n            </div>\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n});\r\n\r\nexport default InputChip;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Chips/InputChip.js

@@ -24,6 +24,8 @@ import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
 
 import { defaultOnMouseDownHandler, useActionWithin } from '../common';
 import { Size, States } from '../types';
+import { useTheme } from 'styled-components';
+import COLORS from '../styles/colors';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -41,6 +43,7 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rest = _objectWithoutProperties(_ref, _excluded);
   const containerRef = ref ?? React.useRef(null);
   const removeRef = React.useRef(null);
+  const theme = useTheme();
   useActionWithin(containerRef, [removeRef]);
 
   /**
@@ -59,6 +62,11 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       !disableRemove && onRemove && onRemove(event);
     }
   };
+  console.log(COLORS.generateToken({
+    componentType: 'bg-surface',
+    defaultVariant: 'critical',
+    state: 'hover'
+  }, theme));
 
   /**
    * Return Input Chip component.
@@ -78,9 +86,15 @@ const InputChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: /*#__PURE__*/_jsxs(ChipContent, {
         className: 'with-action-right',
         children: [icon && /*#__PURE__*/_jsx("div", {
+          style: {
+            color: 'inherit'
+          },
           className: 'chip-icon icon-left',
           children: icon
         }), /*#__PURE__*/_jsx("div", {
+          style: {
+            color: 'inherit'
+          },
           children: text
         }), /*#__PURE__*/_jsx("div", {
           ref: removeRef,

package/dist/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.js","names":["React","SystemIcons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","Size","States","jsx","_jsx","jsxs","_jsxs","InputChip","forwardRef","_ref","ref","icon","text","variant","Default","size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","_objectWithoutProperties","_excluded","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","_objectSpread","role","tabIndex","onMouseDown","onKeyDown","children","e","Close"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ChipVariant, InputChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\r\nimport {Size, States} from '../types';\r\n\r\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\r\n                                                                               icon,\r\n                                                                               text,\r\n                                                                               variant = States.Default,\r\n                                                                               size = Size.Medium,\r\n                                                                               disabled,\r\n                                                                               onClick,\r\n                                                                               disableRemove,\r\n                                                                               dataTestId,\r\n                                                                               onRemove,\r\n                                                                               className,\r\n                                                                               ...rest\r\n                                                                             }: InputChipProps, ref) => {\r\n\r\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\r\n  const removeRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [removeRef]);\r\n\r\n  /**\r\n   * Calls onRemove action when remove button is clicked.\r\n   * @param event - Event handler from the button click.\r\n   */\r\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\r\n    !!event && event.stopPropagation();\r\n    onRemove(event);\r\n  };\r\n\r\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      !disabled && onClick && onClick();\r\n    }\r\n    if (event.key === 'Backspace' && !disableRemove) {\r\n      !disableRemove && onRemove && onRemove(event);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Input Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer ref={containerRef}\r\n                   role=\"button\"\r\n                   data-testid={dataTestId}\r\n                   aria-roledescription='Removable filter'\r\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   onKeyDown={handleContainerKeyDown}\r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent className={'with-action-right'}>\r\n          {icon && <div className={'chip-icon icon-left'}>{icon}</div>}\r\n\r\n          <div>{text}</div>\r\n\r\n          <div ref={removeRef}\r\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\r\n               tabIndex={disableRemove || disabled ? -1 : 0}\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\r\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\r\n            <div className={'chip-icon'}>\r\n              <SystemIcons.Close className={'remove'}/>\r\n            </div>\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n});\r\n\r\nexport default InputChip;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"InputChip.js","names":["React","SystemIcons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","Size","States","useTheme","COLORS","jsx","_jsx","jsxs","_jsxs","InputChip","forwardRef","_ref","ref","icon","text","variant","Default","size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","_objectWithoutProperties","_excluded","containerRef","useRef","removeRef","theme","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","console","log","generateToken","componentType","defaultVariant","state","_objectSpread","role","tabIndex","onMouseDown","onKeyDown","children","style","color","e","Close"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {InputChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\r\nimport {Size, States} from '../types';\r\nimport { useTheme } from 'styled-components';\r\nimport COLORS from '../styles/colors';\r\n\r\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\r\n                                                                               icon,\r\n                                                                               text,\r\n                                                                               variant = States.Default,\r\n                                                                               size = Size.Medium,\r\n                                                                               disabled,\r\n                                                                               onClick,\r\n                                                                               disableRemove,\r\n                                                                               dataTestId,\r\n                                                                               onRemove,\r\n                                                                               className,\r\n                                                                               ...rest\r\n                                                                             }: InputChipProps, ref) => {\r\n\r\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\r\n  const removeRef = React.useRef<HTMLDivElement>(null);\r\n  const theme = useTheme();\r\n\r\n  useActionWithin(containerRef, [removeRef]);\r\n\r\n  /**\r\n   * Calls onRemove action when remove button is clicked.\r\n   * @param event - Event handler from the button click.\r\n   */\r\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\r\n    !!event && event.stopPropagation();\r\n    onRemove(event);\r\n  };\r\n\r\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      !disabled && onClick && onClick();\r\n    }\r\n    if (event.key === 'Backspace' && !disableRemove) {\r\n      !disableRemove && onRemove && onRemove(event);\r\n    }\r\n  };\r\n\r\n  console.log(COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical', state: 'hover' }, theme));\r\n\r\n  /**\r\n   * Return Input Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer ref={containerRef}\r\n                   role=\"button\"\r\n                   data-testid={dataTestId}\r\n                   aria-roledescription='Removable filter'\r\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   onKeyDown={handleContainerKeyDown}\r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent className={'with-action-right'}>\r\n          {icon && <div style={{color:'inherit'}} className={'chip-icon icon-left'}>{icon}</div>}\r\n\r\n          <div style={{color:'inherit'}}>{text}</div>\r\n\r\n          <div ref={removeRef}\r\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\r\n               tabIndex={disableRemove || disabled ? -1 : 0}\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\r\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\r\n            <div className={'chip-icon'}>\r\n              <SystemIcons.Close className={'remove'}/>\r\n            </div>\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n});\r\n\r\nexport default InputChip;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,WAAW,QAA6B,gBAAgB;;AAEhE;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,EAAEC,eAAe,QAAO,WAAW;AACpE,SAAQC,IAAI,EAAEC,MAAM,QAAO,UAAU;AACrC,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,OAAOC,MAAM,MAAM,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEtC,MAAMC,SAAkD,gBAAGf,KAAK,CAACgB,UAAU,CAAC,CAAAC,IAAA,EAYoBC,GAAG,KAAK;EAAA,IAZ3B;MACEC,IAAI;MACJC,IAAI;MACJC,OAAO,GAAGb,MAAM,CAACc,OAAO;MACxBC,IAAI,GAAGhB,IAAI,CAACiB,MAAM;MAClBC,QAAQ;MACRC,OAAO;MACPC,aAAa;MACbC,UAAU;MACVC,QAAQ;MACRC;IAEc,CAAC,GAAAb,IAAA;IADZc,IAAI,GAAAC,wBAAA,CAAAf,IAAA,EAAAgB,SAAA;EAGpF,MAAMC,YAAY,GAAGhB,GAAG,IAA8ClB,KAAK,CAACmC,MAAM,CAAiB,IAAI,CAAC;EACxG,MAAMC,SAAS,GAAGpC,KAAK,CAACmC,MAAM,CAAiB,IAAI,CAAC;EACpD,MAAME,KAAK,GAAG5B,QAAQ,CAAC,CAAC;EAExBH,eAAe,CAAC4B,YAAY,EAAE,CAACE,SAAS,CAAC,CAAC;;EAE1C;AACF;AACA;AACA;EACE,MAAME,aAAa,GAAIC,KAA8E,IAAK;IACxG,CAAC,CAACA,KAAK,IAAIA,KAAK,CAACC,eAAe,CAAC,CAAC;IAClCX,QAAQ,CAACU,KAAK,CAAC;EACjB,CAAC;EAED,MAAME,sBAAsB,GAAIF,KAA0C,IAAK;IAC7E,IAAIA,KAAK,CAACG,GAAG,KAAK,OAAO,IAAIH,KAAK,CAACG,GAAG,KAAK,GAAG,EAAE;MAC9C,CAACjB,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC,CAAC;IACnC;IACA,IAAIa,KAAK,CAACG,GAAG,KAAK,WAAW,IAAI,CAACf,aAAa,EAAE;MAC/C,CAACA,aAAa,IAAIE,QAAQ,IAAIA,QAAQ,CAACU,KAAK,CAAC;IAC/C;EACF,CAAC;EAEDI,OAAO,CAACC,GAAG,CAAClC,MAAM,CAACmC,aAAa,CAAC;IAAEC,aAAa,EAAE,YAAY;IAAEC,cAAc,EAAE,UAAU;IAAEC,KAAK,EAAE;EAAQ,CAAC,EAAEX,KAAK,CAAC,CAAC;;EAErH;AACF;AACA;EACE,oBACEzB,IAAA,CAACV,aAAa,EAAA+C,aAAA,CAAAA,aAAA;IAAC/B,GAAG,EAAEgB,YAAa;IAClBgB,IAAI,EAAC,QAAQ;IACb,eAAatB,UAAW;IACxB,wBAAqB,kBAAkB;IACvCE,SAAS,EAAE,GAAGP,IAAI,IAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,KAAKJ,OAAO,IAAI,CAAC,CAACK,OAAO,GAAG,aAAa,GAAG,EAAE,IAAII,SAAS,IAAI,EAAE,EAAG;IACpHqB,QAAQ,EAAE1B,QAAQ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxC0B,WAAW,EAAE/C,yBAA0B;IACvCgD,SAAS,EAAEZ,sBAAuB;IAClCf,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC;EAAE,GAC7CK,IAAI;IAAAuB,QAAA,eACrB1C,IAAA,CAACR,oBAAoB;MAAAkD,QAAA,eACnBxC,KAAA,CAACX,WAAW;QAAC2B,SAAS,EAAE,mBAAoB;QAAAwB,QAAA,GACzCnC,IAAI,iBAAIP,IAAA;UAAK2C,KAAK,EAAE;YAACC,KAAK,EAAC;UAAS,CAAE;UAAC1B,SAAS,EAAE,qBAAsB;UAAAwB,QAAA,EAAEnC;QAAI,CAAM,CAAC,eAEtFP,IAAA;UAAK2C,KAAK,EAAE;YAACC,KAAK,EAAC;UAAS,CAAE;UAAAF,QAAA,EAAElC;QAAI,CAAM,CAAC,eAE3CR,IAAA;UAAKM,GAAG,EAAEkB,SAAU;UACfN,SAAS,EAAE,gBAAgBH,aAAa,GAAG,UAAU,GAAG,EAAE,EAAG;UAC7DwB,QAAQ,EAAExB,aAAa,IAAIF,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;UAC7C2B,WAAW,EAAE/C,yBAA0B;UACvCqB,OAAO,EAAE+B,CAAC,IAAI,CAAC9B,aAAa,IAAI,CAACF,QAAQ,IAAIa,aAAa,CAACmB,CAAC,CAAE;UAC9DJ,SAAS,EAAEI,CAAC,IAAI,CAACA,CAAC,CAACf,GAAG,KAAK,OAAO,IAAIe,CAAC,CAACf,GAAG,KAAK,GAAG,KAAK,CAACf,aAAa,IAAI,CAACF,QAAQ,IAAIa,aAAa,CAACmB,CAAC,CAAE;UAAAH,QAAA,eAC3G1C,IAAA;YAAKkB,SAAS,EAAE,WAAY;YAAAwB,QAAA,eAC1B1C,IAAA,CAACX,WAAW,CAACyD,KAAK;cAAC5B,SAAS,EAAE;YAAS,CAAC;UAAC,CACtC;QAAC,CACH,CAAC;MAAA,CACK;IAAC,CACM;EAAC,EACV,CAAC;AAEpB,CAAC,CAAC;AAEF,eAAef,SAAS","ignoreList":[]}

package/dist/ChipsInput/ChipInputField.cjs

@@ -89,14 +89,20 @@ const ChipInputContainer = exports.ChipInputContainer = _styledComponents.defaul
   border-radius: 4px;
   margin-bottom: 4px;
   box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_400', props.theme)};
-  background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+  background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   box-sizing: border-box;
   cursor: text;
   outline: none;
   display: flex;
   align-items: center;
 
-  ${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 {
     padding: 0;
     min-height: 48px;

package/dist/ChipsInput/ChipInputField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInputField.cjs","names":["_react","_interopRequireDefault","require","_types","_Chips","_InputFields","_styles","_styledComponents","_interopRequireWildcard","_LoadingIndicator","_common","_Button","_icons","_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","Wrapper","styled","div","Loading","ChipInputBoundItems","exports","ChipInputContentContainer","scrollBarStyling","Size","Small","ChipInputEl","input","ComponentMStyling","ComponentTextStyle","Regular","props","COLORS","getColor","theme","Italic","generateToken","componentType","defaultVariant","ChipInputContainer","ComponentSStyling","focusStyles","ChipInputField","React","forwardRef","_ref","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","_objectWithoutProperties2","useTheme","containerRef","useRef","inputRef","useFocusVisibleRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","key","value","repeat","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","jsxs","children","jsx","onKeyDown","onClick","className","map","chip","InputChip","icon","variant","States","Default","text","label","onRemove","type","id","tabIndex","onChange","stopPropagation","IconButton","dataTestId","action","useTransparentBackground","shape","style","marginLeft","focusOnClick","SystemIcons","Clear","LoadingIndicator","color","ErrorMessage","TechnicalWarning","propTypes","_propTypes","string","isRequired","array","bool","func"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\r\nimport {ChipItem} from './ChipInputTypes';\r\nimport {Size, States} from '../types';\r\nimport {InputChip} from '../Chips';\r\nimport {ErrorMessage} from '../InputFields';\r\nimport {\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  scrollBarStyling\r\n} from '../styles';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {LoadingIndicator} from '../LoadingIndicator';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n`;\r\n\r\nconst Loading = styled.div`\r\n  height: 20px;\r\n  width: 20px;\r\n`;\r\n\r\nexport const ChipInputBoundItems = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n  flex: 1;\r\n  min-width: 40px;\r\n`;\r\n\r\nexport const ChipInputContentContainer = styled.div`\r\n  width: 100%;\r\n  background: transparent;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  column-gap: 8px;\r\n  margin-right: 6px;\r\n  padding-right: 10px;\r\n  padding-left: 16px;\r\n  flex-wrap: nowrap;\r\n  overflow-x: scroll;\r\n  min-height: 48px;\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar:horizontal {\r\n    display: none;\r\n  }\r\n\r\n  .action-right:focus,\r\n  button:focus {\r\n    outline-offset: -4px !important;\r\n  }\r\n`;\r\n\r\nexport const ChipInputEl = styled.input`\r\n  border: none;\r\n  outline: none;\r\n\r\n  height: 40px;\r\n  min-width: 40px;\r\n  display: inline-flex;\r\n  flex: 1;\r\n  background: transparent;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  color: ${props => COLORS.getColor('black', props.theme)} !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\nexport const ChipInputContainer = styled.div`\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  cursor: text;\r\n  outline: none;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  &.small {\r\n    padding: 0;\r\n    min-height: 48px;\r\n\r\n    ${ChipInputEl}::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    padding: 4px 0;\r\n    min-height: 56px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.multiline.medium {\r\n    ${ChipInputContentContainer} {\r\n      max-height: calc(48px * 3);\r\n      flex-wrap: wrap;\r\n      overflow-y: auto;\r\n      overflow-x: unset;\r\n    }\r\n  }\r\n\r\n  &.focus-visible-within,\r\n  &:focus {\r\n    ${focusStyles}\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  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.invalid,\r\n  &.invalid:hover,\r\n  &.invalid:focus {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    ${ChipInputContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    cursor: not-allowed;\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    outline: none;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n`;\r\n\r\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\r\n  inputId: string;\r\n  items: ChipItem[];\r\n  disabled?: boolean;\r\n  placeholder?: string;\r\n  altPlaceholder?: string;\r\n  multiLine?: boolean;\r\n  size?: Size.Large | Size.Medium | Size.Small;\r\n  loading?: boolean;\r\n  required?: boolean;\r\n\r\n  validationMessage?: string;\r\n\r\n  onRemoveItem: (item: ChipItem, index: number) => void;\r\n  inputValue: string;\r\n  onInputValueChange: (value: string) => void;\r\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onActivationChange?: (active: boolean) => void;\r\n}\r\n\r\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\r\n  (\r\n    {\r\n      inputId,\r\n      items,\r\n      disabled = false,\r\n      placeholder,\r\n      altPlaceholder,\r\n      multiLine = true,\r\n      size = Size.Medium,\r\n      validationMessage,\r\n      loading,\r\n      onRemoveItem,\r\n      onInputValueChange,\r\n      onInputKeyDown,\r\n      onActivationChange,\r\n      inputValue,\r\n      required,\r\n      onBlur,\r\n      ...rest\r\n    },\r\n    ref,\r\n  ) => {\r\n    const theme = useTheme();\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const inputRef = useFocusVisibleRef([containerRef]);\r\n    \r\n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\r\n\r\n    /**\r\n     * Scroll container to last item on change\r\n     * */\r\n    React.useEffect(() => {\r\n      if (inputRef.current && document.activeElement === inputRef.current) {\r\n        inputRef.current.scrollIntoView({\r\n          block: 'nearest',\r\n          inline: 'nearest',\r\n        });\r\n      }\r\n    }, [containerRef, inputRef, items]);\r\n\r\n    /**\r\n     * Remove last cheap on backspace\r\n     * */\r\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\r\n        onRemoveItem(items[items.length - 1], items.length - 1);\r\n      } else {\r\n        onInputKeyDown(e);\r\n      }\r\n    };\r\n\r\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\r\n      onRemoveItem(item, index);\r\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\r\n    };\r\n\r\n    const handleInputClear = (e: any) => {\r\n      onInputValueChange('');\r\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\r\n    };\r\n\r\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\r\n\r\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\r\n      const currentIndex = Array.from(items).indexOf(e.target as any);\r\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\r\n      const item = items[currentIndex + direction];\r\n      item?.focus({focusVisible: true} as any);\r\n\r\n      onActivationChange && onActivationChange(false);\r\n    };\r\n\r\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n    return (\r\n      <Wrapper onBlur={onBlur}>\r\n        <ChipInputContainer\r\n          data-testid=\"chip-input-container\"\r\n          ref={containerRef}\r\n          onKeyDown={handleContainerKeyDown}\r\n          onClick={() => !disabled && inputRef.current?.focus()}\r\n          className={cls}>\r\n          <ChipInputContentContainer>\r\n            {items?.map((chip: ChipItem, index: number) => (\r\n              <InputChip\r\n                key={`chip_${index}`}\r\n                icon={chip?.icon}\r\n                size={size}\r\n                disabled={chip.disabled || disabled}\r\n                variant={chip.variant || States.Default}\r\n                text={chip.label}\r\n                onRemove={(e) => handleItemRemove(e, chip, index)}\r\n              />\r\n            ))}\r\n            <ChipInputBoundItems>\r\n              <ChipInputEl\r\n                ref={inputRef}\r\n                type=\"text\"\r\n                id={inputId}\r\n                required={required}\r\n                tabIndex={disabled ? -1 : 0}\r\n                value={inputValue}\r\n                onChange={(e) => onInputValueChange(e.target.value)}\r\n                onKeyDown={handleInputKeyDown}\r\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\r\n                onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  onActivationChange && onActivationChange(true);\r\n                }}\r\n                {...rest}\r\n              />\r\n              {inputValue && !disabled && (\r\n                <IconButton\r\n                  id={`clear-btn-${inputId}`}\r\n                  dataTestId={`clear-btn-${inputId}`}\r\n                  action={handleInputClear}\r\n                  ref={(ref) => {\r\n                    ref?.scrollIntoView({\r\n                      block: 'nearest',\r\n                      inline: 'nearest',\r\n                    });\r\n                  }}\r\n                  useTransparentBackground={true}\r\n                  shape={'circular'}\r\n                  style={{marginLeft: '-8px'}}\r\n                  focusOnClick={true}\r\n                  variant={'secondary'}>\r\n                  <SystemIcons.Clear/>\r\n                </IconButton>\r\n              )}\r\n\r\n              {loading && (\r\n                <Loading className={size}>\r\n                  <LoadingIndicator size={Size.Small} color={COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, theme)}/>\r\n                </Loading>\r\n              )}\r\n            </ChipInputBoundItems>\r\n          </ChipInputContentContainer>\r\n        </ChipInputContainer>\r\n        {validationMessage && (\r\n          <ErrorMessage>\r\n            <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )}\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChipInputField.cjs","names":["_react","_interopRequireDefault","require","_types","_Chips","_InputFields","_styles","_styledComponents","_interopRequireWildcard","_LoadingIndicator","_common","_Button","_icons","_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","Wrapper","styled","div","Loading","ChipInputBoundItems","exports","ChipInputContentContainer","scrollBarStyling","Size","Small","ChipInputEl","input","ComponentMStyling","ComponentTextStyle","Regular","props","COLORS","getColor","theme","Italic","generateToken","componentType","defaultVariant","ChipInputContainer","ComponentSStyling","focusStyles","ChipInputField","React","forwardRef","_ref","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","_objectWithoutProperties2","useTheme","containerRef","useRef","inputRef","useFocusVisibleRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","key","value","repeat","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","jsxs","children","jsx","onKeyDown","onClick","className","map","chip","InputChip","icon","variant","States","Default","text","label","onRemove","type","id","tabIndex","onChange","stopPropagation","IconButton","dataTestId","action","useTransparentBackground","shape","style","marginLeft","focusOnClick","SystemIcons","Clear","LoadingIndicator","color","ErrorMessage","TechnicalWarning","propTypes","_propTypes","string","isRequired","array","bool","func"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\r\nimport {ChipItem} from './ChipInputTypes';\r\nimport {Size, States} from '../types';\r\nimport {InputChip} from '../Chips';\r\nimport {ErrorMessage} from '../InputFields';\r\nimport {\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  scrollBarStyling\r\n} from '../styles';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {LoadingIndicator} from '../LoadingIndicator';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n`;\r\n\r\nconst Loading = styled.div`\r\n  height: 20px;\r\n  width: 20px;\r\n`;\r\n\r\nexport const ChipInputBoundItems = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n  flex: 1;\r\n  min-width: 40px;\r\n`;\r\n\r\nexport const ChipInputContentContainer = styled.div`\r\n  width: 100%;\r\n  background: transparent;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  column-gap: 8px;\r\n  margin-right: 6px;\r\n  padding-right: 10px;\r\n  padding-left: 16px;\r\n  flex-wrap: nowrap;\r\n  overflow-x: scroll;\r\n  min-height: 48px;\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar:horizontal {\r\n    display: none;\r\n  }\r\n\r\n  .action-right:focus,\r\n  button:focus {\r\n    outline-offset: -4px !important;\r\n  }\r\n`;\r\n\r\nexport const ChipInputEl = styled.input`\r\n  border: none;\r\n  outline: none;\r\n\r\n  height: 40px;\r\n  min-width: 40px;\r\n  display: inline-flex;\r\n  flex: 1;\r\n  background: transparent;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  color: ${props => COLORS.getColor('black', props.theme)} !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\nexport const ChipInputContainer = styled.div`\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n  box-sizing: border-box;\r\n  cursor: text;\r\n  outline: none;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n  &.small {\r\n    padding: 0;\r\n    min-height: 48px;\r\n\r\n    ${ChipInputEl}::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    padding: 4px 0;\r\n    min-height: 56px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.multiline.medium {\r\n    ${ChipInputContentContainer} {\r\n      max-height: calc(48px * 3);\r\n      flex-wrap: wrap;\r\n      overflow-y: auto;\r\n      overflow-x: unset;\r\n    }\r\n  }\r\n\r\n  &.focus-visible-within,\r\n  &:focus {\r\n    ${focusStyles}\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  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.invalid,\r\n  &.invalid:hover,\r\n  &.invalid:focus {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    ${ChipInputContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    cursor: not-allowed;\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    outline: none;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n`;\r\n\r\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\r\n  inputId: string;\r\n  items: ChipItem[];\r\n  disabled?: boolean;\r\n  placeholder?: string;\r\n  altPlaceholder?: string;\r\n  multiLine?: boolean;\r\n  size?: Size.Large | Size.Medium | Size.Small;\r\n  loading?: boolean;\r\n  required?: boolean;\r\n\r\n  validationMessage?: string;\r\n\r\n  onRemoveItem: (item: ChipItem, index: number) => void;\r\n  inputValue: string;\r\n  onInputValueChange: (value: string) => void;\r\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onActivationChange?: (active: boolean) => void;\r\n}\r\n\r\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\r\n  (\r\n    {\r\n      inputId,\r\n      items,\r\n      disabled = false,\r\n      placeholder,\r\n      altPlaceholder,\r\n      multiLine = true,\r\n      size = Size.Medium,\r\n      validationMessage,\r\n      loading,\r\n      onRemoveItem,\r\n      onInputValueChange,\r\n      onInputKeyDown,\r\n      onActivationChange,\r\n      inputValue,\r\n      required,\r\n      onBlur,\r\n      ...rest\r\n    },\r\n    ref,\r\n  ) => {\r\n    const theme = useTheme();\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const inputRef = useFocusVisibleRef([containerRef]);\r\n    \r\n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\r\n\r\n    /**\r\n     * Scroll container to last item on change\r\n     * */\r\n    React.useEffect(() => {\r\n      if (inputRef.current && document.activeElement === inputRef.current) {\r\n        inputRef.current.scrollIntoView({\r\n          block: 'nearest',\r\n          inline: 'nearest',\r\n        });\r\n      }\r\n    }, [containerRef, inputRef, items]);\r\n\r\n    /**\r\n     * Remove last cheap on backspace\r\n     * */\r\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\r\n        onRemoveItem(items[items.length - 1], items.length - 1);\r\n      } else {\r\n        onInputKeyDown(e);\r\n      }\r\n    };\r\n\r\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\r\n      onRemoveItem(item, index);\r\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\r\n    };\r\n\r\n    const handleInputClear = (e: any) => {\r\n      onInputValueChange('');\r\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\r\n    };\r\n\r\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\r\n\r\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\r\n      const currentIndex = Array.from(items).indexOf(e.target as any);\r\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\r\n      const item = items[currentIndex + direction];\r\n      item?.focus({focusVisible: true} as any);\r\n\r\n      onActivationChange && onActivationChange(false);\r\n    };\r\n\r\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n    return (\r\n      <Wrapper onBlur={onBlur}>\r\n        <ChipInputContainer\r\n          data-testid=\"chip-input-container\"\r\n          ref={containerRef}\r\n          onKeyDown={handleContainerKeyDown}\r\n          onClick={() => !disabled && inputRef.current?.focus()}\r\n          className={cls}>\r\n          <ChipInputContentContainer>\r\n            {items?.map((chip: ChipItem, index: number) => (\r\n              <InputChip\r\n                key={`chip_${index}`}\r\n                icon={chip?.icon}\r\n                size={size}\r\n                disabled={chip.disabled || disabled}\r\n                variant={chip.variant || States.Default}\r\n                text={chip.label}\r\n                onRemove={(e) => handleItemRemove(e, chip, index)}\r\n              />\r\n            ))}\r\n            <ChipInputBoundItems>\r\n              <ChipInputEl\r\n                ref={inputRef}\r\n                type=\"text\"\r\n                id={inputId}\r\n                required={required}\r\n                tabIndex={disabled ? -1 : 0}\r\n                value={inputValue}\r\n                onChange={(e) => onInputValueChange(e.target.value)}\r\n                onKeyDown={handleInputKeyDown}\r\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\r\n                onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  onActivationChange && onActivationChange(true);\r\n                }}\r\n                {...rest}\r\n              />\r\n              {inputValue && !disabled && (\r\n                <IconButton\r\n                  id={`clear-btn-${inputId}`}\r\n                  dataTestId={`clear-btn-${inputId}`}\r\n                  action={handleInputClear}\r\n                  ref={(ref) => {\r\n                    ref?.scrollIntoView({\r\n                      block: 'nearest',\r\n                      inline: 'nearest',\r\n                    });\r\n                  }}\r\n                  useTransparentBackground={true}\r\n                  shape={'circular'}\r\n                  style={{marginLeft: '-8px'}}\r\n                  focusOnClick={true}\r\n                  variant={'secondary'}>\r\n                  <SystemIcons.Clear/>\r\n                </IconButton>\r\n              )}\r\n\r\n              {loading && (\r\n                <Loading className={size}>\r\n                  <LoadingIndicator size={Size.Small} color={COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, theme)}/>\r\n                </Loading>\r\n              )}\r\n            </ChipInputBoundItems>\r\n          </ChipInputContentContainer>\r\n        </ChipInputContainer>\r\n        {validationMessage && (\r\n          <ErrorMessage>\r\n            <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )}\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\n"],"mappings":"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","ignoreList":[]}

package/dist/ChipsInput/ChipInputField.js

@@ -80,14 +80,20 @@ export const ChipInputContainer = styled.div`
   border-radius: 4px;
   margin-bottom: 4px;
   box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};
-  background-color: ${props => COLORS.getColor('white', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   box-sizing: border-box;
   cursor: text;
   outline: none;
   display: flex;
   align-items: center;
 
-  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   &.small {
     padding: 0;
     min-height: 48px;

package/dist/ChipsInput/ChipInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInputField.js","names":["React","Size","States","InputChip","ErrorMessage","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","useTheme","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","jsx","_jsx","jsxs","_jsxs","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","props","getColor","theme","Italic","generateToken","componentType","defaultVariant","ChipInputContainer","ChipInputField","forwardRef","_ref","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","_objectWithoutProperties","_excluded","containerRef","useRef","inputRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","children","onKeyDown","onClick","className","map","chip","icon","variant","Default","text","label","onRemove","_objectSpread","type","id","tabIndex","onChange","stopPropagation","dataTestId","action","useTransparentBackground","shape","style","marginLeft","focusOnClick","Clear","color","TechnicalWarning","propTypes","_pt","string","isRequired","array","bool","func"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\r\nimport {ChipItem} from './ChipInputTypes';\r\nimport {Size, States} from '../types';\r\nimport {InputChip} from '../Chips';\r\nimport {ErrorMessage} from '../InputFields';\r\nimport {\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  scrollBarStyling\r\n} from '../styles';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {LoadingIndicator} from '../LoadingIndicator';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n`;\r\n\r\nconst Loading = styled.div`\r\n  height: 20px;\r\n  width: 20px;\r\n`;\r\n\r\nexport const ChipInputBoundItems = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n  flex: 1;\r\n  min-width: 40px;\r\n`;\r\n\r\nexport const ChipInputContentContainer = styled.div`\r\n  width: 100%;\r\n  background: transparent;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  column-gap: 8px;\r\n  margin-right: 6px;\r\n  padding-right: 10px;\r\n  padding-left: 16px;\r\n  flex-wrap: nowrap;\r\n  overflow-x: scroll;\r\n  min-height: 48px;\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar:horizontal {\r\n    display: none;\r\n  }\r\n\r\n  .action-right:focus,\r\n  button:focus {\r\n    outline-offset: -4px !important;\r\n  }\r\n`;\r\n\r\nexport const ChipInputEl = styled.input`\r\n  border: none;\r\n  outline: none;\r\n\r\n  height: 40px;\r\n  min-width: 40px;\r\n  display: inline-flex;\r\n  flex: 1;\r\n  background: transparent;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  color: ${props => COLORS.getColor('black', props.theme)} !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\nexport const ChipInputContainer = styled.div`\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  cursor: text;\r\n  outline: none;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  &.small {\r\n    padding: 0;\r\n    min-height: 48px;\r\n\r\n    ${ChipInputEl}::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    padding: 4px 0;\r\n    min-height: 56px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.multiline.medium {\r\n    ${ChipInputContentContainer} {\r\n      max-height: calc(48px * 3);\r\n      flex-wrap: wrap;\r\n      overflow-y: auto;\r\n      overflow-x: unset;\r\n    }\r\n  }\r\n\r\n  &.focus-visible-within,\r\n  &:focus {\r\n    ${focusStyles}\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  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.invalid,\r\n  &.invalid:hover,\r\n  &.invalid:focus {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    ${ChipInputContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    cursor: not-allowed;\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    outline: none;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n`;\r\n\r\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\r\n  inputId: string;\r\n  items: ChipItem[];\r\n  disabled?: boolean;\r\n  placeholder?: string;\r\n  altPlaceholder?: string;\r\n  multiLine?: boolean;\r\n  size?: Size.Large | Size.Medium | Size.Small;\r\n  loading?: boolean;\r\n  required?: boolean;\r\n\r\n  validationMessage?: string;\r\n\r\n  onRemoveItem: (item: ChipItem, index: number) => void;\r\n  inputValue: string;\r\n  onInputValueChange: (value: string) => void;\r\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onActivationChange?: (active: boolean) => void;\r\n}\r\n\r\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\r\n  (\r\n    {\r\n      inputId,\r\n      items,\r\n      disabled = false,\r\n      placeholder,\r\n      altPlaceholder,\r\n      multiLine = true,\r\n      size = Size.Medium,\r\n      validationMessage,\r\n      loading,\r\n      onRemoveItem,\r\n      onInputValueChange,\r\n      onInputKeyDown,\r\n      onActivationChange,\r\n      inputValue,\r\n      required,\r\n      onBlur,\r\n      ...rest\r\n    },\r\n    ref,\r\n  ) => {\r\n    const theme = useTheme();\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const inputRef = useFocusVisibleRef([containerRef]);\r\n    \r\n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\r\n\r\n    /**\r\n     * Scroll container to last item on change\r\n     * */\r\n    React.useEffect(() => {\r\n      if (inputRef.current && document.activeElement === inputRef.current) {\r\n        inputRef.current.scrollIntoView({\r\n          block: 'nearest',\r\n          inline: 'nearest',\r\n        });\r\n      }\r\n    }, [containerRef, inputRef, items]);\r\n\r\n    /**\r\n     * Remove last cheap on backspace\r\n     * */\r\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\r\n        onRemoveItem(items[items.length - 1], items.length - 1);\r\n      } else {\r\n        onInputKeyDown(e);\r\n      }\r\n    };\r\n\r\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\r\n      onRemoveItem(item, index);\r\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\r\n    };\r\n\r\n    const handleInputClear = (e: any) => {\r\n      onInputValueChange('');\r\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\r\n    };\r\n\r\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\r\n\r\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\r\n      const currentIndex = Array.from(items).indexOf(e.target as any);\r\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\r\n      const item = items[currentIndex + direction];\r\n      item?.focus({focusVisible: true} as any);\r\n\r\n      onActivationChange && onActivationChange(false);\r\n    };\r\n\r\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n    return (\r\n      <Wrapper onBlur={onBlur}>\r\n        <ChipInputContainer\r\n          data-testid=\"chip-input-container\"\r\n          ref={containerRef}\r\n          onKeyDown={handleContainerKeyDown}\r\n          onClick={() => !disabled && inputRef.current?.focus()}\r\n          className={cls}>\r\n          <ChipInputContentContainer>\r\n            {items?.map((chip: ChipItem, index: number) => (\r\n              <InputChip\r\n                key={`chip_${index}`}\r\n                icon={chip?.icon}\r\n                size={size}\r\n                disabled={chip.disabled || disabled}\r\n                variant={chip.variant || States.Default}\r\n                text={chip.label}\r\n                onRemove={(e) => handleItemRemove(e, chip, index)}\r\n              />\r\n            ))}\r\n            <ChipInputBoundItems>\r\n              <ChipInputEl\r\n                ref={inputRef}\r\n                type=\"text\"\r\n                id={inputId}\r\n                required={required}\r\n                tabIndex={disabled ? -1 : 0}\r\n                value={inputValue}\r\n                onChange={(e) => onInputValueChange(e.target.value)}\r\n                onKeyDown={handleInputKeyDown}\r\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\r\n                onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  onActivationChange && onActivationChange(true);\r\n                }}\r\n                {...rest}\r\n              />\r\n              {inputValue && !disabled && (\r\n                <IconButton\r\n                  id={`clear-btn-${inputId}`}\r\n                  dataTestId={`clear-btn-${inputId}`}\r\n                  action={handleInputClear}\r\n                  ref={(ref) => {\r\n                    ref?.scrollIntoView({\r\n                      block: 'nearest',\r\n                      inline: 'nearest',\r\n                    });\r\n                  }}\r\n                  useTransparentBackground={true}\r\n                  shape={'circular'}\r\n                  style={{marginLeft: '-8px'}}\r\n                  focusOnClick={true}\r\n                  variant={'secondary'}>\r\n                  <SystemIcons.Clear/>\r\n                </IconButton>\r\n              )}\r\n\r\n              {loading && (\r\n                <Loading className={size}>\r\n                  <LoadingIndicator size={Size.Small} color={COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, theme)}/>\r\n                </Loading>\r\n              )}\r\n            </ChipInputBoundItems>\r\n          </ChipInputContentContainer>\r\n        </ChipInputContainer>\r\n        {validationMessage && (\r\n          <ErrorMessage>\r\n            <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )}\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChipInputField.js","names":["React","Size","States","InputChip","ErrorMessage","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","useTheme","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","jsx","_jsx","jsxs","_jsxs","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","props","getColor","theme","Italic","generateToken","componentType","defaultVariant","ChipInputContainer","ChipInputField","forwardRef","_ref","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","_objectWithoutProperties","_excluded","containerRef","useRef","inputRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","children","onKeyDown","onClick","className","map","chip","icon","variant","Default","text","label","onRemove","_objectSpread","type","id","tabIndex","onChange","stopPropagation","dataTestId","action","useTransparentBackground","shape","style","marginLeft","focusOnClick","Clear","color","TechnicalWarning","propTypes","_pt","string","isRequired","array","bool","func"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\r\nimport {ChipItem} from './ChipInputTypes';\r\nimport {Size, States} from '../types';\r\nimport {InputChip} from '../Chips';\r\nimport {ErrorMessage} from '../InputFields';\r\nimport {\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  scrollBarStyling\r\n} from '../styles';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {LoadingIndicator} from '../LoadingIndicator';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n`;\r\n\r\nconst Loading = styled.div`\r\n  height: 20px;\r\n  width: 20px;\r\n`;\r\n\r\nexport const ChipInputBoundItems = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n  flex: 1;\r\n  min-width: 40px;\r\n`;\r\n\r\nexport const ChipInputContentContainer = styled.div`\r\n  width: 100%;\r\n  background: transparent;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  column-gap: 8px;\r\n  margin-right: 6px;\r\n  padding-right: 10px;\r\n  padding-left: 16px;\r\n  flex-wrap: nowrap;\r\n  overflow-x: scroll;\r\n  min-height: 48px;\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar:horizontal {\r\n    display: none;\r\n  }\r\n\r\n  .action-right:focus,\r\n  button:focus {\r\n    outline-offset: -4px !important;\r\n  }\r\n`;\r\n\r\nexport const ChipInputEl = styled.input`\r\n  border: none;\r\n  outline: none;\r\n\r\n  height: 40px;\r\n  min-width: 40px;\r\n  display: inline-flex;\r\n  flex: 1;\r\n  background: transparent;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  color: ${props => COLORS.getColor('black', props.theme)} !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\nexport const ChipInputContainer = styled.div`\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n  box-sizing: border-box;\r\n  cursor: text;\r\n  outline: none;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n  &.small {\r\n    padding: 0;\r\n    min-height: 48px;\r\n\r\n    ${ChipInputEl}::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    padding: 4px 0;\r\n    min-height: 56px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.multiline.medium {\r\n    ${ChipInputContentContainer} {\r\n      max-height: calc(48px * 3);\r\n      flex-wrap: wrap;\r\n      overflow-y: auto;\r\n      overflow-x: unset;\r\n    }\r\n  }\r\n\r\n  &.focus-visible-within,\r\n  &:focus {\r\n    ${focusStyles}\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  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.invalid,\r\n  &.invalid:hover,\r\n  &.invalid:focus {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    ${ChipInputContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    cursor: not-allowed;\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    outline: none;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n`;\r\n\r\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\r\n  inputId: string;\r\n  items: ChipItem[];\r\n  disabled?: boolean;\r\n  placeholder?: string;\r\n  altPlaceholder?: string;\r\n  multiLine?: boolean;\r\n  size?: Size.Large | Size.Medium | Size.Small;\r\n  loading?: boolean;\r\n  required?: boolean;\r\n\r\n  validationMessage?: string;\r\n\r\n  onRemoveItem: (item: ChipItem, index: number) => void;\r\n  inputValue: string;\r\n  onInputValueChange: (value: string) => void;\r\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onActivationChange?: (active: boolean) => void;\r\n}\r\n\r\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\r\n  (\r\n    {\r\n      inputId,\r\n      items,\r\n      disabled = false,\r\n      placeholder,\r\n      altPlaceholder,\r\n      multiLine = true,\r\n      size = Size.Medium,\r\n      validationMessage,\r\n      loading,\r\n      onRemoveItem,\r\n      onInputValueChange,\r\n      onInputKeyDown,\r\n      onActivationChange,\r\n      inputValue,\r\n      required,\r\n      onBlur,\r\n      ...rest\r\n    },\r\n    ref,\r\n  ) => {\r\n    const theme = useTheme();\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const inputRef = useFocusVisibleRef([containerRef]);\r\n    \r\n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\r\n\r\n    /**\r\n     * Scroll container to last item on change\r\n     * */\r\n    React.useEffect(() => {\r\n      if (inputRef.current && document.activeElement === inputRef.current) {\r\n        inputRef.current.scrollIntoView({\r\n          block: 'nearest',\r\n          inline: 'nearest',\r\n        });\r\n      }\r\n    }, [containerRef, inputRef, items]);\r\n\r\n    /**\r\n     * Remove last cheap on backspace\r\n     * */\r\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\r\n        onRemoveItem(items[items.length - 1], items.length - 1);\r\n      } else {\r\n        onInputKeyDown(e);\r\n      }\r\n    };\r\n\r\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\r\n      onRemoveItem(item, index);\r\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\r\n    };\r\n\r\n    const handleInputClear = (e: any) => {\r\n      onInputValueChange('');\r\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\r\n    };\r\n\r\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\r\n\r\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\r\n      const currentIndex = Array.from(items).indexOf(e.target as any);\r\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\r\n      const item = items[currentIndex + direction];\r\n      item?.focus({focusVisible: true} as any);\r\n\r\n      onActivationChange && onActivationChange(false);\r\n    };\r\n\r\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n    return (\r\n      <Wrapper onBlur={onBlur}>\r\n        <ChipInputContainer\r\n          data-testid=\"chip-input-container\"\r\n          ref={containerRef}\r\n          onKeyDown={handleContainerKeyDown}\r\n          onClick={() => !disabled && inputRef.current?.focus()}\r\n          className={cls}>\r\n          <ChipInputContentContainer>\r\n            {items?.map((chip: ChipItem, index: number) => (\r\n              <InputChip\r\n                key={`chip_${index}`}\r\n                icon={chip?.icon}\r\n                size={size}\r\n                disabled={chip.disabled || disabled}\r\n                variant={chip.variant || States.Default}\r\n                text={chip.label}\r\n                onRemove={(e) => handleItemRemove(e, chip, index)}\r\n              />\r\n            ))}\r\n            <ChipInputBoundItems>\r\n              <ChipInputEl\r\n                ref={inputRef}\r\n                type=\"text\"\r\n                id={inputId}\r\n                required={required}\r\n                tabIndex={disabled ? -1 : 0}\r\n                value={inputValue}\r\n                onChange={(e) => onInputValueChange(e.target.value)}\r\n                onKeyDown={handleInputKeyDown}\r\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\r\n                onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  onActivationChange && onActivationChange(true);\r\n                }}\r\n                {...rest}\r\n              />\r\n              {inputValue && !disabled && (\r\n                <IconButton\r\n                  id={`clear-btn-${inputId}`}\r\n                  dataTestId={`clear-btn-${inputId}`}\r\n                  action={handleInputClear}\r\n                  ref={(ref) => {\r\n                    ref?.scrollIntoView({\r\n                      block: 'nearest',\r\n                      inline: 'nearest',\r\n                    });\r\n                  }}\r\n                  useTransparentBackground={true}\r\n                  shape={'circular'}\r\n                  style={{marginLeft: '-8px'}}\r\n                  focusOnClick={true}\r\n                  variant={'secondary'}>\r\n                  <SystemIcons.Clear/>\r\n                </IconButton>\r\n              )}\r\n\r\n              {loading && (\r\n                <Loading className={size}>\r\n                  <LoadingIndicator size={Size.Small} color={COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, theme)}/>\r\n                </Loading>\r\n              )}\r\n            </ChipInputBoundItems>\r\n          </ChipInputContentContainer>\r\n        </ChipInputContainer>\r\n        {validationMessage && (\r\n          <ErrorMessage>\r\n            <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )}\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Footer/Components/FooterTop.cjs

@@ -30,6 +30,7 @@ const ToTop = _styledComponents.default.div`
   height: 48px;
   width: 48px;
   padding: 8px;
+  tabindex: 0;
 
   svg {
     margin: 0 auto;
@@ -96,11 +97,13 @@ const FooterTop = _ref => {
       betaTagBackgroundColor: _styles.COLORS.getColor('white', theme),
       betaTagColor: _styles.COLORS.getColor('neutral_800', theme)
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToTop, {
+      role: "button",
       "data-testid": 'toTopNavigation',
       tabIndex: 0,
       onKeyDown: e => isPressingEnter(e) ? action() : null,
       onClick: action,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineUp, {
+        "aria-hidden": "true",
         size: "24px",
         color: _styles.COLORS.getColor('white', theme)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/dist/Footer/Components/FooterTop.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterTop.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_animatedScrollTo","_interopRequireDefault","_styles","_Logo","_icons","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FooterTopSection","styled","section","ToTop","div","ComponentXSStyling","ComponentTextStyle","UppercaseBold","props","COLORS","getColor","theme","invertedFocusStyles","FooterTop","_ref","sitename","showBetaTag","toTopText","useTheme","isPressingEnter","key","preventDefault","stopPropagation","action","animateScrollTo","jsxs","children","jsx","name","color","inverted","betaTagBackgroundColor","betaTagColor","tabIndex","onKeyDown","onClick","SystemIcons","ArrowLineUp","size","propTypes","_propTypes","string","bool","isRequired","_default","exports"],"sources":["../../../src/Footer/Components/FooterTop.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport animateScrollTo from 'animated-scroll-to';\r\n\r\nimport {COLORS, invertedFocusStyles} from '../../styles';\r\nimport Logo from '../../GlobalNavigationBar/Logo';\r\nimport {SystemIcons} from '../../icons';\r\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\n\r\nconst FooterTopSection = styled.section`\r\n  min-height: 8px;\r\n  color: white;\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin-bottom: 16px;\r\n`;\r\n\r\nconst ToTop = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: auto 0 auto auto;\r\n  border-radius: 4px;\r\n  height: 48px;\r\n  width: 48px;\r\n  padding: 8px;\r\n\r\n  svg {\r\n    margin: 0 auto;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  span {\r\n    margin: 14px auto 0 auto;\r\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\r\n  }\r\n\r\n  &:hover:not(:disabled) {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    svg path,\r\n    svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    span {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(:disabled) {\r\n    ${invertedFocusStyles}\r\n  }\r\n\r\n  &:active:not(:disabled) {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    svg path,\r\n    svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    span {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface FooterTopProps {\r\n  sitename?: string;\r\n  showBetaTag?: boolean;\r\n  toTopText: string;\r\n}\r\n\r\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\r\n  const theme = useTheme();\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  const action = () => {\r\n    animateScrollTo(0);\r\n  };\r\n  return (\r\n    <FooterTopSection>\r\n      <Logo\r\n        name={sitename || ''}\r\n        showBetaTag={showBetaTag}\r\n        color={COLORS.getColor('white', theme)}\r\n        inverted={true}\r\n        betaTagBackgroundColor={COLORS.getColor('white', theme)}\r\n        betaTagColor={COLORS.getColor('neutral_800', theme)}\r\n      />\r\n      <ToTop data-testid={'toTopNavigation'} tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\r\n        <SystemIcons.ArrowLineUp size=\"24px\" color={COLORS.getColor('white', theme)} />\r\n        <span>{toTopText}</span>\r\n      </ToTop>\r\n    </FooterTopSection>\r\n  );\r\n};\r\n\r\nexport default FooterTop;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FooterTop.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_animatedScrollTo","_interopRequireDefault","_styles","_Logo","_icons","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FooterTopSection","styled","section","ToTop","div","ComponentXSStyling","ComponentTextStyle","UppercaseBold","props","COLORS","getColor","theme","invertedFocusStyles","FooterTop","_ref","sitename","showBetaTag","toTopText","useTheme","isPressingEnter","key","preventDefault","stopPropagation","action","animateScrollTo","jsxs","children","jsx","name","color","inverted","betaTagBackgroundColor","betaTagColor","role","tabIndex","onKeyDown","onClick","SystemIcons","ArrowLineUp","size","propTypes","_propTypes","string","bool","isRequired","_default","exports"],"sources":["../../../src/Footer/Components/FooterTop.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport animateScrollTo from 'animated-scroll-to';\r\n\r\nimport {COLORS, invertedFocusStyles} from '../../styles';\r\nimport Logo from '../../GlobalNavigationBar/Logo';\r\nimport {SystemIcons} from '../../icons';\r\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\n\r\nconst FooterTopSection = styled.section`\r\n  min-height: 8px;\r\n  color: white;\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin-bottom: 16px;\r\n`;\r\n\r\nconst ToTop = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: auto 0 auto auto;\r\n  border-radius: 4px;\r\n  height: 48px;\r\n  width: 48px;\r\n  padding: 8px;\r\n  tabindex: 0;\r\n\r\n  svg {\r\n    margin: 0 auto;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  span {\r\n    margin: 14px auto 0 auto;\r\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\r\n  }\r\n\r\n  &:hover:not(:disabled) {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    svg path,\r\n    svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    span {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(:disabled) {\r\n    ${invertedFocusStyles}\r\n  }\r\n\r\n  &:active:not(:disabled) {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    svg path,\r\n    svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    span {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface FooterTopProps {\r\n  sitename?: string;\r\n  showBetaTag?: boolean;\r\n  toTopText: string;\r\n}\r\n\r\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\r\n  const theme = useTheme();\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  const action = () => {\r\n    animateScrollTo(0);\r\n  };\r\n  return (\r\n    <FooterTopSection>\r\n      <Logo \r\n        name={sitename || ''}\r\n        showBetaTag={showBetaTag}\r\n        color={COLORS.getColor('white', theme)}\r\n        inverted={true}\r\n        betaTagBackgroundColor={COLORS.getColor('white', theme)}\r\n        betaTagColor={COLORS.getColor('neutral_800', theme)}\r\n      />\r\n      <ToTop role=\"button\" data-testid={'toTopNavigation'} tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\r\n        <SystemIcons.ArrowLineUp aria-hidden=\"true\" size=\"24px\" color={COLORS.getColor('white', theme)} />\r\n        <span>{toTopText}</span>\r\n      </ToTop>\r\n    </FooterTopSection>\r\n  );\r\n};\r\n\r\nexport default FooterTop;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Footer/Components/FooterTop.js

@@ -22,6 +22,7 @@ const ToTop = styled.div`
   height: 48px;
   width: 48px;
   padding: 8px;
+  tabindex: 0;
 
   svg {
     margin: 0 auto;
@@ -88,11 +89,13 @@ const FooterTop = _ref => {
       betaTagBackgroundColor: COLORS.getColor('white', theme),
       betaTagColor: COLORS.getColor('neutral_800', theme)
     }), /*#__PURE__*/_jsxs(ToTop, {
+      role: "button",
       "data-testid": 'toTopNavigation',
       tabIndex: 0,
       onKeyDown: e => isPressingEnter(e) ? action() : null,
       onClick: action,
       children: [/*#__PURE__*/_jsx(SystemIcons.ArrowLineUp, {
+        "aria-hidden": "true",
         size: "24px",
         color: COLORS.getColor('white', theme)
       }), /*#__PURE__*/_jsx("span", {