trepur_components 0.3.0 → 0.3.3

package/dist/components/Button/index.js

@@ -5,13 +5,13 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.buttonProps = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _Icon = _interopRequireWildcard(require("../Icon"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,170 +25,176 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const buttonProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  text: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  bgColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  borderColor: _propTypes.default.string,
+  hoverBgColor: _propTypes.default.string,
+  hoverTextColor: _propTypes.default.string,
+  hoverBorderColor: _propTypes.default.string,
+  hoverText: _propTypes.default.string,
+  type: _propTypes.default.string,
+  url: _propTypes.default.string,
+  design: _propTypes.default.string,
+  bordered: _propTypes.default.bool,
+  rounded: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  isLoading: _propTypes.default.bool,
+  leftIcon: _propTypes.default.shape(_Icon.iconProps),
+  rightIcon: _propTypes.default.shape(_Icon.iconProps),
+  centerIcon: _propTypes.default.shape(_Icon.iconProps)
+};
+exports.buttonProps = buttonProps;
+
 const Button = _ref => {
   let {
     buttonProps
   } = _ref;
   const [hovering, setHovering] = (0, _react.useState)(false);
-  const design = buttonProps.design ? buttonProps.design : 'standard';
+  if (buttonProps == undefined) return;
+  const design = (0, _classnames.default)({
+    [buttonProps.design]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.design,
+    'standard': !(buttonProps !== null && buttonProps !== void 0 && buttonProps.design)
+  });
   const padding = (0, _classnames.default)({
-    'px-1 py-1': buttonProps.type === 'social',
-    'px-3': buttonProps.type === 'icon',
-    'px-8': buttonProps.type !== 'social' && buttonProps.type !== 'icon'
+    'px-1 py-1': (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) === 'social',
+    'px-3': (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) === 'icon',
+    'px-8': (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) !== 'social' && (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) !== 'icon'
   }, 'py-2');
   const borderClassList = (0, _classnames.default)({
-    'border-2': buttonProps.bordered
+    'border-2': buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.bordered
   });
   const roundedClassList = (0, _classnames.default)({
-    'rounded-full': buttonProps.rounded,
-    'rounded-none': !buttonProps.rounded
+    'rounded-full': buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rounded,
+    'rounded-none': !(buttonProps !== null && buttonProps !== void 0 && buttonProps.rounded)
   });
-  const standardClasses = (0, _classnames.default)({
-    [borderClassList]: borderClassList,
-    [roundedClassList]: roundedClassList
-  }, "rounded-lg transition-backgroundColor \n        duration-500 transform");
-  const slideClasses = (0, _classnames.default)("btn px-8 border-2 ");
   const loadingClasses = (0, _classnames.default)({
-    'invisible': !buttonProps.isLoading
+    'invisible': !(buttonProps !== null && buttonProps !== void 0 && buttonProps.isLoading)
   }, 'absolute left-2/4 top-1/4 -ml-2');
   const colours = (0, _classnames.default)({
-    [buttonProps.hoverBgColor]: buttonProps.hoverBgColor,
-    [buttonProps.hoverTextColor]: buttonProps.hoverTextColor,
-    [buttonProps.hoverBorderColor]: buttonProps.hoverBorderColor,
-    [buttonProps.bgColor]: buttonProps.bgColor,
-    [buttonProps.textColor]: buttonProps.textColor,
-    [buttonProps.borderColor]: buttonProps.borderColor
+    [buttonProps.hoverBgColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.hoverBgColor,
+    [buttonProps.hoverTextColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.hoverTextColor,
+    [buttonProps.hoverBorderColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.hoverBorderColor,
+    [buttonProps.bgColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.bgColor,
+    [buttonProps.textColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.textColor,
+    [buttonProps.borderColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.borderColor
   });
   const classList = (0, _classnames.default)({
     [padding]: true,
     [colours]: true,
-    [buttonProps.classes]: buttonProps.classes,
-    [standardClasses]: design === 'standard',
-    [slideClasses]: design === 'slide'
+    [buttonProps.classes]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.classes,
+    [borderClassList]: borderClassList && design === 'standard',
+    [roundedClassList]: roundedClassList && design === 'standard',
+    'rounded-lg transition-backgroundColor duration-500 transform': design === 'standard',
+    'btn px-8 border-2': design === 'slide'
   });
-  const iconClassList = (0, _classnames.default)({
-    'fa-brands': buttonProps.iconBrand
+  const buttonContentClasses = (0, _classnames.default)({
+    'invisible': buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.isLoading
+  }, 'flex');
+
+  const iconLeft = (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon) && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: {
+      classes: (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon.brand) && 'fa-brands',
+      size: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon.size,
+      type: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon.type,
+      hollow: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon.hollow
+    }
+  });
+
+  const iconRight = (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon) && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: {
+      classes: buttonProps !== null && buttonProps !== void 0 && buttonProps.rightIcon.brand ? 'fa-brands' : '',
+      size: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon.size,
+      type: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon.type,
+      hollow: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon.hollow
+    }
+  });
+
+  const iconCenter = (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.centerIcon) && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: buttonProps.centerIcon
+  });
+
+  const loadingIcon = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: {
+      size: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.size,
+      type: 'spinner',
+      animation: 'pulse'
+    }
   });
 
-  let iconLeft = buttonProps.leftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-    classes: "pr-2",
-    type: buttonProps.leftIcon
-  }, buttonProps.iconHollow && {
-    hollow: buttonProps.iconHollow
-  }));
-
-  let iconRight = buttonProps.rightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-    classes: "pl-2",
-    type: buttonProps.rightIcon
-  }, buttonProps.iconHollow && {
-    hollow: buttonProps.iconHollow
-  }));
-
-  let iconCenter = buttonProps.centerIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-    size: buttonProps.iconSize,
-    classes: iconClassList,
-    type: buttonProps.centerIcon
-  }, buttonProps.iconHollow && {
-    hollow: buttonProps.iconHollow
-  }));
-
-  if (['internal', 'external'].includes(buttonProps.type)) {
-    return /*#__PURE__*/_react.default.createElement("a", _extends({}, buttonProps.type === 'external' && {
+  if (['internal', 'external'].includes(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type)) {
+    return /*#__PURE__*/_react.default.createElement("a", _extends({}, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) === 'external' && {
       target: '_blank'
     }, {
-      href: buttonProps.url
-    }), /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps.id && {
-      id: buttonProps.id
+      href: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.url
+    }), /*#__PURE__*/_react.default.createElement("button", _extends({}, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id) && {
+      id: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id
     }, {
       className: classList,
       type: "button",
-      "aria-busy": buttonProps.isLoading,
+      "aria-busy": buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.isLoading,
       onMouseOver: () => setHovering(true),
       onMouseOut: () => setHovering(false)
-    }, buttonProps.onClick && {
-      onClick: buttonProps.onClick
-    }, buttonProps.disabled && {
-      disabled: buttonProps.disabled
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) && {
+      onClick: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled) && {
+      disabled: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled
     }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-      className: buttonProps.isLoading && 'invisible'
-    }, buttonProps.leftIcon && iconLeft, hovering ? buttonProps.hoverText ? buttonProps.hoverText : buttonProps.text : buttonProps.text, buttonProps.rightIcon && iconRight), /*#__PURE__*/_react.default.createElement("div", {
+      className: buttonContentClasses
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon) && iconLeft, /*#__PURE__*/_react.default.createElement("p", null, hovering ? buttonProps !== null && buttonProps !== void 0 && buttonProps.hoverText ? buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.hoverText : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.text : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.text), (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon) && iconRight), /*#__PURE__*/_react.default.createElement("div", {
       className: loadingClasses
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: "spinner",
-      animation: "pulse"
-    })))));
-  } else if (['social', 'icon'].includes(buttonProps.type)) {
-    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps.id && {
-      id: buttonProps.id
+    }, loadingIcon))));
+  } else if (['social', 'icon'].includes(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type)) {
+    return /*#__PURE__*/_react.default.createElement("button", _extends({}, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id) && {
+      id: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id
     }, {
       className: classList,
       type: "button",
-      "aria-busy": buttonProps.isLoading,
+      "aria-busy": buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.isLoading,
       onMouseOver: () => setHovering(true),
       onMouseOut: () => setHovering(false)
-    }, buttonProps.onClick && {
-      onClick: buttonProps.onClick
-    }, buttonProps.disabled && {
-      disabled: buttonProps.disabled
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) && {
+      onClick: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled) && {
+      disabled: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled
     }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-      className: buttonProps.isLoading && 'invisible'
-    }, buttonProps.centerIcon && iconCenter), /*#__PURE__*/_react.default.createElement("div", {
+      className: buttonProps !== null && buttonProps !== void 0 && buttonProps.isLoading ? 'invisible' : ''
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.centerIcon) && iconCenter), /*#__PURE__*/_react.default.createElement("div", {
       className: loadingClasses
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: "spinner",
-      animation: "pulse"
-    }))));
-  } else return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps.id && {
-    id: buttonProps.id
+    }, loadingIcon)));
+  } else return /*#__PURE__*/_react.default.createElement("button", _extends({}, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id) && {
+    id: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id
   }, {
     className: classList,
     type: "button",
-    "aria-busy": buttonProps.isLoading,
+    "aria-busy": buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.isLoading,
     onMouseOver: () => setHovering(true),
     onMouseOut: () => setHovering(false)
-  }, buttonProps.onClick && {
-    onClick: buttonProps.onClick
-  }, buttonProps.disabled && {
-    disabled: buttonProps.disabled
+  }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) && {
+    onClick: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick
+  }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled) && {
+    disabled: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: buttonProps.isLoading && 'invisible'
-  }, buttonProps.leftIcon && iconLeft, hovering ? buttonProps.hoverText ? buttonProps.hoverText : buttonProps.text : buttonProps.text, buttonProps.rightIcon && iconRight), /*#__PURE__*/_react.default.createElement("div", {
+    className: buttonProps !== null && buttonProps !== void 0 && buttonProps.isLoading ? 'invisible' : ''
+  }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon) && iconLeft, /*#__PURE__*/_react.default.createElement("p", null, hovering ? buttonProps !== null && buttonProps !== void 0 && buttonProps.hoverText ? buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.hoverText : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.text : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.text), (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon) && iconRight), /*#__PURE__*/_react.default.createElement("div", {
     className: loadingClasses
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "spinner",
-    animation: "pulse"
-  }))));
+  }, loadingIcon)));
 };
 
 Button.propTypes = {
-  buttonProps: _propTypes.default.shape({
-    id: _propTypes.default.string,
-    classes: _propTypes.default.string,
-    text: _propTypes.default.string,
-    onClick: _propTypes.default.func,
-    leftIcon: _propTypes.default.string,
-    rightIcon: _propTypes.default.string,
-    centerIcon: _propTypes.default.string,
-    iconHollow: _propTypes.default.bool,
-    bgColor: _propTypes.default.string,
-    textColor: _propTypes.default.string,
-    borderColor: _propTypes.default.string,
-    hoverBgColor: _propTypes.default.string,
-    hoverTextColor: _propTypes.default.string,
-    hoverBorderColor: _propTypes.default.string,
-    hoverText: _propTypes.default.string,
-    type: _propTypes.default.string,
-    url: _propTypes.default.string,
-    design: _propTypes.default.string,
-    bordered: _propTypes.default.bool,
-    rounded: _propTypes.default.bool,
-    iconBrand: _propTypes.default.string,
-    disabled: _propTypes.default.bool,
-    iconSize: _propTypes.default.string,
-    isLoading: _propTypes.default.bool
-  })
+  buttonProps: _propTypes.default.shape(_objectSpread({}, buttonProps))
 };
 var _default = Button;
 exports.default = _default;

package/dist/components/Card/index.js

@@ -7,18 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.symbol.description.js");
+
 require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
-require("../index.css");
-
 var _Video = _interopRequireDefault(require("../Video"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,214 +31,122 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const Card = _ref => {
   let {
-    cardId,
-    cardClasses,
-    cardTitle,
-    cardImage,
-    cardSubTitle,
-    cardDescription,
-    cardExtraText,
-    cardHasCta,
-    cardImageBelowTitle,
-    cardTitleLeft,
-    cardTitleRight,
-    cardTitleBold,
-    cardImageClass,
-    cardSubTitleClass,
-    cardExtraTextClass,
-    cardDescriptionClass,
-    cardAltText,
-    cardRounded,
-    cardBordered,
-    videoId,
-    videoClasses,
-    autoPlay,
-    muted,
-    poster,
-    mp4File,
-    webmFile,
-    ogvFile,
-    videoHeight,
-    videoWidth,
-    withControls,
-    withPoster,
-    buttonId,
-    buttonClasses,
-    buttonText,
-    buttonOnClick,
-    buttonLeftIcon,
-    buttonRightIcon,
-    buttonCenterIcon,
-    buttonBgColor,
-    buttonTextColor,
-    buttonBorderColor,
-    buttonHoverBgColor,
-    buttonHoverTextColor,
-    buttonHoverBorderColor,
-    buttonHoverText,
-    buttonType,
-    buttonUrl,
-    buttonDesign,
-    buttonBordered,
-    buttonRounded,
-    buttonIconBrand,
-    buttonDisabled,
-    onHover
+    id,
+    classes,
+    title,
+    image,
+    subTitle,
+    description,
+    extraText,
+    hasCta,
+    imageBelowTitle,
+    titleLeft,
+    titleRight,
+    titleBold,
+    imageClass,
+    subTitleClass,
+    extraTextClass,
+    descriptionClass,
+    altText,
+    rounded,
+    bordered,
+    videoProps,
+    onHover,
+    iconButtonProps,
+    cardButtonProps,
+    button2Props
   } = _ref;
   const [showHoverButtons, setShowHoverButtons] = (0, _react.useState)(false);
-  let orderClass = cardImageBelowTitle ? ' order-first ' : '';
+  let orderClass = imageBelowTitle ? ' order-first ' : '';
   let btnClass = 'w-full p-3 ';
-  let border = cardBordered ? 'border border-grey border-opacity-100 ' : '';
-  let cardTitleFont = cardTitleBold ? 'font-bold' : '';
-  let cardTitlePosition = cardTitleLeft ? 'text-left ' : cardTitleRight ? 'text-right ' : 'text-center ';
-  let roundedImage = cardRounded ? 'rounded-t-2xl ' : '';
-  let roundedCard = cardRounded ? 'rounded-2xl ' : '';
+  let border = bordered ? 'border border-grey border-opacity-100 ' : '';
+  let cardTitleFont = titleBold ? 'font-bold' : '';
+  let cardTitlePosition = titleLeft ? 'text-left ' : titleRight ? 'text-right ' : 'text-center ';
+  let roundedImage = rounded ? 'rounded-t-2xl ' : '';
+  let roundedCard = rounded ? 'rounded-2xl ' : '';
   let contentWrapperClass = 'px-3 order-3';
   const titleWrapperClass = (0, _classnames.default)({
     [orderClass]: orderClass
   }, 'pt-3');
   const cardTitleClasses = (0, _classnames.default)({
-    [cardTitleFont]: cardTitleFont
-  }, cardTitlePosition, 'font-medium text-md text-grey');
+    [cardTitleFont]: cardTitleFont,
+    [cardTitlePosition]: true
+  }, 'font-medium text-md text-grey');
   const cardSubTitleClassList = (0, _classnames.default)({
-    [cardSubTitleClass]: cardSubTitleClass
+    [subTitleClass]: subTitleClass
   }, 'font-light text-sm text-grey');
   const cardDescriptionClassList = (0, _classnames.default)({
-    [cardDescriptionClass]: cardDescriptionClass
+    [descriptionClass]: descriptionClass
   }, 'font-extraLight text-xs text-light-grey');
   const classList = (0, _classnames.default)({
     [border]: border,
     [roundedCard]: roundedCard,
-    [cardClasses]: cardClasses
-  }, 'flex flex-col ');
+    [classes]: classes
+  }, 'flex flex-col');
   const imageClassList = (0, _classnames.default)({
-    [roundedImage]: !cardImageBelowTitle,
-    [cardImageClass]: cardImageClass
-  }, ' w-full object-cover h-full ');
+    [roundedImage]: !imageBelowTitle,
+    [imageClass]: imageClass
+  }, 'w-full object-cover h-full');
   const videoClassList = (0, _classnames.default)({
-    [roundedImage]: !cardImageBelowTitle,
-    [videoClasses]: videoClasses
-  }, ' w-full object-cover h-full ');
+    [roundedImage]: !imageBelowTitle,
+    [videoProps === null || videoProps === void 0 ? void 0 : videoProps.videoClasses]: videoProps === null || videoProps === void 0 ? void 0 : videoProps.videoClasses
+  }, 'w-full object-cover h-full');
   const cardExtraTextClassList = (0, _classnames.default)({
-    [cardExtraTextClass]: cardExtraTextClass,
-    ['pb-4']: !cardHasCta
+    [extraTextClass]: extraTextClass,
+    'pb-4': !hasCta
   }, 'w-full object-cover h-full font-extraLight text-xs text-light-grey');
   const imageWrapperClassList = (0, _classnames.default)({
-    [' order-2']: cardImageBelowTitle,
-    ["".concat(roundedImage, " order-1")]: !cardImageBelowTitle
-  }, ' h-64 overflow-hidden object-cover ');
+    'order-2': imageBelowTitle,
+    ["".concat(roundedImage, " order-1")]: !imageBelowTitle
+  }, 'h-64 overflow-hidden object-cover');
 
   const toggleHover = isHovering => {
     onHover && isHovering ? setShowHoverButtons(true) : setShowHoverButtons(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
-    key: cardId
-  }, cardId && {
-    id: cardId
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
   }, {
     className: classList,
     onMouseEnter: () => toggleHover(true),
     onMouseLeave: () => toggleHover(false)
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "card-content flex flex-1 flex-col"
-  }, mp4File || webmFile || ogvFile ? /*#__PURE__*/_react.default.createElement("div", {
+  }, videoProps !== null && videoProps !== void 0 && videoProps.mp4File || videoProps !== null && videoProps !== void 0 && videoProps.webmFile || videoProps !== null && videoProps !== void 0 && videoProps.ogvFile ? /*#__PURE__*/_react.default.createElement("div", {
     className: imageWrapperClassList
-  }, /*#__PURE__*/_react.default.createElement(_Video.default, _extends({
-    id: videoId,
-    classes: videoClassList,
-    autoPlay: autoPlay,
-    muted: muted
-  }, poster && {
-    poster: poster
-  }, mp4File && {
-    mp4File: mp4File
-  }, webmFile && {
-    webmFile: webmFile
-  }, ogvFile && {
-    ogvFile: ogvFile
-  }, {
-    height: videoHeight,
-    width: videoWidth,
-    withControls: withControls,
-    withPoster: withPoster
-  }))) : cardImage && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_Video.default, {
+    videoProps: videoProps
+  })) : image && /*#__PURE__*/_react.default.createElement("div", {
     className: imageWrapperClassList
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: imageClassList,
-    src: cardImage,
-    alt: cardAltText
+    src: image,
+    alt: altText
   })), !showHoverButtons ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: cardImageBelowTitle ? 'order-1' : 'order-3'
-  }, cardTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: imageBelowTitle ? 'order-1' : 'order-3'
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
     className: titleWrapperClass
   }, /*#__PURE__*/_react.default.createElement("h3", {
     className: cardTitleClasses
-  }, cardTitle))), /*#__PURE__*/_react.default.createElement("div", {
+  }, title))), /*#__PURE__*/_react.default.createElement("div", {
     className: contentWrapperClass
-  }, cardSubTitle && /*#__PURE__*/_react.default.createElement("h4", {
+  }, subTitle && /*#__PURE__*/_react.default.createElement("h4", {
     className: cardSubTitleClassList
-  }, cardSubTitle), cardDescription && /*#__PURE__*/_react.default.createElement("p", {
+  }, subTitle), description && /*#__PURE__*/_react.default.createElement("p", {
     className: cardDescriptionClassList
-  }, cardDescription), cardExtraText && /*#__PURE__*/_react.default.createElement("p", {
+  }, description), extraText && /*#__PURE__*/_react.default.createElement("p", {
     className: cardExtraTextClassList
-  }, cardExtraText))) : /*#__PURE__*/_react.default.createElement("div", {
+  }, extraText))) : /*#__PURE__*/_react.default.createElement("div", {
     className: "flex p-2 order-last h-24"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    buttonType: "icon",
-    buttonUrl: "/",
-    buttonCenterIcon: "heart",
-    buttonBgColor: "white",
-    buttonTextColor: "black",
-    buttonBorderColor: "black",
-    buttonHoverBgColor: "black",
-    buttonHoverTextColor: "white",
-    buttonHoverBorderColor: "black",
-    buttonBordered: true,
-    buttonClasses: "mt-8",
-    iconSize: 1,
-    iconHollow: true
+    buttonProps: iconButtonProps
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    buttonClasses: "ml-2 w-full mt-8",
-    buttonText: "Add to basket",
-    buttonBordered: true,
-    buttonRounded: false,
-    buttonDisabled: false,
-    buttonBgColor: "#2f4848",
-    buttonBorderColor: "#2f4848",
-    buttonTextColor: "white"
-  }))), cardHasCta && /*#__PURE__*/_react.default.createElement("div", {
+    buttonProps: button2Props
+  }))), hasCta && /*#__PURE__*/_react.default.createElement("div", {
     className: btnClass
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    buttonId: buttonId,
-    buttonClasses: buttonClasses + ' w-full',
-    buttonText: buttonText,
-    buttonType: buttonType,
-    buttonUrl: buttonUrl,
-    buttonBordered: buttonBordered,
-    buttonBgColor: buttonBgColor,
-    buttonTextColor: buttonTextColor,
-    buttonBorderColor: buttonBorderColor,
-    buttonHoverBgColor: buttonHoverBgColor,
-    buttonHoverTextColor: buttonHoverTextColor,
-    buttonHoverBorderColor: buttonHoverBorderColor
-  }, buttonDesign && {
-    buttonDesign: buttonDesign
-  }, buttonDisabled && {
-    buttonDisabled
-  }, {
-    buttonOnClick: buttonOnClick,
-    buttonLeftIcon: buttonLeftIcon,
-    buttonRightIcon: buttonRightIcon,
-    buttonCenterIcon: buttonCenterIcon,
-    buttonHoverBgColor: buttonHoverBgColor,
-    buttonHoverTextColor: buttonHoverTextColor,
-    buttonHoverBorderColor: buttonHoverBorderColor,
-    buttonHoverText: buttonHoverText,
-    buttonUrl: buttonUrl,
-    buttonRounded: buttonRounded,
-    buttonIconBrand: buttonIconBrand
-  }))));
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonProps: cardButtonProps
+  })));
 };
 
 var _default = Card;