@spark-web/alert/dist/spark-web-alert.esm.js

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

import { css } from '@emotion/css';
import { Button } from '@spark-web/button';
import { XIcon, ExclamationIcon, InformationCircleIcon, CheckCircleIcon } from '@spark-web/icon';
import { Row } from '@spark-web/row';
import { Stack } from '@spark-web/stack';
import { Text } from '@spark-web/text';
import { useTheme } from '@spark-web/theme';
import { Fragment } from 'react';
import { jsxs, jsx } from 'react/jsx-runtime';

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

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

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

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

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

export { Alert };