@laerdal/life-react-components 1.9.9-dev.2 → 1.9.9-dev.6

package/dist/Card/HorizontalCard/HorizontalCard.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"names":["ContentContainer","styled","div","COLORS","white","Container","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV,6OAMAC,eAAOC,KANP,CAAtB;;AAUA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,u5BAKTF,gBALS,EAMqBG,eAAOG,WAN5B,EAWTN,gBAXS,EAYKO,mBAAWC,YAZhB,EAqBLR,gBArBK,EAsBeG,eAAOM,UAtBtB,EA2BLT,gBA3BK,EA4BSO,mBAAWG,YA5BpB,EAmCLV,gBAnCK,EAoCeG,eAAOQ,WApCtB,EAyCLX,gBAzCK,EA0CSO,mBAAWK,YA1CpB,EAgDPC,mBAhDO,EAuDTb,gBAvDS,CAAf;;AA8DO,IAAMc,cAA4D,GAAG,SAA/DA,cAA+D,OAWO;AAAA,MAVJC,KAUI,QAVJA,KAUI;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJC,IAQI,QARJA,IAQI;AAAA,MAPJC,QAOI,QAPJA,QAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,SAKN;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,QACI,QADJA,QACI;;AAEjF,wBAAsCC,eAAMC,QAAN,CAAqD,EAArD,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,YAAY,GAAGJ,eAAMK,MAAN,CAA6B,IAA7B,CAArB;;AAEA,+BAAgBD,YAAhB,EAA8BF,WAA9B;AAEA,MAAMI,GAAG,aAAMX,OAAN,cAAiBE,MAAM,GAAG,WAAH,GAAiB,EAAxC,cAA8CE,QAAQ,GAAG,UAAH,GAAgB,EAAtE,CAAT;;AAEA,MAAMQ,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,KAACR,QAAD,IAAaF,MAAb,IAAuBA,MAAM,EAA7B;AACD,GAFD;;AAIA,MAAMW,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAA4B;AACpDA,IAAAA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBH,WAAW,EAAhC;AACD,GAFD;;AAIA,sBACE,qBAAC,SAAD;AAAW,IAAA,GAAG,EAAEH,YAAhB;AACW,IAAA,QAAQ,EAAEP,MAAM,IAAI,CAACE,QAAX,GAAsB,CAAtB,GAA0B,CAAC,CADhD;AAEW,IAAA,SAAS,EAAEO,GAFtB;AAGW,IAAA,SAAS,EAAEE,iBAHtB;AAIW,IAAA,OAAO,EAAED,WAJpB;AAKW,IAAA,WAAW,EAAEI,iCALxB;AAAA,2BAME,sBAAC,gBAAD;AAAA,8BAEE,qBAAC,gDAAD;AAAyB,QAAA,KAAK,EAAEf,KAAhC;AACyB,QAAA,IAAI,EAAEF;AAD/B,QAFF,eAKE,qBAAC,sCAAD;AAAoB,QAAA,KAAK,EAAEJ,KAA3B;AACoB,QAAA,WAAW,EAAEC,WADjC;AAEoB,QAAA,IAAI,EAAEC,IAF1B;AAGoB,QAAA,QAAQ,EAAEC;AAH9B,QALF,eAUE,qBAAC,4CAAD;AAAuB,QAAA,GAAG,EAAE,aAAAmB,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA,SAApC;AACuB,QAAA,OAAO,EAAEd,OADhC;AAEuB,QAAA,QAAQ,EAAEC;AAFjC,QAVF;AAAA;AANF,IADF;AAwBD,CApDM;;;eAsDQV,c","sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${ContentContainer} {\n      box-shadow: none;\n    }\n  }\n\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"file":"HorizontalCard.cjs"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"names":["ContentContainer","styled","div","COLORS","white","Container","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV,6OAMAC,eAAOC,KANP,CAAtB;;AAUA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,ghCAKTF,gBALS,EAMqBG,eAAOG,WAN5B,EAWTN,gBAXS,EAYKO,mBAAWC,YAZhB,EAqBLR,gBArBK,EAsBeG,eAAOM,UAtBtB,EA2BLT,gBA3BK,EA4BSO,mBAAWG,YA5BpB,EAmCLV,gBAnCK,EAoCeG,eAAOQ,WApCtB,EAyCLX,gBAzCK,EA0CSO,mBAAWK,YA1CpB,EAgDPC,mBAhDO,EAwDPb,gBAxDO,EAyDOO,mBAAWC,YAzDlB,EA8DPR,gBA9DO,EA+DuBG,eAAOW,WA/D9B,CAAf;;AAqEO,IAAMC,cAA4D,GAAG,SAA/DA,cAA+D,OAWO;AAAA,MAVJC,KAUI,QAVJA,KAUI;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJC,IAQI,QARJA,IAQI;AAAA,MAPJC,QAOI,QAPJA,QAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,SAKN;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,QACI,QADJA,QACI;;AAEjF,wBAAsCC,eAAMC,QAAN,CAAqD,EAArD,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,YAAY,GAAGJ,eAAMK,MAAN,CAA6B,IAA7B,CAArB;;AAEA,+BAAgBD,YAAhB,EAA8BF,WAA9B;AAEA,MAAMI,GAAG,aAAMX,OAAN,cAAiBE,MAAM,GAAG,WAAH,GAAiB,EAAxC,cAA8CE,QAAQ,GAAG,UAAH,GAAgB,EAAtE,CAAT;;AAEA,MAAMQ,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,KAACR,QAAD,IAAaF,MAAb,IAAuBA,MAAM,EAA7B;AACD,GAFD;;AAIA,MAAMW,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAA4B;AACpDA,IAAAA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBH,WAAW,EAAhC;AACD,GAFD;;AAIA,sBACE,qBAAC,SAAD;AAAW,IAAA,GAAG,EAAEH,YAAhB;AACW,IAAA,QAAQ,EAAEP,MAAM,IAAI,CAACE,QAAX,GAAsB,CAAtB,GAA0B,CAAC,CADhD;AAEW,IAAA,SAAS,EAAEO,GAFtB;AAGW,IAAA,SAAS,EAAEE,iBAHtB;AAIW,IAAA,OAAO,EAAED,WAJpB;AAKW,IAAA,WAAW,EAAEI,iCALxB;AAAA,2BAME,sBAAC,gBAAD;AAAA,8BAEE,qBAAC,gDAAD;AAAyB,QAAA,KAAK,EAAEf,KAAhC;AACyB,QAAA,IAAI,EAAEF;AAD/B,QAFF,eAKE,qBAAC,sCAAD;AAAoB,QAAA,KAAK,EAAEJ,KAA3B;AACoB,QAAA,WAAW,EAAEC,WADjC;AAEoB,QAAA,IAAI,EAAEC,IAF1B;AAGoB,QAAA,QAAQ,EAAEC;AAH9B,QALF,eAUE,qBAAC,4CAAD;AAAuB,QAAA,GAAG,EAAE,aAAAmB,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA,SAApC;AACuB,QAAA,OAAO,EAAEd,OADhC;AAEuB,QAAA,QAAQ,EAAEC;AAFjC,QAVF;AAAA;AANF,IADF;AAwBD,CApDM;;;eAsDQV,c","sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${ContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${ContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"file":"HorizontalCard.cjs"}

package/dist/Card/HorizontalCard/HorizontalCard.js

@@ -13,7 +13,7 @@ import { defaultOnMouseDownHandler, useActionWithin } from '../../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), COLORS.white);
-var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      box-shadow: none;\n    }\n  }\n\n"])), ContentContainer, COLORS.neutral_200, ContentContainer, BOXSHADOWS.BOXSHADOW_L1, ContentContainer, COLORS.primary_20, ContentContainer, BOXSHADOWS.BOXSHADOW_L3, ContentContainer, COLORS.primary_100, ContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, ContentContainer);
+var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), ContentContainer, COLORS.neutral_200, ContentContainer, BOXSHADOWS.BOXSHADOW_L1, ContentContainer, COLORS.primary_20, ContentContainer, BOXSHADOWS.BOXSHADOW_L3, ContentContainer, COLORS.primary_100, ContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, ContentContainer, BOXSHADOWS.BOXSHADOW_L1, ContentContainer, COLORS.neutral_100);
 export var HorizontalCard = function HorizontalCard(_ref) {
   var title = _ref.title,
       description = _ref.description,

package/dist/Card/HorizontalCard/HorizontalCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","ContentContainer","div","white","Container","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"mappings":"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","sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${ContentContainer} {\n      box-shadow: none;\n    }\n  }\n\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"file":"HorizontalCard.js"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","ContentContainer","div","white","Container","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"mappings":"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","sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${ContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${ContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"file":"HorizontalCard.js"}

package/dist/Card/HorizontalCard/HorizontalCardActions.cjs

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Button = require("../../Button");
 
@@ -25,6 +27,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 
 var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
@@ -44,7 +50,7 @@ var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_re
     }));
   }, [length]);
 
-  _react.default.useImperativeHandle(ref, function () {
+  (0, _react.useImperativeHandle)(ref, function () {
     return elRefs;
   }, [elRefs]);
 

package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"file":"HorizontalCardActions.cjs"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"file":"HorizontalCardActions.cjs"}

package/dist/Card/HorizontalCard/HorizontalCardActions.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 
 var _templateObject;
 
-import React from 'react';
+import React, { useImperativeHandle } from 'react';
 import { IconButton } from '../../Button';
 import { ToggleButton } from '../../Toggles';
 import { DropdownButton } from '../../Dropdown';
@@ -26,7 +26,7 @@ export var HorizontalCardActions = /*#__PURE__*/React.forwardRef(function (_ref,
       return /*#__PURE__*/React.createRef();
     }));
   }, [length]);
-  React.useImperativeHandle(ref, function () {
+  useImperativeHandle(ref, function () {
     return elRefs;
   }, [elRefs]);
 

package/dist/Card/HorizontalCard/HorizontalCardActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["React","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"file":"HorizontalCardActions.js"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["React","useImperativeHandle","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"file":"HorizontalCardActions.js"}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs

@@ -23,7 +23,7 @@ var IconContainer = _styledComponents.default.div(_templateObject || (_templateO
 
 var ImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n"])));
 
-var Image = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 80px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n"])));
+var Image = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 120px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n"])));
 
 var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
   var image = _ref.image,

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"names":["IconContainer","styled","div","COLORS","black","neutral_500","ImageContainer","Image","img","HorizontalCardThumbnail","image","icon","React","cloneElement","width","height","src","alt"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAEA,IAAMA,aAAa,GAAGC,0BAAOC,GAAV,yPAORC,eAAOC,KAPC,EAUND,eAAOE,WAVD,CAAnB;;AAeA,IAAMC,cAAc,GAAGL,0BAAOC,GAAV,gMAApB;;AAOA,IAAMK,KAAK,GAAGN,0BAAOO,GAAV,iOAAX;;AAaO,IAAMC,uBAAuD,GAAG,SAA1DA,uBAA0D,OAGO;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADJC,IACI,QADJA,IACI;AAE5E,sBACE;AAAA,eAEIA,IAAI,iBACJ,qBAAC,aAAD;AAAA,6BACGC,eAAMC,YAAN,CAAmBF,IAAnB,EAAyB;AAACG,QAAAA,KAAK,EAAE,EAAR;AAAYC,QAAAA,MAAM,EAAE;AAApB,OAAzB;AADH,MAHJ,EAQIL,KAAK,iBACL,qBAAC,cAAD;AAAA,6BACE,qBAAC,KAAD;AAAO,QAAA,GAAG,EAAEA,KAAK,CAACM,GAAlB;AAAuB,QAAA,GAAG,EAAEN,KAAK,CAACO,GAAlC;AAAuC,QAAA,KAAK,EAAEP,KAAK,CAACI,KAApD;AAA2D,QAAA,MAAM,EAAEJ,KAAK,CAACK;AAAzE;AADF,MATJ;AAAA,IADF;AAgBD,CArBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\n\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nconst Image = styled.img`\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 80px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n                                                                          image,\n                                                                          icon\n                                                                        }) => {\n\n  return (\n    <>\n      {\n        icon &&\n        <IconContainer>\n          {React.cloneElement(icon, {width: 48, height: 48})}\n        </IconContainer>\n      }\n      {\n        image &&\n        <ImageContainer>\n          <Image src={image.src} alt={image.alt} width={image.width} height={image.height}/>\n        </ImageContainer>\n      }\n    </>\n  )\n};\n"],"file":"HorizontalCardThumbnail.cjs"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"names":["IconContainer","styled","div","COLORS","black","neutral_500","ImageContainer","Image","img","HorizontalCardThumbnail","image","icon","React","cloneElement","width","height","src","alt"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAEA,IAAMA,aAAa,GAAGC,0BAAOC,GAAV,yPAORC,eAAOC,KAPC,EAUND,eAAOE,WAVD,CAAnB;;AAeA,IAAMC,cAAc,GAAGL,0BAAOC,GAAV,gMAApB;;AAOA,IAAMK,KAAK,GAAGN,0BAAOO,GAAV,kOAAX;;AAaO,IAAMC,uBAAuD,GAAG,SAA1DA,uBAA0D,OAGO;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADJC,IACI,QADJA,IACI;AAE5E,sBACE;AAAA,eAEIA,IAAI,iBACJ,qBAAC,aAAD;AAAA,6BACGC,eAAMC,YAAN,CAAmBF,IAAnB,EAAyB;AAACG,QAAAA,KAAK,EAAE,EAAR;AAAYC,QAAAA,MAAM,EAAE;AAApB,OAAzB;AADH,MAHJ,EAQIL,KAAK,iBACL,qBAAC,cAAD;AAAA,6BACE,qBAAC,KAAD;AAAO,QAAA,GAAG,EAAEA,KAAK,CAACM,GAAlB;AAAuB,QAAA,GAAG,EAAEN,KAAK,CAACO,GAAlC;AAAuC,QAAA,KAAK,EAAEP,KAAK,CAACI,KAApD;AAA2D,QAAA,MAAM,EAAEJ,KAAK,CAACK;AAAzE;AADF,MATJ;AAAA,IADF;AAgBD,CArBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\n\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nconst Image = styled.img`\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 120px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n                                                                          image,\n                                                                          icon\n                                                                        }) => {\n\n  return (\n    <>\n      {\n        icon &&\n        <IconContainer>\n          {React.cloneElement(icon, {width: 48, height: 48})}\n        </IconContainer>\n      }\n      {\n        image &&\n        <ImageContainer>\n          <Image src={image.src} alt={image.alt} width={image.width} height={image.height}/>\n        </ImageContainer>\n      }\n    </>\n  )\n};\n"],"file":"HorizontalCardThumbnail.cjs"}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js

@@ -10,7 +10,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var IconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
 var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n"])));
-var Image = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 80px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n"])));
+var Image = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 120px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n"])));
 export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
   var image = _ref.image,
       icon = _ref.icon;

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"names":["React","styled","COLORS","IconContainer","div","black","neutral_500","ImageContainer","Image","img","HorizontalCardThumbnail","image","icon","cloneElement","width","height","src","alt"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,cAArB;;;;AAEA,IAAMC,aAAa,GAAGF,MAAM,CAACG,GAAV,2OAORF,MAAM,CAACG,KAPC,EAUNH,MAAM,CAACI,WAVD,CAAnB;AAeA,IAAMC,cAAc,GAAGN,MAAM,CAACG,GAAV,kLAApB;AAOA,IAAMI,KAAK,GAAGP,MAAM,CAACQ,GAAV,mNAAX;AAaA,OAAO,IAAMC,uBAAuD,GAAG,SAA1DA,uBAA0D,OAGO;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADJC,IACI,QADJA,IACI;AAE5E,sBACE;AAAA,eAEIA,IAAI,iBACJ,KAAC,aAAD;AAAA,6BACGZ,KAAK,CAACa,YAAN,CAAmBD,IAAnB,EAAyB;AAACE,QAAAA,KAAK,EAAE,EAAR;AAAYC,QAAAA,MAAM,EAAE;AAApB,OAAzB;AADH,MAHJ,EAQIJ,KAAK,iBACL,KAAC,cAAD;AAAA,6BACE,KAAC,KAAD;AAAO,QAAA,GAAG,EAAEA,KAAK,CAACK,GAAlB;AAAuB,QAAA,GAAG,EAAEL,KAAK,CAACM,GAAlC;AAAuC,QAAA,KAAK,EAAEN,KAAK,CAACG,KAApD;AAA2D,QAAA,MAAM,EAAEH,KAAK,CAACI;AAAzE;AADF,MATJ;AAAA,IADF;AAgBD,CArBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\n\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nconst Image = styled.img`\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 80px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n                                                                          image,\n                                                                          icon\n                                                                        }) => {\n\n  return (\n    <>\n      {\n        icon &&\n        <IconContainer>\n          {React.cloneElement(icon, {width: 48, height: 48})}\n        </IconContainer>\n      }\n      {\n        image &&\n        <ImageContainer>\n          <Image src={image.src} alt={image.alt} width={image.width} height={image.height}/>\n        </ImageContainer>\n      }\n    </>\n  )\n};\n"],"file":"HorizontalCardThumbnail.js"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"names":["React","styled","COLORS","IconContainer","div","black","neutral_500","ImageContainer","Image","img","HorizontalCardThumbnail","image","icon","cloneElement","width","height","src","alt"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,cAArB;;;;AAEA,IAAMC,aAAa,GAAGF,MAAM,CAACG,GAAV,2OAORF,MAAM,CAACG,KAPC,EAUNH,MAAM,CAACI,WAVD,CAAnB;AAeA,IAAMC,cAAc,GAAGN,MAAM,CAACG,GAAV,kLAApB;AAOA,IAAMI,KAAK,GAAGP,MAAM,CAACQ,GAAV,oNAAX;AAaA,OAAO,IAAMC,uBAAuD,GAAG,SAA1DA,uBAA0D,OAGO;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADJC,IACI,QADJA,IACI;AAE5E,sBACE;AAAA,eAEIA,IAAI,iBACJ,KAAC,aAAD;AAAA,6BACGZ,KAAK,CAACa,YAAN,CAAmBD,IAAnB,EAAyB;AAACE,QAAAA,KAAK,EAAE,EAAR;AAAYC,QAAAA,MAAM,EAAE;AAApB,OAAzB;AADH,MAHJ,EAQIJ,KAAK,iBACL,KAAC,cAAD;AAAA,6BACE,KAAC,KAAD;AAAO,QAAA,GAAG,EAAEA,KAAK,CAACK,GAAlB;AAAuB,QAAA,GAAG,EAAEL,KAAK,CAACM,GAAlC;AAAuC,QAAA,KAAK,EAAEN,KAAK,CAACG,KAApD;AAA2D,QAAA,MAAM,EAAEH,KAAK,CAACI;AAAzE;AADF,MATJ;AAAA,IADF;AAgBD,CArBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\n\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nconst Image = styled.img`\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 120px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n                                                                          image,\n                                                                          icon\n                                                                        }) => {\n\n  return (\n    <>\n      {\n        icon &&\n        <IconContainer>\n          {React.cloneElement(icon, {width: 48, height: 48})}\n        </IconContainer>\n      }\n      {\n        image &&\n        <ImageContainer>\n          <Image src={image.src} alt={image.alt} width={image.width} height={image.height}/>\n        </ImageContainer>\n      }\n    </>\n  )\n};\n"],"file":"HorizontalCardThumbnail.js"}

package/dist/ChipsInput/ChipInputField.cjs

@@ -140,6 +140,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ChipInputContainer, {
+      "data-testid": "chip-input-container",
       ref: containerRef,
       onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
@@ -178,6 +179,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
               onActivationChange && onActivationChange(true);
             }
           }), inputValue && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            id: "clear-btn",
             action: handleInputClear,
             ref: function ref(_ref2) {
               _ref2 === null || _ref2 === void 0 ? void 0 : _ref2.scrollIntoView({

package/dist/ChipsInput/ChipInputField.cjs.map

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

package/dist/ChipsInput/ChipInputField.js

@@ -102,6 +102,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/_jsxs(Wrapper, {
     children: [/*#__PURE__*/_jsx(ChipInputContainer, {
+      "data-testid": "chip-input-container",
       ref: containerRef,
       onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
@@ -140,6 +141,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               onActivationChange && onActivationChange(true);
             }
           }), inputValue && !disabled && /*#__PURE__*/_jsx(IconButton, {
+            id: "clear-btn",
             action: handleInputClear,
             ref: function ref(_ref2) {
               _ref2 === null || _ref2 === void 0 ? void 0 : _ref2.scrollIntoView({

package/dist/ChipsInput/ChipInputField.js.map

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