@kvdbil/components 3.3.5-4 → 3.4.0

package/esm/components/Select/index.js

@@ -1,60 +1,35 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import ReactSelect from 'react-select';
-import styled from 'styled-components';
-import { DEFAULT_TRANSITION_MS } from '../../shared/constants.js';
-import { fadedColor } from '../../shared/helpers.js';
-import theme from '../../theme.js';
-import { Label } from '../FieldLabel.js';
-
-const Container = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+import t,{useState as $}from"react";import z from"react-select";import d from"styled-components";import{DEFAULT_TRANSITION_MS as x}from"../../shared/constants.js";import r from"../../theme.js";import{Label as A}from"../FieldLabel.js";const M=d.div`
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   position: relative;
-`;
-const prefixStyles = (hasPrefix) => hasPrefix && {
-    paddingLeft: '2.5rem',
-};
-const disabledStyles = (isDisabled) => isDisabled && {
-    border: `1px solid ${theme.colors.gray.light1}`,
-    color: theme.colors.gray.dark1,
-    fill: theme.colors.gray.light1,
-};
-const Prefix = styled.div `
+`,F=e=>e&&{paddingLeft:"2.5rem"},O=e=>e&&{border:`1px solid ${r.colors.gray.light1}`,color:r.colors.gray.dark1,fill:r.colors.gray.light1},_=d.div`
   position: absolute;
   z-index: 1;
   top: 0.5rem;
   margin: 0.35rem 0.75rem;
 
-  fill: ${theme.colors.gray.dark5};
-  transition: ${DEFAULT_TRANSITION_MS};
+  fill: ${r.colors.gray.dark5};
+  transition: ${x};
 
-  ${props => props.isDisabled &&
-    `
-    fill: ${theme.colors.gray.light1};
+  ${e=>e.isDisabled&&`
+    fill: ${r.colors.gray.light1};
 `}
 
-  ${props => props.isFocused &&
-    `
-    fill: ${props.theme.colors.text.dark};
+  ${e=>e.isFocused&&`
+    fill: ${e.theme.colors.text.dark};
 `}
-`;
-const HelperText = styled.span `
+`,j=d.span`
   display: block;
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 0.81rem;
-
   margin-top: 0.25rem;
   margin-left: 0.85rem;
-
-  color: ${({ hasError }) => hasError ? theme.colors.error.main : theme.colors.text.dark};
-`;
-const Arrow = (props) => (jsxs("svg", Object.assign({}, props, { children: [jsx("symbol", Object.assign({ id: "icon-arrow", viewBox: "0 0 19 19" }, { children: 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), jsx("use", { xlinkHref: "#icon-arrow" }, void 0)] }), void 0));
-const DropdownArrow = styled(Arrow) `
+  color: ${({hasError:e})=>e?r.colors.error.main:r.colors.text.disabled};
+`,T=e=>t.createElement("svg",{...e},t.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},t.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"})),t.createElement("use",{xlinkHref:"#icon-arrow"})),V=d(T)`
   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}`}
+  ${e=>e.$isFocused&&`color: ${e.$theme.colors.text.dark}`}
+  ${e=>e.$isDisabled&&`color: ${e.$theme.colors.gray.dark1}`}
 
 
   path {
@@ -62,102 +37,8 @@ const DropdownArrow = styled(Arrow) `
     stroke: currentColor;
   }
 
-  transition: transform ${DEFAULT_TRANSITION_MS};
+  transition: transform ${x};
 
-  transform: ${props => props.$isMenuOpen ? 'rotate(-180deg)' : 'rotate(0deg)'};
+  transform: ${e=>e.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
   transform-origin: 50% 60%;
-`;
-const getBorderColor = (isFocused, hasError) => {
-    if (hasError) {
-        return theme.colors.error.main;
-    }
-    return isFocused ? theme.colors.text.dark : theme.colors.gray.light1;
-};
-const DropdownIndicator = ({ selectProps: { menuIsOpen = false }, isFocused = false, isDisabled, }) => {
-    return (jsx(DropdownArrow, { "$isDisabled": isDisabled, "$isFocused": isFocused, "$isMenuOpen": menuIsOpen, "$theme": theme }, 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] = useState(false);
-    const [inputValue, setInputValue] = useState('');
-    const handleInputChange = (newValue, actionMeta) => {
-        onInputChange(newValue, actionMeta);
-        setInputValue(newValue);
-    };
-    const getOptionColor = ({ isSelected, isFocused }) => {
-        if (isSelected) {
-            return fadedColor(theme.colors[color].main, 0.72);
-        }
-        if (isFocused) {
-            return fadedColor(theme.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 (jsxs(Container, Object.assign({ className: className }, { children: [props.label && (jsx(Label, Object.assign({ height: height, isFocused: isFocused, hasValue: Boolean(props.value || inputValue), disabled: isDisabled, theme: theme, hasError: hasError }, { children: props.label }), void 0)), props.prefix && (jsx(Prefix, Object.assign({ isDisabled: isDisabled, isFocused: isFocused }, { children: props.prefix }), void 0)), jsx(ReactSelect, Object.assign({}, props, { ref: forwardRef, isDisabled: isDisabled, onInputChange: handleInputChange, placeholder: placeholder, onFocus: handleFocus, onBlur: handleBlur, styles: {
-                    control: styles => ({
-                        ...styles,
-                        fontFamily: theme.typography.fontBaseFamily,
-                        fontSize: '1rem',
-                        fontWeight: 400,
-                        cursor: 'pointer',
-                        padding: '0.7rem 0.75rem',
-                        backgroundColor: theme.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 && jsx(HelperText, Object.assign({ hasError: hasError }, { children: helperText }), void 0)] }), void 0));
-};
-
-export { Select, Select as default };
+`,H=(e,a)=>a?r.colors.error.main:e?r.colors.text.dark:r.colors.gray.light1,N=({selectProps:{menuIsOpen:e=!1},isFocused:a=!1,isDisabled:m})=>t.createElement(V,{$isDisabled:m,$isFocused:a,$isMenuOpen:e,$theme:r}),k=({className:e,color:a="primary",forwardRef:m,hasError:u=!1,height:i,helperText:p,isDisabled:s=!1,onBlur:C=()=>null,onFocus:v=()=>null,onInputChange:w=()=>null,placeholder:L="",name:f,...n})=>{const[c,h]=$(!1),[B,I]=$(""),S=(o,l)=>{w(o,l),I(o)},y=({isSelected:o,isFocused:l,isDisabled:g})=>o?r.colors[a].main:g?r.colors.background.light:l?r.colors.background.gray:r.colors.background.light,E=o=>{h(!0),v(o)},D=o=>{h(!1),C(o)},R=H(c,u);return t.createElement(M,{className:e},n.label&&t.createElement(A,{htmlFor:f,height:i,isFocused:c,hasValue:Boolean(n.value||B),disabled:s,theme:r,hasError:u},n.label),n.prefix&&t.createElement(_,{isDisabled:s,isFocused:c},n.prefix),t.createElement(z,{...n,inputId:f,name:f,ref:m,isDisabled:s,onInputChange:S,placeholder:L,onFocus:E,onBlur:D,styles:{control:o=>({...o,borderRadius:0,color:r.colors.text.dark,fontFamily:r.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:r.colors.background.light,borderColor:R,boxShadow:"none","&:hover":{borderColor:"none"},...O(s),...F(Boolean(n.prefix))}),placeholder:o=>({...o,display:c?"static":"none"}),singleValue:o=>({...o,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:o=>({...o,padding:"8px 0"}),menu:o=>({...o,borderRadius:0,boxShadow:r.elevations.elevation2,zIndex:2,padding:"0"}),option:(o,{isSelected:l,isFocused:g,isDisabled:b})=>({...o,padding:"1rem",cursor:b?"not-allowed":"pointer","&:hover":{background:y({isSelected:l,isFocused:!0,isDisabled:b})},background:y({isSelected:l,isFocused:g}),...F(Boolean(n.prefix))}),valueContainer:o=>({...o,position:"static",padding:i?`${i-1}rem 0 `:0,height:i?"auto":"21px"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:N}}),p&&t.createElement(j,{hasError:u},p))};export{k as Select,k as default};

package/esm/components/Snackbar/index.js

@@ -1,37 +1,16 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEffect } from 'react';
-import styled, { css } from 'styled-components';
-import theme from '../../theme.js';
-import CheckCircle from '../Icons/CheckCircle.js';
-import Close from '../Icons/Close.js';
-import ErrorCircle from '../Icons/ErrorCircle.js';
-import InfoCircle from '../Icons/InfoCircle.js';
-import { CSSTransition } from 'react-transition-group';
-
-const verticalStyles = {
-    top: css `
+import t,{useEffect as E}from"react";import a,{css as o}from"styled-components";import r from"../../theme.js";import $ from"../Icons/CheckCircle.js";import C from"../Icons/Close.js";import k from"../Icons/ErrorCircle.js";import b from"../Icons/InfoCircle.js";import{CSSTransition as v}from"react-transition-group";const I={top:o`
     top: 0;
-  `,
-    bottom: css `
+  `,bottom:o`
     bottom: 0;
-  `,
-};
-const horizontalStyles = {
-    right: css `
+  `},j={right:o`
     right: 0;
-  `,
-    center: css `
+  `,center:o`
     left: 50%;
     transform: translate(-50%, 0);
-  `,
-    left: css `
+  `,left:o`
     left: 0;
-  `,
-};
-const animationDuration = 200;
-const transitionClassName = 'anim';
-const Container = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  `},g=200,n="anim",w=a.div`
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   position: fixed;
   display: flex;
   align-items: center;
@@ -44,49 +23,43 @@ const Container = styled.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.elevations.elevation8};
-  background-color: ${props => props.color !== 'none'
-    ? theme.colors[props.color].main
-    : theme.colors.background.light};
-  color: ${props => props.color !== 'none' ? theme.colors.text.light : theme.colors.text.dark};
+  box-shadow: ${r.elevations.elevation8};
+  background-color: ${e=>e.color!=="none"?r.colors[e.color].main:r.colors.background.light};
+  color: ${e=>e.color!=="none"?r.colors.text.light:r.colors.text.dark};
 
-  ${props => verticalStyles[props.origin.vertical || 'bottom']}
-  ${props => horizontalStyles[props.origin.horizontal || 'left']}
+  ${e=>I[e.origin.vertical||"bottom"]}
+  ${e=>j[e.origin.horizontal||"left"]}
 
-  transition: opacity ${animationDuration}ms ease-in;
+  transition: opacity ${g}ms ease-in;
 
-  &.${transitionClassName}-enter {
+  &.${n}-enter {
     opacity: 0;
   }
-  &.${transitionClassName}-enter-active {
+  &.${n}-enter-active {
     opacity: 1;
   }
-  &.${transitionClassName}-exit {
+  &.${n}-exit {
     opacity: 1;
   }
-  &.${transitionClassName}-exit-active {
+  &.${n}-exit-active {
     opacity: 0;
   }
-`;
-const Icon = styled.div `
+`,f=a.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.colors.background.light
-    : theme.colors.background.dark};
+    fill: ${e=>e.color!=="none"?r.colors.background.light:r.colors.background.dark};
   }
-`;
-const CloseIcon = styled(Icon) `
+`,S=a(f)`
   cursor: pointer;
 
   /* Bigger click area */
@@ -100,22 +73,6 @@ const CloseIcon = styled(Icon) `
     width: 1rem;
     height: 1rem;
   }
-`;
-const Message = styled.span `
+`,B=a.span`
   flex: 1;
-`;
-const icons = {
-    error: jsx(ErrorCircle, {}, void 0),
-    success: jsx(CheckCircle, {}, void 0),
-    info: jsx(InfoCircle, {}, void 0),
-    text: '',
-};
-const Snackbar = ({ message, color = 'none', type = 'info', action, isOpen, origin = {}, onClose = () => { }, onExited = () => { }, autoHideDuration = 4000, ...props }) => {
-    useEffect(() => {
-        const timeout = setTimeout(onClose, autoHideDuration);
-        return () => clearTimeout(timeout);
-    }, [autoHideDuration, onClose]);
-    return (jsx(CSSTransition, Object.assign({ in: isOpen, timeout: animationDuration, mountOnEnter: true, unmountOnExit: true, onExited: onExited, classNames: transitionClassName }, { children: jsxs(Container, Object.assign({}, props, { color: color, origin: origin }, { children: [jsx(Icon, Object.assign({ color: color, type: type }, { children: icons[type] }), void 0), jsx(Message, { children: message }, void 0), action && action, jsx(CloseIcon, Object.assign({ color: color !== null && color !== void 0 ? color : 'none', onClick: onClose }, { children: jsx(Close, {}, void 0) }), void 0)] }), void 0) }), void 0));
-};
-
-export { Snackbar, Snackbar as default };
+`,z={error:t.createElement(k,null),success:t.createElement($,null),info:t.createElement(b,null),text:""},h=({message:e,color:i="none",type:c="info",action:m,isOpen:p,origin:d={},onClose:l=()=>{},onExited:u=()=>{},autoHideDuration:s=4e3,...y})=>(E(()=>{const x=setTimeout(l,s);return()=>clearTimeout(x)},[s,l]),t.createElement(v,{in:p,timeout:g,mountOnEnter:!0,unmountOnExit:!0,onExited:u,classNames:n},t.createElement(w,{...y,color:i,origin:d},t.createElement(f,{color:i,type:c},z[c]),t.createElement(B,null,e),m&&m,t.createElement(S,{color:i!=null?i:"none",onClick:l},t.createElement(C,null)))));export{h as Snackbar,h as default};

package/esm/components/Spinner/index.js

@@ -1,47 +1,19 @@
-import { jsx } from 'react/jsx-runtime';
-import styled, { keyframes } from 'styled-components';
-import theme from '../../theme.js';
-
-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 = keyframes `
+import s from"react";import i,{keyframes as l}from"styled-components";import n from"../../theme.js";const m=e=>{const r={slow:"2s",default:"1s",fast:"0.5s"};return r[e]||r.default},t=e=>{const r={smaller:1,small:2,regular:3,large:4};return typeof e=="number"?e:r[e]||r.regular},d=l`
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
-`;
-const StyledSpinner = styled.div `
+`,u=i.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:e,color:r,size:o})=>`${t(o)/10}em solid ${e.colors[r].main}`};
+  border-bottom: ${({size:e})=>`${t(e)/10}em solid rgba(0, 0, 0, 0.1);`};
+  border-right: ${({size:e})=>`${t(e)/10}em solid rgba(0, 0, 0, 0.1);`};
+  border-left: ${({size:e})=>`${t(e)/10}em solid rgba(0, 0, 0, 0.1);`};
+  width: ${({size:e})=>t(e)}em;
+  height: ${({size:e})=>t(e)}em;
+  animation: ${d} ${({speed:e})=>m(e)} infinite linear;
   will-change: transform;
-`;
-const Spinner = ({ size = 'regular', color = 'primary', speed = 'default', ...props }) => (jsx(StyledSpinner, Object.assign({}, props, { role: "status", "aria-live": "polite", "aria-busy": "true", size: size, speed: speed, color: color, theme: theme }), void 0));
-
-export { Spinner as default };
+`,f=({size:e="regular",color:r="primary",speed:o="default",...a})=>s.createElement(u,{...a,role:"status","aria-live":"polite","aria-busy":"true",size:e,speed:o,color:r,theme:n});export{f as default};

package/esm/components/Stepper/index.js

@@ -1,33 +1,23 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import theme from '../../theme.js';
-import { Title } from '../../typography/Heading/index.js';
-import '../../shared/media-queries.js';
-
-const Container = styled.div `
+import e from"react";import t from"styled-components";import n from"../../theme.js";import{Title as l}from"../../typography/Heading/index.js";import"../../shared/media-queries.js";const c=t.div`
   min-height: 4rem;
-`;
-const Line = styled.div `
+`,o=t.div`
   margin: auto;
   width: 2px;
   height: 100%;
-  background-color: ${theme.colors.primary.main};
-`;
-const Graphic = styled.div `
+  background-color: ${n.colors.primary.main};
+`,s=t.div`
   margin-right: 0.75rem;
-`;
-const Step = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+`,d=t.div`
+  font-family: ${({theme:r})=>r.typography.fontBaseFamily};
   display: flex;
   padding-bottom: 1rem;
 
   &:last-child {
-    ${Line} {
+    ${o} {
       display: none;
     }
   }
-`;
-const Circle = styled.div `
+`,p=t.div`
   width: 3rem;
   height: 3rem;
   border-radius: 3rem;
@@ -36,14 +26,8 @@ const Circle = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${theme.colors.primary.main};
-`;
-const CircleText = styled(Title) `
+  background-color: ${n.colors.primary.main};
+`,h=t(l)`
   font-size: 1.5rem;
   font-variant: lining-nums;
-`;
-const Stepper = ({ children, ...props }) => {
-    return (jsx(Container, Object.assign({}, props, { children: children.map((step, index) => (jsxs(Step, { children: [jsxs(Graphic, { children: [jsx(Circle, { children: jsx(CircleText, { children: index + 1 }, void 0) }, void 0), jsx(Line, {}, void 0)] }, void 0), step] }, index))) }), void 0));
-};
-
-export { Stepper };
+`,y=({children:r,...m})=>e.createElement(c,{...m},r.map((a,i)=>e.createElement(d,{key:i},e.createElement(s,null,e.createElement(p,null,e.createElement(h,null,i+1)),e.createElement(o,null)),a)));export{y as Stepper};

package/esm/components/StepperAccordion/index.js

@@ -1,35 +1,19 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect } from 'react';
-import styled, { css } from 'styled-components';
-import theme from '../../theme.js';
-import { Title } from '../../typography/Heading/index.js';
-import CheckIcon from '../Icons/CheckIcon.js';
-import Arrow from '../Icons/Arrow.js';
-import { fadedColor } from '../../shared/helpers.js';
-import { Collapse } from 'react-collapse';
-import '../../shared/media-queries.js';
-
-const DEFAULT_TRANSITION_TIME = '200ms';
-const Container = styled.div `
+import t,{useState as C,useCallback as u,useEffect as b}from"react";import r,{css as n}from"styled-components";import l from"../../theme.js";import{Title as E}from"../../typography/Heading/index.js";import x from"../Icons/CheckIcon.js";import y from"../Icons/Arrow.js";import{fadedColor as s}from"../../shared/helpers.js";import{Collapse as $}from"react-collapse";import"../../shared/media-queries.js";const a="200ms",D=r.div`
   .ReactCollapse--collapse {
-    transition: height ${DEFAULT_TRANSITION_TIME} ease-in-out;
+    transition: height ${a} ease-in-out;
   }
-`;
-const HeaderExpandedProps = css `
+`,k=n`
   margin-top: 0.25rem;
   transform: rotate(-180deg);
-`;
-const Header = styled.div `
+`,I=r.div`
   display: flex;
   align-items: center;
   height: 4rem;
 
-  color: ${props => props.isDisabled ? theme.colors.text.disabled : theme.colors.text.dark};
-`;
-const StyledTitle = styled(Title) `
+  color: ${e=>e.isDisabled?l.colors.text.disabled:l.colors.text.dark};
+`,p=r(E)`
   margin: 0;
-`;
-const HeaderArrow = styled(Arrow) `
+`,w=r(y)`
   margin-left: auto;
   height: 1.25rem;
   width: 1.25rem;
@@ -37,27 +21,23 @@ const HeaderArrow = styled(Arrow) `
 
   fill: currentColor;
 
-  transition: ${DEFAULT_TRANSITION_TIME};
+  transition: ${a};
   transform: rotate(0deg);
   transform-origin: center;
-  ${props => props.isExpanded && HeaderExpandedProps};
-`;
-const CircleIsCompleteStyles = (color) => css `
+  ${e=>e.isExpanded&&k};
+`,j=e=>n`
   color: white;
-  background-color: ${theme.colors[color].main};
-`;
-const CircleIsDisabledStyles = (isComplete, color) => css `
+  background-color: ${l.colors[e].main};
+`,S=(e,i)=>n`
   fill: white;
-  border: 2px solid ${fadedColor(theme.colors[color].main, 0.2)};
+  border: 2px solid ${s(l.colors[i].main,.2)};
 
-  ${isComplete &&
-    `
-      border: 2px solid ${fadedColor(theme.colors[color].main, 0)};
-      background-color: ${fadedColor(theme.colors[color].main, 0.5)};
+  ${e&&`
+      border: 2px solid ${s(l.colors[i].main,0)};
+      background-color: ${s(l.colors[i].main,.5)};
     `}
-`;
-const Circle = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+`,v=r.div`
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -67,7 +47,7 @@ const Circle = styled.div `
   width: 2rem;
   height: 2rem;
   border-radius: 2rem;
-  border: 2px solid ${props => theme.colors[props.color].main};
+  border: 2px solid ${e=>l.colors[e.color].main};
 
   svg {
     fill: currentColor;
@@ -86,28 +66,7 @@ const Circle = styled.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] = useState(props.isExpanded || false);
-    const toggleIsExpanded = useCallback(() => {
-        if (!props.isDisabled) {
-            setIsExpanded(previousValue => !previousValue);
-        }
-    }, [props.isDisabled]);
-    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 (jsxs(Container, { children: [jsxs(Header, Object.assign({}, props, { onClick: handleClick, isExpanded: isExpanded, isDisabled: props.isDisabled || false }, { children: [hasSteps && (jsx(Circle, Object.assign({ isComplete: props.isComplete || false, isDisabled: props.isDisabled || false, color: props.color || 'primary' }, { children: props.isComplete ? jsx(CheckIcon, {}, void 0) : jsx("span", { children: props.step }, void 0) }), void 0)), jsx(StyledTitle, { children: props.title }, void 0), jsx(HeaderArrow, { isExpanded: isExpanded }, void 0)] }), void 0), jsx(Collapse, Object.assign({ isOpened: isExpanded }, { children: props.children }), void 0), props.closedChildren && props.closedChildren] }, void 0));
-};
-
-export { StepperAccordion, StepperAccordion as default };
+  transition: background-color ${a};
+  ${e=>e.isComplete&&j(e.color)};
+  ${e=>e.isDisabled&&S(e.isComplete,e.color)};
+`,d=e=>{const[i,c]=C(e.isExpanded||!1),m=u(()=>{e.isDisabled||c(o=>!o)},[e.isDisabled]);b(()=>{c(e.isExpanded||!1)},[e.isDisabled,e.isExpanded]);const f=e.step||e.step===0,h=o=>{const g=e.onClick||m;e.isDisabled||g(o)};return t.createElement(D,null,t.createElement(I,{...e,onClick:h,isExpanded:i,isDisabled:e.isDisabled||!1},f&&t.createElement(v,{isComplete:e.isComplete||!1,isDisabled:e.isDisabled||!1,color:e.color||"primary"},e.isComplete?t.createElement(x,null):t.createElement("span",null,e.step)),t.createElement(p,null,e.title),t.createElement(w,{isExpanded:i})),t.createElement($,{isOpened:i},e.children),e.closedChildren&&e.closedChildren)};export{d as StepperAccordion,d as default};

package/esm/components/Tabs/index.js

@@ -1,41 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children } from 'react';
-import styled from 'styled-components';
-
-const TabsContainer = styled.div `
+import a,{Children as l}from"react";import p from"styled-components";const d=p.div`
   display: inline-flex;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.gray.light4};
-`;
-const TabWrapper = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  border-bottom: 1px solid ${({theme:t})=>t.colors.gray.light4};
+`,c=p.div`
+  font-family: ${({theme:t})=>t.typography.fontAlternativeFamily};
+  font-weight: ${({theme:t})=>t.typography.fontAlternativeRegularWeight};
   padding: 1em;
-  border-bottom: ${({ theme, isActive, activeColor }) => isActive
-    ? `3px solid ${theme.colors[activeColor].main}`
-    : '3px solid transparent'};
+  border-bottom: ${({theme:t,isActive:r,activeColor:e})=>r?`3px solid ${t.colors[e].main}`:"3px solid transparent"};
   transition: color 0.3s ease, border 0.3s ease;
   cursor: pointer;
-`;
-const Tab = ({ children, isActive = false, onClick, activeColor = 'primary', }) => {
-    return (jsx(TabWrapper, Object.assign({ isActive: isActive, onClick: onClick, activeColor: activeColor }, { children: children }), void 0));
-};
-const Tabs = ({ activeIndex, activeColor = 'primary', children, onTabClick, className, }) => {
-    if (Children.count(children) <= 1) {
-        console.error('<Tabs /> component has too few children!');
-        return null;
-    }
-    return (jsx(TabsContainer, Object.assign({ className: className }, { children: Children.map(children, (child, index) => {
-            if (!child) {
-                return null;
-            }
-            const onClick = child.props.onClick;
-            return (jsx(TabWrapper, Object.assign({}, child.props, { isActive: activeIndex === index, activeColor: activeColor, onClick: event => {
-                    onTabClick(index);
-                    if (typeof onClick === 'function') {
-                        onClick(event);
-                    }
-                }, as: child.type || 'div' }, { children: child.props.children }), void 0));
-        }) }), void 0));
-};
-
-export { Tab, Tabs, Tabs as default };
+`,u=({children:t,isActive:r=!1,onClick:e,activeColor:n="primary"})=>a.createElement(c,{isActive:r,onClick:e,activeColor:n},t),m=({activeIndex:t,activeColor:r="primary",children:e,onTabClick:n,className:f})=>l.count(e)<=1?(console.error("<Tabs /> component has too few children!"),null):a.createElement(d,{className:f},l.map(e,(o,s)=>{if(!o)return null;const i=o.props.onClick;return a.createElement(c,{...o.props,isActive:t===s,activeColor:r,onClick:y=>{n(s),typeof i=="function"&&i(y)},as:o.type||"div"},o.props.children)}));export{u as Tab,m as Tabs,m as default};