@bricks-toolkit/toolkit 0.1.0 → 0.1.2

package/dist/chunk-56ILK7Y4.cjs

@@ -0,0 +1,315 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var solid = require('@heroicons/react/20/solid');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "py-1 px-2 text-xs min-h-[1.75rem]",
+  sm: "py-1.5 px-3 text-sm min-h-[2.125rem]",
+  md: "py-2 px-3 text-sm min-h-[2.5rem]",
+  lg: "py-2.5 px-4 text-base min-h-[3rem]",
+  xl: "py-3 px-4 text-lg min-h-[3.5rem]"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+var variantClasses = {
+  default: "rounded-md border border-border bg-surface shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-0 transition-all duration-normal",
+  filled: "rounded-md border border-transparent bg-surface-secondary focus-visible:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-0 transition-all duration-normal",
+  flushed: "rounded-none border-0 border-b border-border bg-transparent focus-visible:outline-none focus-visible:ring-0",
+  unstyled: "border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-0"
+};
+var stateVariantClasses = {
+  default: {
+    default: "border-border focus-visible:border-primary focus-visible:ring-primary/40",
+    filled: "focus-visible:border-primary focus-visible:ring-primary/40",
+    flushed: "border-border focus-visible:border-primary",
+    unstyled: ""
+  },
+  error: {
+    default: "border-error focus-visible:border-error focus-visible:ring-error/20",
+    filled: "bg-error/5 focus-visible:border-error focus-visible:ring-error/20",
+    flushed: "border-error focus-visible:border-error",
+    unstyled: ""
+  },
+  success: {
+    default: "border-success focus-visible:border-success focus-visible:ring-success/20",
+    filled: "bg-success/5 focus-visible:border-success focus-visible:ring-success/20",
+    flushed: "border-success focus-visible:border-success",
+    unstyled: ""
+  },
+  warning: {
+    default: "border-warning focus-visible:border-warning focus-visible:ring-warning/20",
+    filled: "bg-warning/5 focus-visible:border-warning focus-visible:ring-warning/20",
+    flushed: "border-warning focus-visible:border-warning",
+    unstyled: ""
+  }
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error font-medium",
+  success: "text-success font-medium",
+  warning: "text-warning font-medium"
+};
+var disabledClasses = "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-secondary";
+function getStateMessage(state, errorMessage, successMessage, warningMessage) {
+  if (state === "error" && errorMessage) return errorMessage;
+  if (state === "success" && successMessage) return successMessage;
+  if (state === "warning" && warningMessage) return warningMessage;
+  return void 0;
+}
+var MultiSelect = react.forwardRef(function MultiSelect2({
+  options,
+  value,
+  defaultValue = [],
+  onChange,
+  placeholder = "Select options...",
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  variant = "default",
+  size = "md",
+  state = "default",
+  fullWidth = true,
+  disabled = false,
+  isLoading = false,
+  id: idProp,
+  wrapperClassName,
+  triggerClassName,
+  dropdownClassName,
+  labelClassName,
+  helperClassName
+}, ref) {
+  const generatedId = react.useId();
+  const componentId = idProp ?? generatedId;
+  const helperId = `${componentId}-helper`;
+  const stateMessageId = `${componentId}-state`;
+  const listboxId = `${componentId}-listbox`;
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [internalValue, setInternalValue] = react.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const selectedValues = isControlled ? value : internalValue;
+  const containerRef = react.useRef(null);
+  const handleToggleOpen = () => {
+    if (disabled || isLoading) return;
+    setIsOpen((prev) => !prev);
+  };
+  const handleOptionClick = (optionValue) => {
+    let newValues;
+    if (selectedValues.includes(optionValue)) {
+      newValues = selectedValues.filter((v) => v !== optionValue);
+    } else {
+      newValues = [...selectedValues, optionValue];
+    }
+    if (!isControlled) {
+      setInternalValue(newValues);
+    }
+    onChange?.(newValues);
+  };
+  react.useEffect(() => {
+    const handleOutsideClick = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleOutsideClick);
+      document.addEventListener("touchstart", handleOutsideClick);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+      document.removeEventListener("touchstart", handleOutsideClick);
+    };
+  }, [isOpen]);
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const selectedLabels = options.filter((opt) => selectedValues.includes(opt.value)).map((opt) => opt.label);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: chunkL5VQZZVR_cjs.cn(
+        "relative flex flex-col gap-1",
+        fullWidth ? "w-full" : "w-fit",
+        isOpen && "z-[60]",
+        wrapperClassName
+      ),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: componentId,
+            className: chunkL5VQZZVR_cjs.cn(
+              "font-black leading-none text-text uppercase tracking-widest",
+              labelSizeClasses[size],
+              disabled && "opacity-50 cursor-not-allowed",
+              labelClassName
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            ref,
+            id: componentId,
+            type: "button",
+            disabled: disabled || isLoading,
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            "aria-controls": isOpen ? listboxId : void 0,
+            "aria-invalid": state === "error" ? true : void 0,
+            "aria-describedby": describedBy,
+            onClick: handleToggleOpen,
+            className: chunkL5VQZZVR_cjs.cn(
+              "w-full flex items-center justify-between text-left transition-colors duration-150",
+              sizeClasses[size],
+              variantClasses[variant],
+              stateVariantClasses[state][variant],
+              disabledClasses,
+              triggerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 truncate", children: selectedLabels.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-text font-bold leading-tight", children: selectedLabels.join(", ") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted truncate transition-all duration-normal", children: placeholder }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 ml-2 text-text-muted", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  className: "animate-spin h-4 w-4 text-text-muted",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        className: "opacity-25",
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        className: "opacity-75",
+                        fill: "currentColor",
+                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                solid.ChevronDownIcon,
+                {
+                  className: chunkL5VQZZVR_cjs.cn("w-4 h-4 transition-transform duration-200", isOpen && "rotate-180")
+                }
+              ) })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkL5VQZZVR_cjs.cn(
+              "absolute z-dropdown w-full mt-1 bg-surface border border-border rounded-md shadow-lg",
+              "max-h-60 overflow-y-auto py-1 animate-in fade-in zoom-in-95 duration-200",
+              // Position it below the trigger
+              "top-full left-0",
+              dropdownClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "ul",
+              {
+                id: listboxId,
+                role: "listbox",
+                "aria-multiselectable": "true",
+                className: "flex flex-col outline-none",
+                tabIndex: -1,
+                children: options.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: "No options available" }) : options.map((option) => {
+                  const isSelected = selectedValues.includes(option.value);
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "li",
+                    {
+                      role: "option",
+                      "aria-selected": isSelected,
+                      onClick: () => {
+                        handleOptionClick(option.value);
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handleOptionClick(option.value);
+                        }
+                      },
+                      tabIndex: 0,
+                      className: chunkL5VQZZVR_cjs.cn(
+                        "flex items-center gap-2 px-3 py-2 cursor-pointer transition-all duration-fast",
+                        "hover:bg-hover" + (isSelected ? "/60" : ""),
+                        isSelected ? "text-primary font-bold" : "text-text",
+                        labelSizeClasses[size]
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: chunkL5VQZZVR_cjs.cn(
+                              "flex shrink-0 items-center justify-center w-4 h-4 border rounded-sm transition-all duration-normal",
+                              isSelected ? "bg-primary border-primary" : "border-border"
+                            ),
+                            children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(solid.CheckIcon, { className: "w-3 h-3 text-text-inverse" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
+                      ]
+                    },
+                    option.value
+                  );
+                })
+              }
+            )
+          }
+        ),
+        (helperText !== void 0 || stateMessage !== void 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1", children: [
+          helperText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              id: helperId,
+              className: chunkL5VQZZVR_cjs.cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
+              children: helperText
+            }
+          ),
+          stateMessage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              id: stateMessageId,
+              role: state === "error" ? "alert" : void 0,
+              className: chunkL5VQZZVR_cjs.cn(
+                "text-xs leading-tight mt-1 font-medium",
+                stateMessageClasses[state],
+                helperClassName
+              ),
+              children: stateMessage
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+MultiSelect.displayName = "MultiSelect";
+
+exports.MultiSelect = MultiSelect;

package/dist/chunk-5J3OMAO4.cjs

@@ -0,0 +1,222 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var solid = require('@heroicons/react/20/solid');
+var jsxRuntime = require('react/jsx-runtime');
+
+var solidClasses = {
+  primary: "bg-primary text-text-inverse shadow-sm shadow-primary/30",
+  secondary: "bg-secondary text-text shadow-sm shadow-secondary/30",
+  success: "bg-success text-text-inverse shadow-sm shadow-success/30",
+  error: "bg-error text-text-inverse shadow-sm shadow-error/30",
+  warning: "bg-warning text-text-inverse shadow-sm shadow-warning/30",
+  info: "bg-info text-text-inverse shadow-sm shadow-info/30",
+  accent: "bg-accent text-text-inverse shadow-sm shadow-accent/30",
+  gray: "bg-surface-secondary text-text-secondary shadow-sm",
+  blue: "bg-primary text-text-inverse shadow-sm shadow-primary/30",
+  green: "bg-success text-text-inverse shadow-sm shadow-success/30",
+  red: "bg-error text-text-inverse shadow-sm shadow-error/30",
+  yellow: "bg-warning text-text-inverse shadow-sm shadow-warning/30",
+  purple: "bg-purple-600 text-white shadow-sm shadow-purple-500/30",
+  pink: "bg-pink-500 text-white shadow-sm shadow-pink-500/30",
+  orange: "bg-orange-500 text-white shadow-sm shadow-orange-500/30",
+  cyan: "bg-cyan-500 text-white shadow-sm shadow-cyan-500/30",
+  teal: "bg-teal-500 text-white shadow-sm shadow-teal-500/30",
+  indigo: "bg-indigo-500 text-white shadow-sm shadow-indigo-500/30"
+};
+var softClasses = {
+  primary: "bg-primary/10 text-primary ring-1 ring-inset ring-primary/20",
+  secondary: "bg-secondary/10 text-secondary ring-1 ring-inset ring-secondary/20",
+  success: "bg-success/10 text-success ring-1 ring-inset ring-success/20",
+  error: "bg-error/10 text-error ring-1 ring-inset ring-error/20",
+  warning: "bg-warning/10 text-warning ring-1 ring-inset ring-warning/20",
+  info: "bg-info/10 text-info ring-1 ring-inset ring-info/20",
+  accent: "bg-accent/10 text-accent ring-1 ring-inset ring-accent/20",
+  gray: "bg-surface-secondary/60 text-text-secondary ring-1 ring-inset ring-border/40",
+  blue: "bg-primary/10 text-primary ring-1 ring-inset ring-primary/20",
+  green: "bg-success/10 text-success ring-1 ring-inset ring-success/20",
+  red: "bg-error/10 text-error ring-1 ring-inset ring-error/20",
+  yellow: "bg-warning/10 text-warning ring-1 ring-inset ring-warning/20",
+  purple: "bg-purple-500/10 text-purple-500 ring-1 ring-inset ring-purple-500/25",
+  pink: "bg-pink-500/10 text-pink-500 ring-1 ring-inset ring-pink-500/25",
+  orange: "bg-orange-500/10 text-orange-500 ring-1 ring-inset ring-orange-500/25",
+  cyan: "bg-cyan-500/10 text-cyan-500 ring-1 ring-inset ring-cyan-500/25",
+  teal: "bg-teal-500/10 text-teal-500 ring-1 ring-inset ring-teal-500/25",
+  indigo: "bg-indigo-500/10 text-indigo-500 ring-1 ring-inset ring-indigo-500/25"
+};
+var outlineClasses = {
+  primary: "border border-primary/60 text-primary bg-transparent",
+  secondary: "border border-secondary/60 text-secondary bg-transparent",
+  success: "border border-success/60 text-success bg-transparent",
+  error: "border border-error/60 text-error bg-transparent",
+  warning: "border border-warning/60 text-warning bg-transparent",
+  info: "border border-info/60 text-info bg-transparent",
+  accent: "border border-accent/60 text-accent bg-transparent",
+  gray: "border border-border text-text-secondary bg-transparent",
+  blue: "border border-primary/60 text-primary bg-transparent",
+  green: "border border-success/60 text-success bg-transparent",
+  red: "border border-error/60 text-error bg-transparent",
+  yellow: "border border-warning/60 text-warning bg-transparent",
+  purple: "border border-purple-500/60 text-purple-500 bg-transparent",
+  pink: "border border-pink-500/60 text-pink-500 bg-transparent",
+  orange: "border border-orange-500/60 text-orange-500 bg-transparent",
+  cyan: "border border-cyan-500/60 text-cyan-500 bg-transparent",
+  teal: "border border-teal-500/60 text-teal-500 bg-transparent",
+  indigo: "border border-indigo-500/60 text-indigo-500 bg-transparent"
+};
+var gradientClasses = {
+  primary: "bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-sm shadow-blue-500/30",
+  secondary: "bg-gradient-to-r from-slate-500 to-slate-700 text-white shadow-sm shadow-slate-500/30",
+  success: "bg-gradient-to-r from-green-400 to-emerald-600 text-white shadow-sm shadow-green-500/30",
+  error: "bg-gradient-to-r from-red-500 to-rose-600 text-white shadow-sm shadow-red-500/30",
+  warning: "bg-gradient-to-r from-amber-400 to-orange-500 text-white shadow-sm shadow-amber-500/30",
+  info: "bg-gradient-to-r from-sky-400 to-blue-600 text-white shadow-sm shadow-blue-500/30",
+  accent: "bg-gradient-to-r from-cyan-400 to-sky-600 text-white shadow-sm shadow-cyan-500/30",
+  gray: "bg-gradient-to-r from-slate-400 to-slate-500 text-white shadow-sm",
+  blue: "bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-sm shadow-blue-500/30",
+  green: "bg-gradient-to-r from-green-400 to-emerald-600 text-white shadow-sm shadow-green-500/30",
+  red: "bg-gradient-to-r from-red-500 to-rose-600 text-white shadow-sm shadow-red-500/30",
+  yellow: "bg-gradient-to-r from-amber-400 to-orange-500 text-white shadow-sm shadow-amber-500/30",
+  purple: "bg-gradient-to-r from-purple-500 to-violet-600 text-white shadow-sm shadow-purple-500/30",
+  pink: "bg-gradient-to-r from-pink-500 to-fuchsia-600 text-white shadow-sm shadow-pink-500/30",
+  orange: "bg-gradient-to-r from-orange-400 to-red-500 text-white shadow-sm shadow-orange-500/30",
+  cyan: "bg-gradient-to-r from-cyan-400 to-sky-500 text-white shadow-sm shadow-cyan-500/30",
+  teal: "bg-gradient-to-r from-teal-400 to-cyan-500 text-white shadow-sm shadow-teal-500/30",
+  indigo: "bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-sm shadow-indigo-500/30"
+};
+var dotColorClasses = {
+  primary: "bg-primary",
+  secondary: "bg-secondary",
+  success: "bg-success",
+  error: "bg-error",
+  warning: "bg-warning",
+  info: "bg-info",
+  accent: "bg-accent",
+  gray: "bg-slate-400",
+  blue: "bg-primary",
+  green: "bg-success",
+  red: "bg-error",
+  yellow: "bg-warning",
+  purple: "bg-purple-500",
+  pink: "bg-pink-500",
+  orange: "bg-orange-500",
+  cyan: "bg-cyan-500",
+  teal: "bg-teal-500",
+  indigo: "bg-indigo-500"
+};
+var variantMap = {
+  solid: (c) => solidClasses[c],
+  soft: (c) => softClasses[c],
+  outline: (c) => outlineClasses[c],
+  gradient: (c) => gradientClasses[c]
+};
+var sizeClasses = {
+  xs: "px-1.5 py-px  text-[10px] leading-4 gap-1",
+  sm: "px-2   py-0.5 text-xs     leading-4 gap-1",
+  md: "px-2.5 py-0.5 text-xs     leading-5 gap-1",
+  lg: "px-3   py-1   text-sm     leading-5 gap-1.5"
+};
+var dotSizeClasses = {
+  xs: "w-1.5 h-1.5",
+  sm: "w-1.5 h-1.5",
+  md: "w-2   h-2",
+  lg: "w-2.5 h-2.5"
+};
+var removeSizeClasses = {
+  xs: "w-3   h-3",
+  sm: "w-3   h-3",
+  md: "w-3.5 h-3.5",
+  lg: "w-4   h-4"
+};
+var shapeClasses = {
+  rounded: "rounded-md",
+  pill: "rounded-full",
+  square: "rounded-none"
+};
+function XIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(solid.XMarkIcon, { className: "w-full h-full", "aria-hidden": "true" });
+}
+function Badge({
+  children,
+  variant = "soft",
+  color = "blue",
+  size = "md",
+  shape = "pill",
+  icon,
+  trailingIcon,
+  onRemove,
+  pulse = false,
+  count,
+  maxCount = 99,
+  uppercase = false,
+  tracking = false,
+  as: Tag = "span",
+  className,
+  ...rest
+}) {
+  const isDot = variant === "dot";
+  const colorClass = isDot ? softClasses[color] : variantMap[variant](color);
+  const countLabel = count !== void 0 ? count > maxCount ? `${maxCount.toString()}+` : String(count) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Tag,
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        // base
+        "inline-flex items-center font-medium leading-none select-none whitespace-nowrap",
+        "transition-all duration-150 ease-out",
+        sizeClasses[size],
+        shapeClasses[shape],
+        colorClass,
+        uppercase && "uppercase",
+        tracking && "tracking-wide",
+        // clickable cursor when role="button" or Tag is 'button'/'a'
+        (Tag === "button" || Tag === "a") && "cursor-pointer",
+        className
+      ),
+      ...rest,
+      children: [
+        isDot && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex shrink-0", "aria-hidden": "true", children: [
+          pulse && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunkL5VQZZVR_cjs.cn(
+                "absolute inset-0 rounded-full animate-ping opacity-60",
+                dotColorClasses[color]
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunkL5VQZZVR_cjs.cn("rounded-full shrink-0", dotSizeClasses[size], dotColorClasses[color])
+            }
+          )
+        ] }),
+        !isDot && icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "shrink-0 inline-flex", children: icon }),
+        countLabel ?? children,
+        !isDot && trailingIcon != null && onRemove == null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "shrink-0 inline-flex", children: trailingIcon }),
+        onRemove != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            className: chunkL5VQZZVR_cjs.cn(
+              "inline-flex items-center justify-center rounded-full shrink-0 -mr-0.5",
+              "opacity-70 hover:opacity-100",
+              "hover:bg-black/10 dark:hover:bg-white/15",
+              "transition-all duration-100",
+              removeSizeClasses[size]
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.Badge = Badge;