@kvdbil/components 3.3.5-0 → 3.3.5-5

package/cjs/components/Select/index.js

@@ -0,0 +1,173 @@
+'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};
+  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 `
+  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};
+
+  ${props => props.isDisabled &&
+    `
+    fill: ${theme['default'].colors.gray.light1};
+`}
+
+  ${props => props.isFocused &&
+    `
+    fill: ${props.theme.colors.text.dark};
+`}
+`;
+const HelperText = styled__default['default'].span `
+  display: block;
+  font-family: ${({ theme }) => theme.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) `
+  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}`}
+
+
+  path {
+    fill: currentColor;
+    stroke: currentColor;
+  }
+
+  transition: transform ${shared_constants.DEFAULT_TRANSITION_MS};
+
+  transform: ${props => props.$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;

package/cjs/components/Snackbar/index.js

@@ -0,0 +1,130 @@
+'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 `
+    top: 0;
+  `,
+    bottom: styled.css `
+    bottom: 0;
+  `,
+};
+const horizontalStyles = {
+    right: styled.css `
+    right: 0;
+  `,
+    center: styled.css `
+    left: 50%;
+    transform: translate(-50%, 0);
+  `,
+    left: styled.css `
+    left: 0;
+  `,
+};
+const animationDuration = 200;
+const transitionClassName = 'anim';
+const Container = styled__default['default'].div `
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  position: fixed;
+  display: flex;
+  align-items: center;
+
+  line-height: 1rem;
+  margin: 1rem;
+
+  max-width: 630px;
+
+  border-radius: 0.4rem;
+  padding: 1.15rem 1.25rem;
+
+  font-weight: ${({ theme }) => theme.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};
+
+  ${props => verticalStyles[props.origin.vertical || 'bottom']}
+  ${props => horizontalStyles[props.origin.horizontal || 'left']}
+
+  transition: opacity ${animationDuration}ms ease-in;
+
+  &.${transitionClassName}-enter {
+    opacity: 0;
+  }
+  &.${transitionClassName}-enter-active {
+    opacity: 1;
+  }
+  &.${transitionClassName}-exit {
+    opacity: 1;
+  }
+  &.${transitionClassName}-exit-active {
+    opacity: 0;
+  }
+`;
+const Icon = styled__default['default'].div `
+  display: inline-flex;
+  margin: -0.25rem 0;
+  margin-right: 0.75rem;
+
+  ${props => props.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};
+  }
+`;
+const CloseIcon = styled__default['default'](Icon) `
+  cursor: pointer;
+
+  /* Bigger click area */
+  padding: 0.25rem;
+
+  /* Negate padding */
+  margin: -0.25rem;
+  margin-left: 0.5rem;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+const Message = styled__default['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;

package/cjs/components/Spinner/index.js

@@ -0,0 +1,55 @@
+'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 `
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const StyledSpinner = styled__default['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;
+  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;

package/cjs/components/Stepper/index.js

@@ -0,0 +1,57 @@
+'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 `
+  min-height: 4rem;
+`;
+const Line = styled__default['default'].div `
+  margin: auto;
+  width: 2px;
+  height: 100%;
+  background-color: ${theme['default'].colors.primary.main};
+`;
+const Graphic = styled__default['default'].div `
+  margin-right: 0.75rem;
+`;
+const Step = styled__default['default'].div `
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  display: flex;
+  padding-bottom: 1rem;
+
+  &:last-child {
+    ${Line} {
+      display: none;
+    }
+  }
+`;
+const Circle = styled__default['default'].div `
+  width: 3rem;
+  height: 3rem;
+  border-radius: 3rem;
+
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${theme['default'].colors.primary.main};
+`;
+const CircleText = styled__default['default'](typography_Heading_index.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;

package/cjs/components/StepperAccordion/index.js

@@ -0,0 +1,122 @@
+'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 `
+  .ReactCollapse--collapse {
+    transition: height ${DEFAULT_TRANSITION_TIME} ease-in-out;
+  }
+`;
+const HeaderExpandedProps = styled.css `
+  margin-top: 0.25rem;
+  transform: rotate(-180deg);
+`;
+const Header = styled__default['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) `
+  margin: 0;
+`;
+const HeaderArrow = styled__default['default'](components_Icons_Arrow['default']) `
+  margin-left: auto;
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-top: -0.75rem;
+
+  fill: currentColor;
+
+  transition: ${DEFAULT_TRANSITION_TIME};
+  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};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 1.25rem;
+  margin-right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 2rem;
+  border: 2px solid ${props => theme['default'].colors[props.color].main};
+
+  svg {
+    fill: currentColor;
+    height: 1rem;
+    width: 1rem;
+
+    /* Kvd.se compatible stuff */
+    margin: 0;
+    top: inherit;
+    left: inherit;
+    font-size: inherit;
+  }
+
+  span {
+    font-variant: lining-nums;
+    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));
+};
+
+exports.StepperAccordion = StepperAccordion;
+exports['default'] = StepperAccordion;

package/cjs/components/Tabs/index.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const TabsContainer = styled__default['default'].div `
+  display: inline-flex;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray.light4};
+`;
+const TabWrapper = styled__default['default'].div `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  padding: 1em;
+  border-bottom: ${({ theme, isActive, activeColor }) => isActive
+    ? `3px solid ${theme.colors[activeColor].main}`
+    : '3px solid transparent'};
+  transition: color 0.3s ease, border 0.3s ease;
+  cursor: pointer;
+`;
+const Tab = ({ children, isActive = false, onClick, activeColor = 'primary', }) => {
+    return (jsxRuntime.jsx(TabWrapper, Object.assign({ isActive: isActive, onClick: onClick, activeColor: activeColor }, { children: children }), void 0));
+};
+const Tabs = ({ activeIndex, activeColor = 'primary', children, onTabClick, className, }) => {
+    if (react.Children.count(children) <= 1) {
+        console.error('<Tabs /> component has too few children!');
+        return null;
+    }
+    return (jsxRuntime.jsx(TabsContainer, Object.assign({ className: className }, { children: react.Children.map(children, (child, index) => {
+            if (!child) {
+                return null;
+            }
+            const onClick = child.props.onClick;
+            return (jsxRuntime.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));
+};
+
+exports.Tab = Tab;
+exports.Tabs = Tabs;
+exports['default'] = Tabs;

package/cjs/components/TextArea/index.js

@@ -0,0 +1,86 @@
+'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_FieldLabel = require('../FieldLabel.js');
+var typography_BodyText_index = require('../../typography/BodyText/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const disabledStyles = styled.css `
+  border: 1px solid ${theme['default'].colors.gray.light1};
+  color: ${theme['default'].colors.gray.dark1};
+  fill: ${theme['default'].colors.gray.light1};
+`;
+const errorStyles = styled.css `
+  border: 1px solid ${theme['default'].colors.error.main};
+`;
+const focusStyles = styled.css `
+  color: ${theme['default'].colors.text.dark};
+  border: 1px solid ${theme['default'].colors.text.dark};
+  fill: ${theme['default'].colors.text.dark};
+`;
+const TextAreaWrapper = styled__default['default'].div `
+  position: relative;
+  padding: 0;
+  display: inline-block;
+`;
+const InputWrapper = styled__default['default'].div `
+  display: inline-black;
+
+  color: ${theme['default'].colors.gray.light1};
+  fill: ${theme['default'].colors.gray.light1};
+  background-color: ${theme['default'].colors.background.light};
+
+  border: 1px solid ${theme['default'].colors.gray.light1};
+  border-radius: 0.25em;
+  transition: all 150ms;
+
+  padding: 0.7rem 0.75rem;
+
+  ${({ hasError, isFocused }) => !hasError && isFocused && focusStyles}
+  ${({ disabled }) => disabled && disabledStyles}
+  ${({ hasError }) => hasError && errorStyles}
+  ${({ centered }) => centered && `text-align: center;`}
+`;
+const TextAreaInput = styled__default['default'].textarea `
+  ${typography_BodyText_index.BodyTextStyle}
+
+  width: 100%;
+  cursor: text;
+  outline: none;
+  border: none;
+  background-color: transparent;
+
+  ${({ resize }) => !resize && 'resize: none;'}
+`;
+const Suffix = styled__default['default'].div `
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+`;
+const HelperText = styled__default['default'].span `
+  display: block;
+  font-family: ${({ theme }) => theme.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};
+
+  ${({ centered }) => centered && `width: 100%; text-align: center; display: block;`}
+`;
+/** The main text field used */
+const TextArea = ({ placeholder = '', isDisabled = false, centered = false, hasError = false, className, helperText, label = '', resize = true, ...props }) => {
+    const [isFocused, setIsFocused] = react.useState(false);
+    const hasValue = Boolean(props.value);
+    return (jsxRuntime.jsxs(TextAreaWrapper, Object.assign({ className: className }, { children: [jsxRuntime.jsxs(InputWrapper, Object.assign({ isFocused: isFocused, disabled: isDisabled, centered: centered, hasError: hasError, hasPlaceholder: !!placeholder }, { children: [jsxRuntime.jsx(TextAreaInput, Object.assign({}, props, { resize: resize, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: isDisabled, theme: theme['default'], placeholder: label && !isFocused ? '' : placeholder }), void 0), props.suffix && jsxRuntime.jsx(Suffix, { children: props.suffix }, void 0)] }), void 0), label && (jsxRuntime.jsx(components_FieldLabel.Label, Object.assign({ isFocused: isFocused, centered: centered, hasError: hasError, hasValue: hasValue, disabled: isDisabled, theme: theme['default'] }, { children: label }), void 0)), helperText && (jsxRuntime.jsx(HelperText, Object.assign({ centered: centered, hasError: hasError }, { children: helperText }), void 0))] }), void 0));
+};
+
+exports.TextArea = TextArea;
+exports['default'] = TextArea;