@crystallize/design-system 0.0.1 → 0.2.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/action-menu/action-menu.tsx
-import clsx4 from "clsx";
+import { cx as cx4 } from "class-variance-authority";
 
 // src/dropdown-menu/dropdown-menu-root.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -24,12 +24,12 @@ function DropdownMenuRoot({ children, content, onOpenChange, alignContent = "sta
 
 // src/dropdown-menu/dropdown-menu-item.tsx
 import * as DropdownMenuPrimitive2 from "@radix-ui/react-dropdown-menu";
-import clsx from "clsx";
+import { cx } from "class-variance-authority";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function DropdownMenuItem({ children, className, ...delegated }) {
   return /* @__PURE__ */ jsx2(DropdownMenuPrimitive2.Item, {
     ...delegated,
-    className: clsx(
+    className: cx(
       "text-xs font-medium text-black-text",
       "flex h-10 cursor-pointer items-center bg-white px-4 outline-asteroid",
       "hover:bg-[#F8F8F9] hover:outline-none hover:focus-visible:outline-none",
@@ -41,12 +41,12 @@ function DropdownMenuItem({ children, className, ...delegated }) {
 }
 
 // src/dropdown-menu/dropdown-menu-label.tsx
-import clsx2 from "clsx";
 import * as DropdownMenuPrimitive3 from "@radix-ui/react-dropdown-menu";
+import { cx as cx2 } from "class-variance-authority";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function DropdownMenuLabel({ children }) {
   return /* @__PURE__ */ jsx3(DropdownMenuPrimitive3.Label, {
-    className: clsx2("bg-white px-4 py-2 text-xs text-label", "first:rounded-tl first:rounded-tr"),
+    className: cx2("bg-white px-4 py-2 text-xs text-label", "first:rounded-tl first:rounded-tr"),
     children
   });
 }
@@ -145,41 +145,27 @@ var Error = forwardRef4((delegated, ref) => {
     viewBox: "0 0 22 22",
     ...delegated,
     children: [
-      /* @__PURE__ */ jsxs3("g", {
-        clipPath: "url(#a)",
-        children: [
-          /* @__PURE__ */ jsx7("path", {
-            fill: "#DD1367",
-            d: "M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
-          }),
-          /* @__PURE__ */ jsx7("path", {
-            fill: "#528693",
-            fillRule: "evenodd",
-            d: "M21.431 11c0 5.76-4.67 10.43-10.43 10.43C5.238 21.43.568 16.76.568 11S5.24.57 11 .57C16.76.57 21.431 5.24 21.431 11Zm-10.43 9.83c5.429 0 9.83-4.4 9.83-9.83s-4.401-9.83-9.83-9.83c-5.43 0-9.832 4.4-9.832 9.83S5.571 20.83 11 20.83Z",
-            clipRule: "evenodd"
-          }),
-          /* @__PURE__ */ jsx7("path", {
-            fill: "#fff",
-            fillRule: "evenodd",
-            d: "m7.364 13.479 1.157 1.157L11 12.158l2.479 2.478 1.157-1.157L12.158 11l2.478-2.479-1.157-1.157-2.48 2.478-2.478-2.478L7.364 8.52 9.842 11l-2.478 2.479Z",
-            clipRule: "evenodd"
-          }),
-          /* @__PURE__ */ jsx7("path", {
-            fill: "#528693",
-            fillRule: "evenodd",
-            d: "M6.94 13.903a.6.6 0 0 1 0-.849L8.994 11 6.94 8.946a.6.6 0 0 1 0-.849L8.097 6.94a.6.6 0 0 1 .849 0L11 8.994l2.054-2.054a.6.6 0 0 1 .849 0l1.157 1.157a.6.6 0 0 1 0 .849L13.006 11l2.054 2.054a.6.6 0 0 1 0 .849l-1.157 1.157a.6.6 0 0 1-.849 0L11 13.006 8.946 15.06a.6.6 0 0 1-.849 0L6.94 13.903ZM11 12.158l2.479 2.478 1.157-1.157L12.158 11l2.478-2.479-1.157-1.157L11 9.842 8.521 7.364 7.364 8.52 9.842 11l-2.478 2.479 1.157 1.157L11 12.158Z",
-            clipRule: "evenodd"
-          })
-        ]
+      /* @__PURE__ */ jsx7("path", {
+        fill: "#DD1367",
+        d: "M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
       }),
-      /* @__PURE__ */ jsx7("defs", {
-        children: /* @__PURE__ */ jsx7("clipPath", {
-          id: "a",
-          children: /* @__PURE__ */ jsx7("path", {
-            fill: "#fff",
-            d: "M0 0h22v22H0z"
-          })
-        })
+      /* @__PURE__ */ jsx7("path", {
+        fill: "#528693",
+        fillRule: "evenodd",
+        d: "M21.431 11c0 5.76-4.67 10.43-10.43 10.43C5.238 21.43.568 16.76.568 11S5.24.57 11 .57C16.76.57 21.431 5.24 21.431 11Zm-10.43 9.83c5.429 0 9.83-4.4 9.83-9.83s-4.401-9.83-9.83-9.83c-5.43 0-9.832 4.4-9.832 9.83S5.571 20.83 11 20.83Z",
+        clipRule: "evenodd"
+      }),
+      /* @__PURE__ */ jsx7("path", {
+        fill: "#fff",
+        fillRule: "evenodd",
+        d: "m7.364 13.479 1.157 1.157L11 12.158l2.479 2.478 1.157-1.157L12.158 11l2.478-2.479-1.157-1.157-2.48 2.478-2.478-2.478L7.364 8.52 9.842 11l-2.478 2.479Z",
+        clipRule: "evenodd"
+      }),
+      /* @__PURE__ */ jsx7("path", {
+        fill: "#528693",
+        fillRule: "evenodd",
+        d: "M6.94 13.903a.6.6 0 0 1 0-.849L8.994 11 6.94 8.946a.6.6 0 0 1 0-.849L8.097 6.94a.6.6 0 0 1 .849 0L11 8.994l2.054-2.054a.6.6 0 0 1 .849 0l1.157 1.157a.6.6 0 0 1 0 .849L13.006 11l2.054 2.054a.6.6 0 0 1 0 .849l-1.157 1.157a.6.6 0 0 1-.849 0L11 13.006 8.946 15.06a.6.6 0 0 1-.849 0L6.94 13.903ZM11 12.158l2.479 2.478 1.157-1.157L12.158 11l2.478-2.479-1.157-1.157L11 9.842 8.521 7.364 7.364 8.52 9.842 11l-2.478 2.479 1.157 1.157L11 12.158Z",
+        clipRule: "evenodd"
       })
     ]
   });
@@ -375,47 +361,33 @@ var Info = forwardRef7((delegated, ref) => {
     viewBox: "0 0 22 22",
     ...delegated,
     children: [
-      /* @__PURE__ */ jsxs6("g", {
-        clipPath: "url(#a)",
-        children: [
-          /* @__PURE__ */ jsx10("path", {
-            fill: "#BFF6F8",
-            d: "M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
-          }),
-          /* @__PURE__ */ jsx10("path", {
-            fill: "#528693",
-            fillRule: "evenodd",
-            d: "M21.431 11c0 5.76-4.67 10.43-10.43 10.43C5.238 21.43.568 16.76.568 11S5.24.57 11 .57C16.76.57 21.431 5.24 21.431 11Zm-10.43 9.83c5.429 0 9.83-4.4 9.83-9.83s-4.401-9.83-9.83-9.83c-5.43 0-9.832 4.4-9.832 9.83S5.571 20.83 11 20.83Z",
-            clipRule: "evenodd"
-          }),
-          /* @__PURE__ */ jsx10("path", {
-            fill: "#fff",
-            d: "M14.814 6.317a.991.991 0 1 1-1.983 0 .991.991 0 0 1 1.983 0Z"
-          }),
-          /* @__PURE__ */ jsx10("path", {
-            fill: "#528693",
-            fillRule: "evenodd",
-            d: "M15.415 6.317a1.592 1.592 0 1 1-3.184 0 1.592 1.592 0 0 1 3.184 0Zm-1.592.991a.991.991 0 1 0 0-1.982.991.991 0 0 0 0 1.982Z",
-            clipRule: "evenodd"
-          }),
-          /* @__PURE__ */ jsx10("path", {
-            fill: "#fff",
-            d: "m9.37 16.049 1.8.26-.22-.7-.78-.621.56-1.14 2.261-3.382-.34-1.381-1.92-1-1.261.14-.28.32 1.08.54.14.54-2.22 2.862-.821 2.36 2 1.202Z"
-          }),
-          /* @__PURE__ */ jsx10("path", {
-            fill: "#528693",
-            d: "M10.476 16.666a4.93 4.93 0 0 1-2.096-.599c-1.114-.605-1.482-1.63-.961-2.673a9.606 9.606 0 0 1 1.437-1.963l.067-.077c.252-.293.513-.595.742-.897.288-.38.538-.745.443-1.031-.056-.164-.215-.282-.485-.362a1.58 1.58 0 0 0-.247-.033l-.055-.004a.984.984 0 0 1-.481-.096c-.169-.132-.098-.51-.013-.676a.915.915 0 0 1 .701-.473c.139-.025.28-.037.42-.035.656.034 1.301.176 1.91.42 1.104.424 1.631 1.263 1.41 2.244a4.193 4.193 0 0 1-.908 1.714c-.128.161-.26.315-.392.471l-.07.083c-.282.32-.544.654-.788 1.003l-.144.206c-.161.209-.291.44-.385.687a.582.582 0 0 0 .32.743.91.91 0 0 0 .32.08c.175.021.356.044.428.21a.575.575 0 0 1-.035.477 1.144 1.144 0 0 1-1.138.581Zm-.877-8.193c.128.079.268.136.414.17.18.04.35.12.494.236.58.552.14 1.272-.318 1.903-.214.292-.47.58-.74.884l-.068.077c-.624.692-1.27 1.408-1.497 2.232a1.148 1.148 0 0 0 .163 1.06c.493.658 1.78.907 2.819.921l.035-.05-.025-.035a1.248 1.248 0 0 1-.865-.594 1.04 1.04 0 0 1 .006-.894 8.071 8.071 0 0 1 1.309-1.977l.127-.155c.171-.21.356-.437.525-.665.371-.501.844-1.245.664-1.915-.315-1.173-2.15-1.209-3.03-1.226h-.057l.044.028Z"
-          })
-        ]
+      /* @__PURE__ */ jsx10("path", {
+        fill: "#BFF6F8",
+        d: "M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
       }),
-      /* @__PURE__ */ jsx10("defs", {
-        children: /* @__PURE__ */ jsx10("clipPath", {
-          id: "a",
-          children: /* @__PURE__ */ jsx10("path", {
-            fill: "#fff",
-            d: "M0 0h22v22H0z"
-          })
-        })
+      /* @__PURE__ */ jsx10("path", {
+        fill: "#528693",
+        fillRule: "evenodd",
+        d: "M21.431 11c0 5.76-4.67 10.43-10.43 10.43C5.238 21.43.568 16.76.568 11S5.24.57 11 .57C16.76.57 21.431 5.24 21.431 11Zm-10.43 9.83c5.429 0 9.83-4.4 9.83-9.83s-4.401-9.83-9.83-9.83c-5.43 0-9.832 4.4-9.832 9.83S5.571 20.83 11 20.83Z",
+        clipRule: "evenodd"
+      }),
+      /* @__PURE__ */ jsx10("path", {
+        fill: "#fff",
+        d: "M14.814 6.317a.991.991 0 1 1-1.983 0 .991.991 0 0 1 1.983 0Z"
+      }),
+      /* @__PURE__ */ jsx10("path", {
+        fill: "#528693",
+        fillRule: "evenodd",
+        d: "M15.415 6.317a1.592 1.592 0 1 1-3.184 0 1.592 1.592 0 0 1 3.184 0Zm-1.592.991a.991.991 0 1 0 0-1.982.991.991 0 0 0 0 1.982Z",
+        clipRule: "evenodd"
+      }),
+      /* @__PURE__ */ jsx10("path", {
+        fill: "#fff",
+        d: "m9.37 16.049 1.8.26-.22-.7-.78-.621.56-1.14 2.261-3.382-.34-1.381-1.92-1-1.261.14-.28.32 1.08.54.14.54-2.22 2.862-.821 2.36 2 1.202Z"
+      }),
+      /* @__PURE__ */ jsx10("path", {
+        fill: "#528693",
+        d: "M10.476 16.666a4.93 4.93 0 0 1-2.096-.599c-1.114-.605-1.482-1.63-.961-2.673a9.606 9.606 0 0 1 1.437-1.963l.067-.077c.252-.293.513-.595.742-.897.288-.38.538-.745.443-1.031-.056-.164-.215-.282-.485-.362a1.58 1.58 0 0 0-.247-.033l-.055-.004a.984.984 0 0 1-.481-.096c-.169-.132-.098-.51-.013-.676a.915.915 0 0 1 .701-.473c.139-.025.28-.037.42-.035.656.034 1.301.176 1.91.42 1.104.424 1.631 1.263 1.41 2.244a4.193 4.193 0 0 1-.908 1.714c-.128.161-.26.315-.392.471l-.07.083c-.282.32-.544.654-.788 1.003l-.144.206c-.161.209-.291.44-.385.687a.582.582 0 0 0 .32.743.91.91 0 0 0 .32.08c.175.021.356.044.428.21a.575.575 0 0 1-.035.477 1.144 1.144 0 0 1-1.138.581Zm-.877-8.193c.128.079.268.136.414.17.18.04.35.12.494.236.58.552.14 1.272-.318 1.903-.214.292-.47.58-.74.884l-.068.077c-.624.692-1.27 1.408-1.497 2.232a1.148 1.148 0 0 0 .163 1.06c.493.658 1.78.907 2.819.921l.035-.05-.025-.035a1.248 1.248 0 0 1-.865-.594 1.04 1.04 0 0 1 .006-.894 8.071 8.071 0 0 1 1.309-1.977l.127-.155c.171-.21.356-.437.525-.665.371-.501.844-1.245.664-1.915-.315-1.173-2.15-1.209-3.03-1.226h-.057l.044.028Z"
       })
     ]
   });
@@ -519,59 +491,45 @@ var Warning = forwardRef9((delegated, ref) => {
     viewBox: "0 0 22 22",
     ...delegated,
     children: [
-      /* @__PURE__ */ jsxs8("g", {
-        clipPath: "url(#a)",
-        children: [
-          /* @__PURE__ */ jsx12("path", {
-            fill: "#FFDE99",
-            d: "M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
-          }),
-          /* @__PURE__ */ jsx12("path", {
-            fill: "#528693",
-            fillRule: "evenodd",
-            d: "M21.43 11c0 5.76-4.67 10.43-10.43 10.43S.57 16.76.57 11 5.24.57 11 .57 21.43 5.24 21.43 11ZM11 20.83c5.43 0 9.83-4.4 9.83-9.83S16.43 1.17 11 1.17 1.17 5.57 1.17 11s4.4 9.83 9.83 9.83Z",
-            clipRule: "evenodd"
-          }),
-          /* @__PURE__ */ jsx12("path", {
-            fill: "#fff",
-            d: "M10.077 5.232c.41-.71 1.436-.71 1.846 0L17 14.025c.41.71-.103 1.599-.924 1.599H5.923c-.82 0-1.333-.889-.923-1.6l5.077-8.792Z"
-          }),
-          /* @__PURE__ */ jsx12("path", {
-            fill: "#528693",
-            fillRule: "evenodd",
-            d: "m16.48 14.325-5.077-8.793a.466.466 0 0 0-.806 0L5.52 14.325c-.18.31.045.699.403.699h10.153a.466.466 0 0 0 .404-.7Zm-4.557-9.093a1.066 1.066 0 0 0-1.846 0L5 14.025c-.41.71.103 1.599.923 1.599h10.153c.821 0 1.334-.889.924-1.6l-5.077-8.792Z",
-            clipRule: "evenodd"
-          }),
-          /* @__PURE__ */ jsx12("path", {
-            fill: "#FFDE99",
-            d: "M10.588 8.628a.5.5 0 1 1 1 0v2.475a.5.5 0 0 1-1 0V8.628Z"
-          }),
-          /* @__PURE__ */ jsx12("path", {
-            fill: "#528693",
-            fillRule: "evenodd",
-            d: "M12.188 8.628v2.475a1.1 1.1 0 0 1-2.2 0V8.628a1.1 1.1 0 1 1 2.2 0Zm-1.1-.5a.5.5 0 0 0-.5.5v2.475a.5.5 0 1 0 1 0V8.628a.5.5 0 0 0-.5-.5Z",
-            clipRule: "evenodd"
-          }),
-          /* @__PURE__ */ jsx12("path", {
-            fill: "#FFDE99",
-            d: "M11.588 13.403a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"
-          }),
-          /* @__PURE__ */ jsx12("path", {
-            fill: "#528693",
-            fillRule: "evenodd",
-            d: "M12.188 13.403a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0Zm-1.1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z",
-            clipRule: "evenodd"
-          })
-        ]
+      /* @__PURE__ */ jsx12("path", {
+        fill: "#FFDE99",
+        d: "M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
       }),
-      /* @__PURE__ */ jsx12("defs", {
-        children: /* @__PURE__ */ jsx12("clipPath", {
-          id: "a",
-          children: /* @__PURE__ */ jsx12("path", {
-            fill: "#fff",
-            d: "M0 0h22v22H0z"
-          })
-        })
+      /* @__PURE__ */ jsx12("path", {
+        fill: "#528693",
+        fillRule: "evenodd",
+        d: "M21.43 11c0 5.76-4.67 10.43-10.43 10.43S.57 16.76.57 11 5.24.57 11 .57 21.43 5.24 21.43 11ZM11 20.83c5.43 0 9.83-4.4 9.83-9.83S16.43 1.17 11 1.17 1.17 5.57 1.17 11s4.4 9.83 9.83 9.83Z",
+        clipRule: "evenodd"
+      }),
+      /* @__PURE__ */ jsx12("path", {
+        fill: "#fff",
+        d: "M10.077 5.232c.41-.71 1.436-.71 1.846 0L17 14.025c.41.71-.103 1.599-.924 1.599H5.923c-.82 0-1.333-.889-.923-1.6l5.077-8.792Z"
+      }),
+      /* @__PURE__ */ jsx12("path", {
+        fill: "#528693",
+        fillRule: "evenodd",
+        d: "m16.48 14.325-5.077-8.793a.466.466 0 0 0-.806 0L5.52 14.325c-.18.31.045.699.403.699h10.153a.466.466 0 0 0 .404-.7Zm-4.557-9.093a1.066 1.066 0 0 0-1.846 0L5 14.025c-.41.71.103 1.599.923 1.599h10.153c.821 0 1.334-.889.924-1.6l-5.077-8.792Z",
+        clipRule: "evenodd"
+      }),
+      /* @__PURE__ */ jsx12("path", {
+        fill: "#FFDE99",
+        d: "M10.588 8.628a.5.5 0 1 1 1 0v2.475a.5.5 0 0 1-1 0V8.628Z"
+      }),
+      /* @__PURE__ */ jsx12("path", {
+        fill: "#528693",
+        fillRule: "evenodd",
+        d: "M12.188 8.628v2.475a1.1 1.1 0 0 1-2.2 0V8.628a1.1 1.1 0 1 1 2.2 0Zm-1.1-.5a.5.5 0 0 0-.5.5v2.475a.5.5 0 1 0 1 0V8.628a.5.5 0 0 0-.5-.5Z",
+        clipRule: "evenodd"
+      }),
+      /* @__PURE__ */ jsx12("path", {
+        fill: "#FFDE99",
+        d: "M11.588 13.403a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"
+      }),
+      /* @__PURE__ */ jsx12("path", {
+        fill: "#528693",
+        fillRule: "evenodd",
+        d: "M12.188 13.403a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0Zm-1.1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z",
+        clipRule: "evenodd"
       })
     ]
   });
@@ -592,12 +550,12 @@ var Icon = {
 };
 
 // src/action-menu/action-item.tsx
-import clsx3 from "clsx";
+import { cx as cx3 } from "class-variance-authority";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function Item2({ children, className, onSelect }) {
   return /* @__PURE__ */ jsx13(DropdownMenu.Item, {
     onClick: onSelect,
-    className: clsx3(
+    className: cx3(
       "items-center text-density cursor-pointer flex font-sans font-medium text-sm gap-2 py-2.5 px-5",
       "hover:bg-[#f4f4f4]",
       "[&.danger]:text-error",
@@ -609,17 +567,17 @@ function Item2({ children, className, onSelect }) {
 
 // src/action-menu/action-menu.tsx
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-function ActionMenu({ children, className, tabIndex }) {
+function ActionMenu({ children, tabIndex }) {
   return /* @__PURE__ */ jsx14(DropdownMenu.Root, {
     content: children,
+    alignContent: "center",
     children: /* @__PURE__ */ jsxs9("button", {
       tabIndex,
       type: "button",
-      className: clsx4(
+      className: cx4(
         "items-center bg-transparent rounded-full border-none cursor-pointer flex justify-center p-1",
         "hover:bg-gray-6 focus:bg-gray-6 focus:outline-offset-2 focus:outline focus:outline-1 focus:outline-glacier focus-visible:outline-offset-2 focus-visible:outline focus-visible:outline-1 focus-visible:outline-glacier",
-        "active:scale-95",
-        className
+        "active:scale-95"
       ),
       "aria-label": "more options",
       children: [
@@ -682,20 +640,77 @@ var Button = forwardRef10(
 );
 Button.displayName = "Button";
 
+// src/card/card.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var cardStyles = cva2("rounded-lg p-4 sm:p-8", {
+  variants: {
+    variant: {
+      gray: "bg-jupiter",
+      white: "bg-white"
+    }
+  },
+  defaultVariants: {
+    variant: "gray"
+  }
+});
+function Card({ children, className, variant, ...delegated }) {
+  return /* @__PURE__ */ jsx16("section", {
+    className: cardStyles({ variant, className }),
+    ...delegated,
+    children
+  });
+}
+
+// src/checkbox/checkbox.tsx
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cx as cx5 } from "class-variance-authority";
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var Checkbox = forwardRef11((props, ref) => {
+  return /* @__PURE__ */ jsx17(CheckboxPrimitive.Root, {
+    ...props,
+    ref,
+    className: cx5(
+      "flex h-3.5 w-3.5 items-center justify-center rounded-sm border border-solid border-[#ddd] bg-white",
+      "focus:outline-none focus:ring-1 focus:ring-[#528693] focus:ring-offset-1",
+      "radix-state-checked:border-[#528693] radix-state-checked:bg-neptune",
+      "radix-state-checked:disabled:opacity-40 radix-state-unchecked:disabled:!bg-[#ddd]/20"
+    ),
+    children: /* @__PURE__ */ jsx17(CheckboxPrimitive.Indicator, {
+      children: /* @__PURE__ */ jsxs10("svg", {
+        viewBox: "0 0 9 9",
+        fill: "none",
+        className: "h-2 w-2",
+        children: [
+          /* @__PURE__ */ jsx17("path", {
+            d: "M1.12 5.51a.559.559 0 01.832-.101l2.201 1.953-.427.624a.326.326 0 01-.486.06L1.21 6.245a.559.559 0 01-.09-.734z",
+            fill: "#528693"
+          }),
+          /* @__PURE__ */ jsx17("path", {
+            d: "M7.883 1.087c.043.03.053.09.023.132L3.669 7.132l-.154-.105L7.754 1.11a.093.093 0 01.129-.023z",
+            stroke: "#528693"
+          })
+        ]
+      })
+    })
+  });
+});
+Checkbox.displayName = "Checkbox";
+
 // src/dialog/destroyFns.ts
 var destroyFns = [];
 
 // src/dialog/dialog.tsx
-import clsx5 from "clsx";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { cva as cva3, cx as cx6 } from "class-variance-authority";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var IconMap = {
   error: Icon.Error,
   info: Icon.Info,
   warning: Icon.Warning
 };
-var dialogContentStyles = cva2(
+var dialogContentStyles = cva3(
   "bg-white rounded shadow fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-xl w-auto p-6",
   {
     variants: {
@@ -705,28 +720,29 @@ var dialogContentStyles = cva2(
     }
   }
 );
-function DialogContent({ children, closable = true, type, className, ...delegated }) {
+function DialogContent({ children, closable = true, type, className, container, ...delegated }) {
   const withIcon = typeof type !== "undefined";
   const IconComponent = type && IconMap[type];
-  return /* @__PURE__ */ jsxs10(DialogPrimitive.Portal, {
+  return /* @__PURE__ */ jsxs11(DialogPrimitive.Portal, {
+    container,
     children: [
-      /* @__PURE__ */ jsx16(DialogPrimitive.Overlay, {
+      /* @__PURE__ */ jsx18(DialogPrimitive.Overlay, {
         className: "bg-black/30 fixed inset-0"
       }),
-      /* @__PURE__ */ jsxs10(DialogPrimitive.Content, {
+      /* @__PURE__ */ jsxs11(DialogPrimitive.Content, {
         className: dialogContentStyles({ withIcon, class: className }),
         ...delegated,
         children: [
-          IconComponent && /* @__PURE__ */ jsx16(IconComponent, {
+          IconComponent && /* @__PURE__ */ jsx18(IconComponent, {
             className: "my-1 shrink-0",
             width: 32,
             height: 32
           }),
-          closable && /* @__PURE__ */ jsx16(DialogClose, {
+          closable && /* @__PURE__ */ jsx18(DialogClose, {
             asChild: true,
-            children: /* @__PURE__ */ jsx16(Button, {
+            children: /* @__PURE__ */ jsx18(Button, {
               className: "absolute top-2.5 right-2.5 !rounded-full !p-0 h-6 w-6 inline-flex items-center justify-center !bg-transparent hover:!bg-gray-200 focus:!bg-gray-200 !drop-shadow-none",
-              children: /* @__PURE__ */ jsx16(Icon.Cancel, {
+              children: /* @__PURE__ */ jsx18(Icon.Cancel, {
                 color: "density",
                 "aria-label": "Close",
                 height: 18,
@@ -734,7 +750,7 @@ function DialogContent({ children, closable = true, type, className, ...delegate
               })
             })
           }),
-          /* @__PURE__ */ jsx16("div", {
+          /* @__PURE__ */ jsx18("div", {
             children
           })
         ]
@@ -743,13 +759,13 @@ function DialogContent({ children, closable = true, type, className, ...delegate
   });
 }
 function DialogTitle({ className, ...delegated }) {
-  return /* @__PURE__ */ jsx16(DialogPrimitive.Title, {
-    className: clsx5("m-0 font-semibold text-2xl font-sans text-black-text", className),
+  return /* @__PURE__ */ jsx18(DialogPrimitive.Title, {
+    className: cx6("m-0 font-medium text-xl font-sans text-black-text", className),
     ...delegated
   });
 }
 function DialogDescription(delegated) {
-  return /* @__PURE__ */ jsx16(DialogPrimitive.Description, {
+  return /* @__PURE__ */ jsx18(DialogPrimitive.Description, {
     className: "mt-2 mb-5 text-gray-600",
     ...delegated
   });
@@ -758,7 +774,7 @@ var DialogTrigger = DialogPrimitive.Trigger;
 var DialogClose = DialogPrimitive.Close;
 var DialogRoot = DialogPrimitive.Root;
 function DialogBase({ children, ...delegated }) {
-  return /* @__PURE__ */ jsx16(DialogRoot, {
+  return /* @__PURE__ */ jsx18(DialogRoot, {
     ...delegated,
     children
   });
@@ -773,7 +789,7 @@ DialogBase.Overlay = DialogPrimitive.Overlay;
 import { unmountComponentAtNode, render as DOMRender } from "react-dom";
 
 // src/dialog/confirm-dialog.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function ConfirmDialog({
   open,
   close,
@@ -790,37 +806,37 @@ function ConfirmDialog({
   onPointerDownOutside,
   type
 }) {
-  const cancelButton = okCancel && /* @__PURE__ */ jsx17(Button, {
+  const cancelButton = okCancel && /* @__PURE__ */ jsx19(Button, {
     variant: "secondary",
     onClick: () => {
-      onCancel == null ? void 0 : onCancel();
+      onCancel?.();
       close();
     },
     children: cancelText
   });
-  return /* @__PURE__ */ jsx17(DialogRoot, {
+  return /* @__PURE__ */ jsx19(DialogRoot, {
     open,
     onOpenChange: () => close(),
-    children: /* @__PURE__ */ jsxs11(Dialog.Content, {
+    children: /* @__PURE__ */ jsxs12(Dialog.Content, {
       onEscapeKeyDown,
       onInteractOutside,
       onPointerDownOutside,
       type,
       children: [
-        title && /* @__PURE__ */ jsx17(Dialog.Title, {
+        title && /* @__PURE__ */ jsx19(Dialog.Title, {
           children: title
         }),
-        description && /* @__PURE__ */ jsx17(Dialog.Description, {
+        description && /* @__PURE__ */ jsx19(Dialog.Description, {
           children: description
         }),
         content,
-        /* @__PURE__ */ jsxs11("div", {
+        /* @__PURE__ */ jsxs12("div", {
           className: "flex items-center gap-4 mt-4 justify-end",
           children: [
             cancelButton,
-            /* @__PURE__ */ jsx17(Button, {
+            /* @__PURE__ */ jsx19(Button, {
               onClick: () => {
-                onOk == null ? void 0 : onOk();
+                onOk?.();
                 close();
               },
               children: okText
@@ -833,7 +849,7 @@ function ConfirmDialog({
 }
 
 // src/dialog/config.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function confirm(config) {
   const container = document.createDocumentFragment();
   let currentConfig = { ...config, close, open: true };
@@ -869,7 +885,7 @@ function confirm(config) {
   function render({ okText, cancelText, ...delegated }) {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => {
-      DOMRender(/* @__PURE__ */ jsx18(ConfirmDialog, {
+      DOMRender(/* @__PURE__ */ jsx20(ConfirmDialog, {
         ...delegated,
         okText,
         cancelText
@@ -970,11 +986,314 @@ function destroyAll() {
     }
   }
 }
+
+// src/icon-button/icon-button.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var buttonStyles2 = cva4(
+  [
+    "flex items-center justify-center rounded-full font-medium cursor-pointer",
+    "disabled:cursor-default disabled:scale-100 disabled:shadow-none",
+    "active:scale-95",
+    "focus:shadow focus:bg-slate-200",
+    "hover:shadow hover:bg-slate-200",
+    "focus-visible:outline-inherit focus-visible:outline-offset-1 focus-visible:outline focus-visible:outline-1"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-8 w-8",
+        sm: "h-9 w-9",
+        md: "h-10 w-10",
+        lg: "h-10 w-10",
+        xl: "h-11 w-11"
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+);
+var IconButton = forwardRef12(
+  ({ children, className, type = "button", size, ...delegated }, ref) => {
+    return /* @__PURE__ */ jsx21("button", {
+      ref,
+      type,
+      className: buttonStyles2({ size, className }),
+      ...delegated,
+      children
+    });
+  }
+);
+IconButton.displayName = "Button";
+
+// src/inline-radio/inline-radio.tsx
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cx as cx7 } from "class-variance-authority";
+import { jsx as jsx22 } from "react/jsx-runtime";
+function InlineRadioGroup(delegated) {
+  return /* @__PURE__ */ jsx22(RadioGroupPrimitive.Root, {
+    ...delegated,
+    className: "inline-flex space-x-1 rounded-sm bg-[#9095a81a] p-[3px]"
+  });
+}
+function InlineRadioItem({ children, className, ...delegated }) {
+  return /* @__PURE__ */ jsx22(RadioGroupPrimitive.Item, {
+    ...delegated,
+    className: cx7(
+      "m-0 p-0",
+      "flex cursor-pointer items-center justify-center rounded border-none bg-transparent text-sm leading-none text-zinc-800",
+      "disabled:cursor-not-allowed",
+      "radix-state-checked:bg-white radix-state-checked:shadow-sm",
+      "focus:outline-neptune",
+      className
+    ),
+    children: /* @__PURE__ */ jsx22(RadioGroupPrimitive.Indicator, {
+      forceMount: true,
+      children
+    })
+  });
+}
+var InlineRadio = {
+  Group: InlineRadioGroup,
+  Item: InlineRadioItem
+};
+
+// src/input/input.tsx
+import { cva as cva5 } from "class-variance-authority";
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var inputStyles = cva5(
+  [
+    "p-0 border-none text-zinc-800",
+    "focus:outline-none",
+    "placeholder:italic placeholder:font-light placeholder:text-gray-400 placeholder:text-sm",
+    "disabled:cursor-default"
+  ],
+  {
+    variants: {
+      paper: {
+        white: "bg-white",
+        gray: "bg-jupiter"
+      }
+    },
+    defaultVariants: {
+      paper: "gray"
+    }
+  }
+);
+var Input = forwardRef13(({ className, paper, ...delegated }, ref) => {
+  return /* @__PURE__ */ jsx23("input", {
+    ref,
+    className: inputStyles({ className, paper }),
+    type: "text",
+    ...delegated
+  });
+});
+Input.displayName = "Input";
+
+// src/label/label.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { cx as cx8 } from "class-variance-authority";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Label2 = forwardRef14(({ className, ...delegated }, ref) => {
+  return /* @__PURE__ */ jsx24("label", {
+    ref,
+    className: cx8("text-xs font-medium text-gray-400", className),
+    ...delegated
+  });
+});
+Label2.displayName = "Label";
+
+// src/progress/progress.tsx
+import * as ProgressPrimitives from "@radix-ui/react-progress";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function Progress({ value }) {
+  return /* @__PURE__ */ jsx25(ProgressPrimitives.Root, {
+    className: "relative overflow-hidden rounded-full w-full h-6 bg-neutral-200",
+    value,
+    children: /* @__PURE__ */ jsx25(ProgressPrimitives.Indicator, {
+      className: "bg-[#50dbdc] w-full h-full transform ease-linear duration-500",
+      style: { transform: `translateX(-${100 - value}%)` }
+    })
+  });
+}
+
+// src/radio/radio.tsx
+import * as RadioGroupPrimitive2 from "@radix-ui/react-radio-group";
+import { cx as cx9 } from "class-variance-authority";
+import { jsx as jsx26 } from "react/jsx-runtime";
+function RadioGroupItem(props) {
+  return /* @__PURE__ */ jsx26(RadioGroupPrimitive2.Item, {
+    ...props,
+    className: cx9(
+      "flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-full border border-solid border-[#ddd] bg-white p-0",
+      "focus:outline-none",
+      "disabled:bg-[#ddd]/20",
+      "radix-state-checked:border-[#528693] radix-state-checked:bg-neptune"
+    ),
+    children: /* @__PURE__ */ jsx26(RadioGroupPrimitive2.Indicator, {
+      className: cx9("block h-[6px] w-[6px] rounded-full bg-[#528693]")
+    })
+  });
+}
+var Radio = {
+  Group: RadioGroupPrimitive2.Root,
+  Item: RadioGroupItem
+};
+
+// src/select/select-item.tsx
+import { forwardRef as forwardRef15 } from "react";
+import * as SelectPrimitives from "@radix-ui/react-select";
+import { cx as cx10 } from "class-variance-authority";
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+var SelectItem = forwardRef15((props, ref) => {
+  const { children, ...delegated } = props;
+  return /* @__PURE__ */ jsxs13(SelectPrimitives.Item, {
+    className: cx10(
+      "flex cursor-pointer items-center whitespace-nowrap px-6 py-2 font-medium",
+      "focus:bg-neptune/20",
+      "hover:bg-neptune/20"
+    ),
+    ref,
+    ...delegated,
+    children: [
+      /* @__PURE__ */ jsx27(SelectPrimitives.ItemText, {
+        children
+      }),
+      /* @__PURE__ */ jsx27(SelectPrimitives.ItemIndicator, {})
+    ]
+  });
+});
+SelectItem.displayName = "SelectItem";
+
+// src/select/select-root.tsx
+import { forwardRef as forwardRef16 } from "react";
+import * as SelectPrimitives2 from "@radix-ui/react-select";
+import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
+var SelectContainer = forwardRef16(
+  ({ children, id, placeholder, disabled, ...delegated }, ref) => {
+    return /* @__PURE__ */ jsxs14(SelectPrimitives2.Root, {
+      ...delegated,
+      children: [
+        /* @__PURE__ */ jsxs14(SelectPrimitives2.Trigger, {
+          ref,
+          className: "inline-flex cursor-pointer items-center justify-center gap-4 whitespace-nowrap rounded border-0 bg-white px-4 py-3 text-sm font-medium text-black-text shadow disabled:cursor-default disabled:opacity-50",
+          disabled,
+          id,
+          children: [
+            /* @__PURE__ */ jsx28(SelectPrimitives2.Value, {
+              placeholder: /* @__PURE__ */ jsx28("span", {
+                className: "italic text-label",
+                children: placeholder ?? "Select..."
+              })
+            }),
+            /* @__PURE__ */ jsx28(Icon.Arrow, {})
+          ]
+        }),
+        /* @__PURE__ */ jsx28(SelectPrimitives2.Portal, {
+          children: /* @__PURE__ */ jsxs14(SelectPrimitives2.Content, {
+            className: "overflow-hidden rounded bg-white text-black-text shadow",
+            children: [
+              /* @__PURE__ */ jsx28(SelectPrimitives2.ScrollUpButton, {}),
+              /* @__PURE__ */ jsx28(SelectPrimitives2.Viewport, {
+                className: "py-2",
+                children
+              }),
+              /* @__PURE__ */ jsx28(SelectPrimitives2.ScrollDownButton, {})
+            ]
+          })
+        })
+      ]
+    });
+  }
+);
+SelectContainer.displayName = "Select";
+
+// src/select/select.ts
+var Select = {
+  Container: SelectContainer,
+  Item: SelectItem
+};
+
+// src/text-field/text-field.tsx
+import { forwardRef as forwardRef17 } from "react";
+import { cva as cva6 } from "class-variance-authority";
+import { Fragment, jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
+var textFieldStyles = cva6(
+  ["relative gap-3 flex flex-col p-3 text-sm font-medium text-gray-400 rounded border border-transparent border-solid"],
+  {
+    variants: {
+      variant: {
+        outlined: "",
+        filled: "",
+        standard: ""
+      },
+      raised: {
+        sm: "shadow-sm",
+        md: "shadow-md",
+        lg: "shadow-lg"
+      },
+      paper: {
+        white: "bg-white",
+        gray: "bg-jupiter"
+      },
+      error: {
+        true: "border-rose-800 text-rose-800"
+      }
+    },
+    defaultVariants: {
+      variant: "standard",
+      paper: "white"
+    }
+  }
+);
+var TextField = forwardRef17(
+  ({ variant, raised, className, label, paper, endAdornment, error, ...delegated }, ref) => {
+    return /* @__PURE__ */ jsxs15(Fragment, {
+      children: [
+        /* @__PURE__ */ jsxs15("label", {
+          className: textFieldStyles({ variant, raised, paper, error: Boolean(error), className }),
+          children: [
+            label,
+            /* @__PURE__ */ jsx29(Input, {
+              ref,
+              className: "w-10/12 text-ellipsis overflow-hidden",
+              type: "text",
+              ...delegated
+            }),
+            /* @__PURE__ */ jsx29("div", {
+              className: "absolute right-1 top-2/3 -translate-y-1/2 ",
+              children: endAdornment
+            })
+          ]
+        }),
+        error && /* @__PURE__ */ jsx29("div", {
+          className: "text-rose-800 text-sm px-3 !mt-1",
+          children: error
+        })
+      ]
+    });
+  }
+);
+TextField.displayName = "TextField";
 export {
   ActionMenu,
   Button,
+  Card,
+  Checkbox,
   Dialog,
   DropdownMenu,
+  Icon,
+  IconButton,
+  InlineRadio,
+  Input,
+  Label2 as Label,
+  Progress,
+  Radio,
+  Select,
+  TextField,
   destroyAll,
   showConfirm,
   showDialog,