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

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

import { css } from '@emotion/react';
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 '@emotion/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,
    customIcon = _ref.customIcon,
    onClose = _ref.onClose,
    _ref$tone = _ref.tone,
    tone = _ref$tone === void 0 ? 'info' : _ref$tone,
    _ref$role = _ref.role,
    role = _ref$role === void 0 ? 'alert' : _ref$role;
  var Icon = icon || toneToIcon[tone];
  return jsxs(Row, {
    "aria-live": "polite",
    data: data,
    role: role === 'none' ? undefined : role
    // Styles
    ,
    alignY: heading ? 'top' : 'center',
    background: "".concat(tone, "Low"),
    borderRadius: "medium",
    gap: "medium",
    children: [jsxs(Row, {
      alignY: "top",
      gap: "medium",
      padding: "large",
      paddingRight: onClose ? 'none' : undefined,
      width: "full",
      style: {
        minWidth: 0
      },
      children: [customIcon !== null && customIcon !== void 0 ? customIcon : jsx(IconWrapper, {
        children: jsx(Icon, {
          size: "xsmall",
          tone: tone
        })
      }), jsxs(Stack, {
        flex: 1,
        gap: "medium",
        children: [heading && jsx(Text, {
          weight: "semibold",
          children: heading
        }), jsx(Content, {
          children: children
        })]
      })]
    }), onClose && jsx(Row, {
      padding: "small",
      alignSelf: "start",
      children: jsx(Button, {
        label: closeLabel,
        onClick: onClose,
        prominence: "low",
        tone: tone,
        children: 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 jsx(Row, {
    "aria-hidden": "true",
    align: "center",
    alignY: "center",
    cursor: "default",
    flexShrink: 0,
    css: css(responsiveStyles),
    children: children
  });
}
function Content(_ref3) {
  var children = _ref3.children;
  if (typeof children === 'string' || typeof children === 'number') {
    return jsx(Text, {
      children: children
    });
  }
  return jsx(Fragment, {
    children: children
  });
}

export { Alert };