@kvdbil/components 3.3.5-4 → 3.4.0

package/cjs/components/Dialog/index.js

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

package/cjs/components/ErrorMessage/index.js

@@ -1,25 +1,10 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const ErrorContainer = styled__default['default'].div `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
-  background: ${({ theme }) => theme.colors.error.main};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function r(i){return i&&typeof i=="object"&&"default"in i?i:{default:i}}var o=r(e);const n=r(t).default.div`
+  font-family: ${({theme:i})=>i.typography.fontAlternativeFamily};
+  font-weight: ${({theme:i})=>i.typography.fontAlternativeRegularWeight};
+  background: ${({theme:i})=>i.colors.error.main};
   color: white;
   border-radius: 0.25rem;
   font-size: 13px;
   padding: 10px;
-  ${({ centered }) => centered && `text-align: center;`}
-`;
-const ErrorMessage = ({ children, centered, ...props }) => (jsxRuntime.jsx(ErrorContainer, Object.assign({ centered: centered }, props, { children: children }), void 0));
-
-exports.ErrorMessage = ErrorMessage;
-exports['default'] = ErrorMessage;
+  ${({centered:i})=>i&&"text-align: center;"}
+`,a=({children:i,centered:d,...l})=>o.default.createElement(n,{centered:d,...l},i);exports.ErrorMessage=a,exports.default=a;

package/cjs/components/FieldLabel.js

@@ -1,61 +1,34 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const activePadding = '0.5rem';
-const activeStyles = (translateY) => styled.css `
-  background-color: ${props => props.theme.colors.background.light};
-  transform: scale(0.75) translateY(${translateY});
-  transform-origin: 0 0;
-  padding: 0 ${activePadding};
-  left: ${activePadding};
-`;
-const focusStyles = styled.css `
-  color: ${props => props.theme.colors.text.dark};
-`;
-const disabledStyles = styled.css `
-  color: ${props => props.theme.colors.gray.light1};
-  background-color: ${props => props.theme.colors.background.light};
-`;
-const errorStyles = styled.css `
-  color: ${props => props.theme.colors.error.main};
-`;
-const centerStyles = styled.css `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");function t(c){return c&&typeof c=="object"&&"default"in c?c:{default:c}}var o=t(e);const r=e.css`
+  color: ${c=>c.theme.colors.text.dark};
+`,s=e.css`
+  color: ${c=>c.theme.colors.gray.light1};
+  background-color: ${c=>c.theme.colors.background.light};
+`,l=e.css`
   text-align: center;
   width: 100%;
   left: 0;
-`;
-// eslint-disable-next-line prettier/prettier
-const Label = styled__default['default'].div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+`,a=o.default.label`
+  font-family: ${({theme:c})=>c.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: ${c=>c.height?`${c.height}rem`:"0.9rem"};
   left: calc(0.75rem + 2px);
   transition: 150ms;
-
-  /* Text styles */
   height: 16px;
   line-height: 16px;
   font-size: 16px;
+  color: ${c=>c.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}
-`;
-
-exports.Label = Label;
+  ${c=>c.centered&&l}
+  ${c=>{return(c.hasValue||c.isFocused)&&(i=c.height?`-${1.35*(c.height+.25)}rem`:"-1.75rem",e.css`
+  background-color: ${n=>n.theme.colors.background.light};
+  transform: scale(0.75) translateY(${i});
+  transform-origin: 0 0;
+  padding: 0 ${"0.5rem"};
+  left: ${"0.5rem"};
+  color: ${({theme:n})=>n.colors.text.dark};
+`);var i}}
+  ${c=>c.isFocused&&r}
+  ${c=>c.disabled&&s}
+`;exports.Label=a;

package/cjs/components/Header/Hamburger.js

@@ -1,16 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('styled-components');
-var shared_mediaQueries = require('../../shared/media-queries.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const IconWrapper = styled__default['default'].button `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../shared/media-queries.js");function a(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var n=a(e);const l=a(t).default.button`
   appearance: none;
   cursor: pointer;
   background-color: transparent;
@@ -20,27 +8,24 @@ const IconWrapper = styled__default['default'].button `
   align-items: center;
   margin-right: 1.5rem;
   margin-left: auto;
-  ${shared_mediaQueries.mq('laptop')} {
+  ${r.mq("laptop")} {
     display: none;
   }
 
   svg {
     width: 1.5rem;
     height: 1.5rem;
-    fill: ${({ theme }) => theme.colors.text.dark};
+    fill: ${({theme:o})=>o.colors.text.dark};
   }
   span {
     display: none;
-    font-family: ${({ theme }) => theme.typography.fontBaseFamily};
-    font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+    font-family: ${({theme:o})=>o.typography.fontBaseFamily};
+    font-weight: ${({theme:o})=>o.typography.fontBaseBoldWeight};
     font-size: 1rem;
     margin-right: 0.75rem;
 
-    ${shared_mediaQueries.mq('tablet')} {
+    ${r.mq("tablet")} {
       display: inline;
     }
   }
-`;
-const Hamburger = ({ onClick = () => { }, text }) => (jsxRuntime.jsxs(IconWrapper, Object.assign({ onClick: onClick }, { children: [jsxRuntime.jsx("span", { children: text }, void 0), jsxRuntime.jsxs("svg", { children: [jsxRuntime.jsx("symbol", Object.assign({ id: "icon-hamburger", viewBox: "0 0 16 12" }, { children: jsxRuntime.jsx("path", { d: "M0 0h16v2H0zm0 5h16v2H0zm0 5h16v2H0z" }, void 0) }), void 0), jsxRuntime.jsx("use", { xlinkHref: "#icon-hamburger" }, void 0)] }, void 0)] }), void 0));
-
-exports['default'] = Hamburger;
+`;exports.default=({onClick:o=()=>{},text:i})=>n.default.createElement(l,{onClick:o},n.default.createElement("span",null,i),n.default.createElement("svg",null,n.default.createElement("symbol",{id:"icon-hamburger",viewBox:"0 0 16 12"},n.default.createElement("path",{d:"M0 0h16v2H0zm0 5h16v2H0zm0 5h16v2H0z"})),n.default.createElement("use",{xlinkHref:"#icon-hamburger"})));

package/cjs/components/Header/Link.js

@@ -1,19 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('styled-components');
-var shared_mediaQueries = require('../../shared/media-queries.js');
-var theme = require('../../theme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const LinkItem = styled__default['default'].li `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../shared/media-queries.js"),a=require("../../theme.js");function i(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var o=i(e),l=i(t);const n=l.default.li`
+  font-family: ${({theme:s})=>s.typography.fontAlternativeFamily};
+  font-weight: ${({theme:s})=>s.typography.fontAlternativeRegularWeight};
   font-size: 1rem;
   display: flex;
   align-items: center;
@@ -27,25 +14,21 @@ const LinkItem = styled__default['default'].li `
     display: none;
   }
 
-  ${shared_mediaQueries.mq('laptop')} {
+  ${r.mq("laptop")} {
     &:nth-child(n + 4) {
       display: inherit;
     }
   }
-`;
-const CommonLink = styled__default['default'].a `
+`,d=l.default.a`
   border-radius: 0.25rem;
   padding: 0.75rem 1.5rem;
   transition: 200ms;
-  color: ${theme['default'].colors.text.dark};
+  color: ${a.default.colors.text.dark};
   text-decoration: none;
 
   &:hover,
   &:active {
-    color: ${theme['default'].colors.primary.main};
-    background: ${theme['default'].colors.gray.light4};
+    color: ${a.default.colors.primary.main};
+    background: ${a.default.colors.gray.light4};
   }
-`;
-const Link = ({ to, component, text, ...rest }) => (jsxRuntime.jsx(LinkItem, { children: component || (jsxRuntime.jsx(CommonLink, Object.assign({ href: to }, rest, { children: text }), void 0)) }, void 0));
-
-exports['default'] = Link;
+`;exports.default=({to:s,component:u,text:c,...f})=>o.default.createElement(n,null,u||o.default.createElement(d,{href:s,...f},c));

package/cjs/components/Header/index.js

@@ -1,64 +1,42 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('styled-components');
-var shared_mediaQueries = require('../../shared/media-queries.js');
-var theme = require('../../theme.js');
-var components_Logo_index = require('../Logo/index.js');
-var components_Header_Hamburger = require('./Hamburger.js');
-var components_Header_Link = require('./Link.js');
-require('../Logo/LogoSv.js');
-require('../Logo/LogoEn.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const LogoWrapper = styled__default['default'].a `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("../../shared/media-queries.js"),a=require("../../theme.js"),r=require("../Logo/index.js"),d=require("./Hamburger.js"),o=require("./Link.js");function n(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../Logo/LogoSv.js"),require("../Logo/LogoEn.js");var i=n(e),u=n(t);const c=u.default.a`
   cursor: pointer;
   padding: 0 0.625rem;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: ${theme['default'].colors.background.light};
+  background: ${a.default.colors.background.light};
 
-  ${shared_mediaQueries.mq('tablet')} {
+  ${l.mq("tablet")} {
     display: block;
     width: auto;
     padding: 0 1.5rem 0 0;
   }
-`;
-const HeaderContainer = styled__default['default'].nav `
+`,s=u.default.nav`
   width: 100%;
   z-index: 17;
   position: fixed;
   top: 0;
   left: 0;
-  color: ${theme['default'].colors.text.dark};
-  background-color: ${theme['default'].colors.background.light};
+  color: ${a.default.colors.text.dark};
+  background-color: ${a.default.colors.background.light};
   transition: 300ms;
-`;
-const HeaderContent = styled__default['default'].div `
+`,f=u.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  background-color: ${theme['default'].colors.background.gray};
+  background-color: ${a.default.colors.background.gray};
 
-  ${shared_mediaQueries.mq('tablet')} {
-    background-color: ${theme['default'].colors.background.light};
+  ${l.mq("tablet")} {
+    background-color: ${a.default.colors.background.light};
     flex-direction: row;
     padding: 0em 1.5em;
   }
-`;
-const MainContent = styled__default['default'].div `
+`,m=u.default.div`
   display: flex;
   width: 100%;
-`;
-const PrimaryLinks = styled__default['default'].ul `
+`,p=u.default.ul`
   display: flex;
   justify-content: space-around;
   width: 100%;
@@ -67,26 +45,19 @@ const PrimaryLinks = styled__default['default'].ul `
   padding: 0;
   flex-grow: 1;
 
-  ${shared_mediaQueries.mq('tablet')} {
+  ${l.mq("tablet")} {
     justify-content: flex-start;
     padding: 0.5em 0;
     display: flex;
     padding: 0;
     flex: 1;
   }
-`;
-const SecondaryLinks = styled__default['default'].ul `
+`,g=u.default.ul`
   display: none;
 
-  ${shared_mediaQueries.mq('laptop')} {
+  ${l.mq("laptop")} {
     padding: 0.5em 0;
     display: flex;
     padding: 0;
   }
-`;
-const Header = ({ locale, primaryLinks, secondaryLinks, menuIconText, onMenuClick, onHeaderClick, forwardRef, css = '', ...props }) => {
-    return (jsxRuntime.jsx(HeaderContainer, Object.assign({ css: css }, props, { ref: forwardRef }, { children: jsxRuntime.jsxs(HeaderContent, { children: [jsxRuntime.jsx(LogoWrapper, Object.assign({ onClick: onHeaderClick }, { children: jsxRuntime.jsx(components_Logo_index.Logo, { locale: locale }, void 0) }), void 0), jsxRuntime.jsxs(MainContent, { children: [jsxRuntime.jsx(PrimaryLinks, { children: primaryLinks.map((link, index) => (jsxRuntime.jsx(components_Header_Link['default'], Object.assign({}, link), link.text || index))) }, void 0), jsxRuntime.jsx(components_Header_Hamburger['default'], { text: menuIconText, onClick: onMenuClick }, void 0)] }, void 0), jsxRuntime.jsx(SecondaryLinks, { children: secondaryLinks.map((link, index) => (jsxRuntime.jsx(components_Header_Link['default'], Object.assign({}, link), link.text || index))) }, void 0)] }, void 0) }), void 0));
-};
-
-exports.Header = Header;
-exports['default'] = Header;
+`,x=({locale:y,primaryLinks:q,secondaryLinks:j,menuIconText:E,onMenuClick:h,onHeaderClick:w,forwardRef:L,css:$="",...v})=>i.default.createElement(s,{css:$,...v,ref:L},i.default.createElement(f,null,i.default.createElement(c,{onClick:w},i.default.createElement(r.Logo,{locale:y})),i.default.createElement(m,null,i.default.createElement(p,null,q.map((k,b)=>i.default.createElement(o.default,{key:k.text||b,...k}))),i.default.createElement(d.default,{text:E,onClick:h})),i.default.createElement(g,null,j.map((k,b)=>i.default.createElement(o.default,{key:k.text||b,...k})))));exports.Header=x,exports.default=x;

package/cjs/components/Hero/index.js

@@ -1,51 +1,26 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Root = styled__default['default'].div `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../theme.js");function o(f){return f&&typeof f=="object"&&"default"in f?f:{default:f}}var l=o(e),i=o(t);const a=i.default.div`
   position: relative;
   height: 60vh;
   max-height: 600px;
-  background-color: ${theme['default'].colors.primary.main};
+  background-color: ${r.default.colors.primary.main};
   background-size: cover;
-`;
-const Content = styled__default['default'].div `
+`,d=i.default.div`
   position: relative;
   display: flex;
   padding: 50px;
   z-index: 1;
-`;
-const Video = styled__default['default'].iframe `
+`,n=i.default.iframe`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-`;
-const Image = styled__default['default'].img `
+`,c=i.default.img`
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   object-fit: cover;
-  background-color: ${theme['default'].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 (jsxRuntime.jsx(Root, Object.assign({ style: containerStyle }, { children: videoProps ? (jsxRuntime.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)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image, { src: imageProps === null || imageProps === void 0 ? void 0 : imageProps.src, alt: "Hero background", style: imageStyle }, void 0), jsxRuntime.jsx(Content, { children: children }, void 0)] }, void 0)) }), void 0));
-}
-
-exports.Hero = Hero;
-exports['default'] = Hero;
+  background-color: ${r.default.colors.primary.main};
+`;function u(f){const{imageProps:s,containerStyle:m,videoProps:p,children:h}=f,v={objectPosition:`${(s==null?void 0:s.x)?s.x:"50%"} ${(s==null?void 0:s.y)?s.y:"50%"}`};return l.default.createElement(a,{style:m},p?l.default.createElement(n,{"data-testid":"hero-video",title:"video-frame",src:p.src,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):l.default.createElement(l.default.Fragment,null,l.default.createElement(c,{src:s==null?void 0:s.src,alt:"Hero background",style:v}),l.default.createElement(d,null,h)))}exports.Hero=u,exports.default=u;

package/cjs/components/Icon/index.js

@@ -1,97 +1,32 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styled = require('styled-components');
-var typography_BodyText_index = require('../../typography/BodyText/index.js');
-var typography_Heading_index = require('../../typography/Heading/index.js');
-var theme = require('../../theme.js');
-var components_Snackbar_index = require('../Snackbar/index.js');
-require('../../shared/media-queries.js');
-require('../Icons/CheckCircle.js');
-require('../Icons/Close.js');
-require('../Icons/ErrorCircle.js');
-require('../Icons/InfoCircle.js');
-require('react-transition-group');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Wrapper = styled__default['default'].div `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../typography/BodyText/index.js"),a=require("../../typography/Heading/index.js"),o=require("../../theme.js"),l=require("../Snackbar/index.js");function n(g){return g&&typeof g=="object"&&"default"in g?g:{default:g}}require("../../shared/media-queries.js"),require("../Icons/CheckCircle.js"),require("../Icons/Close.js"),require("../Icons/ErrorCircle.js"),require("../Icons/InfoCircle.js"),require("react-transition-group");var i=n(e),c=n(r);const s=c.default.div`
   margin: 0 auto;
   max-width: 700px;
-`;
-const Title = styled__default['default'](typography_Heading_index.Title) `
+`,d=c.default(a.Title)`
   margin: 0.5rem;
-`;
-const IconsList = styled__default['default'].ul `
+`,u=c.default.ul`
   display: flex;
   list-style: none;
   flex-wrap: wrap;
   padding: 0;
-`;
-const ListItem = styled__default['default'].li `
-  background: ${({ background }) => background};
+`,p=c.default.li`
+  background: ${({background:g})=>g};
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   width: calc(25% - 2px - 1.5rem);
   padding: 0 0.25rem;
-  border: 1px solid ${theme['default'].colors.gray.dark5};
+  border: 1px solid ${o.default.colors.gray.dark5};
   border-radius: 3px;
   margin: 0.5rem;
   cursor: pointer;
-`;
-const Name = styled__default['default'](typography_BodyText_index.Caption) `
+`,f=c.default(t.Caption)`
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
   text-align: center;
-`;
-const IconContainer = styled__default['default'].span `
-  font-size: ${({ size }) => size};
-  color: ${({ color }) => color};
-`;
-const Icons = ({ background = theme['default'].colors.background.light, color = theme['default'].colors.text.dark, icons, size = '2rem', }) => {
-    const [state, setState] = react.useState({
-        isOpen: false,
-        message: '',
-        type: 'info',
-        color: 'neutral',
-    });
-    const copyImport = async (name) => {
-        const importPath = `import { ${name} } from 'kvdbil-components';`;
-        if (!navigator.clipboard) {
-            return;
-        }
-        try {
-            await navigator.clipboard.writeText(importPath);
-            setState(s => ({
-                ...s,
-                isOpen: true,
-                message: `copied import for ${name}`,
-                type: 'success',
-                color: 'success',
-            }));
-        }
-        catch (error) {
-            setState(s => ({
-                ...s,
-                isOpen: true,
-                message: `Could not copy text: ${error}`,
-                type: 'error',
-                color: 'error',
-            }));
-        }
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(Title, Object.assign({ as: "h2" }, { children: "Click to copy import declaration for icon" }), void 0), jsxRuntime.jsx(IconsList, { children: icons.map(([name, Icon], index) => (jsxRuntime.jsxs(ListItem, Object.assign({ background: background, onClick: () => {
-                                copyImport(name);
-                            } }, { children: [jsxRuntime.jsx(Name, { children: name }, void 0), jsxRuntime.jsx(IconContainer, Object.assign({ size: size, color: color }, { children: jsxRuntime.jsx(Icon, {}, void 0) }), void 0)] }), index))) }, void 0)] }, void 0), jsxRuntime.jsx(components_Snackbar_index.Snackbar, { message: state.message, isOpen: state.isOpen, type: state.type, color: state.color, onClose: () => setState(s => ({ ...s, isOpen: false })) }, void 0)] }, void 0));
-};
-
-exports['default'] = Icons;
+`,m=c.default.span`
+  font-size: ${({size:g})=>g};
+  color: ${({color:g})=>g};
+`;exports.default=({background:g=o.default.colors.background.light,color:q=o.default.colors.text.dark,icons:h,size:j="2rem"})=>{const[y,b]=e.useState({isOpen:!1,message:"",type:"info",color:"neutral"});return i.default.createElement(i.default.Fragment,null,i.default.createElement(s,null,i.default.createElement(d,{as:"h2"},"Click to copy import declaration for icon"),i.default.createElement(u,null,h.map(([x,C],E)=>i.default.createElement(p,{key:E,background:g,onClick:()=>{(async w=>{const v=`import { ${w} } from 'kvdbil-components';`;if(navigator.clipboard)try{await navigator.clipboard.writeText(v),b(k=>({...k,isOpen:!0,message:`copied import for ${w}`,type:"success",color:"success"}))}catch(k){b(O=>({...O,isOpen:!0,message:`Could not copy text: ${k}`,type:"error",color:"error"}))}})(x)}},i.default.createElement(f,null,x),i.default.createElement(m,{size:j,color:q},i.default.createElement(C,null)))))),i.default.createElement(l.Snackbar,{message:y.message,isOpen:y.isOpen,type:y.type,color:y.color,onClose:()=>b(x=>({...x,isOpen:!1}))}))};