@kvdbil/components 3.3.5-4 → 3.4.0

package/cjs/theme.js

@@ -1,125 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const theme = {
-    typography: {
-        fontBaseFamily: "'Open Sans', sans-serif",
-        fontAlternativeFamily: "'Next Book', sans-serif",
-        fontBaseRegularWeight: 400,
-        fontBaseBoldWeight: 600,
-        fontAlternativeRegularWeight: 400,
-        fontAlternativeBoldWeight: 700,
-    },
-    colors: {
-        primary: {
-            darker: '#d98500',
-            dark: '#e8a100',
-            main: '#f5b400',
-            light: '#f7cf57',
-            lighter: '#fce5ab',
-            lighter2: '#fff7e5',
-        },
-        secondary: {
-            darker: '#00474d',
-            dark: '#007069',
-            main: '#2a9d8f',
-            light: '#6bb8a6',
-            lighter: '#bae3cc',
-            lighter2: '#e5f5ed',
-        },
-        tertiary: {
-            darker: '#5e2636',
-            dark: '#a63640',
-            main: '#ef5b5b',
-            light: '#f5968a',
-            lighter: '#f5c7bf',
-            lighter2: '#fcedeb',
-        },
-        info: {
-            darker: '#17395d',
-            dark: '#004773',
-            main: '#007ab8',
-            light: '#57c2ff',
-            lighter: '#abe0ff',
-            lighter2: '#e5f5ff',
-        },
-        success: {
-            darker: '#175c36',
-            dark: '#269940',
-            main: '#59d771',
-            light: '#91e5a1',
-            lighter: '#c7f2cf',
-            lighter2: '#edfaf0',
-        },
-        warning: {
-            darker: '#d98500',
-            dark: '#e8a100',
-            main: '#f5b400',
-            light: '#f7cf57',
-            lighter: '#fce5ab',
-            lighter2: '#fff7e5',
-        },
-        error: {
-            darker: '#5e2636',
-            dark: '#a63640',
-            main: '#ef5b5b',
-            light: '#f5968a',
-            lighter: '#f5c7bf',
-            lighter2: '#fcedeb',
-        },
-        neutral: {
-            darker: '#1a2030',
-            dark: '#1a2030',
-            main: '#1a2030',
-            light: '#474d59',
-            lighter: '#5e6369',
-            lighte2: '#707378',
-        },
-        text: {
-            dark: '#1a2030',
-            light: '#ffffff',
-            disabled: '#5e6369',
-        },
-        background: {
-            dark: '#1a2030',
-            gray: '#f2f2f2',
-            sand: '#f2efe6',
-            light: '#ffffff',
-        },
-        common: {
-            black: '#000000',
-            white: '#ffffff',
-            purple: {
-                darker: '#42214f',
-                dark: '#732e70',
-                main: '#a13d8f',
-                light: '#c27db5',
-                lighter: '#e0bfd9',
-                lighter2: '#f5edf2',
-            },
-        },
-        gray: {
-            dark1: '#1a2030',
-            dark2: '#303842',
-            dark3: '#474d59',
-            dark4: '#5e6369',
-            dark5: '#707378',
-            light1: '#8c8f91',
-            light2: '#a3a6a8',
-            light3: '#c7c7c4',
-            light4: '#d9d9d6',
-            light5: '#e8e8e8',
-            light6: '#f2f2f2',
-        },
-    },
-    elevations: {
-        elevation2: '0px 1px 5px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)',
-        elevation4: '0px 1px 10px rgba(0, 0, 0, 0.15), 0px 4px 5px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)',
-        elevation8: '0px 4px 5px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.09), 0px 8px 10px rgba(0, 0, 0, 0.1)',
-        elevation16: '0px 8px 10px rgba(0, 0, 0, 0.15), 0px 6px 30px rgba(0, 0, 0, 0.09), 0px 16px 24px rgba(0, 0, 0, 0.1)',
-        elevation24: '0px 11px 15px rgba(0, 0, 0, 0.15), 0px 9px 46px rgba(0, 0, 0, 0.09), 0px 24px 38px rgba(0, 0, 0, 0.1)',
-    },
-};
-
-exports['default'] = theme;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={typography:{fontBaseFamily:"'Open Sans', sans-serif",fontAlternativeFamily:"'Next Book', sans-serif",fontBaseRegularWeight:400,fontBaseBoldWeight:600,fontAlternativeRegularWeight:400,fontAlternativeBoldWeight:700},colors:{primary:{darker:"#d98500",dark:"#e8a100",main:"#f5b400",light:"#f7cf57",lighter:"#fce5ab",lighter2:"#fff7e5"},secondary:{darker:"#00474d",dark:"#007069",main:"#2a9d8f",light:"#6bb8a6",lighter:"#bae3cc",lighter2:"#e5f5ed"},tertiary:{darker:"#5e2636",dark:"#a63640",main:"#ef5b5b",light:"#f5968a",lighter:"#f5c7bf",lighter2:"#fcedeb"},info:{darker:"#17395d",dark:"#004773",main:"#007ab8",light:"#57c2ff",lighter:"#abe0ff",lighter2:"#e5f5ff"},success:{darker:"#175c36",dark:"#269940",main:"#59d771",light:"#91e5a1",lighter:"#c7f2cf",lighter2:"#edfaf0"},warning:{darker:"#d98500",dark:"#e8a100",main:"#f5b400",light:"#f7cf57",lighter:"#fce5ab",lighter2:"#fff7e5"},error:{darker:"#5e2636",dark:"#a63640",main:"#ef5b5b",light:"#f5968a",lighter:"#f5c7bf",lighter2:"#fcedeb"},neutral:{darker:"#1a2030",dark:"#1a2030",main:"#1a2030",light:"#474d59",lighter:"#5e6369",lighte2:"#707378"},text:{dark:"#1a2030",light:"#ffffff",disabled:"#5e6369"},background:{dark:"#1a2030",gray:"#f2f2f2",sand:"#f2efe6",light:"#ffffff"},common:{black:"#000000",white:"#ffffff",purple:{darker:"#42214f",dark:"#732e70",main:"#a13d8f",light:"#c27db5",lighter:"#e0bfd9",lighter2:"#f5edf2"}},gray:{dark1:"#1a2030",dark2:"#303842",dark3:"#474d59",dark4:"#5e6369",dark5:"#707378",light1:"#8c8f91",light2:"#a3a6a8",light3:"#c7c7c4",light4:"#d9d9d6",light5:"#e8e8e8",light6:"#f2f2f2"}},elevations:{elevation2:"0px 1px 5px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)",elevation4:"0px 1px 10px rgba(0, 0, 0, 0.15), 0px 4px 5px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)",elevation8:"0px 4px 5px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.09), 0px 8px 10px rgba(0, 0, 0, 0.1)",elevation16:"0px 8px 10px rgba(0, 0, 0, 0.15), 0px 6px 30px rgba(0, 0, 0, 0.09), 0px 16px 24px rgba(0, 0, 0, 0.1)",elevation24:"0px 11px 15px rgba(0, 0, 0, 0.15), 0px 9px 46px rgba(0, 0, 0, 0.09), 0px 24px 38px rgba(0, 0, 0, 0.1)"}};

package/cjs/typography/BodyText/index.js

@@ -1,67 +1,34 @@
-'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 BodyTextStylePrimary = styled.css `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
-  font-weight: ${({ theme }) => theme.typography.fontBaseRegularWeight};
-`;
-const StyledBodyText = styled__default['default'].p `
-  ${BodyTextStylePrimary}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function o(g){return g&&typeof g=="object"&&"default"in g?g:{default:g}}var i=o(e),r=o(t);const n=t.css`
+  font-family: ${({theme:g})=>g.typography.fontBaseFamily};
+  font-weight: ${({theme:g})=>g.typography.fontBaseRegularWeight};
+`,a=r.default.p`
+  ${n}
   font-feature-settings: 'lnum' on;
-`;
-const Quote = styled__default['default'](StyledBodyText) `
+`,s=r.default(a)`
   font-family: Georgia, Cambria, Cochin, Times, 'Times New Roman', serif;
   font-style: italic;
-`;
-const BodyTextStyle = styled.css `
-  ${BodyTextStylePrimary}
+`,f=t.css`
+  ${n}
   font-size: 1rem;
   line-height: 1.5rem;
-`;
-const BodyText = styled__default['default'](StyledBodyText) `
+`,l=r.default(a)`
   font-size: 1rem;
   line-height: 1.5rem;
-`;
-const BodyLink = styled__default['default'](BodyText) `
-  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
-`;
-const CaptionStyle = styled.css `
-  ${BodyTextStylePrimary}
+`,p=r.default(l)`
+  font-weight: ${({theme:g})=>g.typography.fontBaseBoldWeight};
+`,h=t.css`
+  ${n}
   font-size: 0.81rem;
   line-height: 1.5rem;
-`;
-const Caption = styled__default['default'](StyledBodyText) `
+`,m=r.default(a)`
   font-size: 0.81rem;
   line-height: 1.5rem;
-`;
-const CaptionLink = styled__default['default'](Caption) `
-  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
-`;
-const Status = styled__default['default'](StyledBodyText) `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+`,y=r.default(m)`
+  font-weight: ${({theme:g})=>g.typography.fontBaseBoldWeight};
+`,u=r.default(a)`
+  font-family: ${({theme:g})=>g.typography.fontAlternativeFamily};
   font-size: 0.75rem;
   line-height: 1.25rem;
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  font-weight: ${({theme:g})=>g.typography.fontAlternativeBoldWeight};
   text-transform: uppercase;
-`;
-const BodyTexts = () => jsxRuntime.jsx("div", {}, void 0);
-
-exports.BodyLink = BodyLink;
-exports.BodyText = BodyText;
-exports.BodyTextStyle = BodyTextStyle;
-exports.BodyTexts = BodyTexts;
-exports.Caption = Caption;
-exports.CaptionLink = CaptionLink;
-exports.CaptionStyle = CaptionStyle;
-exports.Quote = Quote;
-exports.Status = Status;
-exports.StyledBodyText = StyledBodyText;
-exports['default'] = BodyTexts;
+`,d=()=>i.default.createElement("div",null);exports.BodyLink=p,exports.BodyText=l,exports.BodyTextStyle=f,exports.BodyTexts=d,exports.Caption=m,exports.CaptionLink=y,exports.CaptionStyle=h,exports.Quote=s,exports.Status=u,exports.StyledBodyText=a,exports.default=d;

package/cjs/typography/ButtonText/index.js

@@ -1,49 +1,21 @@
-'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 BasicButtonTextStyle = styled.css `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
-`;
-const StyledButtonText = styled__default['default'].span `
-  ${BasicButtonTextStyle}
-`;
-const ButtonLargeTextStyle = styled.css `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function r(c){return c&&typeof c=="object"&&"default"in c?c:{default:c}}var o=r(e),l=r(t);const n=t.css`
+  font-family: ${({theme:c})=>c.typography.fontAlternativeFamily};
+  font-weight: ${({theme:c})=>c.typography.fontAlternativeBoldWeight};
+`,s=l.default.span`
+  ${n}
+`,a=t.css`
   font-size: 1.25rem;
   line-height: 1.25rem;
-`;
-const ButtonLarge = styled__default['default'](StyledButtonText) `
-  ${ButtonLargeTextStyle}
-`;
-const ButtonRegularTextStyle = styled.css `
+`,u=l.default(s)`
+  ${a}
+`,i=t.css`
   font-size: 1rem;
   line-height: 1rem;
-`;
-const Button = styled__default['default'](StyledButtonText) `
-  ${ButtonRegularTextStyle}
-`;
-const ButtonSmallTextStyle = styled.css `
+`,f=l.default(s)`
+  ${i}
+`,p=t.css`
   font-size: 0.81rem;
   line-height: 0.81rem;
-`;
-const ButtonSmall = styled__default['default'](StyledButtonText) `
-  ${ButtonSmallTextStyle}
-`;
-const Buttons = () => jsxRuntime.jsx("div", {}, void 0);
-
-exports.BasicButtonTextStyle = BasicButtonTextStyle;
-exports.Button = Button;
-exports.ButtonLarge = ButtonLarge;
-exports.ButtonLargeTextStyle = ButtonLargeTextStyle;
-exports.ButtonRegularTextStyle = ButtonRegularTextStyle;
-exports.ButtonSmall = ButtonSmall;
-exports.ButtonSmallTextStyle = ButtonSmallTextStyle;
-exports['default'] = Buttons;
+`,m=l.default(s)`
+  ${p}
+`;exports.BasicButtonTextStyle=n,exports.Button=f,exports.ButtonLarge=u,exports.ButtonLargeTextStyle=a,exports.ButtonRegularTextStyle=i,exports.ButtonSmall=m,exports.ButtonSmallTextStyle=p,exports.default=()=>o.default.createElement("div",null);

package/cjs/typography/Heading/index.js

@@ -1,93 +1,61 @@
-'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 StyledHeading = styled__default['default'].p `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
-`;
-const StyledDisplay = styled__default['default'](StyledHeading) `
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
-`;
-const Display3 = styled__default['default'](StyledDisplay) `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),i=require("../../shared/media-queries.js");function r(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}var l=r(e),o=r(t);const n=o.default.p`
+  font-family: ${({theme:y})=>y.typography.fontAlternativeFamily};
+  font-weight: ${({theme:y})=>y.typography.fontAlternativeRegularWeight};
+`,h=o.default(n)`
+  font-weight: ${({theme:y})=>y.typography.fontAlternativeBoldWeight};
+`,a=o.default(h)`
   font-size: 2rem;
   line-height: 3rem;
 
-  ${shared_mediaQueries.mq('laptop')} {
+  ${i.mq("laptop")} {
     font-size: 3.75rem;
     line-height: 4.5rem;
   }
-`;
-const Display2 = styled__default['default'](StyledDisplay) `
+`,m=o.default(h)`
   font-size: 1.81rem;
   line-height: 2.5rem;
 
-  ${shared_mediaQueries.mq('laptop')} {
+  ${i.mq("laptop")} {
     font-size: 3rem;
     line-height: 4rem;
   }
-`;
-const Display1 = styled__default['default'](StyledDisplay) `
+`,f=o.default(h)`
   font-size: 1.63rem;
   line-height: 2.5rem;
 
-  ${shared_mediaQueries.mq('laptop')} {
+  ${i.mq("laptop")} {
     font-size: 2.5rem;
     line-height: 3.5rem;
   }
-`;
-const Headline = styled__default['default'](StyledHeading) `
+`,p=o.default(n)`
   font-size: 1.44rem;
   line-height: 2rem;
 
-  ${shared_mediaQueries.mq('laptop')} {
+  ${i.mq("laptop")} {
     font-size: 2rem;
     line-height: 3rem;
   }
-`;
-const Title = styled__default['default'](StyledHeading) `
+`,s=o.default(n)`
   font-size: 1.25rem;
   line-height: 2rem;
 
-  ${shared_mediaQueries.mq('laptop')} {
+  ${i.mq("laptop")} {
     font-size: 1.56rem;
     line-height: 2.5rem;
   }
-`;
-const Subtitle = styled__default['default'](StyledHeading) `
+`,g=o.default(n)`
   font-size: 1.125rem;
   line-height: 2rem;
 
-  ${shared_mediaQueries.mq('laptop')} {
+  ${i.mq("laptop")} {
     font-size: 1.25rem;
   }
-`;
-const TinyTitle = styled__default['default'](StyledHeading) `
+`,u=o.default(n)`
   font-size: 1rem;
   line-height: 1.5rem;
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
-`;
-const Rubric = styled__default['default'](StyledHeading) `
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  font-weight: ${({theme:y})=>y.typography.fontAlternativeBoldWeight};
+`,d=o.default(n)`
+  font-weight: ${({theme:y})=>y.typography.fontAlternativeBoldWeight};
   font-size: 1rem;
   line-height: 1.5rem;
-`;
-const Headings = () => jsxRuntime.jsx("div", {}, void 0);
-
-exports.Display1 = Display1;
-exports.Display2 = Display2;
-exports.Display3 = Display3;
-exports.Headline = Headline;
-exports.Rubric = Rubric;
-exports.Subtitle = Subtitle;
-exports.TinyTitle = TinyTitle;
-exports.Title = Title;
-exports['default'] = Headings;
+`;exports.Display1=f,exports.Display2=m,exports.Display3=a,exports.Headline=p,exports.Rubric=d,exports.Subtitle=g,exports.TinyTitle=u,exports.Title=s,exports.default=()=>l.default.createElement("div",null);

package/cjs/utils/utils.js

@@ -1,29 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-const getLuminosity = (hexColor) => {
-    let red = 0;
-    let green = 0;
-    let blue = 0;
-    if (hexColor.length === 4) {
-        red = parseInt('0x' + hexColor[1] + hexColor[1]);
-        green = parseInt('0x' + hexColor[2] + hexColor[2]);
-        blue = parseInt('0x' + hexColor[3] + hexColor[3]);
-    }
-    else if (hexColor.length === 7) {
-        red = parseInt('0x' + hexColor[1] + hexColor[2]);
-        green = parseInt('0x' + hexColor[3] + hexColor[4]);
-        blue = parseInt('0x' + hexColor[5] + hexColor[6]);
-    }
-    return (((Math.max(Number(red / 255), Number(green / 255), Number(blue / 255)) +
-        Math.min(Number(red / 255), Number(green / 255), Number(blue / 255))) /
-        2) *
-        100);
-};
-const resetButtonStyle = styled.css `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=require("styled-components").css`
   appearance: none;
   background-color: transparent;
   border: 0;
@@ -31,7 +6,4 @@ const resetButtonStyle = styled.css `
   font-family: inherit;
   outline: none;
   padding: 0;
-`;
-
-exports.getLuminosity = getLuminosity;
-exports.resetButtonStyle = resetButtonStyle;
+`;exports.getLuminosity=r=>{let t=0,n=0,s=0;return r.length===4?(t=parseInt("0x"+r[1]+r[1]),n=parseInt("0x"+r[2]+r[2]),s=parseInt("0x"+r[3]+r[3])):r.length===7&&(t=parseInt("0x"+r[1]+r[2]),n=parseInt("0x"+r[3]+r[4]),s=parseInt("0x"+r[5]+r[6])),(Math.max(Number(t/255),Number(n/255),Number(s/255))+Math.min(Number(t/255),Number(n/255),Number(s/255)))/2*100},exports.resetButtonStyle=e;

package/esm/ColorCard.js

@@ -1,38 +1,25 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { getLuminosity } from './utils/utils.js';
-import theme from './theme.js';
-
-const SubList = styled.ul `
+import e from"react";import o from"styled-components";import{getLuminosity as i}from"./utils/utils.js";import a from"./theme.js";const m=o.ul`
   padding-left: 2rem;
-`;
-const ColorItem = styled.li `
+`,c=o.li`
   list-style: none;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
-  border: 1px solid ${theme.colors.gray.light2};
+  border: 1px solid ${a.colors.gray.light2};
   border-radius: 4px;
   font-family: 'Ralway', sans-serif;
   margin-top: 0.75rem;
-`;
-const Header = styled.span `
+`,n=o.span`
   text-transform: capitalize;
   padding: 0.5em;
   display: block;
-  border-bottom: 1px solid ${theme.colors.gray.light2};
-`;
-const Color = styled.li `
+  border-bottom: 1px solid ${a.colors.gray.light2};
+`,d=o.li`
   display: block;
-  background: ${({ hex }) => hex};
-  color: ${({ hex }) => (getLuminosity(hex) < 40 ? '#fff' : '#000')};
+  background: ${({hex:t})=>t};
+  color: ${({hex:t})=>i(t)<40?"#fff":"#000"};
   padding: 1em;
-`;
-const SwatchArea = styled.ul `
+`,p=o.ul`
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
-`;
-const getColor = variants => Object.entries(variants).map(([name, hex]) => typeof hex === 'string' ? (jsxs(Color, Object.assign({ hex: hex }, { children: [name, " (", hex, ")"] }), hex)) : (jsxs(Fragment, { children: [jsx(Header, { children: name }, void 0), jsx(SubList, { children: getColor(hex) }, void 0)] }, void 0)));
-const ColorCard = ({ colorName, variants }) => (jsxs(ColorItem, { children: [jsx(Header, { children: colorName }, void 0), jsx(SwatchArea, { children: getColor(variants) }, void 0)] }, void 0));
-
-export { ColorCard as default };
+`,s=t=>Object.entries(t).map(([r,l])=>typeof l=="string"?e.createElement(d,{hex:l,key:l},r," (",l,")"):e.createElement(e.Fragment,null,e.createElement(n,null,r),e.createElement(m,null,s(l)))),f=({colorName:t,variants:r})=>e.createElement(c,null,e.createElement(n,null,t),e.createElement(p,null,s(r)));export{f as default};

package/esm/ElevationCard.js

@@ -1,11 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-
-const Card = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+import o from"react";import i from"styled-components";const n=i.div`
+  font-family: ${({theme:t})=>t.typography.fontAlternativeFamily};
+  font-weight: ${({theme:t})=>t.typography.fontAlternativeRegularWeight};
   font-size: 1.25rem;
-  box-shadow: ${({ elevation }) => elevation};
+  box-shadow: ${({elevation:t})=>t};
   width: 14rem;
   height: 10rem;
   margin: 1rem;
@@ -13,9 +10,4 @@ const Card = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-`;
-const ElevationCard = ({ children, value, as = 'div', }) => {
-    return (jsx(Card, Object.assign({ as: as, elevation: value }, { children: children }), void 0));
-};
-
-export { ElevationCard };
+`,a=({children:t,value:e,as:r="div"})=>o.createElement(n,{as:r,elevation:e},t);export{a as ElevationCard};

package/esm/components/Accordion/index.js

@@ -1,86 +1,51 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
-import styled from 'styled-components';
-import { UnmountClosed } from 'react-collapse';
-import { mq } from '../../shared/media-queries.js';
-import ArrowDownIcon from '../../icons/components/ArrowDownIcon.js';
-
-const Container = styled.div `
+import n,{useState as y}from"react";import r from"styled-components";import{UnmountClosed as g}from"react-collapse";import{mq as f}from"../../shared/media-queries.js";import h from"../../icons/components/ArrowDownIcon.js";const $=r.div`
   display: flex;
   flex-direction: column;
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`;
-const List = styled.ul `
+`,u=r.ul`
   margin: 0;
   padding: 0;
   list-style: none;
-`;
-const Title = styled.div `
+`,w=r.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   cursor: pointer;
   margin: 0.5rem 0;
-`;
-const Arrow = styled.div `
+`,b=r.div`
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 0.75rem;
-  color: ${({ theme }) => theme.colors.text.dark};
+  color: ${({theme:e})=>e.colors.text.dark};
   transition: 200ms ease-in-out;
-  transform: ${({ isOpen }) => `rotate(${isOpen ? '180deg' : '0deg'})`};
-`;
-const Item = styled.li `
-  border-top: ${({ theme }) => `1px solid ${theme.colors.gray.light2}`};
-  padding: ${({ isOpen }) => (isOpen ? '0.5rem 0 1rem 0' : '0.5rem 0')};
+  transform: ${({isOpen:e})=>`rotate(${e?"180deg":"0deg"})`};
+`,E=r.li`
+  border-top: ${({theme:e})=>`1px solid ${e.colors.gray.light2}`};
+  padding: ${({isOpen:e})=>e?"0.5rem 0 1rem 0":"0.5rem 0"};
 
   &:last-child {
-    border-bottom: ${({ theme }) => `1px solid ${theme.colors.gray.light2}`};
+    border-bottom: ${({theme:e})=>`1px solid ${e.colors.gray.light2}`};
   }
-`;
-const Text = styled.span `
-  color: ${({ theme }) => theme.colors.text.dark};
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+`,I=r.span`
+  color: ${({theme:e})=>e.colors.text.dark};
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 0.9375rem;
-  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
-`;
-const Content = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
-  color: ${({ theme }) => theme.colors.text.dark};
+  font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
+`,k=r.div`
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
+  color: ${({theme:e})=>e.colors.text.dark};
   font-size: 0.9375rem;
-  font-weight: ${({ theme }) => theme.typography.fontBaseRegularWeight};
+  font-weight: ${({theme:e})=>e.typography.fontBaseRegularWeight};
   line-height: 1.3;
   transition: 200ms ease-in-out;
-  ${mq('tablet')} {
+  ${f("tablet")} {
     padding: 0;
   }
   & > * {
     margin-top: 0;
     margin-bottom: 0;
   }
-`;
-const Accordion = ({ items, ...props }) => {
-    const [isOpened, setIsOpened] = useState({});
-    const toggleIsOpened = (index) => {
-        setIsOpened(prevState => ({ ...prevState, [index]: !prevState[index] }));
-    };
-    const onClick = (index) => () => {
-        toggleIsOpened(index);
-    };
-    const onKeyPress = (index) => (e) => {
-        if (e.key === 'Enter') {
-            toggleIsOpened(index);
-        }
-    };
-    return (jsx(Container, Object.assign({}, props, { children: jsx(List, Object.assign({ className: "accordionList" }, { children: items.map((item, index) => {
-                const isOpen = Boolean(isOpened[index]);
-                return (jsxs(Item, Object.assign({ isOpen: isOpen, className: "accordionItem" }, { children: [jsxs(Title, Object.assign({ onClick: onClick(index), onKeyPress: onKeyPress(index), className: "accordionItemTitle", role: "button", tabIndex: 0, "aria-expanded": isOpen, id: `panel${index}-header`, "aria-controls": `panel${index}-content` }, { children: [jsx(Text, Object.assign({ as: "span" }, { children: item.title }), void 0), jsx(Arrow, Object.assign({ isOpen: isOpen }, { children: jsx(ArrowDownIcon, {}, void 0) }), void 0)] }), void 0), jsx(UnmountClosed, Object.assign({ isOpened: isOpen }, { children: jsx(Content, { "aria-labelledby": `panel${index}-header`, id: `panel${index}-content`, role: "region", className: "wysiwyg", dangerouslySetInnerHTML: {
-                                    __html: item.text,
-                                } }, void 0) }), index)] }), item.title));
-            }) }), void 0) }), void 0));
-};
-
-export { Accordion, Accordion as default };
+`,l=({items:e,...i})=>{const[c,m]=y({}),s=o=>{m(t=>({...t,[o]:!t[o]}))},p=o=>()=>{s(o)},d=o=>t=>{t.key==="Enter"&&s(o)};return n.createElement($,{...i},n.createElement(u,{className:"accordionList"},e.map((o,t)=>{const a=Boolean(c[t]);return n.createElement(E,{key:o.title,isOpen:a,className:"accordionItem"},n.createElement(w,{onClick:p(t),onKeyPress:d(t),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":a,id:`panel${t}-header`,"aria-controls":`panel${t}-content`},n.createElement(I,{as:"span"},o.title),n.createElement(b,{isOpen:a},n.createElement(h,null))),n.createElement(g,{isOpened:a,key:t},n.createElement(k,{"aria-labelledby":`panel${t}-header`,id:`panel${t}-content`,role:"region",className:"wysiwyg",dangerouslySetInnerHTML:{__html:o.text}})))})))};export{l as Accordion,l as default};