@kvdbil/components 3.3.5-0 → 3.3.5-5

package/esm/components/Select/index.js

@@ -0,0 +1,163 @@
+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};
+  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 `
+  position: absolute;
+  z-index: 1;
+  top: 0.5rem;
+  margin: 0.35rem 0.75rem;
+
+  fill: ${theme.colors.gray.dark5};
+  transition: ${DEFAULT_TRANSITION_MS};
+
+  ${props => props.isDisabled &&
+    `
+    fill: ${theme.colors.gray.light1};
+`}
+
+  ${props => props.isFocused &&
+    `
+    fill: ${props.theme.colors.text.dark};
+`}
+`;
+const HelperText = styled.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.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) `
+  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 ${DEFAULT_TRANSITION_MS};
+
+  transform: ${props => props.$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 };

package/esm/components/Snackbar/index.js

@@ -0,0 +1,121 @@
+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 `
+    top: 0;
+  `,
+    bottom: css `
+    bottom: 0;
+  `,
+};
+const horizontalStyles = {
+    right: css `
+    right: 0;
+  `,
+    center: css `
+    left: 50%;
+    transform: translate(-50%, 0);
+  `,
+    left: css `
+    left: 0;
+  `,
+};
+const animationDuration = 200;
+const transitionClassName = 'anim';
+const Container = styled.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.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};
+
+  ${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.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.colors.background.light
+    : theme.colors.background.dark};
+  }
+`;
+const CloseIcon = styled(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.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 };

package/esm/components/Spinner/index.js

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

package/esm/components/Stepper/index.js

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

package/esm/components/StepperAccordion/index.js

@@ -0,0 +1,113 @@
+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 `
+  .ReactCollapse--collapse {
+    transition: height ${DEFAULT_TRANSITION_TIME} ease-in-out;
+  }
+`;
+const HeaderExpandedProps = css `
+  margin-top: 0.25rem;
+  transform: rotate(-180deg);
+`;
+const Header = styled.div `
+  display: flex;
+  align-items: center;
+  height: 4rem;
+
+  color: ${props => props.isDisabled ? theme.colors.text.disabled : theme.colors.text.dark};
+`;
+const StyledTitle = styled(Title) `
+  margin: 0;
+`;
+const HeaderArrow = styled(Arrow) `
+  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) => css `
+  color: white;
+  background-color: ${theme.colors[color].main};
+`;
+const CircleIsDisabledStyles = (isComplete, color) => css `
+  fill: white;
+  border: 2px solid ${fadedColor(theme.colors[color].main, 0.2)};
+
+  ${isComplete &&
+    `
+      border: 2px solid ${fadedColor(theme.colors[color].main, 0)};
+      background-color: ${fadedColor(theme.colors[color].main, 0.5)};
+    `}
+`;
+const Circle = styled.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.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] = 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 };

package/esm/components/Tabs/index.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { Children } from 'react';
+import styled from 'styled-components';
+
+const TabsContainer = styled.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};
+  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 (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 };

package/esm/components/TextArea/index.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+import theme from '../../theme.js';
+import { Label } from '../FieldLabel.js';
+import { BodyTextStyle } from '../../typography/BodyText/index.js';
+
+const disabledStyles = css `
+  border: 1px solid ${theme.colors.gray.light1};
+  color: ${theme.colors.gray.dark1};
+  fill: ${theme.colors.gray.light1};
+`;
+const errorStyles = css `
+  border: 1px solid ${theme.colors.error.main};
+`;
+const focusStyles = css `
+  color: ${theme.colors.text.dark};
+  border: 1px solid ${theme.colors.text.dark};
+  fill: ${theme.colors.text.dark};
+`;
+const TextAreaWrapper = styled.div `
+  position: relative;
+  padding: 0;
+  display: inline-block;
+`;
+const InputWrapper = styled.div `
+  display: inline-black;
+
+  color: ${theme.colors.gray.light1};
+  fill: ${theme.colors.gray.light1};
+  background-color: ${theme.colors.background.light};
+
+  border: 1px solid ${theme.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.textarea `
+  ${BodyTextStyle}
+
+  width: 100%;
+  cursor: text;
+  outline: none;
+  border: none;
+  background-color: transparent;
+
+  ${({ resize }) => !resize && 'resize: none;'}
+`;
+const Suffix = styled.div `
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+`;
+const HelperText = styled.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.colors.error.main : theme.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] = useState(false);
+    const hasValue = Boolean(props.value);
+    return (jsxs(TextAreaWrapper, Object.assign({ className: className }, { children: [jsxs(InputWrapper, Object.assign({ isFocused: isFocused, disabled: isDisabled, centered: centered, hasError: hasError, hasPlaceholder: !!placeholder }, { children: [jsx(TextAreaInput, Object.assign({}, props, { resize: resize, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: isDisabled, theme: theme, placeholder: label && !isFocused ? '' : placeholder }), void 0), props.suffix && jsx(Suffix, { children: props.suffix }, void 0)] }), void 0), label && (jsx(Label, Object.assign({ isFocused: isFocused, centered: centered, hasError: hasError, hasValue: hasValue, disabled: isDisabled, theme: theme }, { children: label }), void 0)), helperText && (jsx(HelperText, Object.assign({ centered: centered, hasError: hasError }, { children: helperText }), void 0))] }), void 0));
+};
+
+export { TextArea, TextArea as default };