@braineet/ui/dist/cjs/components/alert/index.js

Braineet design system

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = require("styled-components");
var _utils = require("../../utils");
var _badge = _interopRequireDefault(require("../badge"));
var _heading = _interopRequireDefault(require("../heading"));
var _icon = _interopRequireDefault(require("../icon"));
var _pane = _interopRequireDefault(require("../pane"));
var _styles = require("./styles");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /**
 The `Alert` component.
*/
var Alert = function Alert(_ref) {
  var color = _ref.color,
    theme = _ref.theme,
    icon = _ref.icon,
    isClosable = _ref.isClosable,
    onClose = _ref.onClose,
    label = _ref.label,
    children = _ref.children,
    textStyles = _ref.textStyles;
  // Get text color and background color of badge
  var _theme$helpers$getFil = theme.helpers.getFills({
      appearance: 'subtle',
      color: color
    }),
    textColor = _theme$helpers$getFil.color,
    backgroundColor = _theme$helpers$getFil.backgroundColor;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Wrapper, {
    bg: backgroundColor,
    paddingY: theme.utils.fluid(8),
    paddingLeft: (0, _utils.fluid)(12),
    paddingRight: (0, _utils.fluid)(12),
    borderRadius: theme.borderRadius.md,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_pane.default, {
      display: "flex",
      alignY: "center",
      children: [icon && (typeof icon === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledIcon, {
        color: textColor,
        name: icon,
        mr: theme.spaces.sm
      }) : icon), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.default, {
        color: textColor,
        isSolid: true,
        marginRight: "0.25rem",
        children: label
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_heading.default, _extends({
        color: textColor,
        size: "sm",
        lineHeight: (0, _utils.fluid)(20),
        wordBreak: "break-word",
        marginRight: (0, _utils.fluid)(36),
        display: "inline-block"
      }, textStyles, {
        children: children
      }))]
    }), typeof isClosable === 'boolean' && isClosable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IconClose, {
      color: color,
      onClick: onClose,
      backgroundColor: textColor,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
        color: textColor,
        name: "cross"
      })
    })]
  });
};
Alert.defaultProps = {
  icon: null,
  theme: {},
  isClosable: false,
  onClose: function onClose() {},
  color: 'success',
  textStyles: {}
};
var _default = exports.default = (0, _styledComponents.withTheme)(Alert);