linkedunion-design-kit 1.6.1 → 1.6.2

package/dist/index.d.ts

@@ -12,4 +12,5 @@ export { default as EditorTooltip } from "./src/components/EditorTooltip/EditorT
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./src/components/ui/accordion";
 export { default as ImageUploader } from "./src/components/ui/imageUploader";
 export { Typography } from "./src/components/ui/typography";
+export { Checkbox } from "./src/components/ui/checkbox";
 export { Switch } from "./src/components/ui/switch";

package/dist/index.js

@@ -12,4 +12,5 @@ export { default as EditorTooltip } from "./src/components/EditorTooltip/EditorT
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./src/components/ui/accordion";
 export { default as ImageUploader } from "./src/components/ui/imageUploader";
 export { Typography } from "./src/components/ui/typography";
+export { Checkbox } from "./src/components/ui/checkbox";
 export { Switch } from "./src/components/ui/switch";

package/dist/src/components/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import { ButtonProps } from "./type";
-declare const Button: ({ color, startIcon, endIcon, onClick, shape, size, className, children, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ color, startIcon, endIcon, onClick, shape, size, className, children, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/src/components/Button/Button.js

@@ -1,7 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { buttonShapes, buttonSizes, buttonColors } from "./index";
 var Button = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? "primary" : _b, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, _c = _a.shape, shape = _c === void 0 ? "rounded-none" : _c, _d = _a.size, size = _d === void 0 ? "sm" : _d, className = _a.className, children = _a.children;
-    return (_jsxs("button", { className: "flex items-center ".concat(buttonShapes[shape], " ").concat(buttonColors[color], " ").concat(className, " ").concat(buttonSizes[size]), onClick: onClick, children: [startIcon && _jsxs("span", { "data-testid": "start-icon", children: [" ", startIcon, " "] }), children, endIcon && _jsxs("span", { "data-testid": "end-icon", children: [" ", endIcon, " "] })] }));
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, _c = _a.shape, shape = _c === void 0 ? "rounded-none" : _c, _d = _a.size, size = _d === void 0 ? "sm" : _d, className = _a.className, children = _a.children, rest = __rest(_a, ["color", "startIcon", "endIcon", "onClick", "shape", "size", "className", "children"]);
+    return (_jsxs("button", __assign({ className: "flex items-center ".concat(buttonShapes[shape], " ").concat(buttonColors[color], " ").concat(className || "", " ").concat(buttonSizes[size]), onClick: onClick }, rest, { children: [startIcon && _jsxs("span", { "data-testid": "start-icon", children: [" ", startIcon, " "] }), children, endIcon && _jsxs("span", { "data-testid": "end-icon", children: [" ", endIcon, " "] })] })));
 };
 export default Button;

package/dist/src/components/Button/Button.stories.js

@@ -21,6 +21,9 @@ var Template = function (args) { return _jsx(Button, __assign({}, args)); };
 export var _Button = Template.bind({});
 _Button.args = {
     children: "Button Text",
+    onClick: function () {
+        alert("Button clicked!");
+    },
 };
 _Button.argTypes = {
     color: {
@@ -53,4 +56,8 @@ _Button.argTypes = {
         options: Object.keys(buttonSizes),
         description: "Select the size of the button",
     },
+    onClick: {
+        action: "clicked",
+        description: "Function to call when button is clicked",
+    },
 };

package/dist/src/components/Button/type.d.ts

@@ -4,9 +4,8 @@ type colors = keyof typeof buttonColors;
 type buttonShapes = keyof typeof buttonShapes;
 type buttonSizes = keyof typeof buttonSizes;
 type iconButtonSize = keyof typeof iconButtonSize;
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     color?: colors;
-    onClick?: () => void;
     size?: buttonSizes;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;

package/dist/src/components/Checkbox/checkbox.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "../ui/checkbox";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Form: Story;

package/dist/src/components/Checkbox/checkbox.stories.js

@@ -0,0 +1,61 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from "../ui/checkbox";
+import { Label } from "../ui/label";
+import Button from "../Button/Button";
+var meta = {
+    title: "components/Checkbox",
+    component: Checkbox,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        checked: { control: "boolean" },
+        defaultChecked: { control: "boolean" },
+        disabled: { control: "boolean" },
+        onCheckedChange: { action: "checked changed" },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        id: "default",
+    },
+    render: function (args) { return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, __assign({}, args)), _jsx(Label, { htmlFor: "default", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" })] })); },
+};
+export var Checked = {
+    args: {
+        id: "checked",
+        defaultChecked: true,
+    },
+    render: function (args) { return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, __assign({}, args)), _jsx(Label, { htmlFor: "checked", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Checked option" })] })); },
+};
+export var Disabled = {
+    args: {
+        id: "disabled",
+        disabled: true,
+    },
+    render: function (args) { return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, __assign({}, args)), _jsx(Label, { htmlFor: "disabled", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Disabled option" })] })); },
+};
+export var DisabledChecked = {
+    args: {
+        id: "disabled-checked",
+        disabled: true,
+        defaultChecked: true,
+    },
+    render: function (args) { return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, __assign({}, args)), _jsx(Label, { htmlFor: "disabled-checked", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Disabled checked option" })] })); },
+};
+export var Form = {
+    render: function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-medium", children: "Terms of Service" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Please read and accept our terms of service to continue." }), _jsxs("form", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "terms1" }), _jsx("label", { htmlFor: "terms1", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "I accept the terms and conditions" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "terms2" }), _jsx(Label, { htmlFor: "terms2", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "I agree to receive marketing emails" })] }), _jsx(Button, { type: "submit", className: "mt-4 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700", children: "Submit" })] })] })); },
+};

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.d.ts

@@ -1,2 +1,3 @@
-declare const VerticalCard: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+import { CardInterface } from "../type";
+declare const VerticalCard: ({ item, footer_logo, href, btnLabel, editor, }: CardInterface) => import("react/jsx-runtime").JSX.Element;
 export default VerticalCard;

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.js

@@ -4,7 +4,10 @@ import LUIcon from "../../../components/Icons/LUIcon";
 import LuImage from "../../../components/Images/LuImage";
 import Typography from "../../../components/Typography/Typography";
 import Link from "next/link";
+import { getCardImageSrc } from "..";
 var VerticalCard = function (_a) {
-    return (_jsxs("div", { className: "p-8 bg-white rounded-xl flex flex-col items-center w-full shadow-xl", children: [_jsx("div", { className: "w-full max-w-[240px] overflow-hidden aspect-square", children: _jsx(LuImage, { src: "/images/demo-image.jpg", width: 240, height: 240, className: "w-full h-full object-cover", alt: "Image" }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow m-5 text-center h-[100px]", children: [_jsx(Typography, { variant: "h4", children: " Heading Text " }), _jsx(Typography, { variant: "b3", className: "font-extralight line-clamp-2 max-xs:line-clamp-1", children: "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The The quick brown fox jumps over the lazy dog." })] }), _jsx(Link, { href: "google.com", passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: _jsx(LUIcon, { icon: "angle-right", size: "sm" }), size: "lg", className: "rounded justify-between w-full bg-gray-50 text-gray-950 hover:bg-gray-50 hover:text-gray-950", children: "View" }) })] }));
+    var item = _a.item, footer_logo = _a.footer_logo, _b = _a.href, href = _b === void 0 ? "https://www.google.com/" : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor;
+    var imageSrc = getCardImageSrc(item === null || item === void 0 ? void 0 : item.image, footer_logo);
+    return (_jsxs("div", { className: "p-8 bg-white rounded-xl flex flex-col items-center w-full shadow-xl ".concat(editor === null || editor === void 0 ? void 0 : editor.card, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardBg), children: [_jsx("div", { className: "w-full max-w-[240px] overflow-hidden aspect-square ".concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), children: _jsx(LuImage, { src: imageSrc, width: 240, height: 240, className: "w-full h-full object-cover", alt: "Image" }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow m-5 text-center h-[100px]", children: [_jsx(Typography, { variant: "h4", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(Typography, { variant: "b3", className: "font-extralight line-clamp-2 max-xs:line-clamp-1 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.description })] }), _jsx(Link, { href: href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: _jsx(LUIcon, { icon: "angle-right", size: "sm" }), size: "lg", className: "rounded justify-between w-full bg-gray-50 text-gray-950 hover:bg-gray-50 hover:text-gray-950 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn), children: btnLabel }) })] }));
 };
 export default VerticalCard;

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/react";
+import { CardInterface } from "../type";
 declare const _default: Meta;
 export default _default;
-export declare const _Card: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;
+export declare const _VerticalCard: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CardInterface>;

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.stories.js

@@ -16,4 +16,18 @@ export default {
     component: VerticalCard,
 };
 var Template = function (args) { return _jsx(VerticalCard, __assign({}, args)); };
-export var _Card = Template.bind({});
+export var _VerticalCard = Template.bind({});
+_VerticalCard.args = {
+    // image: "/images/demo-image.jpg",
+    // title: "Heading Text",
+    // short_description: "The quick brown fox jumps over the lazy dog.",
+    item: {
+        image: "/images/demo-image.jpg",
+        title: "Heading Text",
+        description: "The quick brown fox jumps over the lazy dog.",
+    },
+    footer_logo: "/images/demo-image.jpg",
+    href: "https://www.google.com/",
+    btnLabel: "View More",
+    editor: {},
+};

package/dist/src/components/ui/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/src/components/ui/checkbox.js

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+function Checkbox(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(CheckboxPrimitive.Root, __assign({ "data-slot": "checkbox", className: cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-blue-600 data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-blue-600 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4.5 shrink-0 !rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }) })));
+}
+export { Checkbox };

package/dist/styles/global.css

@@ -383,10 +383,18 @@
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -662,18 +670,42 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .gap-x-5 {
     column-gap: calc(var(--spacing) * 5);
   }
   .gap-x-\[20px\] {
     column-gap: 20px;
   }
+  .space-x-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .overflow-hidden {
     overflow: hidden;
   }
   .\!rounded-\[2px\] {
     border-radius: 2px !important;
   }
+  .\!rounded-\[4px\] {
+    border-radius: 4px !important;
+  }
   .\!rounded-full {
     border-radius: calc(infinity * 1px) !important;
   }
@@ -1259,6 +1291,9 @@
   .text-blue-950 {
     color: #03080d;
   }
+  .text-current {
+    color: currentcolor;
+  }
   .text-gray-50 {
     color: #fafafa;
   }
@@ -1504,11 +1539,19 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-none {
+    transition-property: none;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -1559,6 +1602,11 @@
       opacity: 50%;
     }
   }
+  .peer-disabled\:opacity-70 {
+    &:is(:where(.peer):disabled ~ *) {
+      opacity: 70%;
+    }
+  }
   .selection\:bg-primary {
     & *::selection {
       background-color: var(--primary);
@@ -3082,11 +3130,21 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=checked\]\:border-blue-600 {
+    &[data-state="checked"] {
+      border-color: #276ab3;
+    }
+  }
   .data-\[state\=checked\]\:bg-blue-500 {
     &[data-state="checked"] {
       background-color: #3a84d4;
     }
   }
+  .data-\[state\=checked\]\:bg-blue-600 {
+    &[data-state="checked"] {
+      background-color: #276ab3;
+    }
+  }
   .data-\[state\=checked\]\:bg-green-500 {
     &[data-state="checked"] {
       background-color: #479f76;
@@ -3097,6 +3155,11 @@
       background-color: #fa4f5f;
     }
   }
+  .data-\[state\=checked\]\:text-primary-foreground {
+    &[data-state="checked"] {
+      color: var(--primary-foreground);
+    }
+  }
   .data-\[state\=closed\]\:animate-accordion-up {
     &[data-state="closed"] {
       animation: accordion-up var(--tw-duration,.2s)ease-out;
@@ -3450,6 +3513,13 @@
       }
     }
   }
+  .dark\:data-\[state\=checked\]\:bg-primary {
+    &:is(.dark *) {
+      &[data-state="checked"] {
+        background-color: var(--primary);
+      }
+    }
+  }
   .dark\:data-\[state\=checked\]\:bg-primary-foreground {
     &:is(.dark *) {
       &[data-state="checked"] {
@@ -3532,19 +3602,6 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
 }
-@layer base {
-  * {
-    border-color: var(--border);
-    outline-color: var(--ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
-  body {
-    background-color: var(--background);
-    color: var(--foreground);
-  }
-}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -3560,6 +3617,16 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -3817,6 +3884,8 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "private": false,
   "files": [
     "dist",
@@ -42,6 +42,7 @@
   ],
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.8",
+    "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-switch": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.2.3",