@kvdbil/components 3.3.5-4 → 3.4.0

package/esm/components/DayPicker/style.js

@@ -0,0 +1,226 @@
+import{css as e}from"styled-components";var a=e`
+  /* DayPicker styles */
+
+  .DayPicker {
+    display: inline-block;
+    font-size: 1rem;
+  }
+
+  .DayPicker-wrapper {
+    position: relative;
+
+    flex-direction: row;
+    padding-bottom: 1em;
+
+    -webkit-user-select: none;
+
+    -moz-user-select: none;
+
+    -ms-user-select: none;
+
+    user-select: none;
+  }
+
+  .DayPicker-Months {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .DayPicker-Month {
+    display: table;
+    margin: 0 1em;
+    margin-top: 1em;
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    -webkit-user-select: none;
+
+    -moz-user-select: none;
+
+    -ms-user-select: none;
+
+    user-select: none;
+  }
+
+  .DayPicker-NavBar {
+  }
+
+  .DayPicker-NavButton {
+    position: absolute;
+    top: 1em;
+    right: 1.5em;
+    left: auto;
+
+    display: inline-block;
+    margin-top: 2px;
+    width: 1.25em;
+    height: 1.25em;
+    background-position: center;
+    background-size: 50%;
+    background-repeat: no-repeat;
+    color: #8b9898;
+    cursor: pointer;
+  }
+
+  .DayPicker-NavButton:hover {
+    opacity: 0.8;
+  }
+
+  .DayPicker-NavButton--prev {
+    margin-right: 1.5em;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC');
+  }
+
+  .DayPicker-NavButton--next {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAXRJREFUWAnN119ugjAcwPHWzJ1gnmxzB/BBE0n24m4xfNkTaOL7wOtsl3AXMMb+Vjaa1BG00N8fSEibPpAP3xAKKs2yjzTPH9RAjhEo9WzPr/Vm8zgE0+gXATAxxuxtqeJ9t5tIwv5AtQAApsfT6TPdbp+kUBcgVwvO51KqVhMkXKsVJFXrOkigVhCIs1Y4iKlWZxB1rX4gwlpRIIpa8SDkWmggrFq4IIRaJKCYWnSgnrXIQV1r8YD+1Vrn+bReagysIFfLABRt31v8oBu1xEBttfRbltmfjgEcWh9snUS2kNdBK6WN1vrOWxObWsz+fjxevsxmB1GQDfINWiev83nhaoiB/CoOU438oPrhXS0WpQ9xc1ZQWxWHqUYe0I0qrKCQKjygDlXIQV2r0IF6ViEBxVTBBSFUQQNhVYkHIVeJAtkNsbQ7c1LtzP6FsObhb2rCKv7NBIGoq4SDmKoEgTirXAcJVGkFSVVpgoSrXICGUMUH/QBZNSUy5XWUhwAAAABJRU5ErkJggg==');
+  }
+
+  .DayPicker-NavButton--interactionDisabled {
+    display: none;
+  }
+
+  .DayPicker-Caption {
+    display: table-caption;
+    margin-bottom: 0.5em;
+    padding: 0 0.5em;
+    text-align: left;
+  }
+
+  .DayPicker-Caption > div {
+    font-weight: 500;
+    font-size: 1.15em;
+  }
+
+  .DayPicker-Weekdays {
+    display: table-header-group;
+    margin-top: 1em;
+  }
+
+  .DayPicker-WeekdaysRow {
+    display: table-row;
+  }
+
+  .DayPicker-Weekday {
+    display: table-cell;
+    padding: 0.5em;
+    color: #8b9898;
+    text-align: center;
+    font-size: 0.875em;
+  }
+
+  .DayPicker-Weekday abbr[title] {
+    border-bottom: none;
+    text-decoration: none;
+  }
+
+  .DayPicker-Body {
+    display: table-row-group;
+  }
+
+  .DayPicker-Week {
+    display: table-row;
+  }
+
+  .DayPicker-Day {
+    display: table-cell;
+    padding: 0.5em;
+    border-radius: 50%;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .DayPicker-WeekNumber {
+    display: table-cell;
+    padding: 0.5em;
+    min-width: 1em;
+    border-right: 1px solid #eaecec;
+    color: #8b9898;
+    vertical-align: middle;
+    text-align: right;
+    font-size: 0.75em;
+    cursor: pointer;
+  }
+
+  .DayPicker--interactionDisabled .DayPicker-Day {
+    cursor: default;
+  }
+
+  .DayPicker-Footer {
+    padding-top: 0.5em;
+  }
+
+  .DayPicker-TodayButton {
+    border: none;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    color: #4a90e2;
+    font-size: 0.875em;
+    cursor: pointer;
+  }
+
+  /* Default modifiers */
+
+  .DayPicker-Day--today {
+    color: #d0021b;
+    font-weight: 700;
+  }
+
+  .DayPicker-Day--outside {
+    color: #8b9898;
+    cursor: default;
+  }
+
+  .DayPicker-Day--disabled {
+    color: #dce0e0;
+    cursor: default;
+    /* background-color: #eff1f1; */
+  }
+
+  /* Example modifiers */
+
+  .DayPicker-Day--sunday {
+    background-color: #f7f8f8;
+  }
+
+  .DayPicker-Day--sunday:not(.DayPicker-Day--today) {
+    color: #dce0e0;
+  }
+
+  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
+    position: relative;
+
+    background-color: #4a90e2;
+    color: #f0f8ff;
+  }
+
+  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
+    background-color: #51a0fa;
+  }
+
+  .DayPicker:not(.DayPicker--interactionDisabled)
+    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
+    background-color: #f0f8ff;
+  }
+
+  /* DayPickerInput */
+
+  .DayPickerInput {
+    display: inline-block;
+  }
+
+  .DayPickerInput-OverlayWrapper {
+    position: relative;
+  }
+
+  .DayPickerInput-Overlay {
+    position: absolute;
+    left: 0;
+    z-index: 1;
+
+    background: white;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  }
+`;export{a as default};

package/esm/components/Dialog/index.js

@@ -1,51 +1,27 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { mq } from '../../shared/media-queries.js';
-import { Button } from '../Button/index.js';
-import { Modal } from '../Modal/index.js';
-import { TinyTitle } from '../../typography/Heading/index.js';
-import '../../theme.js';
-import '../Spinner/index.js';
-import '../../typography/ButtonText/index.js';
-import 'react';
-import 'react-dom';
-import 'react-transition-group';
-import '../Icons/Close.js';
-
-const Content = styled.div `
+import t from"react";import e from"styled-components";import{mq as x}from"../../shared/media-queries.js";import{Button as a}from"../Button/index.js";import{Modal as h}from"../Modal/index.js";import{TinyTitle as g}from"../../typography/Heading/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"react-dom";import"react-transition-group";import"../Icons/Close.js";const j=e.div`
   padding-top: 1rem;
-`;
-const Header = styled.div `
+`,v=e.div`
   top: 20px;
   left: 32px;
   position: absolute;
-`;
-const Title = styled(TinyTitle) `
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+`,w=e(g)`
+  font-weight: ${({theme:o})=>o.typography.fontAlternativeRegularWeight};
   margin: 0;
-`;
-const ButtonWrapper = styled.div `
+`,E=e.div`
   display: flex;
   justify-content: space-between;
-  ${mq('tablet')} {
+  ${x("tablet")} {
     justify-content: flex-start;
   }
   overflow-x: hidden;
-`;
-const SecondaryActionButton = styled(Button) `
+`,B=e(a)`
   overflow-x: hidden;
   margin-right: 2rem;
   justify-content: center;
   width: 100%;
   max-width: 110px;
-`;
-const PrimaryActionButton = styled(Button) `
+`,C=e(a)`
   justify-content: center;
   width: 100%;
   max-width: 245px;
-`;
-const Dialog = ({ isOpen, title, children, modalStyles, titleStyles, primaryButtonText, primaryButtonStyles, secondaryButtonStyles, secondaryButtonText, primaryButtonAction, secondaryButtonAction, onClose, }) => {
-    return (jsxs(Modal, Object.assign({ contentStyles: modalStyles, isOpen: isOpen, onClose: onClose }, { children: [title && (jsx(Header, { children: jsx(Title, Object.assign({ style: titleStyles }, { children: title }), void 0) }, void 0)), jsx(Content, { children: children }, void 0), jsxs(ButtonWrapper, { children: [secondaryButtonAction && (jsx(SecondaryActionButton, Object.assign({ style: secondaryButtonStyles, onClick: secondaryButtonAction, variant: "outline", color: "neutral" }, { children: secondaryButtonText }), void 0)), primaryButtonAction && (jsx(PrimaryActionButton, Object.assign({ style: primaryButtonStyles, onClick: primaryButtonAction, variant: "solid", color: "success" }, { children: primaryButtonText }), void 0))] }, void 0)] }), void 0));
-};
-
-export { Dialog, Dialog as default };
+`,l=({isOpen:o,title:n,children:s,modalStyles:m,titleStyles:c,primaryButtonText:p,primaryButtonStyles:d,secondaryButtonStyles:u,secondaryButtonText:f,primaryButtonAction:r,secondaryButtonAction:i,onClose:y})=>t.createElement(h,{contentStyles:m,isOpen:o,onClose:y},n&&t.createElement(v,null,t.createElement(w,{style:c},n)),t.createElement(j,null,s),t.createElement(E,null,i&&t.createElement(B,{style:u,onClick:i,variant:"outline",color:"neutral"},f),r&&t.createElement(C,{style:d,onClick:r,variant:"solid",color:"success"},p)));export{l as Dialog,l as default};

package/esm/components/ErrorMessage/index.js

@@ -1,16 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-
-const ErrorContainer = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
-  background: ${({ theme }) => theme.colors.error.main};
+import a from"react";import n from"styled-components";const i=n.div`
+  font-family: ${({theme:t})=>t.typography.fontAlternativeFamily};
+  font-weight: ${({theme:t})=>t.typography.fontAlternativeRegularWeight};
+  background: ${({theme:t})=>t.colors.error.main};
   color: white;
   border-radius: 0.25rem;
   font-size: 13px;
   padding: 10px;
-  ${({ centered }) => centered && `text-align: center;`}
-`;
-const ErrorMessage = ({ children, centered, ...props }) => (jsx(ErrorContainer, Object.assign({ centered: centered }, props, { children: children }), void 0));
-
-export { ErrorMessage, ErrorMessage as default };
+  ${({centered:t})=>t&&"text-align: center;"}
+`,e=({children:t,centered:r,...o})=>a.createElement(i,{centered:r,...o},t);export{e as ErrorMessage,e as default};

package/esm/components/FieldLabel.js

@@ -1,53 +1,34 @@
-import styled, { css } from 'styled-components';
-
-const activePadding = '0.5rem';
-const activeStyles = (translateY) => css `
-  background-color: ${props => props.theme.colors.background.light};
-  transform: scale(0.75) translateY(${translateY});
+import r,{css as t}from"styled-components";const l="0.5rem",s=e=>t`
+  background-color: ${o=>o.theme.colors.background.light};
+  transform: scale(0.75) translateY(${e});
   transform-origin: 0 0;
-  padding: 0 ${activePadding};
-  left: ${activePadding};
-`;
-const focusStyles = css `
-  color: ${props => props.theme.colors.text.dark};
-`;
-const disabledStyles = css `
-  color: ${props => props.theme.colors.gray.light1};
-  background-color: ${props => props.theme.colors.background.light};
-`;
-const errorStyles = css `
-  color: ${props => props.theme.colors.error.main};
-`;
-const centerStyles = css `
+  padding: 0 ${l};
+  left: ${l};
+  color: ${({theme:o})=>o.colors.text.dark};
+`,c=t`
+  color: ${e=>e.theme.colors.text.dark};
+`,n=t`
+  color: ${e=>e.theme.colors.gray.light1};
+  background-color: ${e=>e.theme.colors.background.light};
+`,a=t`
   text-align: center;
   width: 100%;
   left: 0;
-`;
-// eslint-disable-next-line prettier/prettier
-const Label = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+`,i=r.label`
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   pointer-events: none;
   position: absolute;
   z-index: 1;
-  top: ${props => (props.height ? `${props.height}rem` : '0.9rem')};
-
-  /* Left padding on input + one character size */
+  top: ${e=>e.height?`${e.height}rem`:"0.9rem"};
   left: calc(0.75rem + 2px);
   transition: 150ms;
-
-  /* Text styles */
   height: 16px;
   line-height: 16px;
   font-size: 16px;
+  color: ${e=>e.theme.colors.gray.dark5};
 
-  color: ${props => props.theme.colors.gray.dark1};
-
-  ${props => props.centered && centerStyles}
-  ${props => (props.hasValue || props.isFocused) &&
-    activeStyles(props.height ? `-${(props.height + 0.25) * 1.35}rem` : '-1.75rem')}
-  ${props => props.isFocused && focusStyles}
-  ${props => props.disabled && disabledStyles}
-  ${props => props.hasError && errorStyles}
-`;
-
-export { Label };
+  ${e=>e.centered&&a}
+  ${e=>(e.hasValue||e.isFocused)&&s(e.height?`-${(e.height+.25)*1.35}rem`:"-1.75rem")}
+  ${e=>e.isFocused&&c}
+  ${e=>e.disabled&&n}
+`;export{i as Label};

package/esm/components/Header/Hamburger.js

@@ -1,8 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { mq } from '../../shared/media-queries.js';
-
-const IconWrapper = styled.button `
+import t from"react";import a from"styled-components";import{mq as r}from"../../shared/media-queries.js";const o=a.button`
   appearance: none;
   cursor: pointer;
   background-color: transparent;
@@ -12,27 +8,24 @@ const IconWrapper = styled.button `
   align-items: center;
   margin-right: 1.5rem;
   margin-left: auto;
-  ${mq('laptop')} {
+  ${r("laptop")} {
     display: none;
   }
 
   svg {
     width: 1.5rem;
     height: 1.5rem;
-    fill: ${({ theme }) => theme.colors.text.dark};
+    fill: ${({theme:e})=>e.colors.text.dark};
   }
   span {
     display: none;
-    font-family: ${({ theme }) => theme.typography.fontBaseFamily};
-    font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+    font-family: ${({theme:e})=>e.typography.fontBaseFamily};
+    font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
     font-size: 1rem;
     margin-right: 0.75rem;
 
-    ${mq('tablet')} {
+    ${r("tablet")} {
       display: inline;
     }
   }
-`;
-const Hamburger = ({ onClick = () => { }, text }) => (jsxs(IconWrapper, Object.assign({ onClick: onClick }, { children: [jsx("span", { children: text }, void 0), jsxs("svg", { children: [jsx("symbol", Object.assign({ id: "icon-hamburger", viewBox: "0 0 16 12" }, { children: jsx("path", { d: "M0 0h16v2H0zm0 5h16v2H0zm0 5h16v2H0z" }, void 0) }), void 0), jsx("use", { xlinkHref: "#icon-hamburger" }, void 0)] }, void 0)] }), void 0));
-
-export { Hamburger as default };
+`,l=({onClick:e=()=>{},text:n})=>t.createElement(o,{onClick:e},t.createElement("span",null,n),t.createElement("svg",null,t.createElement("symbol",{id:"icon-hamburger",viewBox:"0 0 16 12"},t.createElement("path",{d:"M0 0h16v2H0zm0 5h16v2H0zm0 5h16v2H0z"})),t.createElement("use",{xlinkHref:"#icon-hamburger"})));export{l as default};

package/esm/components/Header/Link.js

@@ -1,11 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { mq } from '../../shared/media-queries.js';
-import theme from '../../theme.js';
-
-const LinkItem = styled.li `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+import r from"react";import o from"styled-components";import{mq as m}from"../../shared/media-queries.js";import t from"../../theme.js";const l=o.li`
+  font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
+  font-weight: ${({theme:e})=>e.typography.fontAlternativeRegularWeight};
   font-size: 1rem;
   display: flex;
   align-items: center;
@@ -19,25 +14,21 @@ const LinkItem = styled.li `
     display: none;
   }
 
-  ${mq('laptop')} {
+  ${m("laptop")} {
     &:nth-child(n + 4) {
       display: inherit;
     }
   }
-`;
-const CommonLink = styled.a `
+`,s=o.a`
   border-radius: 0.25rem;
   padding: 0.75rem 1.5rem;
   transition: 200ms;
-  color: ${theme.colors.text.dark};
+  color: ${t.colors.text.dark};
   text-decoration: none;
 
   &:hover,
   &:active {
-    color: ${theme.colors.primary.main};
-    background: ${theme.colors.gray.light4};
+    color: ${t.colors.primary.main};
+    background: ${t.colors.gray.light4};
   }
-`;
-const Link = ({ to, component, text, ...rest }) => (jsx(LinkItem, { children: component || (jsx(CommonLink, Object.assign({ href: to }, rest, { children: text }), void 0)) }, void 0));
-
-export { Link as default };
+`,c=({to:e,component:i,text:n,...a})=>r.createElement(l,null,i||r.createElement(s,{href:e,...a},n));export{c as default};

package/esm/components/Header/index.js

@@ -1,56 +1,42 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { mq } from '../../shared/media-queries.js';
-import theme from '../../theme.js';
-import { Logo } from '../Logo/index.js';
-import Hamburger from './Hamburger.js';
-import Link from './Link.js';
-import '../Logo/LogoSv.js';
-import '../Logo/LogoEn.js';
-
-const LogoWrapper = styled.a `
+import e from"react";import t from"styled-components";import{mq as r}from"../../shared/media-queries.js";import n from"../../theme.js";import{Logo as y}from"../Logo/index.js";import k from"./Hamburger.js";import i from"./Link.js";import"../Logo/LogoSv.js";import"../Logo/LogoEn.js";const b=t.a`
   cursor: pointer;
   padding: 0 0.625rem;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: ${theme.colors.background.light};
+  background: ${n.colors.background.light};
 
-  ${mq('tablet')} {
+  ${r("tablet")} {
     display: block;
     width: auto;
     padding: 0 1.5rem 0 0;
   }
-`;
-const HeaderContainer = styled.nav `
+`,h=t.nav`
   width: 100%;
   z-index: 17;
   position: fixed;
   top: 0;
   left: 0;
-  color: ${theme.colors.text.dark};
-  background-color: ${theme.colors.background.light};
+  color: ${n.colors.text.dark};
+  background-color: ${n.colors.background.light};
   transition: 300ms;
-`;
-const HeaderContent = styled.div `
+`,j=t.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  background-color: ${theme.colors.background.gray};
+  background-color: ${n.colors.background.gray};
 
-  ${mq('tablet')} {
-    background-color: ${theme.colors.background.light};
+  ${r("tablet")} {
+    background-color: ${n.colors.background.light};
     flex-direction: row;
     padding: 0em 1.5em;
   }
-`;
-const MainContent = styled.div `
+`,E=t.div`
   display: flex;
   width: 100%;
-`;
-const PrimaryLinks = styled.ul `
+`,L=t.ul`
   display: flex;
   justify-content: space-around;
   width: 100%;
@@ -59,25 +45,19 @@ const PrimaryLinks = styled.ul `
   padding: 0;
   flex-grow: 1;
 
-  ${mq('tablet')} {
+  ${r("tablet")} {
     justify-content: flex-start;
     padding: 0.5em 0;
     display: flex;
     padding: 0;
     flex: 1;
   }
-`;
-const SecondaryLinks = styled.ul `
+`,$=t.ul`
   display: none;
 
-  ${mq('laptop')} {
+  ${r("laptop")} {
     padding: 0.5em 0;
     display: flex;
     padding: 0;
   }
-`;
-const Header = ({ locale, primaryLinks, secondaryLinks, menuIconText, onMenuClick, onHeaderClick, forwardRef, css = '', ...props }) => {
-    return (jsx(HeaderContainer, Object.assign({ css: css }, props, { ref: forwardRef }, { children: jsxs(HeaderContent, { children: [jsx(LogoWrapper, Object.assign({ onClick: onHeaderClick }, { children: jsx(Logo, { locale: locale }, void 0) }), void 0), jsxs(MainContent, { children: [jsx(PrimaryLinks, { children: primaryLinks.map((link, index) => (jsx(Link, Object.assign({}, link), link.text || index))) }, void 0), jsx(Hamburger, { text: menuIconText, onClick: onMenuClick }, void 0)] }, void 0), jsx(SecondaryLinks, { children: secondaryLinks.map((link, index) => (jsx(Link, Object.assign({}, link), link.text || index))) }, void 0)] }, void 0) }), void 0));
-};
-
-export { Header, Header as default };
+`,l=({locale:d,primaryLinks:c,secondaryLinks:s,menuIconText:m,onMenuClick:p,onHeaderClick:g,forwardRef:u,css:f="",...x})=>e.createElement(h,{css:f,...x,ref:u},e.createElement(j,null,e.createElement(b,{onClick:g},e.createElement(y,{locale:d})),e.createElement(E,null,e.createElement(L,null,c.map((o,a)=>e.createElement(i,{key:o.text||a,...o}))),e.createElement(k,{text:m,onClick:p})),e.createElement($,null,s.map((o,a)=>e.createElement(i,{key:o.text||a,...o})))));export{l as Header,l as default};

package/esm/components/Hero/index.js

@@ -1,42 +1,26 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import theme from '../../theme.js';
-
-const Root = styled.div `
+import t from"react";import o from"styled-components";import i from"../../theme.js";const d=o.div`
   position: relative;
   height: 60vh;
   max-height: 600px;
-  background-color: ${theme.colors.primary.main};
+  background-color: ${i.colors.primary.main};
   background-size: cover;
-`;
-const Content = styled.div `
+`,m=o.div`
   position: relative;
   display: flex;
   padding: 50px;
   z-index: 1;
-`;
-const Video = styled.iframe `
+`,p=o.iframe`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-`;
-const Image = styled.img `
+`,u=o.img`
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   object-fit: cover;
-  background-color: ${theme.colors.primary.main};
-`;
-function Hero(props) {
-    const { imageProps, containerStyle, videoProps, children } = props;
-    const imageStyle = {
-        objectPosition: `${(imageProps === null || imageProps === void 0 ? void 0 : imageProps.x) ? imageProps.x : '50%'} ${(imageProps === null || imageProps === void 0 ? void 0 : imageProps.y) ? imageProps.y : '50%'}`,
-    };
-    return (jsx(Root, Object.assign({ style: containerStyle }, { children: videoProps ? (jsx(Video, { "data-testid": "hero-video", title: "video-frame", src: videoProps.src, width: "100%", height: "100%", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }, void 0)) : (jsxs(Fragment, { children: [jsx(Image, { src: imageProps === null || imageProps === void 0 ? void 0 : imageProps.src, alt: "Hero background", style: imageStyle }, void 0), jsx(Content, { children: children }, void 0)] }, void 0)) }), void 0));
-}
-
-export { Hero, Hero as default };
+  background-color: ${i.colors.primary.main};
+`;function l(a){const{imageProps:e,containerStyle:n,videoProps:r,children:c}=a,s={objectPosition:`${(e==null?void 0:e.x)?e.x:"50%"} ${(e==null?void 0:e.y)?e.y:"50%"}`};return t.createElement(d,{style:n},r?t.createElement(p,{"data-testid":"hero-video",title:"video-frame",src:r.src,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):t.createElement(t.Fragment,null,t.createElement(u,{src:e==null?void 0:e.src,alt:"Hero background",style:s}),t.createElement(m,null,c)))}export{l as Hero,l as default};