@webstudio-is/sdk-components-react-radix 0.218.0 → 0.219.0

package/lib/popover.ws.js

@@ -1,15 +1,15 @@
-import { TriggerIcon as e, ContentIcon as n, PopoverIcon as r } from "@webstudio-is/icons/svg";
+import { PopoverIcon as e, TriggerIcon as n, ContentIcon as r } from "@webstudio-is/icons/svg";
 import { div as t } from "@webstudio-is/sdk/normalize.css";
 import { radix as o } from "./shared/meta.js";
 import { propsPopover as p, propsPopoverTrigger as i, propsPopoverContent as s } from "./__generated__/popover.props.js";
 const v = {
-  icon: e,
+  icon: n,
   contentModel: {
     category: "none",
     children: ["instance"]
   }
 }, d = {
-  icon: n,
+  icon: r,
   contentModel: {
     category: "none",
     children: ["instance"]
@@ -18,7 +18,7 @@ const v = {
     div: t
   }
 }, l = {
-  icon: r,
+  icon: e,
   contentModel: {
     category: "instance",
     children: ["instance"],

package/lib/radio-group.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { Root as d, Item as p, Indicator as e } from "@radix-ui/react-radio-group";
-const u = m(({ value: o, defaultValue: r, ...t }, a) => /* @__PURE__ */ i(d, { ...t, defaultValue: o ?? r, ref: a })), R = p, s = e;
+import { Item as d, Indicator as p, Root as e } from "@radix-ui/react-radio-group";
+const u = m(({ value: o, defaultValue: r, ...t }, a) => /* @__PURE__ */ i(e, { ...t, defaultValue: o ?? r, ref: a })), R = d, s = p;
 export {
   u as RadioGroup,
   s as RadioGroupIndicator,

package/lib/select.js

@@ -1,15 +1,13 @@
 import { jsx as c } from "react/jsx-runtime";
 import { forwardRef as s, useContext as l } from "react";
-import { Root as m, Trigger as p, Value as f, Portal as S, Content as d, Viewport as u, Item as I, ItemIndicator as P, ItemText as g } from "@radix-ui/react-select";
+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(m, { ...o, defaultValue: e ?? t })
-), T = s((e, t) => {
+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(p, { onPointerDown: o === "canvas" ? (a) => {
+  return /* @__PURE__ */ c(u, { onPointerDown: o === "canvas" ? (a) => {
     a.preventDefault();
   } : void 0, ref: t, ...e });
-}), $ = s((e, t) => /* @__PURE__ */ c(f, { ref: t, ...e })), k = s((e, t) => /* @__PURE__ */ c(S, { children: /* @__PURE__ */ c(d, { ref: t, ...e, position: "popper" }) })), D = u, R = I, y = P, M = g, r = "@webstudio-is/sdk-components-react-radix", N = {
+}), $ = 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`) {

package/lib/select.ws.js

@@ -1,7 +1,7 @@
-import { SelectIcon as o, TriggerIcon as c, FormTextFieldIcon as r, ContentIcon as l, ViewportIcon as p, ItemIcon as s, CheckMarkIcon as a, TextIcon as i } from "@webstudio-is/icons/svg";
+import { SelectIcon as o, TriggerIcon as c, FormTextFieldIcon as r, ViewportIcon as l, ContentIcon as p, ItemIcon as s, CheckMarkIcon as a, TextIcon as i } from "@webstudio-is/icons/svg";
 import { button as S, span as t, div as n } from "@webstudio-is/sdk/normalize.css";
 import { radix as e } from "./shared/meta.js";
-import { propsSelect as d, propsSelectTrigger as m, propsSelectValue as I, propsSelectContent as g, propsSelectViewport as M, propsSelectItem as y, propsSelectItemIndicator as T, propsSelectItemText as h } from "./__generated__/select.props.js";
+import { propsSelect as d, propsSelectTrigger as m, propsSelectValue as I, propsSelectViewport as g, propsSelectContent as M, propsSelectItem as y, propsSelectItemIndicator as T, propsSelectItemText as h } from "./__generated__/select.props.js";
 const w = {
   icon: o,
   contentModel: {
@@ -30,7 +30,7 @@ const w = {
     span: t
   }
 }, v = {
-  icon: l,
+  icon: p,
   contentModel: {
     category: "none",
     children: ["instance"],
@@ -40,7 +40,7 @@ const w = {
     div: n
   }
 }, P = {
-  icon: p,
+  icon: l,
   contentModel: {
     category: "none",
     children: ["instance"],
@@ -88,9 +88,9 @@ const w = {
   props: I,
   initialProps: ["placeholder"]
 }, B = {
-  props: g
-}, D = {
   props: M
+}, D = {
+  props: g
 }, E = {
   props: y,
   initialProps: ["value"]

package/lib/shared/theme.js

@@ -1,15 +1,14 @@
-const o = {
+const n = {
   sm: "0.875rem",
   lg: "1.125rem"
 }, t = {
-  sm: "1.25rem",
-  lg: "1.75rem"
-}, p = {
+  sm: "1.25rem"
+}, g = {
   none: "1",
   snug: "1.375"
 }, s = {
   medium: "500"
-}, g = {
+}, c = {
   tight: "-0.025em"
 }, m = {
   0: "0px",
@@ -47,34 +46,22 @@ const o = {
   "1.5": "0.375rem",
   "2.5": "0.625rem",
   "3.5": "0.875rem"
-}, c = {
-  ...m,
-  full: "100%"
-}, x = {
+}, p = {
   ...m,
   full: "100%"
 }, i = {
-  0: "0rem",
-  xs: "20rem",
-  sm: "24rem",
-  md: "28rem",
-  lg: "32rem",
-  xl: "36rem",
-  prose: "65ch"
+  ...m
 }, b = {
-  0: "0px",
+  sm: "24rem",
+  lg: "32rem"
+}, x = {
   2: "2px",
-  4: "4px",
-  8: "8px",
   DEFAULT: "1px"
 }, d = {
   sm: "0.125rem",
   md: "0.375rem",
   full: "9999px"
 }, r = {
-  transparent: "transparent",
-  current: "currentColor",
-  inherit: "inherit",
   popover: "rgb(255, 255, 255)",
   popoverForeground: "rgb(2, 8, 23)",
   border: "rgb(226, 232, 240)",
@@ -85,58 +72,28 @@ const o = {
   muted: "hsl(210 40% 96.1%)",
   primary: "rgb(15, 23, 42)",
   primaryForeground: "hsl(210 40% 98%)",
-  destructive: "rgb(239, 68, 68)",
-  destructiveForeground: "rgb(248, 250, 252)",
   accent: "rgb(241, 245, 249)",
   accentForeground: "rgb(15, 23, 42)",
-  input: "rgb(226, 232, 240)",
-  secondary: "rgb(241, 245, 249)",
-  secondaryForeground: "rgb(15, 23, 42)"
-}, u = {
+  input: "rgb(226, 232, 240)"
+}, l = {
   all: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
   transform: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)"
-}, l = {
-  0: "0",
-  5: "0.05",
-  10: "0.1",
-  20: "0.2",
-  25: "0.25",
-  30: "0.3",
-  40: "0.4",
+}, u = {
   50: "0.5",
-  60: "0.6",
   70: "0.7",
-  75: "0.75",
-  80: "0.8",
-  90: "0.9",
-  95: "0.95",
   100: "1"
-}, n = {
-  0: "0px",
-  1: "1px",
-  2: "2px",
-  4: "4px",
-  8: "8px",
-  DEFAULT: "3px"
+}, o = {
+  2: "2px"
 }, e = {
-  0: "0px",
-  1: "1px",
-  2: "2px",
-  4: "4px",
-  8: "8px"
+  2: "2px"
 }, a = {
   sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
   md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
   lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
   // 0 0 0 ringOffsetWidth ringOffsetColor
   // 0 0 0 ringWidth + ringOffsetWidth ringColor
-  ring: `0 0 0 ${e[2]} ${r.background}, 0 0 0 calc(${n[2]} + ${e[2]}) ${r.ring}`
+  ring: `0 0 0 ${e[2]} ${r.background}, 0 0 0 calc(${o[2]} + ${e[2]}) ${r.ring}`
 }, h = {
-  0: "0",
-  10: "10",
-  20: "20",
-  30: "30",
-  40: "40",
   50: "50"
 }, f = {
   sm: "blur(0 1px 2px 0 rgb(0 0 0 / 0.05))"
@@ -144,19 +101,19 @@ const o = {
 export {
   f as blur,
   d as borderRadius,
-  b as borderWidth,
+  x as borderWidth,
   a as boxShadow,
   r as colors,
-  o as fontSize,
+  n as fontSize,
   t as fontSizeLineHeight,
-  x as height,
-  g as letterSpacing,
-  p as lineHeight,
-  i as maxWidth,
-  l as opacity,
+  i as height,
+  c as letterSpacing,
+  g as lineHeight,
+  b as maxWidth,
+  u as opacity,
   m as spacing,
-  u as transition,
+  l as transition,
   s as weights,
-  c as width,
+  p as width,
   h as zIndex
 };

package/lib/sheet.template.js

@@ -1,8 +1,8 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { MenuIcon as s, LargeXIcon as b } from "@webstudio-is/icons/svg";
-import { $ as o, css as i, PlaceholderValue as n } from "@webstudio-is/template";
+import { $ as o, PlaceholderValue as n, css as i } from "@webstudio-is/template";
 import { radix as t } from "./shared/proxy.js";
-import { zIndex as d, blur as p, width as u, spacing as l, borderWidth as w, colors as a, boxShadow as c, maxWidth as f, fontSize as g, lineHeight as x, letterSpacing as $, fontSizeLineHeight as y, borderRadius as S, opacity as h, height as m } from "./shared/theme.js";
+import { fontSize as d, lineHeight as p, letterSpacing as u, fontSizeLineHeight as w, colors as a, spacing as l, borderRadius as f, opacity as c, height as g, boxShadow as h, width as x, zIndex as m, borderWidth as $, maxWidth as y, blur as S } from "./shared/theme.js";
 import { getButtonStyle as D } from "./shared/styles.js";
 const B = {
   category: "radix",
@@ -18,9 +18,9 @@ const B = {
         "ws:style": i`
           position: fixed;
           inset: 0;
-          z-index: ${d[50]};
+          z-index: ${m[50]};
           background-color: rgb(255 255 255 / 0.8);
-          backdrop-filter: ${p.sm};
+          backdrop-filter: ${S.sm};
           /* To allow positioning Content */
           display: flex;
           flex-direction: column;
@@ -31,19 +31,19 @@ const B = {
           {
             "ws:label": "Sheet Content",
             "ws:style": i`
-            width: ${u.full};
-            z-index: ${d[50]};
+            width: ${x.full};
+            z-index: ${m[50]};
             display: flex;
             flex-direction: column;
             gap: ${l[4]};
-            border: ${w.DEFAULT} solid ${a.border};
+            border: ${$.DEFAULT} solid ${a.border};
             background-color: ${a.background};
             padding: ${l[6]};
-            box-shadow: ${c.lg};
+            box-shadow: ${h.lg};
             position: relative;
             /* side=left */
             margin-right: auto;
-            max-width: ${f.sm};
+            max-width: ${y.sm};
             flex-grow: 1;
           `,
             children: [
@@ -63,9 +63,9 @@ const B = {
                         {
                           "ws:label": "Sheet Title",
                           "ws:style": i`
-                  font-size: ${g.lg};
-                  line-height: ${x.none};
-                  letter-spacing: ${$.tight};
+                  font-size: ${d.lg};
+                  line-height: ${p.none};
+                  letter-spacing: ${u.tight};
                   margin: 0;
                 `,
                           children: new n("Sheet Title")
@@ -76,8 +76,8 @@ const B = {
                         {
                           "ws:label": "Sheet Description",
                           "ws:style": i`
-                  font-size: ${g.sm};
-                  line-height: ${y.sm};
+                  font-size: ${d.sm};
+                  line-height: ${w.sm};
                   color: ${a.mutedForeground};
                   margin: 0;
                 `,
@@ -97,21 +97,21 @@ const B = {
               position: absolute;
               right: ${l[4]};
               top: ${l[4]};
-              border-radius: ${S.sm};
-              opacity: ${h[70]};
+              border-radius: ${f.sm};
+              opacity: ${c[70]};
               display: flex;
               align-items: center;
               justify-content: center;
-              height: ${m[4]};
-              width: ${m[4]};
+              height: ${g[4]};
+              width: ${g[4]};
               border: 0;
               background-color: transparent;
               outline: none;
               &:hover {
-                opacity: ${h[100]};
+                opacity: ${c[100]};
               }
               &:focus-visible {
-                box-shadow: ${c.ring};
+                box-shadow: ${h.ring};
               }
             `,
                   children: /* @__PURE__ */ e(o.HtmlEmbed, { "ws:label": "Close Icon", code: b })

package/lib/switch.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import { Root as c, Thumb as h } from "@radix-ui/react-switch";
-const d = f(({ defaultChecked: o, checked: r, ...t }, m) => /* @__PURE__ */ e(c, { ...t, ref: m, defaultChecked: r ?? o })), n = h;
+import { Thumb as c, Root as h } from "@radix-ui/react-switch";
+const d = f(({ defaultChecked: o, checked: r, ...t }, m) => /* @__PURE__ */ e(h, { ...t, ref: m, defaultChecked: r ?? o })), n = c;
 export {
   d as Switch,
   n as SwitchThumb

package/lib/switch.template.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { css as r } from "@webstudio-is/template";
 import { radix as e } from "./shared/proxy.js";
-import { borderRadius as a, borderWidth as d, transition as i, boxShadow as n, opacity as s, colors as t, height as c, width as l } from "./shared/theme.js";
+import { height as d, width as s, borderRadius as a, colors as t, boxShadow as i, transition as n, borderWidth as c, opacity as l } from "./shared/theme.js";
 const m = {
   category: "radix",
   description: "A control that allows the user to toggle between checked and not checked.",
@@ -17,15 +17,15 @@ const m = {
         cursor: pointer;
         align-items: center;
         border-radius: ${a.full};
-        border: ${d[2]} solid transparent;
-        transition: ${i.all};
+        border: ${c[2]} solid transparent;
+        transition: ${n.all};
         &:focus-visible {
           outline: none;
-          box-shadow: ${n.ring};
+          box-shadow: ${i.ring};
         }
         &:disabled {
           cursor: not-allowed;
-          opacity: ${s[50]};
+          opacity: ${l[50]};
         }
         &[data-state="checked"] {
           background-color: ${t.primary};
@@ -40,12 +40,12 @@ const m = {
           "ws:style": r`
           pointer-events: none;
           display: block;
-          height: ${c[5]};
-          width: ${l[5]};
+          height: ${d[5]};
+          width: ${s[5]};
           border-radius: ${a.full};
           background-color: ${t.background};
-          box-shadow: ${n.lg};
-          transition: ${i.transform};
+          box-shadow: ${i.lg};
+          transition: ${n.transform};
           &[data-state="checked"] {
             transform: translateX(20px);
           }

package/lib/tabs.js

@@ -2,13 +2,13 @@ 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 { Root as p, List as T, Trigger as d, Content as h } from "@radix-ui/react-tabs";
+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,
+    defaultProp: e ?? "",
     onChange: n.onValueChange
   }), s = f(
     async (m) => {
@@ -17,7 +17,7 @@ const k = c(({ defaultValue: e, ...n }, o) => {
     [a]
   );
   return /* @__PURE__ */ i(
-    p,
+    T,
     {
       ref: o,
       ...n,
@@ -25,7 +25,7 @@ const k = c(({ defaultValue: e, ...n }, o) => {
       onValueChange: s
     }
   );
-}), w = T, y = c(({ value: e, ...n }, o) => {
+}), 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) => {

package/lib/tabs.template.js

@@ -1,18 +1,18 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { css as a, PlaceholderValue as o } from "@webstudio-is/template";
+import { PlaceholderValue as o, css as a } from "@webstudio-is/template";
 import { radix as e } from "./shared/proxy.js";
-import { borderRadius as l, spacing as n, fontSize as g, fontSizeLineHeight as h, weights as u, transition as b, boxShadow as r, opacity as p, colors as i, height as m } from "./shared/theme.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";
 const d = a`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
   border-radius: ${l.md};
-  padding: ${n[1.5]} ${n[3]};
-  font-size: ${g.sm};
-  line-height: ${h.sm};
-  font-weight: ${u.medium};
-  transition: ${b.all};
+  padding: ${i[1.5]} ${i[3]};
+  font-size: ${h.sm};
+  line-height: ${u.sm};
+  font-weight: ${b.medium};
+  transition: ${p.all};
   &:focus-visible {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -20,15 +20,15 @@ const d = a`
   }
   &:disabled {
     pointer-events: none;
-    opacity: ${p[50]};
+    opacity: ${m[50]};
   }
   &[data-state="active"] {
-    background-color: ${i.background};
-    color: ${i.foreground};
+    background-color: ${n.background};
+    color: ${n.foreground};
     box-shadow: ${r.sm};
   }
 `, c = a`
-  margin-top: ${n[2]};
+  margin-top: ${i[2]};
   &:focus-visible {
     outline: none;
     box-shadow: ${r.ring};
@@ -43,13 +43,13 @@ const d = a`
       {
         "ws:style": a`
           display: inline-flex;
-          height: ${m[10]};
+          height: ${g[10]};
           align-items: center;
           justify-content: center;
           border-radius: ${l.md};
-          background-color: ${i.muted};
-          padding: ${n[1]};
-          color: ${i.mutedForeground};
+          background-color: ${n.muted};
+          padding: ${i[1]};
+          color: ${n.mutedForeground};
         `,
         children: [
           /* @__PURE__ */ t(e.TabsTrigger, { "ws:style": d, children: new o("Account") }),

package/lib/tooltip.ws.js

@@ -1,15 +1,15 @@
-import { TriggerIcon as t, ContentIcon as n, TooltipIcon as e } from "@webstudio-is/icons/svg";
+import { TooltipIcon as t, TriggerIcon as n, ContentIcon as e } from "@webstudio-is/icons/svg";
 import { div as i } from "@webstudio-is/sdk/normalize.css";
 import { radix as o } from "./shared/meta.js";
 import { propsTooltip as r, propsTooltipTrigger as p, propsTooltipContent as s } from "./__generated__/tooltip.props.js";
 const g = {
-  icon: t,
+  icon: n,
   contentModel: {
     category: "none",
     children: ["instance"]
   }
 }, d = {
-  icon: n,
+  icon: e,
   contentModel: {
     category: "none",
     children: ["instance"]
@@ -18,7 +18,7 @@ const g = {
     div: i
   }
 }, m = {
-  icon: e,
+  icon: t,
   contentModel: {
     category: "instance",
     children: ["instance"],

package/lib/types/select.d.ts

@@ -1,7 +1,7 @@
-import { type ForwardRefExoticComponent, type ComponentProps, type RefAttributes } from "react";
-import { Item, ItemIndicator, ItemText, Viewport } from "@radix-ui/react-select";
+import { type ForwardRefExoticComponent, type ComponentProps, type RefAttributes, type ComponentPropsWithRef } from "react";
+import { Root, Item, ItemIndicator, ItemText, Viewport } from "@radix-ui/react-select";
 import { type Hook } from "@webstudio-is/react-sdk/runtime";
-export declare const Select: ForwardRefExoticComponent<import("@radix-ui/react-select").SelectProps & RefAttributes<HTMLDivElement>>;
+export declare const Select: ForwardRefExoticComponent<ComponentPropsWithRef<typeof Root>>;
 export declare const SelectTrigger: ForwardRefExoticComponent<Omit<import("@radix-ui/react-select").SelectTriggerProps & RefAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>;
 export declare const SelectValue: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-select").SelectValueProps & RefAttributes<HTMLSpanElement>, "ref">, "placeholder"> & {
     placeholder?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.218.0",
+  "version": "0.219.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -44,36 +44,36 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-collapsible": "^1.1.3",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-navigation-menu": "^1.2.5",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.5",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.3",
-    "@radix-ui/react-tooltip": "^1.1.8",
-    "@radix-ui/react-use-controllable-state": "^1.1.0",
+    "@radix-ui/react-accordion": "^1.2.8",
+    "@radix-ui/react-checkbox": "^1.2.3",
+    "@radix-ui/react-collapsible": "^1.1.8",
+    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.10",
+    "@radix-ui/react-popover": "^1.1.11",
+    "@radix-ui/react-radio-group": "^1.3.4",
+    "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-tooltip": "^1.2.4",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
     "await-interaction-response": "^0.0.2",
-    "@webstudio-is/css-engine": "0.218.0",
-    "@webstudio-is/icons": "0.218.0",
-    "@webstudio-is/react-sdk": "0.218.0",
-    "@webstudio-is/sdk": "0.218.0"
+    "@webstudio-is/css-engine": "0.219.0",
+    "@webstudio-is/react-sdk": "0.219.0",
+    "@webstudio-is/icons": "0.219.0",
+    "@webstudio-is/sdk": "0.219.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "@webstudio-is/css-data": "0.0.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
+    "@webstudio-is/css-data": "0.0.0",
     "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/sdk-components-react": "0.218.0",
-    "@webstudio-is/template": "0.218.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/template": "0.219.0",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/sdk-components-react": "0.219.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",