@laerdal/life-react-components 2.0.0 → 2.0.1-dev.10.full

package/dist/Card/HorizontalCard/HorizontalCardActions.cjs

@@ -1,59 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HorizontalCardActions = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Button = require("../../Button");
-
 var _Toggles = require("../../Toggles");
-
 var _Dropdown = require("../../Dropdown");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject;
-
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
-
 var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
-      disabled = _ref.disabled;
-
+    disabled = _ref.disabled;
   var _React$useState = _react.default.useState([]),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      elRefs = _React$useState2[0],
-      setElRefs = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    elRefs = _React$useState2[0],
+    setElRefs = _React$useState2[1];
   var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
-
   _react.default.useEffect(function () {
     setElRefs(Array(length || 0).fill(null).map(function () {
       return /*#__PURE__*/_react.default.createRef();
     }));
   }, [length]);
-
   _react.default.useImperativeHandle(ref, function () {
     return elRefs;
   }, [elRefs]);
-
   var renderAction = function renderAction(item, index) {
     switch (item.componentType) {
       case 'icon':
         {
           var _item$disabled;
-
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
             ref: elRefs[index],
             variant: 'secondary',
@@ -64,11 +46,9 @@ var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_re
             children: item.icon
           }, index);
         }
-
       case 'toggle':
         {
           var _item$disabled2;
-
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggles.ToggleButton, {
             ref: elRefs[index],
             active: item.active,
@@ -78,11 +58,9 @@ var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_re
             disabled: (_item$disabled2 = item.disabled) !== null && _item$disabled2 !== void 0 ? _item$disabled2 : disabled
           }, index);
         }
-
       case 'dropdown':
         {
           var _item$disabled3;
-
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownButton, {
             ref: elRefs[index],
             type: 'icon',
@@ -104,7 +82,6 @@ var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_re
         }
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: (actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
       children: actions === null || actions === void 0 ? void 0 : actions.map(function (item, index) {
@@ -113,6 +90,5 @@ var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_re
     })
   });
 });
-
 exports.HorizontalCardActions = HorizontalCardActions;
 //# sourceMappingURL=HorizontalCardActions.cjs.map

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

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

package/dist/Card/HorizontalCard/HorizontalCardActions.js

@@ -1,8 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject;
-
 import React from 'react';
 import { IconButton } from '../../Button';
 import { ToggleButton } from '../../Toggles';
@@ -13,13 +11,11 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 export var HorizontalCardActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
-      disabled = _ref.disabled;
-
+    disabled = _ref.disabled;
   var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      elRefs = _React$useState2[0],
-      setElRefs = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    elRefs = _React$useState2[0],
+    setElRefs = _React$useState2[1];
   var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
   React.useEffect(function () {
     setElRefs(Array(length || 0).fill(null).map(function () {
@@ -29,13 +25,11 @@ export var HorizontalCardActions = /*#__PURE__*/React.forwardRef(function (_ref,
   React.useImperativeHandle(ref, function () {
     return elRefs;
   }, [elRefs]);
-
   var renderAction = function renderAction(item, index) {
     switch (item.componentType) {
       case 'icon':
         {
           var _item$disabled;
-
           return /*#__PURE__*/_jsx(IconButton, {
             ref: elRefs[index],
             variant: 'secondary',
@@ -46,11 +40,9 @@ export var HorizontalCardActions = /*#__PURE__*/React.forwardRef(function (_ref,
             children: item.icon
           }, index);
         }
-
       case 'toggle':
         {
           var _item$disabled2;
-
           return /*#__PURE__*/_jsx(ToggleButton, {
             ref: elRefs[index],
             active: item.active,
@@ -60,11 +52,9 @@ export var HorizontalCardActions = /*#__PURE__*/React.forwardRef(function (_ref,
             disabled: (_item$disabled2 = item.disabled) !== null && _item$disabled2 !== void 0 ? _item$disabled2 : disabled
           }, index);
         }
-
       case 'dropdown':
         {
           var _item$disabled3;
-
           return /*#__PURE__*/_jsx(DropdownButton, {
             ref: elRefs[index],
             type: 'icon',
@@ -86,7 +76,6 @@ export var HorizontalCardActions = /*#__PURE__*/React.forwardRef(function (_ref,
         }
     }
   };
-
   return /*#__PURE__*/_jsx(_Fragment, {
     children: (actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/_jsx(Container, {
       children: actions === null || actions === void 0 ? void 0 : actions.map(function (item, index) {

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardActions.js","names":["React","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalCardActions.js","names":["React","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAOzB,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,YAAY,QAAO,eAAe;AAC1C,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,OAAOC,MAAM,MAAM,mBAAmB;AAAC;AAAA;AAEvC,IAAMC,SAAS,GAAGD,MAAM,CAACE,GAAG,yFAE3B;AAID,OAAO,IAAMC,qBAAqB,gBAAGP,KAAK,CAACQ,UAAU,CAAC,gBACCC,GAAoD,EAAK;EAAA,IADxDC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;EAGvE,sBAA4BX,KAAK,CAACY,QAAQ,CAAuC,EAAE,CAAC;IAAA;IAA7EC,MAAM;IAAEC,SAAS;EACxB,IAAMC,MAAM,GAAG,CAAAL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,MAAM,KAAI,CAAC;EAEnCf,KAAK,CAACgB,SAAS,CAAC,YAAM;IACpBF,SAAS,CAACG,KAAK,CAACF,MAAM,IAAI,CAAC,CAAC,CAACG,IAAI,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC;MAAA,oBAAMnB,KAAK,CAACoB,SAAS,EAAqB;IAAA,EAAC,CAAC;EAC1F,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZf,KAAK,CAACqB,mBAAmB,CAACZ,GAAG,EAAE;IAAA,OAAMI,MAAM;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEtD,IAAMS,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAA0F,EAC1FC,KAAa,EAAK;IACtC,QAAQD,IAAI,CAACE,aAAa;MACxB,KAAK,MAAM;QAAE;UAAA;UACX,oBAAO,KAAC,UAAU;YAAC,GAAG,EAAEZ,MAAM,CAACW,KAAK,CAAE;YAEnB,OAAO,EAAE,WAAY;YACrB,wBAAwB,EAAE,IAAK;YAC/B,KAAK,EAAE,UAAW;YAClB,MAAM,EAAED,IAAI,CAACG,MAAO;YACpB,QAAQ,oBAAEH,IAAI,CAACZ,QAAQ,2DAAIA,QAAS;YAAA,UACpDY,IAAI,CAACI;UAAI,GANYH,KAAK,CAOhB;QACf;MACA,KAAK,QAAQ;QAAE;UAAA;UACb,oBAAO,KAAC,YAAY;YAAC,GAAG,EAAEX,MAAM,CAACW,KAAK,CAAE;YAEnB,MAAM,EAAED,IAAI,CAACK,MAAO;YACpB,QAAQ,EAAEL,IAAI,CAACM,QAAS;YACxB,YAAY,EAAEN,IAAI,CAACO,YAAa;YAChC,WAAW,EAAEP,IAAI,CAACQ,WAAY;YAC9B,QAAQ,qBAAER,IAAI,CAACZ,QAAQ,6DAAIA;UAAS,GAL/Ba,KAAK,CAK4B;QAC7D;MACA,KAAK,UAAU;QAAE;UAAA;UACf,oBAAO,KAAC,cAAc;YAAC,GAAG,EAAEX,MAAM,CAACW,KAAK,CAAE;YAEnB,IAAI,EAAE,MAAO;YACb,KAAK,EAAED,IAAI,CAACS,KAAM;YAClB,SAAS,EAAET,IAAI,CAACU,SAAU;YAC1B,OAAO,EAAEV,IAAI,CAACW,OAAQ;YACtB,IAAI,EAAEX,IAAI,CAACI,IAAK;YAChB,MAAM,EAAEJ,IAAI,CAACG,MAAO;YACpB,UAAU,EAAEH,IAAI,CAACY,UAAW;YAC5B,WAAW,EAAEZ,IAAI,CAACa,WAAY;YAC9B,aAAa,EAAEb,IAAI,CAACc,aAAc;YAClC,aAAa,EAAEd,IAAI,CAACe,aAAc;YAClC,WAAW,EAAEf,IAAI,CAACgB,WAAY;YAC9B,UAAU,EAAEhB,IAAI,CAACiB,UAAW;YAC5B,UAAU,EAAEjB,IAAI,CAACkB,UAAW;YAC5B,SAAS,EAAElB,IAAI,CAACmB,SAAU;YAC1B,QAAQ,qBAAEnB,IAAI,CAACZ,QAAQ,6DAAIA;UAAS,GAf/Ba,KAAK,CAe4B;QAC/D;IAAC;EAEL,CAAC;EAGD,oBACE;IAAA,UAEI,CAAAd,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,MAAM,kBACf,KAAC,SAAS;MAAA,UACPL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAES,GAAG,CAAC,UAACI,IAAI,EAAEC,KAAK;QAAA,OAAKF,YAAY,CAACC,IAAI,EAAEC,KAAK,CAAC;MAAA;IAAC;EAC/C,EAEb;AAEP,CAAC,CAAC"}

package/dist/Card/HorizontalCard/HorizontalCardBody.cjs

@@ -1,41 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HorizontalCardBody = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../../styles");
-
 var _LinearProgress = require("../../LinearProgress");
-
 var _Tag = require("../../Tag");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 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;
+    description = _ref.description,
+    progress = _ref.progress,
+    tags = _ref.tags;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
       children: title
@@ -55,6 +41,5 @@ var HorizontalCardBody = function HorizontalCardBody(_ref) {
     })]
   });
 };
-
 exports.HorizontalCardBody = HorizontalCardBody;
 //# sourceMappingURL=HorizontalCardBody.cjs.map

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

@@ -1 +1 @@
-{"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;;;;;;AAEA,IAAMA,SAAS,GAAGC,yBAAA,CAAOC,GAAV,6KAAf;;AAQA,IAAMC,KAAK,GAAGF,yBAAA,CAAOC,GAAV,wIACP,IAAAE,yBAAA,EAAkBC,0BAAA,CAAmBC,IAArC,EAA2CC,cAAA,CAAOC,KAAlD,CADO,EAGED,cAAA,CAAOE,WAHT,CAAX;;AAOA,IAAMC,WAAW,GAAGT,yBAAA,CAAOC,GAAV,gGACb,IAAAS,0BAAA,EAAmBN,0BAAA,CAAmBO,OAAtC,EAA+CL,cAAA,CAAOM,WAAtD,CADa,CAAjB;;AAIA,IAAMC,aAAa,GAAGb,yBAAA,CAAOC,GAAV,qLAAnB;;AAUO,IAAMa,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;EAAA,IAJJC,KAII,QAJJA,KAII;EAAA,IAHJC,WAGI,QAHJA,WAGI;EAAA,IAFJC,QAEI,QAFJA,QAEI;EAAA,IADJC,IACI,QADJA,IACI;EAEvE,oBACE,sBAAC,SAAD;IAAA,wBACE,qBAAC,KAAD;MAAA,UAAQH;IAAR,EADF,EAEGC,WAAW,iBAAI,qBAAC,WAAD;MAAA,UAAcA;IAAd,EAFlB,EAIIE,IAAI,iBACJ,qBAAC,aAAD;MAAA,UAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;QAAA,oBACvB,qBAAC,QAAD;UAAiB,KAAK,EAAED,GAAG,CAACE,KAA5B;UAAmC,OAAO,EAAEF,GAAG,CAACG,OAAhD;UAAyD,IAAI,EAAEH,GAAG,CAACI;QAAnE,GAAUH,KAAV,CADuB;MAAA,CAAT;IAAhB,EALJ,EASGJ,QAAQ,iBAAI,qBAAC,8BAAD;MAAgB,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;MAAuC,GAAG,EAAER,QAAQ,CAACS;IAArD,EATf;EAAA,EADF;AAaD,CApBM"}
+{"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.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 import React from 'react';
 import styled from 'styled-components';
 import { COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
@@ -15,9 +13,9 @@ var Description = styled.div(_templateObject3 || (_templateObject3 = _taggedTemp
 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;
+    description = _ref.description,
+    progress = _ref.progress,
+    tags = _ref.tags;
   return /*#__PURE__*/_jsxs(Container, {
     children: [/*#__PURE__*/_jsx(Title, {
       children: title

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

@@ -1 +1 @@
-{"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,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,kBAAnC,EAAuDC,kBAAvD,QAAgF,cAAhF;AACA,SAAQC,cAAR,QAA6B,sBAA7B;AACA,SAAQC,GAAR,QAAkB,WAAlB;;;AAEA,IAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAV,+JAAf;AAQA,IAAMC,KAAK,GAAGT,MAAM,CAACQ,GAAV,0HACPN,iBAAiB,CAACC,kBAAkB,CAACO,IAApB,EAA0BT,MAAM,CAACU,KAAjC,CADV,EAGEV,MAAM,CAACW,WAHT,CAAX;AAOA,IAAMC,WAAW,GAAGb,MAAM,CAACQ,GAAV,kFACbJ,kBAAkB,CAACD,kBAAkB,CAACW,OAApB,EAA6Bb,MAAM,CAACc,WAApC,CADL,CAAjB;AAIA,IAAMC,aAAa,GAAGhB,MAAM,CAACQ,GAAV,uKAAnB;AAUA,OAAO,IAAMS,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;EAAA,IAJJC,KAII,QAJJA,KAII;EAAA,IAHJC,WAGI,QAHJA,WAGI;EAAA,IAFJC,QAEI,QAFJA,QAEI;EAAA,IADJC,IACI,QADJA,IACI;EAEvE,oBACE,MAAC,SAAD;IAAA,wBACE,KAAC,KAAD;MAAA,UAAQH;IAAR,EADF,EAEGC,WAAW,iBAAI,KAAC,WAAD;MAAA,UAAcA;IAAd,EAFlB,EAIIE,IAAI,iBACJ,KAAC,aAAD;MAAA,UAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;QAAA,oBACvB,KAAC,GAAD;UAAiB,KAAK,EAAED,GAAG,CAACE,KAA5B;UAAmC,OAAO,EAAEF,GAAG,CAACG,OAAhD;UAAyD,IAAI,EAAEH,GAAG,CAACI;QAAnE,GAAUH,KAAV,CADuB;MAAA,CAAT;IAAhB,EALJ,EASGJ,QAAQ,iBAAI,KAAC,cAAD;MAAgB,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;MAAuC,GAAG,EAAER,QAAQ,CAACS;IAArD,EATf;EAAA,EADF;AAaD,CApBM"}
+{"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

@@ -1,33 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HorizontalCardThumbnail = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../../styles");
-
+var _Image = require("../../Image");
 var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject, _templateObject2, _templateObject3;
-
+var _templateObject, _templateObject2;
 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"])));
-
-var Image = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 120px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n"])));
-
+var 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;
+    icon = _ref.icon;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
       children: /*#__PURE__*/_react.default.cloneElement(icon, {
@@ -35,15 +25,16 @@ var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
         height: 48
       })
     }), image && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Image, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, {
+        fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
         src: image.src,
         alt: image.alt,
+        loader: (_image$loader = image.loader) !== null && _image$loader !== void 0 ? _image$loader : false,
         width: image.width,
         height: image.height
       })
     })]
   });
 };
-
 exports.HorizontalCardThumbnail = HorizontalCardThumbnail;
 //# sourceMappingURL=HorizontalCardThumbnail.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["IconContainer","styled","div","COLORS","black","neutral_500","ImageContainer","Image","img","HorizontalCardThumbnail","image","icon","React","cloneElement","width","height","src","alt"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\n\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nconst Image = styled.img`\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 120px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n                                                                          image,\n                                                                          icon\n                                                                        }) => {\n\n  return (\n    <>\n      {\n        icon &&\n        <IconContainer>\n          {React.cloneElement(icon, {width: 48, height: 48})}\n        </IconContainer>\n      }\n      {\n        image &&\n        <ImageContainer>\n          <Image src={image.src} alt={image.alt} width={image.width} height={image.height}/>\n        </ImageContainer>\n      }\n    </>\n  )\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAEA,IAAMA,aAAa,GAAGC,yBAAA,CAAOC,GAAV,yPAORC,cAAA,CAAOC,KAPC,EAUND,cAAA,CAAOE,WAVD,CAAnB;;AAeA,IAAMC,cAAc,GAAGL,yBAAA,CAAOC,GAAV,gMAApB;;AAOA,IAAMK,KAAK,GAAGN,yBAAA,CAAOO,GAAV,kOAAX;;AAaO,IAAMC,uBAAuD,GAAG,SAA1DA,uBAA0D,OAGO;EAAA,IAFJC,KAEI,QAFJA,KAEI;EAAA,IADJC,IACI,QADJA,IACI;EAE5E,oBACE;IAAA,WAEIA,IAAI,iBACJ,qBAAC,aAAD;MAAA,uBACGC,cAAA,CAAMC,YAAN,CAAmBF,IAAnB,EAAyB;QAACG,KAAK,EAAE,EAAR;QAAYC,MAAM,EAAE;MAApB,CAAzB;IADH,EAHJ,EAQIL,KAAK,iBACL,qBAAC,cAAD;MAAA,uBACE,qBAAC,KAAD;QAAO,GAAG,EAAEA,KAAK,CAACM,GAAlB;QAAuB,GAAG,EAAEN,KAAK,CAACO,GAAlC;QAAuC,KAAK,EAAEP,KAAK,CAACI,KAApD;QAA2D,MAAM,EAAEJ,KAAK,CAACK;MAAzE;IADF,EATJ;EAAA,EADF;AAgBD,CArBM"}
+{"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.js

@@ -1,19 +1,18 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
-
+var _templateObject, _templateObject2;
 import React from 'react';
 import styled from 'styled-components';
 import { COLORS } from '../../styles';
+import { ImageWithFallbacks } from "../../Image";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var IconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
-var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n"])));
-var Image = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 120px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n"])));
+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;
+    icon = _ref.icon;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [icon && /*#__PURE__*/_jsx(IconContainer, {
       children: /*#__PURE__*/React.cloneElement(icon, {
@@ -21,9 +20,11 @@ export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
         height: 48
       })
     }), image && /*#__PURE__*/_jsx(ImageContainer, {
-      children: /*#__PURE__*/_jsx(Image, {
+      children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
+        fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
         src: image.src,
         alt: image.alt,
+        loader: (_image$loader = image.loader) !== null && _image$loader !== void 0 ? _image$loader : false,
         width: image.width,
         height: image.height
       })

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","IconContainer","div","black","neutral_500","ImageContainer","Image","img","HorizontalCardThumbnail","image","icon","cloneElement","width","height","src","alt"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\n\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nconst Image = styled.img`\n  mix-blend-mode: multiply;\n  object-fit: cover;\n  width: 120px;\n  height: 100%;\n\n  .disabled & {\n    filter: grayscale(100%);\n  }\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n                                                                          image,\n                                                                          icon\n                                                                        }) => {\n\n  return (\n    <>\n      {\n        icon &&\n        <IconContainer>\n          {React.cloneElement(icon, {width: 48, height: 48})}\n        </IconContainer>\n      }\n      {\n        image &&\n        <ImageContainer>\n          <Image src={image.src} alt={image.alt} width={image.width} height={image.height}/>\n        </ImageContainer>\n      }\n    </>\n  )\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,cAArB;;;;AAEA,IAAMC,aAAa,GAAGF,MAAM,CAACG,GAAV,2OAORF,MAAM,CAACG,KAPC,EAUNH,MAAM,CAACI,WAVD,CAAnB;AAeA,IAAMC,cAAc,GAAGN,MAAM,CAACG,GAAV,kLAApB;AAOA,IAAMI,KAAK,GAAGP,MAAM,CAACQ,GAAV,oNAAX;AAaA,OAAO,IAAMC,uBAAuD,GAAG,SAA1DA,uBAA0D,OAGO;EAAA,IAFJC,KAEI,QAFJA,KAEI;EAAA,IADJC,IACI,QADJA,IACI;EAE5E,oBACE;IAAA,WAEIA,IAAI,iBACJ,KAAC,aAAD;MAAA,uBACGZ,KAAK,CAACa,YAAN,CAAmBD,IAAnB,EAAyB;QAACE,KAAK,EAAE,EAAR;QAAYC,MAAM,EAAE;MAApB,CAAzB;IADH,EAHJ,EAQIJ,KAAK,iBACL,KAAC,cAAD;MAAA,uBACE,KAAC,KAAD;QAAO,GAAG,EAAEA,KAAK,CAACK,GAAlB;QAAuB,GAAG,EAAEL,KAAK,CAACM,GAAlC;QAAuC,KAAK,EAAEN,KAAK,CAACG,KAApD;QAA2D,MAAM,EAAEH,KAAK,CAACI;MAAzE;IADF,EATJ;EAAA,EADF;AAgBD,CArBM"}
+{"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,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,9 +13,7 @@ Object.defineProperty(exports, "HorizontalCard", {
     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;
@@ -28,6 +25,5 @@ Object.keys(_types).forEach(function (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';\n\nexport { default as HorizontalCard } from './HorizontalCard';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA"}
+{"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.js.map

@@ -1 +1 @@
-{"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,SAAd;AAEA,SAASA,OAAO,IAAIC,cAApB,QAA0C,kBAA1C"}
+{"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';\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 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; alt?: string, height?: string; width?: string };\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';\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 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

@@ -30,9 +30,11 @@ export interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivEl
     icon?: React.ReactElement;
     image?: {
         src: string;
-        alt?: string;
+        fallbackSrc?: string;
+        alt: string;
         height?: string;
         width?: string;
+        loader?: boolean;
     };
     tags?: HorizontalCardTag[];
     progress?: HorizontalCardLinearProgression;

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';\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 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; alt?: string, height?: string; width?: string };\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';\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 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":""}