@webstudio-is/react-sdk 0.65.0 → 0.67.0

package/src/components/components-utils.ts

@@ -1,63 +1,19 @@
-import type { forwardRef } from "react";
 import * as components from "./components";
 import { registeredComponents } from "./index";
+import { componentAttribute, idAttribute } from "../tree";
 
 export type ComponentName = keyof typeof components;
 
-/**
- * We need to define component names manually here, instead of using Object.keys(components)
- * Otherwise every component would be included in the bundle, even if it is not used
- *
- * @todo this list should not be hardcoded!
- */
-const componentNames = Object.keys({
-  Slot: 1,
-  Fragment: 1,
-  Box: 1,
-  Body: 1,
-  TextBlock: 1,
-  Heading: 1,
-  Paragraph: 1,
-  Link: 1,
-  LinkBlock: 1,
-  RichTextLink: 1,
-  Span: 1,
-  Bold: 1,
-  Italic: 1,
-  Superscript: 1,
-  Subscript: 1,
-  Button: 1,
-  Input: 1,
-  Form: 1,
-  Image: 1,
-  Blockquote: 1,
-  List: 1,
-  ListItem: 1,
-  Separator: 1,
-  Code: 1,
-  Label: 1,
-  SuccessMessage: 1,
-  ErrorMessage: 1,
-  Textarea: 1,
-  RadioButtonField: 1,
-  RadioButton: 1,
-  CheckboxField: 1,
-  Checkbox: 1,
-} satisfies { [K in keyof typeof components]: 1 }) as Array<
-  keyof typeof components
->;
-
-export const getComponentNames = (): ComponentName[] => {
-  const uniqueNames = new Set([
-    ...componentNames,
-    ...Object.keys(registeredComponents || {}),
-  ]);
-
-  return Array.from(uniqueNames) as ComponentName[];
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AnyComponent = ReturnType<typeof forwardRef<any, any>>;
+type AnyComponent = React.ForwardRefExoticComponent<
+  Omit<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
+    "ref"
+  > & {
+    [componentAttribute]: string;
+    [idAttribute]: string;
+  } & React.RefAttributes<HTMLElement>
+>;
 
 /**
  * Now used only in builder app
@@ -65,8 +21,8 @@ type AnyComponent = ReturnType<typeof forwardRef<any, any>>;
  */
 export const getComponent = (name: string): undefined | AnyComponent => {
   return registeredComponents != null && name in registeredComponents
-    ? (registeredComponents[name as ComponentName] as AnyComponent)
-    : components[name as ComponentName];
+    ? (registeredComponents[name as ComponentName] as never)
+    : (components[name as ComponentName] as never);
 };
 
 /**
@@ -78,8 +34,8 @@ export const getComponent = (name: string): undefined | AnyComponent => {
 export const createGetComponent = (comps: Partial<typeof components>) => {
   return (name: string): undefined | AnyComponent => {
     return registeredComponents != null && name in registeredComponents
-      ? (registeredComponents[name as ComponentName] as AnyComponent)
-      : comps[name as ComponentName];
+      ? (registeredComponents[name as ComponentName] as never)
+      : (comps[name as ComponentName] as never);
   };
 };
 

package/src/components/components.ts

@@ -7,6 +7,7 @@
  */
 export { Slot } from "./slot";
 export { Fragment } from "./fragment";
+export { HtmlEmbed } from "./html-embed";
 export { Body } from "./body";
 export { Box } from "./box";
 export { TextBlock } from "./text-block";
@@ -28,7 +29,7 @@ export { Blockquote } from "./blockquote";
 export { List } from "./list";
 export { ListItem } from "./list-item";
 export { Separator } from "./separator";
-export { Code } from "./code";
+export { CodeText } from "./code-text";
 export { Label } from "./label";
 export { SuccessMessage } from "./success-message";
 export { ErrorMessage } from "./error-message";

package/src/components/error-message.ws.tsx

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import type {
   WsComponentMeta,
   WsComponentPropsMeta,
@@ -14,7 +14,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "container",
   label: "Error Message",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   presetStyle,
 };
 

package/src/components/form.ws.tsx

@@ -1,4 +1,4 @@
-import { FormIcon } from "@webstudio-is/icons";
+import { FormIcon } from "@webstudio-is/icons/svg";
 import { form } from "../css/normalize";
 import {
   defaultStates,
@@ -20,7 +20,7 @@ export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
   label: "Form",
-  Icon: FormIcon,
+  icon: FormIcon,
   states: defaultStates,
   presetStyle,
   children: [

package/src/components/fragment.ws.ts

@@ -3,7 +3,7 @@ import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 export const meta: WsComponentMeta = {
   type: "container",
   label: "Fragment",
-  Icon: () => null,
+  icon: "",
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/heading.ws.tsx

@@ -1,4 +1,4 @@
-import { HeadingIcon } from "@webstudio-is/icons";
+import { HeadingIcon } from "@webstudio-is/icons/svg";
 import type { ComponentProps } from "react";
 import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
 import {
@@ -25,7 +25,7 @@ export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
-  Icon: HeadingIcon,
+  icon: HeadingIcon,
   children: [{ type: "text", value: "Heading you can edit" }],
   states: defaultStates,
   presetStyle,

package/src/components/html-embed.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { HtmlEmbed as HtmlEmbedPrimitive } from "./html-embed";
+
+export default {
+  title: "Components/HtmlEmbed",
+  component: HtmlEmbedPrimitive,
+} as ComponentMeta<typeof HtmlEmbedPrimitive>;
+
+const Template: ComponentStory<typeof HtmlEmbedPrimitive> = (args) => (
+  <HtmlEmbedPrimitive {...args} />
+);
+
+export const HtmlEmbed = Template.bind({});
+HtmlEmbed.args = {
+  code: "<strong>custom code</strong>",
+};

package/src/components/html-embed.tsx

@@ -0,0 +1,96 @@
+import {
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  type ForwardedRef,
+} from "react";
+import { mergeRefs } from "@react-aria/utils";
+import { ReactSdkContext } from "../context";
+
+type Props = {
+  code: string;
+  executeScriptOnCanvas: boolean;
+};
+
+type ChildProps = {
+  innerRef: ForwardedRef<HTMLDivElement>;
+  // code can be actually undefined when prop is not provided
+  code?: string;
+};
+
+/**
+ * Scripts are executed when rendered client side.
+ * Necessary on canvas which does not have server rendering.
+ */
+const ExecutableHtml = (props: ChildProps) => {
+  const { code, innerRef, ...rest } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null || code === undefined) {
+      return;
+    }
+    // the trick to execute inserted scripts
+    // https://ghinda.net/article/script-tags
+    const range = document.createRange();
+    range.setStart(container, 0);
+    const fragment = range.createContextualFragment(code);
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+    container.append(fragment);
+  }, [code]);
+
+  return (
+    <div
+      {...rest}
+      ref={mergeRefs(innerRef, containerRef)}
+      style={{ display: "contents" }}
+    />
+  );
+};
+
+/**
+ * Scripts are executed when rendered server side
+ */
+const InnerHtml = (props: ChildProps) => {
+  const { code, innerRef, ...rest } = props;
+
+  return (
+    <div
+      {...rest}
+      ref={innerRef}
+      style={{ display: "contents" }}
+      dangerouslySetInnerHTML={{ __html: props.code ?? "" }}
+    />
+  );
+};
+
+const Placeholder = (props: ChildProps) => {
+  const { code, innerRef, ...rest } = props;
+  return (
+    <div ref={innerRef} {...rest} style={{ padding: "20px" }}>
+      {'Open "Properties" panel to insert HTML code'}
+    </div>
+  );
+};
+
+export const HtmlEmbed = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const { renderer } = useContext(ReactSdkContext);
+  const { code, executeScriptOnCanvas, ...rest } = props;
+
+  // code can be actually undefined when prop is not provided
+  if (code === undefined || code.trim().length === 0) {
+    return <Placeholder innerRef={ref} {...rest} />;
+  }
+
+  if (renderer === "canvas" && executeScriptOnCanvas === true) {
+    return <ExecutableHtml innerRef={ref} code={code} {...rest} />;
+  }
+
+  return <InnerHtml innerRef={ref} code={code} {...rest} />;
+});
+
+HtmlEmbed.displayName = "HtmlEmbed";

package/src/components/html-embed.ws.ts

@@ -0,0 +1,22 @@
+import { EmbedIcon } from "@webstudio-is/icons/svg";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { props } from "./__generated__/html-embed.props";
+
+export const meta: WsComponentMeta = {
+  category: "general",
+  type: "embed",
+  label: "HTML Embed",
+  icon: EmbedIcon,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props: {
+    ...props,
+    code: {
+      required: true,
+      control: "code",
+      type: "string",
+      rows: 10,
+    },
+  },
+};

package/src/components/image.ws.tsx

@@ -1,4 +1,4 @@
-import { ImageIcon } from "@webstudio-is/icons";
+import { ImageIcon } from "@webstudio-is/icons/svg";
 import { img } from "../css/normalize";
 import {
   defaultStates,
@@ -31,7 +31,7 @@ export const meta: WsComponentMeta = {
   category: "media",
   type: "embed",
   label: "Image",
-  Icon: ImageIcon,
+  icon: ImageIcon,
   states: defaultStates,
   presetStyle,
 };

package/src/components/index.ts

@@ -1,8 +1,8 @@
-import { PropMeta } from "@webstudio-is/generate-arg-types";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import type { ComponentName } from "./components-utils";
 import { meta as SlotMeta } from "./slot.ws";
 import { meta as FragmentMeta } from "./fragment.ws";
+import { meta as HtmlEmbedMeta } from "./html-embed.ws";
 import { meta as BodyMeta } from "./body.ws";
 import { meta as BoxMeta } from "./box.ws";
 import { meta as TextBlockMeta } from "./text-block.ws";
@@ -24,7 +24,7 @@ import { meta as BlockquoteMeta } from "./blockquote.ws";
 import { meta as ListMeta } from "./list.ws";
 import { meta as ListItemMeta } from "./list-item.ws";
 import { meta as SeparatorMeta } from "./separator.ws";
-import { meta as CodeMeta } from "./code.ws";
+import { meta as CodeTextMeta } from "./code-text.ws";
 import { meta as LabelMeta } from "./label.ws";
 import { meta as SuccessMessageMeta } from "./success-message.ws";
 import { meta as ErrorMessageMeta } from "./error-message.ws";
@@ -37,6 +37,7 @@ import { meta as CheckboxMeta } from "./checkbox.ws";
 // these are huge JSON objects that we want to be tree-shaken when not used!
 import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
 import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
+import { propsMeta as HtmlEmbedMetaPropsMeta } from "./html-embed.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
 import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
 import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
@@ -58,7 +59,7 @@ import { propsMeta as BlockquotePropsMeta } from "./blockquote.ws";
 import { propsMeta as ListPropsMeta } from "./list.ws";
 import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
 import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
-import { propsMeta as CodePropsMeta } from "./code.ws";
+import { propsMeta as CodeTextPropsMeta } from "./code-text.ws";
 import { propsMeta as LabelPropsMeta } from "./label.ws";
 import { propsMeta as SuccessMessagePropsMeta } from "./success-message.ws";
 import { propsMeta as ErrorMessagePropsMeta } from "./error-message.ws";
@@ -69,9 +70,10 @@ import { propsMeta as CheckboxFieldPropsMeta } from "./checkbox-field.ws";
 import { propsMeta as CheckboxPropsMeta } from "./checkbox.ws";
 
 // @todo this list should not be hardcoded!
-const defaultMetas: Record<string, WsComponentMeta> = {
+export const defaultMetas: Record<string, WsComponentMeta> = {
   Slot: SlotMeta,
   Fragment: FragmentMeta,
+  HtmlEmbed: HtmlEmbedMeta,
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -93,7 +95,7 @@ const defaultMetas: Record<string, WsComponentMeta> = {
   List: ListMeta,
   ListItem: ListItemMeta,
   Separator: SeparatorMeta,
-  Code: CodeMeta,
+  CodeText: CodeTextMeta,
   Label: LabelMeta,
   SuccessMessage: SuccessMessageMeta,
   ErrorMessage: ErrorMessageMeta,
@@ -121,9 +123,10 @@ export const registerComponentMetas = (
 };
 
 // @todo this list should not be hardcoded!
-const defaultPropsMetasRaw = {
+export const defaultPropsMetas: Record<string, WsComponentPropsMeta> = {
   Slot: SlotMetaPropsMeta,
   Fragment: FragmentMetaPropsMeta,
+  HtmlEmbed: HtmlEmbedMetaPropsMeta,
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,
@@ -145,7 +148,7 @@ const defaultPropsMetasRaw = {
   List: ListPropsMeta,
   ListItem: ListItemPropsMeta,
   Separator: SeparatorPropsMeta,
-  Code: CodePropsMeta,
+  CodeText: CodeTextPropsMeta,
   Label: LabelPropsMeta,
   SuccessMessage: SuccessMessagePropsMeta,
   ErrorMessage: ErrorMessagePropsMeta,
@@ -154,44 +157,6 @@ const defaultPropsMetasRaw = {
   RadioButton: RadioButtonPropsMeta,
   CheckboxField: CheckboxFieldPropsMeta,
   Checkbox: CheckboxPropsMeta,
-} as const;
-
-const defaultPropsMetas: Record<string, WsComponentPropsMeta> =
-  defaultPropsMetasRaw;
-
-let registeredPropsMetas: Record<string, Partial<WsComponentPropsMeta>> = {};
-
-// we start as `undefined` because pre-computing will likely kill tree-shaking
-let currentPropsMetas: Record<string, WsComponentPropsMeta> | undefined =
-  undefined;
-
-export const getComponentPropsMeta = (
-  name: string
-): WsComponentPropsMeta | undefined => {
-  if (currentPropsMetas === undefined) {
-    currentPropsMetas = {};
-    for (const name of Object.keys(defaultPropsMetas)) {
-      const props = computeProps(
-        defaultPropsMetas[name],
-        registeredPropsMetas[name] ?? {}
-      );
-      const initialProps = computeInitialProps(
-        props,
-        defaultPropsMetas[name],
-        registeredPropsMetas[name] ?? {}
-      );
-      currentPropsMetas[name] = { props, initialProps };
-    }
-  }
-
-  return currentPropsMetas[name];
-};
-
-export const registerComponentPropsMetas = (
-  metas: Record<string, WsComponentPropsMeta>
-) => {
-  registeredPropsMetas = metas;
-  currentPropsMetas = undefined;
 };
 
 type RegisteredComponents = Partial<{
@@ -210,48 +175,6 @@ export const registerComponents = (components: RegisteredComponents) => {
   registeredComponents = components;
 };
 
-const computeProps = (
-  defaults: WsComponentPropsMeta,
-  overrides: Partial<WsComponentPropsMeta>
-) => {
-  if (overrides) {
-    const allNames = new Set([
-      ...Object.keys(defaults.props ?? {}),
-      ...Object.keys(overrides?.props ?? {}),
-    ]).values();
-
-    const result: WsComponentPropsMeta["props"] = {};
-    for (const name of allNames) {
-      result[name] = PropMeta.parse({
-        ...defaults.props[name],
-        ...overrides?.props?.[name],
-      });
-    }
-    return result;
-  }
-
-  return defaults.props;
-};
-
-const computeInitialProps = (
-  props: WsComponentPropsMeta["props"],
-  defaults: WsComponentPropsMeta,
-  overrides: Partial<WsComponentPropsMeta>
-): Array<string> => {
-  const initialProps = overrides?.initialProps ?? defaults?.initialProps ?? [];
-  const requiredProps = props
-    ? Object.entries(props)
-        .filter(
-          ([name, value]) =>
-            value?.required && initialProps.includes(name) === false
-        )
-        .map(([name]) => name)
-    : [];
-
-  // order of initialProps must be preserved
-  return [...initialProps, ...requiredProps];
-};
-
 export const canAcceptComponent = (
   parentComponent: string,
   childComponent: string

package/src/components/input.ws.tsx

@@ -1,4 +1,4 @@
-import { FormTextFieldIcon } from "@webstudio-is/icons";
+import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
 import { input } from "../css/normalize";
 import {
   defaultStates,
@@ -17,7 +17,7 @@ export const meta: WsComponentMeta = {
   category: "forms",
   type: "control",
   label: "Text Input",
-  Icon: FormTextFieldIcon,
+  icon: FormTextFieldIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/src/components/italic.ws.tsx

@@ -1,4 +1,4 @@
-import { TextItalicIcon } from "@webstudio-is/icons";
+import { TextItalicIcon } from "@webstudio-is/icons/svg";
 import type { defaultTag } from "./italic";
 import {
   defaultStates,
@@ -22,7 +22,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Italic Text",
-  Icon: TextItalicIcon,
+  icon: TextItalicIcon,
   states: defaultStates,
   presetStyle,
 };

package/src/components/label.ws.tsx

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons";
+import { TextBlockIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -20,7 +20,7 @@ export const meta: WsComponentMeta = {
   category: "forms",
   type: "rich-text",
   label: "Input Label",
-  Icon: TextBlockIcon,
+  icon: TextBlockIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Form Label" }],

package/src/components/link-block.ws.tsx

@@ -1,4 +1,4 @@
-import { LinkBlockIcon } from "@webstudio-is/icons";
+import { LinkBlockIcon } from "@webstudio-is/icons/svg";
 import type {
   PresetStyle,
   WsComponentMeta,
@@ -23,7 +23,7 @@ export const meta: WsComponentMeta = {
   category: "general",
   type: "container",
   label: "Link Block",
-  Icon: LinkBlockIcon,
+  icon: LinkBlockIcon,
   states: linkMeta.states,
   presetStyle,
 };

package/src/components/link.ws.tsx

@@ -1,4 +1,4 @@
-import { LinkIcon } from "@webstudio-is/icons";
+import { LinkIcon } from "@webstudio-is/icons/svg";
 import { a } from "../css/normalize";
 import {
   defaultStates,
@@ -27,7 +27,7 @@ export const meta: WsComponentMeta = {
   category: "general",
   type: "rich-text",
   label: "Link Text",
-  Icon: LinkIcon,
+  icon: LinkIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/src/components/list-item.ws.tsx

@@ -1,4 +1,4 @@
-import { ListItemIcon } from "@webstudio-is/icons";
+import { ListItemIcon } from "@webstudio-is/icons/svg";
 import { li } from "../css/normalize";
 import {
   defaultStates,
@@ -18,7 +18,7 @@ export const meta: WsComponentMeta = {
   type: "rich-text",
   acceptedParents: ["List"],
   label: "List Item",
-  Icon: ListItemIcon,
+  icon: ListItemIcon,
   children: [{ type: "text", value: "List Item you can edit" }],
   states: defaultStates,
   presetStyle,

package/src/components/list.ws.tsx

@@ -1,4 +1,4 @@
-import { ListIcon } from "@webstudio-is/icons";
+import { ListIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
   type PresetStyle,
@@ -46,7 +46,7 @@ export const meta: WsComponentMeta = {
   category: "typography",
   type: "container",
   label: "List",
-  Icon: ListIcon,
+  icon: ListIcon,
   states: defaultStates,
   presetStyle,
   children: [],

package/src/components/paragraph.ws.tsx

@@ -1,4 +1,4 @@
-import { TextAlignLeftIcon } from "@webstudio-is/icons";
+import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
 import { p } from "../css/normalize";
 import {
   defaultStates,
@@ -17,7 +17,7 @@ export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Paragraph",
-  Icon: TextAlignLeftIcon,
+  icon: TextAlignLeftIcon,
   children: [{ type: "text", value: "Pragraph you can edit" }],
   states: defaultStates,
   presetStyle,

package/src/components/radio-button-field.ws.tsx

@@ -1,4 +1,4 @@
-import { RadioCheckedIcon } from "@webstudio-is/icons";
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -20,7 +20,7 @@ export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
   label: "Radio",
-  Icon: RadioCheckedIcon,
+  icon: RadioCheckedIcon,
   states: defaultStates,
   presetStyle,
   children: [

package/src/components/radio-button.ws.tsx

@@ -1,4 +1,4 @@
-import { RadioCheckedIcon } from "@webstudio-is/icons";
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -22,7 +22,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "control",
   label: "Radio Input",
-  Icon: RadioCheckedIcon,
+  icon: RadioCheckedIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/src/components/separator.ws.tsx

@@ -1,4 +1,4 @@
-import { DashIcon } from "@webstudio-is/icons";
+import { DashIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
   type PresetStyle,
@@ -44,7 +44,7 @@ export const meta: WsComponentMeta = {
   category: "general",
   type: "embed",
   label: "Separator",
-  Icon: DashIcon,
+  icon: DashIcon,
   states: defaultStates,
   presetStyle,
   children: [],

package/src/components/slot.ws.ts

@@ -1,11 +1,11 @@
-import { SlotComponentIcon } from "@webstudio-is/icons";
+import { SlotComponentIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 
 export const meta: WsComponentMeta = {
   category: "general",
   type: "container",
   label: "Slot",
-  Icon: SlotComponentIcon,
+  icon: SlotComponentIcon,
 };
 
 export const propsMeta: WsComponentPropsMeta = {