@laerdal/life-react-components 1.9.8-dev.22 → 1.9.8-dev.25

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"names":["Container","styled","div","Title","ComponentTextStyle","Bold","COLORS","black","neutral_500","Description","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,6KAAf;;AAQA,IAAMC,KAAK,GAAGF,0BAAOC,GAAV,wIACP,+BAAkBE,2BAAmBC,IAArC,EAA2CC,eAAOC,KAAlD,CADO,EAGED,eAAOE,WAHT,CAAX;;AAOA,IAAMC,WAAW,GAAGR,0BAAOC,GAAV,gGACb,gCAAmBE,2BAAmBM,OAAtC,EAA+CJ,eAAOK,WAAtD,CADa,CAAjB;;AAIA,IAAMC,aAAa,GAAGX,0BAAOC,GAAV,qLAAnB;;AAUO,IAAMW,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,WAGI,QAHJA,WAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;AAEvE,sBACE,sBAAC,SAAD;AAAA,4BACE,qBAAC,KAAD;AAAA,gBAAQH;AAAR,MADF,EAEGC,WAAW,iBAAI,qBAAC,WAAD;AAAA,gBAAcA;AAAd,MAFlB,EAIIE,IAAI,iBACJ,qBAAC,aAAD;AAAA,gBAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;AAAA,4BACvB,qBAAC,QAAD;AAAiB,UAAA,KAAK,EAAED,GAAG,CAACE,KAA5B;AAAmC,UAAA,OAAO,EAAEF,GAAG,CAACG,OAAhD;AAAyD,UAAA,IAAI,EAAEH,GAAG,CAACI;AAAnE,WAAUH,KAAV,CADuB;AAAA,OAAT;AAAhB,MALJ,EASGJ,QAAQ,iBAAI,qBAAC,8BAAD;AAAgB,MAAA,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;AAAuC,MAAA,GAAG,EAAER,QAAQ,CAACS;AAArD,MATf;AAAA,IADF;AAaD,CApBM","sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\nimport {LinearProgress} from '../../LinearProgress';\r\nimport {Tag} from '../../Tag';\r\n\r\nconst Container = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 16px;\r\n`;\r\n\r\nconst Title = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\r\n  .disabled & {\r\n    color: ${COLORS.neutral_500};\r\n  }\r\n`;\r\n\r\nconst Description = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n`;\r\n\r\nconst TagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\r\n\r\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\r\n                                                                     title,\r\n                                                                     description,\r\n                                                                     progress,\r\n                                                                     tags,\r\n                                                                   }) => {\r\n\r\n  return (\r\n    <Container>\r\n      <Title>{title}</Title>\r\n      {description && <Description>{description}</Description>}\r\n      {\r\n        tags &&\r\n        <TagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </TagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </Container>\r\n  )\r\n};\r\n"],"file":"HorizontalCardBody.cjs"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"names":["Container","styled","div","Title","ComponentTextStyle","Bold","COLORS","black","neutral_500","Description","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,6KAAf;;AAQA,IAAMC,KAAK,GAAGF,0BAAOC,GAAV,wIACP,+BAAkBE,2BAAmBC,IAArC,EAA2CC,eAAOC,KAAlD,CADO,EAGED,eAAOE,WAHT,CAAX;;AAOA,IAAMC,WAAW,GAAGR,0BAAOC,GAAV,gGACb,gCAAmBE,2BAAmBM,OAAtC,EAA+CJ,eAAOK,WAAtD,CADa,CAAjB;;AAIA,IAAMC,aAAa,GAAGX,0BAAOC,GAAV,qLAAnB;;AAUO,IAAMW,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,WAGI,QAHJA,WAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;AAEvE,sBACE,sBAAC,SAAD;AAAA,4BACE,qBAAC,KAAD;AAAA,gBAAQH;AAAR,MADF,EAEGC,WAAW,iBAAI,qBAAC,WAAD;AAAA,gBAAcA;AAAd,MAFlB,EAIIE,IAAI,iBACJ,qBAAC,aAAD;AAAA,gBAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;AAAA,4BACvB,qBAAC,QAAD;AAAiB,UAAA,KAAK,EAAED,GAAG,CAACE,KAA5B;AAAmC,UAAA,OAAO,EAAEF,GAAG,CAACG,OAAhD;AAAyD,UAAA,IAAI,EAAEH,GAAG,CAACI;AAAnE,WAAUH,KAAV,CADuB;AAAA,OAAT;AAAhB,MALJ,EASGJ,QAAQ,iBAAI,qBAAC,8BAAD;AAAgB,MAAA,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;AAAuC,MAAA,GAAG,EAAER,QAAQ,CAACS;AAArD,MATf;AAAA,IADF;AAaD,CApBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n`;\n\nconst Title = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nconst Description = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n                                                                     title,\n                                                                     description,\n                                                                     progress,\n                                                                     tags,\n                                                                   }) => {\n\n  return (\n    <Container>\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n      {\n        tags &&\n        <TagsContainer>{tags.map((tag, index) => (\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n        </TagsContainer>\n      }\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n    </Container>\n  )\n};\n"],"file":"HorizontalCardBody.cjs"}

package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-declare type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
-export declare const HorizontalCardBody: React.FunctionComponent<Props>;
-export {};
+import React from 'react';
+import { HorizontalCardProps } from './types';
+declare type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
+export declare const HorizontalCardBody: React.FunctionComponent<Props>;
+export {};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","Container","div","Title","Bold","black","neutral_500","Description","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,kBAAnC,EAAuDC,kBAAvD,QAAgF,cAAhF;AACA,SAAQC,cAAR,QAA6B,sBAA7B;AACA,SAAQC,GAAR,QAAkB,WAAlB;;;AAEA,IAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAV,+JAAf;AAQA,IAAMC,KAAK,GAAGT,MAAM,CAACQ,GAAV,0HACPN,iBAAiB,CAACC,kBAAkB,CAACO,IAApB,EAA0BT,MAAM,CAACU,KAAjC,CADV,EAGEV,MAAM,CAACW,WAHT,CAAX;AAOA,IAAMC,WAAW,GAAGb,MAAM,CAACQ,GAAV,kFACbJ,kBAAkB,CAACD,kBAAkB,CAACW,OAApB,EAA6Bb,MAAM,CAACc,WAApC,CADL,CAAjB;AAIA,IAAMC,aAAa,GAAGhB,MAAM,CAACQ,GAAV,uKAAnB;AAUA,OAAO,IAAMS,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,WAGI,QAHJA,WAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;AAEvE,sBACE,MAAC,SAAD;AAAA,4BACE,KAAC,KAAD;AAAA,gBAAQH;AAAR,MADF,EAEGC,WAAW,iBAAI,KAAC,WAAD;AAAA,gBAAcA;AAAd,MAFlB,EAIIE,IAAI,iBACJ,KAAC,aAAD;AAAA,gBAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;AAAA,4BACvB,KAAC,GAAD;AAAiB,UAAA,KAAK,EAAED,GAAG,CAACE,KAA5B;AAAmC,UAAA,OAAO,EAAEF,GAAG,CAACG,OAAhD;AAAyD,UAAA,IAAI,EAAEH,GAAG,CAACI;AAAnE,WAAUH,KAAV,CADuB;AAAA,OAAT;AAAhB,MALJ,EASGJ,QAAQ,iBAAI,KAAC,cAAD;AAAgB,MAAA,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;AAAuC,MAAA,GAAG,EAAER,QAAQ,CAACS;AAArD,MATf;AAAA,IADF;AAaD,CApBM","sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\nimport {LinearProgress} from '../../LinearProgress';\r\nimport {Tag} from '../../Tag';\r\n\r\nconst Container = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 16px;\r\n`;\r\n\r\nconst Title = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\r\n  .disabled & {\r\n    color: ${COLORS.neutral_500};\r\n  }\r\n`;\r\n\r\nconst Description = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n`;\r\n\r\nconst TagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\r\n\r\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\r\n                                                                     title,\r\n                                                                     description,\r\n                                                                     progress,\r\n                                                                     tags,\r\n                                                                   }) => {\r\n\r\n  return (\r\n    <Container>\r\n      <Title>{title}</Title>\r\n      {description && <Description>{description}</Description>}\r\n      {\r\n        tags &&\r\n        <TagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </TagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </Container>\r\n  )\r\n};\r\n"],"file":"HorizontalCardBody.js"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","Container","div","Title","Bold","black","neutral_500","Description","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,kBAAnC,EAAuDC,kBAAvD,QAAgF,cAAhF;AACA,SAAQC,cAAR,QAA6B,sBAA7B;AACA,SAAQC,GAAR,QAAkB,WAAlB;;;AAEA,IAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAV,+JAAf;AAQA,IAAMC,KAAK,GAAGT,MAAM,CAACQ,GAAV,0HACPN,iBAAiB,CAACC,kBAAkB,CAACO,IAApB,EAA0BT,MAAM,CAACU,KAAjC,CADV,EAGEV,MAAM,CAACW,WAHT,CAAX;AAOA,IAAMC,WAAW,GAAGb,MAAM,CAACQ,GAAV,kFACbJ,kBAAkB,CAACD,kBAAkB,CAACW,OAApB,EAA6Bb,MAAM,CAACc,WAApC,CADL,CAAjB;AAIA,IAAMC,aAAa,GAAGhB,MAAM,CAACQ,GAAV,uKAAnB;AAUA,OAAO,IAAMS,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,WAGI,QAHJA,WAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;AAEvE,sBACE,MAAC,SAAD;AAAA,4BACE,KAAC,KAAD;AAAA,gBAAQH;AAAR,MADF,EAEGC,WAAW,iBAAI,KAAC,WAAD;AAAA,gBAAcA;AAAd,MAFlB,EAIIE,IAAI,iBACJ,KAAC,aAAD;AAAA,gBAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;AAAA,4BACvB,KAAC,GAAD;AAAiB,UAAA,KAAK,EAAED,GAAG,CAACE,KAA5B;AAAmC,UAAA,OAAO,EAAEF,GAAG,CAACG,OAAhD;AAAyD,UAAA,IAAI,EAAEH,GAAG,CAACI;AAAnE,WAAUH,KAAV,CADuB;AAAA,OAAT;AAAhB,MALJ,EASGJ,QAAQ,iBAAI,KAAC,cAAD;AAAgB,MAAA,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;AAAuC,MAAA,GAAG,EAAER,QAAQ,CAACS;AAArD,MATf;AAAA,IADF;AAaD,CApBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n`;\n\nconst Title = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nconst Description = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n                                                                     title,\n                                                                     description,\n                                                                     progress,\n                                                                     tags,\n                                                                   }) => {\n\n  return (\n    <Container>\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n      {\n        tags &&\n        <TagsContainer>{tags.map((tag, index) => (\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n        </TagsContainer>\n      }\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n    </Container>\n  )\n};\n"],"file":"HorizontalCardBody.js"}

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';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\n\r\nconst IconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 80px;\r\n  height: 80px;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .disabled & {\r\n    color: ${COLORS.neutral_500};\r\n  }\r\n`;\r\n\r\n\r\nconst ImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n`;\r\n\r\nconst Image = styled.img`\r\n  mix-blend-mode: multiply;\r\n  object-fit: cover;\r\n  width: 80px;\r\n  height: 100%;\r\n\r\n  .disabled & {\r\n    filter: grayscale(100%);\r\n  }\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n        <IconContainer>\r\n          {React.cloneElement(icon, {width: 48, height: 48})}\r\n        </IconContainer>\r\n      }\r\n      {\r\n        image &&\r\n        <ImageContainer>\r\n          <Image src={image.src} alt={image.alt} width={image.width} height={image.height}/>\r\n        </ImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\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,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"}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-declare type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
-export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
-export {};
+import React from 'react';
+import { HorizontalCardProps } from './types';
+declare type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
+export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
+export {};

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';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\n\r\nconst IconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 80px;\r\n  height: 80px;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .disabled & {\r\n    color: ${COLORS.neutral_500};\r\n  }\r\n`;\r\n\r\n\r\nconst ImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n`;\r\n\r\nconst Image = styled.img`\r\n  mix-blend-mode: multiply;\r\n  object-fit: cover;\r\n  width: 80px;\r\n  height: 100%;\r\n\r\n  .disabled & {\r\n    filter: grayscale(100%);\r\n  }\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n        <IconContainer>\r\n          {React.cloneElement(icon, {width: 48, height: 48})}\r\n        </IconContainer>\r\n      }\r\n      {\r\n        image &&\r\n        <ImageContainer>\r\n          <Image src={image.src} alt={image.alt} width={image.width} height={image.height}/>\r\n        </ImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\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,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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA","sourcesContent":["export * from './types';\r\n\r\nexport { default as HorizontalCard } from './HorizontalCard';\r\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA","sourcesContent":["export * from './types';\n\nexport { default as HorizontalCard } from './HorizontalCard';\n"],"file":"index.cjs"}

package/dist/Card/HorizontalCard/index.d.ts

@@ -1,2 +1,2 @@
-export * from './types';
-export { default as HorizontalCard } from './HorizontalCard';
+export * from './types';
+export { default as HorizontalCard } from './HorizontalCard';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/index.ts"],"names":["default","HorizontalCard"],"mappings":"AAAA,cAAc,SAAd;AAEA,SAASA,OAAO,IAAIC,cAApB,QAA0C,kBAA1C","sourcesContent":["export * from './types';\r\n\r\nexport { default as HorizontalCard } from './HorizontalCard';\r\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/index.ts"],"names":["default","HorizontalCard"],"mappings":"AAAA,cAAc,SAAd;AAEA,SAASA,OAAO,IAAIC,cAApB,QAA0C,kBAA1C","sourcesContent":["export * from './types';\n\nexport { default as HorizontalCard } from './HorizontalCard';\n"],"file":"index.js"}

package/dist/Card/HorizontalCard/types.d.ts

@@ -1,40 +1,40 @@
-import { IconButtonProps } from '../../Button/Iconbutton';
-import React from 'react';
-import { ToggleButtonProps } from '../../Toggles/ToggleButton';
-import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
-import { TagVariants } from '../../Tag';
-import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
-export declare type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
-    componentType: 'icon';
-    icon: React.ReactNode;
-};
-export declare type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
-    componentType: 'toggle';
-};
-export declare type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
-    componentType: 'dropdown';
-    icon: React.ReactNode;
-};
-export interface HorizontalCardTag {
-    label: string;
-    icon?: React.ReactNode;
-    variant?: TagVariants;
-}
-export declare type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
-export interface HorizontalCardProps {
-    variant?: 'outline' | 'elevated';
-    action?: () => void;
-    disabled?: boolean;
-    title: string;
-    description?: string;
-    icon?: React.ReactElement;
-    image?: {
-        src: string;
-        alt?: string;
-        height?: string;
-        width?: string;
-    };
-    tags?: HorizontalCardTag[];
-    progress?: HorizontalCardLinearProgression;
-    actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];
-}
+import { IconButtonProps } from '../../Button/Iconbutton';
+import React from 'react';
+import { ToggleButtonProps } from '../../Toggles/ToggleButton';
+import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
+import { TagVariants } from '../../Tag';
+import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
+export declare type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
+    componentType: 'icon';
+    icon: React.ReactNode;
+};
+export declare type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
+    componentType: 'toggle';
+};
+export declare type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
+    componentType: 'dropdown';
+    icon: React.ReactNode;
+};
+export interface HorizontalCardTag {
+    label: string;
+    icon?: React.ReactNode;
+    variant?: TagVariants;
+}
+export declare type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
+export interface HorizontalCardProps {
+    variant?: 'outline' | 'elevated';
+    action?: () => void;
+    disabled?: boolean;
+    title: string;
+    description?: string;
+    icon?: React.ReactElement;
+    image?: {
+        src: string;
+        alt?: string;
+        height?: string;
+        width?: string;
+    };
+    tags?: HorizontalCardTag[];
+    progress?: HorizontalCardLinearProgression;
+    actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];
+}

package/dist/Card/VerticalCard/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","defaultOnMouseDownHandler","a","key","e","instance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,wVACZC,cAAOC,KADK,EAWhBC,kBAAWC,YAXK,EAeVH,cAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,0sBAKdO,kBALc,EAYZT,qBAZY,EAcUG,cAAOO,UAdjB,EAkBUP,cAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,kBAAWO,YA1Bf,EA8BIP,kBAAWQ,YA9Bf,CAAb;;;;AAmDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAOkB;AAAA,MANfC,aAMe,QANfA,aAMe;AAAA,MALfC,eAKe,QALfA,eAKe;AAAA,MAJfC,kBAIe,QAJfA,kBAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,0BADfC,OACe;AAAA,MADfA,OACe,6BADL,SACK;;AAGjE,wBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AAEA,8BAAgBC,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;AAEA,MAAMG,GAAG,aAAM,CAAC,CAACb,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,CAAT;AAEA,sBAEE,qBAAC,OAAD;AAAS,IAAA,GAAG,EAAEO,YAAd;AACS,IAAA,SAAS,EAAEC,GADpB;AAES,IAAA,QAAQ,EAAE,CAAC,CAACb,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;AAGS,IAAA,WAAW,EAAEU,gCAHtB;AAIS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACZ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAJrB;AAKS,IAAA,OAAO,EAAE,iBAAAiB,CAAC;AAAA,aAAI,CAACb,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KALnB;AAMS,mBAAa,cANtB;AAAA,2BAOE,sBAAC,qBAAD;AAAA,iBAEIC,eAAe,iBACf,qBAAC,uBAAD;AAAgB,QAAA,GAAG,EAAES;AAArB,SACMT,eADN;AACuB,QAAA,QAAQ,EAAEG;AADjC,SAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;AAAmB,QAAA,GAAG,EAAE,aAAAe,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA;AAAhC,SACuBf,kBADvB;AAC2C,QAAA,QAAQ,EAAEC;AADrD,SAZJ;AAAA;AAPF,IAFF;AA4BD,CA9CD;;;AAREJ,EAAAA,a;AACAI,EAAAA,Q;AAIAC,EAAAA,O,4BAAU,S,EAAY,U;;eAmDTN,I","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainer = styled.div`\r\n  background-color: ${COLORS.white};\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${COLORS.neutral_200};\r\n  }\r\n`;\r\n\r\n\r\nexport const Wrapper = styled.div`\r\n  height: max-content;\r\n  width: max-content;\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainer} {\r\n        &:hover {\r\n          background-color: ${COLORS.primary_20};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${COLORS.primary_100};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainer} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps {\r\n  onCardClicked?: () => {};\r\n  disabled?: boolean;\r\n  topSectionProps?: CardTopSectionProps;\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'outline'\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\r\n\r\n  return (\r\n\r\n    <Wrapper ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}>\r\n      <CardTopLevelContainer>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainer>\r\n    </Wrapper>\r\n\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"file":"Card.cjs"}
+{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","defaultOnMouseDownHandler","a","key","e","instance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,wVACZC,cAAOC,KADK,EAWhBC,kBAAWC,YAXK,EAeVH,cAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,0sBAKdO,kBALc,EAYZT,qBAZY,EAcUG,cAAOO,UAdjB,EAkBUP,cAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,kBAAWO,YA1Bf,EA8BIP,kBAAWQ,YA9Bf,CAAb;;;;AAmDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAOkB;AAAA,MANfC,aAMe,QANfA,aAMe;AAAA,MALfC,eAKe,QALfA,eAKe;AAAA,MAJfC,kBAIe,QAJfA,kBAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,0BADfC,OACe;AAAA,MADfA,OACe,6BADL,SACK;;AAGjE,wBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AAEA,8BAAgBC,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;AAEA,MAAMG,GAAG,aAAM,CAAC,CAACb,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,CAAT;AAEA,sBAEE,qBAAC,OAAD;AAAS,IAAA,GAAG,EAAEO,YAAd;AACS,IAAA,SAAS,EAAEC,GADpB;AAES,IAAA,QAAQ,EAAE,CAAC,CAACb,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;AAGS,IAAA,WAAW,EAAEU,gCAHtB;AAIS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACZ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAJrB;AAKS,IAAA,OAAO,EAAE,iBAAAiB,CAAC;AAAA,aAAI,CAACb,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KALnB;AAMS,mBAAa,cANtB;AAAA,2BAOE,sBAAC,qBAAD;AAAA,iBAEIC,eAAe,iBACf,qBAAC,uBAAD;AAAgB,QAAA,GAAG,EAAES;AAArB,SACMT,eADN;AACuB,QAAA,QAAQ,EAAEG;AADjC,SAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;AAAmB,QAAA,GAAG,EAAE,aAAAe,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA;AAAhC,SACuBf,kBADvB;AAC2C,QAAA,QAAQ,EAAEC;AADrD,SAZJ;AAAA;AAPF,IAFF;AA4BD,CA9CD;;;AAREJ,EAAAA,a;AACAI,EAAAA,Q;AAIAC,EAAAA,O,4BAAU,S,EAAY,U;;eAmDTN,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'outline'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}

package/dist/Card/VerticalCard/Card.d.ts

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import { CardTopSectionProps } from './CardTopSection';
-import { CardMiddleSectionProps } from './CardMiddleSection';
-import { CardBottomSectionProps } from './CardBottomSection';
-export declare const CardTopLevelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface CardProps {
-    onCardClicked?: () => {};
-    disabled?: boolean;
-    topSectionProps?: CardTopSectionProps;
-    middleSectionProps?: CardMiddleSectionProps;
-    bottomSectionProps?: CardBottomSectionProps;
-    variant?: 'outline' | 'elevated';
-}
-declare const Card: React.FunctionComponent<CardProps>;
-export default Card;
+import * as React from 'react';
+import { CardTopSectionProps } from './CardTopSection';
+import { CardMiddleSectionProps } from './CardMiddleSection';
+import { CardBottomSectionProps } from './CardBottomSection';
+export declare const CardTopLevelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface CardProps {
+    onCardClicked?: () => {};
+    disabled?: boolean;
+    topSectionProps?: CardTopSectionProps;
+    middleSectionProps?: CardMiddleSectionProps;
+    bottomSectionProps?: CardBottomSectionProps;
+    variant?: 'outline' | 'elevated';
+}
+declare const Card: React.FunctionComponent<CardProps>;
+export default Card;

package/dist/Card/VerticalCard/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainer = styled.div`\r\n  background-color: ${COLORS.white};\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${COLORS.neutral_200};\r\n  }\r\n`;\r\n\r\n\r\nexport const Wrapper = styled.div`\r\n  height: max-content;\r\n  width: max-content;\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainer} {\r\n        &:hover {\r\n          background-color: ${COLORS.primary_20};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${COLORS.primary_100};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainer} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps {\r\n  onCardClicked?: () => {};\r\n  disabled?: boolean;\r\n  topSectionProps?: CardTopSectionProps;\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'outline'\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\r\n\r\n  return (\r\n\r\n    <Wrapper ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}>\r\n      <CardTopLevelContainer>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainer>\r\n    </Wrapper>\r\n\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"file":"Card.js"}
+{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'outline'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}

package/dist/Card/VerticalCard/CardBottomSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"names":["CardProgressContainer","styled","div","CardNotesContainer","COLORS","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","React","forwardRef","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","x","index","e","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  progressLevel?: number;\r\n  progressMax?: number;\r\n  progressType?: LinearProgressType;\r\n\r\n  noteLeft?: string;\r\n  noteLeftIcon?: React.ReactNode;\r\n  noteRight?: string;\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  authorName?: string;\r\n  actions?: ActionItem[];\r\n  logo?: React.ReactNode;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardProgressContainer = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardNotesContainer = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${COLORS.neutral_500};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.disabled ? `\r\n    color: ${COLORS.neutral_300};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardNoteLeft = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardNoteRight = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardButtonRowContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n                                              progressLevel,\r\n                                              progressMax,\r\n                                              progressType = LinearProgressType.Line,\r\n                                              noteLeft,\r\n                                              noteLeftIcon,\r\n                                              noteRight,\r\n                                              noteRightIcon,\r\n                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomDivider/>}\r\n      {progressLevel != undefined && <CardProgressContainer>\r\n        <LinearProgress size={Size.Small}\r\n                        type={progressType}\r\n                        variant={LinearProgressVariant.Normal}\r\n                        value={progressLevel}\r\n                        max={progressMax ?? progressLevel}/>\r\n      </CardProgressContainer>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardNoteLeft>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardNoteLeft>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardNoteRight>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardNoteRight>\r\n        )}\r\n      </CardNotesContainer>}\r\n\r\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardAuthorContainer>}\r\n\r\n      {actions && <CardButtonRowContainer>\r\n        {actions.map((x, index) => (\r\n          <IconButton ref={elRefs[index]}\r\n                      key={index}\r\n                      disabled={disabled}\r\n                      variant=\"secondary\"\r\n                      shape=\"circular\"\r\n                      action={(e) => {\r\n                        x.onClick();\r\n                      }}>\r\n            {x.icon}\r\n          </IconButton>\r\n        ))}\r\n      </CardButtonRowContainer>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"file":"CardBottomSection.cjs"}
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"names":["CardProgressContainer","styled","div","CardNotesContainer","COLORS","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","React","forwardRef","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","x","index","e","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXS,\n  LinearProgress,\n  LinearProgressType,\n  LinearProgressVariant,\n  Size\n} from '../../index';\nimport {IconButton} from '../../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n\n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport const CardProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardNotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nexport const CardBottomDivider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nexport const CardNoteLeft = styled.div`\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardNoteRight = styled.div`\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const CardBottomSectionContainer = styled.div`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n`;\n\nconst CardBottomSection = React.forwardRef(({\n                                              progressLevel,\n                                              progressMax,\n                                              progressType = LinearProgressType.Line,\n                                              noteLeft,\n                                              noteLeftIcon,\n                                              noteRight,\n                                              noteRightIcon,\n                                              authorName,\n                                              logo,\n                                              actions,\n                                              disabled\n                                            }: CardBottomSectionProps,\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\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 haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n\n  return (\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\n      {haveAtLeastSomething && <CardBottomDivider/>}\n      {progressLevel != undefined && <CardProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel}/>\n      </CardProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <CardNoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardNoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardNoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardNoteRight>\n        )}\n      </CardNotesContainer>}\n\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardAuthorContainer>}\n\n      {actions && <CardButtonRowContainer>\n        {actions.map((x, index) => (\n          <IconButton ref={elRefs[index]}\n                      key={index}\n                      disabled={disabled}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(e) => {\n                        x.onClick();\n                      }}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </CardButtonRowContainer>}\n    </CardBottomSectionContainer>\n  );\n});\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}

package/dist/Card/VerticalCard/CardBottomSection.d.ts

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import { LinearProgressType } from '../../index';
-export interface ActionItem {
-    icon: React.ReactNode;
-    onClick: () => void;
-}
-export interface CardBottomSectionProps {
-    progressLevel?: number;
-    progressMax?: number;
-    progressType?: LinearProgressType;
-    noteLeft?: string;
-    noteLeftIcon?: React.ReactNode;
-    noteRight?: string;
-    noteRightIcon?: React.ReactNode;
-    authorName?: string;
-    actions?: ActionItem[];
-    logo?: React.ReactNode;
-    disabled?: boolean;
-}
-export declare const CardProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardNotesContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardAuthorContainer: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const CardBottomDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardNoteLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardNoteRight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardButtonRowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CardBottomSection: React.ForwardRefExoticComponent<CardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
-export default CardBottomSection;
+import * as React from 'react';
+import { LinearProgressType } from '../../index';
+export interface ActionItem {
+    icon: React.ReactNode;
+    onClick: () => void;
+}
+export interface CardBottomSectionProps {
+    progressLevel?: number;
+    progressMax?: number;
+    progressType?: LinearProgressType;
+    noteLeft?: string;
+    noteLeftIcon?: React.ReactNode;
+    noteRight?: string;
+    noteRightIcon?: React.ReactNode;
+    authorName?: string;
+    actions?: ActionItem[];
+    logo?: React.ReactNode;
+    disabled?: boolean;
+}
+export declare const CardProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardNotesContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardAuthorContainer: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const CardBottomDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardNoteLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardNoteRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardButtonRowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CardBottomSection: React.ForwardRefExoticComponent<CardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
+export default CardBottomSection;

package/dist/Card/VerticalCard/CardBottomSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardProgressContainer","div","CardNotesContainer","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","forwardRef","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Small","Normal","Bold","x","index","e","onClick","icon"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SACEC,MADF,EAEEC,kBAFF,EAGEC,YAHF,EAIEC,cAJF,EAKEC,kBALF,EAMEC,qBANF,EAOEC,IAPF,QAQO,aARP;AASA,SAAQC,UAAR,QAAyB,cAAzB;;;AAuBA,OAAO,IAAMC,qBAAqB,GAAGT,MAAM,CAACU,GAAV,0FAA3B;AAIP,OAAO,IAAMC,kBAAkB,GAAGX,MAAM,CAACU,GAAV,oMAGpBT,MAAM,CAACW,WAHa,CAAxB;AASP,OAAO,IAAMC,mBAAmB,GAAGb,MAAM,CAACU,GAAV,qSAgB5B,UAAAI,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,0BACAd,MAAM,CAACe,WADP,0EAMP,EANG;AAAA,CAhBuB,CAAzB;AAyBP,OAAO,IAAMC,iBAAiB,GAAGjB,MAAM,CAACU,GAAV,qKAERT,MAAM,CAACiB,WAFC,CAAvB;AAOP,OAAO,IAAMC,YAAY,GAAGnB,MAAM,CAACU,GAAV,gQAAlB;AAcP,OAAO,IAAMU,aAAa,GAAGpB,MAAM,CAACU,GAAV,iQAAnB;AAcP,OAAO,IAAMW,sBAAsB,GAAGrB,MAAM,CAACU,GAAV,qZAMbT,MAAM,CAACiB,WANM,EAkBtBjB,MAAM,CAACqB,WAlBe,CAA5B;AAsBP,OAAO,IAAMC,0BAA0B,GAAGvB,MAAM,CAACU,GAAV,qIAAhC;AAKP,IAAMc,iBAAiB,gBAAGzB,KAAK,CAAC0B,UAAN,CAAiB,gBAaCC,GAbD,EAa0D;AAAA,MAZvDC,aAYuD,QAZvDA,aAYuD;AAAA,MAXvDC,WAWuD,QAXvDA,WAWuD;AAAA,+BAVvDC,YAUuD;AAAA,MAVvDA,YAUuD,kCAVxCxB,kBAAkB,CAACyB,IAUqB;AAAA,MATvDC,QASuD,QATvDA,QASuD;AAAA,MARvDC,YAQuD,QARvDA,YAQuD;AAAA,MAPvDC,SAOuD,QAPvDA,SAOuD;AAAA,MANvDC,aAMuD,QANvDA,aAMuD;AAAA,MALvDC,UAKuD,QALvDA,UAKuD;AAAA,MAJvDC,IAIuD,QAJvDA,IAIuD;AAAA,MAHvDC,OAGuD,QAHvDA,OAGuD;AAAA,MAFvDtB,QAEuD,QAFvDA,QAEuD;;AAEnG,wBAA4BhB,KAAK,CAACuC,QAAN,CAAqD,EAArD,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA,MAAMC,MAAM,GAAG,CAAAJ,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEI,MAAT,KAAmB,CAAlC;AAEA1C,EAAAA,KAAK,CAAC2C,SAAN,CAAgB,YAAM;AACpBF,IAAAA,SAAS,CAACG,KAAK,CAACF,MAAM,IAAI,CAAX,CAAL,CAAmBG,IAAnB,CAAwB,IAAxB,EAA8BC,GAA9B,CAAkC;AAAA,0BAAM9C,KAAK,CAAC+C,SAAN,EAAN;AAAA,KAAlC,CAAD,CAAT;AACD,GAFD,EAEG,CAACL,MAAD,CAFH;AAIA1C,EAAAA,KAAK,CAACgD,mBAAN,CAA0BrB,GAA1B,EAA+B;AAAA,WAAMa,MAAN;AAAA,GAA/B,EAA6C,CAACA,MAAD,CAA7C;AAEA,MAAMS,oBAAoB,GAAGrB,aAAa,IAAIsB,SAAjB,IAA8BlB,QAA9B,IAA0CC,YAA1C,IAA0DC,SAA1D,IAAuEC,aAAvE,IAAwFC,UAArH;AAEA,sBACE,MAAC,0BAAD;AAA4B,mBAAa,oBAAzC;AAAA,eACGa,oBAAoB,iBAAI,KAAC,iBAAD,KAD3B,EAEGrB,aAAa,IAAIsB,SAAjB,iBAA8B,KAAC,qBAAD;AAAA,6BAC7B,KAAC,cAAD;AAAgB,QAAA,IAAI,EAAE1C,IAAI,CAAC2C,KAA3B;AACgB,QAAA,IAAI,EAAErB,YADtB;AAEgB,QAAA,OAAO,EAAEvB,qBAAqB,CAAC6C,MAF/C;AAGgB,QAAA,KAAK,EAAExB,aAHvB;AAIgB,QAAA,GAAG,EAAEC,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAiBD;AAJpC;AAD6B,MAFjC,EAUG,CAACI,QAAQ,IAAIC,YAAZ,IAA4BC,SAA5B,IAAyCC,aAA1C,kBAA4D,MAAC,kBAAD;AAAA,iBAC1D,CAACH,QAAQ,IAAIC,YAAb,kBACC,MAAC,YAAD;AAAA,mBACGA,YADH,eAEE,KAAC,YAAD;AAAc,UAAA,KAAK,EAAE/B,MAAM,CAACW,WAA5B;AAAyC,UAAA,SAAS,EAAEV,kBAAkB,CAACkD,IAAvE;AAAA,oBAA8ErB;AAA9E,UAFF;AAAA,QAFyD,EAO1D,CAACE,SAAS,IAAIC,aAAd,kBACC,MAAC,aAAD;AAAA,mBACGA,aADH,eAEE,KAAC,YAAD;AAAc,UAAA,KAAK,EAAEjC,MAAM,CAACW,WAA5B;AAAyC,UAAA,SAAS,EAAEV,kBAAkB,CAACkD,IAAvE;AAAA,oBAA8EnB;AAA9E,UAFF;AAAA,QARyD;AAAA,MAV/D,EAyBG,CAACE,UAAU,IAAIC,IAAf,kBAAwB,MAAC,mBAAD;AAAqB,MAAA,QAAQ,EAAErB,QAA/B;AAAyC,qBAAa,2BAAtD;AAAA,8BACvB,KAAC,YAAD;AAAA,kBAAeoB;AAAf,QADuB,EAEtBC,IAFsB;AAAA,MAzB3B,EA8BGC,OAAO,iBAAI,KAAC,sBAAD;AAAA,gBACTA,OAAO,CAACQ,GAAR,CAAY,UAACQ,CAAD,EAAIC,KAAJ;AAAA,4BACX,KAAC,UAAD;AAAY,UAAA,GAAG,EAAEf,MAAM,CAACe,KAAD,CAAvB;AAEY,UAAA,QAAQ,EAAEvC,QAFtB;AAGY,UAAA,OAAO,EAAC,WAHpB;AAIY,UAAA,KAAK,EAAC,UAJlB;AAKY,UAAA,MAAM,EAAE,gBAACwC,CAAD,EAAO;AACbF,YAAAA,CAAC,CAACG,OAAF;AACD,WAPb;AAAA,oBAQGH,CAAC,CAACI;AARL,WACiBH,KADjB,CADW;AAAA,OAAZ;AADS,MA9Bd;AAAA,IADF;AA+CD,CA1EyB,CAA1B;;AAnHE3B,EAAAA,a;AACAC,EAAAA,W;AAGAG,EAAAA,Q;AACAC,EAAAA,Y;AACAC,EAAAA,S;AACAC,EAAAA,a;AAEAC,EAAAA,U;AACAE,EAAAA,O;AAfAoB,IAAAA,I;AACAD,IAAAA,O;;AAeApB,EAAAA,I;AACArB,EAAAA,Q;;AAmLF,eAAeS,iBAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  progressLevel?: number;\r\n  progressMax?: number;\r\n  progressType?: LinearProgressType;\r\n\r\n  noteLeft?: string;\r\n  noteLeftIcon?: React.ReactNode;\r\n  noteRight?: string;\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  authorName?: string;\r\n  actions?: ActionItem[];\r\n  logo?: React.ReactNode;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardProgressContainer = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardNotesContainer = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${COLORS.neutral_500};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.disabled ? `\r\n    color: ${COLORS.neutral_300};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardNoteLeft = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardNoteRight = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardButtonRowContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n                                              progressLevel,\r\n                                              progressMax,\r\n                                              progressType = LinearProgressType.Line,\r\n                                              noteLeft,\r\n                                              noteLeftIcon,\r\n                                              noteRight,\r\n                                              noteRightIcon,\r\n                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomDivider/>}\r\n      {progressLevel != undefined && <CardProgressContainer>\r\n        <LinearProgress size={Size.Small}\r\n                        type={progressType}\r\n                        variant={LinearProgressVariant.Normal}\r\n                        value={progressLevel}\r\n                        max={progressMax ?? progressLevel}/>\r\n      </CardProgressContainer>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardNoteLeft>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardNoteLeft>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardNoteRight>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardNoteRight>\r\n        )}\r\n      </CardNotesContainer>}\r\n\r\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardAuthorContainer>}\r\n\r\n      {actions && <CardButtonRowContainer>\r\n        {actions.map((x, index) => (\r\n          <IconButton ref={elRefs[index]}\r\n                      key={index}\r\n                      disabled={disabled}\r\n                      variant=\"secondary\"\r\n                      shape=\"circular\"\r\n                      action={(e) => {\r\n                        x.onClick();\r\n                      }}>\r\n            {x.icon}\r\n          </IconButton>\r\n        ))}\r\n      </CardButtonRowContainer>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"file":"CardBottomSection.js"}
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardProgressContainer","div","CardNotesContainer","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","forwardRef","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Small","Normal","Bold","x","index","e","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXS,\n  LinearProgress,\n  LinearProgressType,\n  LinearProgressVariant,\n  Size\n} from '../../index';\nimport {IconButton} from '../../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n\n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport const CardProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardNotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nexport const CardBottomDivider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nexport const CardNoteLeft = styled.div`\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardNoteRight = styled.div`\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const CardBottomSectionContainer = styled.div`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n`;\n\nconst CardBottomSection = React.forwardRef(({\n                                              progressLevel,\n                                              progressMax,\n                                              progressType = LinearProgressType.Line,\n                                              noteLeft,\n                                              noteLeftIcon,\n                                              noteRight,\n                                              noteRightIcon,\n                                              authorName,\n                                              logo,\n                                              actions,\n                                              disabled\n                                            }: CardBottomSectionProps,\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\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 haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n\n  return (\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\n      {haveAtLeastSomething && <CardBottomDivider/>}\n      {progressLevel != undefined && <CardProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel}/>\n      </CardProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <CardNoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardNoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardNoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardNoteRight>\n        )}\n      </CardNotesContainer>}\n\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardAuthorContainer>}\n\n      {actions && <CardButtonRowContainer>\n        {actions.map((x, index) => (\n          <IconButton ref={elRefs[index]}\n                      key={index}\n                      disabled={disabled}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(e) => {\n                        x.onClick();\n                      }}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </CardButtonRowContainer>}\n    </CardBottomSectionContainer>\n  );\n});\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}

package/dist/Card/VerticalCard/CardMiddleSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"names":["CardMiddleSectionContainer","styled","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","index","label","variant"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAkBO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV,sUAAhC;;;;AAkBA,IAAMC,aAAa,GAAGF,0BAAOC,GAAV,qMAMJ,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CANI,CAAnB;;;;AASA,IAAMC,iBAAiB,GAAGL,0BAAOC,GAAV,qLAAvB;;;;AAQA,IAAMK,qBAAqB,GAAGN,0BAAOC,GAAV,mQAQrBM,cAAOC,WARc,CAA3B;;;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BC,cAQ4B,QAR5BA,cAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,aAM4B,QAN5BA,aAM4B;AAAA,MAL5BC,KAK4B,QAL5BA,KAK4B;AAAA,MAJ5BC,WAI4B,QAJ5BA,WAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,0BAAD;AAA4B,mBAAa,oBAAzC;AAAA,eACGP,cAAc,iBAAI,qBAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,sBAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,qBAAC,iBAAD;AAAY,QAAA,SAAS,EAAEQ,0BAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEb,cAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,kBAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEO,0BAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEH,QAAQ,GAAGV,cAAOC,WAAV,GAAwBD,cAAOc,KAAtH;AAAA,gBACGR;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,iBAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,cAAOe,WAAvD;AAAA,gBACGR;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,iBAAD;AAAA,gBACGA,IAAI,CAACQ,GAAL,CAAS,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACR,qBAAC,UAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,gBAAEF,CAAC,CAACG,OAAJ,mDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADQ;AAAA,OAAT;AADH,MAjBJ,EAuBGT,QAAQ,iBACP,qBAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACO,GAAT,CAAa,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACZ,qBAAC,UAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,iBAAEF,CAAC,CAACG,OAAJ,qDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADY;AAAA,OAAb;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEf,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAW,IAAAA,K;;AALAV,EAAAA,Q;AAKAU,IAAAA,K;;AAJAT,EAAAA,Q;;eAsGaR,iB","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  colorBandColor?: string;\r\n  categoryIcon?: React.ReactNode;\r\n  categoryLabel?: string;\r\n  title: string;\r\n  description?: string;\r\n  tags?: CardTag[];\r\n  row2Tags?: CardTag[];\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardColorBand = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_500};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n}: CardMiddleSectionProps) => {\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardColorBand $color={colorBandColor} />}\r\n      <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n        {categoryIcon}\r\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\r\n          {categoryLabel}\r\n        </ComponentS>\r\n      </CardCategoryContainer>\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardTagsContainer>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\r\n          ))}\r\n        </CardTagsContainer>\r\n      )}\r\n      {row2Tags && (\r\n        <CardTagsContainer>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\r\n          ))}\r\n        </CardTagsContainer>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"file":"CardMiddleSection.cjs"}
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"names":["CardMiddleSectionContainer","styled","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","index","label","variant"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAkBO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV,sUAAhC;;;;AAkBA,IAAMC,aAAa,GAAGF,0BAAOC,GAAV,qMAMJ,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CANI,CAAnB;;;;AASA,IAAMC,iBAAiB,GAAGL,0BAAOC,GAAV,qLAAvB;;;;AAQA,IAAMK,qBAAqB,GAAGN,0BAAOC,GAAV,mQAQrBM,cAAOC,WARc,CAA3B;;;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BC,cAQ4B,QAR5BA,cAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,aAM4B,QAN5BA,aAM4B;AAAA,MAL5BC,KAK4B,QAL5BA,KAK4B;AAAA,MAJ5BC,WAI4B,QAJ5BA,WAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,0BAAD;AAA4B,mBAAa,oBAAzC;AAAA,eACGP,cAAc,iBAAI,qBAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,sBAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,qBAAC,iBAAD;AAAY,QAAA,SAAS,EAAEQ,0BAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEb,cAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,kBAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEO,0BAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEH,QAAQ,GAAGV,cAAOC,WAAV,GAAwBD,cAAOc,KAAtH;AAAA,gBACGR;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,iBAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,cAAOe,WAAvD;AAAA,gBACGR;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,iBAAD;AAAA,gBACGA,IAAI,CAACQ,GAAL,CAAS,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACR,qBAAC,UAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,gBAAEF,CAAC,CAACG,OAAJ,mDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADQ;AAAA,OAAT;AADH,MAjBJ,EAuBGT,QAAQ,iBACP,qBAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACO,GAAT,CAAa,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACZ,qBAAC,UAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,iBAAEF,CAAC,CAACG,OAAJ,qDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADY;AAAA,OAAb;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEf,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAW,IAAAA,K;;AALAV,EAAAA,Q;AAKAU,IAAAA,K;;AAJAT,EAAAA,Q;;eAsGaR,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: CardTag[];\n  row2Tags?: CardTag[];\n  disabled?: boolean;\n}\n\nexport interface CardTag {\n  label: string;\n  variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n`;\n\nexport const CardColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${(props) => props.$color};\n`;\n\nexport const CardTagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ${COLORS.neutral_500};\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  row2Tags,\n  disabled,\n}: CardMiddleSectionProps) => {\n  return (\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\n      {colorBandColor && <CardColorBand $color={colorBandColor} />}\n      <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CardCategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <CardTagsContainer>\n          {tags.map((x, index) => (\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n          ))}\n        </CardTagsContainer>\n      )}\n      {row2Tags && (\n        <CardTagsContainer>\n          {row2Tags.map((x, index) => (\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n          ))}\n        </CardTagsContainer>\n      )}\n    </CardMiddleSectionContainer>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.cjs"}