@webstudio-is/sdk-components-react-radix 0.220.0 → 0.222.0

package/lib/label.ws.js

@@ -1,16 +1,12 @@
 import { LabelIcon as o } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
 import { label as r } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/label.props.js";
-const a = {
+import { props as t } from "./__generated__/label.props.js";
+const m = {
   icon: o,
-  states: t,
-  presetStyle: {
-    label: r
-  },
+  presetStyle: { label: r },
   initialProps: ["id", "class", "for"],
-  props: e
+  props: t
 };
 export {
-  a as meta
+  m as meta
 };

package/lib/popover.js

@@ -1,49 +1,52 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as c, Children as P } from "react";
-import * as i from "@radix-ui/react-popover";
-import { getClosestInstance as p } from "@webstudio-is/react-sdk/runtime";
-const v = c((o, t) => /* @__PURE__ */ n(i.Root, { ...o })), d = c(({ children: o, ...t }, e) => {
-  const r = P.toArray(o)[0];
-  return /* @__PURE__ */ n(i.Trigger, { asChild: !0, ref: e, ...t, children: r ?? /* @__PURE__ */ n("button", { children: "Add button or link" }) });
-}), h = c(
-  ({ sideOffset: o = 4, align: t = "center", hideWhenDetached: e = !0, ...r }, a) => /* @__PURE__ */ n(i.Portal, { children: /* @__PURE__ */ n(
-    i.Content,
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as p, useState as f, useEffect as P, Children as l } from "react";
+import * as s from "@radix-ui/react-popover";
+import { getClosestInstance as a } from "@webstudio-is/react-sdk/runtime";
+const h = p((t, n) => {
+  const o = t.open ?? !1, [e, i] = f(o);
+  return P(() => i(o), [o]), /* @__PURE__ */ r(s.Root, { ...t, open: e, onOpenChange: i });
+}), u = p(({ children: t, ...n }, o) => {
+  const e = l.toArray(t)[0];
+  return /* @__PURE__ */ r(s.Trigger, { asChild: !0, ref: o, ...n, children: e ?? /* @__PURE__ */ r("button", { children: "Add button or link" }) });
+}), C = p(
+  ({ sideOffset: t = 4, align: n = "center", hideWhenDetached: o = !0, ...e }, i) => /* @__PURE__ */ r(s.Portal, { children: /* @__PURE__ */ r(
+    s.Content,
     {
-      ref: a,
+      ref: i,
       align: "center",
-      sideOffset: o,
-      hideWhenDetached: e,
-      ...r
+      sideOffset: t,
+      hideWhenDetached: o,
+      ...e
     }
   ) })
-), C = i.Close, s = "@webstudio-is/sdk-components-react-radix", g = {
-  onNavigatorUnselect: (o, t) => {
-    for (const e of t.instancePath)
-      if (e.component === `${s}:PopoverContent`) {
-        const r = p(
-          t.instancePath,
-          e,
-          `${s}:Popover`
+), g = s.Close, c = "@webstudio-is/sdk-components-react-radix", $ = {
+  onNavigatorUnselect: (t, n) => {
+    for (const o of n.instancePath)
+      if (o.component === `${c}:PopoverContent`) {
+        const e = a(
+          n.instancePath,
+          o,
+          `${c}:Popover`
         );
-        r && o.setMemoryProp(r, "open", void 0);
+        e && t.setMemoryProp(e, "open", void 0);
       }
   },
-  onNavigatorSelect: (o, t) => {
-    for (const e of t.instancePath)
-      if (e.component === `${s}:PopoverContent`) {
-        const r = p(
-          t.instancePath,
-          e,
-          `${s}:Popover`
+  onNavigatorSelect: (t, n) => {
+    for (const o of n.instancePath)
+      if (o.component === `${c}:PopoverContent`) {
+        const e = a(
+          n.instancePath,
+          o,
+          `${c}:Popover`
         );
-        r && o.setMemoryProp(r, "open", !0);
+        e && t.setMemoryProp(e, "open", !0);
       }
   }
 };
 export {
-  v as Popover,
-  C as PopoverClose,
-  h as PopoverContent,
-  d as PopoverTrigger,
-  g as hooksPopover
+  h as Popover,
+  g as PopoverClose,
+  C as PopoverContent,
+  u as PopoverTrigger,
+  $ as hooksPopover
 };

package/lib/popover.ws.js

@@ -1,17 +1,16 @@
 import { PopoverIcon as e, TriggerIcon as t, ContentIcon as n, ButtonElementIcon as r } from "@webstudio-is/icons/svg";
-import { defaultStates as p } from "@webstudio-is/sdk";
-import { div as s, button as i } from "@webstudio-is/sdk/normalize.css";
+import { div as p, button as i } from "@webstudio-is/sdk/normalize.css";
 import { radix as o } from "./shared/meta.js";
-import { propsPopover as c, propsPopoverTrigger as a, propsPopoverContent as l, propsPopoverClose as d } from "./__generated__/popover.props.js";
-import { buttonReset as m } from "./shared/preset-styles.js";
-const y = {
+import { propsPopover as s, propsPopoverTrigger as c, propsPopoverContent as a, propsPopoverClose as l } from "./__generated__/popover.props.js";
+import { buttonReset as d } from "./shared/preset-styles.js";
+const C = {
   icon: t,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  props: a
-}, h = {
+  props: c
+}, y = {
   icon: n,
   contentModel: {
     category: "none",
@@ -19,11 +18,11 @@ const y = {
     descendants: [o.PopoverClose]
   },
   presetStyle: {
-    div: s
+    div: p
   },
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
-  props: l
-}, b = {
+  props: a
+}, h = {
   icon: e,
   contentModel: {
     category: "instance",
@@ -31,23 +30,22 @@ const y = {
     descendants: [o.PopoverTrigger, o.PopoverContent]
   },
   initialProps: ["open"],
-  props: c
-}, I = {
+  props: s
+}, u = {
   icon: r,
   label: "Close Button",
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: p,
   presetStyle: {
-    button: [m, i].flat()
+    button: [d, i].flat()
   },
-  props: d
+  props: l
 };
 export {
-  b as metaPopover,
-  I as metaPopoverClose,
-  h as metaPopoverContent,
-  y as metaPopoverTrigger
+  h as metaPopover,
+  u as metaPopoverClose,
+  y as metaPopoverContent,
+  C as metaPopoverTrigger
 };

package/lib/radio-group.js

@@ -1,16 +1,12 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { Item as i, Indicator as p, Root as u } from "@radix-ui/react-radio-group";
-import { useControllableState as d } from "@radix-ui/react-use-controllable-state";
-const R = n(({ defaultValue: r, ...o }, t) => {
-  const [a, e] = d({
-    prop: o.value ?? r ?? "",
-    defaultProp: ""
-  });
-  return /* @__PURE__ */ m(u, { ...o, value: a, onValueChange: e, ref: t });
-}), I = i, G = p;
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as c, useState as i, useEffect as m } from "react";
+import { Item as s, Indicator as f, Root as d } from "@radix-ui/react-radio-group";
+const I = c(({ defaultValue: r, ...t }, a) => {
+  const o = t.value ?? r ?? "", [u, e] = i(o);
+  return m(() => e(o), [o]), /* @__PURE__ */ n(d, { ...t, ref: a, value: u, onValueChange: e });
+}), G = s, V = f;
 export {
-  R as RadioGroup,
-  G as RadioGroupIndicator,
-  I as RadioGroupItem
+  I as RadioGroup,
+  V as RadioGroupIndicator,
+  G as RadioGroupItem
 };

package/lib/radio-group.ws.js

@@ -1,61 +1,49 @@
-import { RadioGroupIcon as o, ItemIcon as r, TriggerIcon as a } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { div as n, button as c, span as s } from "@webstudio-is/sdk/normalize.css";
-import { radix as e } from "./shared/meta.js";
-import { buttonReset as i } from "./shared/preset-styles.js";
-import { propsRadioGroup as p, propsRadioGroupItem as d, propsRadioGroupIndicator as l } from "./__generated__/radio-group.props.js";
-const y = {
-  icon: o,
+import { RadioGroupIcon as e, ItemIcon as t, TriggerIcon as r } from "@webstudio-is/icons/svg";
+import { div as n, button as a, span as i } from "@webstudio-is/sdk/normalize.css";
+import { radix as o } from "./shared/meta.js";
+import { buttonReset as c } from "./shared/preset-styles.js";
+import { propsRadioGroup as p, propsRadioGroupItem as d, propsRadioGroupIndicator as s } from "./__generated__/radio-group.props.js";
+const G = {
+  icon: e,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [e.RadioGroupItem]
+    descendants: [o.RadioGroupItem]
   },
   states: [
-    ...t,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
   ],
   presetStyle: {
     div: n
   },
   initialProps: ["id", "class", "name", "value", "required"],
   props: p
-}, g = {
-  icon: r,
+}, h = {
+  icon: t,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [e.RadioGroupIndicator]
+    descendants: [o.RadioGroupIndicator]
   },
-  states: t,
   presetStyle: {
-    button: [c, i].flat()
+    button: [a, c].flat()
   },
   initialProps: ["value"],
   props: d
-}, h = {
-  icon: a,
+}, f = {
+  icon: r,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  states: t,
   presetStyle: {
-    span: s
+    span: i
   },
-  props: l
+  props: s
 };
 export {
-  y as metaRadioGroup,
-  h as metaRadioGroupIndicator,
-  g as metaRadioGroupItem
+  G as metaRadioGroup,
+  f as metaRadioGroupIndicator,
+  h as metaRadioGroupItem
 };

package/lib/select.js

@@ -1,44 +1,58 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as s, useContext as l } from "react";
-import { Viewport as m, Item as p, ItemIndicator as f, ItemText as S, Root as d, Trigger as u, Value as I, Portal as P, Content as g } from "@radix-ui/react-select";
-import { ReactSdkContext as x, getClosestInstance as i } from "@webstudio-is/react-sdk/runtime";
-const v = s(({ value: e, defaultValue: t, ...o }, n) => /* @__PURE__ */ c(d, { ...o, defaultValue: e ?? t })), T = s((e, t) => {
-  const { renderer: o } = l(x);
-  return /* @__PURE__ */ c(u, { onPointerDown: o === "canvas" ? (a) => {
-    a.preventDefault();
-  } : void 0, ref: t, ...e });
-}), $ = s((e, t) => /* @__PURE__ */ c(I, { ref: t, ...e })), k = s((e, t) => /* @__PURE__ */ c(P, { children: /* @__PURE__ */ c(g, { ref: t, ...e, position: "popper" }) })), D = m, R = p, y = f, M = S, r = "@webstudio-is/sdk-components-react-radix", N = {
-  onNavigatorUnselect: (e, t) => {
-    for (const o of t.instancePath)
-      if (o.component === `${r}:SelectContent`) {
-        const n = i(
-          t.instancePath,
-          o,
-          `${r}:Select`
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as a, useState as m, useEffect as f, useContext as g } from "react";
+import { Viewport as C, Item as I, ItemIndicator as P, ItemText as h, Root as x, Trigger as V, Value as v, Portal as w, Content as T } from "@radix-ui/react-select";
+import { ReactSdkContext as $, getClosestInstance as u } from "@webstudio-is/react-sdk/runtime";
+const y = a(({ defaultOpen: t, defaultValue: e, ...n }, o) => {
+  const c = n.open ?? t ?? !1, [S, l] = m(c);
+  f(() => l(c), [c]);
+  const i = n.value ?? e ?? "", [d, p] = m(i);
+  return f(() => p(i), [i]), /* @__PURE__ */ r(
+    x,
+    {
+      ...n,
+      open: S,
+      onOpenChange: l,
+      value: d,
+      onValueChange: p
+    }
+  );
+}), M = a((t, e) => {
+  const { renderer: n } = g($);
+  return /* @__PURE__ */ r(V, { onPointerDown: n === "canvas" ? (c) => {
+    c.preventDefault();
+  } : void 0, ref: e, ...t });
+}), N = a((t, e) => /* @__PURE__ */ r(v, { ref: e, ...t })), b = a((t, e) => /* @__PURE__ */ r(w, { children: /* @__PURE__ */ r(T, { ref: e, ...t, position: "popper" }) })), j = C, E = I, U = P, _ = h, s = "@webstudio-is/sdk-components-react-radix", q = {
+  onNavigatorUnselect: (t, e) => {
+    for (const n of e.instancePath)
+      if (n.component === `${s}:SelectContent`) {
+        const o = u(
+          e.instancePath,
+          n,
+          `${s}:Select`
         );
-        n && e.setMemoryProp(n, "open", void 0);
+        o && t.setMemoryProp(o, "open", void 0);
       }
   },
-  onNavigatorSelect: (e, t) => {
-    for (const o of t.instancePath)
-      if (o.component === `${r}:SelectContent`) {
-        const n = i(
-          t.instancePath,
-          o,
-          `${r}:Select`
+  onNavigatorSelect: (t, e) => {
+    for (const n of e.instancePath)
+      if (n.component === `${s}:SelectContent`) {
+        const o = u(
+          e.instancePath,
+          n,
+          `${s}:Select`
         );
-        n && e.setMemoryProp(n, "open", !0);
+        o && t.setMemoryProp(o, "open", !0);
       }
   }
 };
 export {
-  v as Select,
-  k as SelectContent,
-  R as SelectItem,
-  y as SelectItemIndicator,
-  M as SelectItemText,
-  T as SelectTrigger,
-  $ as SelectValue,
-  D as SelectViewport,
-  N as hooksSelect
+  y as Select,
+  b as SelectContent,
+  E as SelectItem,
+  U as SelectItemIndicator,
+  _ as SelectItemText,
+  M as SelectTrigger,
+  N as SelectValue,
+  j as SelectViewport,
+  q as hooksSelect
 };

package/lib/switch.js

@@ -1,23 +1,11 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { Thumb as h, Root as a } from "@radix-ui/react-switch";
-import { useControllableState as n } from "@radix-ui/react-use-controllable-state";
-const d = f(({ defaultChecked: e, ...o }, t) => {
-  const [r, c] = n({
-    prop: o.checked ?? e ?? !1,
-    defaultProp: !1
-  });
-  return /* @__PURE__ */ m(
-    a,
-    {
-      ...o,
-      ref: t,
-      checked: r,
-      onCheckedChange: c
-    }
-  );
-}), u = h;
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as m, useState as n, useEffect as s } from "react";
+import { Thumb as d, Root as u } from "@radix-ui/react-switch";
+const C = m(({ defaultChecked: o, ...t }, r) => {
+  const e = t.checked ?? o ?? !1, [h, c] = n(e);
+  return s(() => c(e), [e]), /* @__PURE__ */ f(u, { ...t, ref: r, checked: h, onCheckedChange: c });
+}), w = d;
 export {
-  d as Switch,
-  u as SwitchThumb
+  C as Switch,
+  w as SwitchThumb
 };

package/lib/switch.ws.js

@@ -1,59 +1,40 @@
-import { SwitchIcon as t, TriggerIcon as c } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { button as o, span as a } from "@webstudio-is/sdk/normalize.css";
-import { radix as n } from "./shared/meta.js";
-import { buttonReset as s } from "./shared/preset-styles.js";
-import { propsSwitch as r, propsSwitchThumb as i } from "./__generated__/switch.props.js";
-const b = {
-  icon: t,
+import { SwitchIcon as e, TriggerIcon as t } from "@webstudio-is/icons/svg";
+import { button as c, span as o } from "@webstudio-is/sdk/normalize.css";
+import { radix as a } from "./shared/meta.js";
+import { buttonReset as n } from "./shared/preset-styles.js";
+import { propsSwitch as r, propsSwitchThumb as s } from "./__generated__/switch.props.js";
+const m = {
+  icon: e,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.SwitchThumb]
+    descendants: [a.SwitchThumb]
   },
   states: [
-    ...e,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
   ],
   presetStyle: {
-    button: [o, s].flat()
+    button: [c, n].flat()
   },
   initialProps: ["id", "class", "name", "value", "checked", "required"],
   props: r
-}, k = {
-  icon: c,
+}, b = {
+  icon: t,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
   states: [
-    ...e,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
   ],
   presetStyle: {
-    span: a
+    span: o
   },
-  props: i
+  props: s
 };
 export {
-  b as metaSwitch,
-  k as metaSwitchThumb
+  m as metaSwitch,
+  b as metaSwitchThumb
 };

package/lib/tabs.js

@@ -1,66 +1,62 @@
 import { jsx as i } from "react/jsx-runtime";
-import u from "await-interaction-response";
-import { forwardRef as c, useCallback as f } from "react";
-import { useControllableState as b } from "@radix-ui/react-use-controllable-state";
-import { List as p, Root as T, Trigger as d, Content as h } from "@radix-ui/react-tabs";
-import { getIndexWithinAncestorFromProps as g } from "@webstudio-is/sdk/runtime";
-import { getClosestInstance as l } from "@webstudio-is/react-sdk/runtime";
-const k = c(({ defaultValue: e, ...n }, o) => {
-  const [t, a] = b({
-    prop: n.value,
-    defaultProp: e ?? "",
-    onChange: n.onValueChange
-  }), s = f(
-    async (m) => {
-      await u(), a(m);
-    },
-    [a]
-  );
-  return /* @__PURE__ */ i(
-    T,
-    {
-      ref: o,
-      ...n,
-      value: t,
-      onValueChange: s
-    }
-  );
-}), w = p, y = c(({ value: e, ...n }, o) => {
-  const t = g(n);
-  return /* @__PURE__ */ i(d, { ref: o, value: e ?? t ?? "", ...n });
-}), A = c(({ value: e, ...n }, o) => {
-  const t = g(n);
-  return /* @__PURE__ */ i(h, { ref: o, value: e ?? t ?? "", ...n });
-}), r = "@webstudio-is/sdk-components-react-radix", R = {
-  onNavigatorSelect: (e, n) => {
+import f from "await-interaction-response";
+import { forwardRef as c, useState as b, useEffect as T, useCallback as d } from "react";
+import { List as p, Root as h, Trigger as v, Content as P } from "@radix-ui/react-tabs";
+import { getIndexWithinAncestorFromProps as l } from "@webstudio-is/sdk/runtime";
+import { getClosestInstance as u } from "@webstudio-is/react-sdk/runtime";
+const w = c(
+  ({ defaultValue: n, ...e }, o) => {
+    const t = e.value ?? n ?? "", [s, a] = b(t);
+    T(() => a(t), [t]);
+    const m = d(async (g) => {
+      await f(), a(g);
+    }, []);
+    return /* @__PURE__ */ i(
+      h,
+      {
+        ref: o,
+        ...e,
+        value: s,
+        onValueChange: m
+      }
+    );
+  }
+), y = p, A = c(({ value: n, ...e }, o) => {
+  const t = l(e);
+  return /* @__PURE__ */ i(v, { ref: o, value: n ?? t ?? "", ...e });
+}), R = c(({ value: n, ...e }, o) => {
+  const t = l(e);
+  return /* @__PURE__ */ i(P, { ref: o, value: n ?? t ?? "", ...e });
+}), r = "@webstudio-is/sdk-components-react-radix", W = {
+  onNavigatorSelect: (n, e) => {
     var o;
-    for (const t of n.instancePath)
+    for (const t of e.instancePath)
       if (t.component === `${r}:TabsContent` || t.component === `${r}:TabsTrigger`) {
-        const a = l(
-          n.instancePath,
+        const s = u(
+          e.instancePath,
           t,
           `${r}:Tabs`
-        ), s = e.getPropValue(t, "value") ?? ((o = e.indexesWithinAncestors.get(t.id)) == null ? void 0 : o.toString());
-        a && s && e.setMemoryProp(a, "value", s);
+        ), a = n.getPropValue(t, "value") ?? ((o = n.indexesWithinAncestors.get(t.id)) == null ? void 0 : o.toString());
+        s && a && n.setMemoryProp(s, "value", a);
       }
   },
-  onNavigatorUnselect: (e, n) => {
+  onNavigatorUnselect: (n, e) => {
     var o;
-    for (const t of n.instancePath)
+    for (const t of e.instancePath)
       if (t.component === `${r}:TabsContent` || t.component === `${r}:TabsTrigger`) {
-        const a = l(
-          n.instancePath,
+        const s = u(
+          e.instancePath,
           t,
           `${r}:Tabs`
-        ), s = e.getPropValue(t, "value") ?? ((o = e.indexesWithinAncestors.get(t.id)) == null ? void 0 : o.toString());
-        a && s && e.setMemoryProp(a, "value", void 0);
+        ), a = n.getPropValue(t, "value") ?? ((o = n.indexesWithinAncestors.get(t.id)) == null ? void 0 : o.toString());
+        s && a && n.setMemoryProp(s, "value", void 0);
       }
   }
 };
 export {
-  k as Tabs,
-  A as TabsContent,
-  w as TabsList,
-  y as TabsTrigger,
-  R as hooksTabs
+  w as Tabs,
+  R as TabsContent,
+  y as TabsList,
+  A as TabsTrigger,
+  W as hooksTabs
 };

package/lib/tabs.template.js

@@ -1,7 +1,7 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { PlaceholderValue as o, css as a } from "@webstudio-is/template";
 import { radix as e } from "./shared/proxy.js";
-import { height as g, borderRadius as l, colors as n, spacing as i, fontSize as h, fontSizeLineHeight as u, weights as b, transition as p, boxShadow as r, opacity as m } from "./shared/theme.js";
+import { height as g, borderRadius as l, colors as n, spacing as i, fontSize as h, fontSizeLineHeight as b, weights as p, transition as u, boxShadow as r, opacity as m } from "./shared/theme.js";
 const d = a`
   display: inline-flex;
   align-items: center;
@@ -10,9 +10,9 @@ const d = a`
   border-radius: ${l.md};
   padding: ${i[1.5]} ${i[3]};
   font-size: ${h.sm};
-  line-height: ${u.sm};
-  font-weight: ${b.medium};
-  transition: ${p.all};
+  line-height: ${b.sm};
+  font-weight: ${p.medium};
+  transition: ${u.all};
   &:focus-visible {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -37,7 +37,7 @@ const d = a`
   category: "radix",
   description: "A set of panels with content that are displayed one at a time. Duplicate both a tab trigger and tab content to add more tabs. Triggers and content are connected according to their order in the Navigator.",
   order: 2,
-  template: /* @__PURE__ */ s(e.Tabs, { defaultValue: "0", children: [
+  template: /* @__PURE__ */ s(e.Tabs, { value: "0", children: [
     /* @__PURE__ */ s(
       e.TabsList,
       {