"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.VaryingHeightVariant = exports.SmallerVariant = exports.NoBackDrop = exports.LargerVariantWithSwipeHandle = exports.LargerVariantAboveFlexTable = exports.LargerVariant = exports.InvertedColors = exports.HeightStringPx = exports.FullscreenMobile = exports.Default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ = require("../..");
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 _default = exports.default = {
  title: 'Molecules / BottomSheet',
  parameters: {
    component: _.BottomSheet
  }
};
var AccordionComponent = function AccordionComponent() {
  return _react.default.createElement(_.Accordion, null, _react.default.createElement(_.AccordionItem, {
    title: "Accordion 1",
    withChevron: true,
    disableFocusOutline: true
  }, _react.default.createElement(_.Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.AccordionItem, {
    title: "Accordion 2",
    withChevron: true,
    disableFocusOutline: true
  }, _react.default.createElement(_.Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.AccordionItem, {
    title: "Accordion 3",
    withChevron: true,
    disableFocusOutline: true
  }, _react.default.createElement(_.Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.AccordionItem, {
    title: "Accordion 4",
    withChevron: true,
    disableFocusOutline: true
  }, _react.default.createElement(_.Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.AccordionItem, {
    title: "Accordion 5",
    withChevron: true,
    disableFocusOutline: true
  }, _react.default.createElement(_.Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.AccordionItem, {
    title: "Accordion 6",
    withChevron: true,
    disableFocusOutline: true
  }, _react.default.createElement(_.Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")));
};
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
      }, "Show BottomSheet [not fullscreen]"), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.BottomSheet, {
        closeOnClickOutside: true,
        onClose: onClose,
        open: open,
        title: _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(33dvh);"
      }, _react.default.createElement(AccordionComponent, null), _react.default.createElement(AccordionComponent, null)))));
    };
    return _react.default.createElement(Example, null);
  }
};
var InvertedColors = exports.InvertedColors = {
  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);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [not fullscreen]"), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.BottomSheet, {
        closeOnClickOutside: true,
        invertedColors: true,
        onClose: onClose,
        open: open,
        title: _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold",
          color: "inherit"
        }, "Lorem ipsum")
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p",
        color: "inherit"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.")), _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p",
        color: "inherit"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris."))));
    };
    return _react.default.createElement(Example, null);
  }
};
var SmallerVariant = exports.SmallerVariant = {
  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
      }, "Show BottomSheet [not fullscreen]"), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.BottomSheet, {
        closeOnClickOutside: true,
        onClose: onClose,
        open: open,
        title: _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet."))));
    };
    return _react.default.createElement(Example, null);
  }
};
var HeightStringPx = exports.HeightStringPx = {
  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);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [not fullscreen]"), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.BottomSheet, {
        closeOnClickOutside: true,
        onClose: onClose,
        open: open,
        height: "200px",
        title: _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet."))));
    };
    return _react.default.createElement(Example, null);
  }
};
var VaryingHeightVariant = exports.VaryingHeightVariant = {
  render: function render() {
    var Example = function Example() {
      var _useState9 = (0, _react.useState)(true),
        _useState10 = _slicedToArray(_useState9, 2),
        open = _useState10[0],
        setOpen = _useState10[1];
      var _useState11 = (0, _react.useState)(600),
        _useState12 = _slicedToArray(_useState11, 2),
        height = _useState12[0],
        setHeight = _useState12[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      (0, _react.useEffect)(function () {
        var timeout = setTimeout(function () {
          setHeight(Math.random() * 500 + 300);
        }, 5000);
        return function () {
          clearTimeout(timeout);
        };
      }, [height]);
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [not fullscreen]"), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.BottomSheet, {
        closeOnClickOutside: true,
        onClose: onClose,
        open: open,
        height: height,
        title: _react.default.createElement(_.Flexbox, {
          container: true,
          direction: "column"
        }, _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters"), _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Extra row"))
      }, _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet."))));
    };
    return _react.default.createElement(Example, null);
  }
};
var LargerVariant = exports.LargerVariant = {
  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);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [not fullscreen]"), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.BottomSheet, {
        closeOnClickOutside: true,
        height: 600,
        onClose: onClose,
        open: open,
        title: _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Bottomsheet with a lot of content")
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(36dvh);"
      }, _react.default.createElement(AccordionComponent, null), _react.default.createElement(AccordionComponent, null)))));
    };
    return _react.default.createElement(Example, null);
  }
};
var LargerVariantWithSwipeHandle = exports.LargerVariantWithSwipeHandle = {
  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);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [not fullscreen]"), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.BottomSheet, {
        closeOnClickOutside: true,
        height: 600,
        onClose: onClose,
        open: open,
        title: _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Bottomsheet with a lot of content"),
        showSwipeHandle: true
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(36dvh);"
      }, _react.default.createElement(AccordionComponent, null), _react.default.createElement(AccordionComponent, null)))));
    };
    return _react.default.createElement(Example, null);
  }
};
var LargerVariantAboveFlexTable = exports.LargerVariantAboveFlexTable = {
  render: function render() {
    var Example = function Example() {
      var _useState17 = (0, _react.useState)(true),
        _useState18 = _slicedToArray(_useState17, 2),
        open = _useState18[0],
        setOpen = _useState18[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var columnData = [{
        label: 'Country',
        value: 'SE'
      }, {
        label: 'Currency',
        value: 'SEK',
        sm: {
          hidden: true
        }
      }];
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [not fullscreen]"), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.FlexTable, {
        stickyHeader: true,
        expandable: true
      }, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
        columnId: "instrumentName"
      }, "Instrument Name"), _react.default.createElement(_.FlexTable.Header, {
        columnId: "country",
        hidden: true,
        md: {
          hidden: false
        }
      }, "Country"), _react.default.createElement(_.FlexTable.Header, {
        columnId: "currency",
        hidden: true,
        sm: {
          hidden: false
        }
      }, "Currency")), _react.default.createElement(_.FlexTable.Row, {
        expandItems: columnData
      }, _react.default.createElement(_.FlexTable.Cell, {
        columnId: "instrumentName"
      }, "Ericsson"), _react.default.createElement(_.FlexTable.Cell, {
        columnId: "country",
        hidden: true,
        md: {
          hidden: false
        }
      }, "SE"), _react.default.createElement(_.FlexTable.Cell, {
        columnId: "currency",
        hidden: true,
        sm: {
          hidden: false
        }
      }, "SEK")))), _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.FlexTable, {
        stickyHeader: true
      }, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
        columnId: "instrument-name"
      }, "Instrument Name"), _react.default.createElement(_.FlexTable.Header, {
        columnId: "currency"
      }, "Currency"), _react.default.createElement(_.FlexTable.Header, {
        columnId: "country"
      }, "Country")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
        columnId: "instrument-name"
      }, "Ericsson"), _react.default.createElement(_.FlexTable.Cell, {
        columnId: "currency"
      }, "SEK"), _react.default.createElement(_.FlexTable.Cell, {
        columnId: "country"
      }, "SE")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
        columnId: "instrument-name"
      }, "Apple"), _react.default.createElement(_.FlexTable.Cell, {
        columnId: "currency"
      }, "USD"), _react.default.createElement(_.FlexTable.Cell, {
        columnId: "country"
      }, "US")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
        columnId: "instrument-name"
      }, "Nokia"), _react.default.createElement(_.FlexTable.Cell, {
        columnId: "currency"
      }, "EUR"), _react.default.createElement(_.FlexTable.Cell, {
        columnId: "country"
      }, "FI")))), _react.default.createElement(_.BottomSheet, {
        closeOnClickOutside: true,
        height: 600,
        onClose: onClose,
        open: open,
        title: _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.Box, {
        p: 2
      }, _react.default.createElement(_.Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), _react.default.createElement(_.FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(31dvh);"
      }, _react.default.createElement(AccordionComponent, null), _react.default.createElement(AccordionComponent, null)))));
    };
    return _react.default.createElement(Example, null);
  }
};
var FullscreenMobile = exports.FullscreenMobile = {
  render: function render() {
    var Example = function Example() {
      var _useState19 = (0, _react.useState)(true),
        _useState20 = _slicedToArray(_useState19, 2),
        open = _useState20[0],
        setOpen = _useState20[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
      }, "Show BottomSheet [fullscreen]"), _react.default.createElement(_.BottomSheet, {
        onClose: onClose,
        fullScreenMobile: true,
        open: open,
        title: _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(100dvh - 60px);"
      }, _react.default.createElement(AccordionComponent, null), _react.default.createElement(AccordionComponent, null), _react.default.createElement(AccordionComponent, null)))));
    };
    return _react.default.createElement(Example, null);
  }
};
var NoBackDrop = exports.NoBackDrop = {
  render: function render() {
    var Example = function Example() {
      var _useState21 = (0, _react.useState)(true),
        _useState22 = _slicedToArray(_useState21, 2),
        open = _useState22[0],
        setOpen = _useState22[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
      }, "Show BottomSheet [no backdrop]"), _react.default.createElement(_.BottomSheet, {
        closeOnClickOutside: true,
        onClose: onClose,
        open: open,
        showBackdrop: false,
        title: _react.default.createElement(_.Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, _react.default.createElement(_.Box, {
        mb: 2
      }, _react.default.createElement(_.FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(100dvh - 60px);"
      }, _react.default.createElement(AccordionComponent, null), _react.default.createElement(AccordionComponent, null), _react.default.createElement(AccordionComponent, null)))));
    };
    return _react.default.createElement(Example, null);
  }
};