trepur_components 0.2.74 → 0.3.2

package/dist/components/NavItem/index.js

@@ -1,102 +1,113 @@
 "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;
+exports.navItemProps = exports.default = void 0;
 
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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); }
 
 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 navItemProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  linkClasses: _propTypes.default.string,
+  name: _propTypes.default.string,
+  url: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  borderColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  bgColor: _propTypes.default.string,
+  hoverBorderColor: _propTypes.default.string,
+  hoverTextColor: _propTypes.default.string,
+  hoverBgColor: _propTypes.default.string,
+  bordered: _propTypes.default.bool,
+  rounded: _propTypes.default.bool,
+  underlineOnHover: _propTypes.default.bool,
+  isActive: _propTypes.default.bool,
+  activeBorderColor: _propTypes.default.string,
+  activeTextColor: _propTypes.default.string,
+  activeBgColor: _propTypes.default.string
+};
+exports.navItemProps = navItemProps;
+
 const NavItem = _ref => {
   let {
-    id,
-    classes,
-    linkClasses,
-    name,
-    url,
-    onClick,
-    borderColor,
-    textColor,
-    bgColor,
-    hoverBorderColor,
-    hoverTextColor,
-    hoverBgColor,
-    bordered,
-    rounded,
-    underlineOnHover,
-    isActive,
-    activeBorderColor,
-    activeTextColor,
-    activeBgColor
+    navItemProps
   } = _ref;
-  let classList = 'w-auto list-none ';
-  classList += classes ? classes : '';
-  let linkClassList = 'px-4 mx-2 mb-4 text-center whitespace-nowrap ';
-  linkClassList += isActive ? 'active ' : '';
-  linkClassList += bordered ? 'border ' : '';
-  linkClassList += rounded ? 'rounded-lg ' : '';
-  linkClassList += underlineOnHover ? 'hover:underline ' : '';
-  linkClassList += linkClasses ? linkClasses : ''; //---------- Styling ---------------
-
-  const [styles, setStyles] = (0, _react.useState)({
-    'backgroundColor': bgColor ? bgColor : 'white',
-    color: textColor ? textColor : 'black',
-    'borderColor': borderColor ? borderColor : 'black'
+  if (navItemProps == undefined) return;
+  const classList = (0, _classnames.default)({
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.classes]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.classes
+  }, 'w-auto list-none');
+  const linkClassList = (0, _classnames.default)({
+    'active': navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.isActive,
+    'border': navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.bordered,
+    'rounded-lg': navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.rounded,
+    'hover:underline': navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.underlineOnHover,
+    [navItemProps.linkClasses]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.linkClasses
+  }, 'px-4 mx-2 mb-4 text-center whitespace-nowrap');
+  const styleClasses = (0, _classnames.default)({
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.bgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.bgColor,
+    'bg-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.bgColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.textColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.textColor,
+    'text-white': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.textColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.borderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.borderColor,
+    'border-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.borderColor)
   });
-  const [activeStyles, setActiveStyles] = (0, _react.useState)({
-    'backgroundColor': activeBgColor ? activeBgColor : 'white',
-    color: activeTextColor ? activeTextColor : 'black',
-    'borderColor': activeBorderColor ? activeBorderColor : 'black'
+  const activeStyleClasses = (0, _classnames.default)({
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBgColor,
+    'bg-blue': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.activeBgColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeTextColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeTextColor,
+    'text-white': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.activeTextColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBorderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBorderColor,
+    'border-blue': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.activeBorderColor)
   });
-
-  const setHoverState = isHovering => {
-    isHovering ? isActive ? setActiveStyles({
-      'backgroundColor': activeBgColor ? activeBgColor : 'black',
-      color: activeTextColor ? activeTextColor : 'white',
-      'borderColor': activeBorderColor ? activeBorderColor : 'black'
-    }) : setStyles({
-      'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
-      color: hoverTextColor ? hoverTextColor : 'white',
-      'borderColor': hoverBorderColor ? hoverBorderColor : 'black'
-    }) : isActive ? setActiveStyles({
-      'backgroundColor': activeBgColor ? activeBgColor : 'white',
-      color: activeTextColor ? activeTextColor : 'black',
-      'borderColor': activeBorderColor ? activeBorderColor : 'black'
-    }) : setStyles({
-      'backgroundColor': bgColor ? bgColor : 'white',
-      color: textColor ? textColor : 'black',
-      'borderColor': borderColor ? borderColor : 'black'
-    });
-  }; //-----------------------------------
-
-
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  const hoverStyles = (0, _classnames.default)({
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBgColor,
+    'hover:bg-white': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.hoverBgColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverTextColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverTextColor,
+    'hover:text-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.hoverTextColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBorderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBorderColor,
+    'hover:border-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.hoverBorderColor)
+  });
+  const c = navItemProps !== null && navItemProps !== void 0 && navItemProps.isActive ? activeStyleClasses : styleClasses;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.id) && {
+    id: navItemProps.id
   }, {
     className: classList
   }), /*#__PURE__*/_react.default.createElement("a", {
-    href: url
+    href: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.url
   }, /*#__PURE__*/_react.default.createElement("li", {
-    style: isActive ? activeStyles : styles,
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false),
-    key: name,
-    className: linkClassList,
-    onClick: onClick
-  }, name)));
+    className: "".concat(linkClassList, " ").concat(hoverStyles, " ").concat(c),
+    onClick: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.onClick
+  }, navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.name)));
 };
 
+NavItem.propTypes = {
+  navItemProps: _propTypes.default.shape(_objectSpread({}, navItemProps))
+};
 var _default = NavItem;
 exports.default = _default;

package/dist/components/NewsCard/index.js

@@ -11,10 +11,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Image = _interopRequireDefault(require("../Image"));
 
-var _Column = _interopRequireDefault(require("../Column"));
-
 var _Button = _interopRequireDefault(require("../Button"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,53 +27,37 @@ const NewsCard = _ref => {
     classes,
     title,
     content,
-    image,
-    ctaText,
-    buttonType,
-    url,
-    buttonBgColor,
-    buttonTextColor,
-    buttonBorderColor,
-    hoverButtonBgColor,
-    hoverButtonTextColor,
-    hoverButtonBorderColor,
-    buttonDesign,
+    imageProps,
+    buttonProps,
     rounded,
     boldTitle
   } = _ref;
-  const roundedClasses = rounded ? 'rounded-lg ' : '';
-  let classList = 'border flex p-2 ';
-  classList += roundedClasses;
-  classList += classes ? classes : '';
+  const roundedClasses = (0, _classnames.default)({
+    'rounded-lg': rounded
+  });
+  const titleBold = (0, _classnames.default)({
+    'font-bold': boldTitle
+  });
+  const classList = (0, _classnames.default)({
+    'rounded-lg': rounded,
+    [classes]: classes
+  }, 'border flex p-2');
+  imageProps.classes = roundedClasses;
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
     className: classList
-  }), /*#__PURE__*/_react.default.createElement(_Column.default, {
-    sm: 4,
-    md: 2
-  }, /*#__PURE__*/_react.default.createElement(_Image.default, {
-    classes: roundedClasses,
-    image: image
-  })), /*#__PURE__*/_react.default.createElement(_Column.default, {
-    sm: 1
-  }), /*#__PURE__*/_react.default.createElement(_Column.default, {
-    sm: 6,
-    className: "expandable w-auto text-center "
-  }, boldTitle ? /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement("p", null, title)) : /*#__PURE__*/_react.default.createElement("p", null, title), /*#__PURE__*/_react.default.createElement("p", null, content), ctaText && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    className: "w-full",
-    ctaText: ctaText,
-    buttonType: buttonType,
-    url: url,
-    bgColor: buttonBgColor,
-    textColor: buttonTextColor,
-    borderColor: buttonBorderColor,
-    hoverBgColor: hoverButtonBgColor,
-    hoverTextColor: hoverButtonTextColor,
-    hoverBorderColor: hoverButtonBorderColor
-  }, buttonDesign && {
-    buttonDesign: buttonDesign
-  })))));
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Image.default, {
+    imageProps: imageProps
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col justify-between expandable w-auto text-center"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: titleBold
+  }, title), /*#__PURE__*/_react.default.createElement("p", null, content), buttonProps && /*#__PURE__*/_react.default.createElement("div", {
+    className: "px-8"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonProps: buttonProps
+  }))));
 };
 
 var _default = NewsCard;

package/dist/components/Profile/index.js

@@ -11,8 +11,14 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _Image = _interopRequireDefault(require("../Image"));
+
+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); }
 
 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; }
@@ -25,49 +31,55 @@ const Profile = _ref => {
     classes,
     profileLinks,
     alignment,
-    userImage,
     imageHeight,
     imageWidth,
     rounded,
-    bordered
+    bordered,
+    imageProps
   } = _ref;
-  let profileAlignment = alignment === 'right' ? ' float-right ' : alignment === 'left' ? ' float-left ' : '';
-  let dropdownAlignement = alignment === 'right' ? ' mt-16 -mr-16 ' : alignment === 'left' ? ' mt-16 -ml-16 ' : '';
-  let dropdownTextAlignement = alignment === 'right' ? '  ' : alignment === 'left' ? '  ' : 'text-center';
-  const height = imageHeight && 'h-' + imageHeight;
-  const width = imageWidth && 'w-' + imageWidth;
-  const round = rounded ? 'rounded-full' : '';
-  const border = bordered ? 'border' : '';
-  let classList = 'object-cover ';
-  classList += classes ? classes : '';
-  classList += ' ' + width + ' ' + height + ' ' + round + ' ' + border;
   const [profileState, setProfileState] = (0, _react.useState)(false);
+  const profileAlignment = (0, _classnames.default)({
+    'float-right': alignment === 'right',
+    'float-left': alignment === 'left'
+  });
+  const dropdownAlignement = (0, _classnames.default)({
+    'mt-16 -mr-16': alignment === 'right',
+    'mt-16 -ml-16': alignment === 'left'
+  });
+  const dropdownTextAlignement = (0, _classnames.default)({
+    'text-center': alignment !== 'right' && alignment !== 'left'
+  });
+  const classList = (0, _classnames.default)({
+    [classes]: classes,
+    ["w-".concat(imageWidth)]: imageWidth,
+    ["h-".concat(imageHeight)]: imageHeight,
+    'rounded-full': rounded,
+    'border': bordered
+  }, 'object-cover');
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
-    className: 'text-center ' + classList
+    className: "text-center ".concat(classList)
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "hidden sm:inline-flex  inset-y-0 " + profileAlignment
+    className: "hidden sm:inline-flex  inset-y-0 ".concat(profileAlignment)
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: () => setProfileState(!profileState),
     type: "button",
-    className: "bg-gray-800 flex rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    className: classList,
-    src: userImage,
-    alt: ""
+    className: "flex rounded-full"
+  }, /*#__PURE__*/_react.default.createElement(_Image.default, {
+    imageProps: imageProps
   })))), profileState && /*#__PURE__*/_react.default.createElement("div", {
     className: dropdownTextAlignement
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "w-48 sm:inline-block shadow-lg bg-brand-highlight text-white z-10 hover:bg-brand-border-light hover:text-black " + profileAlignment + dropdownAlignement
+    className: "w-48 sm:inline-block shadow-lg \n                        z-10 ".concat(profileAlignment, " ").concat(dropdownAlignement)
   }, profileLinks && profileLinks.map((link, i) => {
     return /*#__PURE__*/_react.default.createElement("a", {
-      key: "profile_link_".concat(i + 0),
+      key: "profile_link_".concat(i + 1),
       href: link.link,
-      className: "hover:bg-brand-secondary border-b font-bold hover:text-white block px-4 py-2 text-sm text-gray-700",
+      className: "border-b font-bold block px-4 py-2 text-sm",
       role: "menuitem",
       tabindex: "-1",
-      id: "user-menu-item-" + i
+      id: "user-menu-item-".concat(i + 1)
     }, link.name);
   }))));
 };

package/dist/components/Row/index.js

@@ -3,34 +3,55 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.rowProps = exports.default = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 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; }
+
 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 rowProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  children: _propTypes.default.any,
+  bordered: _propTypes.default.bool
+};
+exports.rowProps = rowProps;
+
 const Row = _ref => {
   let {
-    id,
-    classes,
-    children,
-    bordered
+    rowProps,
+    children
   } = _ref;
-  let classList = 'flex flex-wrap ';
-  classList += bordered ? ' border ' : '';
-  classList += classes ? classes : '';
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  if (rowProps == undefined) return null;
+  const classList = (0, _classnames.default)({
+    'border': rowProps === null || rowProps === void 0 ? void 0 : rowProps.bordered,
+    [rowProps.classes]: rowProps === null || rowProps === void 0 ? void 0 : rowProps.classes
+  }, 'flex flex-wrap');
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (rowProps === null || rowProps === void 0 ? void 0 : rowProps.id) && {
+    id: rowProps.id
   }, {
     className: classList
   }), children);
 };
 
+Row.propTypes = {
+  rowProps: _propTypes.default.shape(_objectSpread({}, rowProps))
+};
 var _default = Row;
 exports.default = _default;

package/dist/components/Search/index.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _Column = _interopRequireDefault(require("../Column"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
 require("../index.css");
 
@@ -26,42 +26,36 @@ const Search = _ref => {
     onChange,
     placeholder,
     text,
-    leftIcon,
-    rightIcon
+    leftIconProps,
+    rightIconProps
   } = _ref;
-  let classList = 'flex ';
-  classList += classes ? classes : '';
-  let iconLeft = leftIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: leftIcon
-  }) : null;
-  let leftPadding = leftIcon ? 'pl-9' : 'pl-2';
-  let iconRight = rightIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: rightIcon
-  }) : null;
+  const classList = (0, _classnames.default)({
+    [classes]: classes
+  }, 'flex');
+  const inputClasses = (0, _classnames.default)({
+    'pl-9': leftIconProps,
+    'pl-2': !leftIconProps
+  }, 'w-full border-2 rounded-md py-2 pr-9');
   const onChangeFunc = onChange ? e => onChange(e.target.value) : null;
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
     className: classList
-  }), /*#__PURE__*/_react.default.createElement(_Column.default, {
-    md: 2
-  }, text && /*#__PURE__*/_react.default.createElement("h2", {
+  }), /*#__PURE__*/_react.default.createElement("div", null, text && /*#__PURE__*/_react.default.createElement("h2", {
     className: "font-base-lg py-2 pr-4"
-  }, text)), /*#__PURE__*/_react.default.createElement(_Column.default, {
-    md: 10
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, text)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "relative w-full flex"
-  }, leftIcon && /*#__PURE__*/_react.default.createElement("span", {
-    className: "absolute py-4 left-3 flex items-center"
-  }, iconLeft), /*#__PURE__*/_react.default.createElement("input", {
-    className: "w-full border-2 border-gray-300 placeholder:text-gray-400 rounded-md py-2 pr-9 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 " + leftPadding,
+  }, leftIconProps && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: leftIconProps
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    className: inputClasses,
     onChange: onChangeFunc,
     placeholder: placeholder,
     type: "text",
     name: "search"
-  }), rightIcon && /*#__PURE__*/_react.default.createElement("span", {
-    className: "absolute py-4 right-3 flex items-center"
-  }, iconRight))));
+  }), rightIconProps && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: rightIconProps
+  }))));
 };
 
 var _default = Search;