@laerdal/life-react-components 3.5.1-dev.17 → 3.5.1-dev.18

package/dist/stories/Popover.stories.js

@@ -1,836 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { SystemIcons, Popover, COLORS, Size, Position } from '../src/index';
-export default {
-    title: 'Components/Popover',
-    component: Popover,
-    decorators: [],
-    parameter: {},
-};
-var DemoContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n  height: fit-content;\n  margin: 20px 0px;\n"], ["\n  width: fit-content;\n  height: fit-content;\n  margin: 20px 0px;\n"])));
-var LargeDemoContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: fit-content;\n  height: fit-content;\n  margin: 30px 0px;\n"], ["\n  width: fit-content;\n  height: fit-content;\n  margin: 30px 0px;\n"])));
-var PopoverContent = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  height: 100%;\n  width: 100%;\n  display: block;\n  align-items: center;\n"], ["\n  background: ", ";\n  height: 100%;\n  width: 100%;\n  display: block;\n  align-items: center;\n"])), COLORS.neutral_200);
-var PopoverScrollableContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n  height: 500px;\n  width: 100%;\n  display: block;\n  align-items: center;\n"], ["\n  background: ", ";\n  height: 500px;\n  width: 100%;\n  display: block;\n  align-items: center;\n"])), COLORS.neutral_200);
-var Content = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100px;\n  width: 100px;\n  background: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n"], ["\n  height: 100px;\n  width: 100px;\n  background: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n"])), COLORS.white);
-var FlexContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  height: 1000px;\n  width: 2000px;\n  flexDirection: column;\n  align-items: center;\n  background: ", ";\n"], ["\n  display: flex;\n  height: 1000px;\n  width: 2000px;\n  flexDirection: column;\n  align-items: center;\n  background: ", ";\n"])), COLORS.neutral_100);
-var SmallFlexContainer = styled(FlexContainer)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 1000px;\n  width: 800px;\n"], ["\n  height: 1000px;\n  width: 800px;\n"])));
-var MediumFlexContainer = styled(FlexContainer)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 1070px;\n  height: 1030px;\n"], ["\n  width: 1070px;\n  height: 1030px;\n"])));
-var LargeFlexContainer = styled(FlexContainer)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 1200px;\n  width: 1400px;\n"], ["\n  height: 1200px;\n  width: 1400px;\n"])));
-var DemoContent = function () {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(PopoverContent, null, "Middle container / frame")));
-};
-var ScrollableContent = function () {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(PopoverScrollableContent, null, "Middle container / frame")));
-};
-export var SmallPopoverDemo = function () { return (React.createElement(SmallFlexContainer, { style: { width: '800px' } },
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Bottom },
-            React.createElement(Content, null, "pops bottom"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Left },
-            React.createElement(Content, null, "pops left"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
-                text: 'Sample text'
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                }
-            }, position: Position.Right },
-            React.createElement(Content, null, "pops right"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Top },
-            React.createElement(Content, null, "pops top"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Right },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops right"),
-                " ",
-                React.createElement("div", null, " with no"),
-                " ",
-                React.createElement("div", null, "top")))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: DemoContent(), position: Position.Top },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops top"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "bottom")))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, mainContent: DemoContent(), position: Position.Left },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops left"),
-                " ",
-                React.createElement("div", null, "with only"),
-                " ",
-                React.createElement("div", null, "middle")))))); };
-export var SmallPopoverScrollableDemo = function () { return (React.createElement(SmallFlexContainer, null,
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Bottom },
-            React.createElement(Content, null, "pops bottom"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Left },
-            React.createElement(Content, null, "pops left"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                }
-            }, position: Position.Right },
-            React.createElement(Content, null, "pops right"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note',
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Top },
-            React.createElement(Content, null, "pops top"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Right },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops right"),
-                " ",
-                React.createElement("div", null, " with no"),
-                " ",
-                React.createElement("div", null, "top")))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: ScrollableContent(), position: Position.Top },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops top"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "bottom")))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, mainContent: ScrollableContent(), position: Position.Left },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops left"),
-                " ",
-                React.createElement("div", null, "with only"),
-                " ",
-                React.createElement("div", null, "middle")))))); };
-export var MediumPopoverDemo = function () { return (React.createElement(MediumFlexContainer, null,
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Bottom },
-            React.createElement(Content, null, "pops bottom"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Left },
-            React.createElement(Content, null, "pops left"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                }
-            }, position: Position.Right },
-            React.createElement(Content, null, "pops right"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Top },
-            React.createElement(Content, null, "pops top"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Right },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops right"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "top")))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: DemoContent(), position: Position.Top },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops top"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "bottom")))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, mainContent: DemoContent(), position: Position.Left },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops left"),
-                " ",
-                React.createElement("div", null, "with only"),
-                " ",
-                React.createElement("div", null, "middle")))))); };
-export var MediumPopoverScrollableDemo = function () { return (React.createElement(MediumFlexContainer, null,
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Bottom },
-            React.createElement(Content, null, "pops bottom"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Left },
-            React.createElement(Content, null, "pops left"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                }
-            }, position: Position.Right },
-            React.createElement(Content, null, "pops right"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note',
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Top },
-            React.createElement(Content, null, "pops top"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Right },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops right"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "top")))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: ScrollableContent(), position: Position.Top },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops top"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "bottom")))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, mainContent: ScrollableContent(), position: Position.Left },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops left"),
-                " ",
-                React.createElement("div", null, "with only"),
-                " ",
-                React.createElement("div", null, "middle")))))); };
-export var LargePopoverDemo = function () { return (React.createElement(LargeFlexContainer, null,
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Bottom },
-            React.createElement(Content, null, "pops bottom"))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Left },
-            React.createElement(Content, null, "pops left"))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                }
-            }, position: Position.Right },
-            React.createElement(Content, null, "pops right"))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Top },
-            React.createElement(Content, null, "pops top"))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Right },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops right"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "top")))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: DemoContent(), position: Position.Top },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops top"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "bottom")))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, mainContent: DemoContent(), position: Position.Left },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops left"),
-                " ",
-                React.createElement("div", null, "with only"),
-                " ",
-                React.createElement("div", null, "middle")))))); };
-export var LargePopoverScrollableDemo = function () { return (React.createElement(LargeFlexContainer, null,
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Bottom },
-            React.createElement(Content, null, "pops bottom"))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Left },
-            React.createElement(Content, null, "pops left"))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                }
-            }, position: Position.Right },
-            React.createElement(Content, null, "pops right"))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note',
-            }, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Top },
-            React.createElement(Content, null, "pops top"))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, mainContent: ScrollableContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Right },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops right"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "top")))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: ScrollableContent(), position: Position.Top },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops top"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "bottom")))),
-    React.createElement(LargeDemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, mainContent: ScrollableContent(), position: Position.Left },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops left"),
-                " ",
-                React.createElement("div", null, "with only"),
-                " ",
-                React.createElement("div", null, "middle")))))); };
-export var SmallPopoverWithNoArrowPointerDemo = function () { return (React.createElement(SmallFlexContainer, { style: { width: '800px' } },
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Bottom },
-            React.createElement(Content, null, "pops bottom"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Left },
-            React.createElement(Content, null, "pops left"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                }
-            }, position: Position.Right },
-            React.createElement(Content, null, "pops right"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note',
-            }, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Top },
-            React.createElement(Content, null, "pops top"))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, size: Size.Small, mainContent: DemoContent(), bottomSectionProps: {
-                textButton: {
-                    label: 'View more',
-                    action: function () { console.log('123 loges'); },
-                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
-                },
-                iconButtons: [
-                    {
-                        icon: React.createElement(SystemIcons.StarOutlined, null),
-                        action: function () { console.log('star outlined clicked'); }
-                    },
-                    {
-                        icon: React.createElement(SystemIcons.Share, null),
-                        action: function () { console.log('share icon clicked'); }
-                    }
-                ]
-            }, position: Position.Right },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops right"),
-                " ",
-                React.createElement("div", null, " with no"),
-                " ",
-                React.createElement("div", null, "top")))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, size: Size.Small, topSectionProps: {
-                text: 'Sample text',
-                note: 'Test note'
-            }, mainContent: DemoContent(), position: Position.Top },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops top"),
-                " ",
-                React.createElement("div", null, "with no"),
-                " ",
-                React.createElement("div", null, "bottom")))),
-    React.createElement(DemoContainer, null,
-        React.createElement(Popover, { showOnClick: false, size: Size.Small, mainContent: DemoContent(), position: Position.Left },
-            React.createElement(Content, { style: { 'flexDirection': 'column' } },
-                React.createElement("div", null, "pops left"),
-                " ",
-                React.createElement("div", null, "with only"),
-                " ",
-                React.createElement("div", null, "middle")))))); };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;