@webstudio-is/react-sdk 0.64.0 → 0.66.0

package/lib/cjs/components/index.js

@@ -19,17 +19,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var components_exports = {};
 __export(components_exports, {
   canAcceptComponent: () => canAcceptComponent,
+  defaultMetas: () => defaultMetas,
+  defaultPropsMetas: () => defaultPropsMetas,
   getComponentMeta: () => getComponentMeta,
-  getComponentPropsMeta: () => getComponentPropsMeta,
   registerComponentMetas: () => registerComponentMetas,
-  registerComponentPropsMetas: () => registerComponentPropsMetas,
   registerComponents: () => registerComponents,
   registeredComponents: () => registeredComponents
 });
 module.exports = __toCommonJS(components_exports);
-var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
 var import_slot = require("./slot.ws");
 var import_fragment = require("./fragment.ws");
+var import_html = require("./html.ws");
 var import_body = require("./body.ws");
 var import_box = require("./box.ws");
 var import_text_block = require("./text-block.ws");
@@ -62,6 +62,7 @@ var import_checkbox_field = require("./checkbox-field.ws");
 var import_checkbox = require("./checkbox.ws");
 var import_slot2 = require("./slot.ws");
 var import_fragment2 = require("./fragment.ws");
+var import_html2 = require("./html.ws");
 var import_body2 = require("./body.ws");
 var import_box2 = require("./box.ws");
 var import_text_block2 = require("./text-block.ws");
@@ -95,6 +96,7 @@ var import_checkbox2 = require("./checkbox.ws");
 const defaultMetas = {
   Slot: import_slot.meta,
   Fragment: import_fragment.meta,
+  Html: import_html.meta,
   Box: import_box.meta,
   Body: import_body.meta,
   TextBlock: import_text_block.meta,
@@ -137,9 +139,10 @@ const registerComponentMetas = (overrides) => {
   }
   currentMetas = result;
 };
-const defaultPropsMetasRaw = {
+const defaultPropsMetas = {
   Slot: import_slot2.propsMeta,
   Fragment: import_fragment2.propsMeta,
+  Html: import_html2.propsMeta,
   Box: import_box2.propsMeta,
   Body: import_body2.propsMeta,
   TextBlock: import_text_block2.propsMeta,
@@ -171,59 +174,10 @@ const defaultPropsMetasRaw = {
   CheckboxField: import_checkbox_field2.propsMeta,
   Checkbox: import_checkbox2.propsMeta
 };
-const defaultPropsMetas = defaultPropsMetasRaw;
-let registeredPropsMetas = {};
-let currentPropsMetas = void 0;
-const getComponentPropsMeta = (name) => {
-  if (currentPropsMetas === void 0) {
-    currentPropsMetas = {};
-    for (const name2 of Object.keys(defaultPropsMetas)) {
-      const props = computeProps(
-        defaultPropsMetas[name2],
-        registeredPropsMetas[name2] ?? {}
-      );
-      const initialProps = computeInitialProps(
-        props,
-        defaultPropsMetas[name2],
-        registeredPropsMetas[name2] ?? {}
-      );
-      currentPropsMetas[name2] = { props, initialProps };
-    }
-  }
-  return currentPropsMetas[name];
-};
-const registerComponentPropsMetas = (metas) => {
-  registeredPropsMetas = metas;
-  currentPropsMetas = void 0;
-};
 let registeredComponents;
 const registerComponents = (components) => {
   registeredComponents = components;
 };
-const computeProps = (defaults, overrides) => {
-  if (overrides) {
-    const allNames = (/* @__PURE__ */ new Set([
-      ...Object.keys(defaults.props ?? {}),
-      ...Object.keys(overrides?.props ?? {})
-    ])).values();
-    const result = {};
-    for (const name of allNames) {
-      result[name] = import_generate_arg_types.PropMeta.parse({
-        ...defaults.props[name],
-        ...overrides?.props?.[name]
-      });
-    }
-    return result;
-  }
-  return defaults.props;
-};
-const computeInitialProps = (props, defaults, overrides) => {
-  const initialProps = overrides?.initialProps ?? defaults?.initialProps ?? [];
-  const requiredProps = props ? Object.entries(props).filter(
-    ([name, value]) => value?.required && initialProps.includes(name) === false
-  ).map(([name]) => name) : [];
-  return [...initialProps, ...requiredProps];
-};
 const canAcceptComponent = (parentComponent, childComponent) => {
   const parentMeta = getComponentMeta(parentComponent);
   const childMeta = getComponentMeta(childComponent);

package/lib/cjs/components/input.ws.js

@@ -22,7 +22,7 @@ __export(input_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(input_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_input = require("./__generated__/input.props");
@@ -32,8 +32,8 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "control",
-  label: "Text Field",
-  Icon: import_icons.FormTextFieldIcon,
+  label: "Text Input",
+  icon: import_svg.FormTextFieldIcon,
   presetStyle,
   states: [
     ...import_component_meta.defaultStates,

package/lib/cjs/components/italic.ws.js

@@ -22,7 +22,7 @@ __export(italic_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(italic_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_italic = require("./__generated__/italic.props");
 var import_normalize = require("../css/normalize");
@@ -38,7 +38,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Italic Text",
-  Icon: import_icons.TextItalicIcon,
+  icon: import_svg.TextItalicIcon,
   states: import_component_meta.defaultStates,
   presetStyle
 };

package/lib/cjs/components/label.ws.js

@@ -22,7 +22,7 @@ __export(label_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(label_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_label = require("./__generated__/label.props");
 var import_normalize = require("../css/normalize");
@@ -36,7 +36,7 @@ const meta = {
   category: "forms",
   type: "rich-text",
   label: "Input Label",
-  Icon: import_icons.TextBlockIcon,
+  icon: import_svg.TextBlockIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Form Label" }]

package/lib/cjs/components/link-block.ws.js

@@ -22,7 +22,7 @@ __export(link_block_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(link_block_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_link_block = require("./__generated__/link-block.props");
 var import_link = require("./link.ws");
 var import_normalize = require("../css/normalize");
@@ -39,7 +39,7 @@ const meta = {
   category: "general",
   type: "container",
   label: "Link Block",
-  Icon: import_icons.LinkBlockIcon,
+  icon: import_svg.LinkBlockIcon,
   states: import_link.meta.states,
   presetStyle
 };

package/lib/cjs/components/link.ws.js

@@ -22,7 +22,7 @@ __export(link_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(link_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_link = require("./__generated__/link.props");
@@ -43,7 +43,7 @@ const meta = {
   category: "general",
   type: "rich-text",
   label: "Link Text",
-  Icon: import_icons.LinkIcon,
+  icon: import_svg.LinkIcon,
   presetStyle,
   states: [
     ...import_component_meta.defaultStates,

package/lib/cjs/components/list-item.ws.js

@@ -22,7 +22,7 @@ __export(list_item_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(list_item_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_list_item = require("./__generated__/list-item.props");
@@ -34,7 +34,7 @@ const meta = {
   type: "rich-text",
   acceptedParents: ["List"],
   label: "List Item",
-  Icon: import_icons.ListItemIcon,
+  icon: import_svg.ListItemIcon,
   children: [{ type: "text", value: "List Item you can edit" }],
   states: import_component_meta.defaultStates,
   presetStyle

package/lib/cjs/components/list.ws.js

@@ -22,7 +22,7 @@ __export(list_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(list_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_list = require("./__generated__/list.props");
 var import_normalize = require("../css/normalize");
@@ -62,7 +62,7 @@ const meta = {
   category: "typography",
   type: "container",
   label: "List",
-  Icon: import_icons.ListIcon,
+  icon: import_svg.ListIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
   children: []

package/lib/cjs/components/paragraph.ws.js

@@ -22,7 +22,7 @@ __export(paragraph_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(paragraph_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_paragraph = require("./__generated__/paragraph.props");
@@ -33,7 +33,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Paragraph",
-  Icon: import_icons.TextAlignLeftIcon,
+  icon: import_svg.TextAlignLeftIcon,
   children: [{ type: "text", value: "Pragraph you can edit" }],
   states: import_component_meta.defaultStates,
   presetStyle

package/lib/cjs/components/radio-button-field.ws.js

@@ -22,7 +22,7 @@ __export(radio_button_field_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(radio_button_field_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_radio_button_field = require("./__generated__/radio-button-field.props");
 var import_normalize = require("../css/normalize");
@@ -35,8 +35,8 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "container",
-  label: "Radio Button Field",
-  Icon: import_icons.RadioCheckedIcon,
+  label: "Radio",
+  icon: import_svg.RadioCheckedIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
   children: [
@@ -44,6 +44,7 @@ const meta = {
     {
       type: "instance",
       component: "TextBlock",
+      label: "Radio Label",
       props: [],
       children: [{ type: "text", value: "Radio" }]
     }

package/lib/cjs/components/radio-button.ws.js

@@ -22,7 +22,7 @@ __export(radio_button_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(radio_button_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_normalize = require("../css/normalize");
 var import_radio_button = require("./__generated__/radio-button.props");
@@ -37,8 +37,8 @@ const presetStyle = {
 };
 const meta = {
   type: "control",
-  label: "Radio Button",
-  Icon: import_icons.RadioCheckedIcon,
+  label: "Radio Input",
+  icon: import_svg.RadioCheckedIcon,
   presetStyle,
   states: [
     ...import_component_meta.defaultStates,

package/lib/cjs/components/separator.ws.js

@@ -22,7 +22,7 @@ __export(separator_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(separator_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_separator = require("./__generated__/separator.props");
 var import_normalize = require("../css/normalize");
@@ -59,7 +59,7 @@ const meta = {
   category: "general",
   type: "embed",
   label: "Separator",
-  Icon: import_icons.DashIcon,
+  icon: import_svg.DashIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
   children: []

package/lib/cjs/components/slot.ws.js

@@ -22,12 +22,12 @@ __export(slot_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(slot_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 const meta = {
   category: "general",
   type: "container",
   label: "Slot",
-  Icon: import_icons.SlotComponentIcon
+  icon: import_svg.SlotComponentIcon
 };
 const propsMeta = {
   props: {}

package/lib/cjs/components/span.ws.js

@@ -22,7 +22,7 @@ __export(span_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(span_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_span = require("./__generated__/span.props");
@@ -32,7 +32,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Styled Text",
-  Icon: import_icons.PaintBrushIcon,
+  icon: import_svg.PaintBrushIcon,
   states: import_component_meta.defaultStates,
   presetStyle
 };

package/lib/cjs/components/subscript.ws.js

@@ -22,7 +22,7 @@ __export(subscript_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(subscript_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_subscript = require("./__generated__/subscript.props");
@@ -32,7 +32,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
-  Icon: import_icons.SubscriptIcon,
+  icon: import_svg.SubscriptIcon,
   states: import_component_meta.defaultStates,
   presetStyle
 };

package/lib/cjs/components/success-message.ws.js

@@ -22,7 +22,7 @@ __export(success_message_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(success_message_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_success_message = require("./__generated__/success-message.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -31,7 +31,7 @@ const presetStyle = {
 const meta = {
   type: "container",
   label: "Success Message",
-  Icon: import_icons.BoxIcon,
+  icon: import_svg.BoxIcon,
   presetStyle
 };
 const propsMeta = {

package/lib/cjs/components/superscript.ws.js

@@ -22,7 +22,7 @@ __export(superscript_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(superscript_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_superscript = require("./__generated__/superscript.props");
@@ -32,7 +32,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
-  Icon: import_icons.SuperscriptIcon,
+  icon: import_svg.SuperscriptIcon,
   states: import_component_meta.defaultStates,
   presetStyle
 };

package/lib/cjs/components/text-block.ws.js

@@ -22,7 +22,7 @@ __export(text_block_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(text_block_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_text_block = require("./__generated__/text-block.props");
 var import_normalize = require("../css/normalize");
@@ -39,7 +39,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Text Block",
-  Icon: import_icons.TextBlockIcon,
+  icon: import_svg.TextBlockIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Block of text you can edit" }]

package/lib/cjs/components/textarea.ws.js

@@ -22,7 +22,7 @@ __export(textarea_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(textarea_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_textarea = require("./__generated__/textarea.props");
@@ -37,7 +37,7 @@ const meta = {
   category: "forms",
   type: "control",
   label: "Text Area",
-  Icon: import_icons.FormTextAreaIcon,
+  icon: import_svg.FormTextAreaIcon,
   presetStyle,
   states: [
     ...import_component_meta.defaultStates,

package/lib/cjs/css/css.js

@@ -23,8 +23,6 @@ __export(css_exports, {
 });
 module.exports = __toCommonJS(css_exports);
 var import_css_engine = require("@webstudio-is/css-engine");
-var import_components_utils = require("../components/components-utils");
-var import_components = require("../components");
 var import_tree = require("../tree");
 var import_global_rules = require("./global-rules");
 var import_style_rules = require("./style-rules");
@@ -61,9 +59,8 @@ const generateCssText = (data, options) => {
   for (const breakpoint of breakpoints.values()) {
     engine.addMediaRule(breakpoint.id, breakpoint);
   }
-  for (const component of (0, import_components_utils.getComponentNames)()) {
-    const meta = (0, import_components.getComponentMeta)(component);
-    const presetStyle = meta?.presetStyle;
+  for (const [component, meta] of data.componentMetas) {
+    const presetStyle = meta.presetStyle;
     if (presetStyle === void 0) {
       continue;
     }

package/lib/cjs/css/normalize.js

@@ -72,7 +72,7 @@ const boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
 };
-const baseStyle = [boxSizing, ...import_presets.borders];
+const baseStyle = [boxSizing, ...import_presets.borders, ...import_presets.outline];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;

package/lib/cjs/css/presets.js

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var presets_exports = {};
 __export(presets_exports, {
-  borders: () => borders
+  borders: () => borders,
+  outline: () => outline
 });
 module.exports = __toCommonJS(presets_exports);
 const borders = [
@@ -39,3 +40,9 @@ const borders = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
+const outline = [
+  {
+    property: "outlineWidth",
+    value: { type: "unit", value: 1, unit: "px" }
+  }
+];

package/lib/cjs/embed-template.js

@@ -62,6 +62,7 @@ const EmbedTemplateInstance = import_zod.z.lazy(
   () => import_zod.z.object({
     type: import_zod.z.literal("instance"),
     component: import_zod.z.string(),
+    label: import_zod.z.optional(import_zod.z.string()),
     props: import_zod.z.optional(import_zod.z.array(EmbedTemplateProp)),
     styles: import_zod.z.optional(import_zod.z.array(EmbedTemplateStyleDecl)),
     children: WsEmbedTemplate
@@ -107,6 +108,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, styleSource
       const instance = {
         type: "instance",
         id: instanceId,
+        label: item.label,
         component: item.component,
         children: []
       };

package/lib/cjs/tree/create-elements-tree.js

@@ -25,11 +25,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react2 = require("@remix-run/react");
 var import_context = require("../context");
-var import_session_storage_polyfill = require("./session-storage-polyfill");
 const createElementsTree = ({
+  renderer,
   instances,
   rootInstanceId,
-  sandbox,
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
@@ -55,7 +54,6 @@ const createElementsTree = ({
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
         children,
-        sandbox && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_session_storage_polyfill.SessionStoragePolyfill, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.ScrollRestoration, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Scripts, {})
       ] }, "children")
@@ -65,7 +63,7 @@ const createElementsTree = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_context.ReactSdkContext.Provider,
     {
-      value: { propsByInstanceIdStore, assetsStore, pagesStore },
+      value: { propsByInstanceIdStore, assetsStore, pagesStore, renderer },
       children: root
     }
   );

package/lib/components/__generated__/html.props.js

@@ -0,0 +1,11 @@
+const props = {
+  code: { required: true, control: "text", type: "string" },
+  executeScriptInCanvas: {
+    required: true,
+    control: "boolean",
+    type: "boolean"
+  }
+};
+export {
+  props
+};

package/lib/components/blockquote.ws.js

@@ -1,4 +1,4 @@
-import { BlockquoteIcon } from "@webstudio-is/icons";
+import { BlockquoteIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -55,7 +55,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Blockquote",
-  Icon: BlockquoteIcon,
+  icon: BlockquoteIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Blockquote you can edit" }]

package/lib/components/body.ws.js

@@ -1,4 +1,4 @@
-import { BodyIcon } from "@webstudio-is/icons";
+import { BodyIcon } from "@webstudio-is/icons/svg";
 import { body } from "../css/normalize";
 import {
   defaultStates
@@ -34,7 +34,7 @@ const presetStyle = {
 const meta = {
   type: "container",
   label: "Body",
-  Icon: BodyIcon,
+  icon: BodyIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/bold.ws.js

@@ -1,4 +1,4 @@
-import { BoldIcon } from "@webstudio-is/icons";
+import { BoldIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -10,7 +10,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Bold Text",
-  Icon: BoldIcon,
+  icon: BoldIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/box.ws.js

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -31,7 +31,7 @@ const meta = {
   category: "general",
   type: "container",
   label: "Box",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/button.ws.js

@@ -1,4 +1,4 @@
-import { ButtonElementIcon } from "@webstudio-is/icons";
+import { ButtonElementIcon } from "@webstudio-is/icons/svg";
 import { button } from "../css/normalize";
 import {
   defaultStates
@@ -8,10 +8,10 @@ const presetStyle = {
   button
 };
 const meta = {
-  category: "general",
+  category: "forms",
   type: "container",
   label: "Button",
-  Icon: ButtonElementIcon,
+  icon: ButtonElementIcon,
   presetStyle,
   states: [
     ...defaultStates,