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

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

'use strict';

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

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

exports.Alert = Alert;