@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/src/Paginator/Paginator.js

@@ -0,0 +1,77 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { SystemIcons } from '../icons';
+import { ComponentMStyling } from '../styles';
+import { Z_INDEXES } from '../styles';
+import { useNavigate } from 'react-router';
+import { IconButton } from '../Button';
+var Container = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ", " {\n    width: 75%;\n  }\n"], ["\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ", " {\n    width: 75%;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var Items = styled.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n"], ["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n"])));
+var Item = styled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ", "\n\n    &:focus,\n    &:focus-within {\n      ", "\n    }\n  }\n  & > a:hover {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n  }\n  & > a:active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n  }\n  & > a.active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    cursor: default;\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: ", ";\n    }\n  }\n"], ["\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ", "\n\n    &:focus,\n    &:focus-within {\n      ", "\n    }\n  }\n  & > a:hover {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n  }\n  & > a:active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n  }\n  & > a.active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    cursor: default;\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: ", ";\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_20, Z_INDEXES.active, COLORS.primary_700, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.neutral_20, COLORS.primary_800, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100);
+var Dots = styled(Item)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: not-allowed;\n  &:after{\n    ", "\n    content: '...';\n  }\n"], ["\n  cursor: not-allowed;\n  &:after{\n    ", "\n    content: '...';\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+var ItemContent = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ", "\n  }\n  &.active:hover:after{\n    background-color: ", "\n  }\n  &.active:active:after{\n    background-color: ", "\n  }\n"], ["\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ", "\n  }\n  &.active:hover:after{\n    background-color: ", "\n  }\n  &.active:active:after{\n    background-color: ", "\n  }\n"])), COLORS.primary_500, COLORS.primary_700, COLORS.primary_800);
+;
+var Step = function (_a) {
+    var _b = _a.up, up = _b === void 0 ? true : _b, _c = _a.target, target = _c === void 0 ? '' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, page = _a.page, onPageChange = _a.onPageChange, id = _a.id;
+    var navigateHook = useNavigate();
+    var handleButtonClick = function () {
+        onPageChange && !onPageChange(page) && navigateHook(target);
+    };
+    return (React.createElement(IconButton, { id: id, action: function (event) { return handleButtonClick(); }, variant: 'secondary', shape: 'circular', disabled: disabled }, up ? React.createElement(SystemIcons.ChevronRight, null) : React.createElement(SystemIcons.ChevronLeft, null)));
+};
+var Paginator = function (_a) {
+    var _b = _a.pageCount, pageCount = _b === void 0 ? 1 : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, _d = _a.baseUrl, baseUrl = _d === void 0 ? '' : _d, onPageChange = _a.onPageChange;
+    var pages = [];
+    var from = 2;
+    var to = 4;
+    if (pageCount === 0)
+        return null;
+    if (pageCount > 1) {
+        if (currentPage >= 4 && currentPage <= pageCount - 2) {
+            from = currentPage - 1;
+            to = currentPage + 1;
+        }
+        else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {
+            from = pageCount - 3;
+            to = pageCount - 1;
+        }
+        if (to > pageCount) {
+            to = pageCount;
+        }
+        for (var i = from; i <= to; i += 1) {
+            pages.push(i);
+        }
+    }
+    return (React.createElement(Container, null,
+        React.createElement(Items, null,
+            React.createElement(Step, { up: false, target: "".concat(baseUrl, "/").concat(currentPage - 1), page: currentPage - 1, disabled: currentPage === 1, onPageChange: onPageChange, id: "paginator-left" }),
+            pages.findIndex(function (item) { return item === 1; }) === -1 && (React.createElement(Item, null,
+                React.createElement(NavLink, { to: "".concat(baseUrl, "/1"), onClick: function (e) {
+                        onPageChange && onPageChange(1) && e.preventDefault();
+                    } },
+                    React.createElement(ItemContent, { className: currentPage === 1 ? 'active' : '' },
+                        React.createElement("span", null, "1"))))),
+            currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(function (item) { return item === 1; }) === -1 && (React.createElement(Dots, null)),
+            pages.map(function (page) { return (React.createElement(Item, { key: page },
+                React.createElement(NavLink, { to: "".concat(baseUrl, "/").concat(page), onClick: function (e) {
+                        onPageChange && onPageChange(page) && e.preventDefault();
+                    } },
+                    React.createElement(ItemContent, { className: currentPage === page ? 'active' : '' },
+                        React.createElement("span", null, page))))); }),
+            pageCount > 5 && currentPage <= pageCount - 3 && (React.createElement(Dots, null)),
+            pages.findIndex(function (item) { return item === pageCount; }) === -1 && pageCount !== 1 && (React.createElement(Item, null,
+                React.createElement(NavLink, { to: "".concat(baseUrl, "/").concat(pageCount), onClick: function (e) {
+                        onPageChange && onPageChange(pageCount) && e.preventDefault();
+                    } },
+                    React.createElement(ItemContent, { className: currentPage === pageCount ? 'active' : '' },
+                        React.createElement("span", null, pageCount))))),
+            React.createElement(Step, { up: true, target: "".concat(baseUrl, "/").concat(currentPage + 1), page: currentPage + 1, disabled: currentPage === pageCount, onPageChange: onPageChange, id: "paginator-right" }))));
+};
+export default Paginator;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/Paginator/index.js

@@ -0,0 +1,2 @@
+import Paginator from './Paginator';
+export { Paginator };

package/dist/src/Panel/Panel.d.ts

@@ -43,5 +43,5 @@ export interface CarouselPanelProps extends BasePanelProps {
      */
     items?: PanelContent[];
 }
-export type PanelProps = DefaultPanelProps | CarouselPanelProps;
+export declare type PanelProps = DefaultPanelProps | CarouselPanelProps;
 export declare const Panel: (props: PanelProps) => React.JSX.Element;

package/dist/src/Panel/Panel.js

@@ -0,0 +1,82 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from "styled-components";
+import { BREAKPOINTS, COLORS, Quote } from "../styles";
+import { IconButton } from "../Button";
+import { SystemIcons } from "../icons";
+import { LinearProgress, LinearProgressType } from "../LinearProgress";
+import { useMediaMatch } from "rooks";
+import { Size } from "../types";
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 24px 32px 64px;\n\n  ", " {\n    gap: 32px;\n    padding: 32px 64px 128px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 24px 32px 64px;\n\n  ", " {\n    gap: 32px;\n    padding: 32px 64px 128px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), COLORS.neutral_20, BREAKPOINTS.LARGE);
+var Media = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ", " {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n"], ["\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ", " {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n"])), BREAKPOINTS.LARGE);
+var Body = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  width: 100%;\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n  \n  p:not(:first-of-type) {\n    flex: 1;\n    color: ", ";\n  }\n\n\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  width: 100%;\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n  \n  p:not(:first-of-type) {\n    flex: 1;\n    color: ", ";\n  }\n\n\n"])), BREAKPOINTS.LARGE, COLORS.neutral_600);
+var Footer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n"])), BREAKPOINTS.LARGE);
+export var Panel = function (props) {
+    var _a, _b;
+    var _c, _d;
+    var _e = React.useState(0), currentImage = _e[0], setCurrentImage = _e[1];
+    var isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));
+    var rest = {};
+    var order = undefined;
+    var media = undefined;
+    var title = '';
+    var content = undefined;
+    var items = [];
+    switch (props.type) {
+        case 'carousel':
+            (_a = props.items, items = _a === void 0 ? [] : _a, order = props.order, rest = __rest(props, ["items", "order"]));
+            break;
+        case 'default':
+        default:
+            (media = props.media, content = props.content, _b = props.title, title = _b === void 0 ? '' : _b, order = props.order, rest = __rest(props, ["media", "content", "title", "order"]));
+            break;
+    }
+    var moveLeft = function () {
+        props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);
+    };
+    var moveRight = function () {
+        props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);
+    };
+    var currentItem = props.type === 'carousel' ? items[currentImage] : { media: media, title: title, content: content };
+    return (React.createElement(Wrapper, __assign({}, rest, { className: "".concat(rest.className || '', " ").concat(order || '', " ") }),
+        React.createElement(Media, null,
+            ((_c = currentItem.media) === null || _c === void 0 ? void 0 : _c.type) === 'image' &&
+                React.createElement("img", { className: currentItem.media.fit, src: currentItem.media.src, alt: currentItem.media.alt }),
+            ((_d = currentItem.media) === null || _d === void 0 ? void 0 : _d.type) === 'custom' && currentItem.media.content),
+        React.createElement(Body, null,
+            React.createElement(Quote, null, currentItem.title),
+            React.createElement("p", null, currentItem.content)),
+        props.type === 'carousel' &&
+            React.createElement(Footer, null,
+                React.createElement(IconButton, { action: moveLeft, variant: 'secondary', shape: 'circular' },
+                    React.createElement(SystemIcons.ChevronLeft, null)),
+                React.createElement(LinearProgress, { size: isLargeScreen ? Size.Large : Size.Medium, className: 'progress', value: currentImage + 1, max: props.items.length, type: LinearProgressType.Dots }),
+                React.createElement(IconButton, { action: moveRight, variant: 'secondary', shape: 'circular' },
+                    React.createElement(SystemIcons.ChevronRight, null)))));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/Panel/index.js

@@ -0,0 +1 @@
+export * from './Panel';

package/dist/src/Popover/Popover.js

@@ -0,0 +1,101 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
+import { Button, IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';
+import { Position, Size } from '../types';
+export var PopoverContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  //height: ", ";\n  min-width: ", ";\n  border-radius: 4px;\n  background: ", ";\n  cursor: default;\n  box-shadow: ", ";\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ", ";\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n\n  &::after {\n    ", "\n"], ["\n  //height: ", ";\n  min-width: ", ";\n  border-radius: 4px;\n  background: ", ";\n  cursor: default;\n  box-shadow: ", ";\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ", ";\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n\n  &::after {\n    ", "\n"])), function (props) { return (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px'); }, function (props) { return (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px'); }, COLORS.white, BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, function (props) { return (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : ''); }, function (props) { return (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : ''); }, function (props) { return (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : ''); }, function (props) { return (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : ''); }, function (props) { return (props.showArrowPointer ? renderArrowStyles(props.position) : ''); });
+export var PopoverTopSectionContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", ";\n  display: flex;\n"], ["\n  height: ", ";\n  display: flex;\n"])), function (props) { return (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px'); });
+export var PopoverMiddleSectionContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"], ["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), function (props) { return (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px'); }, function (props) { return (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px'); }, scrollBarStyling(Size.Small));
+export var PopoverBottomSectionContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"], ["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), function (props) { return (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px'); });
+var TextContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), function (props) { return renderMargins(props.note, props.size); });
+var NoteContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    return props.size === Size.Small
+        ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)
+        : props.size === Size.Large
+            ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)
+            : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600);
+});
+var LabelContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    return props.size === Size.Small
+        ? ComponentSStyling(ComponentTextStyle.Bold, null)
+        : props.size === Size.Large
+            ? ComponentLStyling(ComponentTextStyle.Bold, null)
+            : ComponentMStyling(ComponentTextStyle.Bold, null);
+});
+var CloseButtonContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), function (props) { return (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0'); });
+var TextButtonContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), function (props) { return (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px'); });
+var IconButtonContainer = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n"], ["\n  margin: ", ";\n  display: flex;\n"])), function (props) { return (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0'); });
+export var PopoverWrapper = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"], ["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"])), function (props) { return (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%'); }, function (props) { return (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%'); }, function (props) { return (props.position === Position.Left ? 'right:100%; bottom: 0%' : ''); }, function (props) { return (props.position === Position.Right ? 'left:100%; bottom: 0%' : ''); }, function (props) { return (props.position === Position.Top ? 'bottom: 100%' : ''); }, function (props) { return (props.position === Position.Bottom ? 'top: 100%' : ''); }, function (props) {
+    return props.showOnClick
+        ? "".concat(PopoverContainer, " {\n        visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;")
+        : "&:hover {\n      ".concat(PopoverContainer, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }");
+});
+var renderMargins = function (isNotePresent, size) {
+    if (isNotePresent) {
+        return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';
+    }
+    else {
+        return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';
+    }
+};
+var renderArrowStyles = function (position) {
+    if (position === Position.Bottom) {
+        return "height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);";
+    }
+    if (position === Position.Top) {
+        return "height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);";
+    }
+    if (position === Position.Left) {
+        return "height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);";
+    }
+    if (position === Position.Right) {
+        return "height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);";
+    }
+};
+;
+;
+;
+;
+var Popover = function (_a) {
+    var _b, _c;
+    var _d = _a.size, size = _d === void 0 ? Size.Medium : _d, topSectionProps = _a.topSectionProps, bottomSectionProps = _a.bottomSectionProps, mainContent = _a.mainContent, children = _a.children, position = _a.position, _e = _a.showOnClick, showOnClick = _e === void 0 ? false : _e, _f = _a.showArrowPointer, showArrowPointer = _f === void 0 ? false : _f;
+    var _g = React.useState(false), showPopover = _g[0], setShowPopover = _g[1];
+    var popoverRef = React.useRef();
+    React.useEffect(function () {
+        var checkIfClickedOutside = function (e) {
+            if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {
+                setShowPopover(false);
+            }
+        };
+        document.addEventListener('mousedown', checkIfClickedOutside);
+        return function () {
+            document.removeEventListener('mousedown', checkIfClickedOutside);
+        };
+    }, [showPopover]);
+    return (React.createElement(PopoverWrapper, { position: position, showOnClick: showOnClick, showPopover: showPopover },
+        React.createElement(PopoverContainer, { size: size, position: position, ref: popoverRef, showArrowPointer: showArrowPointer },
+            !!topSectionProps && (React.createElement(PopoverTopSectionContainer, { size: size },
+                React.createElement(TextContainer, { note: !!(topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.note), size: size },
+                    (topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.note) && React.createElement(NoteContainer, { size: size }, topSectionProps.note),
+                    React.createElement(LabelContainer, { size: size }, topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.text)),
+                showOnClick && (React.createElement(CloseButtonContainer, { size: size, "data-testid": 'closeBtn' },
+                    React.createElement(IconButton, { action: function () { return setShowPopover(false); }, useTransparentBackground: true, iconColor: COLORS.neutral_600, variant: "secondary", shape: "circular" },
+                        React.createElement(SystemIcons.Close, null)))))),
+            React.createElement(PopoverMiddleSectionContainer, { size: size }, mainContent),
+            !!bottomSectionProps && (React.createElement(PopoverBottomSectionContainer, { size: size },
+                !!((_b = bottomSectionProps === null || bottomSectionProps === void 0 ? void 0 : bottomSectionProps.textButton) === null || _b === void 0 ? void 0 : _b.icon) && (React.createElement(TextButtonContainer, { size: size, "data-testid": 'textBtn' },
+                    React.createElement(Button, { size: size, variant: "secondary", icon: bottomSectionProps.textButton.icon, onClick: bottomSectionProps.textButton.action }, bottomSectionProps.textButton.label))),
+                React.createElement("div", { className: "bottom-flex" }),
+                React.createElement(IconButtonContainer, { size: size, "data-testid": 'iconBtn' }, (_c = bottomSectionProps === null || bottomSectionProps === void 0 ? void 0 : bottomSectionProps.iconButtons) === null || _c === void 0 ? void 0 : _c.map(function (iconButton) { return (React.createElement(IconButton, { action: iconButton.action, variant: "secondary", shape: "circular", useTransparentBackground: true }, iconButton.icon)); }))))),
+        React.createElement("div", { onClick: function () { return showOnClick && setShowPopover(!showPopover); } },
+            children,
+            React.createElement("div", { className: "pointer-space" }))));
+};
+export default Popover;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/src/Popover/index.js

@@ -0,0 +1 @@
+export { default as Popover } from './Popover';

package/dist/src/ProfileButton/ProfileButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export type ProfileButtonProps = {
+export declare type ProfileButtonProps = {
     /**
      * Optional. The source URL of the profile picture.
      */
@@ -40,7 +40,7 @@ declare const ProfileButton: React.ForwardRefExoticComponent<{
     /**
      * Required. The handler function to be called when the button is clicked.
      */
-    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void;
     /**
      * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.
      */

package/dist/src/ProfileButton/ProfileButton.js

@@ -0,0 +1,52 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, IconButton, Size } from '..';
+import { IconButtonContentStyles, IconButtonStyledPrimary } from '../Button/Iconbutton';
+import { NotificationDot } from '../NotificationDot';
+import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
+var PortraitOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), COLORS.black);
+export var ProfileButtonContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"], ["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), IconButtonStyledPrimary, function (props) { return (props.hideOnLowWidth ? 'none' : 'inline'); }, BREAKPOINTS.MEDIUM, IconButtonContentStyles, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+var NotificationContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"], ["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
+var ImageWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"], ["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
+var ProfileButton = React.forwardRef(function (_a, ref) {
+    var portraitSrc = _a.portraitSrc, icon = _a.icon, initials = _a.initials, onClick = _a.onClick, disabled = _a.disabled, notificationVariant = _a.notificationVariant, className = _a.className, tabIndex = _a.tabIndex, rest = __rest(_a, ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"]);
+    var renderIcon = function () {
+        return ((portraitSrc && (React.createElement(ImageWrapper, null,
+            React.createElement("img", { src: portraitSrc }),
+            React.createElement(PortraitOverlay, null)))) ||
+            (initials && (React.createElement(ComponentS, { className: "initials", textStyle: ComponentTextStyle.Bold, color: disabled ? COLORS.neutral_300 : COLORS.white }, initials))) || React.createElement(React.Fragment, null, icon));
+    };
+    return (React.createElement(ProfileButtonContainer, null,
+        React.createElement(IconButton, __assign({ ref: ref, className: className, disabled: disabled, action: onClick, variant: "primary", tabIndex: tabIndex, shape: "circular" }, rest),
+            renderIcon(),
+            notificationVariant && (React.createElement(NotificationContainer, null,
+                React.createElement(NotificationDot, { size: Size.Medium, variant: notificationVariant }))))));
+});
+export default ProfileButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/ProfileButton/index.js

@@ -0,0 +1 @@
+export { default as ProfileButton } from './ProfileButton';

package/dist/src/QuizButton/QuizButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '..';
-export type QuizButtonProps = {
+export declare type QuizButtonProps = {
     /**
      * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.
      */

package/dist/src/QuizButton/QuizButton.js

@@ -0,0 +1,53 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons } from '..';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+var TextContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ", ";\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ", ";\n  ", "\n"], ["\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ", ";\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ", ";\n  ", "\n"])), COLORS.accent1_20, function (props) { return props.size === Size.Small ? '6px 8px' : (props.size === Size.Large ? '20px 16px' : '12px 16px'); }, function (props) { return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : (props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)); });
+var TextWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ", ";\n\n  width: ", ";\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ", ";\n    width: ", ";\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n"], ["\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ", ";\n\n  width: ", ";\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ", ";\n    width: ", ";\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n"])), COLORS.accent1_100, function (props) { return props.size === Size.Small ? '32px' : (props.size === Size.Large ? '64px' : '48px'); }, function (props) { return props.size === Size.Small ? '16px' : (props.size === Size.Large ? '32px' : '24px'); }, function (props) { return props.size === Size.Small ? '32px' : (props.size === Size.Large ? '64px' : '48px'); }, COLORS.accent1_600);
+var OptionContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ", ";\n  margin-bottom: ", ";\n\n  &.selected {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ", " {\n      pointer-events: none;\n      background: ", ";\n    }\n    ", " {\n      pointer-events: none;\n      background: ", ";\n      color: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ", ";\n  margin-bottom: ", ";\n\n  &.selected {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ", " {\n      pointer-events: none;\n      background: ", ";\n    }\n    ", " {\n      pointer-events: none;\n      background: ", ";\n      color: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) { return props.size === Size.Small ? '32px' : (props.size === Size.Large ? '64px' : '48px'); }, function (props) { return props.size === Size.Small ? '16px' : (props.size === Size.Large ? '32px' : '24px'); }, TextContainer, COLORS.accent1_100, ButtonContainer, COLORS.accent1_200, ButtonContainer, COLORS.neutral_100, TextContainer, COLORS.neutral_20, COLORS.neutral_300, TextContainer, COLORS.correct_20, ButtonContainer, COLORS.correct_400, TextContainer, COLORS.critical_20, ButtonContainer, COLORS.critical_500, TextContainer, COLORS.warning_20, ButtonContainer, COLORS.warning_400, focusStyles, ButtonContainer, COLORS.accent1_300, TextContainer, function (props) { return props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100; }, COLORS.accent1_700, ButtonContainer, COLORS.accent1_400, TextContainer, function (props) { return props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200; }, COLORS.accent1_800);
+var renderResultContent = function (resultType) {
+    switch (resultType) {
+        case 'correct': return React.createElement(SystemIcons.CheckMark, { color: COLORS.white, className: 'quiz-button-result-icon' });
+        case 'incorrect': return React.createElement(SystemIcons.Close, { color: COLORS.white, className: 'quiz-button-result-icon' });
+        default: return React.createElement(SystemIcons.Close, { color: COLORS.white, className: 'quiz-button-result-icon' });
+    }
+};
+var QuizButton = function (_a) {
+    var text = _a.text, type = _a.type, onClick = _a.onClick, resultType = _a.resultType, id = _a.id, className = _a.className, _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? Size.Medium : _d, rest = __rest(_a, ["text", "type", "onClick", "resultType", "id", "className", "selected", "disabled", "size"]);
+    return (React.createElement(OptionContainer, __assign({ onClick: onClick, isSelected: selected, tabIndex: (disabled || resultType) ? -1 : 0, onMouseDown: defaultOnMouseDownHandler, size: size, className: 'quiz-button '.concat(selected ? ' selected' : '')
+            .concat(disabled ? ' disabled' : '')
+            .concat(resultType ? ' result ' + resultType : '')
+            .concat(className ? ' ' + className : ''), "data-testid": 'container', "aria-checked": selected, role: type === 'radio' ? 'radio' : 'checkbox' }, rest),
+        React.createElement(ButtonContainer, { "data-testid": 'btnContainer', className: 'quiz-button-icon', size: size }, resultType ? renderResultContent(resultType) : (type === 'radio' ? React.createElement(RadioButton, { selected: selected, disabled: disabled, size: size, tabIndexVal: -1, select: function () { }, id: id }) : React.createElement(Checkbox, { selected: selected, disabled: disabled, size: size, tabIndexVal: -1, select: function () { }, id: id }))),
+        React.createElement(TextContainer, { "data-testid": 'txtContainer', className: 'quiz-button-text', size: size },
+            React.createElement(TextWrapper, { size: size }, text))));
+};
+export default QuizButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/QuizButton/index.js

@@ -0,0 +1 @@
+export { default as QuizButton } from './QuizButton';

package/dist/src/SegmentControl/SegmentControl.js

@@ -0,0 +1,57 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Size } from '../types';
+import styled from 'styled-components';
+import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+export var SegmentControlItemContent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), COLORS.neutral_600);
+export var SegmentControlItemBackground = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"])), COLORS.neutral_20);
+export var SegmentControlItemWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), focusStyles, Z_INDEXES.hover, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
+export var SegmentControlWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", ":first-of-type {\n    ", " {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ", ":last-of-type {\n    ", " {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ", " {\n      ", "\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n      min-height: 40px;\n    }\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", ":first-of-type {\n    ", " {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ", ":last-of-type {\n    ", " {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ", " {\n      ", "\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n      min-height: 40px;\n    }\n  }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, ComponentSStyling(ComponentTextStyle.Bold, null), SegmentControlItemContent, ComponentMStyling(ComponentTextStyle.Bold, null));
+var SegmentControl = function (_a) {
+    var items = _a.items, _b = _a.size, size = _b === void 0 ? Size.Medium : _b, onChange = _a.onChange, selected = _a.selected, className = _a.className, rest = __rest(_a, ["items", "size", "onChange", "selected", "className"]);
+    var onKeyPress = function (e, item) {
+        var _a;
+        if (e.key === 'Enter' || e.key === ' ') {
+            //@ts-ignore
+            (_a = document === null || document === void 0 ? void 0 : document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+            !item.disabled && onChange(item.key);
+        }
+    };
+    var onClick = function (e, item) {
+        !item.disabled && onChange(item.key);
+    };
+    return (React.createElement(SegmentControlWrapper, __assign({ className: "".concat(size, " ").concat(className || '') }, rest), items.map(function (a, i) {
+        var key = a.key, disabled = a.disabled, content = a.content, className = a.className, rest = __rest(a, ["key", "disabled", "content", "className"]);
+        return React.createElement(SegmentControlItemWrapper, __assign({ key: a.key || i, className: (className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : ''), tabIndex: a.disabled || a.key === selected ? -1 : 0, onClick: a.disabled ? undefined : function (e) { return onClick(e, a); }, onMouseDown: defaultOnMouseDownHandler, onKeyPress: a.disabled ? undefined : function (e) { return onKeyPress(e, a); } }, rest),
+            React.createElement(SegmentControlItemBackground, null,
+                React.createElement(SegmentControlItemContent, null, a.content)));
+    })));
+};
+export default SegmentControl;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/SegmentControl/index.js

@@ -0,0 +1,2 @@
+import { default as SegmentControl } from './SegmentControl';
+export { SegmentControl };

package/dist/src/Services/functions.js

@@ -0,0 +1,11 @@
+export function createUUID() {
+    var dt = new Date().getTime();
+    // eslint-disable-next-line func-names
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        // eslint-disable-next-line no-bitwise
+        var r = (dt + Math.random() * 16) % 16 | 0;
+        dt = Math.floor(dt / 16);
+        // eslint-disable-next-line no-bitwise
+        return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+    });
+}

package/dist/src/SideMenu/SideMenu.js

@@ -0,0 +1,43 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { SideMenuHeader } from './SideMenuHeader';
+import { SideMenuFooter } from './SideMenuFooter';
+import { SideMenuBody } from './SideMenuBody';
+import { BOXSHADOWS, COLORS, Z_INDEXES } from '../styles';
+import { Size } from '../types';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n  background: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  width: fit-content;\n  box-shadow: ", ";\n\n  &.small {\n    min-width: 320px;\n  }\n\n  &.medium {\n    min-width: 400px;\n  }\n\n  &.large {\n    min-width: 480px;\n  }\n"], ["\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n  background: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  width: fit-content;\n  box-shadow: ", ";\n\n  &.small {\n    min-width: 320px;\n  }\n\n  &.medium {\n    min-width: 400px;\n  }\n\n  &.large {\n    min-width: 480px;\n  }\n"])), Z_INDEXES.off_canvas, COLORS.white, BOXSHADOWS.BOXSHADOW_CENTERED);
+var SideMenu = function (props) {
+    var _a = props.size, size = _a === void 0 ? Size.Medium : _a, className = props.className, rest = __rest(props, ["size", "className"]);
+    return (React.createElement(Wrapper, __assign({ className: "".concat(size, " ").concat(className || '') }, rest),
+        React.createElement(SideMenuHeader, __assign({}, props)),
+        React.createElement(SideMenuBody, __assign({}, props)),
+        props.footer && React.createElement(SideMenuFooter, __assign({}, props))));
+};
+export default SideMenu;
+var templateObject_1;