refactor: generate radix stories from templates (#4733)

Reimplemented generate-stories command in sdk-cli to not rely on sdk components and load metas and templates dynamically according to files convention.
2025-03-14 09:57:02 +00:00 · 2025-01-09 01:31:04 +07:00
parent 178ad00bc3
commit ce34c655bb
20 changed files with 618 additions and 749 deletions
--- a/packages/react-sdk/src/css/css.test.tsx
+++ b/packages/react-sdk/src/css/css.test.tsx
@ -21,9 +21,8 @@ const generateAllCss = (config: Omit<CssConfig, "atomic">) => {

 test("generate css for one instance with two tokens", () => {
  const { cssText, atomicCssText, atomicClasses } = generateAllCss({
+    ...renderJsx(<$.Box ws:id="box"></$.Box>),
    assets: new Map(),
-    instances: new Map(),
-    props: new Map(),
    breakpoints: toMap<Breakpoint>([{ id: "base", label: "" }]),
    styleSourceSelections: new Map([
      ["box", { instanceId: "box", values: ["token", "local"] }],
--- a/packages/react-sdk/src/css/css.ts
+++ b/packages/react-sdk/src/css/css.ts
@ -160,7 +160,10 @@ export const generateCss = ({
    let descendantSuffix = "";
    // render selector component as descendant selector
    const instance = instances.get(instanceId);
-    if (instance?.component === descendantComponent) {
+    if (instance === undefined) {
+      continue;
+    }
+    if (instance.component === descendantComponent) {
      const parentId = parentIdByInstanceId.get(instanceId);
      const descendantSelector = descendantSelectorByInstanceId.get(instanceId);
      if (parentId && descendantSelector) {
@ -168,9 +171,9 @@ export const generateCss = ({
        instanceId = parentId;
      }
    }
-    const meta = instance ? componentMetas.get(instance.component) : undefined;
-    const baseName =
-      instance?.label ?? meta?.label ?? instance?.component ?? instanceId;
+    const meta = componentMetas.get(instance.component);
+    const [_namespace, shortName] = parseComponentName(instance.component);
+    const baseName = instance.label ?? meta?.label ?? shortName;
    const className = `w-${scope.getName(instanceId, baseName)}`;
    if (atomic === false) {
      let classList = classes.get(instanceId);
--- a/packages/sdk-cli/package.json
+++ b/packages/sdk-cli/package.json
@ -19,7 +19,7 @@
  "dependencies": {
    "@webstudio-is/react-sdk": "workspace:^",
    "@webstudio-is/sdk": "workspace:^",
-    "@webstudio-is/sdk-components-react": "workspace:^",
+    "@webstudio-is/template": "workspace:^",
    "change-case": "^5.4.4"
  },
  "devDependencies": {
--- a/packages/sdk-cli/src/generate-stories.ts
+++ b/packages/sdk-cli/src/generate-stories.ts
@ -1,24 +1,25 @@
+import { cwd } from "node:process";
 import { dirname, join } from "node:path";
-import { mkdir, writeFile } from "node:fs/promises";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { kebabCase } from "change-case";
 import {
  type Instances,
  type Instance,
  type Scope,
-  type WsComponentMeta,
  createScope,
  parseComponentName,
  getStyleDeclKey,
+  WsComponentMeta,
 } from "@webstudio-is/sdk";
 import {
  generateCss,
-  generateDataFromEmbedTemplate,
  generateWebstudioComponent,
  getIndexesWithinAncestors,
+  namespaceMeta,
 } from "@webstudio-is/react-sdk";
-import * as baseMetasExports from "@webstudio-is/sdk-components-react/metas";
+import { renderTemplate, type TemplateMeta } from "@webstudio-is/template";

-const baseMetas = new Map(Object.entries(baseMetasExports));
+const BASE_NAMESPACE = "@webstudio-is/sdk-components-react";

 const generateComponentImports = ({
  scope,
@ -33,19 +34,13 @@ const generateComponentImports = ({
    string,
    Set<[shortName: string, componentName: string]>
  >();
-  const BASE_NAMESPACE = "@webstudio-is/sdk-components-react";

  for (const component of components) {
    const parsed = parseComponentName(component);
-    let [namespace] = parsed;
+    let [namespace = BASE_NAMESPACE] = parsed;
    const [_namespace, shortName] = parsed;
-    if (namespace === undefined) {
-      // use base as fallback namespace and consider remix overrides
-      if (metas.has(shortName)) {
-        namespace = "../components";
-      } else {
-        namespace = BASE_NAMESPACE;
-      }
+    if (metas.has(shortName)) {
+      namespace = "../components";
    }
    if (namespaces.has(namespace) === false) {
      namespaces.set(
@ -61,7 +56,7 @@ const generateComponentImports = ({
    const specifiers = Array.from(componentsSet)
      .map(
        ([shortName, component]) =>
-          `${component} as ${scope.getName(component, shortName)}`
+          `${shortName} as ${scope.getName(component, shortName)}`
      )
      .join(", ");
    componentImports += `import { ${specifiers} } from "${namespace}";\n`;
@ -96,25 +91,22 @@ export { Story as ${name} }
 `;

 export const generateStories = async () => {
-  const metasModule = join(process.cwd(), "src/metas.ts");
+  const packageFile = await readFile(join(cwd(), "package.json"), "utf8");
+  const packageJson = JSON.parse(packageFile);
+  const templatesModule = join(cwd(), "src/templates.ts");
+  const templates = new Map<string, TemplateMeta>(
+    Object.entries(await import(templatesModule))
+  );
+  const metasModule = join(cwd(), "src/metas.ts");
  const metas = new Map<string, WsComponentMeta>(
    Object.entries(await import(metasModule))
  );
-  const storiesDir = join(dirname(metasModule), "__generated__");
+  const storiesDir = join(dirname(templatesModule), "__generated__");
  await mkdir(storiesDir, { recursive: true });

-  for (const [name, meta] of metas) {
-    if (meta.template === undefined) {
-      continue;
-    }
+  for (const [name, meta] of templates) {
    const rootInstanceId = "root";
-    let id = 0;
-    const generateStableId = () => (++id).toString();
-    const data = generateDataFromEmbedTemplate(
-      meta.template,
-      metas,
-      generateStableId
-    );
+    const data = renderTemplate(meta.template);
    const instances: Instances = new Map([
      [
        rootInstanceId,
@ -125,30 +117,48 @@ export const generateStories = async () => {
          children: data.children,
        },
      ],
-      ...data.instances.map(
-        (instance) =>
-          [instance.id, instance] satisfies [Instance["id"], Instance]
-      ),
+      ...data.instances.map((instance) => [instance.id, instance] as const),
    ]);
    const props = new Map(data.props.map((prop) => [prop.id, prop]));
    const breakpoints = new Map(
      data.breakpoints.map((breakpoint) => [breakpoint.id, breakpoint])
    );
    const components = new Set<Instance["component"]>();
-    const usedMetas = new Map<Instance["component"], WsComponentMeta>();
-    const bodyMeta = baseMetas.get("Body");
-    // add body styles for stories
-    if (bodyMeta) {
-      usedMetas.set("Body", bodyMeta);
-    }
+    const namespaces: string[] = [];
    for (const instance of instances.values()) {
+      const [namespace = BASE_NAMESPACE] = parseComponentName(
+        instance.component
+      );
      components.add(instance.component);
-      const meta =
-        metas.get(instance.component) ?? baseMetas.get(instance.component);
-      if (meta) {
-        usedMetas.set(instance.component, meta);
+      namespaces.push(namespace);
+    }
+    const usedMetas = new Map<string, WsComponentMeta>();
+    for (const namespace of namespaces) {
+      let namespaceMetas;
+      if (namespace === packageJson.name) {
+        namespaceMetas = metas;
+      } else {
+        const metasUrl = import.meta.resolve(
+          `${namespace}/metas`,
+          templatesModule
+        );
+        namespaceMetas = new Map(Object.entries(await import(metasUrl)));
+      }
+      for (let [name, meta] of namespaceMetas) {
+        if (namespace !== BASE_NAMESPACE) {
+          name = `${namespace}:${name}`;
+          meta = namespaceMeta(
+            meta as WsComponentMeta,
+            namespace,
+            new Set(metas.keys())
+          );
+        }
+        if (components.has(name)) {
+          usedMetas.set(name, meta as WsComponentMeta);
+        }
      }
    }
+
    const { cssText, classes } = generateCss({
      instances,
      props,
--- a/packages/sdk-components-react-radix/src/generated/accordion.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/accordion.stories.tsx
@ -26,7 +26,7 @@ const Component = () => {
              <Box className={"w-box w-icon-container"}>
                <HtmlEmbed
                  code={
-                    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M4.04 6.284a.65.65 0 0 1 .92.001L8 9.335l3.04-3.05a.65.65 0 1 1 .921.918l-3.5 3.512a.65.65 0 0 1-.921 0L4.039 7.203a.65.65 0 0 1 .001-.92Z"/></svg>'
+                    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4 6 4 4 4-4"/></svg>'
                  }
                  className={"w-html-embed"}
                />
@ -44,7 +44,7 @@ const Component = () => {
              <Box className={"w-box w-icon-container-1"}>
                <HtmlEmbed
                  code={
-                    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M4.04 6.284a.65.65 0 0 1 .92.001L8 9.335l3.04-3.05a.65.65 0 1 1 .921.918l-3.5 3.512a.65.65 0 0 1-.921 0L4.039 7.203a.65.65 0 0 1 .001-.92Z"/></svg>'
+                    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4 6 4 4 4-4"/></svg>'
                  }
                  className={"w-html-embed"}
                />
@ -64,7 +64,7 @@ const Component = () => {
              <Box className={"w-box w-icon-container-2"}>
                <HtmlEmbed
                  code={
-                    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M4.04 6.284a.65.65 0 0 1 .92.001L8 9.335l3.04-3.05a.65.65 0 1 1 .921.918l-3.5 3.512a.65.65 0 0 1-.921 0L4.039 7.203a.65.65 0 0 1 .001-.92Z"/></svg>'
+                    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4 6 4 4 4-4"/></svg>'
                  }
                  className={"w-html-embed"}
                />
@ -93,16 +93,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -183,6 +173,20 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
+  :where(div.w-html-embed) {
+    display: contents;
+    white-space: normal;
+    white-space-collapse: collapse
+  }
+  :where(div.w-text) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px;
+    min-height: 1em
+  }
  :where(div.w-accordion) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -191,7 +195,7 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
-  :where(div.w-item) {
+  :where(div.w-item-content) {
    box-sizing: border-box;
    border-top-width: 1px;
    border-right-width: 1px;
@ -209,6 +213,14 @@ const Story = {
    margin-top: 0px;
    margin-bottom: 0px
  }
+  :where(div.w-item) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
  :where(button.w-item-trigger) {
    font-family: inherit;
    font-size: 100%;
@ -221,26 +233,6 @@ const Story = {
    margin: 0;
    padding: 0px
  }
-  :where(div.w-text) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px;
-    min-height: 1em
-  }
-  :where(div.w-html-embed) {
-    display: contents
-  }
-  :where(div.w-item-content) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
 }
@media all {
  .w-item-1 {
@ -253,34 +245,43 @@ const Story = {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
-    flex-basis: 0%;
+    flex-basis: 0;
    align-items: center;
-    justify-content: space-between;
+    justify-content: between;
    padding-top: 1rem;
+    padding-right: 0;
    padding-bottom: 1rem;
+    padding-left: 0;
    font-weight: 500;
    --accordion-trigger-icon-transform: 0deg
  }
  .w-item-trigger-1:hover {
    text-decoration-line: underline
  }
-  .w-item-trigger-1[data-state=open] {
+  .w-item-trigger-1[data-state="open"] {
    --accordion-trigger-icon-transform: 180deg
  }
  .w-icon-container {
-    rotate: var(--accordion-trigger-icon-transform);
+    rotate: --accordion-trigger-icon-transform;
    height: 1rem;
    width: 1rem;
-    flex-grow: 0;
+    flex-shrink: 0;
    transition-property: all;
+    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 200ms
+    transition-delay: 0s;
+    transition-behavior: normal
  }
  .w-item-content-1 {
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 0.875rem;
    line-height: 1.25rem;
+    transition-property: all;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0s;
+    transition-behavior: normal;
    padding-bottom: 1rem
  }
  .w-item-2 {
@ -293,34 +294,43 @@ const Story = {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
-    flex-basis: 0%;
+    flex-basis: 0;
    align-items: center;
-    justify-content: space-between;
+    justify-content: between;
    padding-top: 1rem;
+    padding-right: 0;
    padding-bottom: 1rem;
+    padding-left: 0;
    font-weight: 500;
    --accordion-trigger-icon-transform: 0deg
  }
  .w-item-trigger-2:hover {
    text-decoration-line: underline
  }
-  .w-item-trigger-2[data-state=open] {
+  .w-item-trigger-2[data-state="open"] {
    --accordion-trigger-icon-transform: 180deg
  }
  .w-icon-container-1 {
-    rotate: var(--accordion-trigger-icon-transform);
+    rotate: --accordion-trigger-icon-transform;
    height: 1rem;
    width: 1rem;
-    flex-grow: 0;
+    flex-shrink: 0;
    transition-property: all;
+    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 200ms
+    transition-delay: 0s;
+    transition-behavior: normal
  }
  .w-item-content-2 {
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 0.875rem;
    line-height: 1.25rem;
+    transition-property: all;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0s;
+    transition-behavior: normal;
    padding-bottom: 1rem
  }
  .w-item-3 {
@ -333,34 +343,43 @@ const Story = {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
-    flex-basis: 0%;
+    flex-basis: 0;
    align-items: center;
-    justify-content: space-between;
+    justify-content: between;
    padding-top: 1rem;
+    padding-right: 0;
    padding-bottom: 1rem;
+    padding-left: 0;
    font-weight: 500;
    --accordion-trigger-icon-transform: 0deg
  }
  .w-item-trigger-3:hover {
    text-decoration-line: underline
  }
-  .w-item-trigger-3[data-state=open] {
+  .w-item-trigger-3[data-state="open"] {
    --accordion-trigger-icon-transform: 180deg
  }
  .w-icon-container-2 {
-    rotate: var(--accordion-trigger-icon-transform);
+    rotate: --accordion-trigger-icon-transform;
    height: 1rem;
    width: 1rem;
-    flex-grow: 0;
+    flex-shrink: 0;
    transition-property: all;
+    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 200ms
+    transition-delay: 0s;
+    transition-behavior: normal
  }
  .w-item-content-3 {
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 0.875rem;
    line-height: 1.25rem;
+    transition-property: all;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0s;
+    transition-behavior: normal;
    padding-bottom: 1rem
  }
 }
--- a/packages/sdk-components-react-radix/src/generated/checkbox.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/checkbox.stories.tsx
@ -1,4 +1,3 @@
-import { useVariableState } from "@webstudio-is/react-sdk/runtime";
 import {
  Box as Box,
  HtmlEmbed as HtmlEmbed,
@ -11,24 +10,16 @@ import {
 } from "../components";

 const Component = () => {
-  let [checkboxChecked, set$checkboxChecked] = useVariableState<any>(false);
  return (
    <Box className={"w-box"}>
      <Label className={"w-label w-checkbox-field"}>
-        <Checkbox
-          checked={checkboxChecked}
-          onCheckedChange={(checked: any) => {
-            checkboxChecked = checked;
-            set$checkboxChecked(checkboxChecked);
-          }}
-          className={"w-checkbox w-checkbox-1"}
-        >
+        <Checkbox className={"w-checkbox w-checkbox-1"}>
          <CheckboxIndicator
            className={"w-checkbox-indicator w-checkbox-indicator-1"}
          >
            <HtmlEmbed
              code={
-                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M11.957 5.043a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.75 8.836l3.793-3.793a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>'
+                '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.091" d="m13.636 3.667-8 8L2 8.03"/></svg>'
              }
              className={"w-html-embed"}
            />
@ -53,16 +44,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -143,13 +124,19 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
-  :where(label.w-label) {
+  :where(div.w-html-embed) {
+    display: contents;
+    white-space: normal;
+    white-space-collapse: collapse
+  }
+  :where(div.w-text) {
    box-sizing: border-box;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
-    outline-width: 1px
+    outline-width: 1px;
+    min-height: 1em
  }
  :where(button.w-checkbox) {
    font-family: inherit;
@ -171,17 +158,13 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
-  :where(div.w-html-embed) {
-    display: contents
-  }
-  :where(div.w-text) {
+  :where(label.w-label) {
    box-sizing: border-box;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
-    outline-width: 1px;
-    min-height: 1em
+    outline-width: 1px
  }
 }
@media all {
@ -194,7 +177,7 @@ const Story = {
  .w-checkbox-1 {
    height: 1rem;
    width: 1rem;
-    flex-grow: 0;
+    flex-shrink: 0;
    border-top-left-radius: 0.125rem;
    border-top-right-radius: 0.125rem;
    border-bottom-right-radius: 0.125rem;
@ -206,11 +189,10 @@ const Story = {
    opacity: 0.5
  }
  .w-checkbox-1:focus-visible {
-    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
-    outline: 2px solid transparent
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
+    outline: medium none currentcolor
  }
-  .w-checkbox-1[data-state=checked] {
+  .w-checkbox-1[data-state="checked"] {
    background-color: rgba(15, 23, 42, 1);
    color: rgba(248, 250, 252, 1)
  }
@ -218,7 +200,7 @@ const Story = {
    display: flex;
    align-items: center;
    justify-content: center;
-    color: currentColor
+    color: currentcolor
  }
 }
      `}
--- a/packages/sdk-components-react-radix/src/generated/collapsible.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/collapsible.stories.tsx
@ -37,16 +37,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -127,14 +117,6 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
-  :where(div.w-collapsible) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
  :where(button.w-button) {
    font-family: inherit;
    font-size: 100%;
@ -151,14 +133,6 @@ const Story = {
    text-transform: none;
    margin: 0
  }
-  :where(div.w-collapsible-content) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
  :where(div.w-text) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -168,13 +142,29 @@ const Story = {
    outline-width: 1px;
    min-height: 1em
  }
+  :where(div.w-collapsible) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
+  :where(div.w-collapsible-content) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
 }
@media all {
  .w-button-1 {
-    background-color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    background-color: rgba(255, 255, 255, 1);
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
@ -182,12 +172,11 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
-    color: currentColor;
    height: 2.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
    padding-top: 0.5rem;
+    padding-right: 1rem;
    padding-bottom: 0.5rem;
+    padding-left: 1rem;
    border: 1px solid rgba(226, 232, 240, 1)
  }
  .w-button-1:disabled {
@ -196,11 +185,11 @@ const Story = {
  }
  .w-button-1:focus-visible {
    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
    outline: 2px solid transparent
  }
  .w-button-1:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
 }
--- a/packages/sdk-components-react-radix/src/generated/dialog.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/dialog.stories.tsx
@ -37,7 +37,7 @@ const Component = () => {
            <DialogClose className={"w-close-button w-close-button-1"}>
              <HtmlEmbed
                code={
-                  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M13.566 2.434a.8.8 0 0 1 0 1.132L9.13 8l4.435 4.434a.8.8 0 0 1-1.132 1.132L8 9.13l-4.434 4.435a.8.8 0 0 1-1.132-1.132L6.87 8 2.434 3.566a.8.8 0 0 1 1.132-1.132L8 6.87l4.434-4.435a.8.8 0 0 1 1.132 0Z" clip-rule="evenodd"/></svg>'
+                  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.5 3 3 12.5M3 3l9.5 9.5"/></svg>'
                }
                className={"w-html-embed"}
              />
@ -60,16 +60,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -166,37 +156,10 @@ const Story = {
    text-transform: none;
    margin: 0
  }
-  :where(div.w-dialog-overlay) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(div.w-dialog-content) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(h2.w-dialog-title) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(p.w-dialog-description) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
+  :where(div.w-html-embed) {
+    display: contents;
+    white-space: normal;
+    white-space-collapse: collapse
  }
  :where(div.w-text) {
    box-sizing: border-box;
@ -219,16 +182,45 @@ const Story = {
    margin: 0;
    padding: 0px
  }
-  :where(div.w-html-embed) {
-    display: contents
+  :where(div.w-dialog-content) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
+  :where(p.w-dialog-description) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
+  :where(div.w-dialog-overlay) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
+  :where(h2.w-dialog-title) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
  }
 }
@media all {
  .w-button-1 {
-    background-color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    background-color: rgba(255, 255, 255, 1);
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
@ -236,12 +228,11 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
-    color: currentColor;
    height: 2.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
    padding-top: 0.5rem;
+    padding-right: 1rem;
    padding-bottom: 0.5rem;
+    padding-left: 1rem;
    border: 1px solid rgba(226, 232, 240, 1)
  }
  .w-button-1:disabled {
@ -250,23 +241,23 @@ const Story = {
  }
  .w-button-1:focus-visible {
    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
    outline: 2px solid transparent
  }
  .w-button-1:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-dialog-overlay-1 {
    position: fixed;
-    left: 0px;
-    right: 0px;
-    top: 0px;
-    bottom: 0px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.8);
-    -webkit-backdrop-filter: blur(0 1px 2px 0 rgb(0 0 0 / 0.05));
-    backdrop-filter: blur(0 1px 2px 0 rgb(0 0 0 / 0.05));
+    -webkit-backdrop-filter: blur(0 1px 2px 0 rgb(0 0 0/0.05));
+    backdrop-filter: blur(0 1px 2px 0 rgb(0 0 0/0.05));
    display: flex;
    overflow-x: auto;
    overflow-y: auto
@ -279,7 +270,7 @@ const Story = {
    row-gap: 1rem;
    column-gap: 1rem;
    max-width: 32rem;
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    position: relative;
    border: 1px solid rgba(226, 232, 240, 1);
@ -289,22 +280,20 @@ const Story = {
  .w-dialog-header {
    display: flex;
    flex-direction: column;
-    row-gap: 0.25rem;
-    column-gap: 0.25rem
+    row-gap: 0.5rem;
+    column-gap: 0.5rem
  }
  .w-dialog-title-1 {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    line-height: 1.75rem;
    font-size: 1.125rem;
-    letter-spacing: -0.025em
+    line-height: 1;
+    letter-spacing: -0.025em;
+    margin: 0
  }
  .w-dialog-description-1 {
-    margin-top: 0px;
-    margin-bottom: 0px;
    font-size: 0.875rem;
    line-height: 1.25rem;
-    color: rgba(100, 116, 139, 1)
+    color: rgba(100, 116, 139, 1);
+    margin: 0
  }
  .w-close-button-1 {
    position: absolute;
@ -321,12 +310,11 @@ const Story = {
    height: 1rem;
    width: 1rem;
    background-color: transparent;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
-    border: 0px solid rgba(226, 232, 240, 1)
+    outline: medium none currentcolor;
+    border: 0 none currentcolor
  }
-  .w-close-button-1:focus {
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
+  .w-close-button-1:focus-visible {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1)
  }
  .w-close-button-1:hover {
    opacity: 1
--- a/packages/sdk-components-react-radix/src/generated/label.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/label.stories.tsx
@ -20,16 +20,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
--- a/packages/sdk-components-react-radix/src/generated/navigation-menu.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/navigation-menu.stories.tsx
@ -28,7 +28,7 @@ const Component = () => {
                <Box className={"w-box w-icon-container"}>
                  <HtmlEmbed
                    code={
-                      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M4.04 6.284a.65.65 0 0 1 .92.001L8 9.335l3.04-3.05a.65.65 0 1 1 .921.918l-3.5 3.512a.65.65 0 0 1-.921 0L4.039 7.203a.65.65 0 0 1 .001-.92Z"/></svg>'
+                      '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4 6 4 4 4-4"/></svg>'
                    }
                    className={"w-html-embed"}
                  />
@ -94,7 +94,7 @@ const Component = () => {
                <Box className={"w-box w-icon-container-1"}>
                  <HtmlEmbed
                    code={
-                      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M4.04 6.284a.65.65 0 0 1 .92.001L8 9.335l3.04-3.05a.65.65 0 1 1 .921.918l-3.5 3.512a.65.65 0 0 1-.921 0L4.039 7.203a.65.65 0 0 1 .001-.92Z"/></svg>'
+                      '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4 6 4 4 4-4"/></svg>'
                    }
                    className={"w-html-embed"}
                  />
@ -218,16 +218,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -308,38 +298,6 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
-  :where(div.w-navigation-menu) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(div.w-menu-list) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(div.w-menu-item) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(div.w-menu-trigger) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
  :where(button.w-button) {
    font-family: inherit;
    font-size: 100%;
@ -356,6 +314,28 @@ const Story = {
    text-transform: none;
    margin: 0
  }
+  :where(div.w-html-embed) {
+    display: contents;
+    white-space: normal;
+    white-space-collapse: collapse
+  }
+  :where(a.w-link) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px;
+    display: inline-block
+  }
+  :where(p.w-paragraph) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
  :where(div.w-text) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -365,8 +345,13 @@ const Story = {
    outline-width: 1px;
    min-height: 1em
  }
-  :where(div.w-html-embed) {
-    display: contents
+  :where(div.w-navigation-menu) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
  }
  :where(div.w-menu-content) {
    box-sizing: border-box;
@ -376,6 +361,14 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
+  :where(div.w-menu-item) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
  :where(div.w-accessible-link-wrapper) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -384,17 +377,15 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
-  :where(a.w-link) {
+  :where(div.w-menu-list) {
    box-sizing: border-box;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
-    outline-width: 1px;
-    min-height: 1em;
-    display: inline-block
+    outline-width: 1px
  }
-  :where(p.w-paragraph) {
+  :where(div.w-menu-trigger) {
    box-sizing: border-box;
    border-top-width: 1px;
    border-right-width: 1px;
@ -420,20 +411,20 @@ const Story = {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
-    flex-basis: 0%;
+    flex-basis: 0;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    row-gap: 0.25rem;
    column-gap: 0.25rem;
-    margin: 0px;
-    padding: 0px
+    margin: 0;
+    padding: 0
  }
  .w-button-1 {
-    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    background-color: transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
@ -441,12 +432,13 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
-    color: currentColor;
-    height: 2.5rem;
-    padding-left: 0.75rem;
+    height: 2.25rem;
+    padding-top: 0;
    padding-right: 0.75rem;
+    padding-bottom: 0;
+    padding-left: 0.75rem;
    --navigation-menu-trigger-icon-transform: 0deg;
-    border: 0px solid rgba(226, 232, 240, 1)
+    border: 0 solid rgba(226, 232, 240, 1)
  }
  .w-button-1:disabled {
    pointer-events: none;
@ -454,14 +446,14 @@ const Story = {
  }
  .w-button-1:focus-visible {
    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
    outline: 2px solid transparent
  }
  .w-button-1:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
-  .w-button-1[data-state=open] {
+  .w-button-1[data-state="open"] {
    --navigation-menu-trigger-icon-transform: 180deg
  }
  .w-icon-container {
@ -469,15 +461,17 @@ const Story = {
    rotate: var(--navigation-menu-trigger-icon-transform);
    height: 1rem;
    width: 1rem;
-    flex-grow: 0;
+    flex-shrink: 0;
    transition-property: all;
+    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 200ms
+    transition-delay: 0s;
+    transition-behavior: normal
  }
  .w-menu-content-1 {
-    left: 0px;
-    top: 0px;
-    position: absolute;
+    left: 0;
+    top: 0;
+    positon: absolute;
    width: max-content;
    padding: 1rem
  }
@ -517,22 +511,21 @@ const Story = {
    border-bottom-left-radius: 0.375rem;
    line-height: 1;
    text-decoration-line: none;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
+    outline: medium none currentcolor;
    padding: 0.75rem
  }
  .w-link-1:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-link-1:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-text-1 {
    font-size: 0.875rem;
-    line-height: 1;
-    font-weight: 500
+    font-weight: 500;
+    line-height: 1
  }
  .w-paragraph-1 {
    overflow-x: hidden;
@ -543,7 +536,7 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.375;
    color: rgba(100, 116, 139, 1);
-    margin: 0px
+    margin: 0
  }
  .w-link-2 {
    color: inherit;
@ -559,22 +552,21 @@ const Story = {
    border-bottom-left-radius: 0.375rem;
    line-height: 1;
    text-decoration-line: none;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
+    outline: medium none currentcolor;
    padding: 0.75rem
  }
  .w-link-2:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-link-2:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-text-2 {
    font-size: 0.875rem;
-    line-height: 1;
-    font-weight: 500
+    font-weight: 500;
+    line-height: 1
  }
  .w-paragraph-2 {
    overflow-x: hidden;
@ -585,7 +577,7 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.375;
    color: rgba(100, 116, 139, 1);
-    margin: 0px
+    margin: 0
  }
  .w-link-3 {
    color: inherit;
@ -601,22 +593,21 @@ const Story = {
    border-bottom-left-radius: 0.375rem;
    line-height: 1;
    text-decoration-line: none;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
+    outline: medium none currentcolor;
    padding: 0.75rem
  }
  .w-link-3:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-link-3:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-text-3 {
    font-size: 0.875rem;
-    line-height: 1;
-    font-weight: 500
+    font-weight: 500;
+    line-height: 1
  }
  .w-paragraph-3 {
    overflow-x: hidden;
@ -627,13 +618,13 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.375;
    color: rgba(100, 116, 139, 1);
-    margin: 0px
+    margin: 0
  }
  .w-button-2 {
-    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    background-color: transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
@ -641,12 +632,13 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
-    color: currentColor;
-    height: 2.5rem;
-    padding-left: 0.75rem;
+    height: 2.25rem;
+    padding-top: 0;
    padding-right: 0.75rem;
+    padding-bottom: 0;
+    padding-left: 0.75rem;
    --navigation-menu-trigger-icon-transform: 0deg;
-    border: 0px solid rgba(226, 232, 240, 1)
+    border: 0 solid rgba(226, 232, 240, 1)
  }
  .w-button-2:disabled {
    pointer-events: none;
@ -654,14 +646,14 @@ const Story = {
  }
  .w-button-2:focus-visible {
    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
    outline: 2px solid transparent
  }
  .w-button-2:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
-  .w-button-2[data-state=open] {
+  .w-button-2[data-state="open"] {
    --navigation-menu-trigger-icon-transform: 180deg
  }
  .w-icon-container-1 {
@ -669,23 +661,24 @@ const Story = {
    rotate: var(--navigation-menu-trigger-icon-transform);
    height: 1rem;
    width: 1rem;
-    flex-grow: 0;
+    flex-shrink: 0;
    transition-property: all;
+    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 200ms
+    transition-delay: 0s;
+    transition-behavior: normal
  }
  .w-menu-content-2 {
-    left: 0px;
-    top: 0px;
-    position: absolute;
+    left: 0;
+    top: 0;
+    positon: absolute;
    width: max-content;
    padding: 1rem
  }
  .w-content-1 {
    display: flex;
    row-gap: 1rem;
-    column-gap: 1rem;
-    padding: 0px
+    column-gap: 1rem
  }
  .w-flex-column-1 {
    width: 16rem;
@ -708,22 +701,21 @@ const Story = {
    border-bottom-left-radius: 0.375rem;
    line-height: 1;
    text-decoration-line: none;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
+    outline: medium none currentcolor;
    padding: 0.75rem
  }
  .w-link-4:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-link-4:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-text-4 {
    font-size: 0.875rem;
-    line-height: 1;
-    font-weight: 500
+    font-weight: 500;
+    line-height: 1
  }
  .w-paragraph-4 {
    overflow-x: hidden;
@ -734,7 +726,7 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.375;
    color: rgba(100, 116, 139, 1);
-    margin: 0px
+    margin: 0
  }
  .w-link-5 {
    color: inherit;
@ -750,22 +742,21 @@ const Story = {
    border-bottom-left-radius: 0.375rem;
    line-height: 1;
    text-decoration-line: none;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
+    outline: medium none currentcolor;
    padding: 0.75rem
  }
  .w-link-5:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-link-5:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-text-5 {
    font-size: 0.875rem;
-    line-height: 1;
-    font-weight: 500
+    font-weight: 500;
+    line-height: 1
  }
  .w-paragraph-5 {
    overflow-x: hidden;
@ -776,7 +767,7 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.375;
    color: rgba(100, 116, 139, 1);
-    margin: 0px
+    margin: 0
  }
  .w-link-6 {
    color: inherit;
@ -792,22 +783,21 @@ const Story = {
    border-bottom-left-radius: 0.375rem;
    line-height: 1;
    text-decoration-line: none;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
+    outline: medium none currentcolor;
    padding: 0.75rem
  }
  .w-link-6:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-link-6:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-text-6 {
    font-size: 0.875rem;
-    line-height: 1;
-    font-weight: 500
+    font-weight: 500;
+    line-height: 1
  }
  .w-paragraph-6 {
    overflow-x: hidden;
@ -818,7 +808,7 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.375;
    color: rgba(100, 116, 139, 1);
-    margin: 0px
+    margin: 0
  }
  .w-flex-column-2 {
    width: 16rem;
@ -841,22 +831,21 @@ const Story = {
    border-bottom-left-radius: 0.375rem;
    line-height: 1;
    text-decoration-line: none;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
+    outline: medium none currentcolor;
    padding: 0.75rem
  }
  .w-link-7:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-link-7:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-text-7 {
    font-size: 0.875rem;
-    line-height: 1;
-    font-weight: 500
+    font-weight: 500;
+    line-height: 1
  }
  .w-paragraph-7 {
    overflow-x: hidden;
@ -867,7 +856,7 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.375;
    color: rgba(100, 116, 139, 1);
-    margin: 0px
+    margin: 0
  }
  .w-link-8 {
    color: inherit;
@ -883,22 +872,21 @@ const Story = {
    border-bottom-left-radius: 0.375rem;
    line-height: 1;
    text-decoration-line: none;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
+    outline: medium none currentcolor;
    padding: 0.75rem
  }
  .w-link-8:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-link-8:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-text-8 {
    font-size: 0.875rem;
-    line-height: 1;
-    font-weight: 500
+    font-weight: 500;
+    line-height: 1
  }
  .w-paragraph-8 {
    overflow-x: hidden;
@ -909,7 +897,7 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.375;
    color: rgba(100, 116, 139, 1);
-    margin: 0px
+    margin: 0
  }
  .w-link-9 {
    color: inherit;
@ -925,22 +913,21 @@ const Story = {
    border-bottom-left-radius: 0.375rem;
    line-height: 1;
    text-decoration-line: none;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
+    outline: medium none currentcolor;
    padding: 0.75rem
  }
  .w-link-9:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-link-9:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-text-9 {
    font-size: 0.875rem;
-    line-height: 1;
-    font-weight: 500
+    font-weight: 500;
+    line-height: 1
  }
  .w-paragraph-9 {
    overflow-x: hidden;
@ -951,13 +938,13 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.375;
    color: rgba(100, 116, 139, 1);
-    margin: 0px
+    margin: 0
  }
  .w-link-10 {
-    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    background-color: transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
@ -965,12 +952,14 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
-    color: currentColor;
-    height: 2.5rem;
-    padding-left: 0.75rem;
+    height: 2.25rem;
+    padding-top: 0;
    padding-right: 0.75rem;
+    padding-bottom: 0;
+    padding-left: 0.75rem;
    text-decoration-line: none;
-    border: 0px solid rgba(226, 232, 240, 1)
+    color: currentcolor;
+    border: 0 solid rgba(226, 232, 240, 1)
  }
  .w-link-10:disabled {
    pointer-events: none;
@ -978,16 +967,16 @@ const Story = {
  }
  .w-link-10:focus-visible {
    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
    outline: 2px solid transparent
  }
  .w-link-10:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-viewport-container {
    position: absolute;
-    left: 0px;
+    left: 0;
    top: 100%;
    display: flex;
    justify-content: center
--- a/packages/sdk-components-react-radix/src/generated/popover.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/popover.stories.tsx
@ -35,16 +35,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -141,14 +131,6 @@ const Story = {
    text-transform: none;
    margin: 0
  }
-  :where(div.w-popover-content) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
  :where(div.w-text) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -158,13 +140,21 @@ const Story = {
    outline-width: 1px;
    min-height: 1em
  }
+  :where(div.w-popover-content) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
 }
@media all {
  .w-button-1 {
-    background-color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    background-color: rgba(255, 255, 255, 1);
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
@ -172,12 +162,11 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
-    color: currentColor;
    height: 2.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
    padding-top: 0.5rem;
+    padding-right: 1rem;
    padding-bottom: 0.5rem;
+    padding-left: 1rem;
    border: 1px solid rgba(226, 232, 240, 1)
  }
  .w-button-1:disabled {
@ -186,11 +175,11 @@ const Story = {
  }
  .w-button-1:focus-visible {
    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
    outline: 2px solid transparent
  }
  .w-button-1:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-popover-content-1 {
@ -203,8 +192,7 @@ const Story = {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(2, 8, 23, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    outline-offset: 2px;
-    outline: 2px solid transparent;
+    outline: medium none currentcolor;
    border: 1px solid rgba(226, 232, 240, 1);
    padding: 1rem
  }
--- a/packages/sdk-components-react-radix/src/generated/radio-group.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/radio-group.stories.tsx
@ -1,4 +1,3 @@
-import { useVariableState } from "@webstudio-is/react-sdk/runtime";
 import {
  Box as Box,
  HtmlEmbed as HtmlEmbed,
@ -12,17 +11,9 @@ import {
 } from "../components";

 const Component = () => {
-  let [radioGroupValue, set$radioGroupValue] = useVariableState<any>("");
  return (
    <Box className={"w-box"}>
-      <RadioGroup
-        value={radioGroupValue}
-        onValueChange={(value: any) => {
-          radioGroupValue = value;
-          set$radioGroupValue(radioGroupValue);
-        }}
-        className={"w-radio-group w-radio-group-1"}
-      >
+      <RadioGroup className={"w-radio-group w-radio-group-1"}>
        <Label className={"w-label w-label-1"}>
          <RadioGroupItem
            value={"default"}
@ -31,7 +22,7 @@ const Component = () => {
            <RadioGroupIndicator className={"w-radio-group-indicator"}>
              <HtmlEmbed
                code={
-                  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M8 5.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3Z"/></svg>'
+                  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/></svg>'
                }
                className={"w-html-embed"}
              />
@ -47,7 +38,7 @@ const Component = () => {
            <RadioGroupIndicator className={"w-radio-group-indicator"}>
              <HtmlEmbed
                code={
-                  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M8 5.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3Z"/></svg>'
+                  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/></svg>'
                }
                className={"w-html-embed"}
              />
@ -63,7 +54,7 @@ const Component = () => {
            <RadioGroupIndicator className={"w-radio-group-indicator"}>
              <HtmlEmbed
                code={
-                  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path d="M8 5.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3Z"/></svg>'
+                  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/></svg>'
                }
                className={"w-html-embed"}
              />
@ -87,16 +78,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -177,6 +158,28 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
+  :where(div.w-html-embed) {
+    display: contents;
+    white-space: normal;
+    white-space-collapse: collapse
+  }
+  :where(div.w-text) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px;
+    min-height: 1em
+  }
+  :where(label.w-label) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
  :where(div.w-radio-group) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -185,7 +188,7 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
-  :where(label.w-label) {
+  :where(span.w-radio-group-indicator) {
    box-sizing: border-box;
    border-top-width: 1px;
    border-right-width: 1px;
@ -205,26 +208,6 @@ const Story = {
    margin: 0;
    padding: 0px
  }
-  :where(span.w-radio-group-indicator) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(div.w-html-embed) {
-    display: contents
-  }
-  :where(div.w-text) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px;
-    min-height: 1em
-  }
 }
@media all {
  .w-radio-group-1 {
@ -240,7 +223,7 @@ const Story = {
    column-gap: 0.5rem
  }
  .w-radio-group-item-1 {
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 1/1;
    height: 1rem;
    width: 1rem;
    border-top-left-radius: 9999px;
@ -255,9 +238,8 @@ const Story = {
    opacity: 0.5
  }
  .w-radio-group-item-1:focus-visible {
-    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
-    outline: 2px solid transparent
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
+    outline: medium none currentcolor
  }
  .w-label-2 {
    display: flex;
@ -266,7 +248,7 @@ const Story = {
    column-gap: 0.5rem
  }
  .w-radio-group-item-2 {
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 1/1;
    height: 1rem;
    width: 1rem;
    border-top-left-radius: 9999px;
@ -281,9 +263,8 @@ const Story = {
    opacity: 0.5
  }
  .w-radio-group-item-2:focus-visible {
-    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
-    outline: 2px solid transparent
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
+    outline: medium none currentcolor
  }
  .w-label-3 {
    display: flex;
@ -292,7 +273,7 @@ const Story = {
    column-gap: 0.5rem
  }
  .w-radio-group-item-3 {
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 1/1;
    height: 1rem;
    width: 1rem;
    border-top-left-radius: 9999px;
@ -307,9 +288,8 @@ const Story = {
    opacity: 0.5
  }
  .w-radio-group-item-3:focus-visible {
-    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
-    outline: 2px solid transparent
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
+    outline: medium none currentcolor
  }
 }
      `}
--- a/packages/sdk-components-react-radix/src/generated/select.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/select.stories.tsx
@ -1,4 +1,3 @@
-import { useVariableState } from "@webstudio-is/react-sdk/runtime";
 import {
  Box as Box,
  HtmlEmbed as HtmlEmbed,
@ -15,16 +14,9 @@ import {
 } from "../components";

 const Component = () => {
-  let [selectValue, set$selectValue] = useVariableState<any>("");
  return (
    <Box className={"w-box"}>
-      <Select
-        value={selectValue}
-        onValueChange={(value: any) => {
-          selectValue = value;
-          set$selectValue(selectValue);
-        }}
-      >
+      <Select>
        <SelectTrigger className={"w-select-trigger w-select-trigger-1"}>
          <SelectValue placeholder={"Theme"} className={"w-value"} />
        </SelectTrigger>
@ -37,7 +29,7 @@ const Component = () => {
              <SelectItemIndicator className={"w-indicator w-indicator-1"}>
                <HtmlEmbed
                  code={
-                    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M11.957 5.043a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.75 8.836l3.793-3.793a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>'
+                    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.091" d="m13.636 3.667-8 8L2 8.03"/></svg>'
                  }
                  className={"w-html-embed"}
                />
@ -53,7 +45,7 @@ const Component = () => {
              <SelectItemIndicator className={"w-indicator w-indicator-2"}>
                <HtmlEmbed
                  code={
-                    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M11.957 5.043a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.75 8.836l3.793-3.793a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>'
+                    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.091" d="m13.636 3.667-8 8L2 8.03"/></svg>'
                  }
                  className={"w-html-embed"}
                />
@ -69,7 +61,7 @@ const Component = () => {
              <SelectItemIndicator className={"w-indicator w-indicator-3"}>
                <HtmlEmbed
                  code={
-                    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M11.957 5.043a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.75 8.836l3.793-3.793a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>'
+                    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.091" d="m13.636 3.667-8 8L2 8.03"/></svg>'
                  }
                  className={"w-html-embed"}
                />
@ -96,16 +88,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -186,6 +168,43 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
+  :where(div.w-html-embed) {
+    display: contents;
+    white-space: normal;
+    white-space-collapse: collapse
+  }
+  :where(div.w-select-content) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
+  :where(div.w-select-item) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
+  :where(span.w-indicator) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
+  :where(span.w-item-text) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
  :where(button.w-select-trigger) {
    font-family: inherit;
    font-size: 100%;
@ -210,14 +229,6 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
-  :where(div.w-select-content) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
  :where(div.w-select-viewport) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -226,33 +237,6 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
-  :where(div.w-select-item) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(span.w-indicator) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(div.w-html-embed) {
-    display: contents
-  }
-  :where(span.w-item-text) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
 }
@media all {
  .w-select-trigger-1 {
@ -260,16 +244,16 @@ const Story = {
    height: 2.5rem;
    width: 100%;
    align-items: center;
-    justify-content: space-between;
+    justify-content: between;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
-    background-color: rgba(255, 255, 255, 0.8);
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
+    background-color: rgba(255, 255, 255, 1);
    padding-top: 0.5rem;
+    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border: 1px solid rgba(226, 232, 240, 1)
@ -281,10 +265,9 @@ const Story = {
    cursor: not-allowed;
    opacity: 0.5
  }
-  .w-select-trigger-1:focus {
-    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
-    outline: 2px solid transparent
+  .w-select-trigger-1:focus-visible {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
+    outline: medium none currentcolor
  }
  .w-select-content-1 {
    position: relative;
@ -320,16 +303,15 @@ const Story = {
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    padding-top: 0.375rem;
+    padding-right: 0.5rem;
    padding-bottom: 0.375rem;
    padding-left: 2rem;
-    padding-right: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
-    outline-offset: 2px;
-    outline: 2px solid transparent
+    outline: medium none currentcolor
  }
  .w-select-item-1:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-select-item-1[data-disabled] {
@ -358,16 +340,15 @@ const Story = {
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    padding-top: 0.375rem;
+    padding-right: 0.5rem;
    padding-bottom: 0.375rem;
    padding-left: 2rem;
-    padding-right: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
-    outline-offset: 2px;
-    outline: 2px solid transparent
+    outline: medium none currentcolor
  }
  .w-select-item-2:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-select-item-2[data-disabled] {
@ -396,16 +377,15 @@ const Story = {
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    padding-top: 0.375rem;
+    padding-right: 0.5rem;
    padding-bottom: 0.375rem;
    padding-left: 2rem;
-    padding-right: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
-    outline-offset: 2px;
-    outline: 2px solid transparent
+    outline: medium none currentcolor
  }
  .w-select-item-3:focus {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-select-item-3[data-disabled] {
--- a/packages/sdk-components-react-radix/src/generated/sheet.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/sheet.stories.tsx
@ -22,7 +22,7 @@ const Component = () => {
          <Button className={"w-button w-button-1"}>
            <HtmlEmbed
              code={
-                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M2 5.998a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Zm0 5.5a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Zm0 5.5a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>'
+                '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 8h10.666M2.667 4h10.666M2.667 12h10.666"/></svg>'
              }
              className={"w-html-embed"}
            />
@ -46,7 +46,7 @@ const Component = () => {
            <DialogClose className={"w-close-button w-close-button-1"}>
              <HtmlEmbed
                code={
-                  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M13.566 2.434a.8.8 0 0 1 0 1.132L9.13 8l4.435 4.434a.8.8 0 0 1-1.132 1.132L8 9.13l-4.434 4.435a.8.8 0 0 1-1.132-1.132L6.87 8 2.434 3.566a.8.8 0 0 1 1.132-1.132L8 6.87l4.434-4.435a.8.8 0 0 1 1.132 0Z" clip-rule="evenodd"/></svg>'
+                  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.5 3 3 12.5M3 3l9.5 9.5"/></svg>'
                }
                className={"w-html-embed"}
              />
@ -69,16 +69,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -176,39 +166,9 @@ const Story = {
    margin: 0
  }
  :where(div.w-html-embed) {
-    display: contents
-  }
-  :where(div.w-dialog-overlay) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(div.w-dialog-content) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(h2.w-dialog-title) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
-  :where(p.w-dialog-description) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
+    display: contents;
+    white-space: normal;
+    white-space-collapse: collapse
  }
  :where(div.w-text) {
    box-sizing: border-box;
@ -231,13 +191,45 @@ const Story = {
    margin: 0;
    padding: 0px
  }
+  :where(div.w-dialog-content) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
+  :where(p.w-dialog-description) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
+  :where(div.w-dialog-overlay) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
+  :where(h2.w-dialog-title) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
 }
@media all {
  .w-button-1 {
-    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    background-color: transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
@ -245,14 +237,13 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
-    color: currentColor;
    height: 2.5rem;
    width: 2.5rem;
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
    padding-top: 0px;
+    padding-right: 0.375rem;
    padding-bottom: 0px;
-    border: 0px solid rgba(226, 232, 240, 1)
+    padding-left: 0.375rem;
+    border: 0 solid rgba(226, 232, 240, 1)
  }
  .w-button-1:disabled {
    pointer-events: none;
@ -260,23 +251,23 @@ const Story = {
  }
  .w-button-1:focus-visible {
    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
    outline: 2px solid transparent
  }
  .w-button-1:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-sheet-overlay {
    position: fixed;
-    left: 0px;
-    right: 0px;
-    top: 0px;
-    bottom: 0px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.8);
-    -webkit-backdrop-filter: blur(0 1px 2px 0 rgb(0 0 0 / 0.05));
-    backdrop-filter: blur(0 1px 2px 0 rgb(0 0 0 / 0.05));
+    -webkit-backdrop-filter: blur(0 1px 2px 0 rgb(0 0 0/0.05));
+    backdrop-filter: blur(0 1px 2px 0 rgb(0 0 0/0.05));
    display: flex;
    flex-direction: column;
    overflow-x: auto;
@ -289,7 +280,7 @@ const Story = {
    flex-direction: column;
    row-gap: 1rem;
    column-gap: 1rem;
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-right: auto;
@ -301,22 +292,20 @@ const Story = {
  .w-sheet-header {
    display: flex;
    flex-direction: column;
-    row-gap: 0.25rem;
-    column-gap: 0.25rem
+    row-gap: 0.5rem;
+    column-gap: 0.5rem
  }
  .w-sheet-title {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    line-height: 1.75rem;
    font-size: 1.125rem;
-    letter-spacing: -0.025em
+    line-height: 1;
+    letter-spacing: -0.025em;
+    margin: 0
  }
  .w-sheet-description {
-    margin-top: 0px;
-    margin-bottom: 0px;
    font-size: 0.875rem;
    line-height: 1.25rem;
-    color: rgba(100, 116, 139, 1)
+    color: rgba(100, 116, 139, 1);
+    margin: 0
  }
  .w-close-button-1 {
    position: absolute;
@ -333,12 +322,11 @@ const Story = {
    height: 1rem;
    width: 1rem;
    background-color: transparent;
-    outline-offset: 2px;
-    outline: 2px solid transparent;
-    border: 0px solid rgba(226, 232, 240, 1)
+    outline: medium none currentcolor;
+    border: 0 none currentcolor
  }
-  .w-close-button-1:focus {
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1)
+  .w-close-button-1:focus-visible {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1)
  }
  .w-close-button-1:hover {
    opacity: 1
--- a/packages/sdk-components-react-radix/src/generated/switch.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/switch.stories.tsx
@ -1,19 +1,10 @@
-import { useVariableState } from "@webstudio-is/react-sdk/runtime";
 import { Box as Box } from "@webstudio-is/sdk-components-react";
 import { Switch as Switch, SwitchThumb as SwitchThumb } from "../components";

 const Component = () => {
-  let [switchChecked, set$switchChecked] = useVariableState<any>(false);
  return (
    <Box className={"w-box"}>
-      <Switch
-        checked={switchChecked}
-        onCheckedChange={(checked: any) => {
-          switchChecked = checked;
-          set$switchChecked(switchChecked);
-        }}
-        className={"w-switch w-switch-1"}
-      >
+      <Switch className={"w-switch w-switch-1"}>
        <SwitchThumb className={"w-switch-thumb w-switch-thumb-1"} />
      </Switch>
    </Box>
@ -31,16 +22,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -147,7 +128,7 @@ const Story = {
    display: inline-flex;
    height: 24px;
    width: 44px;
-    flex-grow: 0;
+    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    border-top-left-radius: 9999px;
@ -155,8 +136,10 @@ const Story = {
    border-bottom-right-radius: 9999px;
    border-bottom-left-radius: 9999px;
    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0s;
+    transition-behavior: normal;
    border: 2px solid transparent
  }
  .w-switch-1:disabled {
@ -164,14 +147,13 @@ const Story = {
    opacity: 0.5
  }
  .w-switch-1:focus-visible {
-    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
-    outline: 2px solid transparent
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
+    outline: medium none currentcolor
  }
-  .w-switch-1[data-state=checked] {
+  .w-switch-1[data-state="checked"] {
    background-color: rgba(15, 23, 42, 1)
  }
-  .w-switch-1[data-state=unchecked] {
+  .w-switch-1[data-state="unchecked"] {
    background-color: rgba(226, 232, 240, 1)
  }
  .w-switch-thumb-1 {
@ -183,16 +165,18 @@ const Story = {
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
    border-bottom-left-radius: 9999px;
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transition-property: transform;
+    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms
+    transition-delay: 0s;
+    transition-behavior: normal
  }
-  .w-switch-thumb-1[data-state=checked] {
+  .w-switch-thumb-1[data-state="checked"] {
    transform: translateX(20px)
  }
-  .w-switch-thumb-1[data-state=unchecked] {
+  .w-switch-thumb-1[data-state="unchecked"] {
    transform: translateX(0px)
  }
 }
--- a/packages/sdk-components-react-radix/src/generated/tabs.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/tabs.stories.tsx
@ -52,16 +52,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -150,6 +140,14 @@ const Story = {
    border-left-width: 1px;
    outline-width: 1px
  }
+  :where(div.w-tab-content) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
  :where(div.w-tabs-list) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -170,14 +168,6 @@ const Story = {
    margin: 0;
    padding: 0px
  }
-  :where(div.w-tab-content) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
 }
@media all {
  .w-tabs-list-1 {
@ -201,17 +191,19 @@ const Story = {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
    padding-top: 0.375rem;
+    padding-right: 0.75rem;
    padding-bottom: 0.375rem;
+    padding-left: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
-    white-space: normal;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0s;
+    transition-behavior: normal;
+    white-space: nowrap;
    white-space-collapse: collapse
  }
  .w-tab-trigger-1:disabled {
@ -220,11 +212,11 @@ const Story = {
  }
  .w-tab-trigger-1:focus-visible {
    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
    outline: 2px solid transparent
  }
-  .w-tab-trigger-1[data-state=active] {
-    background-color: rgba(255, 255, 255, 0.8);
+  .w-tab-trigger-1[data-state="active"] {
+    background-color: rgba(255, 255, 255, 1);
    color: rgba(2, 8, 23, 1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
  }
@ -236,17 +228,19 @@ const Story = {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
    padding-top: 0.375rem;
+    padding-right: 0.75rem;
    padding-bottom: 0.375rem;
+    padding-left: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
-    white-space: normal;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0s;
+    transition-behavior: normal;
+    white-space: nowrap;
    white-space-collapse: collapse
  }
  .w-tab-trigger-2:disabled {
@ -255,11 +249,11 @@ const Story = {
  }
  .w-tab-trigger-2:focus-visible {
    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
    outline: 2px solid transparent
  }
-  .w-tab-trigger-2[data-state=active] {
-    background-color: rgba(255, 255, 255, 0.8);
+  .w-tab-trigger-2[data-state="active"] {
+    background-color: rgba(255, 255, 255, 1);
    color: rgba(2, 8, 23, 1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
  }
@ -267,17 +261,15 @@ const Story = {
    margin-top: 0.5rem
  }
  .w-tab-content-1:focus-visible {
-    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
-    outline: 2px solid transparent
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
+    outline: medium none currentcolor
  }
  .w-tab-content-2 {
    margin-top: 0.5rem
  }
  .w-tab-content-2:focus-visible {
-    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
-    outline: 2px solid transparent
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
+    outline: medium none currentcolor
  }
 }
      `}
--- a/packages/sdk-components-react-radix/src/generated/tooltip.stories.tsx
+++ b/packages/sdk-components-react-radix/src/generated/tooltip.stories.tsx
@ -35,16 +35,6 @@ const Story = {
        <style>
          {`
@media all {
-  :where(body.w-body) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0
-  }
  :where(div.w-box) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -141,14 +131,6 @@ const Story = {
    text-transform: none;
    margin: 0
  }
-  :where(div.w-tooltip-content) {
-    box-sizing: border-box;
-    border-top-width: 1px;
-    border-right-width: 1px;
-    border-bottom-width: 1px;
-    border-left-width: 1px;
-    outline-width: 1px
-  }
  :where(div.w-text) {
    box-sizing: border-box;
    border-top-width: 1px;
@ -158,13 +140,21 @@ const Story = {
    outline-width: 1px;
    min-height: 1em
  }
+  :where(div.w-tooltip-content) {
+    box-sizing: border-box;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    outline-width: 1px
+  }
 }
@media all {
  .w-button-1 {
-    background-color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    background-color: rgba(255, 255, 255, 1);
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
@ -172,12 +162,11 @@ const Story = {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
-    color: currentColor;
    height: 2.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
    padding-top: 0.5rem;
+    padding-right: 1rem;
    padding-bottom: 0.5rem;
+    padding-left: 1rem;
    border: 1px solid rgba(226, 232, 240, 1)
  }
  .w-button-1:disabled {
@ -186,11 +175,11 @@ const Story = {
  }
  .w-button-1:focus-visible {
    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(148, 163, 184, 1);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 calc(2px + 2px) rgba(148, 163, 184, 1);
    outline: 2px solid transparent
  }
  .w-button-1:hover {
-    background-color: rgba(241, 245, 249, 0.9);
+    background-color: rgba(241, 245, 249, 1);
    color: rgba(15, 23, 42, 1)
  }
  .w-tooltip-content-1 {
@ -202,15 +191,14 @@ const Story = {
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 1);
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
    padding-top: 0.375rem;
+    padding-right: 0.75rem;
    padding-bottom: 0.375rem;
+    padding-left: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgba(2, 8, 23, 1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(226, 232, 240, 1)
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)
  }
 }
      `}
--- a/packages/sdk-components-react-radix/src/accordion.template.tsx
+++ b/packages/sdk-components-react-radix/src/accordion.template.tsx
@ -50,22 +50,22 @@ const createAccordionItem = (triggerText: string, contentText: string) => {
            }
          `}
        >
-          {new PlaceholderValue(triggerText)}
+          <$.Text>{new PlaceholderValue(triggerText)}</$.Text>
+          <$.Box
+            ws:label="Icon Container"
+            // h-4 w-4 shrink-0 transition-transform duration-200
+            ws:style={css`
+              rotate: --accordion-trigger-icon-transform;
+              height: ${height[4]};
+              width: ${width[4]};
+              flex-shrink: 0;
+              transition: ${transition.all};
+              transition-duration: 200ms;
+            `}
+          >
+            <$.HtmlEmbed ws:label="Chevron Icon" code={ChevronDownIcon} />
+          </$.Box>
        </radix.AccordionTrigger>
-        <$.Box
-          ws:label="Icon Container"
-          // h-4 w-4 shrink-0 transition-transform duration-200
-          ws:style={css`
-            rotate: --accordion-trigger-icon-transform;
-            height: ${height[4]};
-            width: ${width[4]};
-            flex-shrink: 0;
-            transition: ${transition.all};
-            transition-duration: 200ms;
-          `}
-        >
-          <$.HtmlEmbed ws:label="Chevron Icon" code={ChevronDownIcon} />
-        </$.Box>
      </radix.AccordionHeader>
      <radix.AccordionContent
        // overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down
--- a/packages/sdk-components-react-radix/src/checkbox.tsx
+++ b/packages/sdk-components-react-radix/src/checkbox.tsx
@ -11,7 +11,7 @@ export const Checkbox = forwardRef<
  // radix checked has complex named type which cannot be parsed
  // cast to boolean
  Omit<ComponentPropsWithRef<typeof Root>, "checked" | "defaultChecked"> & {
-    checked: boolean;
+    checked?: boolean;
    defaultChecked?: boolean;
  }
 >(({ checked, defaultChecked, ...props }, ref) => {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1783,9 +1783,9 @@ importers:
      '@webstudio-is/sdk':
        specifier: workspace:^
        version: link:../sdk
-      '@webstudio-is/sdk-components-react':
+      '@webstudio-is/template':
        specifier: workspace:^
-        version: link:../sdk-components-react
+        version: link:../template
      change-case:
        specifier: ^5.4.4
        version: 5.4.4