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

package/dist/matbea-ui.cjs.js

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