@televet/kibble-ui 1.12.11 → 1.12.12

package/build/index.js

@@ -3766,58 +3766,39 @@ 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({ background: colors.background.light }, domProps, { ref: textareaRef }));
+    return React__default["default"].createElement(react.Textarea, __assign({}, domProps, { ref: textareaRef }));
 });
 var WrappedTextArea = React.forwardRef(function (props, ref) { return (React__default["default"].createElement(Textarea, __assign({ textareaRef: ref }, props))); });
 WrappedTextArea.displayName = 'Textarea';
 
-var FormControlConfig = {
-    baseStyle: {
-        borderRadius: radii.base,
-        color: adaptiveColors.text.light.default,
+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 = {
     variants: {
-        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: {
+        outline: __assign(__assign({}, baseStyle), { _hover: __assign({}, hoverStyle), _disabled: __assign({}, disabledStyle), field: __assign(__assign({}, baseStyle), { _hover: __assign({}, hoverStyle), _disabled: __assign({}, disabledStyle), _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: {
@@ -3836,15 +3817,7 @@ 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({ 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)),
+        React__default["default"].createElement(react.Input, __assign({ 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))); });
@@ -4495,14 +4468,12 @@ 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, { _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)); })));
+        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)); })));
     }
     var handleSelectOption = function (selectedOption) {
         setSelectedOption(selectedOption);
@@ -4517,13 +4488,7 @@ 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, { _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.Select, __assign({ as: react.MenuButton }, domProps, { _focus: __assign({}, focusStyle), 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
@@ -6942,6 +6907,7 @@ var theme = react.extendTheme({
         Switch: SwitchConfig,
         Text: TextConfig,
         Textarea: TextareaConfig,
+        Input: TextInputConfig,
         Tooltip: TooltipConfig,
         Avatar: AvatarConfig,
         Menu: MenuConfig,