trepur_components 0.1.42 → 0.2.1

package/dist/Accordion/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Collapsible = _interopRequireDefault(require("../../Atoms/Collapsible"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Accordion = _ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, items && items.map(item => {
+    return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
+      title: item.title,
+      subtitle: item.subtitle,
+      content: item.content,
+      icon: item.icon,
+      borderTop: item.showTopBorder,
+      borderBottom: item.showBottomBorder,
+      bgColor: item.bgColor,
+      hoverBgColor: item.hoverBgColor,
+      textColor: item.textColor,
+      hoverTextColor: item.hoverTextColor,
+      contentBgColor: item.expandedBgColor,
+      contentTextColor: item.expandedTextColor,
+      dropdownHeight: item.dropdownHeight,
+      boldTitle: item.boldTitle,
+      showBottomLine: item.showBottomLine,
+      borderTop: item.borderTop,
+      borderBottom: item.borderBottom,
+      iconSize: item.iconSize,
+      isDropdown: true
+    });
+  }));
+};
+
+var _default = Accordion;
+exports.default = _default;

package/dist/AlertBar/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Icon = _interopRequireDefault(require("../../Atoms/Icon"));
+
+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); }
+
+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; }
+
+const AlertBar = _ref => {
+  let {
+    type,
+    text,
+    leftIcon,
+    rightIcon,
+    textColor,
+    leftIconColor,
+    rightIconColor
+  } = _ref;
+  let bgColor;
+  if (type === 'success') bgColor = 'bg-brand-success';
+  if (type === 'warning') bgColor = 'bg-brand-warning';
+  if (type === 'error') bgColor = 'bg-brand-error';
+  let iconLeft = leftIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: leftIcon
+  }) : null;
+  let iconRight = rightIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: rightIcon
+  }) : null;
+  const [styles, setStyles] = (0, _react.useState)({
+    'color': textColor
+  });
+  const [leftIconStyles, setLeftIconStyles] = (0, _react.useState)({
+    'color': leftIconColor
+  });
+  const [rightIconStyles, setRightIconStyles] = (0, _react.useState)({
+    'color': rightIconColor
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'w-parent flex text-center h-8 ' + bgColor
+  }, leftIcon && /*#__PURE__*/_react.default.createElement("span", {
+    style: leftIconStyles,
+    className: "pt-1 left-5 pl-8"
+  }, iconLeft), /*#__PURE__*/_react.default.createElement("h3", {
+    style: styles,
+    className: "w-full text-center pt-1 pl-8"
+  }, text), rightIcon && /*#__PURE__*/_react.default.createElement("span", {
+    style: rightIconStyles,
+    className: "px-8 pt-1 float-right"
+  }, iconRight));
+};
+
+var _default = AlertBar;
+exports.default = _default;

package/dist/{components/Breadcrumbs → Breadcrumbs}/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+require("../../../../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Breadcrumbs = _ref => {

package/dist/{components/BreadcrumbsBordered → BreadcrumbsBordered}/index.js

@@ -7,7 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _index = _interopRequireDefault(require("../BreadcrumbsBorderedItem/index"));
+var _BreadcrumbsItem = _interopRequireDefault(require("../../Atoms/BreadcrumbsItem"));
+
+require("../../../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -36,7 +38,7 @@ const Breadcrumbs = _ref => {
       bType = 'link';
     }
 
-    return /*#__PURE__*/_react.default.createElement(_index.default, {
+    return /*#__PURE__*/_react.default.createElement(_BreadcrumbsItem.default, {
       classNames: margin,
       name: link.name,
       link: link.link,

package/dist/BreadcrumbsItem/index.css

@@ -0,0 +1,42 @@
+.right-arrow {
+  @apply w-0;
+  @apply h-0;
+  border-top: 17px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-left: 16px solid;
+  @apply absolute;
+  right: -16px;
+  @apply top-0;
+}
+
+.test-arrow-bottom {
+  @apply w-0;
+  @apply h-0;
+  border-top: 17px solid;
+  border-bottom: 18px solid transparent;
+  border-left: 17px solid transparent;
+  @apply absolute;
+  left: -17px;
+  bottom: -0px;
+  -webkit-transform: scaleY(-1);
+  transform: scaleY(-1);
+}
+
+.test-arrow-top {
+  @apply w-0;
+  @apply h-0;
+  border-top: 18px solid;
+  border-bottom: 17px solid transparent;
+  border-left: 17px solid transparent;
+  @apply absolute;
+  left: -17px;
+  top: 0px;
+}
+
+.bc-item {
+  @apply relative;
+}
+
+.bc-item:focus {
+  @apply border-0;
+}

package/dist/{components/BreadcrumbsBorderedItem → BreadcrumbsItem}/index.js

@@ -9,6 +9,8 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+require("../../../../index.css");
+
 require("./index.css");
 
 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); }

package/dist/{components/Button → Button}/index.js

@@ -11,7 +11,11 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _index = _interopRequireDefault(require("../Icon/index"));
+var _Icon = _interopRequireDefault(require("../../Atoms/Icon"));
+
+require("../../../../index.css");
+
+require("./Styles.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -26,14 +30,14 @@ const Button = _ref => {
     ctaText,
     className,
     onClick,
-    leftIcon,
-    rightIcon,
-    centerIcon,
-    bgColor,
-    textColor,
+    buttonLeftIcon,
+    buttonRightIcon,
+    buttonCenterIcon,
+    buttonBgColor,
+    buttonTextColor,
     borderColor,
-    hoverBgColor,
-    hoverTextColor,
+    hoverButtonBgColor,
+    hoverButtonTextColor,
     hoverBorderColor,
     hoverCtaText,
     url,
@@ -54,24 +58,24 @@ const Button = _ref => {
     classes = slideClasses;
   }
 
-  let iconLeft = leftIcon && /*#__PURE__*/_react.default.createElement(_index.default, {
+  let iconLeft = buttonLeftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     className: "pr-2",
-    type: leftIcon
+    type: buttonLeftIcon
   });
 
-  let iconRight = rightIcon && /*#__PURE__*/_react.default.createElement(_index.default, {
+  let iconRight = buttonRightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     className: "pl-2",
-    type: rightIcon
+    type: buttonRightIcon
   });
 
-  let iconCenter = centerIcon && /*#__PURE__*/_react.default.createElement(_index.default, {
-    type: centerIcon
+  let iconCenter = buttonCenterIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: buttonCenterIcon
   }); //---------- Styling ---------------
 
 
   const [styles, setStyles] = (0, _react.useState)({
-    'backgroundColor': bgColor ? bgColor : 'white',
-    color: textColor ? textColor : 'black',
+    'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
+    color: buttonTextColor ? buttonTextColor : 'black',
     'borderColor': borderColor ? borderColor : 'black'
   });
   const [hovering, setHovering] = (0, _react.useState)(false);
@@ -80,15 +84,15 @@ const Button = _ref => {
     if (isHovering) {
       setHovering(true);
       setStyles({
-        'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
-        color: hoverTextColor ? hoverTextColor : 'white',
+        'backgroundColor': hoverButtonBgColor ? hoverButtonBgColor : 'black',
+        color: hoverButtonTextColor ? hoverButtonTextColor : 'white',
         'borderColor': hoverBorderColor ? hoverBorderColor : 'black'
       });
     } else {
       setHovering(false);
       setStyles({
-        'backgroundColor': bgColor ? bgColor : 'white',
-        color: textColor ? textColor : 'black',
+        'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
+        color: buttonTextColor ? buttonTextColor : 'black',
         'borderColor': borderColor ? borderColor : 'black'
       });
     }
@@ -105,7 +109,7 @@ const Button = _ref => {
       onMouseOver: () => setHoverState(true),
       onMouseOut: () => setHoverState(false),
       className: classes
-    }, leftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, rightIcon && iconRight));
+    }, buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight));
   } else if (buttonType === 'internal') {
     return /*#__PURE__*/_react.default.createElement("a", {
       href: url,
@@ -115,7 +119,7 @@ const Button = _ref => {
       onMouseOver: () => setHoverState(true),
       onMouseOut: () => setHoverState(false),
       className: classes
-    }, leftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, rightIcon && iconRight));
+    }, buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight));
   } else if (buttonType === 'social') {
     return /*#__PURE__*/_react.default.createElement("a", {
       href: url,
@@ -126,7 +130,7 @@ const Button = _ref => {
       onMouseOver: () => setHoverState(true),
       onMouseOut: () => setHoverState(false),
       className: classes
-    }, centerIcon && iconCenter));
+    }, buttonCenterIcon && iconCenter));
   }
 
   return /*#__PURE__*/_react.default.createElement("button", _extends({
@@ -138,7 +142,7 @@ const Button = _ref => {
   }, {
     href: url,
     className: classes
-  }), leftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, rightIcon && iconRight);
+  }), buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight);
 };
 
 var _default = Button;

package/dist/{components/Card → Card}/index.js

@@ -11,7 +11,11 @@ require("core-js/modules/es.symbol.description.js");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _index = _interopRequireDefault(require("../Button/index"));
+var _index = _interopRequireDefault(require("../../Atoms/Button/index"));
+
+require("../../../../index.css");
+
+var _Video = _interopRequireDefault(require("../../Atoms/Video"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,6 +45,18 @@ const Card = _ref => {
     rounded,
     bordered,
     url,
+    videoId,
+    videoClassNames,
+    autoPlay,
+    muted,
+    poster,
+    mp4File,
+    webmFile,
+    ogvFile,
+    videoHeight,
+    videoWidth,
+    withControls,
+    withPoster,
     buttonDesign,
     buttonBgColor,
     buttonTextColor,
@@ -72,7 +88,27 @@ const Card = _ref => {
     className: classList
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "card-content flex flex-1 flex-col"
-  }, image && /*#__PURE__*/_react.default.createElement("div", {
+  }, mp4File || webmFile || ogvFile ? /*#__PURE__*/_react.default.createElement("div", {
+    className: roundedImage
+  }, /*#__PURE__*/_react.default.createElement(_Video.default, _extends({
+    id: videoId,
+    classNames: videoClassNames,
+    autoPlay: autoPlay,
+    muted: muted
+  }, poster && {
+    poster: poster
+  }, mp4File && {
+    mp4File: mp4File
+  }, webmFile && {
+    webmFile: webmFile
+  }, ogvFile && {
+    ogvFile: ogvFile
+  }, {
+    height: videoHeight,
+    width: videoWidth,
+    withControls: withControls,
+    withPoster: withPoster
+  }))) : image && /*#__PURE__*/_react.default.createElement("div", {
     className: roundedImage
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: imageClassList,

package/dist/CardWithTopImage/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("../../Atoms/Image/index"));
+
+require("../../../../index.css");
+
+require("./styles.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CardWithTopImage = _ref => {
+  let {
+    id,
+    image,
+    imageClass,
+    classNames,
+    altText,
+    roundedCard,
+    roundedImage,
+    bordered,
+    shadow,
+    bgColor,
+    hoverBgColor,
+    children
+  } = _ref;
+  let classes = 'w-full px-4 ';
+  classes += classNames ? classNames : '';
+  let cardBordered = bordered ? ' border border-grey border-opacity-100 ' : '';
+  let cardRounded = roundedCard ? ' rounded-2xl ' : '';
+  let imageRounded = roundedImage ? ' rounded-full ' : '';
+  let cardShadow = shadow ? '  ' : '';
+  let imageWrapperClasses = '';
+  const imageClasses = 'flex mx-auto w-24 bg-white p-4 ' + imageRounded;
+  const contentClasses = 'pt-12 px-4 h-96 -mt-12 bg-white ' + cardShadow + cardRounded + cardBordered;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: 'wrapper',
+    className: classes
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "image",
+    classNames: imageWrapperClasses
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    altText: altText,
+    image: image,
+    classNames: imageClasses
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    id: "content",
+    className: contentClasses
+  }, children));
+};
+
+var _default = CardWithTopImage;
+exports.default = _default;

package/dist/CardWithTopImage/styles.css

@@ -0,0 +1,3 @@
+#wrapper {
+    filter: drop-shadow(0 4px 8px rgb(154, 154, 154))
+}

package/dist/Carousel/index.css

@@ -0,0 +1,7 @@
+.slick-next {
+  border: 2px solid black;
+}
+
+.slick-prev {
+  border: 2px solid black;
+}

package/dist/{components/Carousel → Carousel}/index.js

@@ -13,12 +13,13 @@ require("slick-carousel/slick/slick.css");
 
 require("slick-carousel/slick/slick-theme.css");
 
+require("../../../../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 //https://react-slick.neostack.com/docs/api/
 const Carousel = _ref => {
   let {
-    classNames,
     slides,
     dots,
     infinite,
@@ -39,7 +40,9 @@ const Carousel = _ref => {
     autoplay: autoplay,
     autoplaySpeed: autoplaySpeed
   };
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactSlick.default, settings, slides && slides.forEach((slide, i) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "mx-8"
+  }, /*#__PURE__*/_react.default.createElement(_reactSlick.default, settings, slides && slides.map(slide => {
     return slide;
   })));
 };

package/dist/Chevron Card/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../../../../index.css");
+
+require("./styles.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ChevronCard = _ref => {
+  let {
+    id,
+    imageClass,
+    classNames,
+    bordered
+  } = _ref;
+  let classList = 'border-l border-t border-b h-20 w-32 z-10 bg-white';
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: 'border-l border-t border-b h-20 w-32 z-10 bg-white'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "chevronLeft",
+    className: 'border h-14 w-14 -ml-7 mt-3 rotate-45'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-col my-8"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: 'border-l border-t border-r h-32 w-20 z-20 bg-white'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "chevronLeft",
+    className: 'border h-14 w-14 -mt-7 ml-3 rotate-45 z-0'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-col my-16"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "chevronLeft",
+    className: 'border h-14 w-14 -mb-7 ml-3 rotate-45 z-0'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: 'border-l border-b border-r h-32 w-20 z-20 bg-white'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "chevronLeft",
+    className: 'border h-14 w-14 -mr-7 mt-3 rotate-45'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: 'border-r border-t border-b h-20 w-32 z-10 bg-white'
+  })));
+};
+
+var _default = ChevronCard;
+exports.default = _default;

package/dist/Collapsible/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = _interopRequireDefault(require("../Icon/index"));
+
+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); }
+
+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; }
+
+const Collapsible = _ref => {
+  let {
+    title,
+    subtitle,
+    isDropdown,
+    textColor,
+    bgColor,
+    hoverTextColor,
+    hoverBgColor,
+    icon,
+    content,
+    boldTitle,
+    borderTop,
+    borderBottom,
+    contentBgColor,
+    contentTextColor,
+    showBottomLine,
+    iconSize,
+    children
+  } = _ref;
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  const [styles, setStyles] = (0, _react.useState)({
+    'background-color': bgColor ? bgColor : 'grey',
+    color: textColor ? textColor : 'white'
+  });
+  const [contentStyles, setContentStyles] = (0, _react.useState)({
+    'background-color': contentBgColor ? contentBgColor : 'white',
+    color: contentTextColor ? contentTextColor : 'black'
+  });
+
+  const toggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+
+  const setHoverState = isHovering => {
+    if (isHovering) {
+      setStyles({
+        'background-color': hoverBgColor ? hoverBgColor : 'black',
+        color: hoverTextColor ? hoverTextColor : 'white'
+      });
+    } else {
+      setStyles({
+        'background-color': bgColor ? bgColor : 'grey',
+        color: textColor ? textColor : 'white'
+      });
+    }
+  };
+
+  const padding = title && subtitle ? 'pt-7' : 'pt-4';
+  const sizeIcon = iconSize ? iconSize : '1';
+  const iconPadding = title && subtitle ? 'pt-6' : 'pt-4';
+  const textSubstitutePadding = !title && !subtitle ? 'pb-4' : '';
+  let borders = '';
+  borders += borderBottom ? 'border-b ' : '';
+  borders += borderTop ? 'border-t ' : '';
+  const bottomLine = showBottomLine ? 'border-b' : ''; // let alignment = ''
+  // alignment = contentAlignment && contentAlignment === 'left' && 'text-left'
+  // alignment = contentAlignment && contentAlignment === 'right' && 'text-right'
+  // alignment = contentAlignment && contentAlignment === 'center' && 'text-center'
+  // alignment = contentAlignment && contentAlignment === 'justified' && 'text-justify'
+
+  const contentWrapperClasses = 'expandable w-auto ' + bottomLine; //+ ' ' + alignment
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: styles,
+    onMouseOver: () => setHoverState(true),
+    onMouseOut: () => setHoverState(false),
+    onClick: () => toggleExpanded(),
+    className: 'w-auto flex text-center ' + borders
+  }, icon && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'pl-4 text-left ' + iconPadding + ' ' + textSubstitutePadding
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: icon,
+    size: sizeIcon
+  }))), title || subtitle ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "w-full pl-4 py-4 text-left"
+  }, title && boldTitle ? /*#__PURE__*/_react.default.createElement("h1", null, /*#__PURE__*/_react.default.createElement("b", null, title)) : /*#__PURE__*/_react.default.createElement("h1", null, title), subtitle && /*#__PURE__*/_react.default.createElement("h2", null, /*#__PURE__*/_react.default.createElement("small", null, subtitle))) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'w-full pr-8 text-right ' + padding
+  }, isDropdown ? expanded ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: "arrow-up"
+  })) : /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: "arrow-down"
+  })) : null)), expanded ? /*#__PURE__*/_react.default.createElement("div", {
+    style: contentStyles,
+    className: contentWrapperClasses
+  }, children) : null);
+};
+
+var _default = Collapsible;
+exports.default = _default;