@carbon/ibm-products/lib/components/EmptyStates/assets/NotificationsIllustration.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

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

var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../../_virtual/index.js');
var cx = require('classnames');
var settings = require('../../../settings.js');
var useId = require('../../../global/js/utils/useId.js');

var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _stop7, _stop8, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _path, _path2, _path3, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _stop24, _stop25, _stop26, _stop27, _stop28, _stop29, _stop30, _stop31, _stop32, _stop33, _stop34, _stop35, _stop36, _stop37, _stop38, _stop39, _stop40, _stop41, _path4;

// The block part of our conventional BEM class names (blockClass__E--M).
const blockClass = `${settings.pkg.prefix}--empty-state`;
const NotificationsIllustration = _ref => {
  let {
    theme,
    size,
    alt,
    ...rest
  } = _ref;
  const svgId = useId.useId();
  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
    xmlns: "http://www.w3.org/2000/svg",
    width: 80,
    height: 80,
    viewBox: "0 0 80 80",
    className: cx([`${blockClass}__illustration`, `${blockClass}__illustration-notification`, `${blockClass}__illustration--${size}`]),
    "aria-hidden": "true"
  }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__a_dark_${svgId}`,
    x1: 30.05,
    y1: 54.31,
    x2: 35.5,
    y2: 54.31,
    gradientUnits: "userSpaceOnUse"
  }, _stop || (_stop = /*#__PURE__*/React.createElement("stop", {
    offset: 0,
    stopColor: "#161616"
  })), _stop2 || (_stop2 = /*#__PURE__*/React.createElement("stop", {
    offset: 1,
    stopColor: "#262626"
  }))), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__b_dark_${svgId}`,
    x1: 28.61,
    y1: -3.97,
    x2: 70.69,
    y2: 68.92,
    gradientUnits: "userSpaceOnUse"
  }, _stop3 || (_stop3 = /*#__PURE__*/React.createElement("stop", {
    offset: 0,
    stopColor: "#525252"
  })), _stop4 || (_stop4 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.52,
    stopColor: "#393939"
  })), _stop5 || (_stop5 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.61,
    stopColor: "#393939"
  })), _stop6 || (_stop6 = /*#__PURE__*/React.createElement("stop", {
    offset: 1,
    stopColor: "#161616"
  }))), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__c_dark_${svgId}`,
    x1: 38.01,
    y1: 69.51,
    x2: 38.01,
    y2: -0.42,
    gradientUnits: "userSpaceOnUse"
  }, _stop7 || (_stop7 = /*#__PURE__*/React.createElement("stop", {
    offset: 0,
    stopColor: "#262626"
  })), _stop8 || (_stop8 = /*#__PURE__*/React.createElement("stop", {
    offset: 1,
    stopColor: "#393939"
  }))), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__d_dark_${svgId}`,
    x1: 15.14,
    y1: 5.72,
    x2: 63.06,
    y2: 33.52,
    gradientUnits: "userSpaceOnUse"
  }, _stop9 || (_stop9 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.78,
    stopColor: "#6f6f6f"
  })), _stop10 || (_stop10 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.81,
    stopColor: "#6c6c6c",
    stopOpacity: 0.96
  })), _stop11 || (_stop11 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.85,
    stopColor: "#636363",
    stopOpacity: 0.84
  })), _stop12 || (_stop12 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.89,
    stopColor: "#545454",
    stopOpacity: 0.64
  })), _stop13 || (_stop13 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.93,
    stopColor: "#404040",
    stopOpacity: 0.35
  })), _stop14 || (_stop14 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.97,
    stopColor: "#262626",
    stopOpacity: 0
  })))), _path || (_path = /*#__PURE__*/React.createElement("path", {
    fill: "none",
    d: "M0 0h80v80H0z"
  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
    opacity: 0.25,
    d: "M15.13 52.11l45.5 26.28 4.25-2.51L19.4 49.63l-4.27 2.48z"
  })), /*#__PURE__*/React.createElement("path", {
    d: "M32.66 52.85l-2.25 4.22a1.08 1.08 0 01-.36.35l2.83-1.65a1.08 1.08 0 00.36-.35l2.26-4.22z",
    fill: `url(#prefix__a_dark_${svgId})`
  }), /*#__PURE__*/React.createElement("path", {
    d: "M63.45 26.58L20.63 1.86a1 1 0 00-1-.1l-4 2.3a1 1 0 011 .1l42.85 24.72a3.17 3.17 0 011.42 2.47l-.1 36.08a1 1 0 01-.42.91l4-2.3a1 1 0 00.42-.91L64.88 29a3.14 3.14 0 00-1.43-2.42z",
    fill: `url(#prefix__b_dark_${svgId})`
  }), /*#__PURE__*/React.createElement("path", {
    d: "M59.48 28.88a3.17 3.17 0 011.42 2.47l-.1 36.08c0 .9-.65 1.26-1.42.81l-26.7-15.4-2.26 4.22a.9.9 0 01-1.33.28 3.07 3.07 0 01-1.22-1.53l-2.33-7.09-9-5.2a3.15 3.15 0 01-1.43-2.46L15.23 5c0-.9.64-1.27 1.43-.81z",
    fill: `url(#prefix__c_dark_${svgId})`
  }), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
    fill: "#525252",
    d: "M57.99 37.07l-.01 3.9L18.03 17.9l.01-3.9 39.95 23.07zM57.99 45.11l-.01 3.91-39.95-23.07.01-3.9 39.95 23.06zM44.62 45.04l-.01 3.9L18.03 33.6l.01-3.9 26.58 15.34z"
  })), /*#__PURE__*/React.createElement("path", {
    d: "M60.76 30.55a2.54 2.54 0 01.14.8v3.95l.41-.13v-3.82a3.54 3.54 0 00-1.63-2.82L16.86 3.8a2.09 2.09 0 00-.44-.19l-.78.45a1 1 0 01.21-.06h.48l.27.12 21.47 12.4 21.41 12.36a3.19 3.19 0 011.28 1.67z",
    fill: `url(#prefix__d_dark_${svgId})`
  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__a_${svgId}`,
    x1: 61.44,
    y1: 66.99,
    x2: 61.44,
    y2: 60.01,
    gradientUnits: "userSpaceOnUse"
  }, _stop15 || (_stop15 = /*#__PURE__*/React.createElement("stop", {
    offset: 0,
    stopColor: "#c6c6c6"
  })), _stop16 || (_stop16 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.78,
    stopColor: "#e0e0e0"
  }))), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__b_${svgId}`,
    x1: 28.49,
    y1: 44.06,
    x2: 53.04,
    y2: 86.58,
    gradientUnits: "userSpaceOnUse"
  }, _stop17 || (_stop17 = /*#__PURE__*/React.createElement("stop", {
    offset: 0,
    stopColor: "#525252",
    stopOpacity: 0.05
  })), _stop18 || (_stop18 = /*#__PURE__*/React.createElement("stop", {
    offset: 1,
    stopOpacity: 0.1
  }))), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__c_${svgId}`,
    x1: 30.05,
    y1: 54.31,
    x2: 35.5,
    y2: 54.31,
    gradientUnits: "userSpaceOnUse"
  }, _stop19 || (_stop19 = /*#__PURE__*/React.createElement("stop", {
    offset: 0,
    stopColor: "#a4a4a4"
  })), _stop20 || (_stop20 = /*#__PURE__*/React.createElement("stop", {
    offset: 1,
    stopColor: "#bebebe"
  }))), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__d_${svgId}`,
    x1: 28.61,
    y1: -3.97,
    x2: 70.69,
    y2: 68.92,
    gradientUnits: "userSpaceOnUse"
  }, _stop21 || (_stop21 = /*#__PURE__*/React.createElement("stop", {
    offset: 0,
    stopColor: "#f4f4f4"
  })), _stop22 || (_stop22 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.52,
    stopColor: "#e0e0e0"
  })), _stop23 || (_stop23 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.56,
    stopColor: "#d8d8d8"
  })), _stop24 || (_stop24 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.61,
    stopColor: "#c6c6c6"
  })), _stop25 || (_stop25 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.89,
    stopColor: "#a8a8a8"
  })), _stop26 || (_stop26 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.96,
    stopColor: "#8d8d8d"
  }))), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__e_${svgId}`,
    x1: 38.01,
    y1: 59.43,
    x2: 38.01,
    y2: 3.27,
    xlinkHref: `#prefix__a_${svgId}`
  }), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__f_${svgId}`,
    x1: 21.52,
    y1: 36.2,
    x2: 61.39,
    y2: 36.2,
    gradientUnits: "userSpaceOnUse"
  }, _stop27 || (_stop27 = /*#__PURE__*/React.createElement("stop", {
    offset: 0,
    stopColor: "#e0e0e0"
  })), _stop28 || (_stop28 = /*#__PURE__*/React.createElement("stop", {
    offset: 1,
    stopColor: "#c6c6c6"
  }))), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__h_${svgId}`,
    x1: 17.68,
    y1: 15.75,
    x2: 55.37,
    y2: 37.5,
    gradientUnits: "userSpaceOnUse"
  }, _stop29 || (_stop29 = /*#__PURE__*/React.createElement("stop", {
    offset: 0,
    stopColor: "#fff"
  })), _stop30 || (_stop30 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.05,
    stopColor: "#fdfdfd"
  })), _stop31 || (_stop31 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.3,
    stopColor: "#f6f6f6"
  })), _stop32 || (_stop32 = /*#__PURE__*/React.createElement("stop", {
    offset: 1,
    stopColor: "#f4f4f4"
  }))), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__i_${svgId}`,
    x1: 14.24,
    y1: 21.81,
    x2: 51.92,
    y2: 43.56,
    xlinkHref: `#prefix__h_${svgId}`
  }), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__j_${svgId}`,
    x1: 10.96,
    y1: 27.56,
    x2: 48.66,
    y2: 49.33,
    xlinkHref: `#prefix__h_${svgId}`
  }), /*#__PURE__*/React.createElement("linearGradient", {
    id: `prefix__k_${svgId}`,
    x1: 15.14,
    y1: 5.72,
    x2: 63.06,
    y2: 33.52,
    gradientUnits: "userSpaceOnUse"
  }, _stop33 || (_stop33 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.78,
    stopColor: "#fff"
  })), _stop34 || (_stop34 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.8,
    stopColor: "#fefefe",
    stopOpacity: 0.98
  })), _stop35 || (_stop35 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.82,
    stopColor: "#fcfcfc",
    stopOpacity: 0.93
  })), _stop36 || (_stop36 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.85,
    stopColor: "#f8f8f8",
    stopOpacity: 0.84
  })), _stop37 || (_stop37 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.87,
    stopColor: "#f2f2f2",
    stopOpacity: 0.72
  })), _stop38 || (_stop38 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.9,
    stopColor: "#eaeaea",
    stopOpacity: 0.56
  })), _stop39 || (_stop39 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.93,
    stopColor: "#e1e1e1",
    stopOpacity: 0.37
  })), _stop40 || (_stop40 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.95,
    stopColor: "#d7d7d7",
    stopOpacity: 0.14
  })), _stop41 || (_stop41 = /*#__PURE__*/React.createElement("stop", {
    offset: 0.97,
    stopColor: "#d0d0d0",
    stopOpacity: 0
  })))), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
    fill: "none",
    d: "M0 0h80v80H0z"
  })), /*#__PURE__*/React.createElement("path", {
    d: "M61.3 68.11a.67.67 0 00.09-.14.67.67 0 01-.09.14zm.22-.46a1.58 1.58 0 000-.32v-7.24 7.24a1.58 1.58 0 010 .32zm-.09.26a1.18 1.18 0 00.07-.2 1.18 1.18 0 01-.07.2z",
    fill: `url(#prefix__a_${svgId})`
  }), /*#__PURE__*/React.createElement("path", {
    fill: `url(#prefix__b_${svgId})`,
    d: "M15.13 52.11l45.5 26.28 4.25-2.51L19.4 49.63l-4.27 2.48z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M32.66 52.85l-2.25 4.22a1.08 1.08 0 01-.36.35l2.83-1.65a1.08 1.08 0 00.36-.35l2.26-4.22z",
    fill: `url(#prefix__c_${svgId})`
  }), /*#__PURE__*/React.createElement("path", {
    d: "M63.45 26.58L20.63 1.86a1 1 0 00-1-.1l-4 2.3a1 1 0 011 .1l42.85 24.72a3.17 3.17 0 011.42 2.47l-.1 36.08a1 1 0 01-.42.91l4-2.3a1 1 0 00.42-.91L64.88 29a3.14 3.14 0 00-1.43-2.42z",
    fill: `url(#prefix__d_${svgId})`
  }), /*#__PURE__*/React.createElement("path", {
    fill: `url(#prefix__e_${svgId})`,
    d: "M59.48 28.88a3.17 3.17 0 011.42 2.47l-.1 36.08c0 .9-.65 1.26-1.42.81l-26.7-15.4-2.26 4.22a.9.9 0 01-1.33.28 3.07 3.07 0 01-1.22-1.53l-2.33-7.09-9-5.2a3.15 3.15 0 01-1.43-2.46L15.23 5c0-.9.64-1.27 1.43-.81z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M59.48 28.88a3.17 3.17 0 011.42 2.47l-.1 36.08c0 .9-.65 1.26-1.42.81l-26.7-15.4-2.26 4.22a.9.9 0 01-1.33.28 3.07 3.07 0 01-1.22-1.53l-2.33-7.09-9-5.2a3.15 3.15 0 01-1.43-2.46L15.23 5c0-.9.64-1.27 1.43-.81z",
    fill: `url(#prefix__f_${svgId})`
  }), /*#__PURE__*/React.createElement("path", {
    fill: `url(#prefix__e_${svgId})`,
    d: "M59.48 28.88a3.17 3.17 0 011.42 2.47l-.1 36.08c0 .9-.65 1.26-1.42.81l-26.7-15.4-2.26 4.22a.9.9 0 01-1.33.28 3.07 3.07 0 01-1.22-1.53l-2.33-7.09-9-5.2a3.15 3.15 0 01-1.43-2.46L15.23 5c0-.9.64-1.27 1.43-.81z"
  }), /*#__PURE__*/React.createElement("path", {
    fill: `url(#prefix__h_${svgId})`,
    d: "M57.99 37.07l-.01 3.9L18.03 17.9l.01-3.9 39.95 23.07z"
  }), /*#__PURE__*/React.createElement("path", {
    fill: `url(#prefix__i_${svgId})`,
    d: "M57.99 45.11l-.01 3.91-39.95-23.07.01-3.9 39.95 23.06z"
  }), /*#__PURE__*/React.createElement("path", {
    fill: `url(#prefix__j_${svgId})`,
    d: "M44.62 45.04l-.01 3.9L18.03 33.6l.01-3.9 26.58 15.34z"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M60.76 30.55a2.54 2.54 0 01.14.8v3.95l.41-.13v-3.82a3.54 3.54 0 00-1.63-2.82L16.86 3.8a2.09 2.09 0 00-.44-.19l-.78.45a1 1 0 01.21-.06h.48l.27.12 21.47 12.4 21.41 12.36a3.19 3.19 0 011.28 1.67z",
    fill: `url(#prefix__k_${svgId})`
  })));
};
NotificationsIllustration.propTypes = {
  alt: index.default.string.isRequired,
  size: index.default.oneOf(['lg', 'sm']),
  theme: index.default.oneOf(['light', 'dark'])
};

exports.NotificationsIllustration = NotificationsIllustration;
exports.default = NotificationsIllustration;