@spark-web/alert/dist/spark-web-alert.cjs.dev.js

--- title: Alert storybookPath: feedback-overlays-alert--info isExperimentalPackage: true ---

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var css = require('@emotion/css');
var button = require('@spark-web/button');
var icon = require('@spark-web/icon');
var row = require('@spark-web/row');
var stack = require('@spark-web/stack');
var text = require('@spark-web/text');
var theme = require('@spark-web/theme');
var react = require('react');
var jsxRuntime = require('react/jsx-runtime');

var toneToIcon = {
  caution: icon.ExclamationIcon,
  critical: icon.ExclamationIcon,
  info: icon.InformationCircleIcon,
  positive: icon.CheckCircleIcon
};
function Alert(_ref) {
  var children = _ref.children,
      _ref$closeLabel = _ref.closeLabel,
      closeLabel = _ref$closeLabel === void 0 ? 'Dismiss alert' : _ref$closeLabel,
      data = _ref.data,
      heading = _ref.heading,
      icon$1 = _ref.icon,
      onClose = _ref.onClose,
      _ref$tone = _ref.tone,
      tone = _ref$tone === void 0 ? 'info' : _ref$tone;
  var Icon = icon$1 || toneToIcon[tone];
  return /*#__PURE__*/jsxRuntime.jsxs(row.Row, {
    "aria-live": "polite",
    data: data,
    role: "alert" // Styles
    ,
    alignY: heading ? 'top' : 'center',
    background: "".concat(tone, "Low"),
    borderRadius: "medium",
    gap: "medium",
    children: [/*#__PURE__*/jsxRuntime.jsxs(row.Row, {
      alignY: "top",
      gap: "medium",
      padding: "large",
      paddingRight: onClose ? 'none' : undefined,
      width: "full",
      style: {
        minWidth: 0
      },
      children: [/*#__PURE__*/jsxRuntime.jsx(IconWrapper, {
        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
          size: "xsmall",
          tone: tone
        })
      }), /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, {
        flex: 1,
        gap: "medium",
        children: [heading && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
          weight: "semibold",
          children: heading
        }), /*#__PURE__*/jsxRuntime.jsx(Content, {
          children: children
        })]
      })]
    }), onClose && /*#__PURE__*/jsxRuntime.jsx(row.Row, {
      padding: "small",
      alignSelf: "start",
      children: /*#__PURE__*/jsxRuntime.jsx(button.Button, {
        label: closeLabel,
        onClick: onClose,
        prominence: "low",
        tone: tone,
        children: /*#__PURE__*/jsxRuntime.jsx(icon.XIcon, {
          size: "xxsmall"
        })
      })
    })]
  });
}

function IconWrapper(_ref2) {
  var children = _ref2.children;
  var theme$1 = theme.useTheme();
  var responsiveStyles = theme$1.utils.responsiveStyles({
    mobile: {
      height: theme$1.typography.text.standard.mobile.capHeight
    },
    tablet: {
      height: theme$1.typography.text.standard.tablet.capHeight
    }
  });
  return /*#__PURE__*/jsxRuntime.jsx(row.Row, {
    "aria-hidden": "true",
    align: "center",
    alignY: "center",
    cursor: "default",
    flexShrink: 0,
    className: css.css(responsiveStyles),
    children: children
  });
}

function Content(_ref3) {
  var children = _ref3.children;

  if (typeof children === 'string' || typeof children === 'number') {
    return /*#__PURE__*/jsxRuntime.jsx(text.Text, {
      children: children
    });
  }

  return /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
    children: children
  });
}

exports.Alert = Alert;