@matbea-ui/matbea-ui 0.2.0-dev.963809 → 0.2.0-dev.976304

package/dist/matbea-ui.cjs.js

@@ -167,6 +167,7 @@ const StyledButton = styled.button `
 const IconSlot = styled.span `
   display: inline-flex;
   align-items: center;
+  width: max-content;
   justify-content: center;
   line-height: 0;
   ${({ $iconOnly }) => $iconOnly &&
@@ -575,8 +576,9 @@ const StyledTypography = styled.styled.span `
 const Typography = ({ as = "span", forwardedAs, variant = "body-m-semibold", color, align, uppercase = false, truncate = false, inline = false, children, ...rest }) => (jsxRuntime.jsx(StyledTypography, { as: as, forwardedAs: forwardedAs, "$variant": variant, "$color": color, "$align": align, "$uppercase": uppercase, "$truncate": truncate, "$inline": inline, ...rest, children: children }));
 
 const Icon = ({ size = 24, children, ...rest }) => {
-    return (jsxRuntime.jsx("svg", { width: size, height: size, style: {
-            display: "inline-flex",
+    return (jsxRuntime.jsx("svg", { style: {
+            width: size,
+            height: size,
         }, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: children }));
 };
 
@@ -930,14 +932,13 @@ const Informer = ({ label, description, type, icon, }) => {
 const Wrapper$1 = styled.styled.div `
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 12px;
   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;
@@ -1010,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, }, 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) => {
@@ -1021,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, { 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";