@televet/kibble-ui 1.12.1 → 1.12.2

package/build/components/Forms/FormControl/formControl.argTypes.d.ts

@@ -147,4 +147,13 @@ export declare const formControlArgTypes: {
             };
         };
     };
+    formControlStyle: {
+        type: string;
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
 };

package/build/components/Forms/FormControl/formControl.component.d.ts

@@ -10,6 +10,7 @@ export interface WithFormControlProps {
     isRequired?: boolean;
     label?: string;
     labelStyle?: Dict;
+    formControlStyle?: Dict;
     helperTextAlignment?: 'start' | 'end';
 }
 export declare function withFormControl<P extends object>(Component: React.ComponentType<P>): React.FC<P & WithFormControlProps>;

package/build/index.js

@@ -3589,10 +3589,10 @@ var ButtonSizeConfig = {
 
 function withFormControl(Component) {
     function WithFormControl(_a) {
-        var _b = _a.errorText, errorText = _b === void 0 ? 'Field is invalid' : _b, helperText = _a.helperText, isDisabled = _a.isDisabled, _c = _a.isFieldInline, isFieldInline = _c === void 0 ? false : _c, isInvalid = _a.isInvalid, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, label = _a.label, labelStyle = _a.labelStyle, _d = _a.helperTextAlignment, helperTextAlignment = _d === void 0 ? 'start' : _d, props = __rest(_a, ["errorText", "helperText", "isDisabled", "isFieldInline", "isInvalid", "isReadOnly", "isRequired", "label", "labelStyle", "helperTextAlignment"]);
+        var _b = _a.errorText, errorText = _b === void 0 ? 'Field is invalid' : _b, helperText = _a.helperText, isDisabled = _a.isDisabled, _c = _a.isFieldInline, isFieldInline = _c === void 0 ? false : _c, isInvalid = _a.isInvalid, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, label = _a.label, labelStyle = _a.labelStyle, formControlStyle = _a.formControlStyle, _d = _a.helperTextAlignment, helperTextAlignment = _d === void 0 ? 'start' : _d, props = __rest(_a, ["errorText", "helperText", "isDisabled", "isFieldInline", "isInvalid", "isReadOnly", "isRequired", "label", "labelStyle", "formControlStyle", "helperTextAlignment"]);
         var _e = useTheme(), colors = _e.colors, fontSizes = _e.fontSizes;
         var alignment = isInvalid && helperText ? 'space-between' : helperTextAlignment;
-        return (React__default["default"].createElement(react.FormControl, { isInvalid: isInvalid, isRequired: isRequired, isReadOnly: isReadOnly, isDisabled: isDisabled },
+        return (React__default["default"].createElement(react.FormControl, __assign({}, formControlStyle, { isInvalid: isInvalid, isRequired: isRequired, isReadOnly: isReadOnly, isDisabled: isDisabled }),
             label && (React__default["default"].createElement(react.FormLabel, __assign({ display: isFieldInline ? 'inline-block' : 'block', color: colors.text.light.default }, labelStyle), label)),
             React__default["default"].createElement(Component, __assign({}, props, { "$isFieldInline": isFieldInline, errorBorderColor: colors.border.light.error, focusBorderColor: colors.border.light.focus })),
             React__default["default"].createElement(react.Flex, { mt: 2, w: "100%", justifyContent: alignment, alignItems: "center" },
@@ -3833,7 +3833,7 @@ var TextInput = withFormControl(function (props) {
     // the disabled styles coming from the FormControlConfig weren't getting applied to the TextInput, so they're added inline instead
     var leftElement = props.leftElement, rightElement = props.rightElement, inputRef = props.inputRef, domProps = __rest(props, ["leftElement", "rightElement", "inputRef"]);
     return (React__default["default"].createElement(react.InputGroup, null,
-        leftElement ? React__default["default"].createElement(react.InputLeftElement, { children: leftElement }) : 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,
@@ -3843,7 +3843,7 @@ var TextInput = withFormControl(function (props) {
                     opacity: 1,
                 },
             }, ref: inputRef }, domProps)),
-        rightElement ? React__default["default"].createElement(react.InputRightElement, { children: rightElement }) : null));
+        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))); });
 WrappedTextInput.displayName = 'TextInput';