infinity-ui-elements 1.8.6 → 1.8.7

package/dist/index.js

@@ -1431,12 +1431,12 @@ const FormFooter = React__namespace.forwardRef(({ helperText, trailingText, vali
 });
 FormFooter.displayName = "FormFooter";
 
-const checkboxVariants = classVarianceAuthority.cva("relative inline-flex items-center justify-center shrink-0 transition-all cursor-pointer", {
+const checkboxVariants = classVarianceAuthority.cva("relative inline-flex items-center justify-center shrink-0 transition-all cursor-pointer box-border", {
     variants: {
         size: {
-            small: "w-[14px] h-[14px] rounded-small border-[1.5px]",
-            medium: "w-[16px] h-[16px] rounded-small border-[1.5px]",
-            large: "w-[20px] h-[20px] rounded-medium border-[2px]",
+            small: "w-[10px] h-[10px] rounded-small border-[1.5px]",
+            medium: "w-[12px] h-[12px] rounded-small border-[1.5px]",
+            large: "w-[16px] h-[16px] rounded-medium border-[2px]",
         },
         validationState: {
             none: "",
@@ -1577,7 +1577,7 @@ const Checkbox = React__namespace.forwardRef(({ label, errorText, size = "medium
     const config = sizeConfig[size];
     // Determine if we should show the error text
     const shouldShowError = errorText && showErrorText;
-    return (jsxRuntime.jsxs("div", { className: cn("inline-flex flex-col", containerClassName), children: [jsxRuntime.jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "checkbox", "aria-checked": isIndeterminate ? "mixed" : isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "checkbox", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsxRuntime.jsxs("div", { className: "relative inline-flex shrink-0", children: [showRipple && (jsxRuntime.jsx("div", { className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none w-full h-full", validationState === "error"
+    return (jsxRuntime.jsxs("div", { className: cn("inline-flex flex-col px-2", containerClassName), children: [jsxRuntime.jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "checkbox", "aria-checked": isIndeterminate ? "mixed" : isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "checkbox", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsxRuntime.jsxs("div", { className: "relative inline-flex shrink-0", children: [showRipple && (jsxRuntime.jsx("div", { className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none w-full h-full", validationState === "error"
                                     ? "bg-action-outline-negative-faded"
                                     : "bg-action-outline-primary-faded"), style: {
                                     animation: "var(--animate-checkbox-ripple)",
@@ -2200,7 +2200,7 @@ const Tooltip = React__namespace.forwardRef(({ children, heading, description, p
 });
 Tooltip.displayName = "Tooltip";
 
-const FormHeader = React__namespace.forwardRef(({ label, size = "medium", isOptional = false, isRequired = false, infoHeading, infoDescription, linkText, linkHref, onLinkClick, htmlFor, className, labelClassName, linkClassName, }, ref) => {
+const FormHeader = React__namespace.forwardRef(({ label, size = "medium", isOptional = false, isRequired = false, infoHeading, infoDescription, linkText, linkHref, onLinkClick, linkLeadingIcon, linkTrailingIcon, htmlFor, className, labelClassName, linkClassName, }, ref) => {
     // Size-based configurations
     const sizeConfig = {
         small: {
@@ -2223,7 +2223,7 @@ const FormHeader = React__namespace.forwardRef(({ label, size = "medium", isOpti
         },
     };
     const config = sizeConfig[size];
-    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [jsxRuntime.jsxs("div", { className: cn("flex items-center", config.gap), children: [jsxRuntime.jsxs("label", { htmlFor: htmlFor, className: cn("flex items-center", labelClassName), children: [jsxRuntime.jsx("span", { className: cn(config.textClassName, "text-surface-neutral-subtle"), children: label }), isRequired && (jsxRuntime.jsx("span", { className: cn(config.textClassName, "text-color-negative ml-0.5"), children: "*" })), isOptional && (jsxRuntime.jsx("span", { className: cn(config.textClassNameRegular, "text-surface-neutral-muted italic ml-1"), children: "(optional)" }))] }), infoDescription && (jsxRuntime.jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsxRuntime.jsx(Icon, { name: "info", size: config.iconSize }) }))] }), linkText && (jsxRuntime.jsx(Link, { href: linkHref, onClick: onLinkClick, type: "action", color: "primary", size: size === "large" ? "small" : "xsmall", children: linkText }))] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [jsxRuntime.jsxs("div", { className: cn("flex items-center", config.gap), children: [jsxRuntime.jsxs("label", { htmlFor: htmlFor, className: cn("flex items-center", labelClassName), children: [jsxRuntime.jsx("span", { className: cn(config.textClassName, "text-surface-neutral-subtle"), children: label }), isRequired && (jsxRuntime.jsx("span", { className: cn(config.textClassName, "text-color-negative ml-0.5"), children: "*" })), isOptional && (jsxRuntime.jsx("span", { className: cn(config.textClassNameRegular, "text-surface-neutral-muted italic ml-1"), children: "(optional)" }))] }), infoDescription && (jsxRuntime.jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsxRuntime.jsx(Icon, { name: "info", size: config.iconSize }) }))] }), linkText && (jsxRuntime.jsx(Link, { href: linkHref, onClick: onLinkClick, type: "action", color: "primary", size: size === "large" ? "small" : "xsmall", leadingIcon: linkLeadingIcon, trailingIcon: linkTrailingIcon, children: linkText }))] }));
 });
 FormHeader.displayName = "FormHeader";