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

package/dist/Paginator/Paginator.js

@@ -1,147 +1,77 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-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';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Container = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ", " {\n    width: 75%;\n  }\n"])), BREAKPOINTS.MEDIUM);
-var Items = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n"])));
-var Item = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  &:after{\n    ", "\n    content: '...';\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
-var ItemContent = styled('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 Step(_ref) {
-  var _ref$up = _ref.up,
-    up = _ref$up === void 0 ? true : _ref$up,
-    _ref$target = _ref.target,
-    target = _ref$target === void 0 ? '' : _ref$target,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    page = _ref.page,
-    onPageChange = _ref.onPageChange,
-    id = _ref.id;
-  var navigateHook = useNavigate();
-  var handleButtonClick = function handleButtonClick() {
-    onPageChange && !onPageChange(page) && navigateHook(target);
-  };
-  return /*#__PURE__*/_jsx(IconButton, {
-    id: id,
-    action: function action(event) {
-      return handleButtonClick();
-    },
-    variant: 'secondary',
-    shape: 'circular',
-    disabled: disabled,
-    children: up ? /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {}) : /*#__PURE__*/_jsx(SystemIcons.ChevronLeft, {})
-  });
-};
-var Paginator = function Paginator(_ref2) {
-  var _ref2$pageCount = _ref2.pageCount,
-    pageCount = _ref2$pageCount === void 0 ? 1 : _ref2$pageCount,
-    _ref2$currentPage = _ref2.currentPage,
-    currentPage = _ref2$currentPage === void 0 ? 1 : _ref2$currentPage,
-    _ref2$baseUrl = _ref2.baseUrl,
-    baseUrl = _ref2$baseUrl === void 0 ? '' : _ref2$baseUrl,
-    onPageChange = _ref2.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 /*#__PURE__*/_jsx(Container, {
-    children: /*#__PURE__*/_jsxs(Items, {
-      children: [/*#__PURE__*/_jsx(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 && /*#__PURE__*/_jsx(Item, {
-        children: /*#__PURE__*/_jsx(NavLink, {
-          to: "".concat(baseUrl, "/1"),
-          onClick: function onClick(e) {
-            onPageChange && onPageChange(1) && e.preventDefault();
-          },
-          children: /*#__PURE__*/_jsx(ItemContent, {
-            className: currentPage === 1 ? 'active' : '',
-            children: /*#__PURE__*/_jsx("span", {
-              children: "1"
-            })
-          })
-        })
-      }), currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(function (item) {
-        return item === 1;
-      }) === -1 && /*#__PURE__*/_jsx(Dots, {}), pages.map(function (page) {
-        return /*#__PURE__*/_jsx(Item, {
-          children: /*#__PURE__*/_jsx(NavLink, {
-            to: "".concat(baseUrl, "/").concat(page),
-            onClick: function onClick(e) {
-              onPageChange && onPageChange(page) && e.preventDefault();
-            },
-            children: /*#__PURE__*/_jsx(ItemContent, {
-              className: currentPage === page ? 'active' : '',
-              children: /*#__PURE__*/_jsx("span", {
-                children: page
-              })
-            })
-          })
-        }, page);
-      }), pageCount > 5 && currentPage <= pageCount - 3 && /*#__PURE__*/_jsx(Dots, {}), pages.findIndex(function (item) {
-        return item === pageCount;
-      }) === -1 && pageCount !== 1 && /*#__PURE__*/_jsx(Item, {
-        children: /*#__PURE__*/_jsx(NavLink, {
-          to: "".concat(baseUrl, "/").concat(pageCount),
-          onClick: function onClick(e) {
-            onPageChange && onPageChange(pageCount) && e.preventDefault();
-          },
-          children: /*#__PURE__*/_jsx(ItemContent, {
-            className: currentPage === pageCount ? 'active' : '',
-            children: /*#__PURE__*/_jsx("span", {
-              children: pageCount
-            })
-          })
-        })
-      }), /*#__PURE__*/_jsx(Step, {
-        up: true,
-        target: "".concat(baseUrl, "/").concat(currentPage + 1),
-        page: currentPage + 1,
-        disabled: currentPage === pageCount,
-        onPageChange: onPageChange,
-        id: "paginator-right"
-      })]
-    })
-  });
-};
-Paginator.propTypes = {
-  pageCount: _pt.number.isRequired,
-  currentPage: _pt.number.isRequired,
-  baseUrl: _pt.string.isRequired,
-  onPageChange: _pt.func
-};
-export default Paginator;
-//# sourceMappingURL=Paginator.js.map
+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/Paginator/index.js

@@ -1,3 +1,2 @@
-import Paginator from './Paginator';
-export { Paginator };
-//# sourceMappingURL=index.js.map
+import Paginator from './Paginator';
+export { Paginator };

package/dist/Panel/Panel.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
     type?: 'default' | 'carousel';
 }
-interface PanelContent {
+export interface PanelContent {
     media?: {
         type: 'image';
         src: string;
@@ -15,15 +15,33 @@ interface PanelContent {
     title?: string;
     content?: React.ReactNode;
 }
-interface DefaultPanelProps extends BasePanelProps, PanelContent {
+export interface DefaultPanelProps extends BasePanelProps, PanelContent {
+    /**
+     * Optional. Specifies the type of the panel as 'default'.
+     * If not specified, the type defaults to 'default'.
+     */
     type?: 'default';
+    /**
+     * Optional. Specifies the order of the content in the panel.
+     * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.
+     */
     order?: 'default' | 'reverse';
 }
-interface CarouselPanelProps extends BasePanelProps {
+export interface CarouselPanelProps extends BasePanelProps {
+    /**
+     * Required. Specifies the type of the panel as 'carousel'.
+     */
     type: 'carousel';
+    /**
+     * Optional. Specifies the order of the content in the panel.
+     * It can be 'default' or 'reverse'. Defaults to 'default' if not specified.
+     */
     order?: 'default' | 'reverse';
+    /**
+     * Optional. An array of PanelContent objects.
+     * Each object represents a slide in the carousel.
+     */
     items?: PanelContent[];
 }
-export type PanelProps = DefaultPanelProps | CarouselPanelProps;
-export declare const Panel: (props: PanelProps) => JSX.Element;
-export {};
+export declare type PanelProps = DefaultPanelProps | CarouselPanelProps;
+export declare const Panel: (props: PanelProps) => React.JSX.Element;

package/dist/Panel/Panel.js

@@ -1,131 +1,82 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _excluded = ["items", "order"],
-  _excluded2 = ["media", "content", "title", "order"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _Panel$propTypes;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 Panel(props) {
-  var _currentItem$media, _currentItem$media2;
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    currentImage = _React$useState2[0],
-    setCurrentImage = _React$useState2[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':
-      var _props = props;
-      var _props$items = _props.items;
-      items = _props$items === void 0 ? [] : _props$items;
-      order = _props.order;
-      rest = _objectWithoutProperties(_props, _excluded);
-      _props;
-      break;
-    case 'default':
-    default:
-      var _props2 = props;
-      media = _props2.media;
-      content = _props2.content;
-      var _props2$title = _props2.title;
-      title = _props2$title === void 0 ? '' : _props2$title;
-      order = _props2.order;
-      rest = _objectWithoutProperties(_props2, _excluded2);
-      _props2;
-      break;
-  }
-  var moveLeft = function moveLeft() {
-    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);
-  };
-  var moveRight = function moveRight() {
-    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 /*#__PURE__*/_jsxs(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    className: "".concat(rest.className || '', " ").concat(order || '', " "),
-    children: [/*#__PURE__*/_jsxs(Media, {
-      children: [((_currentItem$media = currentItem.media) === null || _currentItem$media === void 0 ? void 0 : _currentItem$media.type) === 'image' && /*#__PURE__*/_jsx("img", {
-        className: currentItem.media.fit,
-        src: currentItem.media.src,
-        alt: currentItem.media.alt
-      }), ((_currentItem$media2 = currentItem.media) === null || _currentItem$media2 === void 0 ? void 0 : _currentItem$media2.type) === 'custom' && currentItem.media.content]
-    }), /*#__PURE__*/_jsxs(Body, {
-      children: [/*#__PURE__*/_jsx(Quote, {
-        children: currentItem.title
-      }), /*#__PURE__*/_jsx("p", {
-        children: currentItem.content
-      })]
-    }), props.type === 'carousel' && /*#__PURE__*/_jsxs(Footer, {
-      children: [/*#__PURE__*/_jsx(IconButton, {
-        action: moveLeft,
-        variant: 'secondary',
-        shape: 'circular',
-        children: /*#__PURE__*/_jsx(SystemIcons.ChevronLeft, {})
-      }), /*#__PURE__*/_jsx(LinearProgress, {
-        size: isLargeScreen ? Size.Large : Size.Medium,
-        className: 'progress',
-        value: currentImage + 1,
-        max: props.items.length,
-        type: LinearProgressType.Dots
-      }), /*#__PURE__*/_jsx(IconButton, {
-        action: moveRight,
-        variant: 'secondary',
-        shape: 'circular',
-        children: /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {})
-      })]
-    })]
-  }));
-};
-Panel.propTypes = (_Panel$propTypes = {
-  type: _pt.oneOf(['default', 'carousel']),
-  media: _pt.oneOfType([_pt.shape({
-    type: _pt.oneOf(['image']).isRequired,
-    src: _pt.string.isRequired,
-    alt: _pt.string.isRequired,
-    fit: _pt.oneOf(['fill', 'fit'])
-  }), _pt.shape({
-    type: _pt.oneOf(['custom']).isRequired,
-    content: _pt.node.isRequired
-  })]),
-  title: _pt.string,
-  content: _pt.node
-}, _defineProperty(_Panel$propTypes, "type", _pt.oneOf(['default'])), _defineProperty(_Panel$propTypes, "order", _pt.oneOf(['default', 'reverse'])), _defineProperty(_Panel$propTypes, "type", _pt.oneOf(['default', 'carousel'])), _defineProperty(_Panel$propTypes, "type", _pt.oneOf(['carousel']).isRequired), _defineProperty(_Panel$propTypes, "order", _pt.oneOf(['default', 'reverse'])), _defineProperty(_Panel$propTypes, "items", _pt.arrayOf(_pt.shape({
-  media: _pt.oneOfType([_pt.shape({
-    type: _pt.oneOf(['image']).isRequired,
-    src: _pt.string.isRequired,
-    alt: _pt.string.isRequired,
-    fit: _pt.oneOf(['fill', 'fit'])
-  }), _pt.shape({
-    type: _pt.oneOf(['custom']).isRequired,
-    content: _pt.node.isRequired
-  })]),
-  title: _pt.string,
-  content: _pt.node
-}))), _Panel$propTypes);
-//# sourceMappingURL=Panel.js.map
+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/Panel/index.js

@@ -1,2 +1 @@
-export * from './Panel';
-//# sourceMappingURL=index.js.map
+export * from './Panel';