@matbea-ui/matbea-ui 0.2.0-dev.619284 → 0.2.0-dev.925901

package/dist/matbea-ui.es.js

@@ -934,10 +934,9 @@ const Wrapper$1 = styled$1.div `
   width: 100%;
 `;
 const Label$2 = styled$1(Typography).attrs({
-    variant: "form-input",
     forwardedAs: "label",
 }) `
-  color: ${({ theme }) => theme.colors.primary.darkBlue};
+  color: ${({ theme, $color }) => $color || theme.colors.primary.darkBlue};
 `;
 const FieldContainer$1 = styled$1.div `
   display: flex;
@@ -1010,7 +1009,7 @@ const ErrorText$1 = styled$1.span `
   color: ${({ theme }) => theme.colors.accent.red};
 `;
 
-const TextField = forwardRef(({ value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, action, name, type = "text", onChange, onFocus, onBlur, className, labelVariant, }, ref) => {
+const TextField = forwardRef(({ value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, action, name, type = "text", onChange, onFocus, onBlur, className, labelVariant, labelColor, }, ref) => {
     const [focused, setFocused] = useState(false);
     const hasError = Boolean(error);
     const handleFocus = (evt) => {
@@ -1021,7 +1020,7 @@ const TextField = forwardRef(({ value, defaultValue, placeholder = "Text", label
         setFocused(false);
         onBlur?.(evt);
     };
-    return (jsxs(Wrapper$1, { className: className, children: [label && jsx(Label$2, { variant: labelVariant, children: label }), jsxs(FieldContainer$1, { "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : focused ? "active" : undefined, children: [icon && jsx(LeadingIcon$1, { children: icon }), jsx(Input, { ref: ref, type: type, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur }), action && jsx(ActionSlot, { children: action })] }), error && jsx(ErrorText$1, { children: error })] }));
+    return (jsxs(Wrapper$1, { className: className, children: [label && (jsx(Label$2, { variant: labelVariant || "form-input", "$color": labelColor, children: label })), jsxs(FieldContainer$1, { "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : focused ? "active" : undefined, children: [icon && jsx(LeadingIcon$1, { children: icon }), jsx(Input, { ref: ref, type: type, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur }), action && jsx(ActionSlot, { children: action })] }), error && jsx(ErrorText$1, { children: error })] }));
 });
 TextField.displayName = "TextField";