@peculiar/react-components 0.3.14 → 0.4.0

package/dist/cjs/Tabs/tab.js

@@ -44,10 +44,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tab = void 0;
 var React = __importStar(require("react"));
-var styles_1 = require("../styles");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var Typography_1 = require("../Typography");
 /**
  *
@@ -55,75 +59,76 @@ var Typography_1 = require("../Typography");
 /**
  * Styles.
  */
-var stylesBase = function () { return (0, styles_1.css)({
-    label: 'Tab',
-    fontFamily: 'inherit',
-    outline: 'none',
-    cursor: 'pointer',
-    boxSizing: 'border-box',
-    border: 0,
-    borderBottom: '3px solid transparent',
-    minHeight: 'var(--pv-size-base-12)',
-    height: '100%',
-    padding: '0 var(--pv-size-base-3)',
-    backgroundColor: 'transparent',
-    transition: 'background-color 200ms, color 200ms, border-color 200ms',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    textDecoration: 'none',
-    '&:disabled': {
-        cursor: 'not-allowed',
-    },
-    '&[aria-selected]': {
-        borderColor: 'var(--pv-color-secondary)',
-    },
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-secondary-tint-5)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-secondary-tint-4)',
+var TabRoot = (0, styled_1.default)('button', {
+    shouldForwardProp: function (prop) { return (0, is_prop_valid_1.default)(prop) && prop !== 'color'; },
+})(function (props) { return (__assign({ fontFamily: 'inherit', outline: 'none', cursor: 'pointer', boxSizing: 'border-box', border: 0, borderBottom: '3px solid transparent', minHeight: 'var(--pv-size-base-12)', height: '100%', padding: '0 var(--pv-size-base-3)', backgroundColor: 'transparent', transition: 'background-color 200ms, color 200ms, border-color 200ms', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }, (props.selected && ({
+    borderColor: 'var(--pv-color-secondary)',
+})))); }, function (props) {
+    var isDark = props.theme.mode === 'dark';
+    var isWhite = props.color === 'white';
+    var color;
+    var colorDisabled = isDark
+        ? 'var(--pv-color-gray-5)'
+        : 'var(--pv-color-gray-7)';
+    var backgroundColorHove = 'var(--pv-color-secondary-tint-5)';
+    var backgroundColorFocus = 'var(--pv-color-secondary-tint-4)';
+    var backgroundColorActive = 'var(--pv-color-secondary-tint-3)';
+    if (isWhite) {
+        color = 'var(--pv-color-gray-9)';
+    }
+    else if (isDark) {
+        color = 'var(--pv-color-gray-7)';
+    }
+    else {
+        color = 'var(--pv-color-gray-10)';
+    }
+    if (isDark) {
+        backgroundColorHove = 'var(--pv-color-secondary-shade-4)';
+        backgroundColorFocus = 'var(--pv-color-secondary-shade-3)';
+        backgroundColorActive = 'var(--pv-color-secondary-shade-2)';
+    }
+    if (props.selected) {
+        if (isDark || isWhite) {
+            color = 'var(--pv-color-white)';
+        }
+        else {
+            color = 'var(--pv-color-black)';
+        }
+    }
+    return {
+        '&:disabled': {
+            cursor: 'not-allowed',
+            color: colorDisabled,
         },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-secondary-tint-3)',
+        '&:not(:disabled)': {
+            color: color,
+            '&:hover': {
+                backgroundColor: backgroundColorHove,
+            },
+            '&:focus': {
+                backgroundColor: backgroundColorFocus,
+            },
+            '&:active': {
+                backgroundColor: backgroundColorActive,
+            },
         },
-    },
-}); };
+    };
+});
 /**
  *
  */
 exports.Tab = React.forwardRef(function (props, ref) {
-    var _a;
-    var children = props.children, className = props.className, disabled = props.disabled, id = props.id, _b = props.color, color = _b === void 0 ? 'black' : _b, component = props.component, onChange = props.onChange, 
+    var _a = props.color, color = _a === void 0 ? 'black' : _a, component = props.component, id = props.id, disabled = props.disabled, 
     // @ts-ignore
-    selected = props.selected, other = __rest(props, ["children", "className", "disabled", "id", "color", "component", "onChange", "selected"]);
+    selected = props.selected, children = props.children, onChange = props.onChange, other = __rest(props, ["color", "component", "id", "disabled", "selected", "children", "onChange"]);
     var Component = component || 'button';
-    var textColor = React.useMemo(function () {
-        if (disabled) {
-            return 'gray-7';
-        }
-        if (color === 'white') {
-            if (selected) {
-                return 'white';
-            }
-            return 'gray-9';
-        }
-        if (selected) {
-            return 'black';
-        }
-        return 'gray-10';
-    }, [disabled, selected, color]);
     var handleClick = function (event) {
         if (!selected && onChange) {
             onChange(event, id);
         }
     };
-    return (React.createElement(Component, __assign({}, other, { type: "button", ref: ref, role: "tab", disabled: disabled, id: id, "aria-selected": selected || undefined, className: (0, styles_1.cx)((_a = {},
-            _a[stylesBase()] = true,
-            _a[className] = !!className,
-            _a)), onClick: handleClick }),
-        React.createElement(Typography_1.Typography, { variant: "s2", component: "span", color: textColor }, children)));
+    return (React.createElement(TabRoot, __assign({ as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id, color: color, selected: selected, onClick: handleClick }, other),
+        React.createElement(Typography_1.Typography, { variant: "s2", component: "span", color: "inherit" }, children)));
 });
 exports.Tab.displayName = 'Tab';
 exports.Tab.defaultProps = {

package/dist/cjs/Tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/Tabs/tabs.js

@@ -44,18 +44,28 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 var React = __importStar(require("react"));
-var styles_1 = require("../styles");
-var stylesBase = function () { return (0, styles_1.css)({
-    label: 'Tabs',
+var styled_1 = __importDefault(require("@emotion/styled"));
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var TabsRoot = (0, styled_1.default)('div')({
     whiteSpace: 'nowrap',
     overflowX: 'auto',
-}); };
+});
+/**
+ *
+ */
 exports.Tabs = React.forwardRef(function (props, ref) {
-    var _a;
-    var childrenProp = props.children, className = props.className, onChange = props.onChange, value = props.value, other = __rest(props, ["children", "className", "onChange", "value"]);
+    var childrenProp = props.children, value = props.value, onChange = props.onChange, other = __rest(props, ["children", "value", "onChange"]);
     var children = React.Children.map(childrenProp, function (child) {
         if (!React.isValidElement(child)) {
             return null;
@@ -72,9 +82,6 @@ exports.Tabs = React.forwardRef(function (props, ref) {
             onChange: onChange,
         });
     });
-    return (React.createElement("div", __assign({}, other, { ref: ref, role: "tablist", className: (0, styles_1.cx)((_a = {},
-            _a[stylesBase()] = true,
-            _a[className] = !!className,
-            _a)) }), children));
+    return (React.createElement(TabsRoot, __assign({ ref: ref, role: "tablist" }, other), children));
 });
 //# sourceMappingURL=tabs.js.map

package/dist/cjs/Tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/Tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,oCAAoC;AAwBpC,IAAM,UAAU,GAAG,cAAM,OAAA,IAAA,YAAG,EAAC;IAC3B,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,EAJuB,CAIvB,CAAC;AAEU,QAAA,IAAI,GAAG,KAAK,CAAC,UAAU,CAA4B,UAAC,KAAK,EAAE,GAAG;;IAEvE,IAAU,YAAY,GAKpB,KAAK,SALe,EACtB,SAAS,GAIP,KAAK,UAJE,EACT,QAAQ,GAGN,KAAK,SAHC,EACR,KAAK,GAEH,KAAK,MAFF,EACF,KAAK,UACN,KAAK,EANH,8CAML,CADS,CACA;IAEV,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CACjC,YAAY,EACZ,UAAC,KAA+C;QAC9C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAa,KAAK,CAAC,EAAE;YAC5C,OAAO,IAAI,CAAC;SACb;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YACpC,OAAO,CAAC,KAAK,CAAC,yEAAyE,CAAC,CAAC;YAEzF,OAAO,IAAI,CAAC;SACb;QAED,IAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QAClC,IAAM,QAAQ,GAAG,UAAU,KAAK,KAAK,CAAC;QAEtC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;YAC/B,aAAa;YACb,QAAQ,UAAA;YACR,QAAQ,UAAA;SACT,CAAC,CAAC;IACL,CAAC,CACF,CAAC;IAEF,OAAO,CACL,wCACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,IAAA,WAAE;YACX,GAAC,UAAU,EAAE,IAAG,IAAI;YACpB,GAAC,SAAS,IAAG,CAAC,CAAC,SAAS;gBACxB,KAED,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/Tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,2DAAqC;AA0BrC;;GAEG;AAEH;;GAEG;AACH,IAAM,QAAQ,GAAG,IAAA,gBAAM,EAAC,KAAK,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AACH;;GAEG;AAEU,QAAA,IAAI,GAAG,KAAK,CAAC,UAAU,CAA4B,UAAC,KAAK,EAAE,GAAG;IAEvE,IAAU,YAAY,GAIpB,KAAK,SAJe,EACtB,KAAK,GAGH,KAAK,MAHF,EACL,QAAQ,GAEN,KAAK,SAFC,EACL,KAAK,UACN,KAAK,EALH,iCAKL,CADS,CACA;IAEV,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CACjC,YAAY,EACZ,UAAC,KAA+C;QAC9C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAa,KAAK,CAAC,EAAE;YAC5C,OAAO,IAAI,CAAC;SACb;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YACpC,OAAO,CAAC,KAAK,CAAC,yEAAyE,CAAC,CAAC;YAEzF,OAAO,IAAI,CAAC;SACb;QAED,IAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QAClC,IAAM,QAAQ,GAAG,UAAU,KAAK,KAAK,CAAC;QAEtC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;YAC/B,aAAa;YACb,QAAQ,UAAA;YACR,QAAQ,UAAA;SACT,CAAC,CAAC;IACL,CAAC,CACF,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,aACP,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,IACV,KAAK,GAER,QAAQ,CACA,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/cjs/TextField/text_field.js

@@ -44,91 +44,99 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
 var React = __importStar(require("react"));
-var styles_1 = require("../styles");
+var styled_1 = __importDefault(require("@emotion/styled"));
 var Typography_1 = require("../Typography");
-var stylesInputBase = function () { return (0, styles_1.css)({
-    label: 'TextField',
-    fontFamily: 'inherit',
-    outline: 'none',
-    boxSizing: 'border-box',
-    width: '100%',
-    borderRadius: '4px',
-    padding: '0 var(--pv-size-base-2)',
-    backgroundColor: 'var(--pv-color-gray-1)',
-    borderStyle: 'solid',
-    borderWidth: '1px',
-    borderColor: 'var(--pv-color-gray-8)',
-    transition: 'background-color 200ms, color 200ms, border-color 200ms',
-    display: 'inline-flex',
-    appearance: 'none',
-    '&::placeholder': {
-        color: 'var(--pv-color-gray-9)',
-    },
-    '&:hover': {
-        backgroundColor: 'var(--pv-color-gray-3)',
-        borderColor: 'var(--pv-color-gray-7)',
-    },
-    '&:disabled': {
-        cursor: 'not-allowed',
-        backgroundColor: 'var(--pv-color-gray-1)',
-        borderColor: 'var(--pv-color-gray-5)',
-        color: 'var(--pv-color-gray-7)',
-    },
-    '&:not(:disabled)': {
-        '&[aria-invalid]': {
-            backgroundColor: 'var(--pv-color-wrong-tint-5)',
-            borderColor: 'var(--pv-color-wrong-tint-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-secondary-tint-5)',
-            borderColor: 'var(--pv-color-secondary-tint-3)',
-        },
-    },
-}); };
-var stylesInputSizeSmall = function () { return (0, styles_1.css)({
-    label: 'small',
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var TextFieldInput = (0, styled_1.default)(Typography_1.Typography)(function (props) { return (__assign(__assign(__assign({ fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box', width: '100%', borderRadius: '4px', padding: '0 var(--pv-size-base-2)', backgroundColor: 'var(--pv-color-gray-1)', borderStyle: 'solid', borderWidth: '1px', transition: 'background-color 200ms, color 200ms, border-color 200ms', display: 'inline-flex', appearance: 'none' }, (props.size === 'small' && {
     height: 'var(--pv-size-base-6)',
-}); };
-var stylesInputSizeMedium = function () { return (0, styles_1.css)({
-    label: 'medium',
+})), (props.size === 'medium' && {
     height: 'var(--pv-size-base-7)',
-}); };
-var stylesInputSizeLarge = function () { return (0, styles_1.css)({
-    label: 'large',
+})), (props.size === 'large' && {
     height: 'var(--pv-size-base-8)',
-}); };
-var stylesLabel = function () { return (0, styles_1.css)({
+}))); }, function (props) {
+    var isDark = props.theme.mode === 'dark';
+    var color = isDark
+        ? 'var(--pv-color-white)'
+        : 'var(--pv-color-black)';
+    var borderColor = 'var(--pv-color-gray-8)';
+    var colorPlaceholder = 'var(--pv-color-gray-9)';
+    var borderColorHover = 'var(--pv-color-gray-7)';
+    var borderColorDisabled = 'var(--pv-color-gray-5)';
+    var colorDisabled = 'var(--pv-color-gray-7)';
+    var invalidBackgroundColor = 'var(--pv-color-wrong-tint-5)';
+    var invalidBorderColor = 'var(--pv-color-wrong-tint-3)';
+    var backgroundColorFocus = 'var(--pv-color-secondary-tint-5)';
+    var borderColorFocus = 'var(--pv-color-secondary-tint-3)';
+    if (isDark) {
+        borderColor = 'var(--pv-color-gray-5)';
+        colorPlaceholder = 'var(--pv-color-gray-6)';
+        borderColorHover = 'var(--pv-color-gray-4)';
+        borderColorDisabled = 'var(--pv-color-gray-4)';
+        colorDisabled = 'var(--pv-color-gray-4)';
+        invalidBackgroundColor = 'var(--pv-color-wrong-shade-4)';
+        invalidBorderColor = 'var(--pv-color-wrong-shade-1)';
+        backgroundColorFocus = 'var(--pv-color-secondary-shade-4)';
+        borderColorFocus = 'var(--pv-color-secondary-shade-1)';
+    }
+    return ({
+        color: color,
+        borderColor: borderColor,
+        '&::placeholder': {
+            color: colorPlaceholder,
+        },
+        '&:hover': {
+            backgroundColor: 'var(--pv-color-gray-3)',
+            borderColor: borderColorHover,
+        },
+        '&:disabled': {
+            cursor: 'not-allowed',
+            backgroundColor: 'var(--pv-color-gray-1)',
+            borderColor: borderColorDisabled,
+            color: colorDisabled,
+        },
+        '&:not(:disabled)': {
+            '&[aria-invalid]': {
+                backgroundColor: invalidBackgroundColor,
+                borderColor: invalidBorderColor,
+            },
+            '&:focus': {
+                backgroundColor: backgroundColorFocus,
+                borderColor: borderColorFocus,
+            },
+        },
+    });
+});
+var TextFieldLabel = (0, styled_1.default)('label')({
     label: 'TextField-label',
     marginBottom: '2px',
     display: 'inline-block',
-}); };
-var stylesError = function () { return (0, styles_1.css)({
-    label: 'TextField-error',
+});
+var TextFieldError = (0, styled_1.default)(Typography_1.Typography)({
     marginTop: '2px',
-}); };
+});
+/**
+ *
+ */
 exports.TextField = React.forwardRef(function (props, ref) {
-    var _a, _b, _c;
-    var size = props.size, className = props.className, label = props.label, _d = props.inputProps, inputProps = _d === void 0 ? {} : _d, disabled = props.disabled, defaultValue = props.defaultValue, id = props.id, value = props.value, placeholder = props.placeholder, required = props.required, name = props.name, inputRef = props.inputRef, error = props.error, errorText = props.errorText, autoFocus = props.autoFocus, readOnly = props.readOnly, _e = props.type, type = _e === void 0 ? 'text' : _e, onChange = props.onChange, other = __rest(props, ["size", "className", "label", "inputProps", "disabled", "defaultValue", "id", "value", "placeholder", "required", "name", "inputRef", "error", "errorText", "autoFocus", "readOnly", "type", "onChange"]);
-    return (React.createElement("div", __assign({}, other, { ref: ref, className: className }),
-        label && (React.createElement("label", { htmlFor: id, className: (0, styles_1.cx)((_a = {},
-                _a[stylesLabel()] = true,
-                _a)) },
+    var size = props.size, label = props.label, _a = props.inputProps, inputProps = _a === void 0 ? {} : _a, disabled = props.disabled, defaultValue = props.defaultValue, id = props.id, value = props.value, placeholder = props.placeholder, required = props.required, name = props.name, inputRef = props.inputRef, error = props.error, errorText = props.errorText, autoFocus = props.autoFocus, readOnly = props.readOnly, _b = props.type, type = _b === void 0 ? 'text' : _b, onChange = props.onChange, other = __rest(props, ["size", "label", "inputProps", "disabled", "defaultValue", "id", "value", "placeholder", "required", "name", "inputRef", "error", "errorText", "autoFocus", "readOnly", "type", "onChange"]);
+    return (React.createElement("div", __assign({ ref: ref }, other),
+        label && (React.createElement(TextFieldLabel, { htmlFor: id },
             React.createElement(Typography_1.Typography, { component: "span", variant: "c2", color: "gray-10" }, label))),
-        React.createElement(Typography_1.Typography, __assign({}, inputProps, { component: "input", color: "black", variant: size === 'small' ? 'c1' : 'b3', type: type, disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, 
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: autoFocus, className: (0, styles_1.cx)((_b = {},
-                _b[stylesInputBase()] = true,
-                _b[stylesInputSizeSmall()] = size === 'small',
-                _b[stylesInputSizeMedium()] = size === 'medium',
-                _b[stylesInputSizeLarge()] = size === 'large',
-                _b[inputProps.className] = !!inputProps.className,
-                _b)), "aria-invalid": error || undefined, onChange: onChange, placeholder: placeholder, readOnly: readOnly })),
-        error && errorText && (React.createElement(Typography_1.Typography, { variant: "c2", color: "wrong", className: (0, styles_1.cx)((_c = {},
-                _c[stylesError()] = true,
-                _c)) }, errorText))));
+        React.createElement(TextFieldInput, __assign({}, inputProps, { 
+            // @ts-ignore
+            component: "input", variant: size === 'small' ? 'c1' : 'b3', size: size, type: type, disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, autoFocus: autoFocus, "aria-invalid": error || undefined, onChange: onChange, placeholder: placeholder, readOnly: readOnly })),
+        error && errorText && (React.createElement(TextFieldError, { variant: "c2", color: "wrong" }, errorText))));
 });
 exports.TextField.displayName = 'TextField';
 exports.TextField.defaultProps = {

package/dist/cjs/TextField/text_field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text_field.js","sourceRoot":"","sources":["../../../src/TextField/text_field.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"text_field.js","sourceRoot":"","sources":["../../../src/TextField/text_field.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/TextareaField/textarea_field.js

@@ -44,97 +44,96 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaField = void 0;
 var React = __importStar(require("react"));
-var styles_1 = require("../styles");
+var styled_1 = __importDefault(require("@emotion/styled"));
 var Typography_1 = require("../Typography");
-var stylesInputBase = function () { return (0, styles_1.css)({
-    label: 'TextareaField',
-    fontFamily: 'inherit',
-    outline: 'none',
-    boxSizing: 'border-box',
-    width: '100%',
-    borderRadius: '4px',
-    padding: 'var(--pv-size-base) var(--pv-size-base-2)',
-    color: 'var(--pv-color-black)',
-    backgroundColor: 'var(--pv-color-gray-1)',
-    borderStyle: 'solid',
-    borderWidth: '1px',
-    borderColor: 'var(--pv-color-gray-8)',
-    transition: 'background-color 200ms, color 200ms, border-color 200ms',
-    display: 'block',
-    appearance: 'none',
-    resize: 'none',
-    '&::placeholder': {
-        color: 'var(--pv-color-gray-9)',
-    },
-    '&:hover': {
-        backgroundColor: 'var(--pv-color-gray-3)',
-        borderColor: 'var(--pv-color-gray-7)',
-    },
-    '&:disabled': {
-        cursor: 'not-allowed',
-        backgroundColor: 'var(--pv-color-gray-1)',
-        borderColor: 'var(--pv-color-gray-5)',
-        color: 'var(--pv-color-gray-7)',
-    },
-    '&:not(:disabled)': {
-        '&[aria-invalid]': {
-            backgroundColor: 'var(--pv-color-wrong-tint-5)',
-            borderColor: 'var(--pv-color-wrong-tint-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-secondary-tint-5)',
-            borderColor: 'var(--pv-color-secondary-tint-3)',
-        },
-    },
-}, {
-    fontWeight: 'var(--pv-text-c1-weight)',
-    fontSize: 'var(--pv-text-c1-size)',
-    lineHeight: 'var(--pv-text-c1-height)',
-    letterSpacing: 'var(--pv-text-c1-spacing)',
-}); };
-var stylesInputSizeSmall = function () { return (0, styles_1.css)({
-    label: 'small',
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var TextareaFieldInput = (0, styled_1.default)('textarea')(function (props) { return (__assign(__assign(__assign({ fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box', width: '100%', borderRadius: '4px', padding: 'var(--pv-size-base) var(--pv-size-base-2)', backgroundColor: 'var(--pv-color-gray-1)', borderStyle: 'solid', borderWidth: '1px', transition: 'background-color 200ms, color 200ms, border-color 200ms', display: 'block', appearance: 'none', resize: 'none', fontWeight: 'var(--pv-text-c1-weight)', fontSize: 'var(--pv-text-c1-size)', lineHeight: 'var(--pv-text-c1-height)', letterSpacing: 'var(--pv-text-c1-spacing)' }, (props.size === 'small' && {
     minHeight: 'var(--pv-size-base-12)',
-}); };
-var stylesInputSizeMedium = function () { return (0, styles_1.css)({
-    label: 'medium',
+})), (props.size === 'medium' && {
     minHeight: 'var(--pv-size-base-14)',
-}); };
-var stylesInputSizeLarge = function () { return (0, styles_1.css)({
-    label: 'large',
+})), (props.size === 'large' && {
     minHeight: 'var(--pv-size-base-16)',
-}); };
-var stylesLabel = function () { return (0, styles_1.css)({
-    label: 'TextareaField-label',
+}))); }, function (props) {
+    var isDark = props.theme.mode === 'dark';
+    var color = isDark
+        ? 'var(--pv-color-white)'
+        : 'var(--pv-color-black)';
+    var borderColor = 'var(--pv-color-gray-8)';
+    var colorPlaceholder = 'var(--pv-color-gray-9)';
+    var borderColorHover = 'var(--pv-color-gray-7)';
+    var borderColorDisabled = 'var(--pv-color-gray-5)';
+    var colorDisabled = 'var(--pv-color-gray-7)';
+    var invalidBackgroundColor = 'var(--pv-color-wrong-tint-5)';
+    var invalidBorderColor = 'var(--pv-color-wrong-tint-3)';
+    var backgroundColorFocus = 'var(--pv-color-secondary-tint-5)';
+    var borderColorFocus = 'var(--pv-color-secondary-tint-3)';
+    if (isDark) {
+        borderColor = 'var(--pv-color-gray-5)';
+        colorPlaceholder = 'var(--pv-color-gray-6)';
+        borderColorHover = 'var(--pv-color-gray-4)';
+        borderColorDisabled = 'var(--pv-color-gray-4)';
+        colorDisabled = 'var(--pv-color-gray-4)';
+        invalidBackgroundColor = 'var(--pv-color-wrong-shade-4)';
+        invalidBorderColor = 'var(--pv-color-wrong-shade-1)';
+        backgroundColorFocus = 'var(--pv-color-secondary-shade-4)';
+        borderColorFocus = 'var(--pv-color-secondary-shade-1)';
+    }
+    return ({
+        color: color,
+        borderColor: borderColor,
+        '&::placeholder': {
+            color: colorPlaceholder,
+        },
+        '&:hover': {
+            backgroundColor: 'var(--pv-color-gray-3)',
+            borderColor: borderColorHover,
+        },
+        '&:disabled': {
+            cursor: 'not-allowed',
+            backgroundColor: 'var(--pv-color-gray-1)',
+            borderColor: borderColorDisabled,
+            color: colorDisabled,
+        },
+        '&:not(:disabled)': {
+            '&[aria-invalid]': {
+                backgroundColor: invalidBackgroundColor,
+                borderColor: invalidBorderColor,
+            },
+            '&:focus': {
+                backgroundColor: backgroundColorFocus,
+                borderColor: borderColorFocus,
+            },
+        },
+    });
+});
+var TextareaFieldLabel = (0, styled_1.default)('label')({
     marginBottom: '2px',
     display: 'inline-block',
-}); };
-var stylesError = function () { return (0, styles_1.css)({
-    label: 'TextareaField-error',
+});
+var TextareaFieldError = (0, styled_1.default)(Typography_1.Typography)({
     marginTop: '2px',
-}); };
+});
+/**
+ *
+ */
 exports.TextareaField = React.forwardRef(function (props, ref) {
-    var _a, _b, _c;
-    var size = props.size, className = props.className, label = props.label, onChange = props.onChange, inputProps = props.inputProps, disabled = props.disabled, defaultValue = props.defaultValue, id = props.id, value = props.value, placeholder = props.placeholder, required = props.required, name = props.name, inputRef = props.inputRef, error = props.error, errorText = props.errorText, autoFocus = props.autoFocus, readOnly = props.readOnly, other = __rest(props, ["size", "className", "label", "onChange", "inputProps", "disabled", "defaultValue", "id", "value", "placeholder", "required", "name", "inputRef", "error", "errorText", "autoFocus", "readOnly"]);
-    return (React.createElement("div", __assign({}, other, { ref: ref, className: className }),
-        label && (React.createElement("label", { htmlFor: id, className: (0, styles_1.cx)((_a = {},
-                _a[stylesLabel()] = true,
-                _a)) },
+    var size = props.size, label = props.label, inputProps = props.inputProps, disabled = props.disabled, defaultValue = props.defaultValue, id = props.id, value = props.value, placeholder = props.placeholder, required = props.required, name = props.name, inputRef = props.inputRef, error = props.error, errorText = props.errorText, autoFocus = props.autoFocus, readOnly = props.readOnly, onChange = props.onChange, other = __rest(props, ["size", "label", "inputProps", "disabled", "defaultValue", "id", "value", "placeholder", "required", "name", "inputRef", "error", "errorText", "autoFocus", "readOnly", "onChange"]);
+    return (React.createElement("div", __assign({ ref: ref }, other),
+        label && (React.createElement(TextareaFieldLabel, { htmlFor: id },
             React.createElement(Typography_1.Typography, { component: "span", variant: "c2", color: "gray-10" }, label))),
-        React.createElement("textarea", __assign({}, inputProps, { disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, 
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: autoFocus, className: (0, styles_1.cx)((_b = {},
-                _b[stylesInputBase()] = true,
-                _b[stylesInputSizeSmall()] = size === 'small',
-                _b[stylesInputSizeMedium()] = size === 'medium',
-                _b[stylesInputSizeLarge()] = size === 'large',
-                _b)), "aria-invalid": error || undefined, onChange: onChange, placeholder: placeholder, readOnly: readOnly })),
-        error && errorText && (React.createElement(Typography_1.Typography, { variant: "c2", color: "wrong", className: (0, styles_1.cx)((_c = {},
-                _c[stylesError()] = true,
-                _c)) }, errorText))));
+        React.createElement(TextareaFieldInput, __assign({}, inputProps, { size: size, disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, autoFocus: autoFocus, "aria-invalid": error || undefined, onChange: onChange, placeholder: placeholder, readOnly: readOnly })),
+        error && errorText && (React.createElement(TextareaFieldError, { variant: "c2", color: "wrong" }, errorText))));
 });
 exports.TextareaField.displayName = 'TextareaField';
 exports.TextareaField.defaultProps = {