"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithoutHeader = exports.UncontrolledBehavior = exports.NotFullScreenMobileFixedBottom = exports.NotFullScreenMobile = exports.NodeAsTitle = exports.ModalWithoutBackdrop = exports.ModalWithProgressIndicator = exports.ModalWithDisabledEscapePress = exports.ModalWithBlurBackground = exports.ModalWithAnimationComplete = exports.ModalStandardSmall = exports.ModalStandardMobileScroll = exports.ModalStandardMobile = exports.ModalStandardMedium = exports.ModalStandardLargeWithScroll = exports.ModalStandardLarge = exports.ModalMobileSmallOneButton = exports.ModalMobileSmall = exports.ModalMobileFullscreenWithScrollTwoButtons = exports.ModalMobileFullscreenWithScroll = exports.HideClose = exports.FooterStory = exports.Default = exports.CloseOnBackdropClickStory = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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; }
var ScrollMaker = _styledComponents.default.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;
});
var _default = exports.default = {
  title: 'Molecules / Modal',
  parameters: {
    component: _.Modal
  }
};
var Default = exports.Default = {
  render: function render() {
    var Example = function Example() {
      var _useState = (0, _react.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.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")), _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, _react.default.createElement("a", {
        href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
      }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"))));
    };
    return _react.default.createElement(Example, null);
  }
};
var FooterStory = exports.FooterStory = {
  render: function render() {
    var Example = function Example() {
      var _useState3 = (0, _react.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.default.createElement(_react.default.Fragment, null, _react.default.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.default.createElement(_.Button, {
        variant: "primary",
        onClick: function onClick() {}
      }, "Button"));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        footer: footer
      }, _react.default.createElement(_.FadedScroll, {
        enableMobileFade: true
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")), _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, _react.default.createElement("a", {
        href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
      }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/")))));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'Integration: Modal with a footer and Button'
};
var WithoutHeader = exports.WithoutHeader = {
  render: function render() {
    var Example = function Example() {
      var _useState5 = (0, _react.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.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        open: open
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")), _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, _react.default.createElement("a", {
        href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
      }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"))));
    };
    return _react.default.createElement(Example, null);
  }
};
var UncontrolledBehavior = exports.UncontrolledBehavior = {
  render: function render() {
    var Example = function Example() {
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        title: "Dialog information"
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")), _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, _react.default.createElement("a", {
        href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
      }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"))));
    };
    return _react.default.createElement(Example, null);
  }
};
var HideClose = exports.HideClose = {
  render: function render() {
    var Example = function Example() {
      var _useState7 = (0, _react.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.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        hideClose: hideCloseButton
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(Example, null);
  },
  name: 'Hide Close button'
};
var NodeAsTitle = exports.NodeAsTitle = {
  render: function render() {
    var Title = _react.default.createElement(_.Flexbox, {
      container: true,
      gap: 2,
      alignItems: "center"
    }, _react.default.createElement(_.OldIcon.Bolt, null), _react.default.createElement(_.Typography, {
      type: "title2",
      as: "h2"
    }, "React Node Title"), _react.default.createElement(_.OldIcon.Bolt, null));
    var Example = function Example() {
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        title: Title
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")), _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, _react.default.createElement("a", {
        href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
      }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"))));
    };
    return _react.default.createElement(Example, null);
  }
};
var CloseOnBackdropClickStoryExample = function CloseOnBackdropClickStoryExample() {
  var _useState9 = (0, _react.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.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
    type: "button",
    onClick: onOpen
  }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
    onClose: onClose,
    title: "Dialog information",
    open: open,
    closeOnBackdropClick: true
  }, _react.default.createElement(_.Box, {
    mb: 2
  }, _react.default.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.default.createElement(_.Box, {
    mb: 2
  }, _react.default.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.default.createElement(_.Box, {
    mb: 2
  }, _react.default.createElement(_.Typography, {
    type: "primary",
    as: "p"
  }, "Nielsen/Norman has an excellent article about their usage here")), _react.default.createElement(_.Typography, {
    type: "primary",
    as: "p"
  }, _react.default.createElement("a", {
    href: "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"
  }, "https:// www.nngroup.com/articles/modal-nonmodal-dialog/"))));
};
var CloseOnBackdropClickStory = exports.CloseOnBackdropClickStory = {
  render: function render() {
    return _react.default.createElement(CloseOnBackdropClickStoryExample, null);
  }
};
var NotFullScreenMobile = exports.NotFullScreenMobile = {
  render: function render() {
    var Example = function Example() {
      var _useState11 = (0, _react.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.default.createElement(_.Flexbox, {
        container: true,
        justifyContent: "flex-end"
      }, _react.default.createElement(_.Box, {
        mr: 2
      }, _react.default.createElement(_.Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Cancel")), _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Confirm"));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        footer: footer,
        fullScreenMobile: false
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Resize the window to see the result of setting fullScreenMobile to false."))));
    };
    return _react.default.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
var NotFullScreenMobileFixedBottom = exports.NotFullScreenMobileFixedBottom = {
  render: function render() {
    var Example = function Example() {
      var _useState13 = (0, _react.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.default.createElement(_.Flexbox, {
        container: true,
        justifyContent: "flex-end"
      }, _react.default.createElement(_.Box, {
        mr: 2
      }, _react.default.createElement(_.Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Cancel")), _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Confirm"));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        footer: footer,
        fullScreenMobile: false,
        fixedBottomMobile: true
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Resize the window to see the result of setting fullScreenMobile to false."))));
    };
    return _react.default.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
var ModalStandardSmall = exports.ModalStandardSmall = {
  render: function render() {
    var Example = function Example() {
      var _useState15 = (0, _react.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.default.createElement(_.Flexbox, {
        container: true,
        alignItems: "center",
        justifyContent: "space-between"
      }, _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        alignItems: "center"
      }, _react.default.createElement(_.Box, {
        mr: 2
      }, _react.default.createElement(_.OldIcon.ThinArrow, {
        direction: "left",
        size: 4,
        color: function color(t) {
          return t.color.cta;
        }
      })), _react.default.createElement(_.Typography, {
        type: "primary",
        weight: "bold"
      }, "Back")), _react.default.createElement(_.Flexbox, {
        container: true,
        item: true
      }, _react.default.createElement(_.Box, {
        mr: 2
      }, _react.default.createElement(_.Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Button")), _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Button")));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: false,
        footer: footer
      }, _react.default.createElement(_.Box, null, _react.default.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.default.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'tablet'
    }
  }
};
var ModalStandardMedium = exports.ModalStandardMedium = {
  render: function render() {
    var Example = function Example() {
      var _useState17 = (0, _react.useState)(true),
        _useState18 = _slicedToArray(_useState17, 2),
        open = _useState18[0],
        setOpen = _useState18[1];
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = _react.default.createElement(_.Flexbox, {
        container: true,
        alignItems: "center",
        justifyContent: "space-between"
      }, _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        alignItems: "center"
      }, _react.default.createElement(_.Box, {
        mr: 2
      }, _react.default.createElement(_.OldIcon.ThinArrow, {
        direction: "left",
        size: 4,
        color: function color(t) {
          return t.color.cta;
        }
      })), _react.default.createElement(_.Typography, {
        type: "primary",
        weight: "bold"
      }, "Back")), _react.default.createElement(_.Flexbox, {
        container: true,
        item: true
      }, _react.default.createElement(_.Box, {
        mr: 2
      }, _react.default.createElement(_.Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Button")), _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Button")));
      return _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: false,
        footer: footer
      }, _react.default.createElement(_.Box, null, _react.default.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.default.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'tabletLg'
    }
  }
};
var ModalStandardLarge = exports.ModalStandardLarge = {
  render: function render() {
    var Example = function Example() {
      var _useState19 = (0, _react.useState)(true),
        _useState20 = _slicedToArray(_useState19, 2),
        open = _useState20[0],
        setOpen = _useState20[1];
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = _react.default.createElement(_.Flexbox, {
        container: true,
        alignItems: "center",
        justifyContent: "space-between"
      }, _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        alignItems: "center"
      }, _react.default.createElement(_.Box, {
        mr: 2
      }, _react.default.createElement(_.OldIcon.ThinArrow, {
        direction: "left",
        size: 4,
        color: function color(t) {
          return t.color.cta;
        }
      })), _react.default.createElement(_.Typography, {
        type: "primary",
        weight: "bold"
      }, "Back")), _react.default.createElement(_.Flexbox, {
        container: true,
        item: true
      }, _react.default.createElement(_.Box, {
        mr: 2
      }, _react.default.createElement(_.Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Button")), _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Button")));
      return _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: false,
        footer: footer
      }, _react.default.createElement(_.Box, null, _react.default.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.default.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'desktopLg'
    }
  }
};
var ModalStandardLargeWithScroll = exports.ModalStandardLargeWithScroll = {
  render: function render() {
    var Example = function Example() {
      var _useState21 = (0, _react.useState)(true),
        _useState22 = _slicedToArray(_useState21, 2),
        open = _useState22[0],
        setOpen = _useState22[1];
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = _react.default.createElement(_.Flexbox, {
        container: true,
        alignItems: "center",
        justifyContent: "space-between"
      }, _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        alignItems: "center"
      }, _react.default.createElement(_.Box, {
        mr: 2
      }, _react.default.createElement(_.OldIcon.ThinArrow, {
        direction: "left",
        size: 4,
        color: function color(t) {
          return t.color.cta;
        }
      })), _react.default.createElement(_.Typography, {
        type: "primary",
        weight: "bold"
      }, "Back")), _react.default.createElement(_.Flexbox, {
        container: true,
        item: true
      }, _react.default.createElement(_.Box, {
        mr: 2
      }, _react.default.createElement(_.Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {}
      }, "Button")), _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {}
      }, "Button")));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: function onClick() {}
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: false,
        footer: footer
      }, _react.default.createElement(_.FadedScroll, {
        enableMobileFade: true
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")))));
    };
    return _react.default.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'desktopLgMax90Height'
    }
  }
};
var ModalStandardMobile = exports.ModalStandardMobile = {
  render: function render() {
    var Example = function Example() {
      var _useState23 = (0, _react.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.default.createElement(_.Flexbox, {
        container: true,
        gap: 2
      }, _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, _react.default.createElement(_.Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Cancel")), _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Confirm")));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        footer: footer,
        fullScreenMobile: true
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(Example, null);
  },
  name: 'Modal Standard Mobile, 2 Buttons, Fullscreen',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
var ModalStandardMobileScroll = exports.ModalStandardMobileScroll = {
  render: function render() {
    var Example = function Example() {
      var _useState25 = (0, _react.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.default.createElement(_.Flexbox, {
        container: true
      }, _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Confirm")));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        footer: footer,
        fullScreenMobile: true
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(Example, null);
  },
  name: 'Modal Standard Mobile, 1 Button, Fullscreen',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
var ModalMobileSmall = exports.ModalMobileSmall = {
  render: function render() {
    var Example = function Example() {
      var _useState27 = (0, _react.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.default.createElement(_.Flexbox, {
        container: true,
        gap: 2
      }, _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, _react.default.createElement(_.Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")), _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        footer: footer,
        fullScreenMobile: false
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(Example, null);
  },
  name: 'Modal Standard Mobile, 2 Buttons, Small',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
var ModalMobileSmallOneButton = exports.ModalMobileSmallOneButton = {
  render: function render() {
    var Example = function Example() {
      var _useState29 = (0, _react.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.default.createElement(_.Flexbox, {
        container: true
      }, _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        footer: footer,
        fullScreenMobile: false
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(Example, null);
  },
  name: 'Modal Standard Mobile, 1 Button, Small',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
var ModalMobileFullscreenWithScroll = exports.ModalMobileFullscreenWithScroll = {
  render: function render() {
    var Example = function Example() {
      var _useState31 = (0, _react.useState)(true),
        _useState32 = _slicedToArray(_useState31, 2),
        open = _useState32[0],
        setOpen = _useState32[1];
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = _react.default.createElement(_.Flexbox, {
        container: true,
        gap: 2
      }, _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, _react.default.createElement(_.Button, {
        variant: "secondary",
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")), _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: function onClick() {}
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: true,
        footer: footer
      }, _react.default.createElement(_.FadedScroll, {
        enableMobileFade: true
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(Example, null);
  },
  name: 'Modal Standard Mobile with scroll, Fullscreen',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
var ModalMobileFullscreenWithScrollTwoButtons = exports.ModalMobileFullscreenWithScrollTwoButtons = {
  render: function render() {
    var Example = function Example() {
      var _useState33 = (0, _react.useState)(true),
        _useState34 = _slicedToArray(_useState33, 2),
        open = _useState34[0],
        setOpen = _useState34[1];
      var onClose = function onClose() {
        setOpen(false);
      };
      var footer = _react.default.createElement(_.Flexbox, {
        container: true
      }, _react.default.createElement(_.Flexbox, {
        container: true,
        item: true,
        flex: "1"
      }, _react.default.createElement(_.Button, {
        size: "l",
        onClick: function onClick() {},
        fullWidth: true
      }, "Button")));
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: function onClick() {}
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Header",
        open: open,
        fullScreenMobile: true,
        footer: footer
      }, _react.default.createElement(_.FadedScroll, {
        enableMobileFade: true
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Nielsen/Norman has an excellent article about their usage here")))));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'Modal Standard Mobile With Scroll, One Button, Fullscreen',
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};
var ModalWithAnimationComplete = exports.ModalWithAnimationComplete = {
  render: function render() {
    var Example = function Example() {
      var _useState35 = (0, _react.useState)('initial text'),
        _useState36 = _slicedToArray(_useState35, 2),
        text = _useState36[0],
        setText = _useState36[1];
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        title: "Dialog information",
        onAnimationComplete: function onAnimationComplete() {
          return setText('animation complete text');
        }
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, text))));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'Animation Complete'
};
var ModalWithoutBackdrop = exports.ModalWithoutBackdrop = {
  render: function render() {
    var Example = function Example() {
      var _useState37 = (0, _react.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.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: onOpen
      }, "Open modal"), _react.default.createElement(ScrollMaker, null), _react.default.createElement(_.Modal, {
        onClose: onClose,
        title: "Dialog information",
        open: open,
        showBackdrop: false
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.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.default.createElement(Example, null);
  },
  name: 'Modal without backdrop'
};
var ModalWithDisabledEscapePress = exports.ModalWithDisabledEscapePress = {
  render: function render() {
    return _react.default.createElement(_.Modal, {
      onClose: function onClose() {
        alert('This should never be called when pressing the escape-key');
      },
      title: "Dialog information",
      open: true,
      closeOnEscapePress: false
    }, _react.default.createElement(_.Box, {
      mb: 2
    }, _react.default.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'
};
var ModalWithBlurBackground = exports.ModalWithBlurBackground = {
  render: function render() {
    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Typography, {
      type: "title1"
    }, "BLUR TITLE ONE"), _react.default.createElement(_.Icon.Book32, null), _react.default.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.default.createElement(_.Illustration.AppropriatenessTest375, null), _react.default.createElement(_.Illustration.InvestForLongTerm375, null), _react.default.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.default.createElement(_.Box, {
      mb: 2
    }, _react.default.createElement(_.Typography, {
      type: "primary",
      as: "p"
    }, "This text should be sharp"))));
  },
  name: 'Modal With blur background'
};
var ModalWithProgressIndicator = exports.ModalWithProgressIndicator = {
  render: function render() {
    var Example = function Example() {
      var _useState39 = (0, _react.useState)(false),
        _useState40 = _slicedToArray(_useState39, 2),
        value = _useState40[0],
        setValue = _useState40[1];
      var isMobile = (0, _.useMedia)(function (t) {
        return t.media.lessThan(t.breakpoints.sm);
      });
      return _react.default.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.default.createElement(_.Flexbox, {
        container: true,
        gap: 2,
        direction: isMobile ? 'column' : 'row'
      }, _react.default.createElement(_.Flexbox, {
        item: true,
        width: isMobile ? '100%' : '50%'
      }, _react.default.createElement(_.SelectionCard, {
        border: true,
        horizontal: !!isMobile,
        icon: _react.default.createElement(_.Icon.Book32, null),
        onChange: function onChange() {
          return setValue(!value);
        },
        selected: value,
        text: "This component is controlled",
        title: "Controlled selection card"
      })), _react.default.createElement(_.Flexbox, {
        item: true,
        width: isMobile ? '100%' : '50%'
      }, _react.default.createElement(_.SelectionCard, {
        border: true,
        horizontal: !!isMobile,
        icon: _react.default.createElement(_.Icon.Book32, null),
        onChange: function onChange() {
          return setValue(!value);
        },
        selected: value,
        text: "This component is controlled",
        title: "Controlled selection card"
      }))));
    };
    return _react.default.createElement(Example, null);
  }
};