From 911cffbd6dbc1aeb15ec6f2707ecb0ec0226588a Mon Sep 17 00:00:00 2001
From: Chris <chris.frazier@searchspring.com>
Date: Mon, 1 Jul 2024 14:59:20 -0700
Subject: [PATCH] fix(checkbox): checkbox size prop now accepts both string and
 number

---
 .../components/Molecules/Checkbox/Checkbox.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.tsx b/packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.tsx
index 88bf6e2cc..f41060fef 100644
--- a/packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.tsx
+++ b/packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.tsx
@@ -13,23 +13,25 @@ import { Icon, IconProps } from '../../Atoms/Icon';
 import { useA11y } from '../../../hooks/useA11y';
 
 const CSS = {
-	checkbox: ({ size, color, theme }: CheckboxProps) =>
-		css({
+	checkbox: ({ size, color, theme }: Partial<CheckboxProps>) => {
+		const pixelSize = isNaN(Number(size)) ? size : `${size}px`;
+		return css({
 			display: 'inline-flex',
 			alignItems: 'center',
 			justifyContent: 'center',
-			height: size,
-			width: size,
+			height: pixelSize,
+			width: pixelSize,
 			border: `1px solid ${color || theme?.colors?.primary || '#333'}`,
 			'&.ss__checkbox--disabled': {
 				opacity: 0.7,
 			},
 			'& .ss__checkbox__empty': {
 				display: 'inline-block',
-				width: `calc(${size} - 30%)`,
-				height: `calc(${size} - 30%)`,
+				width: `calc(${pixelSize} - 30%)`,
+				height: `calc(${pixelSize} - 30%)`,
 			},
-		}),
+		});
+	},
 	native: () => css({}),
 };
 
@@ -140,7 +142,7 @@ export interface CheckboxProps extends ComponentProps {
 	icon?: string;
 	iconColor?: string;
 	onClick?: (e: React.MouseEvent<HTMLInputElement | HTMLSpanElement, MouseEvent>) => void;
-	size?: string;
+	size?: string | number;
 	startChecked?: boolean;
 	native?: boolean;
 	disableA11y?: boolean;