@laerdal/life-react-components 3.4.2 → 3.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardBody.cjs","names":["HorizontalCardBodyContainer","styled","div","HorizontalCardBodyTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","neutral_500","HorizontalCardBodyDescription","ComponentXSStyling","Regular","neutral_600","HorizontalCardBodyTagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"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\nexport const HorizontalCardBodyContainer = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n`;\n\nexport const HorizontalCardBodyTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nexport const HorizontalCardBodyDescription = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const HorizontalCardBodyTagsContainer = 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    <HorizontalCardBodyContainer>\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\n      {\n        tags &&\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n        </HorizontalCardBodyTagsContainer>\n      }\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n    </HorizontalCardBodyContainer>\n  )\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAA8B;AAAA;AAEvB,IAAMA,2BAA2B,GAAGC,yBAAM,CAACC,GAAG,6KAMpD;AAAC;AAEK,IAAMC,uBAAuB,GAAGF,yBAAM,CAACC,GAAG,wIAC7C,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,KAAK,CAAC,EAE/CD,cAAM,CAACE,WAAW,CAE9B;AAAC;AAEK,IAAMC,6BAA6B,GAAGT,yBAAM,CAACC,GAAG,gGACnD,IAAAS,0BAAkB,EAACN,0BAAkB,CAACO,OAAO,EAAEL,cAAM,CAACM,WAAW,CAAC,CACrE;AAAC;AAEK,IAAMC,+BAA+B,GAAGb,yBAAM,CAACC,GAAG,qLAMxD;AAAC;AAIK,IAAMa,kBAAkD,GAAG,SAArDA,kBAAkD,OAKU;EAAA,IAJJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;EAGvE,oBACE,sBAAC,2BAA2B;IAAA,wBAC1B,qBAAC,uBAAuB;MAAA,UAAEH;IAAK,EAA2B,EACzDC,WAAW,iBAAI,qBAAC,6BAA6B;MAAA,UAAEA;IAAW,EAAiC,EAE1FE,IAAI,iBACJ,qBAAC,+BAA+B;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD,qBAAC,QAAG;UAAa,KAAK,EAAED,GAAG,CAACE,KAAM;UAAC,OAAO,EAAEF,GAAG,CAACG,OAAQ;UAAC,IAAI,EAAEH,GAAG,CAACI;QAAK,GAA9DH,KAAK,CAA2D;MAAA,CAAC;IAAC,EAC5C,EAEnCJ,QAAQ,iBAAI,qBAAC,8BAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC5C;AAElC,CAAC;AAAC"}
+{"version":3,"file":"HorizontalCardBody.cjs","names":["HorizontalCardBodyContainer","styled","div","HorizontalCardBodyTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","neutral_500","HorizontalCardBodyDescription","ComponentXSStyling","Regular","neutral_600","HorizontalCardBodyTagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"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\nexport const HorizontalCardBodyContainer = 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\nexport const HorizontalCardBodyTitle = 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\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n`;\r\n\r\nexport const HorizontalCardBodyTagsContainer = 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    <HorizontalCardBodyContainer>\r\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\r\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\r\n      {\r\n        tags &&\r\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </HorizontalCardBodyTagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </HorizontalCardBodyContainer>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAA8B;AAAA;AAEvB,IAAMA,2BAA2B,GAAGC,yBAAM,CAACC,GAAG,6KAMpD;AAAC;AAEK,IAAMC,uBAAuB,GAAGF,yBAAM,CAACC,GAAG,wIAC7C,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,KAAK,CAAC,EAE/CD,cAAM,CAACE,WAAW,CAE9B;AAAC;AAEK,IAAMC,6BAA6B,GAAGT,yBAAM,CAACC,GAAG,gGACnD,IAAAS,0BAAkB,EAACN,0BAAkB,CAACO,OAAO,EAAEL,cAAM,CAACM,WAAW,CAAC,CACrE;AAAC;AAEK,IAAMC,+BAA+B,GAAGb,yBAAM,CAACC,GAAG,qLAMxD;AAAC;AAIK,IAAMa,kBAAkD,GAAG,SAArDA,kBAAkD,OAKU;EAAA,IAJJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;EAGvE,oBACE,sBAAC,2BAA2B;IAAA,wBAC1B,qBAAC,uBAAuB;MAAA,UAAEH;IAAK,EAA2B,EACzDC,WAAW,iBAAI,qBAAC,6BAA6B;MAAA,UAAEA;IAAW,EAAiC,EAE1FE,IAAI,iBACJ,qBAAC,+BAA+B;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD,qBAAC,QAAG;UAAa,KAAK,EAAED,GAAG,CAACE,KAAM;UAAC,OAAO,EAAEF,GAAG,CAACG,OAAQ;UAAC,IAAI,EAAEH,GAAG,CAACI;QAAK,GAA9DH,KAAK,CAA2D;MAAA,CAAC;IAAC,EAC5C,EAEnCJ,QAAQ,iBAAI,qBAAC,8BAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC5C;AAElC,CAAC;AAAC"}

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-export declare const HorizontalCardBodyContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardBodyTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardBodyDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardBodyTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
-export declare const HorizontalCardBody: React.FunctionComponent<Props>;
-export {};
+import React from 'react';
+import { HorizontalCardProps } from './types';
+export declare const HorizontalCardBodyContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCardBodyTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCardBodyDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCardBodyTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+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,"file":"HorizontalCardBody.js","names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","HorizontalCardBodyContainer","div","HorizontalCardBodyTitle","Bold","black","neutral_500","HorizontalCardBodyDescription","Regular","neutral_600","HorizontalCardBodyTagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"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\nexport const HorizontalCardBodyContainer = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n`;\n\nexport const HorizontalCardBodyTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nexport const HorizontalCardBodyDescription = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const HorizontalCardBodyTagsContainer = 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    <HorizontalCardBodyContainer>\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\n      {\n        tags &&\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n        </HorizontalCardBodyTagsContainer>\n      }\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n    </HorizontalCardBodyContainer>\n  )\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAO,cAAc;AAC9F,SAAQC,cAAc,QAAO,sBAAsB;AACnD,SAAQC,GAAG,QAAO,WAAW;AAAC;AAAA;AAE9B,OAAO,IAAMC,2BAA2B,GAAGP,MAAM,CAACQ,GAAG,+JAMpD;AAED,OAAO,IAAMC,uBAAuB,GAAGT,MAAM,CAACQ,GAAG,0HAC7CN,iBAAiB,CAACC,kBAAkB,CAACO,IAAI,EAAET,MAAM,CAACU,KAAK,CAAC,EAE/CV,MAAM,CAACW,WAAW,CAE9B;AAED,OAAO,IAAMC,6BAA6B,GAAGb,MAAM,CAACQ,GAAG,kFACnDJ,kBAAkB,CAACD,kBAAkB,CAACW,OAAO,EAAEb,MAAM,CAACc,WAAW,CAAC,CACrE;AAED,OAAO,IAAMC,+BAA+B,GAAGhB,MAAM,CAACQ,GAAG,uKAMxD;AAID,OAAO,IAAMS,kBAAkD,GAAG,SAArDA,kBAAkD,OAKU;EAAA,IAJJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;EAGvE,oBACE,MAAC,2BAA2B;IAAA,wBAC1B,KAAC,uBAAuB;MAAA,UAAEH;IAAK,EAA2B,EACzDC,WAAW,iBAAI,KAAC,6BAA6B;MAAA,UAAEA;IAAW,EAAiC,EAE1FE,IAAI,iBACJ,KAAC,+BAA+B;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD,KAAC,GAAG;UAAa,KAAK,EAAED,GAAG,CAACE,KAAM;UAAC,OAAO,EAAEF,GAAG,CAACG,OAAQ;UAAC,IAAI,EAAEH,GAAG,CAACI;QAAK,GAA9DH,KAAK,CAA2D;MAAA,CAAC;IAAC,EAC5C,EAEnCJ,QAAQ,iBAAI,KAAC,cAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC5C;AAElC,CAAC"}
+{"version":3,"file":"HorizontalCardBody.js","names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","HorizontalCardBodyContainer","div","HorizontalCardBodyTitle","Bold","black","neutral_500","HorizontalCardBodyDescription","Regular","neutral_600","HorizontalCardBodyTagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"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\nexport const HorizontalCardBodyContainer = 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\nexport const HorizontalCardBodyTitle = 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\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n`;\r\n\r\nexport const HorizontalCardBodyTagsContainer = 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    <HorizontalCardBodyContainer>\r\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\r\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\r\n      {\r\n        tags &&\r\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </HorizontalCardBodyTagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </HorizontalCardBodyContainer>\r\n  )\r\n};\r\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAO,cAAc;AAC9F,SAAQC,cAAc,QAAO,sBAAsB;AACnD,SAAQC,GAAG,QAAO,WAAW;AAAC;AAAA;AAE9B,OAAO,IAAMC,2BAA2B,GAAGP,MAAM,CAACQ,GAAG,+JAMpD;AAED,OAAO,IAAMC,uBAAuB,GAAGT,MAAM,CAACQ,GAAG,0HAC7CN,iBAAiB,CAACC,kBAAkB,CAACO,IAAI,EAAET,MAAM,CAACU,KAAK,CAAC,EAE/CV,MAAM,CAACW,WAAW,CAE9B;AAED,OAAO,IAAMC,6BAA6B,GAAGb,MAAM,CAACQ,GAAG,kFACnDJ,kBAAkB,CAACD,kBAAkB,CAACW,OAAO,EAAEb,MAAM,CAACc,WAAW,CAAC,CACrE;AAED,OAAO,IAAMC,+BAA+B,GAAGhB,MAAM,CAACQ,GAAG,uKAMxD;AAID,OAAO,IAAMS,kBAAkD,GAAG,SAArDA,kBAAkD,OAKU;EAAA,IAJJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;EAGvE,oBACE,MAAC,2BAA2B;IAAA,wBAC1B,KAAC,uBAAuB;MAAA,UAAEH;IAAK,EAA2B,EACzDC,WAAW,iBAAI,KAAC,6BAA6B;MAAA,UAAEA;IAAW,EAAiC,EAE1FE,IAAI,iBACJ,KAAC,+BAA+B;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD,KAAC,GAAG;UAAa,KAAK,EAAED,GAAG,CAACE,KAAM;UAAC,OAAO,EAAEF,GAAG,CAACG,OAAQ;UAAC,IAAI,EAAEH,GAAG,CAACI;QAAK,GAA9DH,KAAK,CAA2D;MAAA,CAAC;IAAC,EAC5C,EAEnCJ,QAAQ,iBAAI,KAAC,cAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC5C;AAElC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["HorizontalCardIconContainer","styled","div","COLORS","black","neutral_500","HorizontalCardImageContainer","HorizontalCardThumbnail","image","icon","React","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nexport const HorizontalCardIconContainer = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nexport const HorizontalCardImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\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          <HorizontalCardIconContainer>\n            {React.cloneElement(icon, {width: 48, height: 48})}\n          </HorizontalCardIconContainer>\n      }\n      {\n        image &&\n          <HorizontalCardImageContainer>\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\n          </HorizontalCardImageContainer>\n      }\n    </>\n  )\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAA+C;AAAA;AAExC,IAAMA,2BAA2B,GAAGC,yBAAM,CAACC,GAAG,2PAO1CC,cAAM,CAACC,KAAK,EAGVD,cAAM,CAACE,WAAW,CAE9B;AAAC;AAGK,IAAMC,4BAA4B,GAAGL,yBAAM,CAACC,GAAG,2YAqBrD;AAAC;AAIK,IAAMK,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,qBAAC,2BAA2B;MAAA,uBACzBC,cAAK,CAACC,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACtB,EAGhCL,KAAK,iBACH,qBAAC,4BAA4B;MAAA,uBACzB,qBAAC,yBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACM,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAEN,KAAK,CAACO,GAAI;QAAC,GAAG,EAAEP,KAAK,CAACQ,GAAI;QACnE,MAAM,mBAAER,KAAK,CAACS,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAET,KAAK,CAACI,KAAM;QAAC,MAAM,EAAEJ,KAAK,CAACK;MAAO;IAAE,EACnE;EAAA,EAElC;AAEP,CAAC;AAAC"}
+{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["HorizontalCardIconContainer","styled","div","COLORS","black","neutral_500","HorizontalCardImageContainer","HorizontalCardThumbnail","image","icon","React","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\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\nexport const HorizontalCardImageContainer = 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  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\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          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAA+C;AAAA;AAExC,IAAMA,2BAA2B,GAAGC,yBAAM,CAACC,GAAG,2PAO1CC,cAAM,CAACC,KAAK,EAGVD,cAAM,CAACE,WAAW,CAE9B;AAAC;AAGK,IAAMC,4BAA4B,GAAGL,yBAAM,CAACC,GAAG,2YAqBrD;AAAC;AAIK,IAAMK,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,qBAAC,2BAA2B;MAAA,uBACzBC,cAAK,CAACC,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACtB,EAGhCL,KAAK,iBACH,qBAAC,4BAA4B;MAAA,uBACzB,qBAAC,yBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACM,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAEN,KAAK,CAACO,GAAI;QAAC,GAAG,EAAEP,KAAK,CAACQ,GAAI;QACnE,MAAM,mBAAER,KAAK,CAACS,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAET,KAAK,CAACI,KAAM;QAAC,MAAM,EAAEJ,KAAK,CAACK;MAAO;IAAE,EACnE;EAAA,EAElC;AAEP,CAAC;AAAC"}

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-export declare const HorizontalCardIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
-export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
-export {};
+import React from 'react';
+import { HorizontalCardProps } from './types';
+export declare const HorizontalCardIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCardImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+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,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","HorizontalCardIconContainer","div","black","neutral_500","HorizontalCardImageContainer","HorizontalCardThumbnail","image","icon","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nexport const HorizontalCardIconContainer = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nexport const HorizontalCardImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\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          <HorizontalCardIconContainer>\n            {React.cloneElement(icon, {width: 48, height: 48})}\n          </HorizontalCardIconContainer>\n      }\n      {\n        image &&\n          <HorizontalCardImageContainer>\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\n          </HorizontalCardImageContainer>\n      }\n    </>\n  )\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC;AAAA;AAAA;AAE/C,OAAO,IAAMC,2BAA2B,GAAGH,MAAM,CAACI,GAAG,6OAO1CH,MAAM,CAACI,KAAK,EAGVJ,MAAM,CAACK,WAAW,CAE9B;AAGD,OAAO,IAAMC,4BAA4B,GAAGP,MAAM,CAACI,GAAG,6XAqBrD;AAID,OAAO,IAAMI,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,KAAC,2BAA2B;MAAA,uBACzBX,KAAK,CAACY,YAAY,CAACD,IAAI,EAAE;QAACE,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACtB,EAGhCJ,KAAK,iBACH,KAAC,4BAA4B;MAAA,uBACzB,KAAC,kBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACK,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAEL,KAAK,CAACM,GAAI;QAAC,GAAG,EAAEN,KAAK,CAACO,GAAI;QACnE,MAAM,mBAAEP,KAAK,CAACQ,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAER,KAAK,CAACG,KAAM;QAAC,MAAM,EAAEH,KAAK,CAACI;MAAO;IAAE,EACnE;EAAA,EAElC;AAEP,CAAC"}
+{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","HorizontalCardIconContainer","div","black","neutral_500","HorizontalCardImageContainer","HorizontalCardThumbnail","image","icon","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\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\nexport const HorizontalCardImageContainer = 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  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\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          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC;AAAA;AAAA;AAE/C,OAAO,IAAMC,2BAA2B,GAAGH,MAAM,CAACI,GAAG,6OAO1CH,MAAM,CAACI,KAAK,EAGVJ,MAAM,CAACK,WAAW,CAE9B;AAGD,OAAO,IAAMC,4BAA4B,GAAGP,MAAM,CAACI,GAAG,6XAqBrD;AAID,OAAO,IAAMI,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,KAAC,2BAA2B;MAAA,uBACzBX,KAAK,CAACY,YAAY,CAACD,IAAI,EAAE;QAACE,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACtB,EAGhCJ,KAAK,iBACH,KAAC,4BAA4B;MAAA,uBACzB,KAAC,kBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACK,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAEL,KAAK,CAACM,GAAI;QAAC,GAAG,EAAEN,KAAK,CAACO,GAAI;QACnE,MAAM,mBAAEP,KAAK,CAACQ,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAER,KAAK,CAACG,KAAM;QAAC,MAAM,EAAEH,KAAK,CAACI;MAAO;IAAE,EACnE;EAAA,EAElC;AAEP,CAAC"}

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

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

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

@@ -1,4 +1,4 @@
-export * from './types';
-export * from './HorizontalCard';
-export * from './HorizontalCardBody';
-export * from './HorizontalCardThumbnail';
+export * from './types';
+export * from './HorizontalCard';
+export * from './HorizontalCardBody';
+export * from './HorizontalCardThumbnail';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/Card/HorizontalCard/index.ts"],"sourcesContent":["export * from './types';\nexport * from './HorizontalCard';\nexport * from './HorizontalCardBody';\nexport * from './HorizontalCardThumbnail';\n\n\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,kBAAkB;AAChC,cAAc,sBAAsB;AACpC,cAAc,2BAA2B"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Card/HorizontalCard/index.ts"],"sourcesContent":["export * from './types';\r\nexport * from './HorizontalCard';\r\nexport * from './HorizontalCardBody';\r\nexport * from './HorizontalCardThumbnail';\r\n\r\n\r\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,kBAAkB;AAChC,cAAc,sBAAsB;AACpC,cAAc,2BAA2B"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React, { ReactNode } from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\nimport { Testable } from '../../types';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\n  \nexport interface CustomContentProps extends  Testable{\n  content:ReactNode;\n}\n\n\nexport type HorizontalCardCustomContent =\n  CustomContentProps\n  & { componentType: 'custom'; }\n\nexport type HorizontalCardDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport interface HorizontalCardTag {\n  label: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\n\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\n  variant?: 'outline' | 'elevated';\n  action?: () => void;\n  disabled?: boolean;\n  title: string;\n  description?: string;\n  icon?: React.ReactElement;\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n  tags?: HorizontalCardTag[];\n  progress?: HorizontalCardLinearProgression;\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];\n}\n"],"mappings":""}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\r\nimport React, { ReactNode } from 'react';\r\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\r\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\r\nimport {TagVariants} from '../../Tag';\r\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\r\nimport { Testable } from '../../types';\r\n\r\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport type HorizontalCardToggleButton =\r\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\r\n  & { componentType: 'toggle'; }\r\n\r\n  \r\nexport interface CustomContentProps extends  Testable{\r\n  content:ReactNode;\r\n}\r\n\r\n\r\nexport type HorizontalCardCustomContent =\r\n  CustomContentProps\r\n  & { componentType: 'custom'; }\r\n\r\nexport type HorizontalCardDropdownButton =\r\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\r\n  & {\r\n  componentType: 'dropdown';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport interface HorizontalCardTag {\r\n  label: string;\r\n  icon?: React.ReactNode;\r\n  variant?: TagVariants;\r\n}\r\n\r\n\r\n\r\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\r\n\r\nexport interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\r\n  variant?: 'outline' | 'elevated';\r\n  action?: () => void;\r\n  disabled?: boolean;\r\n  title: string;\r\n  description?: string;\r\n  icon?: React.ReactElement;\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  tags?: HorizontalCardTag[];\r\n  progress?: HorizontalCardLinearProgression;\r\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];\r\n}\r\n"],"mappings":""}

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

@@ -1,49 +1,49 @@
-import { IconButtonProps } from '../../Button/Iconbutton';
-import React, { ReactNode } from 'react';
-import { ToggleButtonProps } from '../../Toggles/ToggleButton';
-import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
-import { TagVariants } from '../../Tag';
-import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
-import { Testable } from '../../types';
-export type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
-    componentType: 'icon';
-    icon: React.ReactNode;
-};
-export type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
-    componentType: 'toggle';
-};
-export interface CustomContentProps extends Testable {
-    content: ReactNode;
-}
-export type HorizontalCardCustomContent = CustomContentProps & {
-    componentType: 'custom';
-};
-export 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 type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
-export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
-    variant?: 'outline' | 'elevated';
-    action?: () => void;
-    disabled?: boolean;
-    title: string;
-    description?: string;
-    icon?: React.ReactElement;
-    image?: {
-        src: string;
-        fallbackSrc?: string;
-        alt: string;
-        height?: string;
-        width?: string;
-        loader?: boolean;
-    };
-    tags?: HorizontalCardTag[];
-    progress?: HorizontalCardLinearProgression;
-    actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];
-}
+import { IconButtonProps } from '../../Button/Iconbutton';
+import React, { ReactNode } from 'react';
+import { ToggleButtonProps } from '../../Toggles/ToggleButton';
+import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
+import { TagVariants } from '../../Tag';
+import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
+import { Testable } from '../../types';
+export type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
+    componentType: 'icon';
+    icon: React.ReactNode;
+};
+export type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
+    componentType: 'toggle';
+};
+export interface CustomContentProps extends Testable {
+    content: ReactNode;
+}
+export type HorizontalCardCustomContent = CustomContentProps & {
+    componentType: 'custom';
+};
+export 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 type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
+export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
+    variant?: 'outline' | 'elevated';
+    action?: () => void;
+    disabled?: boolean;
+    title: string;
+    description?: string;
+    icon?: React.ReactElement;
+    image?: {
+        src: string;
+        fallbackSrc?: string;
+        alt: string;
+        height?: string;
+        width?: string;
+        loader?: boolean;
+    };
+    tags?: HorizontalCardTag[];
+    progress?: HorizontalCardLinearProgression;
+    actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];
+}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React, { ReactNode } from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\nimport { Testable } from '../../types';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\n  \nexport interface CustomContentProps extends  Testable{\n  content:ReactNode;\n}\n\n\nexport type HorizontalCardCustomContent =\n  CustomContentProps\n  & { componentType: 'custom'; }\n\nexport type HorizontalCardDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport interface HorizontalCardTag {\n  label: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\n\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\n  variant?: 'outline' | 'elevated';\n  action?: () => void;\n  disabled?: boolean;\n  title: string;\n  description?: string;\n  icon?: React.ReactElement;\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n  tags?: HorizontalCardTag[];\n  progress?: HorizontalCardLinearProgression;\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\r\nimport React, { ReactNode } from 'react';\r\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\r\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\r\nimport {TagVariants} from '../../Tag';\r\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\r\nimport { Testable } from '../../types';\r\n\r\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport type HorizontalCardToggleButton =\r\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\r\n  & { componentType: 'toggle'; }\r\n\r\n  \r\nexport interface CustomContentProps extends  Testable{\r\n  content:ReactNode;\r\n}\r\n\r\n\r\nexport type HorizontalCardCustomContent =\r\n  CustomContentProps\r\n  & { componentType: 'custom'; }\r\n\r\nexport type HorizontalCardDropdownButton =\r\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\r\n  & {\r\n  componentType: 'dropdown';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport interface HorizontalCardTag {\r\n  label: string;\r\n  icon?: React.ReactNode;\r\n  variant?: TagVariants;\r\n}\r\n\r\n\r\n\r\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\r\n\r\nexport interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\r\n  variant?: 'outline' | 'elevated';\r\n  action?: () => void;\r\n  disabled?: boolean;\r\n  title: string;\r\n  description?: string;\r\n  icon?: React.ReactElement;\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  tags?: HorizontalCardTag[];\r\n  progress?: HorizontalCardLinearProgression;\r\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];\r\n}\r\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["CardTopLevelContainerStyles","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","CardContainerStyles","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","cls","defaultOnMouseDownHandler","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"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 CardTopLevelContainerStyles = styled.div`\n  background-color: ${COLORS.white};\n  min-width: 240px;\n  overflow: hidden;\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 CardContainerStyles = styled.div`\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainerStyles} {\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      ${CardTopLevelContainerStyles} {\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    ${CardTopLevelContainerStyles}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  maxWidth?: number | string;\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 = 'elevated',\n                                                    className,\n                                                    maxWidth = 560,\n                                                    ...rest\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} ${className || ''}`;\n\n  return (\n    <CardContainerStyles 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             {...rest}>\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\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      </CardTopLevelContainerStyles>\n    </CardContainerStyles>\n\n  );\n};\n\nexport default Card;\n"],"mappings":"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"}
+{"version":3,"file":"Card.cjs","names":["CardTopLevelContainerStyles","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","CardContainerStyles","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","cls","defaultOnMouseDownHandler","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"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 CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${COLORS.white};\r\n  min-width: 240px;\r\n  overflow: hidden;\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 CardContainerStyles = styled.div`\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      ${CardTopLevelContainerStyles} {\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      ${CardTopLevelContainerStyles} {\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    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${COLORS.neutral_100};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  onCardClicked?: () => {};\r\n  disabled?: boolean;\r\n  maxWidth?: number | string;\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 = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\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} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles 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             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\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      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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"}

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

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { CardTopSectionProps } from './CardTopSection';
-import { CardMiddleSectionProps } from './CardMiddleSection';
-import { CardBottomSectionProps } from './CardBottomSection';
-export declare const CardTopLevelContainerStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardContainerStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
-    onCardClicked?: () => {};
-    disabled?: boolean;
-    maxWidth?: number | string;
-    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 CardTopLevelContainerStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardContainerStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
+    onCardClicked?: () => {};
+    disabled?: boolean;
+    maxWidth?: number | string;
+    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,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainerStyles","div","white","BOXSHADOW_L1","neutral_200","CardContainerStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"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 CardTopLevelContainerStyles = styled.div`\n  background-color: ${COLORS.white};\n  min-width: 240px;\n  overflow: hidden;\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 CardContainerStyles = styled.div`\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainerStyles} {\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      ${CardTopLevelContainerStyles} {\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    ${CardTopLevelContainerStyles}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  maxWidth?: number | string;\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 = 'elevated',\n                                                    className,\n                                                    maxWidth = 560,\n                                                    ...rest\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} ${className || ''}`;\n\n  return (\n    <CardContainerStyles 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             {...rest}>\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\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      </CardTopLevelContainerStyles>\n    </CardContainerStyles>\n\n  );\n};\n\nexport default Card;\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainerStyles","div","white","BOXSHADOW_L1","neutral_200","CardContainerStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"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 CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${COLORS.white};\r\n  min-width: 240px;\r\n  overflow: hidden;\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 CardContainerStyles = styled.div`\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      ${CardTopLevelContainerStyles} {\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      ${CardTopLevelContainerStyles} {\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    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${COLORS.neutral_100};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  onCardClicked?: () => {};\r\n  disabled?: boolean;\r\n  maxWidth?: number | string;\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 = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\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} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles 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             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\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      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.cjs","names":["CardBottomSectionProgressStyles","styled","div","CardBottomSectionNotesStyles","COLORS","neutral_500","CardBottomSectionAuthorStyles","props","disabled","neutral_300","CardBottomSectionDivider","neutral_100","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","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"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"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 CardBottomSectionProgressStyles = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardBottomSectionNotesStyles = 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 CardBottomSectionAuthorStyles = 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 CardBottomSectionDivider = 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 CardBottomSectionNoteLeftStyles = 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 CardBottomSectionNoteRightStyles = 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 CardBottomSectionButtonRowContainerStyles = 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 && <CardBottomSectionDivider/>}\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel}/>\n      </CardBottomSectionProgressStyles>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\n        {(noteLeft || noteLeftIcon) && (\n          <CardBottomSectionNoteLeftStyles>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardBottomSectionNoteLeftStyles>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardBottomSectionNoteRightStyles>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardBottomSectionNoteRightStyles>\n        )}\n      </CardBottomSectionNotesStyles>}\n\n      {(authorName || logo) && <CardBottomSectionAuthorStyles disabled={disabled} data-testid={'card-bottomSection-author'}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardBottomSectionAuthorStyles>}\n\n      {actions && <CardBottomSectionButtonRowContainerStyles>\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      </CardBottomSectionButtonRowContainerStyles>}\n    </CardBottomSectionContainer>\n  );\n});\n\nexport default CardBottomSection;\n"],"mappings":"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"}
+{"version":3,"file":"CardBottomSection.cjs","names":["CardBottomSectionProgressStyles","styled","div","CardBottomSectionNotesStyles","COLORS","neutral_500","CardBottomSectionAuthorStyles","props","disabled","neutral_300","CardBottomSectionDivider","neutral_100","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","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"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"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 CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = 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 CardBottomSectionAuthorStyles = 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 CardBottomSectionDivider = 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 CardBottomSectionNoteLeftStyles = 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 CardBottomSectionNoteRightStyles = 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 CardBottomSectionButtonRowContainerStyles = 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 && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\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      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {actions && <CardBottomSectionButtonRowContainerStyles>\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      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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"}

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 CardBottomSectionProgressStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionNotesStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionAuthorStyles: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const CardBottomSectionDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionNoteLeftStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionNoteRightStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionButtonRowContainerStyles: 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 CardBottomSectionProgressStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionNotesStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionAuthorStyles: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const CardBottomSectionDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionNoteLeftStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionNoteRightStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionButtonRowContainerStyles: 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,"file":"CardBottomSection.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardBottomSectionProgressStyles","div","CardBottomSectionNotesStyles","neutral_500","CardBottomSectionAuthorStyles","props","disabled","neutral_300","CardBottomSectionDivider","neutral_100","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","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"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"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 CardBottomSectionProgressStyles = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardBottomSectionNotesStyles = 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 CardBottomSectionAuthorStyles = 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 CardBottomSectionDivider = 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 CardBottomSectionNoteLeftStyles = 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 CardBottomSectionNoteRightStyles = 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 CardBottomSectionButtonRowContainerStyles = 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 && <CardBottomSectionDivider/>}\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel}/>\n      </CardBottomSectionProgressStyles>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\n        {(noteLeft || noteLeftIcon) && (\n          <CardBottomSectionNoteLeftStyles>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardBottomSectionNoteLeftStyles>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardBottomSectionNoteRightStyles>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardBottomSectionNoteRightStyles>\n        )}\n      </CardBottomSectionNotesStyles>}\n\n      {(authorName || logo) && <CardBottomSectionAuthorStyles disabled={disabled} data-testid={'card-bottomSection-author'}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardBottomSectionAuthorStyles>}\n\n      {actions && <CardBottomSectionButtonRowContainerStyles>\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      </CardBottomSectionButtonRowContainerStyles>}\n    </CardBottomSectionContainer>\n  );\n});\n\nexport default CardBottomSection;\n"],"mappings":"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"}
+{"version":3,"file":"CardBottomSection.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardBottomSectionProgressStyles","div","CardBottomSectionNotesStyles","neutral_500","CardBottomSectionAuthorStyles","props","disabled","neutral_300","CardBottomSectionDivider","neutral_100","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","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"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"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 CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = 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 CardBottomSectionAuthorStyles = 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 CardBottomSectionDivider = 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 CardBottomSectionNoteLeftStyles = 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 CardBottomSectionNoteRightStyles = 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 CardBottomSectionButtonRowContainerStyles = 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 && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\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      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {actions && <CardBottomSectionButtonRowContainerStyles>\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      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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"}