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

package/dist/esm/components/productCard/ProductCard.styles.d.ts

@@ -13,26 +13,26 @@ export declare const ProductCardTitle: import("styled-components").IStyledCompon
     fontWeight?: import("csstype").Property.FontWeight | undefined;
     letterSpacing?: import("csstype").Property.LetterSpacing<number | (string & {})> | undefined;
     opacity?: import("csstype").Property.Opacity | undefined;
+    flex?: import("csstype").Property.Flex<number | (string & {})> | undefined;
+    padding?: import("csstype").Property.Padding<number | (string & {})> | undefined;
+    background?: import("csstype").Property.Background<number | (string & {})> | undefined;
+    gap?: import("csstype").Property.Gap<number | (string & {})> | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
+    columnGap?: import("csstype").Property.ColumnGap<number | (string & {})> | undefined;
     flexBasis?: import("csstype").Property.FlexBasis<number | (string & {})> | undefined;
     flexDirection?: import("csstype").Property.FlexDirection | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
     flexShrink?: import("csstype").Property.FlexShrink | undefined;
-    justifyContent?: import("csstype").Property.JustifyContent | undefined;
     flexWrap?: import("csstype").Property.FlexWrap | undefined;
-    rowGap?: import("csstype").Property.RowGap<number | (string & {})> | undefined;
-    columnGap?: import("csstype").Property.ColumnGap<number | (string & {})> | undefined;
-    gap?: import("csstype").Property.Gap<number | (string & {})> | undefined;
-    flex?: import("csstype").Property.Flex<number | (string & {})> | undefined;
-    padding?: import("csstype").Property.Padding<number | (string & {})> | undefined;
-    margin?: import("csstype").Property.Margin<number | (string & {})> | undefined;
-    marginTop?: import("csstype").Property.MarginTop<number | (string & {})> | undefined;
-    marginRight?: import("csstype").Property.MarginRight<number | (string & {})> | undefined;
+    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    lineHeight?: import("csstype").Property.LineHeight<number | (string & {})> | undefined;
     marginBottom?: import("csstype").Property.MarginBottom<number | (string & {})> | undefined;
     marginLeft?: import("csstype").Property.MarginLeft<number | (string & {})> | undefined;
-    lineHeight?: import("csstype").Property.LineHeight<number | (string & {})> | undefined;
-    background?: import("csstype").Property.Background<number | (string & {})> | undefined;
+    marginRight?: import("csstype").Property.MarginRight<number | (string & {})> | undefined;
+    marginTop?: import("csstype").Property.MarginTop<number | (string & {})> | undefined;
+    rowGap?: import("csstype").Property.RowGap<number | (string & {})> | undefined;
     textAlign?: import("csstype").Property.TextAlign | undefined;
+    margin?: import("csstype").Property.Margin<number | (string & {})> | undefined;
 } & import("react").HTMLAttributes<unknown> & {
     children?: import("react").ReactNode;
     tag?: keyof JSX.IntrinsicElements | undefined;
@@ -48,26 +48,26 @@ export declare const ProductCardTitle: import("styled-components").IStyledCompon
     fontWeight?: import("csstype").Property.FontWeight | undefined;
     letterSpacing?: import("csstype").Property.LetterSpacing<number | (string & {})> | undefined;
     opacity?: import("csstype").Property.Opacity | undefined;
+    flex?: import("csstype").Property.Flex<number | (string & {})> | undefined;
+    padding?: import("csstype").Property.Padding<number | (string & {})> | undefined;
+    background?: import("csstype").Property.Background<number | (string & {})> | undefined;
+    gap?: import("csstype").Property.Gap<number | (string & {})> | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
+    columnGap?: import("csstype").Property.ColumnGap<number | (string & {})> | undefined;
     flexBasis?: import("csstype").Property.FlexBasis<number | (string & {})> | undefined;
     flexDirection?: import("csstype").Property.FlexDirection | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
     flexShrink?: import("csstype").Property.FlexShrink | undefined;
-    justifyContent?: import("csstype").Property.JustifyContent | undefined;
     flexWrap?: import("csstype").Property.FlexWrap | undefined;
-    rowGap?: import("csstype").Property.RowGap<number | (string & {})> | undefined;
-    columnGap?: import("csstype").Property.ColumnGap<number | (string & {})> | undefined;
-    gap?: import("csstype").Property.Gap<number | (string & {})> | undefined;
-    flex?: import("csstype").Property.Flex<number | (string & {})> | undefined;
-    padding?: import("csstype").Property.Padding<number | (string & {})> | undefined;
-    margin?: import("csstype").Property.Margin<number | (string & {})> | undefined;
-    marginTop?: import("csstype").Property.MarginTop<number | (string & {})> | undefined;
-    marginRight?: import("csstype").Property.MarginRight<number | (string & {})> | undefined;
+    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    lineHeight?: import("csstype").Property.LineHeight<number | (string & {})> | undefined;
     marginBottom?: import("csstype").Property.MarginBottom<number | (string & {})> | undefined;
     marginLeft?: import("csstype").Property.MarginLeft<number | (string & {})> | undefined;
-    lineHeight?: import("csstype").Property.LineHeight<number | (string & {})> | undefined;
-    background?: import("csstype").Property.Background<number | (string & {})> | undefined;
+    marginRight?: import("csstype").Property.MarginRight<number | (string & {})> | undefined;
+    marginTop?: import("csstype").Property.MarginTop<number | (string & {})> | undefined;
+    rowGap?: import("csstype").Property.RowGap<number | (string & {})> | undefined;
     textAlign?: import("csstype").Property.TextAlign | undefined;
+    margin?: import("csstype").Property.Margin<number | (string & {})> | undefined;
 } & import("react").HTMLAttributes<unknown> & {
     children?: import("react").ReactNode;
     tag?: keyof JSX.IntrinsicElements | undefined;
@@ -83,26 +83,26 @@ export declare const ProductCardTitle: import("styled-components").IStyledCompon
     fontWeight?: import("csstype").Property.FontWeight | undefined;
     letterSpacing?: import("csstype").Property.LetterSpacing<number | (string & {})> | undefined;
     opacity?: import("csstype").Property.Opacity | undefined;
+    flex?: import("csstype").Property.Flex<number | (string & {})> | undefined;
+    padding?: import("csstype").Property.Padding<number | (string & {})> | undefined;
+    background?: import("csstype").Property.Background<number | (string & {})> | undefined;
+    gap?: import("csstype").Property.Gap<number | (string & {})> | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
+    columnGap?: import("csstype").Property.ColumnGap<number | (string & {})> | undefined;
     flexBasis?: import("csstype").Property.FlexBasis<number | (string & {})> | undefined;
     flexDirection?: import("csstype").Property.FlexDirection | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
     flexShrink?: import("csstype").Property.FlexShrink | undefined;
-    justifyContent?: import("csstype").Property.JustifyContent | undefined;
     flexWrap?: import("csstype").Property.FlexWrap | undefined;
-    rowGap?: import("csstype").Property.RowGap<number | (string & {})> | undefined;
-    columnGap?: import("csstype").Property.ColumnGap<number | (string & {})> | undefined;
-    gap?: import("csstype").Property.Gap<number | (string & {})> | undefined;
-    flex?: import("csstype").Property.Flex<number | (string & {})> | undefined;
-    padding?: import("csstype").Property.Padding<number | (string & {})> | undefined;
-    margin?: import("csstype").Property.Margin<number | (string & {})> | undefined;
-    marginTop?: import("csstype").Property.MarginTop<number | (string & {})> | undefined;
-    marginRight?: import("csstype").Property.MarginRight<number | (string & {})> | undefined;
+    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    lineHeight?: import("csstype").Property.LineHeight<number | (string & {})> | undefined;
     marginBottom?: import("csstype").Property.MarginBottom<number | (string & {})> | undefined;
     marginLeft?: import("csstype").Property.MarginLeft<number | (string & {})> | undefined;
-    lineHeight?: import("csstype").Property.LineHeight<number | (string & {})> | undefined;
-    background?: import("csstype").Property.Background<number | (string & {})> | undefined;
+    marginRight?: import("csstype").Property.MarginRight<number | (string & {})> | undefined;
+    marginTop?: import("csstype").Property.MarginTop<number | (string & {})> | undefined;
+    rowGap?: import("csstype").Property.RowGap<number | (string & {})> | undefined;
     textAlign?: import("csstype").Property.TextAlign | undefined;
+    margin?: import("csstype").Property.Margin<number | (string & {})> | undefined;
 } & import("react").HTMLAttributes<unknown> & {
     children?: import("react").ReactNode;
     tag?: keyof JSX.IntrinsicElements | undefined;

package/dist/esm/components/ui/ThemedButton.d.ts

@@ -219,7 +219,7 @@ declare const ThemedButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttr
     children?: string | React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     size?: "regular" | "small" | "large" | ButtonSize | undefined;
-    themeVal?: "warning" | "outline" | "black" | "orange" | "white" | "primary" | "bosonPrimary" | "secondary" | "bosonSecondary" | "secondaryInverted" | "accentInvertedNoBorder" | "accentInverted" | "orangeInverse" | "bosonSecondaryInverse" | "ghostSecondary" | "blank" | "blankSecondary" | "blankSecondaryOutline" | "blankOutline" | "escalate" | "accentFill" | undefined;
+    themeVal?: "warning" | "black" | "orange" | "white" | "primary" | "bosonPrimary" | "secondary" | "bosonSecondary" | "secondaryInverted" | "accentInvertedNoBorder" | "accentInverted" | "orangeInverse" | "bosonSecondaryInverse" | "outline" | "ghostSecondary" | "blank" | "blankSecondary" | "blankSecondaryOutline" | "blankOutline" | "escalate" | "accentFill" | undefined;
     type?: "button" | "submit" | "reset" | undefined;
     fill?: boolean | undefined;
     step?: number | undefined;

package/dist/esm/components/ui/column/index.d.ts

@@ -11,7 +11,7 @@ export declare const ColumnCenter: import("styled-components").IStyledComponent<
 }>>, keyof import("react").Component<any, {}, any>>;
 export declare const AutoColumn: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $gap?: string | undefined;
-    $justify?: "start" | "end" | "center" | "flex-end" | "flex-start" | "stretch" | "space-between" | undefined;
+    $justify?: "start" | "end" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
     $grow?: true | undefined;
 }>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/styles.d.ts

@@ -1,9 +1,9 @@
 export declare const transition: import("styled-components").RuleSet<object>;
+export declare const buttonText: import("styled-components").RuleSet<object>;
 export declare const button: import("styled-components").RuleSet<object>;
 export declare const clamp: import("styled-components").RuleSet<object>;
 export declare const boxShadow: import("styled-components").RuleSet<object>;
 export declare const text: import("styled-components").RuleSet<object>;
-export declare const buttonText: import("styled-components").RuleSet<object>;
 export declare const small: import("styled-components").RuleSet<object>;
 export declare const regular: import("styled-components").RuleSet<object>;
 export declare const large: import("styled-components").RuleSet<object>;

package/dist/esm/components/ui/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,6CAEtB,CAAC;AAEF,eAAO,MAAM,MAAM,6CAkBlB,CAAC;AACF,eAAO,MAAM,KAAK,6CAOjB,CAAC;AACF,eAAO,MAAM,SAAS,6CAMrB,CAAC;AAEF,eAAO,MAAM,IAAI,6CAKhB,CAAC;AAEF,eAAO,MAAM,UAAU,6CAMtB,CAAC;AAEF,eAAO,MAAM,KAAK,6CASjB,CAAC;AACF,eAAO,MAAM,OAAO,6CAcnB,CAAC;AACF,eAAO,MAAM,KAAK,6CAcjB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,6CAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,6CAMtB,CAAC;AAEF,eAAO,MAAM,MAAM,6CAkBlB,CAAC;AACF,eAAO,MAAM,KAAK,6CAOjB,CAAC;AACF,eAAO,MAAM,SAAS,6CAMrB,CAAC;AAEF,eAAO,MAAM,IAAI,6CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,6CAMjB,CAAC;AACF,eAAO,MAAM,OAAO,6CAWnB,CAAC;AACF,eAAO,MAAM,KAAK,6CAWjB,CAAC"}

package/dist/esm/components/ui/styles.js

@@ -3,6 +3,13 @@ import { breakpoint } from "../../lib/ui/breakpoint";
 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;
@@ -16,7 +23,7 @@ export const button = css `
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 0px #000000;
-
+  ${buttonText}
   ${transition}
   svg {
     ${transition}
@@ -43,51 +50,35 @@ export const text = css `
   font-size: 0.875rem;
   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;
-  }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/components/ui/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/ui/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;CAE5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;IAcrB,UAAU;;MAER,UAAU;;CAEf,CAAC;AACF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;CAOvB,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;CAM3B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;CAKtB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;CAM5B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;CASvB,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAA;;;;;;IAMtB,UAAU,CAAC,GAAG;;;;;;;;CAQjB,CAAC;AACF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;IAMpB,UAAU,CAAC,GAAG;;;;;;;;CAQjB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/ui/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;CAE5B,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;CAM5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;IAarB,UAAU;IACV,UAAU;;MAER,UAAU;;CAEf,CAAC;AACF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;CAOvB,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;CAM3B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;CAKtB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;CAMvB,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAA;;;;;;IAMtB,UAAU,CAAC,GAAG;;;;;CAKjB,CAAC;AACF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;IAMpB,UAAU,CAAC,GAAG;;;;;CAKjB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.34.0-alpha.28",
+  "version": "0.34.0-alpha.29",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,9 +15,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.41.0-alpha.30",
-    "@bosonprotocol/ethers-sdk": "^1.15.0-alpha.16",
-    "@bosonprotocol/ipfs-storage": "^1.12.0-alpha.28",
+    "@bosonprotocol/core-sdk": "^1.41.0-alpha.31",
+    "@bosonprotocol/ethers-sdk": "^1.15.0-alpha.17",
+    "@bosonprotocol/ipfs-storage": "^1.12.0-alpha.29",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
     "@glidejs/glide": "3.6.0",
@@ -188,5 +188,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "123558ec1030fdcf978eb83fead111943417d189"
+  "gitHead": "e5b74ec91225b29bd63df9c979b7d4964aa00b55"
 }

package/src/components/buttons/BaseButton.tsx

@@ -6,10 +6,8 @@ import React, {
 } from "react";
 import styled, { css, CSSProperties } from "styled-components";
 
-import { zIndex } from "../ui/zIndex";
 import { Tooltip } from "../tooltip/Tooltip";
 import * as Styles from "../ui/styles";
-import { Typography } from "../ui/Typography";
 import { theme } from "../../theme";
 import { Loading } from "../ui/loading/Loading";
 import { ButtonSize } from "../ui/buttonSize";
@@ -98,17 +96,6 @@ const ButtonWithThemeProps = styled.button<
         `};
 `;
 
-const ChildWrapperButton = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${(props) => props.theme?.gap || "12px"};
-  position: relative;
-  z-index: ${zIndex.Button};
-
-  ${() => Styles.buttonText};
-`;
-
 export type BaseButtonTheme = {
   background?: CSSProperties["backgroundColor"];
   borderColor?: CSSProperties["borderColor"];
@@ -136,7 +123,6 @@ export type BaseButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   size?: ButtonSizeProp;
   theme: BaseButtonTheme;
   fill?: boolean;
-  step?: number;
   isLoading?: boolean;
   tooltip?: string;
 };
@@ -149,7 +135,6 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
       size = "regular",
       theme,
       type = "button",
-      step = 0,
       fill = false,
       isLoading = false,
       tooltip = "",
@@ -182,18 +167,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
             {...rest}
             ref={ref}
           >
-            {isLoading ? (
-              <Loading />
-            ) : (
-              <ChildWrapperButton data-child-wrapper-button theme={theme}>
-                {children}
-                {step !== 0 && (
-                  <Typography>
-                    <small>Step {step}</small>
-                  </Typography>
-                )}
-              </ChildWrapperButton>
-            )}
+            {isLoading ? <Loading /> : children}
           </ButtonWithThemeProps>
         </Wrapper>
       </>

package/src/components/cta/common/CtaButton.tsx

@@ -29,7 +29,7 @@ export function CtaButton<T>({
   successPayload,
   waitBlocks = 1,
   children,
-  size = ButtonSize.Large,
+  size = ButtonSize.Medium,
   variant = "secondaryFill",
   buttonRef,
   coreSdkConfig,

package/src/components/cta/common/styles.ts

@@ -1,14 +1,16 @@
 import styled from "styled-components";
 
 export const ExtraInfo = styled.span`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 0.75rem;
-  line-height: 150%;
-  opacity: 0.5;
+  &&& {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 0.75rem;
+    line-height: 150%;
+    opacity: 0.5;
+  }
 `;
 
 export const ButtonTextWrapper = styled.div`

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

@@ -370,6 +370,7 @@ export const CheckboxWrapper = styled.label<{
   align-items: center;
   justify-content: flex-start;
   cursor: pointer;
+  gap: 0.5rem;
 
   > input {
     &:disabled {
@@ -426,7 +427,6 @@ export const CheckboxWrapper = styled.label<{
       css`
         border-radius: ${theme?.borderRadius};
       `};
-    margin-right: 0.5rem;
   }
 
   > input {

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;
-  }
 `;