breakfast-ui/dist/breakfast-ui.esm.js

Your tasty component library

import React__default, { useState, createElement } from 'react';

function _extends() {
  _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Manrope:wght@200;300;400;500;600;700;800&display=swap\");body,button{font-family:Manrope,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:3rem;font-weight:500}.lds-ellipsis{align-items:center;display:inline-block;height:1.5em;margin:auto 7px;position:relative;width:1.5em}.lds-ellipsis div{-webkit-animation-timing-function:cubic-bezier(0,1,1,0);animation-timing-function:cubic-bezier(0,1,1,0);border-radius:50%;bottom:0;height:.3em;margin:auto;position:absolute;top:0;width:.3em}.lds-ellipsis div:first-child{-webkit-animation:lds-ellipsis1 .6s infinite;animation:lds-ellipsis1 .6s infinite;left:.2em}.lds-ellipsis div:nth-child(2){left:.2em}.lds-ellipsis div:nth-child(2),.lds-ellipsis div:nth-child(3){-webkit-animation:lds-ellipsis2 .6s infinite;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:.8em}.lds-ellipsis div:nth-child(4){-webkit-animation:lds-ellipsis3 .6s infinite;animation:lds-ellipsis3 .6s infinite;left:1.4em}@-webkit-keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(.6em)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(.6em)}}";
styleInject(css_248z);

var css_248z$1 = ".simple-btn{align-items:center;background-color:#000;border:none;border-radius:.8rem;color:#fff;cursor:pointer;display:flex;justify-content:center;padding:.8rem}.primary{background-color:#f65a83}.secondary{background-color:#65c18c}.yummy{background-color:#f68989}.chocolatey{background-color:#a64b2a}.dark{background-color:#2c3333}.xs{border-radius:.5rem;font-size:x-small;padding:.5rem}.sm{border-radius:.6rem;font-size:small}.md{border-radius:.7rem;font-size:medium}.lg{font-size:large;padding:.9rem}.xl{font-size:x-large;padding:1.1rem}.xxl{font-size:xx-large;padding:1.3rem}";
styleInject(css_248z$1);

var _excluded = ["btnType", "title", "textColor", "bgColor", "btnSize", "isLoading", "styles", "className"];

var Button = function Button(_ref) {
  var _ref$btnType = _ref.btnType,
      btnType = _ref$btnType === void 0 ? 'primary' : _ref$btnType,
      _ref$title = _ref.title,
      title = _ref$title === void 0 ? 'Tasty !' : _ref$title,
      _ref$textColor = _ref.textColor,
      textColor = _ref$textColor === void 0 ? 'white' : _ref$textColor,
      bgColor = _ref.bgColor,
      _ref$btnSize = _ref.btnSize,
      btnSize = _ref$btnSize === void 0 ? 'md' : _ref$btnSize,
      _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
      styles = _ref.styles,
      className = _ref.className,
      otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);

  // const styles = {
  //   color: textColor,
  //   backgroundColor: bgColor,
  //   fontSize: btnSize,
  // };
  return React__default.createElement("button", Object.assign({
    className: "simple-btn " + btnSize + " " + btnType + " " + className,
    style: _extends({
      color: textColor,
      backgroundColor: bgColor
    }, styles)
  }, otherAttributes), title, React__default.createElement("div", {
    className: "lds-ellipsis",
    style: {
      display: isLoading ? 'inline-block' : 'none'
    }
  }, React__default.createElement("div", {
    style: {
      background: textColor
    }
  }), React__default.createElement("div", {
    style: {
      background: textColor
    }
  }), React__default.createElement("div", {
    style: {
      background: textColor
    }
  }), React__default.createElement("div", {
    style: {
      background: textColor
    }
  })));
};
 // export {Button};

var css_248z$2 = ".simple-outlined-btn{align-items:center;background-color:#fff;border:3px solid #f65a83;border-radius:.8rem;color:#f65a83;cursor:pointer;display:flex;justify-content:center;padding:.8rem}.setDefaultColor{background-color:#f65a83}.outlined-btn-primary{border:3px solid #f65a83;color:#f65a83}.outlined-btn-secondary{border:3px solid #65c18c;color:#65c18c}.outlined-btn-yummy{border:3px solid #f68989;color:#f68989}.outlined-btn-chocolatey{border:3px solid #a64b2a;color:#a64b2a}.outlined-btn-dark{border:3px solid #2c3333;color:#2c3333}.outlined-btn-loader-primary{background-color:#f65a83}.outlined-btn-loader-secondary{background-color:#65c18c}.outlined-btn-loader-yummy{background-color:#f68989}.outlined-btn-loader-chocolatey{background-color:#a64b2a}.outlined-btn-loader-dark{background-color:#2c3333}";
styleInject(css_248z$2);

var OutlinedButton = function OutlinedButton(_ref) {
  var _ref$title = _ref.title,
      title = _ref$title === void 0 ? "Tasty !" : _ref$title,
      btnType = _ref.btnType,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? "" : _ref$color,
      _ref$btnSize = _ref.btnSize,
      btnSize = _ref$btnSize === void 0 ? "md" : _ref$btnSize,
      _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
      styles = _ref.styles;
  return React__default.createElement("button", {
    className: "simple-outlined-btn " + getButtonType[btnType] + " " + btnSize,
    style: _extends({
      border: "3px solid " + color,
      color: color
    }, styles)
  }, title, React__default.createElement("div", {
    className: "lds-ellipsis",
    style: {
      display: isLoading ? "inline-block" : "none"
    }
  }, React__default.createElement("div", {
    className: (color === "" && "setDefaultColor") + " " + getColorType[btnType],
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: (color === "" && "setDefaultColor") + " " + getColorType[btnType],
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: (color === "" && "setDefaultColor") + " " + getColorType[btnType],
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: (color === "" && "setDefaultColor") + " " + getColorType[btnType],
    style: {
      background: color
    }
  })));
};

var getButtonType = {
  primary: "outlined-btn-primary",
  secondary: "outlined-btn-secondary",
  yummy: "outlined-btn-yummy",
  chocolatey: "outlined-btn-chocolatey",
  dark: "outlined-btn-dark"
};
var getColorType = {
  primary: "outlined-btn-loader-primary",
  secondary: "outlined-btn-loader-secondary",
  yummy: "outlined-btn-loader-yummy",
  chocolatey: "outlined-btn-loader-chocolatey",
  dark: "outlined-btn-loader-dark"
};

var css_248z$3 = ".circular-avatar-img{border:tra;border-radius:50%;-o-object-fit:cover;object-fit:cover}.circular-avatar-shadow{box-shadow:0 0 20px 3px #969696}";
styleInject(css_248z$3);

var _excluded$1 = ["url", "size", "border", "borderColor", "shadow", "styles"];

var CircularAvatar = function CircularAvatar(_ref) {
  var _ref$url = _ref.url,
      url = _ref$url === void 0 ? 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=600' : _ref$url,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? '100px' : _ref$size,
      _ref$border = _ref.border,
      border = _ref$border === void 0 ? true : _ref$border,
      _ref$borderColor = _ref.borderColor,
      borderColor = _ref$borderColor === void 0 ? '#181818' : _ref$borderColor,
      _ref$shadow = _ref.shadow,
      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
      styles = _ref.styles,
      others = _objectWithoutPropertiesLoose(_ref, _excluded$1);

  return React__default.createElement("img", Object.assign({
    className: "circular-avatar-img " + (shadow ? 'circular-avatar-shadow' : ''),
    src: url,
    loading: "lazy",
    alt: "",
    style: _extends({
      width: size,
      height: size,
      border: border ? '3px solid ' + borderColor : '0px solid transparent'
    }, styles)
  }, others));
};

var css_248z$4 = ".rounded-avatar-img{border:tra;border-radius:20%;-o-object-fit:cover;object-fit:cover}.rounded-avatar-shadow{box-shadow:0 0 20px 3px #969696}";
styleInject(css_248z$4);

var _excluded$2 = ["url", "size", "border", "borderColor", "shadow", "styles"];

var RoundedAvatar = function RoundedAvatar(_ref) {
  var _ref$url = _ref.url,
      url = _ref$url === void 0 ? "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=600" : _ref$url,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? "100px" : _ref$size,
      _ref$border = _ref.border,
      border = _ref$border === void 0 ? true : _ref$border,
      _ref$borderColor = _ref.borderColor,
      borderColor = _ref$borderColor === void 0 ? "#181818" : _ref$borderColor,
      _ref$shadow = _ref.shadow,
      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
      styles = _ref.styles,
      others = _objectWithoutPropertiesLoose(_ref, _excluded$2);

  return React__default.createElement("img", Object.assign({
    className: "rounded-avatar-img " + (shadow ? "rounded-avatar-shadow" : ""),
    src: url,
    loading: "lazy",
    alt: "",
    style: _extends({
      width: size,
      height: size,
      border: border ? "3px solid " + borderColor : "0px solid transparent"
    }, styles)
  }, others));
};

var css_248z$5 = ".circular-loader{-webkit-animation:rotation 1s linear infinite;animation:rotation 1s linear infinite;border-radius:50%;border-right:3px solid transparent;box-sizing:border-box;display:inline-block;height:1em;margin:0;width:1em}@-webkit-keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";
styleInject(css_248z$5);

var _excluded$3 = ["size", "color", "styles"];

var CircularLoader = function CircularLoader(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? "30px" : _ref$size,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? "#FA7070" : _ref$color,
      styles = _ref.styles,
      others = _objectWithoutPropertiesLoose(_ref, _excluded$3);

  return React__default.createElement("div", Object.assign({
    className: "circular-loader",
    style: _extends({
      borderTop: "3px solid " + color,
      fontSize: size
    }, styles)
  }, others));
};

var css_248z$6 = "div.spinner{background-color:transparent;display:inline-block;height:1em;padding:.2em;position:relative;width:1em}div.spinner div{-webkit-animation:fade 1s linear infinite;animation:fade 1s linear infinite;border-radius:30%;box-shadow:0 0 3px rgba(0,0,0,.2);height:16%;left:49%;opacity:0;position:absolute;top:43%;width:6%}@-webkit-keyframes fade{0%{opacity:1}to{opacity:.25}}@keyframes fade{0%{opacity:1}to{opacity:.25}}div.spinner div.bar1{-webkit-animation-delay:0s;animation-delay:0s;transform:rotate(0deg) translateY(-130%)}div.spinner div.bar2{-webkit-animation-delay:-.9167s;animation-delay:-.9167s;transform:rotate(30deg) translateY(-130%)}div.spinner div.bar3{-webkit-animation-delay:-.833s;animation-delay:-.833s;transform:rotate(60deg) translateY(-130%)}div.spinner div.bar4{-webkit-animation-delay:-.7497s;animation-delay:-.7497s;transform:rotate(90deg) translateY(-130%)}div.spinner div.bar5{-webkit-animation-delay:-.667s;animation-delay:-.667s;transform:rotate(120deg) translateY(-130%)}div.spinner div.bar6{-webkit-animation-delay:-.5837s;animation-delay:-.5837s;transform:rotate(150deg) translateY(-130%)}div.spinner div.bar7{-webkit-animation-delay:-.5s;animation-delay:-.5s;transform:rotate(180deg) translateY(-130%)}div.spinner div.bar8{-webkit-animation-delay:-.4167s;animation-delay:-.4167s;transform:rotate(210deg) translateY(-130%)}div.spinner div.bar9{-webkit-animation-delay:-.333s;animation-delay:-.333s;transform:rotate(240deg) translateY(-130%)}div.spinner div.bar10{-webkit-animation-delay:-.2497s;animation-delay:-.2497s;transform:rotate(270deg) translateY(-130%)}div.spinner div.bar11{-webkit-animation-delay:-.167s;animation-delay:-.167s;transform:rotate(300deg) translateY(-130%)}div.spinner div.bar12{-webkit-animation-delay:-.0833s;animation-delay:-.0833s;transform:rotate(330deg) translateY(-130%)}";
styleInject(css_248z$6);

var _excluded$4 = ["size", "color", "styles"];

var SpinnerLoader = function SpinnerLoader(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? '2rem' : _ref$size,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? '#FA7070' : _ref$color,
      styles = _ref.styles,
      others = _objectWithoutPropertiesLoose(_ref, _excluded$4);

  return React__default.createElement("div", Object.assign({
    className: "spinner",
    style: _extends({
      fontSize: size
    }, styles)
  }, others), React__default.createElement("div", {
    className: "bar1",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar2",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar3",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar4",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar5",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar6",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar7",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar8",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar9",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar10",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar11",
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    className: "bar12",
    style: {
      background: color
    }
  }));
};

var _excluded$5 = ["size", "color", "styles"];

var EllipseLoader = function EllipseLoader(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? '2rem' : _ref$size,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? '#FA7070' : _ref$color,
      styles = _ref.styles,
      other = _objectWithoutPropertiesLoose(_ref, _excluded$5);

  return React__default.createElement("div", Object.assign({
    className: "lds-ellipsis",
    style: _extends({
      fontSize: size,
      marginRight: '1rem',
      display: 'inline-block'
    }, styles)
  }, other), React__default.createElement("div", {
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    style: {
      background: color
    }
  }));
};

var css_248z$7 = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Manrope:wght@200;300;400;500;600;700;800&display=swap\");.button-textbox{align-items:center;display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.button-textbox input{border:1px solid #b4b4b4;border-radius:0;display:block;font-family:Manrope,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0 2rem 0 0;outline:none;padding:1rem;transition:border .2s ease-in-out;width:250px;z-index:1}.button-textbox button{border:none;border-radius:.5rem;cursor:pointer;font-size:1rem;padding:.5rem 1rem;position:absolute;right:0;transition:all .2s ease;z-index:2}.button-textbox button:hover{transform:scale(1.1)}.button-textbox-section span{color:red;display:block;font-size:1rem;margin:1rem .3rem}";
styleInject(css_248z$7);

var _excluded$6 = ["placeholder", "styles", "buttonTextColor", "accentColor", "errorMessage", "showError"];

var ButtonTextBox = function ButtonTextBox(_ref) {
  var _ref$placeholder = _ref.placeholder,
      placeholder = _ref$placeholder === void 0 ? 'Your email' : _ref$placeholder,
      styles = _ref.styles,
      _ref$buttonTextColor = _ref.buttonTextColor,
      buttonTextColor = _ref$buttonTextColor === void 0 ? '#ffffff' : _ref$buttonTextColor,
      _ref$accentColor = _ref.accentColor,
      accentColor = _ref$accentColor === void 0 ? '#65C18C' : _ref$accentColor,
      _ref$errorMessage = _ref.errorMessage,
      errorMessage = _ref$errorMessage === void 0 ? 'email should not be left empty' : _ref$errorMessage,
      _ref$showError = _ref.showError,
      showError = _ref$showError === void 0 ? true : _ref$showError,
      others = _objectWithoutPropertiesLoose(_ref, _excluded$6);

  var _React$useState = React__default.useState(false),
      active = _React$useState[0],
      setActive = _React$useState[1];

  return React__default.createElement("div", {
    className: "button-textbox-section"
  }, React__default.createElement("div", {
    className: "button-textbox"
  }, React__default.createElement("input", Object.assign({
    type: "text",
    className: "",
    placeholder: placeholder,
    onFocus: function onFocus(e) {
      setActive(true);
      e.currentTarget.style.border = "3px solid " + accentColor;
    },
    onBlur: function onBlur(e) {
      setActive(false);
      e.currentTarget.style.border = "1px solid #b4b4b4";
    },
    style: _extends({}, styles)
  }, others)), React__default.createElement("button", {
    className: "",
    style: {
      background: active ? accentColor : '#CFD2CF',
      color: active ? buttonTextColor : 'black'
    }
  }, "Send")), showError && React__default.createElement("span", null, errorMessage));
};

var css_248z$8 = ".MaterialTextBox{display:block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-bottom:0;position:relative;transition:all .5s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.MaterialTextBox label{bottom:10%;font-size:1rem;margin:0 0 0 .8rem;pointer-events:none;position:absolute}@-webkit-keyframes animUp{0%{bottom:10%;font-size:1rem}to{bottom:67%;font-size:.8rem}}@keyframes animUp{0%{bottom:10%;font-size:1rem}to{bottom:67%;font-size:.8rem}}@-webkit-keyframes animDown{0%{bottom:67%;font-size:.8rem}to{bottom:10%;font-size:1rem}}@keyframes animDown{0%{bottom:67%;font-size:.8rem}to{bottom:10%;font-size:1rem}}.MaterialTextBox input{border:none;border-bottom:2px solid #737373;display:block;font-size:1.5rem;margin:0;padding:1.8rem 1rem .5rem .7rem;transition:all .5s ease;width:250px}.MaterialTextBox input:focus{border-radius:.5rem;outline:none}.MaterialTextBoxSection small{color:red;display:block;font-size:1rem;margin:.5rem}";
styleInject(css_248z$8);

var _excluded$7 = ["label", "accentColor", "borderColor", "styles", "errorMessage", "showError"];

var MaterialTextBox = function MaterialTextBox(_ref) {
  var _ref$label = _ref.label,
      label = _ref$label === void 0 ? "your name" : _ref$label,
      _ref$accentColor = _ref.accentColor,
      accentColor = _ref$accentColor === void 0 ? "rgb(223, 244, 247)" : _ref$accentColor,
      _ref$borderColor = _ref.borderColor,
      borderColor = _ref$borderColor === void 0 ? "rgb(97, 174, 184)" : _ref$borderColor,
      styles = _ref.styles,
      _ref$errorMessage = _ref.errorMessage,
      errorMessage = _ref$errorMessage === void 0 ? "name should not be left empty" : _ref$errorMessage,
      _ref$showError = _ref.showError,
      showError = _ref$showError === void 0 ? false : _ref$showError,
      other = _objectWithoutPropertiesLoose(_ref, _excluded$7);

  var _useState = useState(),
      labelStyle = _useState[0],
      setLabelStyle = _useState[1];

  return React__default.createElement("div", {
    className: "MaterialTextBoxSection"
  }, React__default.createElement("div", {
    className: "MaterialTextBox"
  }, React__default.createElement("label", {
    htmlFor: "in",
    style: labelStyle
  }, label), React__default.createElement("input", Object.assign({
    type: "text",
    name: "in",
    className: "",
    style: _extends({}, styles)
  }, other, {
    onFocus: function onFocus(e) {
      setLabelStyle({
        animation: "animUp .3s forwards"
      });
      e.currentTarget.style.backgroundColor = accentColor;
      e.currentTarget.style.border = "2px solid " + borderColor;
    },
    onBlur: function onBlur(e) {
      if (e.currentTarget.value === "") {
        setLabelStyle({
          animation: "animDown .3s forwards"
        });
        e.currentTarget.style.backgroundColor = "white";
        e.currentTarget.style.border = "0";
        e.currentTarget.style.borderBottom = "2px solid #737373";
      }
    }
  }))), showError && React__default.createElement("small", null, errorMessage));
};

var css_248z$9 = ".textbox-simple{border:2px solid #c5c5c5;border-radius:10px;flex-direction:row;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.textbox-simple,.textbox-simple .label-box{align-items:center;display:flex;transition:all .3s ease}.textbox-simple .label-box{background-color:#efefef;border-radius:8.3px 0 0 8.3px;height:50px;padding:0 1rem}.change-border .label-box{background-color:#65c18c}.change-border .label-box h3{color:#fff}.textbox-simple-label-end{flex-direction:row-reverse}.textbox-simple-label-end .label-box{border-radius:0 8.3px 8.3px 0}.change-border{border:2px solid #65c18c}.textbox-simple h3{color:#979797;font-size:1rem;font-weight:500;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-top:14px;padding:0}.textbox-simple input{border:none;border-radius:.5rem;display:inline-block;font-size:1rem;height:50px;margin:0 0 0 1px;padding:0 1rem}.textbox-simple input:focus{outline:none}.textbox-simple-section span{color:red;font-size:1rem;margin:1rem .3rem}";
styleInject(css_248z$9);

var _excluded$8 = ["label", "labelColor", "activeColor", "width", "errorMessage", "showError", "labelPosition"];

var TextBoxSimple = function TextBoxSimple(_ref) {
  var _ref$label = _ref.label,
      label = _ref$label === void 0 ? "Your Name" : _ref$label,
      _ref$labelColor = _ref.labelColor,
      labelColor = _ref$labelColor === void 0 ? "#ffffff" : _ref$labelColor,
      _ref$activeColor = _ref.activeColor,
      activeColor = _ref$activeColor === void 0 ? "#65C18C" : _ref$activeColor,
      width = _ref.width,
      _ref$errorMessage = _ref.errorMessage,
      errorMessage = _ref$errorMessage === void 0 ? "name should not be left empty !" : _ref$errorMessage,
      _ref$showError = _ref.showError,
      showError = _ref$showError === void 0 ? false : _ref$showError,
      _ref$labelPosition = _ref.labelPosition,
      labelPosition = _ref$labelPosition === void 0 ? "start" : _ref$labelPosition,
      otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded$8);

  // const [border, setBorder] = React.useState("");
  var _React$useState = useState(false),
      isFocused = _React$useState[0],
      setIsFocused = _React$useState[1]; // let color = activeColor ? activeColor : " #65C18C";


  var styleWhenActive = {
    border: "2px solid " + activeColor
  };
  var styleWhenNotActive = {
    border: "2px solid  #c5c5c5"
  };
  return createElement("div", {
    className: "textbox-simple-section"
  }, createElement("div", {
    className: "textbox-simple " + (isFocused && "change-border") + " " + (labelPosition === "end" ? "textbox-simple-label-end" : ""),
    style: _extends({
      width: width
    }, isFocused ? styleWhenActive : styleWhenNotActive)
  }, createElement("div", {
    className: "label-box",
    style: {
      backgroundColor: isFocused ? activeColor : "#efefef"
    }
  }, createElement("h3", {
    style: {
      color: isFocused ? labelColor : "#979797"
    }
  }, label)), createElement("input", Object.assign({
    className: "",
    type: "text",
    placeholder: "",
    name: "name",
    id: "",
    onFocus: function onFocus() {
      setIsFocused(true);
    },
    onBlur: function onBlur() {
      setIsFocused(false);
    }
  }, otherAttributes))), createElement("span", {
    style: {
      display: showError ? "block" : "none"
    }
  }, errorMessage));
};

var css_248z$a = ".description{display:block;font-size:1rem;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.description-cap{font-size:2em;font-weight:700}";
styleInject(css_248z$a);

var randomText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.";

var Description = function Description(_ref) {
  var _ref$title = _ref.title,
      title = _ref$title === void 0 ? randomText : _ref$title,
      color = _ref.color,
      size = _ref.size,
      _ref$cap = _ref.cap,
      cap = _ref$cap === void 0 ? false : _ref$cap,
      capColor = _ref.capColor,
      styles = _ref.styles;
  return React__default.createElement("p", {
    className: "description",
    style: _extends({
      color: color,
      fontSize: size
    }, styles)
  }, React__default.createElement("span", {
    className: "" + (cap && "description-cap"),
    style: {
      color: capColor
    }
  }, title.charAt(0)), title.slice(1));
};

var css_248z$b = ".error-text{align-items:center;color:#eb1d36;display:flex;font-size:1.5rem;margin:0}.error-text-icon{display:inline-block;height:1.3em;margin-left:1rem;width:1.3em}";
styleInject(css_248z$b);

var ErrorText = function ErrorText(_ref) {
  var _ref$title = _ref.title,
      title = _ref$title === void 0 ? 'Oops ! email validation failed' : _ref$title,
      _ref$icon = _ref.icon,
      icon = _ref$icon === void 0 ? 'type1' : _ref$icon,
      _ref$showIcon = _ref.showIcon,
      showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
      styles = _ref.styles;
  return React__default.createElement("p", {
    style: styles,
    className: "error-text"
  }, title, showIcon && React__default.createElement("img", {
    className: "error-text-icon",
    src: icon === 'type1' || 'type2' || 'type3' ? getIcon[icon] : icon,
    alt: ""
  }));
};

var getIcon = {
  type1: 'https://i.postimg.cc/YqbZnzjY/error1.png',
  type2: 'https://i.postimg.cc/ry9PsN13/error2.png',
  type3: 'https://i.postimg.cc/VkJG7yxP/error3.png'
};

var css_248z$c = ".heading{display:block;font-size:3.5rem;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}";
styleInject(css_248z$c);

var _excluded$9 = ["title", "size", "color", "underlined", "styles"];

var Heading = function Heading(_ref) {
  var _ref$title = _ref.title,
      title = _ref$title === void 0 ? "This is a yummy text !" : _ref$title,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? "large" : _ref$size,
      color = _ref.color,
      _ref$underlined = _ref.underlined,
      underlined = _ref$underlined === void 0 ? false : _ref$underlined,
      styles = _ref.styles,
      others = _objectWithoutPropertiesLoose(_ref, _excluded$9);

  return React__default.createElement("div", null, React__default.createElement("h1", Object.assign({
    className: "heading",
    style: _extends({
      fontSize: calc(size),
      color: color,
      textDecoration: underlined ? "underline" : "none"
    }, styles)
  }, others), title));
};

var calc = function calc(size) {
  if (size === "extraLarge" || size === "large" || size === "medium") {
    return getSize[size];
  } else {
    return size;
  }
};

var getSize = {
  "extra-large": "3.5rem",
  large: "2.5rem",
  medium: "1.5rem"
};

var css_248z$d = ".loader-text{align-items:center;display:flex;font-size:1rem;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.loader-start{flex-direction:row-reverse}";
styleInject(css_248z$d);

var _excluded$a = ["text", "loaderPosition", "color", "isLoading", "fontSize", "styles"];

var LoaderText = function LoaderText(_ref) {
  var _ref$text = _ref.text,
      text = _ref$text === void 0 ? 'This is a sample loading text' : _ref$text,
      _ref$loaderPosition = _ref.loaderPosition,
      loaderPosition = _ref$loaderPosition === void 0 ? 'end' : _ref$loaderPosition,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? '#E94560' : _ref$color,
      _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
      _ref$fontSize = _ref.fontSize,
      fontSize = _ref$fontSize === void 0 ? '1rem' : _ref$fontSize,
      styles = _ref.styles,
      others = _objectWithoutPropertiesLoose(_ref, _excluded$a);

  return React__default.createElement("p", Object.assign({
    className: "loader-text " + (loaderPosition === 'start' && 'loader-start'),
    style: _extends({
      color: color,
      fontSize: fontSize
    }, styles)
  }, others), text, isLoading && React__default.createElement("div", {
    className: "lds-ellipsis",
    style: {
      marginRight: '1rem',
      display: isLoading ? 'inline-block' : 'none'
    }
  }, React__default.createElement("div", {
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    style: {
      background: color
    }
  }), React__default.createElement("div", {
    style: {
      background: color
    }
  })));
};

var css_248z$e = ".success-text{align-items:center;color:#4da527;display:flex;font-size:1.5rem;margin:0}.success-text-icon{display:inline-block;height:1.3em;margin-left:1rem;width:1.3em}";
styleInject(css_248z$e);

var _excluded$b = ["title", "icon", "showIcon", "styles"];

var SuccessText = function SuccessText(_ref) {
  var _ref$title = _ref.title,
      title = _ref$title === void 0 ? 'your email was updated successfully' : _ref$title,
      _ref$icon = _ref.icon,
      icon = _ref$icon === void 0 ? 'type1' : _ref$icon,
      _ref$showIcon = _ref.showIcon,
      showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
      styles = _ref.styles,
      others = _objectWithoutPropertiesLoose(_ref, _excluded$b);

  return React__default.createElement("p", Object.assign({
    className: "success-text"
  }, others, {
    style: styles
  }), title, showIcon && React__default.createElement("img", {
    className: "success-text-icon",
    src: icon === 'type1' || 'type2' || 'type3' ? getType[icon] : icon,
    alt: ""
  }));
};

var getType = {
  type1: 'https://i.postimg.cc/HsVCXNsF/type1.png',
  type2: 'https://i.postimg.cc/G2KH8fhH/type2.png',
  type3: 'https://i.postimg.cc/RFgZVnXt/type3.png'
};

export { Button, ButtonTextBox, CircularAvatar, CircularLoader, Description, EllipseLoader, ErrorText, Heading, LoaderText, MaterialTextBox, OutlinedButton, RoundedAvatar, SpinnerLoader, SuccessText, TextBoxSimple };
//# sourceMappingURL=breakfast-ui.esm.js.map