function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState } from 'react';
import styled from 'styled-components';
import { Box, Button, FadedScroll, Flexbox, Modal, Typography, SelectionCard, Icon, useMedia, Illustration } from '../..';
var ScrollMaker = styled.div.withConfig({
  displayName: "Modalstories__ScrollMaker",
  componentId: "sc-70fm6s-0"
})(["background-image:linear-gradient( ", ",", " );position:absolute;right:0;top:0;width:20px;height:200vh;"], function (p) {
  return p.theme.color.positive;
}, function (p) {
  return p.theme.color.negative;
});
export default {
  title: 'Molecules / Modal',
  parameters: {
    component: Modal
  }
};
export var Default = {
  render: function render() {
    var Example = function Example() {
      var _useState = useState(true),
        _useState2 = _slicedToArray(_useState, 2),
        open = _useState2[0],
        setOpen = _useState2[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")), React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, React.createElement("a", {
        href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
      }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"))));
    };
    return React.createElement(Example, null);
  }
};
export var FooterStory = {
  render: function render() {
    var Example = function Example() {
      var _useState3 = useState(true),
        _useState4 = _slicedToArray(_useState3, 2),
        open = _useState4[0],
        setOpen = _useState4[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(React.Fragment, null, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "This is a footer which is a ReactNode, which could e.g. contain a button or only text"), React.createElement(Button, {
        variant: "primary",
        onClick: function onClick() {}
      }, "Button"));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        footer: footer
      }, React.createElement(FadedScroll, {
        enableMobileFade: true
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding. That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")), React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, React.createElement("a", {
        href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
      }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/")))));
    };
    return React.createElement(Example, null);
  },
  name: 'Integration: Modal with a footer and Button'
};
export var WithoutHeader = {
  render: function render() {
    var Example = function Example() {
      var _useState5 = useState(true),
        _useState6 = _slicedToArray(_useState5, 2),
        open = _useState6[0],
        setOpen = _useState6[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        open: open
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")), React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, React.createElement("a", {
        href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
      }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"))));
    };
    return React.createElement(Example, null);
  }
};
export var UncontrolledBehavior = {
  render: function render() {
    var Example = function Example() {
      return React.createElement(React.Fragment, null, React.createElement(ScrollMaker, null), React.createElement(Modal, {
        title: "Dialog information"
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")), React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, React.createElement("a", {
        href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
      }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"))));
    };
    return React.createElement(Example, null);
  }
};
export var HideClose = {
  render: function render() {
    var Example = function Example() {
      var _useState7 = useState(true),
        _useState8 = _slicedToArray(_useState7, 2),
        open = _useState8[0],
        setOpen = _useState8[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var hideCloseButton = true;
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        hideClose: hideCloseButton
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "The close button in the upper right corner is now hidden because the prop hideClose is true."))));
    };
    return React.createElement(Example, null);
  },
  name: 'Hide Close button'
};
export var NodeAsTitle = {
  render: function render() {
    var Title = React.createElement(Flexbox, {
      container: true,
      gap: 2,
      alignItems: "center"
    }, React.createElement(Icon.Bolt16, null), React.createElement(Typography, {
      type: "title2",
      as: "h2"
    }, "React Node Title"), React.createElement(Icon.Bolt16, null));
    var Example = function Example() {
      return React.createElement(React.Fragment, null, React.createElement(ScrollMaker, null), React.createElement(Modal, {
        title: Title
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")), React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, React.createElement("a", {
        href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
      }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"))));
    };
    return React.createElement(Example, null);
  }
};
var CloseOnBackdropClickStoryExample = function CloseOnBackdropClickStoryExample() {
  var _useState9 = useState(true),
    _useState10 = _slicedToArray(_useState9, 2),
    open = _useState10[0],
    setOpen = _useState10[1];
  var onOpen = function onOpen() {
    setOpen(true);
  };
  var onClose = function onClose() {
    setOpen(false);
  };
  return React.createElement(React.Fragment, null, React.createElement("button", {
    type: "button",
    onClick: onOpen
  }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
    onClose: onClose,
    title: "Dialog information",
    open: open,
    closeOnBackdropClick: true
  }, React.createElement(Box, {
    mb: 2
  }, React.createElement(Typography, {
    type: "primary",
    as: "p"
  }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
    mb: 2
  }, React.createElement(Typography, {
    type: "primary",
    as: "p"
  }, "That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding.")), React.createElement(Box, {
    mb: 2
  }, React.createElement(Typography, {
    type: "primary",
    as: "p"
  }, "Nielsen/Norman has an excellent article about their usage here")), React.createElement(Typography, {
    type: "primary",
    as: "p"
  }, React.createElement("a", {
    href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
  }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"))));
};
export var CloseOnBackdropClickStory = {
  render: function render() {
    return React.createElement(CloseOnBackdropClickStoryExample, null);
  }
};
export var NotFullScreenMobile = {
  render: function render() {
    var Example = function Example() {
      var _useState11 = useState(true),
        _useState12 = _slicedToArray(_useState11, 2),
        open = _useState12[0],
        setOpen = _useState12[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true,
        justifyContent: "flex-end"
      }, React.createElement(Box, {
        mr: 2
      }, React.createElement(Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Cancel")), React.createElement(Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Confirm"));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        footer: footer,
        fullScreenMobile: false
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Resize the window to see the result of setting fullScreenMobile to false."))));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
export var NotFullScreenMobileFixedBottom = {
  render: function render() {
    var Example = function Example() {
      var _useState13 = useState(true),
        _useState14 = _slicedToArray(_useState13, 2),
        open = _useState14[0],
        setOpen = _useState14[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true,
        justifyContent: "flex-end"
      }, React.createElement(Box, {
        mr: 2
      }, React.createElement(Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Cancel")), React.createElement(Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Confirm"));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        footer: footer,
        fullScreenMobile: false,
        fixedBottomMobile: true
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Resize the window to see the result of setting fullScreenMobile to false."))));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
export var ModalStandardSmall = {
  render: function render() {
    var Example = function Example() {
      var _useState15 = useState(true),
        _useState16 = _slicedToArray(_useState15, 2),
        open = _useState16[0],
        setOpen = _useState16[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true,
        alignItems: "center",
        justifyContent: "space-between"
      }, React.createElement(Flexbox, {
        container: true,
        item: true,
        alignItems: "center"
      }, React.createElement(Box, {
        mr: 2
      }, React.createElement(Icon.ArrowLeft16, {
        color: function color(t) {
          return t.color.cta;
        }
      })), React.createElement(Typography, {
        type: "primary",
        weight: "bold"
      }, "Back")), React.createElement(Flexbox, {
        container: true,
        item: true
      }, React.createElement(Box, {
        mr: 2
      }, React.createElement(Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Button")), React.createElement(Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Button")));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: false,
        footer: footer
      }, React.createElement(Box, null, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of de Finibus Bonorum et Malorum (The Extremes of Good and"))));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'tablet'
    }
  }
};
export var ModalStandardMedium = {
  render: function render() {
    var Example = function Example() {
      var _useState17 = useState(true),
        _useState18 = _slicedToArray(_useState17, 2),
        open = _useState18[0],
        setOpen = _useState18[1];
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true,
        alignItems: "center",
        justifyContent: "space-between"
      }, React.createElement(Flexbox, {
        container: true,
        item: true,
        alignItems: "center"
      }, React.createElement(Box, {
        mr: 2
      }, React.createElement(Icon.ArrowLeft16, {
        color: function color(t) {
          return t.color.cta;
        }
      })), React.createElement(Typography, {
        type: "primary",
        weight: "bold"
      }, "Back")), React.createElement(Flexbox, {
        container: true,
        item: true
      }, React.createElement(Box, {
        mr: 2
      }, React.createElement(Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Button")), React.createElement(Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Button")));
      return React.createElement(Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: false,
        footer: footer
      }, React.createElement(Box, null, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of de Finibus Bonorum et Malorum (The Extremes of Good and")));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'tabletLg'
    }
  }
};
export var ModalStandardLarge = {
  render: function render() {
    var Example = function Example() {
      var _useState19 = useState(true),
        _useState20 = _slicedToArray(_useState19, 2),
        open = _useState20[0],
        setOpen = _useState20[1];
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true,
        alignItems: "center",
        justifyContent: "space-between"
      }, React.createElement(Flexbox, {
        container: true,
        item: true,
        alignItems: "center"
      }, React.createElement(Box, {
        mr: 2
      }, React.createElement(Icon.ArrowLeft16, {
        color: function color(t) {
          return t.color.cta;
        }
      })), React.createElement(Typography, {
        type: "primary",
        weight: "bold"
      }, "Back")), React.createElement(Flexbox, {
        container: true,
        item: true
      }, React.createElement(Box, {
        mr: 2
      }, React.createElement(Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Button")), React.createElement(Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Button")));
      return React.createElement(Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: false,
        footer: footer
      }, React.createElement(Box, null, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of de Finibus Bonorum et Malorum (The Extremes of Good and")));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'desktopLg'
    }
  }
};
export var ModalStandardLargeWithScroll = {
  render: function render() {
    var Example = function Example() {
      var _useState21 = useState(true),
        _useState22 = _slicedToArray(_useState21, 2),
        open = _useState22[0],
        setOpen = _useState22[1];
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true,
        alignItems: "center",
        justifyContent: "space-between"
      }, React.createElement(Flexbox, {
        container: true,
        item: true,
        alignItems: "center"
      }, React.createElement(Box, {
        mr: 2
      }, React.createElement(Icon.ArrowLeft16, {
        color: function color(t) {
          return t.color.cta;
        }
      })), React.createElement(Typography, {
        type: "primary",
        weight: "bold"
      }, "Back")), React.createElement(Flexbox, {
        container: true,
        item: true
      }, React.createElement(Box, {
        mr: 2
      }, React.createElement(Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Button")), React.createElement(Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Button")));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: function onClick() {}
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: false,
        footer: footer
      }, React.createElement(FadedScroll, {
        enableMobileFade: true
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding. That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")))));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'desktopLgMax90Height'
    }
  }
};
export var ModalStandardMobile = {
  render: function render() {
    var Example = function Example() {
      var _useState23 = useState(true),
        _useState24 = _slicedToArray(_useState23, 2),
        open = _useState24[0],
        setOpen = _useState24[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true,
        gap: 2
      }, React.createElement(Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, React.createElement(Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Cancel")), React.createElement(Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, React.createElement(Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Confirm")));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        footer: footer,
        fullScreenMobile: true
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience. Modals should be used with care as they are"))));
    };
    return React.createElement(Example, null);
  },
  name: 'Modal Standard Mobile, 2 Buttons, Fullscreen',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
export var ModalStandardMobileScroll = {
  render: function render() {
    var Example = function Example() {
      var _useState25 = useState(true),
        _useState26 = _slicedToArray(_useState25, 2),
        open = _useState26[0],
        setOpen = _useState26[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true
      }, React.createElement(Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, React.createElement(Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Confirm")));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        footer: footer,
        fullScreenMobile: true
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience. Modals should be used with care as they are"))));
    };
    return React.createElement(Example, null);
  },
  name: 'Modal Standard Mobile, 1 Button, Fullscreen',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
export var ModalMobileSmall = {
  render: function render() {
    var Example = function Example() {
      var _useState27 = useState(true),
        _useState28 = _slicedToArray(_useState27, 2),
        open = _useState28[0],
        setOpen = _useState28[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true,
        gap: 2
      }, React.createElement(Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, React.createElement(Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")), React.createElement(Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, React.createElement(Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        footer: footer,
        fullScreenMobile: false
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable"))));
    };
    return React.createElement(Example, null);
  },
  name: 'Modal Standard Mobile, 2 Buttons, Small',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
export var ModalMobileSmallOneButton = {
  render: function render() {
    var Example = function Example() {
      var _useState29 = useState(true),
        _useState30 = _slicedToArray(_useState29, 2),
        open = _useState30[0],
        setOpen = _useState30[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true
      }, React.createElement(Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, React.createElement(Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        footer: footer,
        fullScreenMobile: false
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable"))));
    };
    return React.createElement(Example, null);
  },
  name: 'Modal Standard Mobile, 1 Button, Small',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
export var ModalMobileFullscreenWithScroll = {
  render: function render() {
    var Example = function Example() {
      var _useState31 = useState(true),
        _useState32 = _slicedToArray(_useState31, 2),
        open = _useState32[0],
        setOpen = _useState32[1];
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true,
        gap: 2
      }, React.createElement(Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, React.createElement(Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")), React.createElement(Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, React.createElement(Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: function onClick() {}
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: true,
        footer: footer
      }, React.createElement(FadedScroll, {
        enableMobileFade: true
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding. That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals")))));
    };
    return React.createElement(Example, null);
  },
  name: 'Modal Standard Mobile with scroll, Fullscreen',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
export var ModalMobileFullscreenWithScrollTwoButtons = {
  render: function render() {
    var Example = function Example() {
      var _useState33 = useState(true),
        _useState34 = _slicedToArray(_useState33, 2),
        open = _useState34[0],
        setOpen = _useState34[1];
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = React.createElement(Flexbox, {
        container: true
      }, React.createElement(Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, React.createElement(Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")));
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: function onClick() {}
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: true,
        footer: footer
      }, React.createElement(FadedScroll, {
        enableMobileFade: true
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding. That being said they are a good tool if you need to grab the users attention, either to communicate something very important or make them take an action before proceeding.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal.")), React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")))));
    };
    return React.createElement(Example, null);
  },
  name: 'Modal Standard Mobile With Scroll, One Button, Fullscreen',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
export var ModalWithAnimationComplete = {
  render: function render() {
    var Example = function Example() {
      var _useState35 = useState('initial text'),
        _useState36 = _slicedToArray(_useState35, 2),
        text = _useState36[0],
        setText = _useState36[1];
      return React.createElement(React.Fragment, null, React.createElement(ScrollMaker, null), React.createElement(Modal, {
        title: "Dialog information",
        onAnimationComplete: function onAnimationComplete() {
          return setText('animation complete text');
        }
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, text))));
    };
    return React.createElement(Example, null);
  },
  name: 'Animation Complete'
};
export var ModalWithoutBackdrop = {
  render: function render() {
    var Example = function Example() {
      var _useState37 = useState(true),
        _useState38 = _slicedToArray(_useState37, 2),
        open = _useState38[0],
        setOpen = _useState38[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), React.createElement(ScrollMaker, null), React.createElement(Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        showBackdrop: false
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal."))));
    };
    return React.createElement(Example, null);
  },
  name: 'Modal without backdrop'
};
export var ModalWithDisabledEscapePress = {
  render: function render() {
    return React.createElement(Modal, {
      onClose: function onClose() {
        alert('This should never be called when pressing the escape-key');
      },
      title: "Dialog information",
      open: true,
      closeOnEscapePress: false
    }, React.createElement(Box, {
      mb: 2
    }, React.createElement(Typography, {
      type: "primary",
      as: "p"
    }, "Pressing the escape-key will usually call the modal's onClose function. The prop closeOnEscapePress=false will prevent this functionality.")));
  },
  name: 'Modal with disabled escape-key press'
};
export var ModalWithBlurBackground = {
  render: function render() {
    return React.createElement(React.Fragment, null, React.createElement(Typography, {
      type: "title1"
    }, "BLUR TITLE ONE"), React.createElement(Icon.Book32, null), React.createElement(Typography, {
      type: "primary",
      as: "p"
    }, "Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site). Always consider if you can solve a problem in another way first before you choose to go with the modal. Modals should be used with care as they are quite intrusive on the user experience and demand immediate attention (while also blocking all other actions on the site)."), React.createElement(Illustration.AppropriatenessTest375, null), React.createElement(Illustration.InvestForLongTerm375, null), React.createElement(Modal, {
      onClose: function onClose() {
        alert('This should never be called when pressing the escape-key');
      },
      title: "Dialog information",
      open: true,
      closeOnEscapePress: false,
      blurBackdrop: true
    }, React.createElement(Box, {
      mb: 2
    }, React.createElement(Typography, {
      type: "primary",
      as: "p"
    }, "This text should be sharp"))));
  },
  name: 'Modal With blur background'
};
export var ModalWithProgressIndicator = {
  render: function render() {
    var Example = function Example() {
      var _useState39 = useState(false),
        _useState40 = _slicedToArray(_useState39, 2),
        value = _useState40[0],
        setValue = _useState40[1];
      var isMobile = useMedia(function (t) {
        return t.media.lessThan(t.breakpoints.sm);
      });
      return React.createElement(Modal, {
        onClose: function onClose() {
          alert('This should never be called when pressing the escape-key');
        },
        title: "Modal with progress indicator ",
        open: true,
        progressIndicator: {
          numberOfSteps: 3,
          currentStep: 2,
          borderBottomMobile: false
        },
        progressIndicatorDescription: "Find investments",
        fixedBottomMobile: true,
        fullScreenMobile: false
      }, React.createElement(Flexbox, {
        container: true,
        gap: 2,
        direction: isMobile ? 'column' : 'row'
      }, React.createElement(Flexbox, {
        item: true,
        width: isMobile ? '100%' : '50%'
      }, React.createElement(SelectionCard, {
        border: true,
        horizontal: !!isMobile,
        icon: React.createElement(Icon.Book32, null),
        onChange: function onChange() {
          return setValue(!value);
        },
        selected: value,
        text: "This component is controlled",
        title: "Controlled selection card"
      })), React.createElement(Flexbox, {
        item: true,
        width: isMobile ? '100%' : '50%'
      }, React.createElement(SelectionCard, {
        border: true,
        horizontal: !!isMobile,
        icon: React.createElement(Icon.Book32, null),
        onChange: function onChange() {
          return setValue(!value);
        },
        selected: value,
        text: "This component is controlled",
        title: "Controlled selection card"
      }))));
    };
    return React.createElement(Example, null);
  }
};