@webstudio-is/react-sdk 0.62.0 → 0.63.0

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

@@ -23,6 +23,7 @@ __export(blockquote_ws_exports, {
 });
 module.exports = __toCommonJS(blockquote_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_blockquote = require("./__generated__/blockquote.props");
 const presetStyle = {
   blockquote: [
@@ -77,6 +78,7 @@ const meta = {
   type: "rich-text",
   label: "Blockquote",
   Icon: import_icons.BlockquoteIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Blockquote you can edit" }]
 };

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

@@ -24,6 +24,7 @@ __export(body_ws_exports, {
 module.exports = __toCommonJS(body_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_body = require("./__generated__/body.props");
 const presetStyle = {
   body: [
@@ -56,6 +57,7 @@ const meta = {
   type: "container",
   label: "Body",
   Icon: import_icons.BodyIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -23,6 +23,7 @@ __export(bold_ws_exports, {
 });
 module.exports = __toCommonJS(bold_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_bold = require("./__generated__/bold.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -32,6 +33,7 @@ const meta = {
   type: "rich-text-child",
   label: "Bold Text",
   Icon: import_icons.BoldIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -23,6 +23,7 @@ __export(box_ws_exports, {
 });
 module.exports = __toCommonJS(box_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_box = require("./__generated__/box.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -42,6 +43,7 @@ const meta = {
   type: "container",
   label: "Box",
   Icon: import_icons.BoxIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -24,6 +24,7 @@ __export(button_ws_exports, {
 module.exports = __toCommonJS(button_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_button = require("./__generated__/button.props");
 const presetStyle = {
   button: import_normalize.button
@@ -35,7 +36,7 @@ const meta = {
   Icon: import_icons.ButtonElementIcon,
   presetStyle,
   states: [
-    { selector: ":active", label: "Active" },
+    ...import_component_meta.defaultStates,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ]

package/lib/cjs/components/checkbox-field.ws.js

@@ -23,6 +23,7 @@ __export(checkbox_field_ws_exports, {
 });
 module.exports = __toCommonJS(checkbox_field_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_checkbox_field = require("./__generated__/checkbox-field.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -36,6 +37,7 @@ const meta = {
   type: "container",
   label: "Checkbox Field",
   Icon: import_icons.CheckboxCheckedIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [
     { type: "instance", component: "Checkbox", props: [], children: [] },

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

@@ -23,6 +23,7 @@ __export(checkbox_ws_exports, {
 });
 module.exports = __toCommonJS(checkbox_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_normalize = require("../css/normalize");
 var import_checkbox = require("./__generated__/checkbox.props");
 const presetStyle = {
@@ -40,6 +41,7 @@ const meta = {
   Icon: import_icons.CheckboxCheckedIcon,
   presetStyle,
   states: [
+    ...import_component_meta.defaultStates,
     { selector: ":checked", label: "Checked" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" },

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

@@ -23,6 +23,7 @@ __export(code_ws_exports, {
 });
 module.exports = __toCommonJS(code_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_code = require("./code");
 var import_code2 = require("./__generated__/code.props");
 var import_normalize = require("../css/normalize");
@@ -56,6 +57,7 @@ const meta = {
   type: "rich-text",
   label: "Code",
   Icon: import_icons.CodeIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }]
 };

package/lib/cjs/components/component-meta.js

@@ -19,7 +19,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var component_meta_exports = {};
 __export(component_meta_exports, {
   ComponentState: () => ComponentState,
-  componentCategories: () => componentCategories
+  componentCategories: () => componentCategories,
+  defaultStates: () => defaultStates,
+  stateCategories: () => stateCategories
 });
 module.exports = __toCommonJS(component_meta_exports);
 var import_zod = require("zod");
@@ -35,10 +37,19 @@ const componentCategories = [
   "media",
   "forms"
 ];
+const stateCategories = ["states", "component-states"];
 const ComponentState = import_zod.z.object({
+  category: import_zod.z.enum(stateCategories).optional(),
   selector: import_zod.z.string(),
   label: import_zod.z.string()
 });
+const defaultStates = [
+  { selector: ":hover", label: "Hover" },
+  { selector: ":active", label: "Active" },
+  { selector: ":focus", label: "Focus" },
+  { selector: ":focus-visible", label: "Focus Visible" },
+  { selector: ":focus-within", label: "Focus Within" }
+];
 const WsComponentMeta = import_zod.z.object({
   category: import_zod.z.enum(componentCategories).optional(),
   // container - can accept other components with dnd

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

@@ -24,6 +24,7 @@ __export(form_ws_exports, {
 module.exports = __toCommonJS(form_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_form = require("./__generated__/form.props");
 const presetStyle = {
   form: [
@@ -36,6 +37,7 @@ const meta = {
   type: "container",
   label: "Form",
   Icon: import_icons.FormIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [
     {

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

@@ -24,6 +24,7 @@ __export(heading_ws_exports, {
 module.exports = __toCommonJS(heading_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_heading = require("./__generated__/heading.props");
 const presetStyle = {
   h1: import_normalize.h1,
@@ -39,6 +40,7 @@ const meta = {
   label: "Heading",
   Icon: import_icons.HeadingIcon,
   children: [{ type: "text", value: "Heading you can edit" }],
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -24,6 +24,7 @@ __export(image_ws_exports, {
 module.exports = __toCommonJS(image_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_image = require("./__generated__/image.props");
 const presetStyle = {
   img: [
@@ -46,6 +47,7 @@ const meta = {
   type: "embed",
   label: "Image",
   Icon: import_icons.ImageIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -24,6 +24,7 @@ __export(input_ws_exports, {
 module.exports = __toCommonJS(input_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_input = require("./__generated__/input.props");
 const presetStyle = {
   input: import_normalize.input
@@ -35,6 +36,7 @@ const meta = {
   Icon: import_icons.FormTextFieldIcon,
   presetStyle,
   states: [
+    ...import_component_meta.defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },

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

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

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

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

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

@@ -24,6 +24,7 @@ __export(link_ws_exports, {
 module.exports = __toCommonJS(link_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_link = require("./__generated__/link.props");
 const presetStyle = {
   a: [
@@ -44,7 +45,18 @@ const meta = {
   label: "Link Text",
   Icon: import_icons.LinkIcon,
   presetStyle,
-  states: [{ selector: "[aria-current=page]", label: "Current page" }],
+  states: [
+    ...import_component_meta.defaultStates,
+    {
+      selector: ":visited",
+      label: "Visited"
+    },
+    {
+      category: "component-states",
+      selector: "[aria-current=page]",
+      label: "Current page"
+    }
+  ],
   children: [{ type: "text", value: "Link text you can edit" }]
 };
 const propsMeta = {

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

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

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

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

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

@@ -24,6 +24,7 @@ __export(paragraph_ws_exports, {
 module.exports = __toCommonJS(paragraph_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_paragraph = require("./__generated__/paragraph.props");
 const presetStyle = {
   p: import_normalize.p
@@ -34,6 +35,7 @@ const meta = {
   label: "Paragraph",
   Icon: import_icons.TextAlignLeftIcon,
   children: [{ type: "text", value: "Pragraph you can edit" }],
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -23,6 +23,7 @@ __export(radio_button_field_ws_exports, {
 });
 module.exports = __toCommonJS(radio_button_field_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_radio_button_field = require("./__generated__/radio-button-field.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -36,6 +37,7 @@ const meta = {
   type: "container",
   label: "Radio Button Field",
   Icon: import_icons.RadioCheckedIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [
     { type: "instance", component: "RadioButton", props: [], children: [] },

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

@@ -23,6 +23,7 @@ __export(radio_button_ws_exports, {
 });
 module.exports = __toCommonJS(radio_button_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_normalize = require("../css/normalize");
 var import_radio_button = require("./__generated__/radio-button.props");
 const presetStyle = {
@@ -40,6 +41,7 @@ const meta = {
   Icon: import_icons.RadioCheckedIcon,
   presetStyle,
   states: [
+    ...import_component_meta.defaultStates,
     { selector: ":checked", label: "Checked" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" },

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

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

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

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

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

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

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

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

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

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

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

@@ -24,6 +24,7 @@ __export(textarea_ws_exports, {
 module.exports = __toCommonJS(textarea_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_textarea = require("./__generated__/textarea.props");
 const presetStyle = {
   textarea: [
@@ -39,6 +40,7 @@ const meta = {
   Icon: import_icons.FormTextAreaIcon,
   presetStyle,
   states: [
+    ...import_component_meta.defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },

package/lib/cjs/css/normalize.js

@@ -93,7 +93,7 @@ const h5 = baseStyle;
 const h6 = baseStyle;
 const i = baseStyle;
 const img = baseStyle;
-const a = baseStyle;
+const a = [boxSizing, ...import_presets.borders, ...import_presets.linkColors];
 const li = baseStyle;
 const ul = baseStyle;
 const ol = 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,
+  linkColors: () => linkColors
 });
 module.exports = __toCommonJS(presets_exports);
 const borders = [
@@ -39,3 +40,20 @@ const borders = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
+const linkColors = [
+  {
+    property: "color",
+    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
+  },
+  {
+    state: ":active",
+    property: "color",
+    // chrome and safari use rgb(255, 0, 0)
+    value: { type: "rgb", r: 238, g: 0, b: 0, alpha: 1 }
+  },
+  {
+    state: ":visited",
+    property: "color",
+    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 }
+  }
+];

package/lib/cjs/index.js

@@ -22,7 +22,8 @@ __export(src_exports, {
   componentCategories: () => import_component_meta.componentCategories,
   customComponentMetas: () => import_custom_components.customComponentMetas,
   customComponentPropsMetas: () => import_custom_components.customComponentPropsMetas,
-  customComponents: () => import_custom_components.customComponents
+  customComponents: () => import_custom_components.customComponents,
+  stateCategories: () => import_component_meta.stateCategories
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./css"), module.exports);

package/lib/components/blockquote.ws.js

@@ -1,4 +1,7 @@
 import { BlockquoteIcon } from "@webstudio-is/icons";
+import {
+  defaultStates
+} from "./component-meta";
 import { props } from "./__generated__/blockquote.props";
 const presetStyle = {
   blockquote: [
@@ -53,6 +56,7 @@ const meta = {
   type: "rich-text",
   label: "Blockquote",
   Icon: BlockquoteIcon,
+  states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Blockquote you can edit" }]
 };

package/lib/components/body.ws.js

@@ -1,5 +1,8 @@
 import { BodyIcon } from "@webstudio-is/icons";
 import { body } from "../css/normalize";
+import {
+  defaultStates
+} from "./component-meta";
 import { props } from "./__generated__/body.props";
 const presetStyle = {
   body: [
@@ -32,6 +35,7 @@ const meta = {
   type: "container",
   label: "Body",
   Icon: BodyIcon,
+  states: defaultStates,
   presetStyle
 };
 const propsMeta = {

package/lib/components/bold.ws.js

@@ -1,4 +1,7 @@
 import { BoldIcon } from "@webstudio-is/icons";
+import {
+  defaultStates
+} from "./component-meta";
 import { props } from "./__generated__/bold.props";
 import { b } from "../css/normalize";
 const presetStyle = {
@@ -8,6 +11,7 @@ const meta = {
   type: "rich-text-child",
   label: "Bold Text",
   Icon: BoldIcon,
+  states: defaultStates,
   presetStyle
 };
 const propsMeta = {

package/lib/components/box.ws.js

@@ -1,4 +1,7 @@
 import { BoxIcon } from "@webstudio-is/icons";
+import {
+  defaultStates
+} from "./component-meta";
 import { props } from "./__generated__/box.props";
 import {
   div,
@@ -29,6 +32,7 @@ const meta = {
   type: "container",
   label: "Box",
   Icon: BoxIcon,
+  states: defaultStates,
   presetStyle
 };
 const propsMeta = {

package/lib/components/button.ws.js

@@ -1,5 +1,8 @@
 import { ButtonElementIcon } from "@webstudio-is/icons";
 import { button } from "../css/normalize";
+import {
+  defaultStates
+} from "./component-meta";
 import { props } from "./__generated__/button.props";
 const presetStyle = {
   button
@@ -11,7 +14,7 @@ const meta = {
   Icon: ButtonElementIcon,
   presetStyle,
   states: [
-    { selector: ":active", label: "Active" },
+    ...defaultStates,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ]

package/lib/components/checkbox-field.ws.js

@@ -1,4 +1,7 @@
 import { CheckboxCheckedIcon } from "@webstudio-is/icons";
+import {
+  defaultStates
+} from "./component-meta";
 import { props } from "./__generated__/checkbox-field.props";
 import { label } from "../css/normalize";
 const presetStyle = {
@@ -12,6 +15,7 @@ const meta = {
   type: "container",
   label: "Checkbox Field",
   Icon: CheckboxCheckedIcon,
+  states: defaultStates,
   presetStyle,
   children: [
     { type: "instance", component: "Checkbox", props: [], children: [] },

package/lib/components/checkbox.ws.js

@@ -1,4 +1,7 @@
 import { CheckboxCheckedIcon } from "@webstudio-is/icons";
+import {
+  defaultStates
+} from "./component-meta";
 import { input } from "../css/normalize";
 import { props } from "./__generated__/checkbox.props";
 const presetStyle = {
@@ -16,6 +19,7 @@ const meta = {
   Icon: CheckboxCheckedIcon,
   presetStyle,
   states: [
+    ...defaultStates,
     { selector: ":checked", label: "Checked" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" },