@kvdbil/components 3.3.5-4 → 3.4.0

package/cjs/ColorCard.js

@@ -1,46 +1,25 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('styled-components');
-var utils_utils = require('./utils/utils.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 SubList = styled__default['default'].ul `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("./utils/utils.js"),a=require("./theme.js");function r(m){return m&&typeof m=="object"&&"default"in m?m:{default:m}}var d=r(e),n=r(t);const u=n.default.ul`
   padding-left: 2rem;
-`;
-const ColorItem = styled__default['default'].li `
+`,i=n.default.li`
   list-style: none;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
-  border: 1px solid ${theme['default'].colors.gray.light2};
+  border: 1px solid ${a.default.colors.gray.light2};
   border-radius: 4px;
   font-family: 'Ralway', sans-serif;
   margin-top: 0.75rem;
-`;
-const Header = styled__default['default'].span `
+`,o=n.default.span`
   text-transform: capitalize;
   padding: 0.5em;
   display: block;
-  border-bottom: 1px solid ${theme['default'].colors.gray.light2};
-`;
-const Color = styled__default['default'].li `
+  border-bottom: 1px solid ${a.default.colors.gray.light2};
+`,f=n.default.li`
   display: block;
-  background: ${({ hex }) => hex};
-  color: ${({ hex }) => (utils_utils.getLuminosity(hex) < 40 ? '#fff' : '#000')};
+  background: ${({hex:m})=>m};
+  color: ${({hex:m})=>l.getLuminosity(m)<40?"#fff":"#000"};
   padding: 1em;
-`;
-const SwatchArea = styled__default['default'].ul `
+`,s=n.default.ul`
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
-`;
-const getColor = variants => Object.entries(variants).map(([name, hex]) => typeof hex === 'string' ? (jsxRuntime.jsxs(Color, Object.assign({ hex: hex }, { children: [name, " (", hex, ")"] }), hex)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Header, { children: name }, void 0), jsxRuntime.jsx(SubList, { children: getColor(hex) }, void 0)] }, void 0)));
-const ColorCard = ({ colorName, variants }) => (jsxRuntime.jsxs(ColorItem, { children: [jsxRuntime.jsx(Header, { children: colorName }, void 0), jsxRuntime.jsx(SwatchArea, { children: getColor(variants) }, void 0)] }, void 0));
-
-exports['default'] = ColorCard;
+`,c=m=>Object.entries(m).map(([g,p])=>typeof p=="string"?d.default.createElement(f,{hex:p,key:p},g," (",p,")"):d.default.createElement(d.default.Fragment,null,d.default.createElement(o,null,g),d.default.createElement(u,null,c(p))));exports.default=({colorName:m,variants:g})=>d.default.createElement(i,null,d.default.createElement(o,null,m),d.default.createElement(s,null,c(g)));

package/cjs/ElevationCard.js

@@ -1,19 +1,8 @@
-'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 Card = styled__default['default'].div `
-  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");function r(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}var a=r(e);const i=r(t).default.div`
+  font-family: ${({theme:n})=>n.typography.fontAlternativeFamily};
+  font-weight: ${({theme:n})=>n.typography.fontAlternativeRegularWeight};
   font-size: 1.25rem;
-  box-shadow: ${({ elevation }) => elevation};
+  box-shadow: ${({elevation:n})=>n};
   width: 14rem;
   height: 10rem;
   margin: 1rem;
@@ -21,9 +10,4 @@ const Card = styled__default['default'].div `
   display: flex;
   align-items: center;
   justify-content: center;
-`;
-const ElevationCard = ({ children, value, as = 'div', }) => {
-    return (jsxRuntime.jsx(Card, Object.assign({ as: as, elevation: value }, { children: children }), void 0));
-};
-
-exports.ElevationCard = ElevationCard;
+`;exports.ElevationCard=({children:n,value:o,as:l="div"})=>a.default.createElement(i,{as:l,elevation:o},n);

package/cjs/Interfaces.js

@@ -1,2 +1 @@
-'use strict';
-
+"use strict";

package/cjs/Types.js

@@ -1,2 +1 @@
-'use strict';
-
+"use strict";

package/cjs/components/Accordion/index.js

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

package/cjs/components/Badge/index.js

@@ -1,18 +1,6 @@
-'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 BadgeContainer = 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 i(f){return f&&typeof f=="object"&&"default"in f?f:{default:f}}var a=i(e),o=i(t);const n=o.default.div`
   border-radius: 0.75rem;
-  background: ${theme['default'].colors.secondary.main};
+  background: ${r.default.colors.secondary.main};
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -21,49 +9,27 @@ const BadgeContainer = styled__default['default'].div `
   height: 1.5rem;
   box-sizing: border-box;
   cursor: default;
-`;
-const SmallBadgeContainer = styled__default['default'](BadgeContainer) `
+`,l=o.default(n)`
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
   min-width: 1rem;
   position: relative;
-`;
-const MiddleDot = styled__default['default'].div `
+`,d=o.default.div`
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   opacity: 0.1;
   transform: scale(0.5);
-  background: ${theme['default'].colors.text.dark};
+  background: ${r.default.colors.text.dark};
   position: absolute;
   top: 0;
   left: 0;
-`;
-const Label = styled__default['default'].span `
+`,u=o.default.span`
   font-size: 0.75rem;
   line-height: 0.75rem;
   color: white;
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-`;
-const numberToLabel = (notificationAmount) => {
-    if (notificationAmount >= 100) {
-        return '99+';
-    }
-    return `${notificationAmount}`;
-};
-const Badge = ({ notificationAmount = 0, withNumber = true, ...rest }) => {
-    if ((notificationAmount <= 0 || !notificationAmount) && withNumber) {
-        return null;
-    }
-    if (!withNumber) {
-        return (jsxRuntime.jsx(SmallBadgeContainer, Object.assign({}, rest, { children: jsxRuntime.jsx(MiddleDot, { "data-test": "middle-dot" }, void 0) }), void 0));
-    }
-    const label = numberToLabel(notificationAmount);
-    return (jsxRuntime.jsx(BadgeContainer, Object.assign({}, rest, { children: jsxRuntime.jsx(Label, { children: label }, void 0) }), void 0));
-};
-
-exports.Badge = Badge;
-exports['default'] = Badge;
+  font-weight: ${({theme:f})=>f.typography.fontAlternativeBoldWeight};
+  font-family: ${({theme:f})=>f.typography.fontAlternativeFamily};
+`,s=({notificationAmount:f=0,withNumber:m=!0,...c})=>{if((f<=0||!f)&&m)return null;if(!m)return a.default.createElement(l,{...c},a.default.createElement(d,{"data-test":"middle-dot"}));const p=(h=>h>=100?"99+":`${h}`)(f);return a.default.createElement(n,{...c},a.default.createElement(u,null,p))};exports.Badge=s,exports.default=s;

package/cjs/components/Button/index.js

@@ -1,165 +1,100 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-var components_Spinner_index = require('../Spinner/index.js');
-var typography_ButtonText_index = require('../../typography/ButtonText/index.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),o=require("styled-components"),n=require("../../theme.js"),e=require("../Spinner/index.js"),l=require("../../typography/ButtonText/index.js");function t(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var a=t(r),c=t(o);const s=c.default.button`
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  border: 2px solid transparent;
+  border-radius: 3px;
+  width: ${({fullWidth:x})=>x&&"100%"};
 
-/****************************************************************************/
-/*                               Font styles                                */
-/****************************************************************************/
-const getFontStyles = (size) => {
-    switch (size) {
-        case 'smaller':
-            return typography_ButtonText_index.ButtonSmallTextStyle;
-        case 'small':
-            return typography_ButtonText_index.ButtonRegularTextStyle;
-        case 'regular':
-            return typography_ButtonText_index.ButtonRegularTextStyle;
-        case 'large':
-            return typography_ButtonText_index.ButtonLargeTextStyle;
-        default:
-            return typography_ButtonText_index.ButtonRegularTextStyle;
-    }
-};
-/****************************************************************************/
-/*                               Size styles                                */
-/****************************************************************************/
-const smallerSizeStyles = (isLoading) => `
+  ${l.BasicButtonTextStyle}
+  ${({size:x})=>(h=>{switch(h){case"smaller":return l.ButtonSmallTextStyle;case"small":case"regular":return l.ButtonRegularTextStyle;case"large":return l.ButtonLargeTextStyle;default:return l.ButtonRegularTextStyle}})(x)}
+  ${({size:x,isLoading:h})=>o.css`
+    ${x==="smaller"&&($=>`
   min-width: 76px;
-  padding: ${isLoading ? '7px 10px 5.5px' : '10px 10px 8px'};
-`;
-const smallSizeStyles = (isLoading) => `
+  padding: ${$?"7px 10px 5.5px":"10px 10px 8px"};
+`)(h)}
+    ${x==="small"&&($=>`
   min-width: 76px;
-  padding: ${isLoading ? '8px 10px 6px' : '11px 10px 9px'};
-`;
-const regularSizeStyles = (isLoading) => `
+  padding: ${$?"8px 10px 6px":"11px 10px 9px"};
+`)(h)}
+    ${x==="regular"&&($=>`
   min-width: 250px;
-  padding: ${isLoading ? '7px 22px 5px' : '15px 22px 13px'};
-`;
-const largeSizeStyles = (isLoading) => `
+  padding: ${$?"7px 22px 5px":"15px 22px 13px"};
+`)(h)}
+    ${x==="large"&&($=>`
   min-width: 250px;
-  padding: ${isLoading ? '9px 22px 6px' : '21px 22px 19px'};
-`;
-/****************************************************************************/
-/*                               Color styles                               */
-/****************************************************************************/
-const solidColorStyles = (theme) => (color) => `
+  padding: ${$?"9px 22px 6px":"21px 22px 19px"};
+`)(h)}
+  `}
+  background-color: transparent;
+  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
+  ${({variant:x,color:h,disabled:$,theme:b})=>o.css`
+    ${!$&&x==="solid"&&(u=>g=>`
   color: white;
-  border-color: ${theme.colors[color].main};
-  background-color: ${theme.colors[color].main};
+  border-color: ${u.colors[g].main};
+  background-color: ${u.colors[g].main};
 
   :hover {
-    border-color: ${theme.colors[color].light};
-    background-color: ${theme.colors[color].light};
+    border-color: ${u.colors[g].light};
+    background-color: ${u.colors[g].light};
   }
 
   :active {
-    border-color: ${theme.colors[color].dark};
-    background-color: ${theme.colors[color].dark}
+    border-color: ${u.colors[g].dark};
+    background-color: ${u.colors[g].dark}
   }
 
   :focus {
-    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme.colors[color].dark};
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${u.colors[g].dark};
   }
-`;
-const outlineColorStyles = (theme) => (color) => `
-  color: ${theme.colors[color].main};
-  border-color: ${theme.colors[color].main};
+`)(b)(h)}
+    ${!$&&x==="outline"&&(u=>g=>`
+  color: ${u.colors[g].main};
+  border-color: ${u.colors[g].main};
   background-color: transparent;
 
   :hover {
       color: white;
-      border-color: ${theme.colors[color].light};
-      background-color: ${theme.colors[color].light};
+      border-color: ${u.colors[g].light};
+      background-color: ${u.colors[g].light};
   }
 
   :active {
     color: white;
-    border-color: ${theme.colors[color].dark};
-    background-color: ${theme.colors[color].dark};
+    border-color: ${u.colors[g].dark};
+    background-color: ${u.colors[g].dark};
   }
 
   :focus {
-    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme.colors[color].dark};
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${u.colors[g].dark};
   }
-`;
-const flatColorStyles = (theme) => (color) => `
-  color: ${theme.colors[color].main};
+`)(b)(h)}
+    ${!$&&x==="flat"&&(u=>g=>`
+  color: ${u.colors[g].main};
   border-color: transparent;
   background-color: transparent;
 
   :hover {
-    color: ${theme.colors[color].dark};
+    color: ${u.colors[g].dark};
   }
 
   :active {
-    color: ${theme.colors[color].light};
+    color: ${u.colors[g].light};
   }
-`;
-const disabledCommonColorStyles = (theme) => `
-  background-color: ${theme.colors.gray.light4};
-  border-color: ${theme.colors.gray.light4};
-  color: ${theme.colors.gray.light1};
+`)(b)(h)}
+    ${$&&x!=="flat"&&(u=>`
+  background-color: ${u.colors.gray.light4};
+  border-color: ${u.colors.gray.light4};
+  color: ${u.colors.gray.light1};
   cursor: not-allowed;
-`;
-const disabledFlatColorStyles = (theme) => `
+`)(b)}
+    ${$&&x==="flat"&&(u=>`
   border-color: transparent;
   background-color: transparent;
-  color: ${theme.colors.gray.light1};
+  color: ${u.colors.gray.light1};
   cursor: not-allowed;
-`;
-/****************************************************************************/
-/*                               Root styles                                */
-/****************************************************************************/
-const Root = styled__default['default'].button `
-  outline: none;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  white-space: nowrap;
-  border: 2px solid transparent;
-  border-radius: 3px;
-  width: ${({ fullWidth }) => fullWidth && '100%'};
-
-  ${typography_ButtonText_index.BasicButtonTextStyle}
-  ${({ size }) => getFontStyles(size)}
-  ${({ size, isLoading }) => styled.css `
-    ${size === 'smaller' && smallerSizeStyles(isLoading)}
-    ${size === 'small' && smallSizeStyles(isLoading)}
-    ${size === 'regular' && regularSizeStyles(isLoading)}
-    ${size === 'large' && largeSizeStyles(isLoading)}
-  `}
-  background-color: transparent;
-  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
-  ${({ variant, color, disabled, theme }) => styled.css `
-    ${!disabled && variant === 'solid' && solidColorStyles(theme)(color)}
-    ${!disabled && variant === 'outline' && outlineColorStyles(theme)(color)}
-    ${!disabled && variant === 'flat' && flatColorStyles(theme)(color)}
-    ${disabled && variant !== 'flat' && disabledCommonColorStyles(theme)}
-    ${disabled && variant === 'flat' && disabledFlatColorStyles(theme)}
+`)(b)}
   `}
-`;
-/****************************************************************************/
-/*                              Main component                              */
-/****************************************************************************/
-const LoadingSpinner = styled__default['default'](components_Spinner_index['default']) ``;
-const spinnerSizes = {
-    smaller: 1,
-    small: 1,
-    regular: 1.5,
-    large: 1.75,
-};
-const Button = ({ size = 'small', color = 'primary', variant = 'solid', fullWidth = false, isDisabled = false, isLoading = false, children, ...props }) => {
-    return (jsxRuntime.jsx(Root, Object.assign({}, props, { color: color, disabled: isDisabled || isLoading, fullWidth: fullWidth, theme: theme['default'], variant: variant, size: size, isLoading: isLoading }, { children: isLoading ? (jsxRuntime.jsx(LoadingSpinner, { color: "neutral", size: spinnerSizes[size] }, void 0)) : (children) }), void 0));
-};
-
-exports.Button = Button;
-exports['default'] = Button;
+`,i=c.default(e.default)``,d={smaller:1,small:1,regular:1.5,large:1.75},p=({size:x="small",color:h="primary",variant:$="solid",fullWidth:b=!1,isDisabled:u=!1,isLoading:g=!1,children:f,...m})=>a.default.createElement(s,{...m,color:h,disabled:u||g,fullWidth:b,theme:n.default,variant:$,size:x,isLoading:g},g?a.default.createElement(i,{color:"neutral",size:d[x]}):f);exports.Button=p,exports.default=p;

package/cjs/components/Card/index.js

@@ -1,27 +1,8 @@
-'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 CardWrapper = styled__default['default'].div `
-  background: ${theme['default'].colors.background.light};
-  ${({ boxShadow }) => boxShadow && `box-shadow: ${boxShadow};`}
-  ${({ boxShadow }) => !boxShadow &&
-    `box-shadow: 0 2px 4px rgba(0, 0, 0, 10%), 0 2px 4px rgba(0, 0, 0, 9%),
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),o=require("styled-components"),r=require("../../theme.js");function t(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var d=t(e);const a=t(o).default.div`
+  background: ${r.default.colors.background.light};
+  ${({boxShadow:x})=>x&&`box-shadow: ${x};`}
+  ${({boxShadow:x})=>!x&&`box-shadow: 0 2px 4px rgba(0, 0, 0, 10%), 0 2px 4px rgba(0, 0, 0, 9%),
     0 1px 5px rgba(0, 0, 0, 15%);`}
   border-radius: 0 0 3px 3px;
-  ${({ topBorder }) => topBorder && `border-top: 4px solid ${topBorder};`}
-`;
-const Card = ({ ...props }) => {
-    return (jsxRuntime.jsx(CardWrapper, Object.assign({ topBorder: props.topBorder, boxShadow: props.boxShadow }, { children: props.children }), void 0));
-};
-
-exports.Card = Card;
-exports['default'] = Card;
+  ${({topBorder:x})=>x&&`border-top: 4px solid ${x};`}
+`,p=({...x})=>d.default.createElement(a,{topBorder:x.topBorder,boxShadow:x.boxShadow},x.children);exports.Card=p,exports.default=p;