@televet/kibble-ui 1.12.11-beta.2wp7xv5.0 → 1.12.11

package/build/index.js

@@ -3766,39 +3766,58 @@ var CheckboxConfig = {
 
 var Textarea = withFormControl(function (props) {
     props.isFieldInline; var textareaRef = props.textareaRef, domProps = __rest(props, ["isFieldInline", "textareaRef"]);
-    return React__default["default"].createElement(react.Textarea, __assign({}, domProps, { ref: textareaRef }));
+    return React__default["default"].createElement(react.Textarea, __assign({ background: colors.background.light }, domProps, { ref: textareaRef }));
 });
 var WrappedTextArea = React.forwardRef(function (props, ref) { return (React__default["default"].createElement(Textarea, __assign({ textareaRef: ref }, props))); });
 WrappedTextArea.displayName = 'Textarea';
 
-var baseStyle = {
-    bgColor: colors.background.light,
-    borderColor: colors.border.light.default,
-    borderRadius: radii.base,
-    color: adaptiveColors.text.light.default,
-};
-var disabledStyle = {
-    bgColor: colors.border.light.default,
-    borderColor: colors.border.light.default,
-    opacity: 0.4,
-    '::placeholder': {
-        color: colors.text.light.placeholder,
-        opacity: 1,
-    },
-};
-var hoverStyle = {
-    borderColor: colors.border.light.heavy,
-};
 var FormControlConfig = {
+    baseStyle: {
+        borderRadius: radii.base,
+        color: adaptiveColors.text.light.default,
+    },
     variants: {
-        outline: __assign(__assign({}, baseStyle), { _hover: __assign({}, hoverStyle), _disabled: __assign({}, disabledStyle), field: __assign(__assign({}, baseStyle), { _hover: __assign({}, hoverStyle), _disabled: __assign({}, disabledStyle), _focus: {
+        outline: {
+            // textarea doesn't have a "field" prop, so its disabled styles live a level up from the others
+            _disabled: {
+                background: colors.border.light.default,
+                borderColor: colors.border.light.default,
+                opacity: 0.4,
+                '::placeholder': {
+                    color: colors.text.light.placeholder,
+                    opacity: 1,
+                },
+            },
+            field: {
+                background: coreColors.white,
+                borderColor: colors.border.light.default,
+                _hover: {
+                    borderColor: colors.border.dark.default,
+                },
+                _disabled: {
+                    background: colors.border.light.default,
+                    borderColor: colors.border.light.default,
+                    opacity: 0.4,
+                    '::placeholder': {
+                        color: colors.text.light.placeholder,
+                        opacity: 1,
+                    },
+                },
+                _focus: {
                     _hover: {
                         borderColor: colors.border.light.focus,
                     },
-                } }) }),
+                    _invalid: {
+                        borderColor: colors.border.light.error,
+                        boxShadow: "0 0 0 1px ".concat(colors.border.light.error),
+                    },
+                },
+            },
+        },
     },
     sizes: {
         sm: {
+            borderRadius: radii.base,
             fontSize: fontSizes.sm,
         },
         md: {
@@ -3817,7 +3836,15 @@ var TextInput = withFormControl(function (props) {
     var leftElement = props.leftElement, rightElement = props.rightElement, inputRef = props.inputRef; props.isFieldInline; var domProps = __rest(props, ["leftElement", "rightElement", "inputRef", "isFieldInline"]);
     return (React__default["default"].createElement(react.InputGroup, null,
         leftElement ? React__default["default"].createElement(react.InputLeftElement, { children: leftElement, h: "100%" }) : null,
-        React__default["default"].createElement(react.Input, __assign({ ref: inputRef }, domProps)),
+        React__default["default"].createElement(react.Input, __assign({ background: colors.background.light, _disabled: {
+                background: colors.border.light.default,
+                opacity: 0.4,
+                cursor: 'not-allowed',
+                '::placeholder': {
+                    color: colors.text.light.placeholder,
+                    opacity: 1,
+                },
+            }, ref: inputRef }, domProps)),
         rightElement ? React__default["default"].createElement(react.InputRightElement, { children: rightElement, h: "100%" }) : null));
 });
 var WrappedTextInput = React.forwardRef(function (props, ref) { return (React__default["default"].createElement(TextInput, __assign({ inputRef: ref }, props))); });
@@ -4468,12 +4495,14 @@ var Select = function (props) {
             }
         }
     }, [value, options]);
-    var focusStyle = {
-        borderWidth: '2px',
-        borderColor: colors.border.light.focus,
-    };
     if (useBrowserDefaultMenu) {
-        return (React__default["default"].createElement(react.Select, __assign({ value: value, placeholder: placeholder }, domProps, { _focus: __assign({}, focusStyle) }), options.map(function (option, index) { return (React__default["default"].createElement("option", { key: "options-".concat(index), value: option.value }, option.label)); })));
+        return (React__default["default"].createElement(react.Select, __assign({ value: value, placeholder: placeholder }, domProps, { _hover: {
+                borderWidth: '1px',
+                borderColor: colors.border.light.heavy,
+            }, _focus: {
+                borderWidth: '2px',
+                borderColor: colors.border.light.focus,
+            } }), options.map(function (option, index) { return (React__default["default"].createElement("option", { key: "options-".concat(index), value: option.value }, option.label)); })));
     }
     var handleSelectOption = function (selectedOption) {
         setSelectedOption(selectedOption);
@@ -4488,7 +4517,13 @@ var Select = function (props) {
     };
     return (React__default["default"].createElement(MenuProvider, { menuItems: options, onMenuClose: handleMenuClose },
         React__default["default"].createElement(MenuContainer, { matchWidth: true, isLazy: true },
-            React__default["default"].createElement(react.Select, __assign({ as: react.MenuButton }, domProps, { _focus: __assign({}, focusStyle), ref: selectRef, onClick: function (event) { return event.stopPropagation(); } }),
+            React__default["default"].createElement(react.Select, __assign({ as: react.MenuButton }, domProps, { _hover: {
+                    borderWidth: '1px',
+                    borderColor: colors.border.light.heavy,
+                }, _focus: {
+                    borderWidth: '2px',
+                    borderColor: colors.border.light.focus,
+                }, ref: selectRef, onClick: function (event) { return event.stopPropagation(); } }),
                 React__default["default"].createElement(react.HStack, null,
                     (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.leftElement)
                         ? selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.leftElement
@@ -6907,7 +6942,6 @@ var theme = react.extendTheme({
         Switch: SwitchConfig,
         Text: TextConfig,
         Textarea: TextareaConfig,
-        Input: TextInputConfig,
         Tooltip: TooltipConfig,
         Avatar: AvatarConfig,
         Menu: MenuConfig,