@bosonprotocol/react-kit 0.34.0-alpha.27 → 0.34.0-alpha.29

package/src/components/form/BaseCheckbox.tsx

@@ -12,6 +12,8 @@ export function BaseCheckbox({
   text,
   theme,
   hideError,
+  className,
+  iconProps,
   ...props
 }: BaseCheckboxProps) {
   const [field, meta, helpers] = useField(name);
@@ -30,17 +32,26 @@ export function BaseCheckbox({
 
   return (
     <>
-      <CheckboxWrapper htmlFor={checkboxId} $error={errorMessage} theme={theme}>
+      <CheckboxWrapper
+        htmlFor={checkboxId}
+        $error={errorMessage}
+        theme={theme}
+        className={className}
+      >
         <input
           hidden
           id={checkboxId}
           type="checkbox"
           {...props}
           {...field}
+          onChange={(event) => {
+            field.onChange(event);
+            props.onChange?.(event);
+          }}
           checked={field.value}
         />
         <div>
-          <Check size={16} />
+          <Check size={16} width="100%" height="100%" {...iconProps} />
         </div>
         <b>{text}</b>
       </CheckboxWrapper>

package/src/components/form/Field.styles.ts

@@ -189,7 +189,6 @@ export const FileUploadWrapper = styled.div<{
     cursor: not-allowed;
     opacity: 0.5;
   }
-  ${({ theme: { overrides } }) => overrides}
 `;
 
 export const FieldFileUpload = styled(FieldInput)`
@@ -371,6 +370,7 @@ export const CheckboxWrapper = styled.label<{
   align-items: center;
   justify-content: flex-start;
   cursor: pointer;
+  gap: 0.5rem;
 
   > input {
     &:disabled {
@@ -427,7 +427,6 @@ export const CheckboxWrapper = styled.label<{
       css`
         border-radius: ${theme?.borderRadius};
       `};
-    margin-right: 0.5rem;
   }
 
   > input {

package/src/components/form/Upload/BaseUpload.tsx

@@ -320,7 +320,7 @@ function BaseUpload({
             data-disabled={disabled}
             onClick={handleChooseFile}
             $error={errorMessage}
-            style={style}
+            style={{ ...style, ...theme?.overrides }}
             theme={theme?.triggerTheme}
           >
             {isLoading ? (

package/src/components/form/types.ts

@@ -14,6 +14,7 @@ import type {
 } from "./Field.styles";
 import type { GridProps } from "../ui/Grid";
 import { StateManagerProps } from "react-select/dist/declarations/src/useStateManager";
+import { IconProps } from "phosphor-react";
 
 export interface BaseProps {
   name: string;
@@ -29,10 +30,17 @@ export interface DatepickerProps extends BaseProps {
   setIsFormValid?: (isValid: boolean) => void;
 }
 
-export interface CheckboxProps extends BaseProps {
-  text?: string;
-  theme?: CheckboxTheme;
-}
+export type CheckboxProps = BaseProps &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked"> & {
+    text?: string;
+    className?: string;
+    theme?: CheckboxTheme;
+    iconProps?: Parameters<
+      React.ForwardRefExoticComponent<
+        IconProps & React.RefAttributes<SVGSVGElement>
+      >
+    >[0];
+  };
 
 export type TextareaProps = BaseProps &
   React.TextareaHTMLAttributes<HTMLTextAreaElement> & { theme?: TextAreaTheme };

package/src/components/ui/styles.ts

@@ -5,6 +5,14 @@ export const transition = css`
   transition: all 150ms ease-in-out;
 `;
 
+export const buttonText = css`
+  letter-spacing: 0.5px;
+  font-style: normal;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 24px;
+`;
+
 export const button = css`
   box-sizing: border-box;
   cursor: pointer;
@@ -18,7 +26,7 @@ export const button = css`
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 0px #000000;
-
+  ${buttonText}
   ${transition}
   svg {
     ${transition}
@@ -47,51 +55,34 @@ export const text = css`
   line-height: 24px;
 `;
 
-export const buttonText = css`
-  letter-spacing: 0.5px;
-  font-style: normal;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 24px;
-`;
-
 export const small = css`
   min-height: 2.125rem;
   padding: 0.5rem 1rem;
-  > * {
-    font-size: 0.75rem !important;
-  }
-  #buttonText {
+  * {
     font-size: 0.75rem;
   }
 `;
 export const regular = css`
   min-height: 2.813rem;
   padding: 0.75rem 1.5rem;
-  > * {
-    font-size: 1rem !important;
+  * {
+    font-size: 1rem;
   }
   ${breakpoint.xxs} {
-    > * {
-      font-size: 0.875rem !important;
+    * {
+      font-size: 0.875rem;
     }
   }
-  #buttonText {
-    font-size: 0.875rem;
-  }
 `;
 export const large = css`
   min-height: 3.5rem;
   padding: 1rem 2rem;
-  > * {
-    font-size: 1.125rem !important;
+  * {
+    font-size: 1.125rem;
   }
   ${breakpoint.xxs} {
-    > * {
-      font-size: 1rem !important;
+    * {
+      font-size: 1rem;
     }
   }
-  #buttonText {
-    font-size: 1rem;
-  }
 `;