@peculiar/react-components 0.3.14 → 0.4.0

package/dist/esm/Switch/switch.js

@@ -21,11 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
+import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
 import { Box } from '../Box';
 import { useId } from '../hooks';
-import { css, cx } from '../styles';
-var stylesBase = function () { return css({
-    label: 'Switch',
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var SwitchRoot = styled('label')({
     display: 'inline-flex',
     width: 'var(--pv-size-base-7)',
     height: 'var(--pv-size-base-4)',
@@ -33,8 +39,10 @@ var stylesBase = function () { return css({
     justifyContent: 'center',
     position: 'relative',
     alignItems: 'center',
-}); };
-var stylesInput = function (props) { return css({
+});
+var SwitchInput = styled('input', {
+    shouldForwardProp: function (prop) { return isPropValid(prop) && prop !== 'color'; },
+})({
     label: 'Switch-input',
     overflow: 'hidden',
     width: '100%',
@@ -45,41 +53,66 @@ var stylesInput = function (props) { return css({
     borderRadius: 'inherit',
     appearance: 'none',
     backgroundColor: 'var(--pv-color-gray-6)',
-    '&:checked': {
-        backgroundColor: "var(--pv-color-".concat(props.color, ")"),
-        '+ [aria-hidden]': {
-            transform: 'translateX(calc(50% - 2px))',
-            '&:before': {
-                backgroundColor: "var(--pv-color-".concat(props.color, "-shade-2)"),
+}, function (props) {
+    var isDark = props.theme.mode === 'dark';
+    var backgroundColorChecked = "var(--pv-color-".concat(props.color, ")");
+    var borderColor = 'var(--pv-color-gray-3)';
+    var borderColorDisabled = 'var(--pv-color-gray-3)';
+    var backgroundColorDisabled = 'var(--pv-color-gray-1)';
+    var backgroundColorDisabledChecked = "var(--pv-color-".concat(props.color, "-tint-3)");
+    if (isDark) {
+        backgroundColorChecked = "var(--pv-color-".concat(props.color, "-tint-1)");
+        borderColor = 'var(--pv-color-gray-9)';
+        borderColorDisabled = 'var(--pv-color-gray-6)';
+        backgroundColorDisabled = 'var(--pv-color-gray-7)';
+        backgroundColorDisabledChecked = "var(--pv-color-".concat(props.color, "-shade-3)");
+    }
+    return {
+        '&:checked': {
+            backgroundColor: backgroundColorChecked,
+            '+ [aria-hidden]': {
+                transform: 'translateX(calc(50% - 2px))',
+                '&:before': {
+                    backgroundColor: "var(--pv-color-".concat(props.color, "-shade-2)"),
+                },
             },
         },
-    },
-    '&:disabled': {
-        cursor: 'not-allowed',
-        pointerEvents: 'none',
-        opacity: 0.4,
-    },
-    '&:not(:disabled)': {
-        cursor: 'pointer',
-        '&:hover': {
-            '+ [aria-hidden]:before': {
-                opacity: 0.18,
+        '&:disabled': {
+            cursor: 'not-allowed',
+            pointerEvents: 'none',
+            backgroundColor: 'var(--pv-color-gray-4)',
+            '+ [aria-hidden]': {
+                borderColor: borderColorDisabled,
+                backgroundColor: backgroundColorDisabled,
             },
-        },
-        '&:focus': {
-            '+ [aria-hidden]:before': {
-                opacity: 0.23,
+            '&:checked': {
+                backgroundColor: backgroundColorDisabledChecked,
             },
         },
-        '&:active': {
-            '+ [aria-hidden]:before': {
-                opacity: 0.30,
+        '&:not(:disabled)': {
+            cursor: 'pointer',
+            '+ [aria-hidden]': {
+                borderColor: borderColor,
+            },
+            '&:hover': {
+                '+ [aria-hidden]:before': {
+                    opacity: 0.18,
+                },
+            },
+            '&:focus': {
+                '+ [aria-hidden]:before': {
+                    opacity: 0.23,
+                },
+            },
+            '&:active': {
+                '+ [aria-hidden]:before': {
+                    opacity: 0.30,
+                },
             },
         },
-    },
-}); };
-var stylesDot = function () { return css({
-    label: 'Switch-dot',
+    };
+});
+var SwitchDot = styled(Box)({
     display: 'block',
     position: 'absolute',
     width: 'var(--pv-size-base-3)',
@@ -101,17 +134,16 @@ var stylesDot = function () { return css({
         backgroundColor: 'var(--pv-color-gray-9)',
         transition: 'opacity 200ms, background-color 200ms',
     },
-}); };
+});
+/**
+ *
+ */
 export var Switch = React.forwardRef(function (props, ref) {
-    var _a;
-    var checked = props.checked, defaultChecked = props.defaultChecked, _b = props.color, color = _b === void 0 ? 'primary' : _b, required = props.required, inputProps = props.inputProps, className = props.className, disabled = props.disabled, idProp = props.id, name = props.name, onChange = props.onChange, other = __rest(props, ["checked", "defaultChecked", "color", "required", "inputProps", "className", "disabled", "id", "name", "onChange"]);
+    var checked = props.checked, defaultChecked = props.defaultChecked, _a = props.color, color = _a === void 0 ? 'primary' : _a, required = props.required, inputProps = props.inputProps, disabled = props.disabled, idProp = props.id, name = props.name, onChange = props.onChange, other = __rest(props, ["checked", "defaultChecked", "color", "required", "inputProps", "disabled", "id", "name", "onChange"]);
     var id = useId(idProp);
-    return (React.createElement("label", __assign({}, other, { ref: ref, htmlFor: id, className: cx((_a = {},
-            _a[stylesBase()] = true,
-            _a[className] = !!className,
-            _a)) }),
-        React.createElement("input", __assign({}, inputProps, { type: "checkbox", name: name, id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, className: cx(stylesInput(props)), onChange: onChange })),
-        React.createElement(Box, { "aria-hidden": true, className: cx(stylesDot()), background: "".concat(color, "-contrast"), borderColor: "gray-3", borderWidth: 1, borderStyle: "solid", borderRadius: 100 })));
+    return (React.createElement(SwitchRoot, __assign({ ref: ref, htmlFor: id }, other),
+        React.createElement(SwitchInput, __assign({}, inputProps, { type: "checkbox", name: name, id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, color: color, onChange: onChange })),
+        React.createElement(SwitchDot, { "aria-hidden": true, background: "".concat(color, "-contrast"), borderWidth: 1, borderStyle: "solid", borderRadius: 100 })));
 });
 Switch.displayName = 'Switch';
 Switch.defaultProps = {

package/dist/esm/Switch/switch.js.map

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

package/dist/esm/Tabs/tab.js

@@ -21,7 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { css, cx } from '../styles';
+import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
 import { Typography } from '../Typography';
 /**
  *
@@ -29,75 +30,76 @@ import { Typography } from '../Typography';
 /**
  * Styles.
  */
-var stylesBase = function () { return 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 = styled('button', {
+    shouldForwardProp: function (prop) { return isPropValid(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,
+            },
         },
-    },
-}); };
+    };
+});
 /**
  *
  */
 export var 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: cx((_a = {},
-            _a[stylesBase()] = true,
-            _a[className] = !!className,
-            _a)), onClick: handleClick }),
-        React.createElement(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, { variant: "s2", component: "span", color: "inherit" }, children)));
 });
 Tab.displayName = 'Tab';
 Tab.defaultProps = {

package/dist/esm/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/esm/Tabs/tabs.js

@@ -21,15 +21,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { css, cx } from '../styles';
-var stylesBase = function () { return css({
-    label: 'Tabs',
+import styled from '@emotion/styled';
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var TabsRoot = styled('div')({
     whiteSpace: 'nowrap',
     overflowX: 'auto',
-}); };
+});
+/**
+ *
+ */
 export var 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;
@@ -46,9 +53,6 @@ export var Tabs = React.forwardRef(function (props, ref) {
             onChange: onChange,
         });
     });
-    return (React.createElement("div", __assign({}, other, { ref: ref, role: "tablist", className: 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/esm/Tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/Tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAwBpC,IAAM,UAAU,GAAG,cAAM,OAAA,GAAG,CAAC;IAC3B,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,EAJuB,CAIvB,CAAC;AAEH,MAAM,CAAC,IAAM,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,EAAE;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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AA0BrC;;GAEG;AAEH;;GAEG;AACH,IAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,IAAM,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/esm/TextField/text_field.js

@@ -21,88 +21,93 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { css, cx } from '../styles';
+import styled from '@emotion/styled';
 import { Typography } from '../Typography';
-var stylesInputBase = function () { return 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 css({
-    label: 'small',
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var TextFieldInput = styled(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 css({
-    label: 'medium',
+})), (props.size === 'medium' && {
     height: 'var(--pv-size-base-7)',
-}); };
-var stylesInputSizeLarge = function () { return css({
-    label: 'large',
+})), (props.size === 'large' && {
     height: 'var(--pv-size-base-8)',
-}); };
-var stylesLabel = function () { return 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 = styled('label')({
     label: 'TextField-label',
     marginBottom: '2px',
     display: 'inline-block',
-}); };
-var stylesError = function () { return css({
-    label: 'TextField-error',
+});
+var TextFieldError = styled(Typography)({
     marginTop: '2px',
-}); };
+});
+/**
+ *
+ */
 export var 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: 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, { component: "span", variant: "c2", color: "gray-10" }, label))),
-        React.createElement(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: 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, { variant: "c2", color: "wrong", className: 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))));
 });
 TextField.displayName = 'TextField';
 TextField.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"text_field.js","sourceRoot":"","sources":["../../../src/TextField/text_field.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAkF3C,IAAM,eAAe,GAAG,cAAM,OAAA,GAAG,CAAC;IAChC,KAAK,EAAE,WAAW;IAClB,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,yBAAyB;IAClC,eAAe,EAAE,wBAAwB;IACzC,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,KAAK;IAClB,WAAW,EAAE,wBAAwB;IACrC,UAAU,EAAE,yDAAyD;IACrE,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,MAAM;IAClB,gBAAgB,EAAE;QAChB,KAAK,EAAE,wBAAwB;KAChC;IACD,SAAS,EAAE;QACT,eAAe,EAAE,wBAAwB;QACzC,WAAW,EAAE,wBAAwB;KACtC;IACD,YAAY,EAAE;QACZ,MAAM,EAAE,aAAa;QACrB,eAAe,EAAE,wBAAwB;QACzC,WAAW,EAAE,wBAAwB;QACrC,KAAK,EAAE,wBAAwB;KAChC;IACD,kBAAkB,EAAE;QAClB,iBAAiB,EAAE;YACjB,eAAe,EAAE,8BAA8B;YAC/C,WAAW,EAAE,8BAA8B;SAC5C;QACD,SAAS,EAAE;YACT,eAAe,EAAE,kCAAkC;YACnD,WAAW,EAAE,kCAAkC;SAChD;KACF;CACF,CAAC,EAtC4B,CAsC5B,CAAC;AAEH,IAAM,oBAAoB,GAAG,cAAM,OAAA,GAAG,CAAC;IACrC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;CAChC,CAAC,EAHiC,CAGjC,CAAC;AAEH,IAAM,qBAAqB,GAAG,cAAM,OAAA,GAAG,CAAC;IACtC,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,uBAAuB;CAChC,CAAC,EAHkC,CAGlC,CAAC;AAEH,IAAM,oBAAoB,GAAG,cAAM,OAAA,GAAG,CAAC;IACrC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;CAChC,CAAC,EAHiC,CAGjC,CAAC;AAEH,IAAM,WAAW,GAAG,cAAM,OAAA,GAAG,CAAC;IAC5B,KAAK,EAAE,iBAAiB;IACxB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,cAAc;CACxB,CAAC,EAJwB,CAIxB,CAAC;AAEH,IAAM,WAAW,GAAG,cAAM,OAAA,GAAG,CAAC;IAC5B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,KAAK;CACjB,CAAC,EAHwB,CAGxB,CAAC;AAEH,MAAM,CAAC,IAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAiC,UAAC,KAAK,EAAE,GAAG;;IAEjF,IAAA,IAAI,GAmBF,KAAK,KAnBH,EACJ,SAAS,GAkBP,KAAK,UAlBE,EACT,KAAK,GAiBH,KAAK,MAjBF,EACL,KAgBE,KAAK,WAhBQ,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,QAAQ,GAeN,KAAK,SAfC,EACR,YAAY,GAcV,KAAK,aAdK,EACZ,EAAE,GAaA,KAAK,GAbL,EACF,KAAK,GAYH,KAAK,MAZF,EACL,WAAW,GAWT,KAAK,YAXI,EACX,QAAQ,GAUN,KAAK,SAVC,EACR,IAAI,GASF,KAAK,KATH,EACJ,QAAQ,GAQN,KAAK,SARC,EACR,KAAK,GAOH,KAAK,MAPF,EACL,SAAS,GAMP,KAAK,UANE,EACT,SAAS,GAKP,KAAK,UALE,EACT,QAAQ,GAIN,KAAK,SAJC,EACR,KAGE,KAAK,KAHM,EAAb,IAAI,mBAAG,MAAM,KAAA,EACb,QAAQ,GAEN,KAAK,SAFC,EACL,KAAK,UACN,KAAK,EApBH,yMAoBL,CADS,CACA;IAEV,OAAO,CACL,wCACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS;QAEnB,KAAK,IAAI,CACR,+BACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,EAAE;gBACX,GAAC,WAAW,EAAE,IAAG,IAAI;oBACrB;YAEF,oBAAC,UAAU,IACT,SAAS,EAAC,MAAM,EAChB,OAAO,EAAC,IAAI,EACZ,KAAK,EAAC,SAAS,IAEd,KAAK,CACK,CACP,CACT;QACD,oBAAC,UAAU,eACL,UAAU,IACd,SAAS,EAAC,OAAO,EACjB,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACvC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,QAAQ;YACb,iDAAiD;YACjD,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,EAAE;gBACX,GAAC,eAAe,EAAE,IAAG,IAAI;gBACzB,GAAC,oBAAoB,EAAE,IAAG,IAAI,KAAK,OAAO;gBAC1C,GAAC,qBAAqB,EAAE,IAAG,IAAI,KAAK,QAAQ;gBAC5C,GAAC,oBAAoB,EAAE,IAAG,IAAI,KAAK,OAAO;gBAC1C,GAAC,UAAU,CAAC,SAAS,IAAG,CAAC,CAAC,UAAU,CAAC,SAAS;oBAC9C,kBACY,KAAK,IAAI,SAAS,EAChC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAClB;QACD,KAAK,IAAI,SAAS,IAAI,CACrB,oBAAC,UAAU,IACT,OAAO,EAAC,IAAI,EACZ,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,EAAE;gBACX,GAAC,WAAW,EAAE,IAAG,IAAI;oBACrB,IAED,SAAS,CACC,CACd,CACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,SAAS,CAAC,YAAY,GAAG;IACvB,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,QAAQ;CACf,CAAC"}
+{"version":3,"file":"text_field.js","sourceRoot":"","sources":["../../../src/TextField/text_field.tsx"],"names":[],"mappings":"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"}