@cognite/aura 0.1.5 → 0.1.7

package/dist/components/ui/core/accordion/accordion.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps } from 'react';
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+import { Icon } from '@tabler/icons-react';
+type AccordionCommonProps = Omit<ComponentProps<typeof AccordionPrimitive.Root>, 'multiple' | 'value' | 'defaultValue' | 'onValueChange'>;
+type AccordionSingleProps = {
+    type?: 'single';
+    collapsible?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+type AccordionMultipleProps = {
+    type: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+declare const Accordion: import('react').ForwardRefExoticComponent<(Omit<AccordionCommonProps & AccordionSingleProps, "ref"> | Omit<AccordionCommonProps & AccordionMultipleProps, "ref">) & import('react').RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionTriggerProps & {
+    icon?: Icon;
+}, "ref"> & import('react').RefAttributes<HTMLElement>>;
+declare const AccordionContent: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionPanelProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/ui/core/accordion/accordion.js

@@ -0,0 +1,113 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { Accordion as r } from "@base-ui/react/accordion";
+import { IconChevronDown as A } from "@tabler/icons-react";
+import { cn as u } from "../../../../lib/utils.js";
+const w = d((e, t) => {
+  if (e.type === "multiple") {
+    const {
+      type: s,
+      value: c,
+      defaultValue: b,
+      onValueChange: f,
+      ...x
+    } = e;
+    return /* @__PURE__ */ o(
+      r.Root,
+      {
+        ref: t,
+        "data-slot": "accordion",
+        multiple: !0,
+        value: c,
+        defaultValue: b,
+        onValueChange: (y) => {
+          if (!f) return;
+          const N = y.filter(
+            (V) => V != null
+          );
+          f(N);
+        },
+        ...x
+      }
+    );
+  }
+  const {
+    type: a,
+    collapsible: i = !1,
+    value: l,
+    defaultValue: n,
+    onValueChange: g,
+    ...p
+  } = e, h = l === void 0 ? void 0 : l === "" ? [] : [l], v = n === void 0 ? void 0 : n === "" ? [] : [n];
+  return /* @__PURE__ */ o(
+    r.Root,
+    {
+      ref: t,
+      "data-slot": "accordion",
+      multiple: !1,
+      value: h,
+      defaultValue: v,
+      onValueChange: (s, c) => {
+        if (g) {
+          if (!i && s.length === 0) {
+            c.cancel();
+            return;
+          }
+          g(s[0] ?? "");
+        }
+      },
+      ...p
+    }
+  );
+});
+w.displayName = "Accordion";
+const C = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+  r.Item,
+  {
+    ref: a,
+    "data-slot": "accordion-item",
+    className: u("mt-2 first:mt-0 rounded-md", e),
+    ...t
+  }
+));
+C.displayName = "AccordionItem";
+const k = d(({ className: e, children: t, icon: a, ...i }, l) => {
+  const n = a;
+  return /* @__PURE__ */ o(r.Header, { className: "flex", children: /* @__PURE__ */ m(
+    r.Trigger,
+    {
+      ref: l,
+      "data-slot": "accordion-trigger",
+      className: u(
+        "focus-visible:border-ring focus-visible:ring-ring-shadow group/accordion-trigger flex flex-1 items-center justify-between gap-4.5 rounded-lg px-3 py-2 text-left hover:bg-muted-background hover:text-foreground focus-visible:ring text-base font-normal tracking-tightest transition-all outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-disabled-foreground aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:text-disabled-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground",
+        e
+      ),
+      ...i,
+      children: [
+        /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+          n && /* @__PURE__ */ o(n, { className: "pointer-events-none size-4 shrink-0 transition-transform duration-200" }),
+          /* @__PURE__ */ o("span", { children: t })
+        ] }),
+        /* @__PURE__ */ o(A, { className: "pointer-events-none size-4 shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-180" })
+      ]
+    }
+  ) });
+});
+k.displayName = "AccordionTrigger";
+const I = d(({ className: e, children: t, ...a }, i) => /* @__PURE__ */ o(
+  r.Panel,
+  {
+    ref: i,
+    "data-slot": "accordion-content",
+    className: "h-(--accordion-panel-height) overflow-hidden text-sm font-normal tracking-tightest text-secondary-foreground transition-all duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0",
+    ...a,
+    children: /* @__PURE__ */ o("div", { className: u("px-3 pb-3 pt-2", e), children: t })
+  }
+));
+I.displayName = "AccordionContent";
+export {
+  w as Accordion,
+  I as AccordionContent,
+  C as AccordionItem,
+  k as AccordionTrigger
+};

package/dist/components/ui/core/accordion/accordion.metadata.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../../../lib/types';
+export declare const AccordionMetadata: ComponentMeta;

package/dist/components/ui/core/accordion/accordion.metadata.js

@@ -0,0 +1,9 @@
+const o = {
+  name: "Accordion",
+  status: "experimental",
+  description: "An accessible accordion with smooth expand/collapse built on Base UI primitives.",
+  llmUsage: "Use `<Accordion>` with `<AccordionItem>`, `<AccordionTrigger>`, and `<AccordionContent>` for collapsible sections."
+};
+export {
+  o as AccordionMetadata
+};

package/dist/components/ui/core/alert/alert.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 type AlertVariant = 'default' | 'secondary' | 'warning' | 'error';
 declare const alertVariants: (props?: ({
@@ -9,6 +9,7 @@ type AlertProps = ComponentProps<'div'> & Omit<VariantProps<typeof alertVariants
     visible?: boolean;
     defaultVisible?: boolean;
     onClose?: () => void;
+    icon?: ReactNode;
 };
 declare const Alert: import('react').ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/ui/core/alert/alert.js

@@ -1,180 +1,204 @@
-import { jsx as o, jsxs as m } from "react/jsx-runtime";
-import { createContext as y, forwardRef as n, useMemo as A, useContext as d } from "react";
-import { IconX as b } from "@tabler/icons-react";
-import { cva as N } from "class-variance-authority";
-import { useControllableState as C } from "../../../../lib/use-controllable-state.js";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { createContext as N, forwardRef as n, useMemo as k, useContext as u } from "react";
+import { IconX as C, IconInfoCircle as I, IconAlertHexagon as V, IconAlertTriangle as _ } from "@tabler/icons-react";
+import { cva as h } from "class-variance-authority";
+import { useControllableState as z } from "../../../../lib/use-controllable-state.js";
 import { cn as s } from "../../../../lib/utils.js";
-import { Button as p } from "../button/button.js";
-const i = y({
+import { Button as x } from "../button/button.js";
+const i = N({
   show: !0,
   setShow: () => {
   },
   variant: "default"
-}), V = N(
-  "relative w-full rounded-md pt-2.5 pr-3 has-[>button[data-slot=alert-close]]:pr-12 pb-2 pl-3 text-sm grid has-[>svg]:grid-cols-[auto_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-2 has-[>svg]:gap-y-1 items-start [&>svg]:size-4 [&>svg]:translate-y-0.65 [&>svg]:shrink-0",
+}), j = h(
+  [
+    "[&_svg]:shrink-0",
+    "[&_svg:not([class*='size-']):not([class*='w-'])]:w-3.5",
+    "[&_svg:not([class*='size-']):not([class*='h-'])]:h-3.5",
+    "[&_svg:not([class*='mt-'])]:mt-0.5"
+  ].join(" ")
+), D = h(
+  "relative w-full rounded-md pt-2.5 pr-3 has-[>button[data-slot=alert-close]]:pr-12 pb-2 pl-3 text-sm grid has-[>[data-slot=alert-icon]]:grid-cols-[auto_1fr] grid-cols-[0_1fr] has-[>[data-slot=alert-icon]]:gap-x-2 has-[>[data-slot=alert-icon]]:gap-y-1 items-start",
   {
     variants: {
       variant: {
-        default: "bg-undefined-alternative text-card-foreground [&>svg]:text-undefined-foreground",
-        secondary: "bg-neutral-alternative text-foreground [&>svg]:text-neutral-foreground",
-        warning: "bg-warning-alternative [&>svg]:text-warning-foreground",
-        error: "bg-destructive-alternative text-foreground [&>svg]:text-destructive-foreground"
+        default: "bg-neutral-muted-background text-foreground [&>[data-slot=alert-icon]]:text-info-foreground",
+        secondary: "bg-info-muted-background text-foreground [&>[data-slot=alert-icon]]:text-info-foreground",
+        warning: "bg-warning-muted-background [&>[data-slot=alert-icon]]:text-warning-foreground",
+        error: "bg-destructive-muted-background text-foreground [&>[data-slot=alert-icon]]:text-destructive-foreground"
       }
     },
     defaultVariants: {
       variant: "default"
     }
   }
-), k = n(
+);
+function S(r) {
+  const t = { "aria-hidden": !0 };
+  switch (r) {
+    case "warning":
+      return /* @__PURE__ */ e(_, { ...t });
+    case "error":
+      return /* @__PURE__ */ e(V, { ...t });
+    default:
+      return /* @__PURE__ */ e(I, { ...t });
+  }
+}
+const T = n(
   ({
-    className: t,
-    variant: e = "default",
-    visible: r,
-    defaultVisible: a = !0,
+    className: r,
+    variant: t = "default",
+    visible: a,
+    defaultVisible: o = !0,
     onClose: l,
-    children: c,
-    ...u
-  }, x) => {
-    const [g, v] = C({
-      defaultProp: a,
-      prop: r,
+    icon: c,
+    children: g,
+    ...w
+  }, A) => {
+    const [f, m] = z({
+      defaultProp: o,
+      prop: a,
       onChange: l
-    }), f = e ?? "default", w = A(
-      () => ({ show: g, setShow: v, variant: f }),
-      [g, v, f]
+    }), d = t ?? "default", y = k(
+      () => ({ show: f, setShow: m, variant: d }),
+      [f, m, d]
     );
-    return g ? /* @__PURE__ */ o(i.Provider, { value: w, children: /* @__PURE__ */ m(
+    if (!f)
+      return null;
+    const v = c !== void 0 ? c : S(d);
+    return /* @__PURE__ */ e(i.Provider, { value: y, children: /* @__PURE__ */ p(
       "div",
       {
-        ref: x,
+        ref: A,
         "data-slot": "alert",
         role: "alert",
-        className: s(V({ variant: f }), t),
-        ...u,
+        className: s(D({ variant: d }), r),
+        ...w,
         children: [
-          l && /* @__PURE__ */ o(h, {}),
-          c
+          l && /* @__PURE__ */ e(b, {}),
+          v && /* @__PURE__ */ e("span", { "data-slot": "alert-icon", className: j(), children: v }),
+          g
         ]
       }
-    ) }) : null;
+    ) });
   }
 );
-k.displayName = "Alert";
-const z = {
-  default: "text-undefined-foreground",
-  secondary: "text-neutral-foreground",
+T.displayName = "Alert";
+const B = {
+  default: "text-info-foreground",
+  secondary: "text-info-foreground",
   warning: "text-warning-foreground",
   error: "text-destructive-foreground"
-}, S = n(
-  ({ className: t, ...e }, r) => {
-    const { variant: a } = d(i);
-    return /* @__PURE__ */ o(
+}, P = n(
+  ({ className: r, ...t }, a) => {
+    const { variant: o } = u(i);
+    return /* @__PURE__ */ e(
       "div",
       {
-        ref: r,
+        ref: a,
         "data-slot": "alert-title",
         className: s(
-          "text-base font-medium leading-5 tracking-tightest",
-          z[a],
-          t
+          "col-start-2 text-base font-medium leading-5 tracking-tightest",
+          B[o],
+          r
         ),
-        ...e
+        ...t
       }
     );
   }
 );
-S.displayName = "AlertTitle";
-const j = {
-  default: "text-card-foreground",
+P.displayName = "AlertTitle";
+const H = {
+  default: "text-foreground",
   secondary: "text-foreground",
-  warning: "text-card-foreground",
+  warning: "text-foreground",
   error: "text-foreground"
-}, B = n(
-  ({ className: t, ...e }, r) => {
-    const { variant: a } = d(i);
-    return /* @__PURE__ */ o(
+}, M = n(
+  ({ className: r, ...t }, a) => {
+    const { variant: o } = u(i);
+    return /* @__PURE__ */ e(
       "div",
       {
-        ref: r,
+        ref: a,
         "data-slot": "alert-description",
         className: s(
           "col-start-2 grid justify-items-start gap-1 text-sm font-normal leading-4.5 tracking-tight items-center",
-          j[a],
-          t
+          H[o],
+          r
         ),
-        ...e
+        ...t
       }
     );
   }
 );
-B.displayName = "AlertDescription";
-const D = n(
-  ({ className: t, ...e }, r) => /* @__PURE__ */ o(
+M.displayName = "AlertDescription";
+const R = n(
+  ({ className: r, ...t }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: r,
+      ref: a,
       "data-slot": "alert-actions",
       className: s(
         "col-start-2 flex flex-wrap items-start gap-2 pt-1",
-        t
+        r
       ),
-      ...e
+      ...t
     }
   )
 );
-D.displayName = "AlertActions";
-const T = n(({ className: t, ...e }, r) => {
-  const { variant: a } = d(i);
-  return /* @__PURE__ */ o(
-    p,
+R.displayName = "AlertActions";
+const X = n(({ className: r, ...t }, a) => {
+  const { variant: o } = u(i);
+  return /* @__PURE__ */ e(
+    x,
     {
-      ref: r,
+      ref: a,
       "data-slot": "alert-button",
       variant: "ghost",
       size: "sm",
       className: s("text-foreground", {
-        default: "hover:bg-undefined-hover",
-        secondary: "hover:bg-neutral-hover",
-        warning: "hover:bg-warning-hover",
-        error: "hover:bg-destructive-hover"
-      }[a], t),
-      ...e
+        default: "hover:bg-neutral-background-hover",
+        secondary: "hover:bg-info-background-hover",
+        warning: "hover:bg-warning-background-hover",
+        error: "hover:bg-destructive-background-hover"
+      }[o], r),
+      ...t
     }
   );
 });
-T.displayName = "AlertButton";
-const h = n(
-  ({ className: t, onClick: e, ...r }, a) => {
-    const { setShow: l } = d(i), c = (u) => {
-      l(!1), e?.(u);
+X.displayName = "AlertButton";
+const b = n(
+  ({ className: r, onClick: t, ...a }, o) => {
+    const { setShow: l } = u(i), c = (g) => {
+      l(!1), t?.(g);
     };
-    return /* @__PURE__ */ m(
-      p,
+    return /* @__PURE__ */ p(
+      x,
       {
-        ref: a,
+        ref: o,
         "data-slot": "alert-close",
         variant: "ghost",
         size: "icon-sm",
         className: s(
           "absolute top-3 right-4 h-3.5 w-3.5 p-0 opacity-70 hover:opacity-100 text-foreground",
-          t
+          r
         ),
         onClick: c,
-        ...r,
+        ...a,
         children: [
-          /* @__PURE__ */ o(b, { size: 14 }),
-          /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ e(C, { size: 14 }),
+          /* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
         ]
       }
     );
   }
 );
-h.displayName = "AlertClose";
+b.displayName = "AlertClose";
 export {
-  k as Alert,
-  D as AlertActions,
-  T as AlertButton,
-  h as AlertClose,
-  B as AlertDescription,
-  S as AlertTitle
+  T as Alert,
+  R as AlertActions,
+  X as AlertButton,
+  b as AlertClose,
+  M as AlertDescription,
+  P as AlertTitle
 };

package/dist/components/ui/core/alert/alert.metadata.js

@@ -2,7 +2,7 @@ const e = {
   name: "Alert",
   status: "in-progress-code-review",
   description: "A dismissible alert component with multiple variants for displaying messages.",
-  llmUsage: "Use `<Alert>` with `<AlertTitle>` and `<AlertDescription>` for informational messages."
+  llmUsage: "Use `<Alert>` with optional `icon` prop (defaults to a variant-appropriate icon), plus `<AlertTitle>` and `<AlertDescription>`, for informational messages. Pass `icon={null}` to suppress the icon."
 };
 export {
   e as AlertMetadata

package/dist/components/ui/core/avatar/avatar.js

@@ -1,26 +1,26 @@
-import { jsx as o, jsxs as c, Fragment as v } from "react/jsx-runtime";
+import { jsx as o, jsxs as i, Fragment as v } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
 import { Avatar as n } from "@base-ui/react/avatar";
 import { cva as g } from "class-variance-authority";
 import { cn as d } from "../../../../lib/utils.js";
 const u = g(
-  "group/avatar relative inline-flex text-base font-medium leading-5 shrink-0 overflow-hidden rounded-md flex-col justify-center items-center hover:cursor-pointer box-border",
+  "group/avatar relative inline-flex text-base font-medium leading-5 shrink-0 overflow-hidden flex-col justify-center items-center box-border",
   {
     variants: {
       variant: {
-        default: "bg-decorative-background-mountain text-decorative-foreground-mountain hover:bg-decorative-background-hover-mountain",
-        nordic: "bg-decorative-background-nordic text-decorative-foreground-nordic hover:bg-decorative-background-hover-nordic",
-        aurora: "bg-decorative-background-aurora text-decorative-foreground-aurora hover:bg-decorative-background-hover-aurora",
-        fjord: "bg-decorative-background-fjord text-decorative-foreground-fjord hover:bg-decorative-background-hover-fjord",
-        dusk: "bg-decorative-background-dusk text-decorative-foreground-dusk hover:bg-decorative-background-hover-dusk",
-        orange: "bg-decorative-background-orange text-decorative-foreground-orange hover:bg-decorative-background-hover-orange",
-        sky: "bg-decorative-background-sky text-decorative-foreground-sky hover:bg-decorative-background-hover-sky",
-        overflow: "bg-secondary text-secondary-foreground hover:bg-secondary-hover"
+        default: "bg-decorative-mountain-background text-decorative-mountain-foreground hover:bg-decorative-mountain-background-hover",
+        nordic: "bg-decorative-nordic-background text-decorative-nordic-foreground hover:bg-background-hover",
+        aurora: "bg-decorative-aurora-background text-decorative-aurora-foreground hover:bg-decorative-aurora-background-hover",
+        fjord: "bg-decorative-fjord-background text-decorative-fjord-foreground hover:bg-decorative-fjord-background-hover",
+        dusk: "bg-decorative-dusk-background text-decorative-dusk-foreground hover:bg-decorative-dusk-background-hover",
+        orange: "bg-decorative-orange-background text-decorative-orange-foreground hover:bg-decorative-orange-background-hover",
+        sky: "bg-decorative-sky-background text-decorative-sky-foreground hover:bg-decorative-sky-background-hover",
+        overflow: "bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover"
       },
       sizes: {
-        default: "size-9 text-sm [&_svg]:w-5 [&_svg]:h-5",
-        xsm: "size-7 text-xs [&_svg]:w-4 [&_svg]:h-4",
-        xxsm: "size-5 text-2xs [&_svg]:w-3 [&_svg]:h-3"
+        default: "size-9 rounded-lg text-sm [&_svg]:w-5 [&_svg]:h-5",
+        xsm: "size-7 rounded-md text-xs [&_svg]:w-4 [&_svg]:h-4",
+        xxsm: "size-5 rounded-sm text-2xs [&_svg]:w-3 [&_svg]:h-3"
       }
     },
     defaultVariants: {
@@ -28,23 +28,26 @@ const u = g(
       sizes: "default"
     }
   }
-), l = t(({ className: a, variant: e, sizes: r, ...s }, i) => /* @__PURE__ */ o(
+), l = t(({ className: a, variant: e, sizes: r, ...s }, c) => /* @__PURE__ */ o(
   n.Root,
   {
-    ref: i,
+    ref: c,
     "data-slot": "avatar",
     className: d(u({ variant: e, sizes: r }), a),
     ...s
   }
 ));
 l.displayName = "Avatar";
-const b = t(({ className: a, ...e }, r) => /* @__PURE__ */ c(v, { children: [
+const b = t(({ className: a, ...e }, r) => /* @__PURE__ */ i(v, { children: [
   /* @__PURE__ */ o(
     n.Image,
     {
       ref: r,
       "data-slot": "avatar-image",
-      className: d("aspect-square size-full", a),
+      className: d(
+        "aspect-square size-full object-cover object-center",
+        a
+      ),
       ...e
     }
   ),
@@ -52,43 +55,37 @@ const b = t(({ className: a, ...e }, r) => /* @__PURE__ */ c(v, { children: [
     "span",
     {
       "data-slot": "avatar-image-backdrop",
-      className: "absolute inset-0 bg-backdrop opacity-0 transition-opacity group-hover/avatar:opacity-100 pointer-events-none",
+      className: "absolute inset-0 bg-overlay-background opacity-0 transition-opacity group-hover/avatar:opacity-100 pointer-events-none",
       "aria-hidden": "true"
     }
   )
 ] }));
 b.displayName = "AvatarImage";
-const m = t(({ className: a, ...e }, r) => /* @__PURE__ */ o(
+const f = t(({ className: a, ...e }, r) => /* @__PURE__ */ o(
   n.Fallback,
   {
     ref: r,
     "data-slot": "avatar-fallback",
-    className: d(
-      " flex size-full items-center justify-center rounded-md",
-      a
-    ),
+    className: d(" flex size-full items-center justify-center", a),
     ...e
   }
 ));
-m.displayName = "AvatarFallback";
-const f = t(
+f.displayName = "AvatarFallback";
+const m = t(
   ({ className: a, ...e }, r) => /* @__PURE__ */ o(
     "span",
     {
       ref: r,
       "data-slot": "avatar-icon",
-      className: d(
-        "flex size-full items-center justify-center rounded-md",
-        a
-      ),
+      className: d("flex size-full items-center justify-center", a),
       ...e
     }
   )
 );
-f.displayName = "AvatarIcon";
+m.displayName = "AvatarIcon";
 export {
   l as Avatar,
-  m as AvatarFallback,
-  f as AvatarIcon,
+  f as AvatarFallback,
+  m as AvatarIcon,
   b as AvatarImage
 };

package/dist/components/ui/core/badge/badge.d.ts

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "gray" | "orange" | "nordic" | "aurora" | "fjord" | "dusk" | "sky" | "mountain" | "error" | "warning" | "success" | "inProgress" | "archived" | "closable" | null | undefined;
-    size?: "default" | "icon" | null | undefined;
+    size?: "icon" | "default" | null | undefined;
     outline?: boolean | null | undefined;
     background?: boolean | null | undefined;
     dot?: boolean | null | undefined;