@snack-uikit/modal 0.12.6 → 0.12.7-preview-d96c83e8.0

package/dist/cjs/components/Modal/Modal.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = Modal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@snack-uikit/button");
+const link_1 = require("@snack-uikit/link");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const ModalCustom_1 = require("../ModalCustom");
+const styles_module_scss_1 = __importDefault({});
+function Modal(_a) {
+  var {
+      open,
+      onClose,
+      size = constants_1.SIZE.S,
+      mode = constants_1.MODE.Regular,
+      align = constants_1.ALIGN.Default,
+      title,
+      titleTooltip,
+      subtitle,
+      picture: pictureProp,
+      content,
+      approveButton,
+      cancelButton,
+      additionalButton,
+      disclaimer,
+      truncate,
+      className
+    } = _a,
+    rest = __rest(_a, ["open", "onClose", "size", "mode", "align", "title", "titleTooltip", "subtitle", "picture", "content", "approveButton", "cancelButton", "additionalButton", "disclaimer", "truncate", "className"]);
+  const aligns = (0, utils_1.getAlignProps)({
+    align,
+    size
+  });
+  const buttonsSize = (0, utils_1.getButtonsSize)({
+    align,
+    size
+  });
+  const picture = (0, utils_1.getPicture)({
+    size,
+    picture: pictureProp
+  });
+  return (0, jsx_runtime_1.jsxs)(ModalCustom_1.ModalCustom, Object.assign({
+    open: open,
+    onClose: onClose,
+    size: size,
+    mode: mode,
+    className: className
+  }, rest, {
+    children: [(0, jsx_runtime_1.jsx)(ModalCustom_1.ModalCustom.Header, {
+      title: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+        text: title,
+        maxLines: (truncate === null || truncate === void 0 ? void 0 : truncate.title) || 1
+      }),
+      titleTooltip: titleTooltip,
+      subtitle: subtitle ? (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+        text: subtitle,
+        maxLines: (truncate === null || truncate === void 0 ? void 0 : truncate.subtitle) || 2
+      }) : undefined,
+      picture: picture,
+      align: aligns.header
+    }), Boolean(content) && (0, jsx_runtime_1.jsx)(ModalCustom_1.ModalCustom.Body, {
+      content: content,
+      align: aligns.body
+    }), (0, jsx_runtime_1.jsx)(ModalCustom_1.ModalCustom.Footer, {
+      actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({
+          appearance: 'primary'
+        }, approveButton, {
+          size: buttonsSize,
+          className: styles_module_scss_1.default.footerButton,
+          "data-test-id": constants_1.TEST_IDS.approveButton
+        })), cancelButton && (0, jsx_runtime_1.jsx)(button_1.ButtonOutline, Object.assign({
+          appearance: 'neutral'
+        }, cancelButton, {
+          size: buttonsSize,
+          className: styles_module_scss_1.default.footerButton,
+          "data-test-id": constants_1.TEST_IDS.cancelButton
+        })), additionalButton && (0, jsx_runtime_1.jsx)(button_1.ButtonSimple, Object.assign({
+          appearance: 'neutral'
+        }, additionalButton, {
+          size: buttonsSize,
+          className: styles_module_scss_1.default.footerButton,
+          "data-test-id": constants_1.TEST_IDS.additionalButton
+        }))]
+      }),
+      disclaimer: disclaimer && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, {
+          "data-test-id": constants_1.TEST_IDS.disclaimerText,
+          children: disclaimer.text
+        }), disclaimer.link && (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({}, disclaimer.link, {
+          size: 's',
+          "data-test-id": constants_1.TEST_IDS.disclaimerLink
+        }))]
+      }),
+      align: aligns.footer,
+      className: styles_module_scss_1.default.modalFooter
+    })]
+  }));
+}

package/dist/cjs/components/Modal/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Modal"), exports);

package/dist/cjs/components/Modal/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/components/ModalCustom/ModalCustom.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalCustom = ModalCustom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_modal_1 = __importDefault(require("react-modal"));
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const styles_module_scss_1 = __importDefault({});
+const utils_2 = require("./utils");
+function ModalCustom(_a) {
+  var {
+      open,
+      onClose,
+      size = constants_1.SIZE.S,
+      mode = constants_1.MODE.Regular,
+      children,
+      className
+    } = _a,
+    rest = __rest(_a, ["open", "onClose", "size", "mode", "children", "className"]);
+  const handleCloseButtonClick = () => {
+    onClose();
+  };
+  const handleClose = () => {
+    if (mode === constants_1.MODE.Regular) {
+      onClose();
+    }
+  };
+  if (!open) {
+    return null;
+  }
+  return (0, jsx_runtime_1.jsxs)(react_modal_1.default, {
+    data: Object.assign(Object.assign({}, (0, utils_2.getDataTestAttributes)(rest)), {
+      size
+    }),
+    isOpen: true,
+    onRequestClose: handleClose,
+    appElement: (0, utils_1.isBrowser)() ? document.body : undefined,
+    overlayElement: (_, content) => (0, jsx_runtime_1.jsx)(helperComponents_1.OverlayElement, {
+      blur: [constants_1.MODE.Forced, constants_1.MODE.Aggressive].includes(mode),
+      content: content,
+      onClose: handleClose
+    }),
+    className: (0, classnames_1.default)(styles_module_scss_1.default.modal, className),
+    children: [mode !== constants_1.MODE.Forced && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.headerElements,
+      children: (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonClose, {
+        onClick: handleCloseButtonClick
+      })
+    }), children]
+  });
+}
+(function (ModalCustom) {
+  ModalCustom.Header = helperComponents_1.ModalHeader;
+  ModalCustom.Body = helperComponents_1.ModalBody;
+  ModalCustom.Footer = helperComponents_1.ModalFooter;
+})(ModalCustom || (exports.ModalCustom = ModalCustom = {}));

package/dist/cjs/components/ModalCustom/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./ModalCustom"), exports);

package/dist/cjs/components/ModalCustom/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDataTestAttributes = void 0;
+const utils_1 = require("@snack-uikit/utils");
+const getDataTestAttributes = rest => {
+  const dataTestProps = (0, utils_1.extractDataTestProps)(rest);
+  return Object.keys(dataTestProps).reduce((acc, key) => {
+    const newKey = key.replace('data-', '');
+    acc[newKey] = dataTestProps[key];
+    return acc;
+  }, {});
+};
+exports.getDataTestAttributes = getDataTestAttributes;

package/dist/cjs/components/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./ModalCustom"), exports);
+__exportStar(require("./Modal"), exports);

package/dist/cjs/constants.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEST_IDS = exports.CONTENT_ALIGN = exports.ALIGN = exports.MODE = exports.SIZE = void 0;
+exports.SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l'
+};
+exports.MODE = {
+  Regular: 'regular',
+  Aggressive: 'aggressive',
+  Forced: 'forced'
+};
+exports.ALIGN = {
+  Default: 'default',
+  Center: 'center',
+  Vertical: 'vertical'
+};
+exports.CONTENT_ALIGN = {
+  Default: 'default',
+  Center: 'center'
+};
+exports.TEST_IDS = {
+  overlay: 'modal__overlay',
+  closeButton: 'modal__close-button',
+  header: 'modal__header',
+  title: 'modal__title',
+  subtitle: 'modal__subtitle',
+  tooltip: 'modal__title-tooltip',
+  icon: 'modal__icon',
+  image: 'modal__image',
+  content: 'modal__body',
+  footer: 'modal__footer',
+  approveButton: 'modal__approve-button',
+  cancelButton: 'modal__cancel-button',
+  additionalButton: 'modal__additional-button',
+  disclaimer: 'modal__disclaimer',
+  disclaimerText: 'modal__disclaimer-text',
+  disclaimerLink: 'modal__disclaimer-link'
+};

package/dist/cjs/helperComponents/Body/Body.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalBody = ModalBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const scroll_1 = require("@snack-uikit/scroll");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault({});
+function ModalBody(_a) {
+  var {
+      content,
+      align = constants_1.CONTENT_ALIGN.Default,
+      className
+    } = _a,
+    rest = __rest(_a, ["content", "align", "className"]);
+  return (0, jsx_runtime_1.jsx)(scroll_1.Scroll, Object.assign({
+    size: 'm',
+    barHideStrategy: 'never',
+    className: (0, classnames_1.default)(styles_module_scss_1.default.modalBody, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-align": align,
+    "data-test-id": constants_1.TEST_IDS.content,
+    children: content
+  }));
+}

package/dist/cjs/helperComponents/Body/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Body"), exports);

package/dist/cjs/helperComponents/ButtonClose/ButtonClose.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonClose = ButtonClose;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@snack-uikit/icons");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault({});
+function ButtonClose(_ref) {
+  let {
+    onClick
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)("button", {
+    type: 'button',
+    className: styles_module_scss_1.default.buttonClose,
+    onClick: onClick,
+    "aria-label": 'close modal',
+    "data-test-id": constants_1.TEST_IDS.closeButton,
+    children: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {})
+  });
+}

package/dist/cjs/helperComponents/ButtonClose/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./ButtonClose"), exports);

package/dist/cjs/helperComponents/Footer/Footer.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalFooter = ModalFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault({});
+function ModalFooter(_a) {
+  var {
+      actions,
+      disclaimer,
+      align = constants_1.ALIGN.Default,
+      className
+    } = _a,
+    rest = __rest(_a, ["actions", "disclaimer", "align", "className"]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    "data-align": align,
+    className: (0, classnames_1.default)(styles_module_scss_1.default.footer, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-test-id": constants_1.TEST_IDS.footer,
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.footerActions,
+      children: actions
+    }), disclaimer && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.footerDisclaimer,
+      "data-test-id": constants_1.TEST_IDS.disclaimer,
+      children: disclaimer
+    })]
+  }));
+}

package/dist/cjs/helperComponents/Footer/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Footer"), exports);

package/dist/cjs/helperComponents/Header/Header.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalHeader = ModalHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const icon_predefined_1 = require("@snack-uikit/icon-predefined");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const typography_1 = require("@snack-uikit/typography");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const utils_2 = require("../../utils");
+const styles_module_scss_1 = __importDefault({});
+function ModalHeader(_a) {
+  var {
+      title,
+      titleTooltip,
+      subtitle,
+      align = constants_1.CONTENT_ALIGN.Default,
+      picture,
+      className
+    } = _a,
+    rest = __rest(_a, ["title", "titleTooltip", "subtitle", "align", "picture", "className"]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.header, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-test-id": constants_1.TEST_IDS.header,
+    children: [picture && ((0, utils_2.isPictureImage)(picture) ? (0, jsx_runtime_1.jsx)("img", {
+      src: picture.src,
+      alt: picture.alt,
+      className: styles_module_scss_1.default.image,
+      "data-test-id": constants_1.TEST_IDS.image
+    }) : (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.icon,
+      "data-test-id": constants_1.TEST_IDS.icon,
+      children: (0, jsx_runtime_1.jsx)(icon_predefined_1.IconPredefined, {
+        icon: picture,
+        size: 'l'
+      })
+    })), (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.headlineLayout,
+      "data-align": align,
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.headline,
+        children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansHeadlineS, {
+          className: styles_module_scss_1.default.title,
+          "data-test-id": constants_1.TEST_IDS.title,
+          children: title
+        }), titleTooltip && (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, {
+          tip: titleTooltip,
+          size: 's',
+          "data-test-id": constants_1.TEST_IDS.tooltip
+        })]
+      }), subtitle && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, {
+        className: styles_module_scss_1.default.subtitle,
+        "data-test-id": constants_1.TEST_IDS.subtitle,
+        children: subtitle
+      })]
+    })]
+  }));
+}

package/dist/cjs/helperComponents/Header/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Header"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/helperComponents/Header/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});