@via-profit/ui-kit 0.4.0 → 0.5.0

package/esm/Table/TableCaption.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledTableCaption = styled.caption `
+  text-align: start;
+  padding: 0.8em;
+  font-size: 1.2em;
+  font-weight: 700;
+`;
+const TableCaption = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledTableCaption, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(TableCaption);

package/esm/Table/TableCell.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledTableCell = styled.td `
+  vertical-align: inherit;
+  padding: 0.8em;
+  border-bottom: 0.1em solid ${({ theme }) => theme.color.surface.darken(20).toString()};
+`;
+const TableCell = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledTableCell, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(TableCell);

package/esm/Table/TableFooter.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledTableFooter = styled.tfoot `
+  vertical-align: middle;
+
+  & > tr > th,
+  & > tr > td {
+    font-weight: 600;
+    border-bottom: none;
+  }
+
+  & > tr:first-of-type > th,
+  & > tr:first-of-type > td {
+    border-top: 0.1em solid ${({ theme }) => theme.color.surface.darken(30).toString()};
+  }
+`;
+const TableFooter = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledTableFooter, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(TableFooter);

package/esm/Table/TableHeader.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledTableHeader = styled.thead `
+  vertical-align: middle;
+
+  & > tr > th,
+  & > tr > td {
+    border-bottom: none;
+    font-weight: 500;
+    background-color: ${({ theme }) => theme.color.accentPrimary.darken(10).toString()};
+    color: ${({ theme }) => theme.color.accentPrimaryContrast.toString()};
+  }
+`;
+const TableHeader = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledTableHeader, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(TableHeader);

package/esm/Table/TableHeaderCell.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+/**
+ * The column header inside `<TableHeader>` or the row header (`scope="row"`) inside `<TableBody>`.
+ * The role (columnheader/rowheader) is implied by the position, so no explicit role
+ */
+const StyledTableHeaderCell = styled.th `
+  vertical-align: inherit;
+  padding: 0.8em;
+  text-align: start;
+  font-weight: 600;
+  border-bottom: 0.1em solid ${({ theme }) => theme.color.surface.darken(20).toString()};
+`;
+const TableHeaderCell = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledTableHeaderCell, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(TableHeaderCell);

package/esm/Table/TableRow.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledTableRow = styled.tr `
+  vertical-align: inherit;
+`;
+const TableRow = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledTableRow, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(TableRow);

package/esm/Table/index.js

@@ -0,0 +1,18 @@
+import Table from './Table';
+import TableHeaderCell from './TableHeaderCell';
+import TableRow from './TableRow';
+import TableHeader from './TableHeader';
+import TableCell from './TableCell';
+import TableBody from './TableBody';
+import TableFooter from './TableFooter';
+import TableCaption from './TableCaption';
+export * from './Table';
+export * from './TableHeaderCell';
+export * from './TableRow';
+export * from './TableHeader';
+export * from './TableCell';
+export * from './TableBody';
+export * from './TableFooter';
+export * from './TableCaption';
+export { Table, TableHeaderCell, TableRow, TableHeader, TableCell, TableBody, TableFooter, TableCaption, };
+export default Table;

package/esm/Tabs/Tab.js

@@ -0,0 +1,123 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { useTabsContext } from './context';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const StyledTab = styled.button `
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.75em 1.1em;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 0.9em;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  color: ${({ theme, $color, $selected }) => $selected ? $color.toString() : theme.color.textSecondary.toString()};
+  transition:
+    color 150ms ease-out,
+    background-color 150ms ease-out;
+  ${({ $fullWidth }) => $fullWidth &&
+    css `
+      flex: 1 1 0;
+    `}
+  ${({ $orientation }) => $orientation === 'vertical' &&
+    css `
+      justify-content: flex-start;
+      text-align: left;
+    `}
+
+  &:hover:not(:disabled) {
+    background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.05).toString()};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ $color }) => $color.toString()};
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.45;
+  }
+
+  /* The indicator of the selected tab: under the tab or on its right edge */
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: ${({ $color }) => $color.toString()};
+    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    ${({ $orientation, $selected }) => $orientation === 'vertical'
+    ? css `
+            top: 0;
+            bottom: 0;
+            right: -1px;
+            width: 2px;
+            transform: scaleY(${$selected ? 1 : 0});
+          `
+    : css `
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 2px;
+            transform: scaleX(${$selected ? 1 : 0});
+          `}
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &,
+    &::after {
+      transition: none;
+    }
+  }
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const Tab = (props, ref) => {
+    const { value, children, onClick, disabled } = props, nativeProps = __rest(props, ["value", "children", "onClick", "disabled"]);
+    const context = useTabsContext('Tab');
+    const isSelected = context.value === value;
+    const tabRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => tabRef.current);
+    // The selected tab is kept visible in the scrolled list
+    React.useEffect(() => {
+        if (isSelected && tabRef.current) {
+            const tab = tabRef.current;
+            const list = tab.parentElement;
+            if (list && list.scrollWidth > list.clientWidth) {
+                const left = tab.offsetLeft - list.offsetLeft;
+                if (left < list.scrollLeft || left + tab.offsetWidth > list.scrollLeft + list.clientWidth) {
+                    list.scrollTo({
+                        left: left - (list.clientWidth - tab.offsetWidth) / 2,
+                        behavior: 'smooth',
+                    });
+                }
+            }
+        }
+    }, [isSelected]);
+    const handleClick = event => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented) {
+            context.select(value, event);
+        }
+    };
+    return (React.createElement(StyledTab, Object.assign({ type: "button", role: "tab", id: context.getTabId(value), "aria-controls": context.getPanelId(value), "aria-selected": isSelected, tabIndex: isSelected ? 0 : -1, "data-tab-value": value }, nativeProps, { disabled: disabled, onClick: handleClick, "$color": context.color, "$selected": isSelected, "$orientation": context.orientation, "$fullWidth": context.fullWidth, ref: tabRef }), children));
+};
+export default React.forwardRef(Tab);

package/esm/Tabs/TabList.js

@@ -0,0 +1,99 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { useTabsContext } from './context';
+const StyledList = styled.div `
+  display: flex;
+  box-sizing: border-box;
+  ${({ theme, $orientation }) => $orientation === 'vertical'
+    ? css `
+          flex-direction: column;
+          flex-shrink: 0;
+          border-right: 1px solid ${theme.color.textPrimary.alpha(0.12).toString()};
+        `
+    : css `
+          flex-direction: row;
+          /* Many tabs on the narrow screen scroll instead of breaking the layout */
+          overflow-x: auto;
+          scrollbar-width: none;
+          border-bottom: 1px solid ${theme.color.textPrimary.alpha(0.12).toString()};
+          &::-webkit-scrollbar {
+            display: none;
+          }
+        `}
+`;
+const getEnabledTabs = (list) => Array.from(list.querySelectorAll('[role="tab"]')).filter(tab => tab.closest('[role="tablist"]') === list && !tab.hasAttribute('disabled'));
+const TabList = (props, ref) => {
+    const { children, onKeyDown } = props, nativeProps = __rest(props, ["children", "onKeyDown"]);
+    const { orientation, activation, value, isUncontrolledEmpty, selectInitial } = useTabsContext('TabList');
+    const listRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => listRef.current);
+    // The tab order needs one focusable tab. Normally it is the selected one,
+    // without it — the first enabled tab
+    React.useLayoutEffect(() => {
+        const list = listRef.current;
+        if (!list) {
+            return;
+        }
+        const tabs = getEnabledTabs(list);
+        if (isUncontrolledEmpty && tabs[0]) {
+            selectInitial(tabs[0].dataset.tabValue);
+            return;
+        }
+        // Set on every tab: the first tab may keep 0 from the previous render without a selected tab
+        const focusable = tabs.find(tab => tab.getAttribute('aria-selected') === 'true') || tabs[0];
+        tabs.forEach(tab => {
+            tab.tabIndex = tab === focusable ? 0 : -1;
+        });
+    });
+    const handleKeyDown = event => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        const list = listRef.current;
+        if (event.defaultPrevented || !list) {
+            return;
+        }
+        const tabs = getEnabledTabs(list);
+        const index = tabs.indexOf(document.activeElement);
+        if (index === -1) {
+            return;
+        }
+        const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+        const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+        let nextIndex;
+        switch (event.key) {
+            case prevKey:
+                nextIndex = (index - 1 + tabs.length) % tabs.length;
+                break;
+            case nextKey:
+                nextIndex = (index + 1) % tabs.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const target = tabs[nextIndex];
+        target.focus();
+        if (activation === 'auto' && target.dataset.tabValue !== value) {
+            target.click();
+        }
+    };
+    return (React.createElement(StyledList, Object.assign({ role: "tablist", "aria-orientation": orientation }, nativeProps, { onKeyDown: handleKeyDown, "$orientation": orientation, ref: listRef }), children));
+};
+export default React.forwardRef(TabList);

package/esm/Tabs/TabPanel.js

@@ -0,0 +1,46 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { useTabsContext } from './context';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const StyledPanel = styled.div `
+  box-sizing: border-box;
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? css `
+          flex: 1;
+          min-width: 0;
+          padding: 0 0 0 1.25em;
+        `
+    : css `
+          padding: 1.25em 0 0;
+        `}
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.alpha(0.5).toString()};
+    outline-offset: 2px;
+  }
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const TabPanel = (props, ref) => {
+    const { value, keepMounted = false, children } = props, nativeProps = __rest(props, ["value", "keepMounted", "children"]);
+    const context = useTabsContext('TabPanel');
+    const isSelected = context.value === value;
+    if (!isSelected && !keepMounted) {
+        return null;
+    }
+    return (React.createElement(StyledPanel, Object.assign({ role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), 
+        // The panel is reachable by Tab even if it has no focusable elements
+        tabIndex: 0, hidden: !isSelected }, nativeProps, { "$orientation": context.orientation, ref: ref }), children));
+};
+export default React.forwardRef(TabPanel);

package/esm/Tabs/Tabs.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { TabsContext } from './context';
+import useTabsColor from './useTabsColor';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+const StyledTabs = styled.div `
+  display: ${({ $orientation }) => ($orientation === 'vertical' ? 'flex' : 'block')};
+  align-items: flex-start;
+`;
+/**
+ * Turns any value into the part of the id: the id must not contain spaces
+ */
+const escapeId = (value) => value.replace(/[^\w-]/g, char => `_${char.charCodeAt(0).toString(16)}`);
+const Tabs = (props, ref) => {
+    const _a = useThemeProps('Tabs', props), { value, defaultValue, onChange, orientation = 'horizontal', activation = 'auto', fullWidth = false, color, children } = _a, nativeProps = __rest(_a, ["value", "defaultValue", "onChange", "orientation", "activation", "fullWidth", "color", "children"]);
+    const isControlled = typeof value !== 'undefined';
+    const [internalValue, setInternalValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+    const currentValue = isControlled ? value : internalValue;
+    const $color = useTabsColor(color);
+    const baseId = `tabs-${React.useId().replace(/:/g, '')}`;
+    // Warn once, not on every render
+    const isControlledWithoutOnChange = isControlled && typeof onChange === 'undefined';
+    React.useEffect(() => {
+        if (isControlledWithoutOnChange) {
+            console.error('The property «onChange» should be passed with prop «value» to make component controlled');
+        }
+    }, [isControlledWithoutOnChange]);
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
+    const select = React.useCallback((next, event) => {
+        var _a;
+        if (next === currentValue) {
+            return;
+        }
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, next, event);
+    }, [currentValue, isControlled]);
+    const context = React.useMemo(() => ({
+        value: currentValue,
+        select,
+        selectInitial: setInternalValue,
+        isUncontrolledEmpty: !isControlled && internalValue === null,
+        orientation,
+        activation,
+        fullWidth,
+        color: $color,
+        getTabId: tabValue => `${baseId}-tab-${escapeId(tabValue)}`,
+        getPanelId: tabValue => `${baseId}-panel-${escapeId(tabValue)}`,
+    }), [
+        currentValue,
+        select,
+        isControlled,
+        internalValue,
+        orientation,
+        activation,
+        fullWidth,
+        $color,
+        baseId,
+    ]);
+    return (React.createElement(TabsContext.Provider, { value: context },
+        React.createElement(StyledTabs, Object.assign({}, nativeProps, { "$orientation": orientation, ref: ref }), children)));
+};
+export default React.forwardRef(Tabs);

package/esm/Tabs/context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const TabsContext = React.createContext(null);
+export const useTabsContext = (component) => {
+    const context = React.useContext(TabsContext);
+    if (!context) {
+        throw new Error(`<${component}> should be placed inside <Tabs>`);
+    }
+    return context;
+};

package/esm/Tabs/index.js

@@ -0,0 +1,5 @@
+import Tabs from './Tabs';
+export { default as Tab } from './Tab';
+export { default as TabList } from './TabList';
+export { default as TabPanel } from './TabPanel';
+export default Tabs;

package/esm/Tabs/useTabsColor.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Tabs to the Color instance
+ */
+const useTabsColor = (color) => {
+    const theme = useTheme();
+    return React.useMemo(() => {
+        switch (true) {
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            default:
+                try {
+                    return Color.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+export default useTabsColor;

package/esm/TextArea/TextAreaIconWrapper.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from '@emotion/styled';
+import TextFieldIconWrapper from '../TextField/TextFieldIconWrapper';
+const StyledTextFieldIconWrapper = styled(TextFieldIconWrapper) `
+  align-items: flex-start;
+  & > svg {
+    margin: 1em;
+  }
+`;
+const TextAreaIconWrapper = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledTextFieldIconWrapper, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(TextAreaIconWrapper);

package/esm/TextArea/TextAreaInput.js

@@ -0,0 +1,46 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const TextareaNative = styled.textarea `
+  resize: none;
+  padding: 1em 1.2em;
+  font-size: 1em;
+  /* Form controls do not inherit the font by default (textarea is monospace) */
+  font-family: inherit;
+  background: none;
+  border-radius: inherit;
+  margin: 0;
+  border: 0;
+  width: ${({ cols }) => (typeof cols !== 'undefined' ? 'auto' : '100%')};
+  color: currentColor;
+  ${({ $hasStartIcon }) => $hasStartIcon &&
+    css `
+      padding-left: 0;
+    `};
+  ${({ $hasEndIcon }) => $hasEndIcon &&
+    css `
+      padding-right: 0;
+    `};
+  &:focus {
+    outline: none;
+  }
+  &::placeholder {
+    font-style: italic;
+  }
+`;
+const TextAreaInput = (props, ref) => {
+    const { hasEndIcon, hasStartIcon } = props, nativeProps = __rest(props, ["hasEndIcon", "hasStartIcon"]);
+    return (React.createElement(TextareaNative, Object.assign({}, nativeProps, { "$hasEndIcon": hasEndIcon, "$hasStartIcon": hasStartIcon, ref: ref })));
+};
+export default React.forwardRef(TextAreaInput);