@clickhouse/click-ui 0.0.168 → 0.0.169

package/dist/click-ui.umd.js

@@ -9008,7 +9008,7 @@ var __publicField = (obj, key, value) => {
         /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, children: label ?? children }),
         /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$2, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
       ] }),
-      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "sm" })
+      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
     ] });
   });
   Item.displayName = "AutoComplete.Item";
@@ -10108,6 +10108,7 @@ var __publicField = (obj, key, value) => {
   const Checkbox = ({
     id,
     label,
+    variant,
     disabled,
     orientation,
     dir,
@@ -10115,28 +10116,29 @@ var __publicField = (obj, key, value) => {
   }) => {
     const defaultId = React.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$5, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant: variant ?? "default", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
       label && /* @__PURE__ */ jsxRuntime.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
   };
   const CheckInput = styledComponents.styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-1sck1ja-1"
   })(["display:flex;align-items:center;justify-content:center;", ";"], ({
-    theme: theme2
+    theme: theme2,
+    variant = "default"
   }) => `
     border-radius: ${theme2.click.checkbox.radii.all};
     width: ${theme2.click.checkbox.size.all};
     height: ${theme2.click.checkbox.size.all};
-    background: ${theme2.click.checkbox.color.background.default};
-    border: 1px solid ${theme2.click.checkbox.color.stroke.default};
+    background: ${theme2.click.checkbox.color.variations[variant].background.default};
+    border: 1px solid ${theme2.click.checkbox.color.variations[variant].stroke.default};
     cursor: pointer;
 
     &:hover {
-      background: ${theme2.click.checkbox.color.background.hover};
+      background: ${theme2.click.checkbox.color.variations[variant].background.hover};
     }
     &[data-state="checked"] {
-      border-color: ${theme2.click.checkbox.color.stroke.active};
-      background: ${theme2.click.checkbox.color.background.active};
+      border-color: ${theme2.click.checkbox.color.variations[variant].stroke.active};
+      background: ${theme2.click.checkbox.color.variations[variant].background.active};
     }
     &[data-disabled] {
       background: ${theme2.click.checkbox.color.background.disabled};
@@ -14080,7 +14082,7 @@ var __publicField = (obj, key, value) => {
       !open22 && onCancel && onCancel();
     }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { as: Dialog.Content, title, showClose, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Container, { overflow: "auto", grow: "1", orientation: "vertical", children: children ? children : /* @__PURE__ */ jsxRuntime.jsx(Text, { children: message }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "xl" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "xl" }),
       /* @__PURE__ */ jsxRuntime.jsxs(ActionsWrapper, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
         /* @__PURE__ */ jsxRuntime.jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, onClick: () => {
@@ -14241,7 +14243,7 @@ var __publicField = (obj, key, value) => {
           /* @__PURE__ */ jsxRuntime.jsx(Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children }),
           showClose && /* @__PURE__ */ jsxRuntime.jsx($5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
         ] }),
-        showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { "data-testid": "flyout-header-separator", size: "lg" })
+        showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { "data-testid": "flyout-header-separator", size: "lg" })
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(FlyoutContainer, { children: [
@@ -14252,7 +14254,7 @@ var __publicField = (obj, key, value) => {
         ] }),
         showClose && /* @__PURE__ */ jsxRuntime.jsx($5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
       ] }),
-      showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { "data-testid": "flyout-header-separator", size: "lg" })
+      showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { "data-testid": "flyout-header-separator", size: "lg" })
     ] });
   };
   Header$1.displayName = "Flyout.Header";
@@ -14291,7 +14293,7 @@ var __publicField = (obj, key, value) => {
   })(["width:var(--flyout-width);max-width:100%;"]);
   const Footer = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(FooterContainer, { gap: "none", orientation: "vertical", alignItems: "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "xs" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "xs" }),
       /* @__PURE__ */ jsxRuntime.jsx(FlyoutFooter, { justifyContent: "end", gap: "none", padding: "none", isResponsive: false, wrap: "wrap", ...props })
     ] });
   };
@@ -36404,7 +36406,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, children: label ?? children }),
         /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$1, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
       ] }),
-      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "sm" })
+      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
     ] });
   });
   SelectItem.displayName = "Select.Item";
@@ -36468,7 +36470,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange }) }),
         !icon && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange })
       ] }),
-      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "sm" })
+      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
     ] });
   });
   MultiSelectCheckboxItem.displayName = "Select.Item";
@@ -36672,7 +36674,6 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     orientation = "horizontal",
     ...props
   }) => /* @__PURE__ */ jsxRuntime.jsx(CUISeparator, { orientation, ...props });
-  const Separator$1 = Separator;
   const LabelContainer = styledComponents.styled.span.withConfig({
     componentId: "sc-1cu1l45-0"
   })(["display:flex;align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;flex:1;gap:", ";overflow:hidden;"], ({
@@ -41802,6 +41803,154 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     },
     checkbox: {
       color: {
+        variations: {
+          "default": {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#FAFF69",
+              disabled: "#414141"
+            },
+            stroke: {
+              "default": "#414141",
+              hover: "#414141",
+              active: "#FAFF69",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#151515",
+              disabled: "#808080"
+            },
+            label: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#606060"
+            }
+          },
+          var1: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#66FF73",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#00CC11",
+              hover: "#66FF73",
+              active: "#66FF73",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var2: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#6c9af3",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#6c9af3",
+              hover: "#91b3f6",
+              active: "#91b3f6",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var3: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#FB64D6",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#FB64D6",
+              hover: "#FB64D6",
+              active: "#FB64D6",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var4: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#FAFF69",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#FAFF69",
+              hover: "#fdffa3",
+              active: "#fdffa3",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var5: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#66FFE5",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#66FFE5",
+              hover: "#99FFEE",
+              active: "#99FFEE",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var6: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#BB33FF",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#CC66FF",
+              hover: "#CC66FF",
+              active: "#CC66FF",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          }
+        },
         background: {
           "default": "rgb(17.8% 17.8% 17.8%)",
           hover: "rgb(17.8% 17.8% 17.8%)",
@@ -42707,7 +42856,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       },
       icon: {
-        background: "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);"
+        background: "linear-gradient(132deg, #FAFF69 8%, #292929 30%);"
       }
     }
   };
@@ -43307,6 +43456,148 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     },
     checkbox: {
       color: {
+        variations: {
+          "default": {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#161517",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#b3b6bd",
+              hover: "#b3b6bd",
+              active: "#161517",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var1: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#62de85",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#62de85",
+              hover: "#66FF73",
+              active: "#66FF73",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var2: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#6c9af3",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#6c9af3",
+              hover: "#6c9af3",
+              active: "#6c9af3",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var3: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#FB64D6",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#FB64D6",
+              hover: "#FB64D6",
+              active: "#FB64D6",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var4: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#ffb864",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#ffb864",
+              hover: "#ffb864",
+              active: "#ffb864",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var5: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#00CCAA",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#00CCAA",
+              hover: "#00CCAA",
+              active: "#00CCAA",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var6: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#CC66FF",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#CC66FF",
+              hover: "#BB33FF",
+              active: "#BB33FF",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          }
+        },
         background: {
           "default": "#f6f7fa",
           hover: "#f6f7fa",
@@ -44123,7 +44414,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     chart: {
       bars: {
         color: {
-          green: "#00FF15",
+          green: "#62de85",
           blue: "#6c9af3",
           fuchsia: "#FB64D6",
           orange: "#ffb864",
@@ -44191,7 +44482,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       },
       chart: {
         bars: {
-          green: "#00FF15",
+          green: "#62de85",
           blue: "#6c9af3",
           fuchsia: "#FB64D6",
           orange: "#ffb864",
@@ -44206,7 +44497,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       },
       icon: {
-        background: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
+        background: "linear-gradient(132deg, #FFFFFF 8%, #292929 30%);"
       }
     }
   };
@@ -45279,6 +45570,154 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       },
       color: {
+        variations: {
+          "default": {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#161517",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#b3b6bd",
+              hover: "#b3b6bd",
+              active: "#161517",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            },
+            label: {
+              "default": "#161517",
+              hover: "#161517",
+              active: "#161517",
+              disabled: "#a0a0a0"
+            }
+          },
+          var1: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#62de85",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#62de85",
+              hover: "#66FF73",
+              active: "#66FF73",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var2: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#6c9af3",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#6c9af3",
+              hover: "#6c9af3",
+              active: "#6c9af3",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var3: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#FB64D6",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#FB64D6",
+              hover: "#FB64D6",
+              active: "#FB64D6",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var4: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#ffb864",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#ffb864",
+              hover: "#ffb864",
+              active: "#ffb864",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var5: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#00CCAA",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#00CCAA",
+              hover: "#00CCAA",
+              active: "#00CCAA",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var6: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#CC66FF",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#CC66FF",
+              hover: "#BB33FF",
+              active: "#BB33FF",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          }
+        },
         background: {
           "default": "#f6f7fa",
           hover: "#f6f7fa",
@@ -46990,7 +47429,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     chart: {
       bars: {
         color: {
-          green: "#00FF15",
+          green: "#62de85",
           blue: "#6c9af3",
           fuchsia: "#FB64D6",
           orange: "#ffb864",
@@ -47096,7 +47535,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       },
       chart: {
         bars: {
-          green: "#00FF15",
+          green: "#62de85",
           blue: "#6c9af3",
           fuchsia: "#FB64D6",
           orange: "#ffb864",
@@ -47111,7 +47550,11 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       },
       icon: {
-        background: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
+        background: "linear-gradient(132deg, #FFFFFF 8%, #292929 30%);"
+      },
+      gradients: {
+        yellowToBlack: "linear-gradient(132deg, #faff69 8%, #292929 30%)",
+        whiteToBlack: "linear-gradient(132deg, #ffffff 8%, #292929 30%)"
       }
     }
   };
@@ -47229,8 +47672,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     },
     gradients: {
       base: "linear-gradient(229.65deg, #292924 15.78%, #0F0F0F 88.39%)",
-      yellowToblack: "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);",
-      whiteToblack: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);",
+      yellowToblack: "linear-gradient(132deg, #FAFF69 8%, #292929 30%);",
+      whiteToblack: "linear-gradient(132deg, #FFFFFF 8%, #292929 30%);",
       transparent: "rgba(0,0,0,0)"
     },
     utility: {
@@ -47824,7 +48267,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.RadioGroup = RadioGroup;
   exports2.SearchField = SearchField;
   exports2.Select = Select;
-  exports2.Separator = Separator$1;
+  exports2.Separator = Separator;
   exports2.SidebarCollapsibleItem = SidebarCollapsibleItem;
   exports2.SidebarCollapsibleTitle = SidebarCollapsibleTitle;
   exports2.SidebarNavigationItem = SidebarNavigationItem;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,8 +1,11 @@
 import { ReactNode } from 'react';
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
+type CheckboxVariants = "default" | "var1" | "var2" | "var3" | "var4" | "var5" | "var6";
 export interface CheckboxProps extends RadixCheckbox.CheckboxProps {
     label?: ReactNode;
     orientation?: "vertical" | "horizontal";
+    variant?: CheckboxVariants;
     dir?: "start" | "end";
 }
-export declare const Checkbox: ({ id, label, disabled, orientation, dir, ...delegated }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ id, label, variant, disabled, orientation, dir, ...delegated }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};