@laerdal/life-react-components 2.2.1-dev.9.full → 2.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.cjs","names":["HorizontalCardContentContainer","styled","div","COLORS","white","HorizontalCardContainer","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nexport const HorizontalCardContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nexport const HorizontalCardContainer = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${HorizontalCardContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${HorizontalCardContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${HorizontalCardContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${HorizontalCardContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               dataTestId,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <HorizontalCardContainer ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <HorizontalCardContentContainer\n               onMouseDown={defaultOnMouseDownHandler}\n               data-testid={dataTestId}\n               {...rest}>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </HorizontalCardContentContainer>\n    </HorizontalCardContainer>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalCard.cjs","names":["ContentContainer","styled","div","COLORS","white","Container","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${ContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${ContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               dataTestId,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}\n               data-testid={dataTestId}\n               {...rest}\n               >\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":";;;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAwE;AAAA;AAAA;AAAA;AAAA;AAExE,IAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAG,6OAMbC,cAAM,CAACC,KAAK,CAEjC;AAED,IAAMC,SAAS,GAAGJ,yBAAM,CAACC,GAAG,ghCAKtBF,gBAAgB,EACcG,cAAM,CAACG,WAAW,EAKhDN,gBAAgB,EACFO,kBAAU,CAACC,YAAY,EASjCR,gBAAgB,EACIG,cAAM,CAACM,UAAU,EAKrCT,gBAAgB,EACFO,kBAAU,CAACG,YAAY,EAOrCV,gBAAgB,EACIG,cAAM,CAACQ,WAAW,EAKtCX,gBAAgB,EACFO,kBAAU,CAACK,YAAY,EAMvCC,mBAAW,EAQXb,gBAAgB,EACFO,kBAAU,CAACC,YAAY,EAKrCR,gBAAgB,EACcG,cAAM,CAACW,WAAW,CAIvD;AAEM,IAAMC,cAA4D,GAAG,SAA/DA,cAA4D,OAcU;EAAA,IAbJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,SAAS;IACnBC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGpF,sBAAsCC,cAAK,CAACC,QAAQ,CAAuC,EAAE,CAAC;IAAA;IAAvFC,WAAW;IAAEC,cAAc;EAClC,IAAMC,YAAY,GAAGJ,cAAK,CAACK,MAAM,CAAiB,IAAI,CAAC;EAEvD,IAAAC,uBAAe,EAACF,YAAY,EAAEF,WAAW,CAAC;EAE1C,IAAMK,GAAG,aAAMf,OAAO,cAAIE,MAAM,GAAG,WAAW,GAAG,EAAE,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAE;EAEtG,IAAMW,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxB,CAACZ,QAAQ,IAAIF,MAAM,IAAIA,MAAM,EAAE;EACjC,CAAC;EAED,IAAMe,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,CAAsC,EAAK;IACpEA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIH,WAAW,EAAE;EACpC,CAAC;EAED,oBACE,qBAAC,SAAS;IAAC,GAAG,EAAEJ,YAAa;IAClB,QAAQ,EAAEV,MAAM,IAAI,CAACE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IACvC,SAAS,EAAEW,GAAI;IACf,SAAS,EAAEE,iBAAkB;IAC7B,OAAO,EAAED,WAAY;IACrB,WAAW,EAAEI,iCAA0B;IACvC,eAAad;EAAW,GACpBC,IAAI;IAAA,uBAEjB,sBAAC,gBAAgB;MAAA,wBAEf,qBAAC,gDAAuB;QAAC,KAAK,EAAEN,KAAM;QACb,IAAI,EAAEF;MAAK,EAAE,eAEtC,qBAAC,sCAAkB;QAAC,KAAK,EAAEJ,KAAM;QACb,WAAW,EAAEC,WAAY;QACzB,IAAI,EAAEC,IAAK;QACX,QAAQ,EAAEC;MAAS,EAAE,eAEzC,qBAAC,4CAAqB;QAAC,GAAG,EAAE,aAAAuB,QAAQ;UAAA,OAAIV,cAAc,CAACU,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,EAAE,CAAC;QAAA,CAAC;QAChD,OAAO,EAAElB,OAAQ;QACjB,QAAQ,EAAEC;MAAS,EAAE;IAAA;EAE3B,GACT;AAEhB,CAAC;AAAC;AAAA,eAEaV,cAAc;AAAA"}

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

@@ -1,6 +1,4 @@
 import React from 'react';
 import { HorizontalCardProps } from './types';
-export declare const HorizontalCardContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HorizontalCard: React.FunctionComponent<HorizontalCardProps>;
 export default HorizontalCard;

package/dist/Card/HorizontalCard/HorizontalCard.js

@@ -15,8 +15,8 @@ import { HorizontalCardActions } from './HorizontalCardActions';
 import { defaultOnMouseDownHandler, useActionWithin } from '../../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var HorizontalCardContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), COLORS.white);
-export var HorizontalCardContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), HorizontalCardContentContainer, COLORS.neutral_200, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.primary_20, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, COLORS.primary_100, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.neutral_100);
+var ContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), COLORS.white);
+var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), ContentContainer, COLORS.neutral_200, ContentContainer, BOXSHADOWS.BOXSHADOW_L1, ContentContainer, COLORS.primary_20, ContentContainer, BOXSHADOWS.BOXSHADOW_L3, ContentContainer, COLORS.primary_100, ContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, ContentContainer, BOXSHADOWS.BOXSHADOW_L1, ContentContainer, COLORS.neutral_100);
 export var HorizontalCard = function HorizontalCard(_ref) {
   var title = _ref.title,
     description = _ref.description,
@@ -45,17 +45,16 @@ export var HorizontalCard = function HorizontalCard(_ref) {
   var handleButtonPress = function handleButtonPress(e) {
     e.key === 'Enter' && handleClick();
   };
-  return /*#__PURE__*/_jsx(HorizontalCardContainer, {
+  return /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({
     ref: containerRef,
     tabIndex: action && !disabled ? 0 : -1,
     className: cls,
     onKeyDown: handleButtonPress,
     onClick: handleClick,
     onMouseDown: defaultOnMouseDownHandler,
-    children: /*#__PURE__*/_jsxs(HorizontalCardContentContainer, _objectSpread(_objectSpread({
-      onMouseDown: defaultOnMouseDownHandler,
-      "data-testid": dataTestId
-    }, rest), {}, {
+    "data-testid": dataTestId
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs(ContentContainer, {
       children: [/*#__PURE__*/_jsx(HorizontalCardThumbnail, {
         image: image,
         icon: icon
@@ -71,8 +70,8 @@ export var HorizontalCard = function HorizontalCard(_ref) {
         actions: actions,
         disabled: disabled
       })]
-    }))
-  });
+    })
+  }));
 };
 export default HorizontalCard;
 //# sourceMappingURL=HorizontalCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","HorizontalCardContentContainer","div","white","HorizontalCardContainer","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nexport const HorizontalCardContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nexport const HorizontalCardContainer = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${HorizontalCardContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${HorizontalCardContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${HorizontalCardContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${HorizontalCardContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               dataTestId,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <HorizontalCardContainer ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <HorizontalCardContentContainer\n               onMouseDown={defaultOnMouseDownHandler}\n               data-testid={dataTestId}\n               {...rest}>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </HorizontalCardContentContainer>\n    </HorizontalCardContainer>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","ContentContainer","div","white","Container","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${ContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${ContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               dataTestId,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}\n               data-testid={dataTestId}\n               {...rest}\n               >\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,MAAmB,OAAO;AAEtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,UAAU,EAAEC,MAAM,EAAEC,WAAW,QAAO,cAAc;AAC5D,SAAQC,uBAAuB,QAAO,2BAA2B;AACjE,SAAQC,kBAAkB,QAAO,sBAAsB;AACvD,SAAQC,qBAAqB,QAAO,yBAAyB;AAC7D,SAAQC,yBAAyB,EAAEC,eAAe,QAAO,cAAc;AAAC;AAAA;AAExE,IAAMC,gBAAgB,GAAGT,MAAM,CAACU,GAAG,+NAMbR,MAAM,CAACS,KAAK,CAEjC;AAED,IAAMC,SAAS,GAAGZ,MAAM,CAACU,GAAG,kgCAKtBD,gBAAgB,EACcP,MAAM,CAACW,WAAW,EAKhDJ,gBAAgB,EACFR,UAAU,CAACa,YAAY,EASjCL,gBAAgB,EACIP,MAAM,CAACa,UAAU,EAKrCN,gBAAgB,EACFR,UAAU,CAACe,YAAY,EAOrCP,gBAAgB,EACIP,MAAM,CAACe,WAAW,EAKtCR,gBAAgB,EACFR,UAAU,CAACiB,YAAY,EAMvCf,WAAW,EAQXM,gBAAgB,EACFR,UAAU,CAACa,YAAY,EAKrCL,gBAAgB,EACcP,MAAM,CAACiB,WAAW,CAIvD;AAED,OAAO,IAAMC,cAA4D,GAAG,SAA/DA,cAA4D,OAcU;EAAA,IAbJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,SAAS;IACnBC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGpF,sBAAsClC,KAAK,CAACmC,QAAQ,CAAuC,EAAE,CAAC;IAAA;IAAvFC,WAAW;IAAEC,cAAc;EAClC,IAAMC,YAAY,GAAGtC,KAAK,CAACuC,MAAM,CAAiB,IAAI,CAAC;EAEvD9B,eAAe,CAAC6B,YAAY,EAAEF,WAAW,CAAC;EAE1C,IAAMI,GAAG,aAAMb,OAAO,cAAIE,MAAM,GAAG,WAAW,GAAG,EAAE,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAE;EAEtG,IAAMS,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxB,CAACV,QAAQ,IAAIF,MAAM,IAAIA,MAAM,EAAE;EACjC,CAAC;EAED,IAAMa,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,CAAsC,EAAK;IACpEA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIH,WAAW,EAAE;EACpC,CAAC;EAED,oBACE,KAAC,SAAS;IAAC,GAAG,EAAEH,YAAa;IAClB,QAAQ,EAAET,MAAM,IAAI,CAACE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IACvC,SAAS,EAAES,GAAI;IACf,SAAS,EAAEE,iBAAkB;IAC7B,OAAO,EAAED,WAAY;IACrB,WAAW,EAAEjC,yBAA0B;IACvC,eAAayB;EAAW,GACpBC,IAAI;IAAA,uBAEjB,MAAC,gBAAgB;MAAA,wBAEf,KAAC,uBAAuB;QAAC,KAAK,EAAEN,KAAM;QACb,IAAI,EAAEF;MAAK,EAAE,eAEtC,KAAC,kBAAkB;QAAC,KAAK,EAAEJ,KAAM;QACb,WAAW,EAAEC,WAAY;QACzB,IAAI,EAAEC,IAAK;QACX,QAAQ,EAAEC;MAAS,EAAE,eAEzC,KAAC,qBAAqB;QAAC,GAAG,EAAE,aAAAoB,QAAQ;UAAA,OAAIR,cAAc,CAACQ,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,EAAE,CAAC;QAAA,CAAC;QAChD,OAAO,EAAEf,OAAQ;QACjB,QAAQ,EAAEC;MAAS,EAAE;IAAA;EAE3B,GACT;AAEhB,CAAC;AAED,eAAeV,cAAc"}

package/dist/Card/HorizontalCard/HorizontalCardBody.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HorizontalCardBodyTitle = exports.HorizontalCardBodyTagsContainer = exports.HorizontalCardBodyDescription = exports.HorizontalCardBodyContainer = exports.HorizontalCardBody = void 0;
+exports.HorizontalCardBody = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -13,25 +13,21 @@ var _LinearProgress = require("../../LinearProgress");
 var _Tag = require("../../Tag");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var HorizontalCardBodyContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
-exports.HorizontalCardBodyContainer = HorizontalCardBodyContainer;
-var HorizontalCardBodyTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black), _styles.COLORS.neutral_500);
-exports.HorizontalCardBodyTitle = HorizontalCardBodyTitle;
-var HorizontalCardBodyDescription = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
-exports.HorizontalCardBodyDescription = HorizontalCardBodyDescription;
-var HorizontalCardBodyTagsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
-exports.HorizontalCardBodyTagsContainer = HorizontalCardBodyTagsContainer;
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
+var Title = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black), _styles.COLORS.neutral_500);
+var Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+var TagsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
 var HorizontalCardBody = function HorizontalCardBody(_ref) {
   var title = _ref.title,
     description = _ref.description,
     progress = _ref.progress,
     tags = _ref.tags;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalCardBodyContainer, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardBodyTitle, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
       children: title
-    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardBodyDescription, {
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Description, {
       children: description
-    }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardBodyTagsContainer, {
+    }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagsContainer, {
       children: tags.map(function (tag, index) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
           label: tag.label,

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":["Container","styled","div","Title","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","neutral_500","Description","ComponentXSStyling","Regular","neutral_600","TagsContainer","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\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n`;\n\nconst Title = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nconst Description = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n                                                                     title,\n                                                                     description,\n                                                                     progress,\n                                                                     tags,\n                                                                   }) => {\n\n  return (\n    <Container>\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n      {\n        tags &&\n        <TagsContainer>{tags.map((tag, index) => (\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n        </TagsContainer>\n      }\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n    </Container>\n  )\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAA8B;AAAA;AAE9B,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,6KAM3B;AAED,IAAMC,KAAK,GAAGF,yBAAM,CAACC,GAAG,wIACpB,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,KAAK,CAAC,EAE/CD,cAAM,CAACE,WAAW,CAE9B;AAED,IAAMC,WAAW,GAAGT,yBAAM,CAACC,GAAG,gGAC1B,IAAAS,0BAAkB,EAACN,0BAAkB,CAACO,OAAO,EAAEL,cAAM,CAACM,WAAW,CAAC,CACrE;AAED,IAAMC,aAAa,GAAGb,yBAAM,CAACC,GAAG,qLAM/B;AAIM,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,SAAS;IAAA,wBACR,qBAAC,KAAK;MAAA,UAAEH;IAAK,EAAS,EACrBC,WAAW,iBAAI,qBAAC,WAAW;MAAA,UAAEA;IAAW,EAAe,EAEtDE,IAAI,iBACJ,qBAAC,aAAa;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBAClC,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,EAC9D,EAEjBJ,QAAQ,iBAAI,qBAAC,8BAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC9D;AAEhB,CAAC;AAAC"}

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

@@ -1,9 +1,5 @@
 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

@@ -7,21 +7,21 @@ import { LinearProgress } from '../../LinearProgress';
 import { Tag } from '../../Tag';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var HorizontalCardBodyContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
-export var HorizontalCardBodyTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
-export var HorizontalCardBodyDescription = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
-export var HorizontalCardBodyTagsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
+var Title = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
+var Description = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+var TagsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
 export var HorizontalCardBody = function HorizontalCardBody(_ref) {
   var title = _ref.title,
     description = _ref.description,
     progress = _ref.progress,
     tags = _ref.tags;
-  return /*#__PURE__*/_jsxs(HorizontalCardBodyContainer, {
-    children: [/*#__PURE__*/_jsx(HorizontalCardBodyTitle, {
+  return /*#__PURE__*/_jsxs(Container, {
+    children: [/*#__PURE__*/_jsx(Title, {
       children: title
-    }), description && /*#__PURE__*/_jsx(HorizontalCardBodyDescription, {
+    }), description && /*#__PURE__*/_jsx(Description, {
       children: description
-    }), tags && /*#__PURE__*/_jsx(HorizontalCardBodyTagsContainer, {
+    }), tags && /*#__PURE__*/_jsx(TagsContainer, {
       children: tags.map(function (tag, index) {
         return /*#__PURE__*/_jsx(Tag, {
           label: tag.label,

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","Container","div","Title","Bold","black","neutral_500","Description","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"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\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n`;\n\nconst Title = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nconst Description = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n                                                                     title,\n                                                                     description,\n                                                                     progress,\n                                                                     tags,\n                                                                   }) => {\n\n  return (\n    <Container>\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n      {\n        tags &&\n        <TagsContainer>{tags.map((tag, index) => (\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n        </TagsContainer>\n      }\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n    </Container>\n  )\n};\n"],"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,IAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAG,+JAM3B;AAED,IAAMC,KAAK,GAAGT,MAAM,CAACQ,GAAG,0HACpBN,iBAAiB,CAACC,kBAAkB,CAACO,IAAI,EAAET,MAAM,CAACU,KAAK,CAAC,EAE/CV,MAAM,CAACW,WAAW,CAE9B;AAED,IAAMC,WAAW,GAAGb,MAAM,CAACQ,GAAG,kFAC1BJ,kBAAkB,CAACD,kBAAkB,CAACW,OAAO,EAAEb,MAAM,CAACc,WAAW,CAAC,CACrE;AAED,IAAMC,aAAa,GAAGhB,MAAM,CAACQ,GAAG,uKAM/B;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,SAAS;IAAA,wBACR,KAAC,KAAK;MAAA,UAAEH;IAAK,EAAS,EACrBC,WAAW,iBAAI,KAAC,WAAW;MAAA,UAAEA;IAAW,EAAe,EAEtDE,IAAI,iBACJ,KAAC,aAAa;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBAClC,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,EAC9D,EAEjBJ,QAAQ,iBAAI,KAAC,cAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC9D;AAEhB,CAAC"}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HorizontalCardThumbnail = exports.HorizontalCardImageContainer = exports.HorizontalCardIconContainer = void 0;
+exports.HorizontalCardThumbnail = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -12,21 +12,19 @@ var _styles = require("../../styles");
 var _Image = require("../../Image");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
-var HorizontalCardIconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), _styles.COLORS.black, _styles.COLORS.neutral_500);
-exports.HorizontalCardIconContainer = HorizontalCardIconContainer;
-var HorizontalCardImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  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"])));
-exports.HorizontalCardImageContainer = HorizontalCardImageContainer;
+var IconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), _styles.COLORS.black, _styles.COLORS.neutral_500);
+var ImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  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"])));
 var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
   var _image$fallbackSrc, _image$loader;
   var image = _ref.image,
     icon = _ref.icon;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardIconContainer, {
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
       children: /*#__PURE__*/_react.default.cloneElement(icon, {
         width: 48,
         height: 48
       })
-    }), image && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardImageContainer, {
+    }), image && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, {
         fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
         src: image.src,

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":["IconContainer","styled","div","COLORS","black","neutral_500","ImageContainer","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\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  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          <IconContainer>\n            {React.cloneElement(icon, {width: 48, height: 48})}\n          </IconContainer>\n      }\n      {\n        image &&\n          <ImageContainer>\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\n          </ImageContainer>\n      }\n    </>\n  )\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAA+C;AAAA;AAE/C,IAAMA,aAAa,GAAGC,yBAAM,CAACC,GAAG,yPAOrBC,cAAM,CAACC,KAAK,EAGVD,cAAM,CAACE,WAAW,CAE9B;AAGD,IAAMC,cAAc,GAAGL,yBAAM,CAACC,GAAG,2YAqBhC;AAIM,IAAMK,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,qBAAC,aAAa;MAAA,uBACXC,cAAK,CAACC,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACpC,EAGlBL,KAAK,iBACH,qBAAC,cAAc;MAAA,uBACX,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,EACjF;EAAA,EAEpB;AAEP,CAAC;AAAC"}

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

@@ -1,7 +1,5 @@
 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

@@ -4,22 +4,22 @@ import React from 'react';
 import styled from 'styled-components';
 import { COLORS } from '../../styles';
 import { ImageWithFallbacks } from "../../Image";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var HorizontalCardIconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
-export var HorizontalCardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
+var IconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
+var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  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"])));
 export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
   var _image$fallbackSrc, _image$loader;
   var image = _ref.image,
     icon = _ref.icon;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [icon && /*#__PURE__*/_jsx(HorizontalCardIconContainer, {
+    children: [icon && /*#__PURE__*/_jsx(IconContainer, {
       children: /*#__PURE__*/React.cloneElement(icon, {
         width: 48,
         height: 48
       })
-    }), image && /*#__PURE__*/_jsx(HorizontalCardImageContainer, {
+    }), image && /*#__PURE__*/_jsx(ImageContainer, {
       children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
         fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
         src: image.src,

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","IconContainer","div","black","neutral_500","ImageContainer","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\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  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          <IconContainer>\n            {React.cloneElement(icon, {width: 48, height: 48})}\n          </IconContainer>\n      }\n      {\n        image &&\n          <ImageContainer>\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\n          </ImageContainer>\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,IAAMC,aAAa,GAAGH,MAAM,CAACI,GAAG,2OAOrBH,MAAM,CAACI,KAAK,EAGVJ,MAAM,CAACK,WAAW,CAE9B;AAGD,IAAMC,cAAc,GAAGP,MAAM,CAACI,GAAG,6XAqBhC;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,aAAa;MAAA,uBACXX,KAAK,CAACY,YAAY,CAACD,IAAI,EAAE;QAACE,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACpC,EAGlBJ,KAAK,iBACH,KAAC,cAAc;MAAA,uBACX,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,EACjF;EAAA,EAEpB;AAEP,CAAC"}

package/dist/Card/HorizontalCard/index.cjs

@@ -1,11 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  HorizontalCard: true
+};
+Object.defineProperty(exports, "HorizontalCard", {
+  enumerable: true,
+  get: function get() {
+    return _HorizontalCard.default;
+  }
+});
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -14,37 +25,5 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-var _HorizontalCard = require("./HorizontalCard");
-Object.keys(_HorizontalCard).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _HorizontalCard[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _HorizontalCard[key];
-    }
-  });
-});
-var _HorizontalCardBody = require("./HorizontalCardBody");
-Object.keys(_HorizontalCardBody).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _HorizontalCardBody[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _HorizontalCardBody[key];
-    }
-  });
-});
-var _HorizontalCardThumbnail = require("./HorizontalCardThumbnail");
-Object.keys(_HorizontalCardThumbnail).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _HorizontalCardThumbnail[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _HorizontalCardThumbnail[key];
-    }
-  });
-});
+var _HorizontalCard = _interopRequireDefault(require("./HorizontalCard"));
 //# sourceMappingURL=index.cjs.map

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';\n\nexport { default as HorizontalCard } from './HorizontalCard';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEA"}

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

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

package/dist/Card/HorizontalCard/index.js

@@ -1,5 +1,3 @@
 export * from './types';
-export * from './HorizontalCard';
-export * from './HorizontalCardBody';
-export * from './HorizontalCardThumbnail';
+export { default as HorizontalCard } from './HorizontalCard';
 //# sourceMappingURL=index.js.map

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":["default","HorizontalCard"],"sources":["../../../src/Card/HorizontalCard/index.ts"],"sourcesContent":["export * from './types';\n\nexport { default as HorizontalCard } from './HorizontalCard';\n"],"mappings":"AAAA,cAAc,SAAS;AAEvB,SAASA,OAAO,IAAIC,cAAc,QAAQ,kBAAkB"}

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 from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\nimport { Testable } from 'src/types';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\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\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)[];\n}\n"],"mappings":""}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React 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'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\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\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)[];\n}\n"],"mappings":""}

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

@@ -4,7 +4,7 @@ import { ToggleButtonProps } from '../../Toggles/ToggleButton';
 import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
 import { TagVariants } from '../../Tag';
 import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
-import { Testable } from 'src/types';
+import { Testable } from '../../types';
 export type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
     componentType: 'icon';
     icon: React.ReactNode;

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 from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\nimport { Testable } from 'src/types';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\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\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)[];\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React 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'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\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\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)[];\n}\n"],"mappings":""}

package/dist/ChipsInput/ChipInputField.cjs

@@ -33,7 +33,7 @@ var ChipInputContentContainer = _styledComponents.default.div(_templateObject4 |
 exports.ChipInputContentContainer = ChipInputContentContainer;
 var ChipInputEl = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.black, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
 exports.ChipInputEl = ChipInputEl;
-var ChipInputContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), ChipInputEl, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), ChipInputEl, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), ChipInputContentContainer, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.critical_500, ChipInputContentContainer, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
+var ChipInputContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), ChipInputEl, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), ChipInputEl, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), ChipInputContentContainer, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.critical_500, ChipInputContentContainer, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
 exports.ChipInputContainer = ChipInputContainer;
 var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var inputId = _ref.inputId,