@spies-ui/react 1.0.8 → 1.0.10

package/dist/index.d.mts

@@ -885,6 +885,7 @@ declare const AvatarImage: _stitches_react_types_styled_component.StyledComponen
 
 interface AvatarProps extends ComponentProps<typeof AvatarImage> {
     size: 'default' | 'large';
+    border: 'none' | 'default' | 'primary' | 'success' | 'danger' | 'warning';
 }
 declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
 declare namespace Avatar {
@@ -1333,6 +1334,10 @@ interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'size'> {
     hint?: string;
     required?: boolean;
     size?: 'default' | 'small';
+    labelProps?: Omit<TextProps, 'children'>;
+    errorProps?: Omit<TextProps, 'children'>;
+    hintProps?: Omit<TextProps, 'children'>;
+    requiredAsteriskProps?: Omit<TextProps, 'children'>;
 }
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
@@ -1557,11 +1562,16 @@ interface TextAreaProps extends ComponentProps<typeof TextAreaInput> {
     error?: string;
     hint?: string;
     required?: boolean;
+    labelProps?: Omit<TextProps, 'children'>;
+    errorProps?: Omit<TextProps, 'children'>;
+    hintProps?: Omit<TextProps, 'children'>;
+    requiredAsteriskProps?: Omit<TextProps, 'children'>;
 }
 declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
 
 declare const CheckboxContainer: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<Checkbox$1.CheckboxProps & react.RefAttributes<HTMLButtonElement>>, {
     errored?: boolean | "true" | undefined;
+    radius?: "xs" | "sm" | "md" | "lg" | "px" | "full" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         black: string;
@@ -1781,8 +1791,12 @@ interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
     error?: string;
     hint?: string;
     required?: boolean;
+    labelProps?: Omit<ComponentProps<typeof Text>, 'children'>;
+    errorProps?: Omit<ComponentProps<typeof Text>, 'children'>;
+    hintProps?: Omit<ComponentProps<typeof Text>, 'children'>;
+    requiredAsteriskProps?: Omit<ComponentProps<typeof Text>, 'children'>;
 }
-declare function Checkbox({ label, error, hint, required, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -885,6 +885,7 @@ declare const AvatarImage: _stitches_react_types_styled_component.StyledComponen
 
 interface AvatarProps extends ComponentProps<typeof AvatarImage> {
     size: 'default' | 'large';
+    border: 'none' | 'default' | 'primary' | 'success' | 'danger' | 'warning';
 }
 declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
 declare namespace Avatar {
@@ -1333,6 +1334,10 @@ interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'size'> {
     hint?: string;
     required?: boolean;
     size?: 'default' | 'small';
+    labelProps?: Omit<TextProps, 'children'>;
+    errorProps?: Omit<TextProps, 'children'>;
+    hintProps?: Omit<TextProps, 'children'>;
+    requiredAsteriskProps?: Omit<TextProps, 'children'>;
 }
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
@@ -1557,11 +1562,16 @@ interface TextAreaProps extends ComponentProps<typeof TextAreaInput> {
     error?: string;
     hint?: string;
     required?: boolean;
+    labelProps?: Omit<TextProps, 'children'>;
+    errorProps?: Omit<TextProps, 'children'>;
+    hintProps?: Omit<TextProps, 'children'>;
+    requiredAsteriskProps?: Omit<TextProps, 'children'>;
 }
 declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
 
 declare const CheckboxContainer: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<Checkbox$1.CheckboxProps & react.RefAttributes<HTMLButtonElement>>, {
     errored?: boolean | "true" | undefined;
+    radius?: "xs" | "sm" | "md" | "lg" | "px" | "full" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         black: string;
@@ -1781,8 +1791,12 @@ interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
     error?: string;
     hint?: string;
     required?: boolean;
+    labelProps?: Omit<ComponentProps<typeof Text>, 'children'>;
+    errorProps?: Omit<ComponentProps<typeof Text>, 'children'>;
+    hintProps?: Omit<ComponentProps<typeof Text>, 'children'>;
+    requiredAsteriskProps?: Omit<ComponentProps<typeof Text>, 'children'>;
 }
-declare function Checkbox({ label, error, hint, required, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }

package/dist/index.js

@@ -358,16 +358,41 @@ var AvatarContainer = styled(Avatar.Root, {
         width: "$20",
         height: "$20"
       }
+    },
+    border: {
+      none: {
+        border: "0"
+      },
+      default: {
+        border: "2px solid $smokedWhite"
+      },
+      primary: {
+        border: "2px solid $primary"
+      },
+      primaryLight: {
+        border: "2px solid $primaryLight"
+      },
+      success: {
+        border: "2px solid $success"
+      },
+      danger: {
+        border: "2px solid $danger"
+      },
+      warning: {
+        border: "2px solid $warning"
+      }
     }
   },
   defaultVariants: {
-    size: "default"
+    size: "default",
+    border: "none"
   }
 });
 var AvatarImage = styled(Avatar.Image, {
   width: "100%",
   height: "100%",
-  objectFix: "cover",
+  objectFit: "cover",
+  objectPosition: "center",
   borderRadius: "inherit"
 });
 var AvatarFallback = styled(Avatar.Fallback, {
@@ -388,7 +413,7 @@ var AvatarFallback = styled(Avatar.Fallback, {
 var import_phosphor_react = require("phosphor-react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Avatar2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarContainer, { size: props.size, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarContainer, { size: props.size, border: props.border, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarImage, __spreadValues({}, props)),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.User, {}) })
   ] });
@@ -558,17 +583,21 @@ function InputBox({
   error,
   hint,
   required,
-  children
+  children,
+  labelProps,
+  errorProps,
+  hintProps,
+  requiredAsteriskProps
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(InputContainer, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-      !!label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { as: "span", size: "sm", children: label }),
-      required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { as: "span", size: "sm", variant: "danger", children: "\xA0*" })
+      !!label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, __spreadProps(__spreadValues({ as: "span", size: "sm" }, labelProps), { children: label })),
+      required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, __spreadProps(__spreadValues({ as: "span", size: "sm", variant: "danger" }, requiredAsteriskProps), { children: "\xA0*" }))
     ] }),
     children,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(TextBox, { children: [
-      !!error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "xs", variant: "danger", children: error }),
-      !error && hint && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "xs", variant: "gray200", children: hint })
+      !!error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, __spreadProps(__spreadValues({ size: "xs", variant: "danger" }, errorProps), { children: error })),
+      !error && hint && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, __spreadProps(__spreadValues({ size: "xs", variant: "gray200" }, hintProps), { children: hint }))
     ] })
   ] });
 }
@@ -578,8 +607,8 @@ InputBox.displayName = "InputBox";
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var TextInput = (0, import_react2.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { label, prefix, error, hint, required, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputBox, { label, error, hint, required, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TextInputContainer, { errored: !!error, size, children: [
+    var _b = _a, { label, prefix, error, hint, required, size, labelProps, errorProps, hintProps, requiredAsteriskProps } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size", "labelProps", "errorProps", "hintProps", "requiredAsteriskProps"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputBox, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TextInputContainer, { errored: !!error, size, children: [
       !!prefix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Prefix, { children: prefix }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadValues({ ref }, props))
     ] }) });
@@ -629,8 +658,8 @@ var TextAreaInput = styled("textarea", {
 // src/components/TextArea/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var TextArea = (0, import_react3.forwardRef)((_a, ref) => {
-  var _b = _a, { label, error, hint, required } = _b, props = __objRest(_b, ["label", "error", "hint", "required"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputBox, { label, error, hint, required, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
+  var _b = _a, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps } = _b, props = __objRest(_b, ["label", "error", "hint", "required", "labelProps", "errorProps", "hintProps", "requiredAsteriskProps"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputBox, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
 });
 TextArea.displayName = "TextArea";
 
@@ -647,12 +676,38 @@ var CheckboxBox = styled("div", {
     opacity: 0.5
   }
 });
+var slideIn = keyframes({
+  from: {
+    transform: "translateX(-100%)"
+  },
+  to: {
+    transform: "translateX(0)"
+  }
+});
+var slideOut = keyframes({
+  from: {
+    transform: "translateX(0)"
+  },
+  to: {
+    transform: "translateX(100%)"
+  }
+});
+var CheckboxIndicator = styled(Checkbox.Indicator, {
+  color: "$smokedWhite",
+  width: "$4",
+  height: "$4",
+  '&[data-state="checked"]': {
+    animation: `${slideIn} 100ms ease-out`
+  },
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut} 100ms ease-out`
+  }
+});
 var CheckboxContainer = styled(Checkbox.Root, {
   all: "unset",
   width: "$6",
   height: "$6",
   backgroundColor: "$gray900",
-  borderRadius: "$xs",
   lineHeight: 0,
   cursor: "pointer",
   overflow: "hidden",
@@ -676,37 +731,28 @@ var CheckboxContainer = styled(Checkbox.Root, {
       true: {
         borderColor: "$danger"
       }
+    },
+    radius: {
+      px: { borderRadius: "$px" },
+      xs: { borderRadius: "$xs" },
+      sm: { borderRadius: "$sm" },
+      md: {
+        borderRadius: "$md",
+        [`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
+      },
+      lg: {
+        borderRadius: "$lg",
+        [`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
+      },
+      full: {
+        borderRadius: "$full",
+        [`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
+      }
     }
   },
   defaultVariants: {
-    errored: false
-  }
-});
-var slideIn = keyframes({
-  from: {
-    transform: "translateX(-100%)"
-  },
-  to: {
-    transform: "translateX(0)"
-  }
-});
-var slideOut = keyframes({
-  from: {
-    transform: "translateX(0)"
-  },
-  to: {
-    transform: "translateX(100%)"
-  }
-});
-var CheckboxIndicator = styled(Checkbox.Indicator, {
-  color: "$smokedWhite",
-  width: "$4",
-  height: "$4",
-  '&[data-state="checked"]': {
-    animation: `${slideIn} 100ms ease-out`
-  },
-  '&[data-state="unchecked"]': {
-    animation: `${slideOut} 100ms ease-out`
+    errored: false,
+    radius: "md"
   }
 });
 
@@ -717,18 +763,26 @@ function Checkbox2(_a) {
     label,
     error,
     hint,
-    required
+    required,
+    labelProps,
+    errorProps,
+    hintProps,
+    requiredAsteriskProps
   } = _b, props = __objRest(_b, [
     "label",
     "error",
     "hint",
-    "required"
+    "required",
+    "labelProps",
+    "errorProps",
+    "hintProps",
+    "requiredAsteriskProps"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputBox, { error, hint, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CheckboxBox, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputBox, { error, hint, errorProps, hintProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CheckboxBox, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxContainer, __spreadProps(__spreadValues({}, props), { errored: !!error, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.Check, { weight: "bold" }) }) })),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { as: "span", size: "sm", children: label }),
-      required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { as: "span", size: "sm", variant: "danger", children: "*" })
+      !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, __spreadProps(__spreadValues({ as: "span", size: "sm" }, labelProps), { children: label })),
+      required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, __spreadProps(__spreadValues({ as: "span", size: "sm", variant: "danger" }, requiredAsteriskProps), { children: "*" }))
     ] })
   ] }) });
 }

package/dist/index.mjs

@@ -329,16 +329,41 @@ var AvatarContainer = styled(Avatar.Root, {
         width: "$20",
         height: "$20"
       }
+    },
+    border: {
+      none: {
+        border: "0"
+      },
+      default: {
+        border: "2px solid $smokedWhite"
+      },
+      primary: {
+        border: "2px solid $primary"
+      },
+      primaryLight: {
+        border: "2px solid $primaryLight"
+      },
+      success: {
+        border: "2px solid $success"
+      },
+      danger: {
+        border: "2px solid $danger"
+      },
+      warning: {
+        border: "2px solid $warning"
+      }
     }
   },
   defaultVariants: {
-    size: "default"
+    size: "default",
+    border: "none"
   }
 });
 var AvatarImage = styled(Avatar.Image, {
   width: "100%",
   height: "100%",
-  objectFix: "cover",
+  objectFit: "cover",
+  objectPosition: "center",
   borderRadius: "inherit"
 });
 var AvatarFallback = styled(Avatar.Fallback, {
@@ -359,7 +384,7 @@ var AvatarFallback = styled(Avatar.Fallback, {
 import { User } from "phosphor-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Avatar2(props) {
-  return /* @__PURE__ */ jsxs(AvatarContainer, { size: props.size, children: [
+  return /* @__PURE__ */ jsxs(AvatarContainer, { size: props.size, border: props.border, children: [
     /* @__PURE__ */ jsx(AvatarImage, __spreadValues({}, props)),
     /* @__PURE__ */ jsx(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ jsx(User, {}) })
   ] });
@@ -529,17 +554,21 @@ function InputBox({
   error,
   hint,
   required,
-  children
+  children,
+  labelProps,
+  errorProps,
+  hintProps,
+  requiredAsteriskProps
 }) {
   return /* @__PURE__ */ jsxs2(InputContainer, { children: [
     /* @__PURE__ */ jsxs2("div", { children: [
-      !!label && /* @__PURE__ */ jsx2(Text, { as: "span", size: "sm", children: label }),
-      required && /* @__PURE__ */ jsx2(Text, { as: "span", size: "sm", variant: "danger", children: "\xA0*" })
+      !!label && /* @__PURE__ */ jsx2(Text, __spreadProps(__spreadValues({ as: "span", size: "sm" }, labelProps), { children: label })),
+      required && /* @__PURE__ */ jsx2(Text, __spreadProps(__spreadValues({ as: "span", size: "sm", variant: "danger" }, requiredAsteriskProps), { children: "\xA0*" }))
     ] }),
     children,
     /* @__PURE__ */ jsxs2(TextBox, { children: [
-      !!error && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "danger", children: error }),
-      !error && hint && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "gray200", children: hint })
+      !!error && /* @__PURE__ */ jsx2(Text, __spreadProps(__spreadValues({ size: "xs", variant: "danger" }, errorProps), { children: error })),
+      !error && hint && /* @__PURE__ */ jsx2(Text, __spreadProps(__spreadValues({ size: "xs", variant: "gray200" }, hintProps), { children: hint }))
     ] })
   ] });
 }
@@ -549,8 +578,8 @@ InputBox.displayName = "InputBox";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var TextInput = forwardRef(
   (_a, ref) => {
-    var _b = _a, { label, prefix, error, hint, required, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size"]);
-    return /* @__PURE__ */ jsx3(InputBox, { label, error, hint, required, children: /* @__PURE__ */ jsxs3(TextInputContainer, { errored: !!error, size, children: [
+    var _b = _a, { label, prefix, error, hint, required, size, labelProps, errorProps, hintProps, requiredAsteriskProps } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size", "labelProps", "errorProps", "hintProps", "requiredAsteriskProps"]);
+    return /* @__PURE__ */ jsx3(InputBox, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, children: /* @__PURE__ */ jsxs3(TextInputContainer, { errored: !!error, size, children: [
       !!prefix && /* @__PURE__ */ jsx3(Prefix, { children: prefix }),
       /* @__PURE__ */ jsx3(Input, __spreadValues({ ref }, props))
     ] }) });
@@ -600,8 +629,8 @@ var TextAreaInput = styled("textarea", {
 // src/components/TextArea/index.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var TextArea = forwardRef2((_a, ref) => {
-  var _b = _a, { label, error, hint, required } = _b, props = __objRest(_b, ["label", "error", "hint", "required"]);
-  return /* @__PURE__ */ jsx4(InputBox, { label, error, hint, required, children: /* @__PURE__ */ jsx4(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
+  var _b = _a, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps } = _b, props = __objRest(_b, ["label", "error", "hint", "required", "labelProps", "errorProps", "hintProps", "requiredAsteriskProps"]);
+  return /* @__PURE__ */ jsx4(InputBox, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, children: /* @__PURE__ */ jsx4(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
 });
 TextArea.displayName = "TextArea";
 
@@ -618,12 +647,38 @@ var CheckboxBox = styled("div", {
     opacity: 0.5
   }
 });
+var slideIn = keyframes({
+  from: {
+    transform: "translateX(-100%)"
+  },
+  to: {
+    transform: "translateX(0)"
+  }
+});
+var slideOut = keyframes({
+  from: {
+    transform: "translateX(0)"
+  },
+  to: {
+    transform: "translateX(100%)"
+  }
+});
+var CheckboxIndicator = styled(Checkbox.Indicator, {
+  color: "$smokedWhite",
+  width: "$4",
+  height: "$4",
+  '&[data-state="checked"]': {
+    animation: `${slideIn} 100ms ease-out`
+  },
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut} 100ms ease-out`
+  }
+});
 var CheckboxContainer = styled(Checkbox.Root, {
   all: "unset",
   width: "$6",
   height: "$6",
   backgroundColor: "$gray900",
-  borderRadius: "$xs",
   lineHeight: 0,
   cursor: "pointer",
   overflow: "hidden",
@@ -647,37 +702,28 @@ var CheckboxContainer = styled(Checkbox.Root, {
       true: {
         borderColor: "$danger"
       }
+    },
+    radius: {
+      px: { borderRadius: "$px" },
+      xs: { borderRadius: "$xs" },
+      sm: { borderRadius: "$sm" },
+      md: {
+        borderRadius: "$md",
+        [`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
+      },
+      lg: {
+        borderRadius: "$lg",
+        [`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
+      },
+      full: {
+        borderRadius: "$full",
+        [`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
+      }
     }
   },
   defaultVariants: {
-    errored: false
-  }
-});
-var slideIn = keyframes({
-  from: {
-    transform: "translateX(-100%)"
-  },
-  to: {
-    transform: "translateX(0)"
-  }
-});
-var slideOut = keyframes({
-  from: {
-    transform: "translateX(0)"
-  },
-  to: {
-    transform: "translateX(100%)"
-  }
-});
-var CheckboxIndicator = styled(Checkbox.Indicator, {
-  color: "$smokedWhite",
-  width: "$4",
-  height: "$4",
-  '&[data-state="checked"]': {
-    animation: `${slideIn} 100ms ease-out`
-  },
-  '&[data-state="unchecked"]': {
-    animation: `${slideOut} 100ms ease-out`
+    errored: false,
+    radius: "md"
   }
 });
 
@@ -688,18 +734,26 @@ function Checkbox2(_a) {
     label,
     error,
     hint,
-    required
+    required,
+    labelProps,
+    errorProps,
+    hintProps,
+    requiredAsteriskProps
   } = _b, props = __objRest(_b, [
     "label",
     "error",
     "hint",
-    "required"
+    "required",
+    "labelProps",
+    "errorProps",
+    "hintProps",
+    "requiredAsteriskProps"
   ]);
-  return /* @__PURE__ */ jsx5(InputBox, { error, hint, children: /* @__PURE__ */ jsxs4(CheckboxBox, { children: [
+  return /* @__PURE__ */ jsx5(InputBox, { error, hint, errorProps, hintProps, children: /* @__PURE__ */ jsxs4(CheckboxBox, { children: [
     /* @__PURE__ */ jsx5(CheckboxContainer, __spreadProps(__spreadValues({}, props), { errored: !!error, children: /* @__PURE__ */ jsx5(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ jsx5(Check, { weight: "bold" }) }) })),
     /* @__PURE__ */ jsxs4(Fragment, { children: [
-      !!label && /* @__PURE__ */ jsx5(Text, { as: "span", size: "sm", children: label }),
-      required && /* @__PURE__ */ jsx5(Text, { as: "span", size: "sm", variant: "danger", children: "*" })
+      !!label && /* @__PURE__ */ jsx5(Text, __spreadProps(__spreadValues({ as: "span", size: "sm" }, labelProps), { children: label })),
+      required && /* @__PURE__ */ jsx5(Text, __spreadProps(__spreadValues({ as: "span", size: "sm", variant: "danger" }, requiredAsteriskProps), { children: "*" }))
     ] })
   ] }) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spies-ui/react",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",