@kvdbil/components 3.3.5-4 → 3.4.0

package/cjs/components/Select/components/test-icon.js

@@ -1,9 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-
-const TestIcon = () => (jsxRuntime.jsx("svg", Object.assign({ viewBox: "0 0 896.003 896.004", height: "18px", width: "18px", y: "0px", x: "0px", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M850.321,663.513C774.05,802.057,626.63,896.004,457.168,896.004c-247.688,0-448.478-200.578-448.478-448.002 S209.479,0,457.168,0c203.805,0,375.577,135.92,430.145,321.882L428.365,478.82L850.321,663.513z M614.342,318.945 c43.631,0,78.998-35.7,78.998-79.736c0-44.039-35.367-79.735-78.998-79.735c-43.63,0-78.999,35.696-78.999,79.735 C535.343,283.245,570.712,318.945,614.342,318.945" }, void 0) }), void 0));
-
-exports.TestIcon = TestIcon;
+"use strict";function e(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));exports.TestIcon=()=>t.default.createElement("svg",{viewBox:"0 0 896.003 896.004",height:"18px",width:"18px",y:"0px",x:"0px",xmlns:"http://www.w3.org/2000/svg"},t.default.createElement("path",{d:"M850.321,663.513C774.05,802.057,626.63,896.004,457.168,896.004c-247.688,0-448.478-200.578-448.478-448.002 S209.479,0,457.168,0c203.805,0,375.577,135.92,430.145,321.882L428.365,478.82L850.321,663.513z M614.342,318.945 c43.631,0,78.998-35.7,78.998-79.736c0-44.039-35.367-79.735-78.998-79.735c-43.63,0-78.999,35.696-78.999,79.735 C535.343,283.245,570.712,318.945,614.342,318.945"}));

package/cjs/components/Select/index.js

@@ -1,69 +1,35 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var ReactSelect = require('react-select');
-var styled = require('styled-components');
-var shared_constants = require('../../shared/constants.js');
-var shared_helpers = require('../../shared/helpers.js');
-var theme = require('../../theme.js');
-var components_FieldLabel = require('../FieldLabel.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Container = styled__default['default'].div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("react-select"),o=require("styled-components"),t=require("../../shared/constants.js"),a=require("../../theme.js"),l=require("../FieldLabel.js");function i(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}var s=i(e),d=i(r),n=i(o);const u=n.default.div`
+  font-family: ${({theme:y})=>y.typography.fontBaseFamily};
   position: relative;
-`;
-const prefixStyles = (hasPrefix) => hasPrefix && {
-    paddingLeft: '2.5rem',
-};
-const disabledStyles = (isDisabled) => isDisabled && {
-    border: `1px solid ${theme['default'].colors.gray.light1}`,
-    color: theme['default'].colors.gray.dark1,
-    fill: theme['default'].colors.gray.light1,
-};
-const Prefix = styled__default['default'].div `
+`,c=y=>y&&{paddingLeft:"2.5rem"},f=y=>y&&{border:`1px solid ${a.default.colors.gray.light1}`,color:a.default.colors.gray.dark1,fill:a.default.colors.gray.light1},m=n.default.div`
   position: absolute;
   z-index: 1;
   top: 0.5rem;
   margin: 0.35rem 0.75rem;
 
-  fill: ${theme['default'].colors.gray.dark5};
-  transition: ${shared_constants.DEFAULT_TRANSITION_MS};
+  fill: ${a.default.colors.gray.dark5};
+  transition: ${t.DEFAULT_TRANSITION_MS};
 
-  ${props => props.isDisabled &&
-    `
-    fill: ${theme['default'].colors.gray.light1};
+  ${y=>y.isDisabled&&`
+    fill: ${a.default.colors.gray.light1};
 `}
 
-  ${props => props.isFocused &&
-    `
-    fill: ${props.theme.colors.text.dark};
+  ${y=>y.isFocused&&`
+    fill: ${y.theme.colors.text.dark};
 `}
-`;
-const HelperText = styled__default['default'].span `
+`,p=n.default.span`
   display: block;
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  font-family: ${({theme:y})=>y.typography.fontBaseFamily};
   font-size: 0.81rem;
-
   margin-top: 0.25rem;
   margin-left: 0.85rem;
-
-  color: ${({ hasError }) => hasError ? theme['default'].colors.error.main : theme['default'].colors.text.dark};
-`;
-const Arrow = (props) => (jsxRuntime.jsxs("svg", Object.assign({}, props, { children: [jsxRuntime.jsx("symbol", Object.assign({ id: "icon-arrow", viewBox: "0 0 19 19" }, { children: jsxRuntime.jsx("path", { d: "M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z" }, void 0) }), void 0), jsxRuntime.jsx("use", { xlinkHref: "#icon-arrow" }, void 0)] }), void 0));
-const DropdownArrow = styled__default['default'](Arrow) `
+  color: ${({hasError:y})=>y?a.default.colors.error.main:a.default.colors.text.disabled};
+`,h=n.default(y=>s.default.createElement("svg",{...y},s.default.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},s.default.createElement("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})),s.default.createElement("use",{xlinkHref:"#icon-arrow"})))`
   width: 0.8rem;
   height: 0.8rem;
   margin: 0 0.5rem;
-  ${props => props.$isFocused && `color: ${props.$theme.colors.text.dark}`}
-  ${props => props.$isDisabled && `color: ${props.$theme.colors.gray.dark1}`}
+  ${y=>y.$isFocused&&`color: ${y.$theme.colors.text.dark}`}
+  ${y=>y.$isDisabled&&`color: ${y.$theme.colors.gray.dark1}`}
 
 
   path {
@@ -71,103 +37,8 @@ const DropdownArrow = styled__default['default'](Arrow) `
     stroke: currentColor;
   }
 
-  transition: transform ${shared_constants.DEFAULT_TRANSITION_MS};
+  transition: transform ${t.DEFAULT_TRANSITION_MS};
 
-  transform: ${props => props.$isMenuOpen ? 'rotate(-180deg)' : 'rotate(0deg)'};
+  transform: ${y=>y.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
   transform-origin: 50% 60%;
-`;
-const getBorderColor = (isFocused, hasError) => {
-    if (hasError) {
-        return theme['default'].colors.error.main;
-    }
-    return isFocused ? theme['default'].colors.text.dark : theme['default'].colors.gray.light1;
-};
-const DropdownIndicator = ({ selectProps: { menuIsOpen = false }, isFocused = false, isDisabled, }) => {
-    return (jsxRuntime.jsx(DropdownArrow, { "$isDisabled": isDisabled, "$isFocused": isFocused, "$isMenuOpen": menuIsOpen, "$theme": theme['default'] }, void 0));
-};
-const Select = ({ color = 'primary', isDisabled = false, placeholder = '', helperText, height, className, hasError = false, onBlur = () => null, onFocus = () => null, forwardRef, onInputChange = () => null, ...props }) => {
-    const [isFocused, setIsFocused] = react.useState(false);
-    const [inputValue, setInputValue] = react.useState('');
-    const handleInputChange = (newValue, actionMeta) => {
-        onInputChange(newValue, actionMeta);
-        setInputValue(newValue);
-    };
-    const getOptionColor = ({ isSelected, isFocused }) => {
-        if (isSelected) {
-            return shared_helpers.fadedColor(theme['default'].colors[color].main, 0.72);
-        }
-        if (isFocused) {
-            return shared_helpers.fadedColor(theme['default'].colors[color].main, 0.18);
-        }
-        return 'white';
-    };
-    const handleFocus = (event) => {
-        setIsFocused(true);
-        onFocus(event);
-    };
-    const handleBlur = (event) => {
-        setIsFocused(false);
-        onBlur(event);
-    };
-    const borderColor = getBorderColor(isFocused, hasError);
-    return (jsxRuntime.jsxs(Container, Object.assign({ className: className }, { children: [props.label && (jsxRuntime.jsx(components_FieldLabel.Label, Object.assign({ height: height, isFocused: isFocused, hasValue: Boolean(props.value || inputValue), disabled: isDisabled, theme: theme['default'], hasError: hasError }, { children: props.label }), void 0)), props.prefix && (jsxRuntime.jsx(Prefix, Object.assign({ isDisabled: isDisabled, isFocused: isFocused }, { children: props.prefix }), void 0)), jsxRuntime.jsx(ReactSelect__default['default'], Object.assign({}, props, { ref: forwardRef, isDisabled: isDisabled, onInputChange: handleInputChange, placeholder: placeholder, onFocus: handleFocus, onBlur: handleBlur, styles: {
-                    control: styles => ({
-                        ...styles,
-                        fontFamily: theme['default'].typography.fontBaseFamily,
-                        fontSize: '1rem',
-                        fontWeight: 400,
-                        cursor: 'pointer',
-                        padding: '0.7rem 0.75rem',
-                        backgroundColor: theme['default'].colors.background.light,
-                        borderColor,
-                        boxShadow: 'none',
-                        '&:hover': {
-                            borderColor: 'none',
-                        },
-                        ...disabledStyles(isDisabled),
-                        ...prefixStyles(Boolean(props.prefix)),
-                    }),
-                    placeholder: styles => ({
-                        ...styles,
-                        display: !isFocused ? 'none' : 'static',
-                    }),
-                    singleValue: styles => ({
-                        ...styles,
-                        ...{
-                            maxWidth: 'calc(100% - 3.3rem)',
-                            width: 'calc(100% - 3.3rem)',
-                        },
-                    }),
-                    menu: styles => ({
-                        ...styles,
-                        zIndex: 2,
-                        padding: '0.25rem 0',
-                    }),
-                    option: (styles, { isSelected, isFocused }) => {
-                        return {
-                            ...styles,
-                            padding: '1rem',
-                            '&:hover': {
-                                background: getOptionColor({ isFocused: true, isSelected }),
-                            },
-                            background: getOptionColor({ isSelected, isFocused }),
-                            cursor: 'pointer',
-                            ...prefixStyles(Boolean(props.prefix)),
-                        };
-                    },
-                    valueContainer: styles => ({
-                        ...styles,
-                        ...{
-                            position: 'static',
-                            padding: height ? `${height - 1}rem 0 ` : 0,
-                            height: height ? 'auto' : '21px',
-                        },
-                    }),
-                }, components: {
-                    IndicatorSeparator: () => null,
-                    DropdownIndicator: DropdownIndicator,
-                } }), void 0), helperText && jsxRuntime.jsx(HelperText, Object.assign({ hasError: hasError }, { children: helperText }), void 0)] }), void 0));
-};
-
-exports.Select = Select;
-exports['default'] = Select;
+`,g=({selectProps:{menuIsOpen:y=!1},isFocused:D=!1,isDisabled:L})=>s.default.createElement(h,{$isDisabled:L,$isFocused:D,$isMenuOpen:y,$theme:a.default}),b=({className:y,color:D="primary",forwardRef:L,hasError:I=!1,height:S,helperText:B,isDisabled:k=!1,onBlur:M=()=>null,onFocus:N=()=>null,onInputChange:O=()=>null,placeholder:_="",name:w,...x})=>{const[v,E]=e.useState(!1),[j,R]=e.useState(""),T=({isSelected:$,isFocused:F,isDisabled:C})=>$?a.default.colors[D].main:C?a.default.colors.background.light:F?a.default.colors.background.gray:a.default.colors.background.light,z=(($,F)=>F?a.default.colors.error.main:$?a.default.colors.text.dark:a.default.colors.gray.light1)(v,I);return s.default.createElement(u,{className:y},x.label&&s.default.createElement(l.Label,{htmlFor:w,height:S,isFocused:v,hasValue:Boolean(x.value||j),disabled:k,theme:a.default,hasError:I},x.label),x.prefix&&s.default.createElement(m,{isDisabled:k,isFocused:v},x.prefix),s.default.createElement(d.default,{...x,inputId:w,name:w,ref:L,isDisabled:k,onInputChange:($,F)=>{O($,F),R($)},placeholder:_,onFocus:$=>{E(!0),N($)},onBlur:$=>{E(!1),M($)},styles:{control:$=>({...$,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:a.default.colors.background.light,borderColor:z,boxShadow:"none","&:hover":{borderColor:"none"},...f(k),...c(Boolean(x.prefix))}),placeholder:$=>({...$,display:v?"static":"none"}),singleValue:$=>({...$,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:$=>({...$,padding:"8px 0"}),menu:$=>({...$,borderRadius:0,boxShadow:a.default.elevations.elevation2,zIndex:2,padding:"0"}),option:($,{isSelected:F,isFocused:C,isDisabled:q})=>({...$,padding:"1rem",cursor:q?"not-allowed":"pointer","&:hover":{background:T({isSelected:F,isFocused:!0,isDisabled:q})},background:T({isSelected:F,isFocused:C}),...c(Boolean(x.prefix))}),valueContainer:$=>({...$,position:"static",padding:S?S-1+"rem 0 ":0,height:S?"auto":"21px"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:g}}),B&&s.default.createElement(p,{hasError:I},B))};exports.Select=b,exports.default=b;

package/cjs/components/Snackbar/index.js

@@ -1,45 +1,16 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-var components_Icons_CheckCircle = require('../Icons/CheckCircle.js');
-var components_Icons_Close = require('../Icons/Close.js');
-var components_Icons_ErrorCircle = require('../Icons/ErrorCircle.js');
-var components_Icons_InfoCircle = require('../Icons/InfoCircle.js');
-var reactTransitionGroup = 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 verticalStyles = {
-    top: styled.css `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../theme.js"),o=require("../Icons/CheckCircle.js"),n=require("../Icons/Close.js"),i=require("../Icons/ErrorCircle.js"),a=require("../Icons/InfoCircle.js"),l=require("react-transition-group");function c(E){return E&&typeof E=="object"&&"default"in E?E:{default:E}}var s=c(e),u=c(t);const d={top:t.css`
     top: 0;
-  `,
-    bottom: styled.css `
+  `,bottom:t.css`
     bottom: 0;
-  `,
-};
-const horizontalStyles = {
-    right: styled.css `
+  `},m={right:t.css`
     right: 0;
-  `,
-    center: styled.css `
+  `,center:t.css`
     left: 50%;
     transform: translate(-50%, 0);
-  `,
-    left: styled.css `
+  `,left:t.css`
     left: 0;
-  `,
-};
-const animationDuration = 200;
-const transitionClassName = 'anim';
-const Container = styled__default['default'].div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  `},f=u.default.div`
+  font-family: ${({theme:E})=>E.typography.fontBaseFamily};
   position: fixed;
   display: flex;
   align-items: center;
@@ -52,49 +23,43 @@ const Container = styled__default['default'].div `
   border-radius: 0.4rem;
   padding: 1.15rem 1.25rem;
 
-  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+  font-weight: ${({theme:E})=>E.typography.fontBaseBoldWeight};
   font-size: 0.875rem;
 
-  box-shadow: ${theme['default'].elevations.elevation8};
-  background-color: ${props => props.color !== 'none'
-    ? theme['default'].colors[props.color].main
-    : theme['default'].colors.background.light};
-  color: ${props => props.color !== 'none' ? theme['default'].colors.text.light : theme['default'].colors.text.dark};
+  box-shadow: ${r.default.elevations.elevation8};
+  background-color: ${E=>E.color!=="none"?r.default.colors[E.color].main:r.default.colors.background.light};
+  color: ${E=>E.color!=="none"?r.default.colors.text.light:r.default.colors.text.dark};
 
-  ${props => verticalStyles[props.origin.vertical || 'bottom']}
-  ${props => horizontalStyles[props.origin.horizontal || 'left']}
+  ${E=>d[E.origin.vertical||"bottom"]}
+  ${E=>m[E.origin.horizontal||"left"]}
 
-  transition: opacity ${animationDuration}ms ease-in;
+  transition: opacity ${200}ms ease-in;
 
-  &.${transitionClassName}-enter {
+  &.${"anim"}-enter {
     opacity: 0;
   }
-  &.${transitionClassName}-enter-active {
+  &.${"anim"}-enter-active {
     opacity: 1;
   }
-  &.${transitionClassName}-exit {
+  &.${"anim"}-exit {
     opacity: 1;
   }
-  &.${transitionClassName}-exit-active {
+  &.${"anim"}-exit-active {
     opacity: 0;
   }
-`;
-const Icon = styled__default['default'].div `
+`,g=u.default.div`
   display: inline-flex;
   margin: -0.25rem 0;
   margin-right: 0.75rem;
 
-  ${props => props.type === 'text' && 'margin-right: 0;'}
+  ${E=>E.type==="text"&&"margin-right: 0;"}
 
   svg {
     width: 1.5rem;
     height: 1.5rem;
-    fill: ${props => props.color !== 'none'
-    ? theme['default'].colors.background.light
-    : theme['default'].colors.background.dark};
+    fill: ${E=>E.color!=="none"?r.default.colors.background.light:r.default.colors.background.dark};
   }
-`;
-const CloseIcon = styled__default['default'](Icon) `
+`,p=u.default(g)`
   cursor: pointer;
 
   /* Bigger click area */
@@ -108,23 +73,6 @@ const CloseIcon = styled__default['default'](Icon) `
     width: 1rem;
     height: 1rem;
   }
-`;
-const Message = styled__default['default'].span `
+`,h=u.default.span`
   flex: 1;
-`;
-const icons = {
-    error: jsxRuntime.jsx(components_Icons_ErrorCircle['default'], {}, void 0),
-    success: jsxRuntime.jsx(components_Icons_CheckCircle['default'], {}, void 0),
-    info: jsxRuntime.jsx(components_Icons_InfoCircle['default'], {}, void 0),
-    text: '',
-};
-const Snackbar = ({ message, color = 'none', type = 'info', action, isOpen, origin = {}, onClose = () => { }, onExited = () => { }, autoHideDuration = 4000, ...props }) => {
-    react.useEffect(() => {
-        const timeout = setTimeout(onClose, autoHideDuration);
-        return () => clearTimeout(timeout);
-    }, [autoHideDuration, onClose]);
-    return (jsxRuntime.jsx(reactTransitionGroup.CSSTransition, Object.assign({ in: isOpen, timeout: animationDuration, mountOnEnter: true, unmountOnExit: true, onExited: onExited, classNames: transitionClassName }, { children: jsxRuntime.jsxs(Container, Object.assign({}, props, { color: color, origin: origin }, { children: [jsxRuntime.jsx(Icon, Object.assign({ color: color, type: type }, { children: icons[type] }), void 0), jsxRuntime.jsx(Message, { children: message }, void 0), action && action, jsxRuntime.jsx(CloseIcon, Object.assign({ color: color !== null && color !== void 0 ? color : 'none', onClick: onClose }, { children: jsxRuntime.jsx(components_Icons_Close['default'], {}, void 0) }), void 0)] }), void 0) }), void 0));
-};
-
-exports.Snackbar = Snackbar;
-exports['default'] = Snackbar;
+`,x={error:s.default.createElement(i.default,null),success:s.default.createElement(o.default,null),info:s.default.createElement(a.default,null),text:""},y=({message:E,color:$="none",type:v="info",action:k,isOpen:C,origin:j={},onClose:b=()=>{},onExited:w=()=>{},autoHideDuration:q=4e3,...I})=>(e.useEffect(()=>{const B=setTimeout(b,q);return()=>clearTimeout(B)},[q,b]),s.default.createElement(l.CSSTransition,{in:C,timeout:200,mountOnEnter:!0,unmountOnExit:!0,onExited:w,classNames:"anim"},s.default.createElement(f,{...I,color:$,origin:j},s.default.createElement(g,{color:$,type:v},x[v]),s.default.createElement(h,null,E),k&&k,s.default.createElement(p,{color:$!=null?$:"none",onClick:b},s.default.createElement(n.default,null)))));exports.Snackbar=y,exports.default=y;

package/cjs/components/Spinner/index.js

@@ -1,55 +1,19 @@
-'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 getDuration = (speed) => {
-    const durations = {
-        slow: '2s',
-        default: '1s',
-        fast: '0.5s',
-    };
-    return durations[speed] || durations.default;
-};
-const getSize = (size) => {
-    const sizes = {
-        smaller: 1,
-        small: 2,
-        regular: 3,
-        large: 4,
-    };
-    if (typeof size === 'number') {
-        return size;
-    }
-    return sizes[size] || sizes.regular;
-};
-const spin = styled.keyframes `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../theme.js");function a(u){return u&&typeof u=="object"&&"default"in u?u:{default:u}}var o=a(e),s=a(r);const i=u=>{const n={smaller:1,small:2,regular:3,large:4};return typeof u=="number"?u:n[u]||n.regular},l=r.keyframes`
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
-`;
-const StyledSpinner = styled__default['default'].div `
+`,d=s.default.div`
   display: inline-block;
   border-radius: 50%;
-  border-top: ${({ theme, color, size }) => `${getSize(size) / 10}em solid ${theme.colors[color].main}`};
-  border-bottom: ${({ size }) => `${getSize(size) / 10}em solid rgba(0, 0, 0, 0.1);`};
-  border-right: ${({ size }) => `${getSize(size) / 10}em solid rgba(0, 0, 0, 0.1);`};
-  border-left: ${({ size }) => `${getSize(size) / 10}em solid rgba(0, 0, 0, 0.1);`};
-  width: ${({ size }) => getSize(size)}em;
-  height: ${({ size }) => getSize(size)}em;
-  animation: ${spin} ${({ speed }) => getDuration(speed)} infinite linear;
+  border-top: ${({theme:u,color:n,size:m})=>`${i(m)/10}em solid ${u.colors[n].main}`};
+  border-bottom: ${({size:u})=>i(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  border-right: ${({size:u})=>i(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  border-left: ${({size:u})=>i(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  width: ${({size:u})=>i(u)}em;
+  height: ${({size:u})=>i(u)}em;
+  animation: ${l} ${({speed:u})=>(n=>{const m={slow:"2s",default:"1s",fast:"0.5s"};return m[n]||m.default})(u)} infinite linear;
   will-change: transform;
-`;
-const Spinner = ({ size = 'regular', color = 'primary', speed = 'default', ...props }) => (jsxRuntime.jsx(StyledSpinner, Object.assign({}, props, { role: "status", "aria-live": "polite", "aria-busy": "true", size: size, speed: speed, color: color, theme: theme['default'] }), void 0));
-
-exports['default'] = Spinner;
+`;exports.default=({size:u="regular",color:n="primary",speed:m="default",...f})=>o.default.createElement(d,{...f,role:"status","aria-live":"polite","aria-busy":"true",size:u,speed:m,color:n,theme:t.default});

package/cjs/components/Stepper/index.js

@@ -1,41 +1,23 @@
-'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_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"),r=require("../../theme.js"),a=require("../../typography/Heading/index.js");function l(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}require("../../shared/media-queries.js");var i=l(e),n=l(t);const d=n.default.div`
   min-height: 4rem;
-`;
-const Line = styled__default['default'].div `
+`,u=n.default.div`
   margin: auto;
   width: 2px;
   height: 100%;
-  background-color: ${theme['default'].colors.primary.main};
-`;
-const Graphic = styled__default['default'].div `
+  background-color: ${r.default.colors.primary.main};
+`,o=n.default.div`
   margin-right: 0.75rem;
-`;
-const Step = styled__default['default'].div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+`,m=n.default.div`
+  font-family: ${({theme:s})=>s.typography.fontBaseFamily};
   display: flex;
   padding-bottom: 1rem;
 
   &:last-child {
-    ${Line} {
+    ${u} {
       display: none;
     }
   }
-`;
-const Circle = styled__default['default'].div `
+`,f=n.default.div`
   width: 3rem;
   height: 3rem;
   border-radius: 3rem;
@@ -44,14 +26,8 @@ const Circle = styled__default['default'].div `
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${theme['default'].colors.primary.main};
-`;
-const CircleText = styled__default['default'](typography_Heading_index.Title) `
+  background-color: ${r.default.colors.primary.main};
+`,c=n.default(a.Title)`
   font-size: 1.5rem;
   font-variant: lining-nums;
-`;
-const Stepper = ({ children, ...props }) => {
-    return (jsxRuntime.jsx(Container, Object.assign({}, props, { children: children.map((step, index) => (jsxRuntime.jsxs(Step, { children: [jsxRuntime.jsxs(Graphic, { children: [jsxRuntime.jsx(Circle, { children: jsxRuntime.jsx(CircleText, { children: index + 1 }, void 0) }, void 0), jsxRuntime.jsx(Line, {}, void 0)] }, void 0), step] }, index))) }), void 0));
-};
-
-exports.Stepper = Stepper;
+`;exports.Stepper=({children:s,...h})=>i.default.createElement(d,{...h},s.map((y,p)=>i.default.createElement(m,{key:p},i.default.createElement(o,null,i.default.createElement(f,null,i.default.createElement(c,null,p+1)),i.default.createElement(u,null)),y)));

package/cjs/components/StepperAccordion/index.js

@@ -1,43 +1,19 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-var typography_Heading_index = require('../../typography/Heading/index.js');
-var components_Icons_CheckIcon = require('../Icons/CheckIcon.js');
-var components_Icons_Arrow = require('../Icons/Arrow.js');
-var shared_helpers = require('../../shared/helpers.js');
-var reactCollapse = require('react-collapse');
-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 DEFAULT_TRANSITION_TIME = '200ms';
-const Container = styled__default['default'].div `
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../theme.js"),l=require("../../typography/Heading/index.js"),i=require("../Icons/CheckIcon.js"),a=require("../Icons/Arrow.js"),o=require("../../shared/helpers.js"),s=require("react-collapse");function n(C){return C&&typeof C=="object"&&"default"in C?C:{default:C}}require("../../shared/media-queries.js");var d=n(e),c=n(r);const u=c.default.div`
   .ReactCollapse--collapse {
-    transition: height ${DEFAULT_TRANSITION_TIME} ease-in-out;
+    transition: height ${"200ms"} ease-in-out;
   }
-`;
-const HeaderExpandedProps = styled.css `
+`,m=r.css`
   margin-top: 0.25rem;
   transform: rotate(-180deg);
-`;
-const Header = styled__default['default'].div `
+`,f=c.default.div`
   display: flex;
   align-items: center;
   height: 4rem;
 
-  color: ${props => props.isDisabled ? theme['default'].colors.text.disabled : theme['default'].colors.text.dark};
-`;
-const StyledTitle = styled__default['default'](typography_Heading_index.Title) `
+  color: ${C=>C.isDisabled?t.default.colors.text.disabled:t.default.colors.text.dark};
+`,p=c.default(l.Title)`
   margin: 0;
-`;
-const HeaderArrow = styled__default['default'](components_Icons_Arrow['default']) `
+`,h=c.default(a.default)`
   margin-left: auto;
   height: 1.25rem;
   width: 1.25rem;
@@ -45,27 +21,12 @@ const HeaderArrow = styled__default['default'](components_Icons_Arrow['default']
 
   fill: currentColor;
 
-  transition: ${DEFAULT_TRANSITION_TIME};
+  transition: ${"200ms"};
   transform: rotate(0deg);
   transform-origin: center;
-  ${props => props.isExpanded && HeaderExpandedProps};
-`;
-const CircleIsCompleteStyles = (color) => styled.css `
-  color: white;
-  background-color: ${theme['default'].colors[color].main};
-`;
-const CircleIsDisabledStyles = (isComplete, color) => styled.css `
-  fill: white;
-  border: 2px solid ${shared_helpers.fadedColor(theme['default'].colors[color].main, 0.2)};
-
-  ${isComplete &&
-    `
-      border: 2px solid ${shared_helpers.fadedColor(theme['default'].colors[color].main, 0)};
-      background-color: ${shared_helpers.fadedColor(theme['default'].colors[color].main, 0.5)};
-    `}
-`;
-const Circle = styled__default['default'].div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  ${C=>C.isExpanded&&m};
+`,g=c.default.div`
+  font-family: ${({theme:C})=>C.typography.fontBaseFamily};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -75,7 +36,7 @@ const Circle = styled__default['default'].div `
   width: 2rem;
   height: 2rem;
   border-radius: 2rem;
-  border: 2px solid ${props => theme['default'].colors[props.color].main};
+  border: 2px solid ${C=>t.default.colors[C.color].main};
 
   svg {
     fill: currentColor;
@@ -94,29 +55,18 @@ const Circle = styled__default['default'].div `
     margin-top: 0.1rem;
   }
 
-  transition: background-color ${DEFAULT_TRANSITION_TIME};
-  ${props => props.isComplete && CircleIsCompleteStyles(props.color)};
-  ${props => props.isDisabled && CircleIsDisabledStyles(props.isComplete, props.color)};
-`;
-const StepperAccordion = (props) => {
-    const [isExpanded, setIsExpanded] = react.useState(props.isExpanded || false);
-    const toggleIsExpanded = react.useCallback(() => {
-        if (!props.isDisabled) {
-            setIsExpanded(previousValue => !previousValue);
-        }
-    }, [props.isDisabled]);
-    react.useEffect(() => {
-        setIsExpanded(props.isExpanded || false);
-    }, [props.isDisabled, props.isExpanded]);
-    const hasSteps = props.step || props.step === 0;
-    const handleClick = (event) => {
-        const onClick = props.onClick || toggleIsExpanded;
-        if (!props.isDisabled) {
-            onClick(event);
-        }
-    };
-    return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsxs(Header, Object.assign({}, props, { onClick: handleClick, isExpanded: isExpanded, isDisabled: props.isDisabled || false }, { children: [hasSteps && (jsxRuntime.jsx(Circle, Object.assign({ isComplete: props.isComplete || false, isDisabled: props.isDisabled || false, color: props.color || 'primary' }, { children: props.isComplete ? jsxRuntime.jsx(components_Icons_CheckIcon['default'], {}, void 0) : jsxRuntime.jsx("span", { children: props.step }, void 0) }), void 0)), jsxRuntime.jsx(StyledTitle, { children: props.title }, void 0), jsxRuntime.jsx(HeaderArrow, { isExpanded: isExpanded }, void 0)] }), void 0), jsxRuntime.jsx(reactCollapse.Collapse, Object.assign({ isOpened: isExpanded }, { children: props.children }), void 0), props.closedChildren && props.closedChildren] }, void 0));
-};
+  transition: background-color ${"200ms"};
+  ${C=>{return C.isComplete&&(x=C.color,r.css`
+  color: white;
+  background-color: ${t.default.colors[x].main};
+`);var x}};
+  ${C=>{return C.isDisabled&&(x=C.isComplete,E=C.color,r.css`
+  fill: white;
+  border: 2px solid ${o.fadedColor(t.default.colors[E].main,.2)};
 
-exports.StepperAccordion = StepperAccordion;
-exports['default'] = StepperAccordion;
+  ${x&&`
+      border: 2px solid ${o.fadedColor(t.default.colors[E].main,0)};
+      background-color: ${o.fadedColor(t.default.colors[E].main,.5)};
+    `}
+`);var x,E}};
+`,b=C=>{const[x,E]=e.useState(C.isExpanded||!1),y=e.useCallback(()=>{C.isDisabled||E($=>!$)},[C.isDisabled]);e.useEffect(()=>{E(C.isExpanded||!1)},[C.isDisabled,C.isExpanded]);const v=C.step||C.step===0;return d.default.createElement(u,null,d.default.createElement(f,{...C,onClick:$=>{const q=C.onClick||y;C.isDisabled||q($)},isExpanded:x,isDisabled:C.isDisabled||!1},v&&d.default.createElement(g,{isComplete:C.isComplete||!1,isDisabled:C.isDisabled||!1,color:C.color||"primary"},C.isComplete?d.default.createElement(i.default,null):d.default.createElement("span",null,C.step)),d.default.createElement(p,null,C.title),d.default.createElement(h,{isExpanded:x})),d.default.createElement(s.Collapse,{isOpened:x},C.children),C.closedChildren&&C.closedChildren)};exports.StepperAccordion=b,exports.default=b;