@kvdbil/components 3.3.5-4 → 3.4.0

package/cjs/components/MenuItem/index.js

@@ -1,83 +1,38 @@
-'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 fontSizes = {
-    1: {
-        size: '2rem',
-        lineHeight: '3rem',
-        bottom: '2rem',
-        fontFamily: theme['default'].typography.fontAlternativeFamily,
-    },
-    2: {
-        size: '1.5rem',
-        lineHeight: '2.5rem',
-        bottom: '1rem',
-        fontFamily: theme['default'].typography.fontAlternativeFamily,
-    },
-    3: {
-        size: '1rem',
-        lineHeight: '1.5rem',
-        bottom: '1rem',
-        fontFamily: theme['default'].typography.fontBaseFamily,
-    },
-};
-const Wrapper = styled__default['default'].li `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("../../theme.js");function o(u){return u&&typeof u=="object"&&"default"in u?u:{default:u}}var r=o(e),a=o(t);const n={1:{size:"2rem",lineHeight:"3rem",bottom:"2rem",fontFamily:l.default.typography.fontAlternativeFamily},2:{size:"1.5rem",lineHeight:"2.5rem",bottom:"1rem",fontFamily:l.default.typography.fontAlternativeFamily},3:{size:"1rem",lineHeight:"1.5rem",bottom:"1rem",fontFamily:l.default.typography.fontBaseFamily}},i=a.default.li`
   list-style-type: none;
   display: flex;
   flex-direction: column;
-  ${({ hasPreamble }) => hasPreamble && 'grid-column-end: span 2'};
+  ${({hasPreamble:u})=>u&&"grid-column-end: span 2"};
 
   :hover {
     cursor: pointer;
   }
-`;
-const BaseText = styled__default['default'].span `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
-`;
-const TextContainer = styled__default['default'].div `
+`,m=a.default.span`
+  font-family: ${({theme:u})=>u.typography.fontAlternativeFamily};
+  font-weight: ${({theme:u})=>u.typography.fontAlternativeRegularWeight};
+`,f=a.default.div`
   display: flex;
   flex-direction: column;
-  padding-bottom: ${({ level }) => fontSizes[level].bottom};
-`;
-const Text = styled__default['default'](BaseText) `
-  color: ${({ theme }) => theme.colors.text.dark};
-  font-size: ${({ level }) => fontSizes[level].size};
-  line-height: ${({ level }) => fontSizes[level].lineHeight};
-  font-family: ${({ level }) => fontSizes[level].fontFamily};
-
-  ${({ level, theme }) => level === 3 &&
-    `font-weight: ${theme.typography.fontAlternativeRegularWeight}`};
-`;
-const Title = styled__default['default'](BaseText) `
+  padding-bottom: ${({level:u})=>n[u].bottom};
+`,h=a.default(m)`
+  color: ${({theme:u})=>u.colors.text.dark};
+  font-size: ${({level:u})=>n[u].size};
+  line-height: ${({level:u})=>n[u].lineHeight};
+  font-family: ${({level:u})=>n[u].fontFamily};
+
+  ${({level:u,theme:d})=>u===3&&`font-weight: ${d.typography.fontAlternativeRegularWeight}`};
+`,s=a.default(m)`
   font-size: 0.75rem;
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  font-weight: ${({theme:u})=>u.typography.fontAlternativeBoldWeight};
   line-height: 1.25rem;
-  color: ${({ theme }) => theme.colors.text.dark};
+  color: ${({theme:u})=>u.colors.text.dark};
   text-transform: uppercase;
   margin-bottom: 1.5rem;
-`;
-const Preamble = styled__default['default'](BaseText) `
+`,y=a.default(m)`
   font-size: 0.8125rem;
-  font-weight: ${({ theme }) => theme.typography.fontBaseRegularWeight};
+  font-weight: ${({theme:u})=>u.typography.fontBaseRegularWeight};
   line-height: 1.5rem;
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
-  color: ${({ theme }) => theme.colors.text.dark};
-  margin-top: ${({ level }) => (level === 3 ? '0.25rem' : 0)};
-`;
-const MenuItem = ({ preamble, title, level, component: Component = 'li', children, ...props }) => {
-    const hasPreamble = Boolean(preamble);
-    return (jsxRuntime.jsxs(Wrapper, Object.assign({ as: Component }, props, { hasPreamble: hasPreamble }, { children: [title && jsxRuntime.jsx(Title, { children: title }, void 0), jsxRuntime.jsxs(TextContainer, Object.assign({ level: level }, { children: [jsxRuntime.jsx(Text, Object.assign({ level: level, hasPreamble: hasPreamble }, { children: children }), void 0), preamble && jsxRuntime.jsx(Preamble, Object.assign({ level: level }, { children: preamble }), void 0)] }), void 0)] }), void 0));
-};
-
-exports.MenuItem = MenuItem;
-exports['default'] = MenuItem;
+  font-family: ${({theme:u})=>u.typography.fontBaseFamily};
+  color: ${({theme:u})=>u.colors.text.dark};
+  margin-top: ${({level:u})=>u===3?"0.25rem":0};
+`,p=({preamble:u,title:d,level:g,component:v="li",children:$,...b})=>{const c=Boolean(u);return r.default.createElement(i,{as:v,...b,hasPreamble:c},d&&r.default.createElement(s,null,d),r.default.createElement(f,{level:g},r.default.createElement(h,{level:g,hasPreamble:c},$),u&&r.default.createElement(y,{level:g},u)))};exports.MenuItem=p,exports.default=p;

package/cjs/components/Modal/index.js

@@ -1,19 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var reactDom = require('react-dom');
-var reactTransitionGroup = require('react-transition-group');
-var styled = require('styled-components');
-var components_Icons_Close = 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 transitions = styled.css `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom"),n=require("react-transition-group"),i=require("styled-components"),r=require("../Icons/Close.js");function a(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var o=a(e),d=a(i);const l=i.css`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -31,24 +16,21 @@ const transitions = styled.css `
     opacity: 0;
     transition: opacity 0.25s ease-in-out;
   }
-`;
-const Container = styled__default['default'].div `
-  ${transitions}
+`,u=d.default.div`
+  ${l}
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 200;
-`;
-const Background = styled__default['default'].div `
+`,s=d.default.div`
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(34, 34, 34, 0.3);
-`;
-const Content = styled__default['default'].div `
+`,c=d.default.div`
   position: relative;
   max-width: 512px;
   padding: 24px 32px 24px 32px;
@@ -69,8 +51,7 @@ const Content = styled__default['default'].div `
     margin-right: auto;
     min-width: 355px;
   }
-`;
-const CloseContainer = styled__default['default'].div `
+`,p=d.default.div`
   position: absolute;
   top: 24px;
   right: 32px;
@@ -83,38 +64,14 @@ const CloseContainer = styled__default['default'].div `
     width: 1rem;
     height: 1rem;
   }
-`;
-const BodyStyleInjector = styled.createGlobalStyle `
+`,m=i.createGlobalStyle`
   body {
     overflow: hidden;
 
-    ${typeof window !== 'undefined' &&
-    window.innerWidth > 1024 &&
-    `
+    ${typeof window!="undefined"&&window.innerWidth>1024&&`
         padding-right: 15px !important;
     `}
   }
-`;
-const Transitions = styled.createGlobalStyle `
-  ${transitions}
-`;
-const Modal = ({ children, isOpen, contentStyles, withPortal = false, onClose, }) => {
-    react.useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                if (isOpen) {
-                    onClose();
-                }
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [onClose, isOpen]);
-    const Component = (jsxRuntime.jsx(reactTransitionGroup.CSSTransition, Object.assign({ in: isOpen, mountOnEnter: true, unmountOnExit: true, timeout: 400, classNames: "backgroundTransition" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Transitions, {}, void 0), jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(Background, { "data-testid": "background", onClick: onClose }, void 0), jsxRuntime.jsxs(Content, Object.assign({ style: contentStyles }, { children: [jsxRuntime.jsx(CloseContainer, Object.assign({ onClick: onClose, "data-testid": "close" }, { children: jsxRuntime.jsx(components_Icons_Close['default'], {}, void 0) }), void 0), children] }), void 0), jsxRuntime.jsx(BodyStyleInjector, {}, void 0)] }, void 0)] }, void 0) }), void 0));
-    return withPortal ? reactDom.createPortal(Component, document.body) : Component;
-};
-
-exports.Modal = Modal;
-exports['default'] = Modal;
+`,f=i.createGlobalStyle`
+  ${l}
+`,g=({children:x,isOpen:b,contentStyles:v,withPortal:k=!1,onClose:h})=>{e.useEffect(()=>{const y=E=>{E.key==="Escape"&&b&&h()};return window.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y)}},[h,b]);const w=o.default.createElement(n.CSSTransition,{in:b,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},o.default.createElement(o.default.Fragment,null,o.default.createElement(f,null),o.default.createElement(u,null,o.default.createElement(s,{"data-testid":"background",onClick:h}),o.default.createElement(c,{style:v},o.default.createElement(p,{onClick:h,"data-testid":"close"},o.default.createElement(r.default,null)),x),o.default.createElement(m,null))));return k?t.createPortal(w,document.body):w};exports.Modal=g,exports.default=g;

package/cjs/components/NotificationButton/index.js

@@ -1,35 +1,11 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('styled-components');
-var components_Badge_index = require('../Badge/index.js');
-var components_Button_index = require('../Button/index.js');
-require('../../theme.js');
-require('../Spinner/index.js');
-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);
-
-const Container = styled__default['default'].div `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),n=require("../Badge/index.js"),r=require("../Button/index.js");function i(l){return l&&typeof l=="object"&&"default"in l?l:{default:l}}require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js");var o=i(e),d=i(t);const a=d.default.div`
   position: relative;
   display: inline-block;
-`;
-const StyledBadge = styled__default['default'](components_Badge_index.Badge) `
+`,u=d.default(n.Badge)`
   position: absolute;
   top: 0;
   right: 0;
   margin: -10px;
   border: 2px solid white;
-  ${props => props.noPadding && `padding: 0;`}
-`;
-const NotificationButton = (props) => {
-    const count = props.badgeProps.notificationAmount || 0;
-    const noPadding = count < 10;
-    return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(components_Button_index.Button, Object.assign({}, props.buttonProps, { children: props.children }), void 0), jsxRuntime.jsx(StyledBadge, Object.assign({}, props.badgeProps, { noPadding: noPadding }), void 0)] }, void 0));
-};
-
-exports.NotificationButton = NotificationButton;
+  ${l=>l.noPadding&&"padding: 0;"}
+`;exports.NotificationButton=l=>{const s=(l.badgeProps.notificationAmount||0)<10;return o.default.createElement(a,null,o.default.createElement(r.Button,{...l.buttonProps},l.children),o.default.createElement(u,{...l.badgeProps,noPadding:s}))};

package/cjs/components/OffCanvas/Overlay.js

@@ -1,25 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactTransitionGroup = require('react-transition-group');
-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 defaultTransitionProps = {
-    classNames: 'backgroundTransition',
-    timeout: {
-        enter: 400,
-        exit: 400,
-    },
-    mountOnEnter: true,
-    unmountOnExit: true,
-};
-const Background = styled__default['default'].div `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("react-transition-group"),n=require("styled-components");function i(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var a=i(t);const o={classNames:"backgroundTransition",timeout:{enter:400,exit:400},mountOnEnter:!0,unmountOnExit:!0},r=i(n).default.div`
   position: fixed;
   z-index: 1000;
   width: 100%;
@@ -45,14 +24,4 @@ const Background = styled__default['default'].div `
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
   }
-`;
-const Overlay = ({ className, isOpen, onClick, transitionProps = defaultTransitionProps, }) => {
-    const handleClick = () => {
-        if (onClick) {
-            onClick();
-        }
-    };
-    return (jsxRuntime.jsx(reactTransitionGroup.CSSTransition, Object.assign({ in: isOpen }, transitionProps, { className: className }, { children: jsxRuntime.jsx(Background, { onClick: handleClick }, void 0) }), void 0));
-};
-
-exports['default'] = Overlay;
+`;exports.default=({className:s,isOpen:u,onClick:c,transitionProps:d=o})=>a.default.createElement(e.CSSTransition,{in:u,...d,className:s},a.default.createElement(r,{onClick:()=>{c&&c()}}));

package/cjs/components/OffCanvas/index.js

@@ -1,98 +1,57 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var reactDom = require('react-dom');
-var styled = require('styled-components');
-var reactTransitionGroup = require('react-transition-group');
-var components_OffCanvas_Overlay = require('./Overlay.js');
-var components_OffCanvas_useClickOutside = require('./useClickOutside.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const defaultAnimationName = 'offCanvasAnimation';
-const defaultTransitionProps = {
-    timeout: {
-        enter: 300,
-        exit: 300,
-    },
-    mountOnEnter: true,
-    unmountOnExit: true,
-};
-const Container = styled__default['default'].div `
-  ${({ animationName, animationDuration, width, from, backgroundColor, theme, }) => {
-    return `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("react-dom"),n=require("styled-components"),r=require("react-transition-group"),a=require("./Overlay.js"),i=require("./useClickOutside.js");function o(m){return m&&typeof m=="object"&&"default"in m?m:{default:m}}var s=o(t),l=o(n);const u={timeout:{enter:300,exit:300},mountOnEnter:!0,unmountOnExit:!0},d=l.default.div`
+  ${({animationName:m,animationDuration:v,width:h,from:$,backgroundColor:p,theme:g})=>`
     position: fixed;
     z-index: 1001;
     width: 100%;
     height: 100%;
     top: 0;
-    ${from === 'left' ? 'left: 0;' : 'right: 0;'}
-    background-color: ${backgroundColor || theme.colors.background.light};
-    width: ${width};
+    ${$==="left"?"left: 0;":"right: 0;"}
+    background-color: ${p||g.colors.background.light};
+    width: ${h};
     box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
 
     
-    &.${animationName}--right-enter {
-      transform: translate3d(${width}, 0, 0);
+    &.${m}--right-enter {
+      transform: translate3d(${h}, 0, 0);
     }
     
-    &.${animationName}--right-enter.${animationName}--right-enter-active {
+    &.${m}--right-enter.${m}--right-enter-active {
       transform: translate3d(0, 0, 0);
       transition: transform 0.2s ease-in-out;
     }
     
-    &.${animationName}--right-exit {
+    &.${m}--right-exit {
       transform: translate3d(0, 0, 0);
     }
     
-    &.${animationName}--right-exit.${animationName}--right-exit-active {
-      transform: translate3d(${width}, 0, 0);
+    &.${m}--right-exit.${m}--right-exit-active {
+      transform: translate3d(${h}, 0, 0);
       transition: transform 0.2s ease-in-out;
     }
     
-    &.${animationName}--left-enter {
-      transform: translate3d(-${width}, 0, 0);
+    &.${m}--left-enter {
+      transform: translate3d(-${h}, 0, 0);
     }
     
-    &.${animationName}--left-enter.${animationName}--left-enter-active {
+    &.${m}--left-enter.${m}--left-enter-active {
       transform: translate3d(0, 0, 0);
       transition: transform 0.2s ease-in-out;
     }
     
-    &.${animationName}--left-exit {
+    &.${m}--left-exit {
       transform: translate3d(0, 0, 0);
     }
     
-    &.${animationName}--left-exit.${animationName}--left-exit-active {
-      transform: translate3d(-${width}, 0, 0);
-      transition: transform ${animationDuration}ms ease-in-out;
+    &.${m}--left-exit.${m}--left-exit-active {
+      transform: translate3d(-${h}, 0, 0);
+      transition: transform ${v}ms ease-in-out;
     }
-  `;
-}}
-`;
-const Contents = styled__default['default'].div `
+  `}
+`,f=l.default.div`
   position: relative;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-`;
-const OffCanvas = ({ animationName = defaultAnimationName, animationDuration = 300, backgroundColor, backgroundOverlay, children, from = 'right', isOpen, onClickOutside, width = '375px', withPortal, transitionProps, }) => {
-    const contentRef = react.useRef(null);
-    components_OffCanvas_useClickOutside.useOutsideClick(contentRef, () => onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside());
-    if (backgroundOverlay && !onClickOutside) {
-        console.error('Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component');
-    }
-    const className = `${animationName}--${from}`;
-    const component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [backgroundOverlay && jsxRuntime.jsx(components_OffCanvas_Overlay['default'], { isOpen: isOpen }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(reactTransitionGroup.CSSTransition, Object.assign({ in: isOpen, className: `${animationName} ${className}`, classNames: className }, defaultTransitionProps, transitionProps, { children: jsxRuntime.jsx(Container, Object.assign({ ref: contentRef, animationName: animationName, animationDuration: animationDuration, backgroundColor: backgroundColor, from: from, width: width }, { children: jsxRuntime.jsx(Contents, Object.assign({ className: `${animationName}-content` }, { children: children }), void 0) }), void 0) }), void 0) }, void 0)] }, void 0));
-    return withPortal ? reactDom.createPortal(component, document.body) : component;
-};
-
-exports.OffCanvas = OffCanvas;
-exports['default'] = OffCanvas;
+`,c=({animationName:m="offCanvasAnimation",animationDuration:v=300,backgroundColor:h,backgroundOverlay:$,children:p,from:g="right",isOpen:O,onClickOutside:x,width:C="375px",withPortal:y,transitionProps:E})=>{const b=t.useRef(null);i.useOutsideClick(b,()=>x==null?void 0:x()),$&&!x&&console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");const w=`${m}--${g}`,k=s.default.createElement(s.default.Fragment,null,$&&s.default.createElement(a.default,{isOpen:O}),s.default.createElement(s.default.Fragment,null,s.default.createElement(r.CSSTransition,{in:O,className:`${m} ${w}`,classNames:w,...u,...E},s.default.createElement(d,{ref:b,animationName:m,animationDuration:v,backgroundColor:h,from:g,width:C},s.default.createElement(f,{className:`${m}-content`},p)))));return y?e.createPortal(k,document.body):k};exports.OffCanvas=c,exports.default=c;

package/cjs/components/OffCanvas/useClickOutside.js

@@ -1,21 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-
-const useOutsideClick = (ref, callback) => {
-    const handleClick = react.useCallback((event) => {
-        if (ref.current && !ref.current.contains(event.target)) {
-            callback();
-        }
-    }, [callback, ref]);
-    react.useEffect(() => {
-        document.addEventListener('mousedown', handleClick);
-        return () => {
-            document.removeEventListener('mousedown', handleClick);
-        };
-    }, [handleClick]);
-};
-
-exports.useOutsideClick = useOutsideClick;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useOutsideClick=(t,s)=>{const r=e.useCallback(n=>{t.current&&!t.current.contains(n.target)&&s()},[s,t]);e.useEffect(()=>(document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}),[r])};

package/cjs/components/RadioButton/index.js

@@ -1,18 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('styled-components');
-var shared_helpers = require('../../shared/helpers.js');
-var theme = require('../../theme.js');
-var components_IconButton = require('../IconButton.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const regularSize = styled.css `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/helpers.js"),o=require("../../theme.js"),a=require("../IconButton.js");function i(b){return b&&typeof b=="object"&&"default"in b?b:{default:b}}var l=i(e),s=i(r);const c={regular:r.css`
   .circle {
     &--outer {
       height: 24px;
@@ -25,8 +11,7 @@ const regularSize = styled.css `
       transform: scale(0.6);
     }
   }
-`;
-const largeSize = styled.css `
+`,large:r.css`
   .circle {
     &--outer {
       height: 32px;
@@ -39,80 +24,65 @@ const largeSize = styled.css `
       transform: scale(0.6);
     }
   }
-`;
-const sizes = {
-    regular: regularSize,
-    large: largeSize,
-};
-const disabledStyle = styled.css `
+`},d=r.css`
   cursor: default;
 
   .circle {
     &--inner {
-      background-color: ${theme['default'].colors.gray.light1};
+      background-color: ${o.default.colors.gray.light1};
     }
 
     &--outer {
-      border: 2px solid ${theme['default'].colors.gray.light1};
+      border: 2px solid ${o.default.colors.gray.light1};
     }
   }
-`;
-const checkedDisabledStyle = styled.css `
+`,n=r.css`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${theme['default'].colors.gray.light1};
+      background-color: ${o.default.colors.gray.light1};
     }
   }
-`;
-const checkedStyle = (color) => styled.css `
+`,u=s.default.label`
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  ${b=>c[b.size]};
+
+  ${b=>{return!b.isDisabled&&b.isChecked&&(m=b.color,r.css`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${theme['default'].colors[color].main};
+      background-color: ${o.default.colors[m].main};
     }
 
     &--outer {
-      border: 2px solid ${theme['default'].colors[color].main};
+      border: 2px solid ${o.default.colors[m].main};
     }
   }
-`;
-const RadioButtonWrapper = styled__default['default'].label `
-  cursor: pointer;
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-
-  ${props => sizes[props.size]};
+`);var m}};
+  ${b=>b.isDisabled&&d};
 
-  ${props => !props.isDisabled && props.isChecked && checkedStyle(props.color)};
-  ${props => props.isDisabled && disabledStyle};
-
-  ${props => props.isChecked && props.isDisabled && checkedDisabledStyle};
-`;
-const HiddenRadioButton = styled__default['default'].input `
+  ${b=>b.isChecked&&b.isDisabled&&n};
+`,f=s.default.input`
   display: none;
-`;
-const OuterCircle = styled__default['default'].span `
+`,h=s.default.span`
   display: flex;
   box-sizing: border-box;
   border-radius: 50%;
 
-  border: 2px solid ${theme['default'].colors.gray.light1};
-`;
-const InnerCircle = styled__default['default'].span `
+  border: 2px solid ${o.default.colors.gray.light1};
+`,g=s.default.span`
   box-sizing: border-box;
   opacity: 0;
   margin: auto;
   border-radius: 50%;
-  background-color: ${theme['default'].colors.gray.light1};
+  background-color: ${o.default.colors.gray.light1};
 
   position: absolute;
   top: 0;
   left: 0;
-`;
-const RadioButton = ({ name = shared_helpers.generateNameHash('radio-button'), size = 'regular', checked = false, isDisabled = false, color = 'secondary', onChange, ...props }) => (jsxRuntime.jsxs(components_IconButton['default'], Object.assign({ onClick: onChange, isActive: checked, isDisabled: isDisabled, color: color }, { children: [jsxRuntime.jsx(HiddenRadioButton, Object.assign({ "data-validate": "checked", type: "radio", name: name, id: name, onChange: onChange, disabled: isDisabled }, props), void 0), jsxRuntime.jsx(RadioButtonWrapper, Object.assign({ htmlFor: name, size: size, color: color, isChecked: checked, isDisabled: isDisabled }, { children: jsxRuntime.jsx(OuterCircle, Object.assign({ className: "circle circle--outer" }, { children: jsxRuntime.jsx(InnerCircle, { className: "circle circle--inner" }, void 0) }), void 0) }), void 0)] }), void 0));
-
-exports.RadioButton = RadioButton;
-exports['default'] = RadioButton;
+`,p=({name:b=t.generateNameHash("radio-button"),size:m="regular",checked:x=!1,isDisabled:y=!1,color:$="secondary",onChange:k,...v})=>l.default.createElement(a.default,{onClick:k,isActive:x,isDisabled:y,color:$},l.default.createElement(f,{"data-validate":"checked",type:"radio",name:b,id:b,onChange:k,disabled:y,...v}),l.default.createElement(u,{htmlFor:b,size:m,color:$,isChecked:x,isDisabled:y},l.default.createElement(h,{className:"circle circle--outer"},l.default.createElement(g,{className:"circle circle--inner"}))));exports.RadioButton=p,exports.default=p;

package/cjs/components/Range/index.js

@@ -1,44 +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');
-var typography_BodyText_index = require('../../typography/BodyText/index.js');
-var typography_Heading_index = require('../../typography/Heading/index.js');
-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 Container = styled__default['default'].div `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),a=require("../../theme.js"),l=require("../../typography/BodyText/index.js"),o=require("../../typography/Heading/index.js");function r(m){return m&&typeof m=="object"&&"default"in m?m:{default:m}}require("../../shared/media-queries.js");var i=r(e),n=r(t);const s=n.default.div`
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
-`;
-const RangeWrapper = styled__default['default'].div `
+`,u=n.default.div`
   display: flex;
   position: relative;
   width: 100%;
-`;
-const DisplayValue = styled__default['default'](typography_Heading_index.Display1) `
-  color: ${({ color }) => theme['default'].colors[color].main};
+`,d=n.default(o.Display1)`
+  color: ${({color:m})=>a.default.colors[m].main};
   line-height: 1;
   margin-top: 0;
   margin-bottom: 0;
-`;
-const Value = styled__default['default'](typography_BodyText_index.CaptionLink) `
+`,c=n.default(l.CaptionLink)`
   flex: 1;
-  color: ${theme['default'].colors.gray.light1};
+  color: ${a.default.colors.gray.light1};
   line-height: 1.2;
   position: relative;
   text-align: center;
   &:before {
     content: '';
-    background: ${({ color }) => theme['default'].colors[color].main};
+    background: ${({color:m})=>a.default.colors[m].main};
     margin: 0 auto 2px;
     display: flex;
     justify-content: center;
@@ -48,22 +30,15 @@ const Value = styled__default['default'](typography_BodyText_index.CaptionLink)
     position: relative;
     width: 2px;
   }
-`;
-const MinValue = styled__default['default'](Value) `
+`,p=n.default(c)`
   &:after {
     content: '';
     position: absolute;
     width: 100%;
     height: 4px;
-    background: ${({ color }) => theme['default'].colors[color].main};
+    background: ${({color:m})=>a.default.colors[m].main};
     top: 40px;
     left: 50%;
     transform: translate(0, -50%);
   }
-`;
-const Range = ({ displayValue, maxValue, minValue, color = 'primary', }) => {
-    return (jsxRuntime.jsxs(Container, { children: [displayValue && (jsxRuntime.jsx(DisplayValue, Object.assign({ as: "span", color: color }, { children: displayValue }), void 0)), jsxRuntime.jsxs(RangeWrapper, { children: [jsxRuntime.jsx(MinValue, Object.assign({ as: "span", color: color }, { children: minValue }), void 0), jsxRuntime.jsx(Value, Object.assign({ as: "span", color: color }, { children: maxValue }), void 0)] }, void 0)] }, void 0));
-};
-
-exports.Range = Range;
-exports['default'] = Range;
+`,f=({displayValue:m,maxValue:g,minValue:h,color:x="primary"})=>i.default.createElement(s,null,m&&i.default.createElement(d,{as:"span",color:x},m),i.default.createElement(u,null,i.default.createElement(p,{as:"span",color:x},h),i.default.createElement(c,{as:"span",color:x},g)));exports.Range=f,exports.default=f;