@laerdal/life-react-components 2.3.1-dev.1.full → 2.3.1-dev.3

package/dist/InputFields/TextField.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size, States, Testable } from '../types';
 import { TextFieldNote } from './types';
-declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly" | "size"> & {
+declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "size" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
     id?: string | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;

package/dist/Layouts/index.cjs

@@ -11,18 +11,26 @@ var _styles = require("../styles");
 var _templateObject, _templateObject2, _templateObject3;
 var GRID = {
   GAP: {
-    SMALL: '24px',
-    MEDIUM: '32px',
-    LARGE: '40px'
+    SMALL: '16px',
+    MEDIUM: '24px',
+    LARGE: '32px'
   },
   GUTTER: {
-    SMALL: '16px',
-    MEDIUM: '32px',
-    LARGE: '56px'
+    SMALL: '16px 16px 32px',
+    MEDIUM: '24px 32px 64px',
+    LARGE: '32px 64px 128px'
   }
 };
-var PageWidth = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin: 0 ", ";\n\n  ", " {\n    margin: 0 ", ";\n  }\n  ", " {\n    margin: 0 ", ";\n  }\n\n  ", " {\n    max-width: ", ";\n    margin: 0 auto;\n  }\n"])), GRID.GUTTER.SMALL, _styles.BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, _styles.BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, _styles.BREAKPOINTS.XLARGE, function (props) {
-  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)' : '1088px';
+var PageWidth = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin: ", ";\n\n  ", "\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n\n  }\n"])), GRID.GUTTER.SMALL, function (props) {
+  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+}, _styles.BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, function (props) {
+  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+}, _styles.BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, function (props) {
+  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+}, _styles.BREAKPOINTS.LARGE, function (props) {
+  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600 - 128px)';
+}, function (props) {
+  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 });
 exports.PageWidth = PageWidth;
 var Columns = _styledComponents.default.section(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
@@ -39,6 +47,6 @@ var Columns = _styledComponents.default.section(_templateObject2 || (_templateOb
   return props.printColumns || 'none';
 });
 exports.Columns = Columns;
-var ContainerMargins = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n"])));
+var ContainerMargins = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n"])));
 exports.ContainerMargins = ContainerMargins;
 //# sourceMappingURL=index.cjs.map

package/dist/Layouts/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","BREAKPOINTS","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;;;;;;;AAAA;AAEA;AAAwC;AAExC,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,kQAErBR,IAAI,CAACK,MAAM,CAACH,KAAK,EAE3BO,mBAAW,CAACN,MAAM,EACNH,IAAI,CAACK,MAAM,CAACF,MAAM,EAE9BM,mBAAW,CAACL,KAAK,EACLJ,IAAI,CAACK,MAAM,CAACD,KAAK,EAG7BK,mBAAW,CAACC,MAAM,EACL,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,WAAW,GAAID,KAAK,CAACE,QAAQ,GAAG,mBAAmB,GAAGF,KAAK,CAACE,QAAQ,GAAG,KAAK,GAAG,oBAAoB,GAAI,QAAQ;AAAA,CAAC,CAGlJ;AAAC;AAEK,IAAMC,OAAO,GAAGP,yBAAM,CAACQ,OAAO,ooBAGvB,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDO,mBAAW,CAACN,MAAM,EACO,UAACQ,KAAK;EAAA,OAAKA,KAAK,CAACM,OAAO;AAAA,GAC7B,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACM,OAAO;AAAA,GAChC,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDM,mBAAW,CAACL,KAAK,EACL,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACQ,KAAK;EAAA,OAAKA,KAAK,CAACO,YAAY,IAAI,MAAM;AAAA,EAEnE;AAAC;AAEK,IAAMC,gBAAgB,GAAGZ,yBAAM,CAACC,GAAG,k1BA8BzC;AAAC"}
+{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","props","unsetMargin","BREAKPOINTS","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '16px',\n    MEDIUM: '24px',\n    LARGE: '32px',\n  },\n  GUTTER: {\n    SMALL: '16px 16px 32px',\n    MEDIUM: '24px 32px 64px',\n    LARGE: '32px 64px 128px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n  display: block;\n  margin: ${GRID.GUTTER.SMALL};\n\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  ${BREAKPOINTS.MEDIUM} {\n    margin: ${GRID.GUTTER.MEDIUM};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin: ${GRID.GUTTER.LARGE};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: ${(props) => (\n            props.useMaxWidth\n                    ? (props.maxWidth\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\n                            : 'calc(100% - 128px)')\n                    : 'calc(1600 - 128px)')};\n\n    margin: 32px auto 128px;\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;;;;;;;AAAA;AAEA;AAAsC;AAEtC,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,iTAEvBR,IAAI,CAACK,MAAM,CAACH,KAAK,EAEzB,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAChEC,mBAAW,CAACR,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACJ,UAACK,KAAK;EAAA,OACXA,KAAK,CAACG,WAAW,GACNH,KAAK,CAACI,QAAQ,GACP,mBAAmB,GAAGJ,KAAK,CAACI,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,oBAAoB;AAAA,CAAC,EAGrC,UAAAJ,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAGrE;AAAC;AAEK,IAAMI,OAAO,GAAGP,yBAAM,CAACQ,OAAO,ooBAGvB,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDS,mBAAW,CAACR,MAAM,EACO,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAC7B,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAChC,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDQ,mBAAW,CAACP,KAAK,EACL,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACS,YAAY,IAAI,MAAM;AAAA,EAEnE;AAAC;AAEK,IAAMC,gBAAgB,GAAGZ,yBAAM,CAACC,GAAG,kiBAkBzC;AAAC"}

package/dist/Layouts/index.d.ts

@@ -1,6 +1,7 @@
 export declare const PageWidth: import("styled-components").StyledComponent<"div", any, {
     useMaxWidth?: boolean | undefined;
     maxWidth?: number | undefined;
+    unsetMargin?: boolean | undefined;
 }, never>;
 export declare const Columns: import("styled-components").StyledComponent<"section", any, {
     gap?: string | undefined;

package/dist/Layouts/index.js

@@ -4,18 +4,26 @@ import styled from 'styled-components';
 import { BREAKPOINTS } from '../styles';
 var GRID = {
   GAP: {
-    SMALL: '24px',
-    MEDIUM: '32px',
-    LARGE: '40px'
+    SMALL: '16px',
+    MEDIUM: '24px',
+    LARGE: '32px'
   },
   GUTTER: {
-    SMALL: '16px',
-    MEDIUM: '32px',
-    LARGE: '56px'
+    SMALL: '16px 16px 32px',
+    MEDIUM: '24px 32px 64px',
+    LARGE: '32px 64px 128px'
   }
 };
-export var PageWidth = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  margin: 0 ", ";\n\n  ", " {\n    margin: 0 ", ";\n  }\n  ", " {\n    margin: 0 ", ";\n  }\n\n  ", " {\n    max-width: ", ";\n    margin: 0 auto;\n  }\n"])), GRID.GUTTER.SMALL, BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, BREAKPOINTS.XLARGE, function (props) {
-  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)' : '1088px';
+export var PageWidth = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  margin: ", ";\n\n  ", "\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n\n  }\n"])), GRID.GUTTER.SMALL, function (props) {
+  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+}, BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, function (props) {
+  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+}, BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, function (props) {
+  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+}, BREAKPOINTS.LARGE, function (props) {
+  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600 - 128px)';
+}, function (props) {
+  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 });
 export var Columns = styled.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
   return props.gap || GRID.GAP.SMALL;
@@ -30,5 +38,5 @@ export var Columns = styled.section(_templateObject2 || (_templateObject2 = _tag
 }, GRID.GAP.MEDIUM, function (props) {
   return props.printColumns || 'none';
 });
-export var ContainerMargins = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n"])));
+export var ContainerMargins = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n"])));
 //# sourceMappingURL=index.js.map

package/dist/Layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,WAAW,QAAQ,WAAW;AAEvC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,oPAErBP,IAAI,CAACK,MAAM,CAACH,KAAK,EAE3BH,WAAW,CAACI,MAAM,EACNH,IAAI,CAACK,MAAM,CAACF,MAAM,EAE9BJ,WAAW,CAACK,KAAK,EACLJ,IAAI,CAACK,MAAM,CAACD,KAAK,EAG7BL,WAAW,CAACS,MAAM,EACL,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,WAAW,GAAID,KAAK,CAACE,QAAQ,GAAG,mBAAmB,GAAGF,KAAK,CAACE,QAAQ,GAAG,KAAK,GAAG,oBAAoB,GAAI,QAAQ;AAAA,CAAC,CAGlJ;AAED,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACM,OAAO;AAAA,GAC7B,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACM,OAAO;AAAA,GAChC,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACK,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACO,YAAY,IAAI,MAAM;AAAA,EAEnE;AAED,OAAO,IAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAG,o0BA8BzC"}
+{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '16px',\n    MEDIUM: '24px',\n    LARGE: '32px',\n  },\n  GUTTER: {\n    SMALL: '16px 16px 32px',\n    MEDIUM: '24px 32px 64px',\n    LARGE: '32px 64px 128px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n  display: block;\n  margin: ${GRID.GUTTER.SMALL};\n\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  ${BREAKPOINTS.MEDIUM} {\n    margin: ${GRID.GUTTER.MEDIUM};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin: ${GRID.GUTTER.LARGE};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: ${(props) => (\n            props.useMaxWidth\n                    ? (props.maxWidth\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\n                            : 'calc(100% - 128px)')\n                    : 'calc(1600 - 128px)')};\n\n    margin: 32px auto 128px;\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,mSAEvBP,IAAI,CAACK,MAAM,CAACH,KAAK,EAEzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAChEV,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAI,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACJ,UAACI,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,oBAAoB;AAAA,CAAC,EAGrC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAGrE;AAED,OAAO,IAAMG,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACL,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAC7B,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAChC,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACQ,YAAY,IAAI,MAAM;AAAA,EAEnE;AAED,OAAO,IAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAG,ohBAkBzC"}

package/dist/NavItem/NavItem.cjs

@@ -13,17 +13,13 @@ var _react = _interopRequireDefault(require("react"));
 var _styles = require("../styles");
 var _typography = require("../styles/typography");
 var _zIndexes = require("../styles/z-indexes");
-var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var NavItemDiv = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.focus-visible {\n    ", "\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.neutral_800, _styles.COLORS.primary_600, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_600, _styles.focusStyles);
+var NavItemDiv = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  ", " {\n    height: 80px;\n  }\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ", "\n    outline-offset: -4px;\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.LARGE, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.neutral_800, _styles.COLORS.primary_600, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.focusStyles);
 var NavItem = function NavItem(props) {
-  var focusVisibleRef = (0, _common.useFocusVisibleRef)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItemDiv, _objectSpread(_objectSpread({}, props), {}, {
-    ref: focusVisibleRef
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItemDiv, _objectSpread({}, props));
 };
 var _default = NavItem;
 exports.default = _default;

package/dist/NavItem/NavItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.cjs","names":["NavItemDiv","styled","div","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focusStyles","NavItem","props","focusVisibleRef","useFocusVisibleRef"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled, { StyledComponentProps } from 'styled-components';\nimport React from 'react';\nimport {COLORS, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { useFocusVisibleRef } from '../common';\n\nexport type StyledComponentPropsWithAs<\n    C extends string | React.ComponentType<any>,\n    T extends object,\n    O extends object,\n    A extends keyof any,\n    AsC extends string | React.ComponentType<any> = C,\n    FAsC extends string | React.ComponentType<any> = C\n> = StyledComponentProps<C, T, O, A, FAsC> & { as?: AsC | undefined; forwardedAs?: FAsC | undefined };\n\n\nconst NavItemDiv = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n`;\n\n\nconst NavItem = (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, \"div\">) => {\n  const focusVisibleRef = useFocusVisibleRef();\n  return (\n    <NavItemDiv {...props} ref={focusVisibleRef} />\n  );\n};\n\nexport default NavItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA+C;AAAA;AAAA;AAAA;AAY/C,IAAMA,UAAU,GAAGC,yBAAM,CAACC,GAAG,m4BACzB,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAuBtDC,mBAAS,CAACC,MAAM,EACPH,cAAM,CAACI,UAAU,EAC5BJ,cAAM,CAACK,WAAW,EAELL,cAAM,CAACM,WAAW,EAK/BN,cAAM,CAACO,WAAW,EACPP,cAAM,CAACQ,WAAW,EAEhBR,cAAM,CAACQ,WAAW,EAK7BN,mBAAS,CAACO,KAAK,EACNT,cAAM,CAACU,UAAU,EAC5BV,cAAM,CAACW,WAAW,EAELX,cAAM,CAACM,WAAW,EAKtCM,mBAAW,CAEhB;AAGD,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIC,KAA8H,EAAK;EAClJ,IAAMC,eAAe,GAAG,IAAAC,0BAAkB,GAAE;EAC5C,oBACE,qBAAC,UAAU,kCAAKF,KAAK;IAAE,GAAG,EAAEC;EAAgB,GAAG;AAEnD,CAAC;AAAC,eAEaF,OAAO;AAAA"}
+{"version":3,"file":"NavItem.cjs","names":["NavItemDiv","styled","div","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","BREAKPOINTS","LARGE","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","primary_100","primary_800","focusStyles","NavItem","props"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled, {StyledComponentProps} from 'styled-components';\nimport React from 'react';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common';\n\nexport type StyledComponentPropsWithAs<\n  C extends string | React.ComponentType<any>,\n  T extends object,\n  O extends object,\n  A extends keyof any,\n  AsC extends string | React.ComponentType<any> = C,\n  FAsC extends string | React.ComponentType<any> = C\n> = StyledComponentProps<C, T, O, A, FAsC> & { as?: AsC | undefined; forwardedAs?: FAsC | undefined };\n\n\nconst NavItemDiv = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  ${BREAKPOINTS.LARGE} {\n    height: 80px;\n  }\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n\n    &:after {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    &:after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n    outline-offset: -4px;\n  }\n`;\n\n\nconst NavItem = (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, \"div\">) => {\n  return (\n    <NavItemDiv {...props} />\n  );\n};\n\nexport default NavItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA8C;AAAA;AAAA;AAAA;AAa9C,IAAMA,UAAU,GAAGC,yBAAM,CAACC,GAAG,8oCACzB,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAMjEC,mBAAW,CAACC,KAAK,EAsBNC,mBAAS,CAACC,MAAM,EACPL,cAAM,CAACM,UAAU,EAC5BN,cAAM,CAACO,WAAW,EAGLP,cAAM,CAACQ,WAAW,EAK/BR,cAAM,CAACS,WAAW,EACPT,cAAM,CAACU,WAAW,EAGhBV,cAAM,CAACU,WAAW,EAK7BN,mBAAS,CAACO,KAAK,EACNX,cAAM,CAACY,UAAU,EAC5BZ,cAAM,CAACa,WAAW,EAGLb,cAAM,CAACa,WAAW,EAK7BT,mBAAS,CAACC,MAAM,EACPL,cAAM,CAACc,WAAW,EAC7Bd,cAAM,CAACe,WAAW,EAGLf,cAAM,CAACe,WAAW,EAMtCC,mBAAW,CAGhB;AAGD,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIC,KAA8H,EAAK;EAClJ,oBACE,qBAAC,UAAU,oBAAKA,KAAK,EAAI;AAE7B,CAAC;AAAC,eAEaD,OAAO;AAAA"}

package/dist/NavItem/NavItem.js

@@ -6,17 +6,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import styled from 'styled-components';
 import React from 'react';
-import { COLORS, focusStyles } from '../styles';
+import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
 import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
-import { useFocusVisibleRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
-var NavItemDiv = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.focus-visible {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), Z_INDEXES.active, COLORS.neutral_20, COLORS.neutral_800, COLORS.primary_600, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_600, focusStyles);
+var NavItemDiv = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  ", " {\n    height: 80px;\n  }\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ", "\n    outline-offset: -4px;\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.LARGE, Z_INDEXES.active, COLORS.neutral_20, COLORS.neutral_800, COLORS.primary_600, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, focusStyles);
 var NavItem = function NavItem(props) {
-  var focusVisibleRef = useFocusVisibleRef();
-  return /*#__PURE__*/_jsx(NavItemDiv, _objectSpread(_objectSpread({}, props), {}, {
-    ref: focusVisibleRef
-  }));
+  return /*#__PURE__*/_jsx(NavItemDiv, _objectSpread({}, props));
 };
 export default NavItem;
 //# sourceMappingURL=NavItem.js.map

package/dist/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","names":["styled","React","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","useFocusVisibleRef","NavItemDiv","div","Regular","neutral_600","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","NavItem","props","focusVisibleRef"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled, { StyledComponentProps } from 'styled-components';\nimport React from 'react';\nimport {COLORS, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { useFocusVisibleRef } from '../common';\n\nexport type StyledComponentPropsWithAs<\n    C extends string | React.ComponentType<any>,\n    T extends object,\n    O extends object,\n    A extends keyof any,\n    AsC extends string | React.ComponentType<any> = C,\n    FAsC extends string | React.ComponentType<any> = C\n> = StyledComponentProps<C, T, O, A, FAsC> & { as?: AsC | undefined; forwardedAs?: FAsC | undefined };\n\n\nconst NavItemDiv = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n`;\n\n\nconst NavItem = (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, \"div\">) => {\n  const focusVisibleRef = useFocusVisibleRef();\n  return (\n    <NavItemDiv {...props} ref={focusVisibleRef} />\n  );\n};\n\nexport default NavItem;\n"],"mappings":";;;;;;AAAA,OAAOA,MAAM,MAAgC,mBAAmB;AAChE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC7C,SAASC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAC5E,SAAQC,SAAS,QAAO,qBAAqB;AAC7C,SAASC,kBAAkB,QAAQ,WAAW;AAAC;AAY/C,IAAMC,UAAU,GAAGR,MAAM,CAACS,GAAG,q3BACzBL,iBAAiB,CAACC,kBAAkB,CAACK,OAAO,EAAER,MAAM,CAACS,WAAW,CAAC,EAuBtDL,SAAS,CAACM,MAAM,EACPV,MAAM,CAACW,UAAU,EAC5BX,MAAM,CAACY,WAAW,EAELZ,MAAM,CAACa,WAAW,EAK/Bb,MAAM,CAACc,WAAW,EACPd,MAAM,CAACe,WAAW,EAEhBf,MAAM,CAACe,WAAW,EAK7BX,SAAS,CAACY,KAAK,EACNhB,MAAM,CAACiB,UAAU,EAC5BjB,MAAM,CAACkB,WAAW,EAELlB,MAAM,CAACa,WAAW,EAKtCZ,WAAW,CAEhB;AAGD,IAAMkB,OAAO,GAAG,SAAVA,OAAO,CAAIC,KAA8H,EAAK;EAClJ,IAAMC,eAAe,GAAGhB,kBAAkB,EAAE;EAC5C,oBACE,KAAC,UAAU,kCAAKe,KAAK;IAAE,GAAG,EAAEC;EAAgB,GAAG;AAEnD,CAAC;AAED,eAAeF,OAAO"}
+{"version":3,"file":"NavItem.js","names":["styled","React","BREAKPOINTS","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","NavItemDiv","div","Regular","neutral_600","LARGE","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","primary_100","primary_800","NavItem","props"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled, {StyledComponentProps} from 'styled-components';\nimport React from 'react';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common';\n\nexport type StyledComponentPropsWithAs<\n  C extends string | React.ComponentType<any>,\n  T extends object,\n  O extends object,\n  A extends keyof any,\n  AsC extends string | React.ComponentType<any> = C,\n  FAsC extends string | React.ComponentType<any> = C\n> = StyledComponentProps<C, T, O, A, FAsC> & { as?: AsC | undefined; forwardedAs?: FAsC | undefined };\n\n\nconst NavItemDiv = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  ${BREAKPOINTS.LARGE} {\n    height: 80px;\n  }\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n\n    &:after {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    &:after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n    outline-offset: -4px;\n  }\n`;\n\n\nconst NavItem = (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, \"div\">) => {\n  return (\n    <NavItemDiv {...props} />\n  );\n};\n\nexport default NavItem;\n"],"mappings":";;;;;;AAAA,OAAOA,MAAM,MAA8B,mBAAmB;AAC9D,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAQC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC1D,SAAQC,iBAAiB,EAAEC,kBAAkB,QAAO,sBAAsB;AAC1E,SAAQC,SAAS,QAAO,qBAAqB;AAAC;AAa9C,IAAMC,UAAU,GAAGR,MAAM,CAACS,GAAG,goCACzBJ,iBAAiB,CAACC,kBAAkB,CAACI,OAAO,EAAEP,MAAM,CAACQ,WAAW,CAAC,EAMjET,WAAW,CAACU,KAAK,EAsBNL,SAAS,CAACM,MAAM,EACPV,MAAM,CAACW,UAAU,EAC5BX,MAAM,CAACY,WAAW,EAGLZ,MAAM,CAACa,WAAW,EAK/Bb,MAAM,CAACc,WAAW,EACPd,MAAM,CAACe,WAAW,EAGhBf,MAAM,CAACe,WAAW,EAK7BX,SAAS,CAACY,KAAK,EACNhB,MAAM,CAACiB,UAAU,EAC5BjB,MAAM,CAACkB,WAAW,EAGLlB,MAAM,CAACkB,WAAW,EAK7Bd,SAAS,CAACM,MAAM,EACPV,MAAM,CAACmB,WAAW,EAC7BnB,MAAM,CAACoB,WAAW,EAGLpB,MAAM,CAACoB,WAAW,EAMtCnB,WAAW,CAGhB;AAGD,IAAMoB,OAAO,GAAG,SAAVA,OAAO,CAAIC,KAA8H,EAAK;EAClJ,oBACE,KAAC,UAAU,oBAAKA,KAAK,EAAI;AAE7B,CAAC;AAED,eAAeD,OAAO"}

package/dist/Panel/Panel.cjs

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Panel = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styles = require("../styles");
+var _Button = require("../Button");
+var _icons = require("../icons");
+var _LinearProgress = require("../LinearProgress");
+var _rooks = require("rooks");
+var _types = require("../types");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["items", "order"],
+  _excluded2 = ["media", "content", "title", "order"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _Panel$propTypes;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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: 56px 32px 120px 32px;\n\n  p {\n    flex: 1;\n    color: ", ";\n  }\n\n  ", " {\n    gap: 32px;\n    padding: 56px 64px 120px 64px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), _styles.COLORS.neutral_20, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.LARGE);
+var Media = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.BREAKPOINTS.LARGE);
+var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n"])), _styles.BREAKPOINTS.LARGE);
+var Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.BREAKPOINTS.LARGE);
+var Panel = function Panel(props) {
+  var _currentItem$media, _currentItem$media2;
+  var _React$useState = _react.default.useState(0),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    currentImage = _React$useState2[0],
+    setCurrentImage = _React$useState2[1];
+  var isLargeScreen = (0, _rooks.useMediaMatch)(_styles.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 = (0, _objectWithoutProperties2.default)(_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 = (0, _objectWithoutProperties2.default)(_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__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    className: "".concat(rest.className || '', " ").concat(order || '', " "),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Media, {
+      children: [((_currentItem$media = currentItem.media) === null || _currentItem$media === void 0 ? void 0 : _currentItem$media.type) === 'image' && /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(Body, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+        children: currentItem.title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: currentItem.content
+      })]
+    }), props.type === 'carousel' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Footer, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        action: moveLeft,
+        variant: 'secondary',
+        shape: 'circular',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronLeft, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.LinearProgress, {
+        size: isLargeScreen ? _types.Size.Medium : _types.Size.Small,
+        className: 'progress',
+        value: currentImage + 1,
+        max: props.items.length,
+        type: _LinearProgress.LinearProgressType.Dots
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        action: moveRight,
+        variant: 'secondary',
+        shape: 'circular',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {})
+      })]
+    })]
+  }));
+};
+exports.Panel = Panel;
+Panel.propTypes = (_Panel$propTypes = {
+  type: _propTypes.default.oneOf(['default', 'carousel']),
+  media: _propTypes.default.oneOfType([_propTypes.default.shape({
+    type: _propTypes.default.oneOf(['image']).isRequired,
+    src: _propTypes.default.string.isRequired,
+    alt: _propTypes.default.string.isRequired,
+    fit: _propTypes.default.oneOf(['fill', 'fit'])
+  }), _propTypes.default.shape({
+    type: _propTypes.default.oneOf(['custom']).isRequired,
+    content: _propTypes.default.node.isRequired
+  })]),
+  title: _propTypes.default.string,
+  content: _propTypes.default.node
+}, (0, _defineProperty2.default)(_Panel$propTypes, "type", _propTypes.default.oneOf(['default'])), (0, _defineProperty2.default)(_Panel$propTypes, "order", _propTypes.default.oneOf(['default', 'reverse'])), (0, _defineProperty2.default)(_Panel$propTypes, "type", _propTypes.default.oneOf(['default', 'carousel'])), (0, _defineProperty2.default)(_Panel$propTypes, "type", _propTypes.default.oneOf(['carousel']).isRequired), (0, _defineProperty2.default)(_Panel$propTypes, "order", _propTypes.default.oneOf(['default', 'reverse'])), (0, _defineProperty2.default)(_Panel$propTypes, "items", _propTypes.default.arrayOf(_propTypes.default.shape({
+  media: _propTypes.default.oneOfType([_propTypes.default.shape({
+    type: _propTypes.default.oneOf(['image']).isRequired,
+    src: _propTypes.default.string.isRequired,
+    alt: _propTypes.default.string.isRequired,
+    fit: _propTypes.default.oneOf(['fill', 'fit'])
+  }), _propTypes.default.shape({
+    type: _propTypes.default.oneOf(['custom']).isRequired,
+    content: _propTypes.default.node.isRequired
+  })]),
+  title: _propTypes.default.string,
+  content: _propTypes.default.node
+}))), _Panel$propTypes);
+//# sourceMappingURL=Panel.cjs.map

package/dist/Panel/Panel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.cjs","names":["Wrapper","styled","div","COLORS","neutral_20","neutral_600","BREAKPOINTS","LARGE","Media","Body","Footer","Panel","props","React","useState","currentImage","setCurrentImage","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Size","Medium","Small","LinearProgressType","Dots"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\nimport styled from \"styled-components\";\nimport {BREAKPOINTS, COLORS} from \"../styles\";\nimport {IconButton} from \"../Button\";\nimport {SystemIcons} from \"../icons\";\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\nimport {useMediaMatch} from \"rooks\";\nimport {Size} from \"../types\";\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 56px 32px 120px 32px;\n\n  p {\n    flex: 1;\n    color: ${COLORS.neutral_600};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    gap: 32px;\n    padding: 56px 64px 120px 64px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n`;\n\nconst Media = styled.div`\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  ${BREAKPOINTS.LARGE} {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n`;\n\nconst Body = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  max-width: 320px;\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: 488px;\n  }\n\n`;\nconst Footer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n`;\n\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  type?: 'default' | 'carousel';\n}\n\ninterface PanelContent {\n  media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\n  title?: string;\n  content?: React.ReactNode;\n}\n\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\n  type?: 'default';\n  order?: 'default' | 'reverse';\n}\n\ninterface CarouselPanelProps extends BasePanelProps {\n  type: 'carousel';\n  order?: 'default' | 'reverse';\n  items?: PanelContent[];\n}\n\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\n\nexport const Panel = (props: PanelProps) => {\n\n  const [currentImage, setCurrentImage] = React.useState(0);\n  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  let rest: React.HTMLAttributes<HTMLDivElement> = {};\n  let order = undefined;\n  let media = undefined;\n  let title = '';\n  let content = undefined;\n  let items: PanelContent[] = [];\n\n\n  switch (props.type) {\n    case 'carousel':\n      ({items = [], order, ...rest} = props);\n      break;\n    case 'default':\n    default:\n      ({media, content, title = '', order, ...rest} = props)\n      break;\n  }\n\n\n  const moveLeft = () => {\n    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\n  }\n  const moveRight = () => {\n    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\n  }\n\n  const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\n\n  return (\n    <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\n      <Media>\n        {\n          currentItem.media?.type === 'image' &&\n            <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\n        }\n        {\n          currentItem.media?.type === 'custom' && currentItem.media.content\n        }\n      </Media>\n      <Body>\n        <h1>{currentItem.title}</h1>\n        <p>{currentItem.content}</p>\n      </Body>\n      {\n        props.type === 'carousel' &&\n          <Footer>\n              <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\n                  <SystemIcons.ChevronLeft/>\n              </IconButton>\n              <LinearProgress size={isLargeScreen ? Size.Medium : Size.Small}\n                              className={'progress'}\n                              value={currentImage + 1}\n                              max={props.items!.length }\n                              type={LinearProgressType.Dots}/>\n              <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\n                  <SystemIcons.ChevronRight/>\n              </IconButton>\n          </Footer>\n      }\n    </Wrapper>\n  )\n};\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA8B;AAAA;EAAA;AAAA;AAAA;AAAA;AAE9B,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,gdAGVC,cAAM,CAACC,UAAU,EAWpBD,cAAM,CAACE,WAAW,EAG3BC,mBAAW,CAACC,KAAK,CAQpB;AAED,IAAMC,KAAK,GAAGP,yBAAM,CAACC,GAAG,gfA0BpBI,mBAAW,CAACC,KAAK,CAUpB;AAED,IAAME,IAAI,GAAGR,yBAAM,CAACC,GAAG,iQASnBI,mBAAW,CAACC,KAAK,CAIpB;AACD,IAAMG,MAAM,GAAGT,yBAAM,CAACC,GAAG,4RAQrBI,mBAAW,CAACC,KAAK,CAOpB;AAyBM,IAAMI,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAiB,EAAK;EAAA;EAE1C,sBAAwCC,cAAK,CAACC,QAAQ,CAAC,CAAC,CAAC;IAAA;IAAlDC,YAAY;IAAEC,eAAe;EACpC,IAAMC,aAAa,GAAG,IAAAC,oBAAa,EAACZ,mBAAW,CAACC,KAAK,CAACY,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,IAAIC,IAA0C,GAAG,CAAC,CAAC;EACnD,IAAIC,KAAK,GAAGC,SAAS;EACrB,IAAIC,KAAK,GAAGD,SAAS;EACrB,IAAIE,KAAK,GAAG,EAAE;EACd,IAAIC,OAAO,GAAGH,SAAS;EACvB,IAAII,KAAqB,GAAG,EAAE;EAG9B,QAAQd,KAAK,CAACe,IAAI;IAChB,KAAK,UAAU;MAAA,aACmBf,KAAK;MAAA,0BAAnCc,KAAK;MAALA,KAAK,6BAAG,EAAE;MAAEL,KAAK,UAALA,KAAK;MAAKD,IAAI;MAAA;MAC5B;IACF,KAAK,SAAS;IACd;MAAA,cACkDR,KAAK;MAAnDW,KAAK,WAALA,KAAK;MAAEE,OAAO,WAAPA,OAAO;MAAA,4BAAED,KAAK;MAALA,KAAK,8BAAG,EAAE;MAAEH,KAAK,WAALA,KAAK;MAAKD,IAAI;MAAA;MAC5C;EAAM;EAIV,IAAMQ,QAAQ,GAAG,SAAXA,QAAQ,GAAS;IACrBhB,KAAK,CAACe,IAAI,KAAK,UAAU,IAAIX,eAAe,CAACD,YAAY,KAAK,CAAC,GAAGW,KAAK,CAACG,MAAM,GAAG,CAAC,GAAGd,YAAY,GAAG,CAAC,CAAC;EACxG,CAAC;EACD,IAAMe,SAAS,GAAG,SAAZA,SAAS,GAAS;IACtBlB,KAAK,CAACe,IAAI,KAAK,UAAU,IAAIX,eAAe,CAACD,YAAY,GAAG,CAAC,GAAGW,KAAK,CAACG,MAAM,GAAG,CAAC,GAAG,CAAC,GAAGd,YAAY,GAAG,CAAC,CAAC;EAC1G,CAAC;EAED,IAAMgB,WAAyB,GAAGnB,KAAK,CAACe,IAAI,KAAK,UAAU,GAAGD,KAAK,CAACX,YAAY,CAAC,GAAG;IAACQ,KAAK,EAALA,KAAK;IAAEC,KAAK,EAALA,KAAK;IAAEC,OAAO,EAAPA;EAAO,CAAC;EAE3G,oBACE,sBAAC,OAAO,kCAAKL,IAAI;IAAE,SAAS,YAAKA,IAAI,CAACY,SAAS,IAAI,EAAE,cAAIX,KAAK,IAAI,EAAE,MAAI;IAAA,wBACtE,sBAAC,KAAK;MAAA,WAEF,uBAAAU,WAAW,CAACR,KAAK,uDAAjB,mBAAmBI,IAAI,MAAK,OAAO,iBACjC;QAAK,SAAS,EAAEI,WAAW,CAACR,KAAK,CAACU,GAAI;QAAC,GAAG,EAAEF,WAAW,CAACR,KAAK,CAACW,GAAI;QAAC,GAAG,EAAEH,WAAW,CAACR,KAAK,CAACY;MAAI,EAAE,EAGlG,wBAAAJ,WAAW,CAACR,KAAK,wDAAjB,oBAAmBI,IAAI,MAAK,QAAQ,IAAII,WAAW,CAACR,KAAK,CAACE,OAAO;IAAA,EAE7D,eACR,sBAAC,IAAI;MAAA,wBACH;QAAA,UAAKM,WAAW,CAACP;MAAK,EAAM,eAC5B;QAAA,UAAIO,WAAW,CAACN;MAAO,EAAK;IAAA,EACvB,EAELb,KAAK,CAACe,IAAI,KAAK,UAAU,iBACvB,sBAAC,MAAM;MAAA,wBACH,qBAAC,kBAAU;QAAC,MAAM,EAAEC,QAAS;QAAC,OAAO,EAAE,WAAY;QAAC,KAAK,EAAE,UAAW;QAAA,uBAClE,qBAAC,kBAAW,CAAC,WAAW;MAAE,EACjB,eACb,qBAAC,8BAAc;QAAC,IAAI,EAAEX,aAAa,GAAGmB,WAAI,CAACC,MAAM,GAAGD,WAAI,CAACE,KAAM;QAC/C,SAAS,EAAE,UAAW;QACtB,KAAK,EAAEvB,YAAY,GAAG,CAAE;QACxB,GAAG,EAAEH,KAAK,CAACc,KAAK,CAAEG,MAAQ;QAC1B,IAAI,EAAEU,kCAAkB,CAACC;MAAK,EAAE,eAChD,qBAAC,kBAAU;QAAC,MAAM,EAAEV,SAAU;QAAC,OAAO,EAAE,WAAY;QAAC,KAAK,EAAE,UAAW;QAAA,uBACnE,qBAAC,kBAAW,CAAC,YAAY;MAAE,EAClB;IAAA,EACR;EAAA,GAEL;AAEd,CAAC;AAAC;AAAA;EAxFAH,IAAI,4BAAG,SAAS,EAAG,UAAU;EAI7BJ,KAAK;IAAKI,IAAI,4BAAE,OAAO;IAAEO,GAAG;IAAUC,GAAG;IAAUF,GAAG,4BAAG,MAAM,EAAG,KAAK;EAAA;IAAON,IAAI,4BAAE,QAAQ;IAAEF,OAAO;EAAA;EACrGD,KAAK;EACLC,OAAO;AAAA,qFAIA,SAAS,wFACR,SAAS,EAAG,SAAS,uFAXtB,SAAS,EAAG,UAAU,uFAevB,UAAU,mGACR,SAAS,EAAG,SAAS;EAZ7BF,KAAK;IAAKI,IAAI,4BAAE,OAAO;IAAEO,GAAG;IAAUC,GAAG;IAAUF,GAAG,4BAAG,MAAM,EAAG,KAAK;EAAA;IAAON,IAAI,4BAAE,QAAQ;IAAEF,OAAO;EAAA;EACrGD,KAAK;EACLC,OAAO;AAAA"}

package/dist/Panel/Panel.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    type?: 'default' | 'carousel';
+}
+interface PanelContent {
+    media?: {
+        type: 'image';
+        src: string;
+        alt: string;
+        fit?: 'fill' | 'fit';
+    } | {
+        type: 'custom';
+        content: React.ReactNode;
+    };
+    title?: string;
+    content?: React.ReactNode;
+}
+interface DefaultPanelProps extends BasePanelProps, PanelContent {
+    type?: 'default';
+    order?: 'default' | 'reverse';
+}
+interface CarouselPanelProps extends BasePanelProps {
+    type: 'carousel';
+    order?: 'default' | 'reverse';
+    items?: PanelContent[];
+}
+export type PanelProps = DefaultPanelProps | CarouselPanelProps;
+export declare const Panel: (props: PanelProps) => JSX.Element;
+export {};

package/dist/Panel/Panel.js

@@ -0,0 +1,131 @@
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import styled from "styled-components";
+import { BREAKPOINTS, COLORS } 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: 56px 32px 120px 32px;\n\n  p {\n    flex: 1;\n    color: ", ";\n  }\n\n  ", " {\n    gap: 32px;\n    padding: 56px 64px 120px 64px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), COLORS.neutral_20, COLORS.neutral_600, 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  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n"])), BREAKPOINTS.LARGE);
+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("h1", {
+        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.Medium : Size.Small,
+        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