@helsenorge/designsystem-react 13.0.0-beta.2 → 13.0.0-beta.5

package/components/Modal/Modal.d.ts

@@ -1,62 +0,0 @@
-import { default as React } from 'react';
-export declare enum ModalVariants {
-    normal = "normal",
-    warning = "warning",
-    error = "error",
-    success = "success",
-    image = "image"
-}
-export declare enum ModalSize {
-    large = "large",
-    medium = "medium"
-}
-export interface ModalProps {
-    /** Title of the modal */
-    title: string;
-    /** id of the modal title */
-    titleId?: string;
-    /** Description of the modal. Will not render if the modal has children. */
-    description?: string;
-    /** Optional footer content that can be rendered instead of default CTA(s) */
-    footerContent?: React.ReactNode;
-    /** Changes the visual representation of the modal */
-    variant?: keyof typeof ModalVariants;
-    /** Change width of the modal (default: large) */
-    size?: keyof typeof ModalSize;
-    /** Icon displayed in title */
-    icon?: React.ReactElement;
-    /** Hides the close button */
-    noCloseButton?: boolean;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-    /** Primary button text */
-    primaryButtonText?: string;
-    /** Secondary button text */
-    secondaryButtonText?: string;
-    /** Sets the aria-label of the modal */
-    ariaLabel?: string;
-    /** Sets the aria-labelledby of the modal */
-    ariaLabelledBy?: string;
-    /** Close button aria-label */
-    ariaLabelCloseBtn?: string;
-    /** Alternative component to modal */
-    children?: React.ReactNode;
-    /** Component shown after title */
-    afterTitleChildren?: React.ReactNode;
-    /** Adds custom classes to the element. */
-    className?: string;
-    /** Customize the z-index of the modal */
-    zIndex?: number;
-    /** Function is called when user clicks primary button */
-    onSuccess?: () => void;
-    /** Function is called when user clicks secondary button, clicks escape or outside the modal */
-    onClose?: () => void;
-    /** When enabled the component will be rendered in the bottom of document.body */
-    printable?: boolean;
-    /** If disabled, clicking escape or outside the modal will not close it */
-    disableCloseEvents?: boolean;
-    /** Aria role used for the Modal. Default is dialog */
-    role?: 'dialog' | 'alertdialog';
-}
-declare const Modal: React.FC<ModalProps>;
-export default Modal;

package/components/Modal/index.js

@@ -1,209 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useEffect } from "react";
-import classNames from "classnames";
-import { ZIndex, AnalyticsId, IconSize } from "../../constants.js";
-import { useFocusTrap } from "../../hooks/useFocusTrap.js";
-import { useIsVisible } from "../../hooks/useIsVisible.js";
-import { useReturnFocusOnUnmount } from "../../hooks/useReturnFocusOnUnmount.js";
-import { palette } from "../../theme/palette.js";
-import { getAriaLabelAttributes } from "../../utils/accessibility.js";
-import { disableBodyScroll, enableBodyScroll } from "../../utils/scroll.js";
-import { u as uuid } from "../../uuid.js";
-import { B as Button } from "../../Button.js";
-import { C as Close } from "../../Close.js";
-import { I as Icon } from "../../Icon.js";
-import AlertSignFill from "../Icons/AlertSignFill.js";
-import AlertSignStroke from "../Icons/AlertSignStroke.js";
-import CheckOutline from "../Icons/CheckOutline.js";
-import Portal from "../Portal/index.js";
-import { T as Title } from "../../Title.js";
-import styles from "./styles.module.scss";
-var ModalVariants = /* @__PURE__ */ ((ModalVariants2) => {
-  ModalVariants2["normal"] = "normal";
-  ModalVariants2["warning"] = "warning";
-  ModalVariants2["error"] = "error";
-  ModalVariants2["success"] = "success";
-  ModalVariants2["image"] = "image";
-  return ModalVariants2;
-})(ModalVariants || {});
-var ModalSize = /* @__PURE__ */ ((ModalSize2) => {
-  ModalSize2["large"] = "large";
-  ModalSize2["medium"] = "medium";
-  return ModalSize2;
-})(ModalSize || {});
-const getVariantIcon = (variant) => {
-  if (variant === "error") {
-    return /* @__PURE__ */ jsx(Icon, { size: IconSize.Small, svgIcon: AlertSignFill, color: palette.cherry500 });
-  } else if (variant === "warning") {
-    return /* @__PURE__ */ jsx(Icon, { size: IconSize.Small, svgIcon: AlertSignStroke, color: palette.black });
-  } else if (variant === "success") {
-    return /* @__PURE__ */ jsx(Icon, { size: IconSize.Small, svgIcon: CheckOutline, color: palette.kiwi900 });
-  }
-  return null;
-};
-const getIcon = (variant, icon) => {
-  const variantIcon = getVariantIcon(variant);
-  if (variantIcon) {
-    return /* @__PURE__ */ jsx("div", { className: styles.modal__iconWrapper, children: variantIcon });
-  }
-  if (icon) {
-    return /* @__PURE__ */ jsx("div", { className: styles.modal__iconWrapper, children: React__default.cloneElement(icon, {
-      size: IconSize.Small
-    }) });
-  }
-  return null;
-};
-const Modal = (props) => {
-  var _a, _b;
-  const {
-    footerContent,
-    variant = "normal",
-    primaryButtonText = "OK",
-    titleId = uuid(),
-    className = "",
-    size = "large",
-    zIndex = ZIndex.OverlayScreen,
-    role = "dialog"
-  } = props;
-  const topContent = React__default.useRef(null);
-  const modalContentRef = React__default.useRef(null);
-  const dialogRef = React__default.useRef(null);
-  useFocusTrap(dialogRef, true);
-  const topContentVisible = useIsVisible(topContent);
-  const bottomContent = React__default.useRef(null);
-  const bottomContentVisible = useIsVisible(bottomContent);
-  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;
-  useReturnFocusOnUnmount(dialogRef);
-  function handleKeyboardEvent(e) {
-    if (e.key === "Escape" && props.onClose) {
-      e.stopPropagation();
-      props.onClose();
-    }
-  }
-  function handleClickEvent(event) {
-    if (event.target && overlayRef.current === event.target && props.onClose) {
-      event.stopPropagation();
-      props.onClose();
-    }
-  }
-  const imageView = variant === "image";
-  const overlayRef = React__default.useRef(null);
-  const showActions = props.secondaryButtonText && ((_a = props.secondaryButtonText) == null ? void 0 : _a.length) > 0 || props.onSuccess || footerContent;
-  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });
-  useEffect(() => {
-    const overlayElement = overlayRef.current;
-    disableBodyScroll();
-    if (!props.disableCloseEvents && overlayElement) {
-      overlayElement.addEventListener("keydown", handleKeyboardEvent);
-      overlayElement.addEventListener("click", handleClickEvent);
-    }
-    return () => {
-      enableBodyScroll();
-      if (!props.disableCloseEvents && overlayElement) {
-        overlayElement.removeEventListener("keydown", handleKeyboardEvent);
-        overlayElement.removeEventListener("click", handleClickEvent);
-      }
-    };
-  }, [props.disableCloseEvents]);
-  useEffect(() => {
-    var _a2;
-    (_a2 = dialogRef.current) == null ? void 0 : _a2.focus();
-  }, []);
-  const dialogClasses = classNames(
-    className,
-    styles.modal,
-    variant && styles[`modal--${variant}`],
-    size && styles[`modal--${size}`],
-    contentIsScrollable && !showActions && styles["modal--no-actions"]
-  );
-  const titleClasses = classNames({
-    [styles["modal__title--error"]]: variant === "error",
-    [styles["modal__title--success"]]: variant === "success"
-    /* success */
-  });
-  const Component = /* @__PURE__ */ jsx("div", { "data-testid": "dialog-container", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: overlayRef,
-      className: styles["modal-overlay"],
-      "data-testid": props.testId,
-      "data-analyticsid": AnalyticsId.Modal,
-      style: { zIndex },
-      children: /* @__PURE__ */ jsx("div", { className: styles.align, children: /* @__PURE__ */ jsxs("div", { className: dialogClasses, role, "aria-modal": "true", tabIndex: -1, ...ariaLabelAttributes, ref: dialogRef, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classNames(styles["modal__shadow"], styles["modal__shadow--top"], {
-              [styles["modal__shadow--show"]]: !topContentVisible && contentIsScrollable
-            })
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: classNames(styles.modal__contentWrapper, {
-              [styles["modal__contentWrapper--image"]]: imageView
-            }),
-            tabIndex: contentIsScrollable ? 0 : void 0,
-            role: contentIsScrollable ? "region" : void 0,
-            ...contentIsScrollable ? ariaLabelAttributes : {},
-            ref: modalContentRef,
-            children: [
-              !props.noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.modal__closeWrapper, children: /* @__PURE__ */ jsx("div", { className: classNames(styles.modal__closeWrapper__close), children: /* @__PURE__ */ jsx(Close, { onClick: props.onClose, ariaLabel: props.ariaLabelCloseBtn }) }) }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: classNames(size && styles[`modal__contentWrapper__scroll--${size}`], {
-                    [styles["modal__contentWrapper__scroll--image"]]: imageView
-                  }),
-                  children: [
-                    /* @__PURE__ */ jsx("div", { ref: topContent }),
-                    /* @__PURE__ */ jsxs("div", { className: styles.modal__contentWrapper__title, children: [
-                      getIcon(variant, props.icon),
-                      /* @__PURE__ */ jsx(Title, { id: ariaLabelAttributes == null ? void 0 : ariaLabelAttributes["aria-labelledby"], htmlMarkup: "h3", appearance: "title3", className: titleClasses, children: props.title }),
-                      props.afterTitleChildren && /* @__PURE__ */ jsx("div", { className: styles["modal__afterTitleChildren"], children: props.afterTitleChildren })
-                    ] }),
-                    imageView && /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("div", { className: styles["modal__contentWrapper__imageWrapper"], children: props.children }),
-                      /* @__PURE__ */ jsx("span", { className: styles["modal__contentWrapper__imageDescription"], children: props.description })
-                    ] }),
-                    !imageView && props.children && /* @__PURE__ */ jsx("div", { children: props.children }),
-                    !imageView && !props.children && /* @__PURE__ */ jsx("p", { className: styles.modal__description, children: props.description }),
-                    /* @__PURE__ */ jsx("div", { ref: bottomContent })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classNames(styles["modal__shadow"], styles["modal__shadow--bottom"], {
-              [styles["modal__shadow--show"]]: !bottomContentVisible && contentIsScrollable
-            })
-          }
-        ),
-        showActions && /* @__PURE__ */ jsxs("div", { className: classNames(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]), children: [
-          props.onSuccess && primaryButtonText && /* @__PURE__ */ jsx(Button, { onClick: props.onSuccess, children: primaryButtonText }),
-          props.secondaryButtonText && ((_b = props.secondaryButtonText) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Button, { variant: "borderless", onClick: props.onClose, children: props.secondaryButtonText }),
-          footerContent
-        ] })
-      ] }) })
-    }
-  ) });
-  if (props.printable) {
-    const printModal = "print-modal";
-    return /* @__PURE__ */ jsxs(Portal, { className: printModal, testId: "print-modal", children: [
-      /* @__PURE__ */ jsx("style", { media: "print", children: `body > *:not(.${printModal}) {display: none;}` }),
-      Component
-    ] });
-  }
-  return Component;
-};
-export {
-  ModalSize,
-  ModalVariants,
-  Modal as default
-};
-//# sourceMappingURL=index.js.map

package/components/Modal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","React","_a","cn"],"mappings":"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"}

package/components/Modal/styles.module.scss

@@ -1,297 +0,0 @@
-@use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
-
-.modal-overlay {
-  background: var(--color-shadow-pagemask);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  inset: 0;
-  container-type: inline-size;
-
-  @media print {
-    position: absolute;
-  }
-}
-
-.align {
-  position: absolute;
-
-  @media print {
-    position: initial;
-    left: 0;
-    top: 0;
-    transform: none;
-  }
-}
-
-.modal {
-  pointer-events: auto;
-  box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
-  background-color: palette.$white;
-  animation: open 200ms 1;
-  outline: none;
-
-  &__title {
-    &--error {
-      color: palette.$cherry600;
-    }
-
-    &--success {
-      color: palette.$kiwi900;
-    }
-  }
-
-  &__iconWrapper {
-    padding-right: spacers.getSpacer(xs);
-  }
-
-  &__afterTitleChildren {
-    padding-left: spacers.getSpacer(xs);
-  }
-
-  p {
-    font-size: 1.125rem;
-  }
-
-  &--normal {
-    background-color: palette.$white;
-  }
-
-  &--error {
-    background-color: palette.$cherry100;
-  }
-
-  &--warning {
-    background-color: palette.$banana50;
-  }
-
-  &--success {
-    background-color: palette.$kiwi50;
-  }
-
-  &--large {
-    width: calc(100vw - 0.75rem);
-    padding-bottom: spacers.getSpacer(l);
-
-    @media (max-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-      p {
-        font-size: 1.125rem;
-      }
-    }
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding-bottom: spacers.getSpacer(xl);
-      width: 612px;
-    }
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-      width: 696px;
-    }
-
-    @include breakpoints.tiny-screens-media-query {
-      padding-bottom: spacers.getSpacer(2xs);
-    }
-  }
-
-  &--medium {
-    width: calc(100vw - 0.75rem);
-    padding-bottom: spacers.getSpacer(m);
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      width: 335px;
-    }
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
-      width: 515px;
-    }
-  }
-
-  &--no-actions {
-    padding-bottom: 0;
-  }
-
-  &--image {
-    padding: 0;
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      max-height: calc(100vh - 24px);
-      max-width: calc(100vw - 24px);
-      width: 100%;
-    }
-  }
-
-  &__shadow {
-    width: 100%;
-    height: 16px;
-    position: absolute;
-    transition: opacity 0.5s;
-    opacity: 0;
-    z-index: 2;
-    pointer-events: none;
-  }
-
-  &__shadow--top {
-    // box-shadow: 0 3px 8px 4px grey;
-    background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
-  }
-
-  &__shadow--bottom {
-    // box-shadow: 0 -3px 8px 4px grey;
-    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
-    margin-top: -16px;
-  }
-
-  &__shadow--show {
-    opacity: 1;
-  }
-
-  &__closeWrapper {
-    position: relative;
-    width: 100%;
-
-    @media print {
-      display: none;
-    }
-
-    &__close {
-      position: absolute;
-      right: spacers.getSpacer(3xs);
-      top: spacers.getSpacer(3xs);
-    }
-  }
-
-  &__contentWrapper {
-    max-width: 100%;
-    max-height: calc(100vh - 10rem);
-    overflow: auto;
-    overflow-x: hidden;
-
-    &:focus-visible {
-      outline: 1px solid palette.$black;
-      outline-offset: -1px;
-    }
-
-    @media print {
-      overflow: hidden;
-      max-height: none;
-    }
-
-    @include breakpoints.tiny-screens-media-query {
-      max-height: calc(100dvh - 4rem);
-    }
-
-    &--image {
-      max-height: 100vh;
-    }
-
-    &__scroll {
-      &--large {
-        padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
-
-        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-          padding: spacers.getSpacer(xl) spacers.getSpacer(xl) spacers.getSpacer(2xs);
-        }
-
-        @include breakpoints.tiny-screens-media-query {
-          padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(4xs);
-        }
-      }
-
-      &--medium {
-        padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(2xs);
-
-        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-          padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
-        }
-
-        @include breakpoints.tiny-screens-media-query {
-          padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
-        }
-      }
-
-      &--large#{&}--image {
-        padding: spacers.getSpacer(xl) spacers.getSpacer(2xs) spacers.getSpacer(l);
-      }
-    }
-
-    &__title {
-      display: flex;
-      align-items: center;
-
-      div {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-
-    &__imageWrapper {
-      line-height: 0;
-      text-align: center;
-
-      img {
-        max-height: calc(100vh - 185px);
-        max-width: calc(100vw - 57px);
-      }
-    }
-
-    &__imageDescription {
-      font-size: font-settings.$font-size-xs;
-      padding-top: spacers.getSpacer(s);
-      display: block;
-    }
-  }
-
-  &__description {
-    white-space: pre-line;
-  }
-
-  &__call-to-action {
-    display: flex;
-    gap: var(--core-space-m);
-
-    &--large {
-      padding: spacers.getSpacer(l) spacers.getSpacer(m) 0;
-
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: spacers.getSpacer(l) spacers.getSpacer(xl) 0;
-      }
-
-      @include breakpoints.tiny-screens-media-query {
-        padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
-      }
-    }
-
-    &--medium {
-      padding: spacers.getSpacer(m) spacers.getSpacer(m) 0;
-
-      @include breakpoints.tiny-screens-media-query {
-        padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
-      }
-    }
-  }
-
-  /* animation on open */
-  @keyframes open {
-    0% {
-      opacity: 0;
-      transform: scale(0.9);
-    }
-
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @media print {
-    width: 100%;
-  }
-}

package/components/Modal/styles.module.scss.d.ts

@@ -1,42 +0,0 @@
-export type Styles = {
-  align: string;
-  modal: string;
-  modal__afterTitleChildren: string;
-  'modal__call-to-action': string;
-  'modal__call-to-action--large': string;
-  'modal__call-to-action--medium': string;
-  modal__closeWrapper: string;
-  modal__closeWrapper__close: string;
-  modal__contentWrapper: string;
-  modal__contentWrapper__imageDescription: string;
-  modal__contentWrapper__imageWrapper: string;
-  'modal__contentWrapper__scroll--image': string;
-  'modal__contentWrapper__scroll--large': string;
-  'modal__contentWrapper__scroll--medium': string;
-  modal__contentWrapper__title: string;
-  'modal__contentWrapper--image': string;
-  modal__description: string;
-  modal__iconWrapper: string;
-  modal__shadow: string;
-  'modal__shadow--bottom': string;
-  'modal__shadow--show': string;
-  'modal__shadow--top': string;
-  'modal__title--error': string;
-  'modal__title--success': string;
-  'modal--error': string;
-  'modal--image': string;
-  'modal--large': string;
-  'modal--medium': string;
-  'modal--no-actions': string;
-  'modal--normal': string;
-  'modal--success': string;
-  'modal--warning': string;
-  'modal-overlay': string;
-  open: string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;