trepur_components 0.3.0 → 0.3.3

package/dist/components/Accordion/index.js

@@ -30,25 +30,7 @@ const Accordion = _ref => {
   }), items && items.map((item, i) => {
     return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
       key: "collapsible_item_".concat(i),
-      id: item.id,
-      title: item.title,
-      subtitle: item.subtitle,
-      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
+      collapsibleProps: item.collapsibleProps
     }, item.children);
   }));
 };

package/dist/components/AlertBar/index.js

@@ -1,90 +1,116 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-require("core-js/modules/es.object.assign.js");
+exports.default = exports.alertBarProps = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _Icon = _interopRequireWildcard(require("../Icon"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
 
 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); }
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
 
+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; }
+
+const alertBarProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  type: _propTypes.default.string,
+  text: _propTypes.default.string,
+  leftIcon: _propTypes.default.shape(_Icon.iconProps),
+  rightIcon: _propTypes.default.shape(_Icon.iconProps),
+  dismissIcon: _propTypes.default.shape(_Icon.iconProps),
+  textColor: _propTypes.default.string,
+  textCenter: _propTypes.default.bool,
+  isDismissable: _propTypes.default.bool,
+  onDismissClick: _propTypes.default.func
+};
+exports.alertBarProps = alertBarProps;
+
 const AlertBar = _ref => {
   let {
-    id,
-    classes,
-    type,
-    text,
-    leftIcon,
-    rightIcon,
-    textColor,
-    leftIconColor,
-    rightIconColor,
-    textCenter,
-    isDismissable,
-    onDismissClick
+    alertBarProps
   } = _ref;
-  let bgColor;
-  if (!['success', 'warning', 'error', 'info'].includes(type)) bgColor = 'bg-brand-info-light';
-  if (type === 'success') bgColor = 'bg-brand-success';
-  if (type === 'warning') bgColor = 'bg-brand-warning';
-  if (type === 'error') bgColor = 'bg-brand-error';
-  if (type === 'info') bgColor = 'bg-brand-info-light';
-  let classList = 'w-parent flex rounded-md ';
-  classList += bgColor ? bgColor : '';
-  classList += classes ? classes : '';
-  let textClassList = 'w-full py-3 ';
-  textClassList += textCenter ? 'text-center' : 'pl-4';
-  let rightIconClassList = 'px-8 pt-3 ';
-  rightIconClassList += isDismissable ? 'hover:cursor-pointer ' : '';
+  if (alertBarProps == undefined) return;
+  const bgColor = (0, _classnames.default)({
+    'bg-brand-success': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'success',
+    'bg-brand-warning': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'warning',
+    'bg-brand-error': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'error',
+    'bg-brand-info-light': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'info',
+    'bg-brand-info-light': !['success', 'warning', 'error', 'info'].includes(alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type)
+  });
+  const classList = (0, _classnames.default)({
+    [bgColor]: bgColor,
+    [alertBarProps.classes]: (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.classes) !== undefined
+  }, 'w-parent flex rounded-md');
+  const textClassList = (0, _classnames.default)({
+    'text-center': alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.textCenter,
+    'pl-4': !(alertBarProps !== null && alertBarProps !== void 0 && alertBarProps.textCenter),
+    [alertBarProps.textColor]: alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.textColor
+  }, 'w-full py-3');
+  const rightIconClasses = (0, _classnames.default)({
+    'hover:cursor-pointer': alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.isDismissable,
+    [alertBarProps.rightIconColor]: alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.rightIconColor
+  }, 'px-8 pt-3');
+  const leftIconClasses = (0, _classnames.default)({
+    [alertBarProps.leftIconColor]: alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.leftIconColor
+  }, 'pt-3 pl-8');
 
   const closeAlertBar = () => {
-    document.getElementById(id ? id : 'alertBar').classList.add('hidden');
-    onDismissClick();
+    document.getElementById(alertBarProps !== null && alertBarProps !== void 0 && alertBarProps.id ? alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.id : 'alertBar').classList.add('hidden'); // alertBarProps?.onDismissClick && alertBarProps?.onDismissClick
   };
 
-  rightIcon = isDismissable ? 'multiply' : rightIcon;
-  let iconLeft = leftIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: leftIcon
-  }) : null;
-  let iconRight = rightIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: rightIcon,
+  alertBarProps.dismissIcon = _objectSpread(_objectSpread({}, alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.dismissIcon), {}, {
     onClick: () => closeAlertBar()
-  }) : null;
-  const styles = {
-    'color': textColor
-  };
-  const leftIconStyles = {
-    'color': leftIconColor
-  };
-  const rightIconStyles = {
-    'color': rightIconColor
-  };
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id ? {
-    id: id
+  });
+  alertBarProps.rightIcon = alertBarProps !== null && alertBarProps !== void 0 && alertBarProps.isDismissable ? alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.dismissIcon : alertBarProps !== null && alertBarProps !== void 0 && alertBarProps.rightIcon ? alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.rightIcon : null;
+
+  let iconLeft = (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.leftIcon) && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.leftIcon
+  });
+
+  let iconRight = (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.rightIcon) && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.rightIcon
+  });
+
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, alertBarProps !== null && alertBarProps !== void 0 && alertBarProps.id ? {
+    id: alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.id
   } : {
     id: 'alertBar'
   }, {
     className: classList
-  }), leftIcon && /*#__PURE__*/_react.default.createElement("span", {
-    style: leftIconStyles,
-    className: "pt-3 pl-8"
+  }), (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.leftIcon) && /*#__PURE__*/_react.default.createElement("span", {
+    className: leftIconClasses
   }, iconLeft), /*#__PURE__*/_react.default.createElement("h3", {
-    style: styles,
     className: textClassList
-  }, text), rightIcon && /*#__PURE__*/_react.default.createElement("span", {
-    style: rightIconStyles,
-    className: rightIconClassList
+  }, alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.text), (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.rightIcon) && /*#__PURE__*/_react.default.createElement("span", {
+    className: rightIconClasses
   }, iconRight));
 };
 
+AlertBar.propTypes = {
+  alertBarProps: _propTypes.default.shape(_objectSpread({}, alertBarProps))
+};
 var _default = AlertBar;
 exports.default = _default;

package/dist/components/Breadcrumbs/index.js

@@ -3,29 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.breadcrumbsProps = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
+const breadcrumbsProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  links: _propTypes.default.Object
+};
+exports.breadcrumbsProps = breadcrumbsProps;
+
 const Breadcrumbs = _ref => {
   let {
-    id,
-    classes,
-    links
+    breadcrumbsProps
   } = _ref;
-  const linksLength = Object.keys(links).length;
-  let classList = 'flex py-2 px-8 ';
-  classList += classes ? classes : '';
+  if (breadcrumbsProps == undefined) return;
+  const linksLength = breadcrumbsProps !== null && breadcrumbsProps !== void 0 && breadcrumbsProps.links ? Object.keys(breadcrumbsProps === null || breadcrumbsProps === void 0 ? void 0 : breadcrumbsProps.links).length : 0;
+  const classList = (0, _classnames.default)({
+    [breadcrumbsProps]: breadcrumbsProps === null || breadcrumbsProps === void 0 ? void 0 : breadcrumbsProps.classes
+  }, 'flex py-2 px-8');
   return /*#__PURE__*/_react.default.createElement("ul", {
-    id: id,
+    id: breadcrumbsProps === null || breadcrumbsProps === void 0 ? void 0 : breadcrumbsProps.id,
     className: classList
-  }, links && links.map((link, i) => {
+  }, (breadcrumbsProps === null || breadcrumbsProps === void 0 ? void 0 : breadcrumbsProps.links) && breadcrumbsProps.links.map((link, i) => {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      key: "breadcrumb_".concat(i + 0),
+      key: "breadcrumb_".concat(i + 1),
       className: "flex"
     }, /*#__PURE__*/_react.default.createElement("li", {
       className: "h-8"
@@ -35,7 +52,7 @@ const Breadcrumbs = _ref => {
       className: "px-1 py-1"
     }, /*#__PURE__*/_react.default.createElement("a", {
       className: "text-social-facebook hover:underline",
-      href: link.link
+      href: link.href
     }, link.name)))), i + 1 < linksLength && /*#__PURE__*/_react.default.createElement("li", {
       className: "h-8"
     }, /*#__PURE__*/_react.default.createElement("p", {
@@ -44,5 +61,8 @@ const Breadcrumbs = _ref => {
   }));
 };
 
+Breadcrumbs.propTypes = {
+  breadcrumbsProps: _propTypes.default.shape(_objectSpread({}, breadcrumbsProps))
+};
 var _default = Breadcrumbs;
 exports.default = _default;

package/dist/components/BreadcrumbsBordered/index.js

@@ -47,17 +47,19 @@ const Breadcrumbs = _ref => {
 
     return /*#__PURE__*/_react.default.createElement(_BreadcrumbsItem.default, {
       key: "breadcrumb_item_".concat(i + 0),
-      classes: margin,
-      name: link.name,
-      link: link.link,
-      type: bType,
-      firstItem: first,
-      textColor: textColor,
-      bgColor: bgColor,
-      borderColor: borderColor,
-      hoverTextColor: hoverTextColor,
-      hoverBgColor: hoverBgColor,
-      hoverBorderColor: hoverBorderColor
+      breadcrumbsItemProps: {
+        classes: margin,
+        name: link.name,
+        link: link.link,
+        type: bType,
+        firstItem: first,
+        textColor: textColor,
+        bgColor: bgColor,
+        borderColor: borderColor,
+        hoverTextColor: hoverTextColor,
+        hoverBgColor: hoverBgColor,
+        hoverBorderColor: hoverBorderColor
+      }
     });
   }));
 };

package/dist/components/BreadcrumbsItem/index.css

@@ -1,42 +1,22 @@
 .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;
+.arrow-bottom {
   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;
+.arrow-top {
   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/BreadcrumbsItem/index.js

@@ -5,168 +5,140 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.breadcrumbsItemProps = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
-require("./index.css");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
 
 require("../index.css");
 
+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; }
 
+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 breadcrumbsItemProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  name: _propTypes.default.string,
+  link: _propTypes.default.string,
+  type: _propTypes.default.string,
+  firstItem: _propTypes.default.string,
+  bgColor: _propTypes.default.string,
+  hoverBgColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  hoverTextColor: _propTypes.default.string,
+  baColor: _propTypes.default.string,
+  hoverBaColor: _propTypes.default.string,
+  faColor: _propTypes.default.string,
+  hoverFaColor: _propTypes.default.string
+};
+exports.breadcrumbsItemProps = breadcrumbsItemProps;
+
 const BreadcrumbsItem = _ref => {
   let {
-    id,
-    classes,
-    divClasses,
-    name,
-    link,
-    type,
-    firstItem,
-    textColor,
-    bgColor,
-    borderColor,
-    hoverTextColor,
-    hoverBgColor,
-    hoverBorderColor
+    breadcrumbsItemProps
   } = _ref;
-  let classList = 'item ';
-  classList += classes ? classes : '';
-  let divClassList = 'bc-item px-4 h-8 ';
-  divClassList += divClasses; //---------- Styling ---------------
-
-  const [styles, setStyles] = (0, _react.useState)({
-    'backgroundColor': bgColor ? bgColor : 'gray',
-    'color': textColor ? textColor : 'black',
-    'borderColor': borderColor ? borderColor : 'white'
-  });
-  const [hoverStyles, setHoverStyles] = (0, _react.useState)({
-    'backgroundColor': 'transparent',
-    'border-left-color': bgColor ? bgColor : 'gray'
-  });
-  const [hoverStylesBackArrows, setHoverStylesBackArrows] = (0, _react.useState)({
-    'backgroundColor': 'transparent',
-    'color': bgColor ? bgColor : 'gray',
-    'border-left-color': 'transparent'
+  const [isHovering, setIsHovering] = (0, _react.useState)(false);
+  if (breadcrumbsItemProps == undefined) return;
+  const topArrowClasses = 'top-0';
+  const bottomArrowClasses = 'bottom-0';
+  const textClassList = 'text-center pt-1';
+  const liClassList = 'list-none';
+  const classList = (0, _classnames.default)({
+    [breadcrumbsItemProps.classes]: breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.classes
+  }, 'item');
+  const itemClassList = (0, _classnames.default)({
+    [breadcrumbsItemProps.bgColor]: !isHovering && (breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.bgColor),
+    'bg-light-grey': !isHovering && !(breadcrumbsItemProps !== null && breadcrumbsItemProps !== void 0 && breadcrumbsItemProps.bgColor),
+    [breadcrumbsItemProps.textColor]: !isHovering && (breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.textColor),
+    'text-white ': !isHovering && !(breadcrumbsItemProps !== null && breadcrumbsItemProps !== void 0 && breadcrumbsItemProps.textColor),
+    [breadcrumbsItemProps.hoverBgColor]: isHovering && (breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.hoverBgColor),
+    'hover:bg-black': isHovering && !(breadcrumbsItemProps !== null && breadcrumbsItemProps !== void 0 && breadcrumbsItemProps.hoverBgColor),
+    [breadcrumbsItemProps.hoverTextColor]: isHovering && (breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.hoverTextColor),
+    'hover:text-white ': isHovering && !(breadcrumbsItemProps !== null && breadcrumbsItemProps !== void 0 && breadcrumbsItemProps.hoverTextColor),
+    'hover:underline': breadcrumbsItemProps.type === 'link'
+  }, 'bc-item relative px-4 h-8');
+  const backArrowsClasses = (0, _classnames.default)({
+    [breadcrumbsItemProps.baColor]: !isHovering && (breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.baColor),
+    'text-light-grey': !isHovering && !(breadcrumbsItemProps !== null && breadcrumbsItemProps !== void 0 && breadcrumbsItemProps.baColor),
+    [breadcrumbsItemProps.hoverBaColor]: isHovering && (breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.hoverBaColor),
+    'text-black': isHovering && !(breadcrumbsItemProps !== null && breadcrumbsItemProps !== void 0 && breadcrumbsItemProps.hoverBaColor)
+  }, 'absolute w-0 h-0 bg-transparent border-l-transparent');
+  const frontArrowClasses = (0, _classnames.default)({
+    [breadcrumbsItemProps.faColor]: !isHovering && (breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.faColor),
+    'text-light-grey': !isHovering && !(breadcrumbsItemProps !== null && breadcrumbsItemProps !== void 0 && breadcrumbsItemProps.faColor),
+    [breadcrumbsItemProps.hoverFaColor]: isHovering && (breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.hoverFaColor),
+    'text-black': isHovering && !(breadcrumbsItemProps !== null && breadcrumbsItemProps !== void 0 && breadcrumbsItemProps.hoverFaColor)
+  }, 'absolute top-0 w-0 h-0');
+
+  const frontArrow = /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(frontArrowClasses, " right-arrow")
   });
 
-  const setHoverState = isHovering => {
-    if (isHovering) {
-      setStyles({
-        'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
-        'color': hoverTextColor ? hoverTextColor : 'white',
-        'borderColor': hoverBorderColor ? hoverBorderColor : 'white'
-      });
-      setHoverStyles({
-        'backgroundColor': 'transparent',
-        'border-left-color': hoverBgColor ? hoverBgColor : 'black'
-      });
-      setHoverStylesBackArrows({
-        'backgroundColor': 'transparent',
-        'color': hoverBgColor ? hoverBgColor : 'black',
-        'border-left-color': 'transparent'
-      });
-    } else {
-      setStyles({
-        'backgroundColor': bgColor ? bgColor : 'grey',
-        'color': textColor ? textColor : 'black',
-        'borderColor': borderColor ? borderColor : 'white'
-      });
-      setHoverStyles({
-        'backgroundColor': 'transparent',
-        'border-left-color': bgColor ? bgColor : 'gray'
-      });
-      setHoverStylesBackArrows({
-        'backgroundColor': 'transparent',
-        'color': bgColor ? bgColor : 'gray',
-        'border-left-color': 'transparent'
-      });
-    }
-  }; //-----------------------------------
-
-
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  const backArrows = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(backArrowsClasses, " ").concat(bottomArrowClasses, " arrow-bottom")
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(backArrowsClasses, " ").concat(topArrowClasses, " arrow-top")
+  }));
+
+  const renderWithFrontArrow = () => /*#__PURE__*/_react.default.createElement("div", {
+    className: itemClassList
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: textClassList
+  }, breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.name, frontArrow));
+
+  const renderWithBackArrows = () => /*#__PURE__*/_react.default.createElement("div", {
+    className: itemClassList
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: textClassList
+  }, backArrows, breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.name, frontArrow));
+
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.id) && {
+    id: breadcrumbsItemProps.id
   }, {
-    key: name,
     className: classList
-  }), type === 'link' ? firstItem ? /*#__PURE__*/_react.default.createElement("a", {
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false),
-    style: styles,
-    href: link,
-    className: "hover:underline"
+  }), (breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.type) === 'link' ? breadcrumbsItemProps !== null && breadcrumbsItemProps !== void 0 && breadcrumbsItemProps.firstItem ? /*#__PURE__*/_react.default.createElement("a", {
+    onMouseOver: () => setIsHovering(true),
+    onMouseOut: () => setIsHovering(false),
+    href: breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.href
   }, /*#__PURE__*/_react.default.createElement("li", {
-    className: "list-none"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: styles,
-    className: divClassList
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: !firstItem ? 'text-center  pt-1' : 'text-center pt-1'
-  }, name, /*#__PURE__*/_react.default.createElement("span", {
-    style: hoverStyles,
-    className: "right-arrow"
-  }))))) : /*#__PURE__*/_react.default.createElement("a", {
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false),
-    style: styles,
-    href: link,
-    className: "hover:underline"
+    className: liClassList
+  }, renderWithFrontArrow())) : /*#__PURE__*/_react.default.createElement("a", {
+    onMouseOver: () => setIsHovering(true),
+    onMouseOut: () => setIsHovering(false),
+    href: breadcrumbsItemProps === null || breadcrumbsItemProps === void 0 ? void 0 : breadcrumbsItemProps.href
   }, /*#__PURE__*/_react.default.createElement("li", {
-    className: "list-none"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: styles,
-    className: divClassList
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: !firstItem ? 'text-center  pt-1' : 'text-center pt-1'
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    style: hoverStylesBackArrows,
-    className: "test-arrow-bottom"
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    style: hoverStylesBackArrows,
-    className: "test-arrow-top"
-  }), name, /*#__PURE__*/_react.default.createElement("span", {
-    style: hoverStyles,
-    className: "right-arrow"
-  }))))) : firstItem ? /*#__PURE__*/_react.default.createElement("li", {
-    className: "list-none"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: styles,
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false),
-    className: divClassList
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "text-center pt-1"
-  }, name, /*#__PURE__*/_react.default.createElement("span", {
-    style: hoverStyles,
-    className: "right-arrow"
-  })))) : /*#__PURE__*/_react.default.createElement("li", {
-    className: "list-none"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: styles,
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false),
-    className: divClassList
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "text-center pt-1"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    style: hoverStylesBackArrows,
-    className: "test-arrow-bottom"
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    style: hoverStylesBackArrows,
-    className: "test-arrow-top"
-  }), name, /*#__PURE__*/_react.default.createElement("span", {
-    style: hoverStyles,
-    className: "right-arrow"
-  })))));
+    className: liClassList
+  }, renderWithBackArrows())) : breadcrumbsItemProps !== null && breadcrumbsItemProps !== void 0 && breadcrumbsItemProps.firstItem ? /*#__PURE__*/_react.default.createElement("li", {
+    className: liClassList,
+    onMouseOver: () => setIsHovering(true),
+    onMouseOut: () => setIsHovering(false)
+  }, renderWithFrontArrow()) : /*#__PURE__*/_react.default.createElement("li", {
+    className: liClassList,
+    onMouseOver: () => setIsHovering(true),
+    onMouseOut: () => setIsHovering(false)
+  }, renderWithBackArrows()));
 };
 
+BreadcrumbsItem.propTypes = {
+  breadcrumbsItemProps: _propTypes.default.shape(_objectSpread({}, breadcrumbsItemProps))
+};
 var _default = BreadcrumbsItem;
 exports.default = _default;