colibri-ui 0.7.30 → 0.7.32

package/esm/Checkbox/index.js

@@ -1,11 +1,13 @@
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-import { Control, FakeCheckbox, Text, Label } from './styles.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import Typography from '../Typography/index.js';
+import { Label, Wrapper, Control, FakeCheckbox, Text, Root } from './styles.js';
 
 var Checkbox = function Checkbox(_a) {
   var id = _a.id,
     name = _a.name,
     value = _a.value,
     label = _a.label,
+    hint = _a.hint,
     checked = _a.checked,
     onChange = _a.onChange,
     onFocus = _a.onFocus,
@@ -15,29 +17,35 @@ var Checkbox = function Checkbox(_a) {
     className = _a.className,
     disabled = _a.disabled,
     isError = _a.isError;
-  var control = jsxs(Fragment, {
-    children: [jsx(Control, {
-      className: className,
-      type: "checkbox",
-      id: id,
-      variant: variant,
-      name: name,
-      value: value,
-      checked: checked,
-      onChange: onChange,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      disabled: disabled
-    }), jsx(FakeCheckbox, {
-      variant: variant,
-      checked: checked,
-      isError: isError
-    }), jsx(Text, {
-      children: label
-    })]
+  var control = jsx(Label, {
+    children: jsxs(Wrapper, {
+      children: [jsx(Control, {
+        className: className,
+        type: "checkbox",
+        id: id,
+        variant: variant,
+        name: name,
+        value: value,
+        checked: checked,
+        onChange: onChange,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        disabled: disabled
+      }), jsx(FakeCheckbox, {
+        variant: variant,
+        checked: checked,
+        isError: isError
+      }), jsx(Text, {
+        children: label
+      })]
+    })
   });
-  return jsx(Label, {
-    children: control
+  return jsxs(Root, {
+    children: [control, hint && jsx(Typography, {
+      variant: isError ? "alert" : "secondary",
+      tag: "span",
+      children: hint
+    })]
   });
 };
 

package/esm/Checkbox/index.props.d.ts

@@ -23,6 +23,7 @@ export interface CheckboxProps {
     name?: string;
     value?: string | number;
     label?: ReactNode;
+    hint?: ReactNode;
     checked?: boolean;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;

package/esm/Checkbox/styles.d.ts

@@ -1,5 +1,13 @@
 /// <reference types="react" />
 import type { CheckboxVariant } from "./index.props";
+export declare const Root: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Label: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;