@webstudio-is/icons 0.36.0 → 0.41.0

package/lib/__generated__/checkbox-checked-filled.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const CheckboxCheckedFilledIcon = forwardRef(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("path", {
+        fillRule: "evenodd",
+        d: "M1.592 2.56c-.242.474-.242 1.095-.242 2.337v6.206c0 1.242 0 1.863.242 2.337.212.417.551.756.968.968.474.242 1.095.242 2.337.242h6.206c1.242 0 1.863 0 2.337-.242.417-.212.756-.551.968-.968.242-.474.242-1.095.242-2.337V4.897c0-1.242 0-1.863-.242-2.337a2.217 2.217 0 0 0-.968-.968c-.474-.242-1.095-.242-2.337-.242H4.897c-1.242 0-1.863 0-2.337.242a2.217 2.217 0 0 0-.968.968Zm10.637 3.573a.887.887 0 1 0-1.254-1.254l-4.36 4.36-1.59-1.589A.887.887 0 0 0 3.77 8.904l2.217 2.217a.887.887 0 0 0 1.254 0l4.987-4.988Z",
+        clipRule: "evenodd"
+      })
+    });
+  }
+);
+CheckboxCheckedFilledIcon.displayName = "CheckboxCheckedFilledIcon";
+export {
+  CheckboxCheckedFilledIcon
+};

package/lib/__generated__/checkbox-empty.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const CheckboxEmptyIcon = forwardRef(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("path", {
+        fillRule: "evenodd",
+        d: "M5.173 1.35h5.654c.537 0 .98 0 1.34.03.373.03.715.095 1.036.259.499.254.904.66 1.158 1.158.164.32.229.663.26 1.036.029.36.029.803.029 1.34v5.654c0 .537 0 .98-.03 1.34-.03.373-.095.715-.259 1.036a2.65 2.65 0 0 1-1.158 1.158c-.32.164-.663.229-1.037.26-.36.029-.802.029-1.34.029H5.174c-.537 0-.98 0-1.34-.03-.373-.03-.715-.095-1.036-.259a2.65 2.65 0 0 1-1.158-1.158c-.164-.32-.23-.663-.26-1.037-.029-.36-.029-.802-.029-1.34V5.174c0-.537 0-.98.03-1.34.03-.373.095-.715.259-1.036a2.65 2.65 0 0 1 1.158-1.158c.32-.164.663-.23 1.036-.26.36-.029.803-.029 1.34-.029ZM3.939 2.675c-.293.024-.445.068-.552.122a1.35 1.35 0 0 0-.59.59c-.054.107-.098.259-.122.552-.025.301-.025.69-.025 1.261v5.6c0 .57 0 .96.025 1.26.024.294.068.446.122.553.13.254.336.46.59.59.107.054.259.098.552.122.301.025.69.025 1.261.025h5.6c.57 0 .96 0 1.26-.025.294-.024.446-.068.553-.122.254-.13.46-.336.59-.59.054-.107.098-.26.122-.552.025-.301.025-.69.025-1.261V5.2c0-.57 0-.96-.025-1.26-.024-.294-.068-.446-.122-.553a1.35 1.35 0 0 0-.59-.59c-.107-.054-.26-.098-.552-.122-.301-.025-.69-.025-1.261-.025H5.2c-.57 0-.96 0-1.26.025Z",
+        clipRule: "evenodd"
+      })
+    });
+  }
+);
+CheckboxEmptyIcon.displayName = "CheckboxEmptyIcon";
+export {
+  CheckboxEmptyIcon
+};

package/lib/__generated__/checkbox-mixed-filled.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const CheckboxMixedFilledIcon = forwardRef(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("path", {
+        fillRule: "evenodd",
+        d: "M1.592 2.56c-.242.474-.242 1.095-.242 2.337v6.206c0 1.242 0 1.863.242 2.337.212.417.551.756.968.968.474.242 1.095.242 2.337.242h6.206c1.242 0 1.863 0 2.337-.242.417-.212.756-.551.968-.968.242-.474.242-1.095.242-2.337V4.897c0-1.242 0-1.863-.242-2.337a2.217 2.217 0 0 0-.968-.968c-.474-.242-1.095-.242-2.337-.242H4.897c-1.242 0-1.863 0-2.337.242a2.217 2.217 0 0 0-.968.968Zm3.083 4.553a.887.887 0 1 0 0 1.774h6.65a.887.887 0 1 0 0-1.774h-6.65Z",
+        clipRule: "evenodd"
+      })
+    });
+  }
+);
+CheckboxMixedFilledIcon.displayName = "CheckboxMixedFilledIcon";
+export {
+  CheckboxMixedFilledIcon
+};

package/lib/__generated__/chevron-big-down.js

@@ -11,7 +11,6 @@ const ChevronBigDownIcon = forwardRef(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("path", {
-        fill: "#11181C",
         d: "m8.46 10.947 4.553-5.463a.6.6 0 0 0-.46-.984H3.447a.6.6 0 0 0-.461.984l4.552 5.463a.6.6 0 0 0 .922 0Z"
       })
     });

package/lib/__generated__/chevron-big-left.js

@@ -11,7 +11,6 @@ const ChevronBigLeftIcon = forwardRef(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("path", {
-        fill: "#11181C",
         d: "m5.053 8.46 5.463 4.553a.6.6 0 0 0 .984-.46V3.447a.6.6 0 0 0-.984-.461L5.053 7.539a.6.6 0 0 0 0 .922Z"
       })
     });

package/lib/__generated__/chevron-big-right.js

@@ -11,7 +11,6 @@ const ChevronBigRightIcon = forwardRef(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("path", {
-        fill: "#11181C",
         d: "M10.947 7.54 5.484 2.986a.6.6 0 0 0-.984.46v9.105a.6.6 0 0 0 .984.461l5.463-4.552a.6.6 0 0 0 0-.922Z"
       })
     });

package/lib/__generated__/chevron-big-up.js

@@ -11,7 +11,6 @@ const ChevronBigUpIcon = forwardRef(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("path", {
-        fill: "#11181C",
         d: "m7.54 5.053-4.553 5.463a.6.6 0 0 0 .46.984h9.105a.6.6 0 0 0 .461-.984L8.461 5.053a.6.6 0 0 0-.922 0Z"
       })
     });

package/lib/__generated__/chevron-filled-down.js

@@ -11,7 +11,6 @@ const ChevronFilledDownIcon = forwardRef(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("path", {
-        fill: "#11181C",
         d: "m8.5 10.251 2.878-4.318a.6.6 0 0 0-.5-.933H5.122a.6.6 0 0 0-.5.933l2.88 4.318a.6.6 0 0 0 .998 0Z"
       })
     });

package/lib/__generated__/chevron-filled-left.js

@@ -11,7 +11,6 @@ const ChevronFilledLeftIcon = forwardRef(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("path", {
-        fill: "#11181C",
         d: "m5.749 8.5 4.318 2.878a.6.6 0 0 0 .933-.5V5.122a.6.6 0 0 0-.933-.5L5.75 7.502a.6.6 0 0 0 0 .998Z"
       })
     });

package/lib/__generated__/chevron-filled-right.js

@@ -11,7 +11,6 @@ const ChevronFilledRightIcon = forwardRef(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("path", {
-        fill: "#11181C",
         d: "M10.251 7.5 5.933 4.623a.6.6 0 0 0-.933.5v5.757a.6.6 0 0 0 .933.5l4.318-2.88a.6.6 0 0 0 0-.998Z"
       })
     });

package/lib/__generated__/chevron-filled-up.js

@@ -11,7 +11,6 @@ const ChevronFilledUpIcon = forwardRef(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("path", {
-        fill: "#11181C",
         d: "M7.5 5.508 4.623 9.826a.6.6 0 0 0 .5.933h5.757a.6.6 0 0 0 .5-.933l-2.88-4.318a.6.6 0 0 0-.998 0Z"
       })
     });

package/lib/__generated__/drag-handle.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const DragHandleIcon = forwardRef(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("rect", {
+          width: "6",
+          height: "1",
+          x: "5",
+          y: "3",
+          rx: ".5"
+        }),
+        /* @__PURE__ */ jsx("rect", {
+          width: "6",
+          height: "1",
+          x: "5",
+          y: "6",
+          rx: ".5"
+        }),
+        /* @__PURE__ */ jsx("rect", {
+          width: "6",
+          height: "1",
+          x: "5",
+          y: "9",
+          rx: ".5"
+        }),
+        /* @__PURE__ */ jsx("rect", {
+          width: "6",
+          height: "1",
+          x: "5",
+          y: "12",
+          rx: ".5"
+        })
+      ]
+    });
+  }
+);
+DragHandleIcon.displayName = "DragHandleIcon";
+export {
+  DragHandleIcon
+};

package/lib/__generated__/index.js

@@ -1,5 +1,8 @@
 export * from "./auto-scroll";
 export * from "./blockquote";
+export * from "./checkbox-checked-filled";
+export * from "./checkbox-empty";
+export * from "./checkbox-mixed-filled";
 export * from "./chevron-big-down";
 export * from "./chevron-big-left";
 export * from "./chevron-big-right";
@@ -11,6 +14,7 @@ export * from "./chevron-filled-up";
 export * from "./code";
 export * from "./dash";
 export * from "./dot";
+export * from "./drag-handle";
 export * from "./eyecon-closed";
 export * from "./eyecon-open";
 export * from "./hamburger-menu";
@@ -20,8 +24,11 @@ export * from "./list-item";
 export * from "./list";
 export * from "./offline";
 export * from "./play";
+export * from "./radio-checked";
+export * from "./radio-unchecked";
 export * from "./scroll";
 export * from "./subscript";
+export * from "./subtract";
 export * from "./superscript";
 export * from "./unlinked";
 export * from "./webstudio";

package/lib/__generated__/radio-checked.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const RadioCheckedIcon = forwardRef(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          d: "M8 5.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3Z"
+        }),
+        /* @__PURE__ */ jsx("path", {
+          fillRule: "evenodd",
+          d: "M8 1.35a6.65 6.65 0 1 0 0 13.3 6.65 6.65 0 0 0 0-13.3ZM2.65 8a5.35 5.35 0 1 1 10.7 0 5.35 5.35 0 0 1-10.7 0Z",
+          clipRule: "evenodd"
+        })
+      ]
+    });
+  }
+);
+RadioCheckedIcon.displayName = "RadioCheckedIcon";
+export {
+  RadioCheckedIcon
+};

package/lib/__generated__/radio-unchecked.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const RadioUncheckedIcon = forwardRef(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("path", {
+        fillRule: "evenodd",
+        d: "M8 1.35a6.65 6.65 0 1 0 0 13.3 6.65 6.65 0 0 0 0-13.3ZM2.65 8a5.35 5.35 0 1 1 10.7 0 5.35 5.35 0 0 1-10.7 0Z",
+        clipRule: "evenodd"
+      })
+    });
+  }
+);
+RadioUncheckedIcon.displayName = "RadioUncheckedIcon";
+export {
+  RadioUncheckedIcon
+};

package/lib/__generated__/subtract.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const SubtractIcon = forwardRef(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("path", {
+        fillRule: "evenodd",
+        d: "M14 8a.75.75 0 0 1-.75.75H2.75a.75.75 0 0 1 0-1.5h10.5A.75.75 0 0 1 14 8Z",
+        clipRule: "evenodd"
+      })
+    });
+  }
+);
+SubtractIcon.displayName = "SubtractIcon";
+export {
+  SubtractIcon
+};

package/lib/cjs/__generated__/checkbox-checked-filled.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkbox_checked_filled_exports = {};
+__export(checkbox_checked_filled_exports, {
+  CheckboxCheckedFilledIcon: () => CheckboxCheckedFilledIcon
+});
+module.exports = __toCommonJS(checkbox_checked_filled_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const CheckboxCheckedFilledIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+        fillRule: "evenodd",
+        d: "M1.592 2.56c-.242.474-.242 1.095-.242 2.337v6.206c0 1.242 0 1.863.242 2.337.212.417.551.756.968.968.474.242 1.095.242 2.337.242h6.206c1.242 0 1.863 0 2.337-.242.417-.212.756-.551.968-.968.242-.474.242-1.095.242-2.337V4.897c0-1.242 0-1.863-.242-2.337a2.217 2.217 0 0 0-.968-.968c-.474-.242-1.095-.242-2.337-.242H4.897c-1.242 0-1.863 0-2.337.242a2.217 2.217 0 0 0-.968.968Zm10.637 3.573a.887.887 0 1 0-1.254-1.254l-4.36 4.36-1.59-1.589A.887.887 0 0 0 3.77 8.904l2.217 2.217a.887.887 0 0 0 1.254 0l4.987-4.988Z",
+        clipRule: "evenodd"
+      })
+    });
+  }
+);
+CheckboxCheckedFilledIcon.displayName = "CheckboxCheckedFilledIcon";

package/lib/cjs/__generated__/checkbox-empty.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkbox_empty_exports = {};
+__export(checkbox_empty_exports, {
+  CheckboxEmptyIcon: () => CheckboxEmptyIcon
+});
+module.exports = __toCommonJS(checkbox_empty_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const CheckboxEmptyIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+        fillRule: "evenodd",
+        d: "M5.173 1.35h5.654c.537 0 .98 0 1.34.03.373.03.715.095 1.036.259.499.254.904.66 1.158 1.158.164.32.229.663.26 1.036.029.36.029.803.029 1.34v5.654c0 .537 0 .98-.03 1.34-.03.373-.095.715-.259 1.036a2.65 2.65 0 0 1-1.158 1.158c-.32.164-.663.229-1.037.26-.36.029-.802.029-1.34.029H5.174c-.537 0-.98 0-1.34-.03-.373-.03-.715-.095-1.036-.259a2.65 2.65 0 0 1-1.158-1.158c-.164-.32-.23-.663-.26-1.037-.029-.36-.029-.802-.029-1.34V5.174c0-.537 0-.98.03-1.34.03-.373.095-.715.259-1.036a2.65 2.65 0 0 1 1.158-1.158c.32-.164.663-.23 1.036-.26.36-.029.803-.029 1.34-.029ZM3.939 2.675c-.293.024-.445.068-.552.122a1.35 1.35 0 0 0-.59.59c-.054.107-.098.259-.122.552-.025.301-.025.69-.025 1.261v5.6c0 .57 0 .96.025 1.26.024.294.068.446.122.553.13.254.336.46.59.59.107.054.259.098.552.122.301.025.69.025 1.261.025h5.6c.57 0 .96 0 1.26-.025.294-.024.446-.068.553-.122.254-.13.46-.336.59-.59.054-.107.098-.26.122-.552.025-.301.025-.69.025-1.261V5.2c0-.57 0-.96-.025-1.26-.024-.294-.068-.446-.122-.553a1.35 1.35 0 0 0-.59-.59c-.107-.054-.26-.098-.552-.122-.301-.025-.69-.025-1.261-.025H5.2c-.57 0-.96 0-1.26.025Z",
+        clipRule: "evenodd"
+      })
+    });
+  }
+);
+CheckboxEmptyIcon.displayName = "CheckboxEmptyIcon";

package/lib/cjs/__generated__/checkbox-mixed-filled.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkbox_mixed_filled_exports = {};
+__export(checkbox_mixed_filled_exports, {
+  CheckboxMixedFilledIcon: () => CheckboxMixedFilledIcon
+});
+module.exports = __toCommonJS(checkbox_mixed_filled_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const CheckboxMixedFilledIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+        fillRule: "evenodd",
+        d: "M1.592 2.56c-.242.474-.242 1.095-.242 2.337v6.206c0 1.242 0 1.863.242 2.337.212.417.551.756.968.968.474.242 1.095.242 2.337.242h6.206c1.242 0 1.863 0 2.337-.242.417-.212.756-.551.968-.968.242-.474.242-1.095.242-2.337V4.897c0-1.242 0-1.863-.242-2.337a2.217 2.217 0 0 0-.968-.968c-.474-.242-1.095-.242-2.337-.242H4.897c-1.242 0-1.863 0-2.337.242a2.217 2.217 0 0 0-.968.968Zm3.083 4.553a.887.887 0 1 0 0 1.774h6.65a.887.887 0 1 0 0-1.774h-6.65Z",
+        clipRule: "evenodd"
+      })
+    });
+  }
+);
+CheckboxMixedFilledIcon.displayName = "CheckboxMixedFilledIcon";

package/lib/cjs/__generated__/chevron-big-down.cjs

@@ -34,7 +34,6 @@ const ChevronBigDownIcon = (0, import_react.forwardRef)(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        fill: "#11181C",
         d: "m8.46 10.947 4.553-5.463a.6.6 0 0 0-.46-.984H3.447a.6.6 0 0 0-.461.984l4.552 5.463a.6.6 0 0 0 .922 0Z"
       })
     });

package/lib/cjs/__generated__/chevron-big-left.cjs

@@ -34,7 +34,6 @@ const ChevronBigLeftIcon = (0, import_react.forwardRef)(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        fill: "#11181C",
         d: "m5.053 8.46 5.463 4.553a.6.6 0 0 0 .984-.46V3.447a.6.6 0 0 0-.984-.461L5.053 7.539a.6.6 0 0 0 0 .922Z"
       })
     });

package/lib/cjs/__generated__/chevron-big-right.cjs

@@ -34,7 +34,6 @@ const ChevronBigRightIcon = (0, import_react.forwardRef)(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        fill: "#11181C",
         d: "M10.947 7.54 5.484 2.986a.6.6 0 0 0-.984.46v9.105a.6.6 0 0 0 .984.461l5.463-4.552a.6.6 0 0 0 0-.922Z"
       })
     });

package/lib/cjs/__generated__/chevron-big-up.cjs

@@ -34,7 +34,6 @@ const ChevronBigUpIcon = (0, import_react.forwardRef)(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        fill: "#11181C",
         d: "m7.54 5.053-4.553 5.463a.6.6 0 0 0 .46.984h9.105a.6.6 0 0 0 .461-.984L8.461 5.053a.6.6 0 0 0-.922 0Z"
       })
     });

package/lib/cjs/__generated__/chevron-filled-down.cjs

@@ -34,7 +34,6 @@ const ChevronFilledDownIcon = (0, import_react.forwardRef)(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        fill: "#11181C",
         d: "m8.5 10.251 2.878-4.318a.6.6 0 0 0-.5-.933H5.122a.6.6 0 0 0-.5.933l2.88 4.318a.6.6 0 0 0 .998 0Z"
       })
     });

package/lib/cjs/__generated__/chevron-filled-left.cjs

@@ -34,7 +34,6 @@ const ChevronFilledLeftIcon = (0, import_react.forwardRef)(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        fill: "#11181C",
         d: "m5.749 8.5 4.318 2.878a.6.6 0 0 0 .933-.5V5.122a.6.6 0 0 0-.933-.5L5.75 7.502a.6.6 0 0 0 0 .998Z"
       })
     });

package/lib/cjs/__generated__/chevron-filled-right.cjs

@@ -34,7 +34,6 @@ const ChevronFilledRightIcon = (0, import_react.forwardRef)(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        fill: "#11181C",
         d: "M10.251 7.5 5.933 4.623a.6.6 0 0 0-.933.5v5.757a.6.6 0 0 0 .933.5l4.318-2.88a.6.6 0 0 0 0-.998Z"
       })
     });

package/lib/cjs/__generated__/chevron-filled-up.cjs

@@ -34,7 +34,6 @@ const ChevronFilledUpIcon = (0, import_react.forwardRef)(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        fill: "#11181C",
         d: "M7.5 5.508 4.623 9.826a.6.6 0 0 0 .5.933h5.757a.6.6 0 0 0 .5-.933l-2.88-4.318a.6.6 0 0 0-.998 0Z"
       })
     });

package/lib/cjs/__generated__/drag-handle.cjs

@@ -0,0 +1,69 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var drag_handle_exports = {};
+__export(drag_handle_exports, {
+  DragHandleIcon: () => DragHandleIcon
+});
+module.exports = __toCommonJS(drag_handle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const DragHandleIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+          width: "6",
+          height: "1",
+          x: "5",
+          y: "3",
+          rx: ".5"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+          width: "6",
+          height: "1",
+          x: "5",
+          y: "6",
+          rx: ".5"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+          width: "6",
+          height: "1",
+          x: "5",
+          y: "9",
+          rx: ".5"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+          width: "6",
+          height: "1",
+          x: "5",
+          y: "12",
+          rx: ".5"
+        })
+      ]
+    });
+  }
+);
+DragHandleIcon.displayName = "DragHandleIcon";

package/lib/cjs/__generated__/index.cjs

@@ -17,6 +17,9 @@ var generated_exports = {};
 module.exports = __toCommonJS(generated_exports);
 __reExport(generated_exports, require("./auto-scroll"), module.exports);
 __reExport(generated_exports, require("./blockquote"), module.exports);
+__reExport(generated_exports, require("./checkbox-checked-filled"), module.exports);
+__reExport(generated_exports, require("./checkbox-empty"), module.exports);
+__reExport(generated_exports, require("./checkbox-mixed-filled"), module.exports);
 __reExport(generated_exports, require("./chevron-big-down"), module.exports);
 __reExport(generated_exports, require("./chevron-big-left"), module.exports);
 __reExport(generated_exports, require("./chevron-big-right"), module.exports);
@@ -28,6 +31,7 @@ __reExport(generated_exports, require("./chevron-filled-up"), module.exports);
 __reExport(generated_exports, require("./code"), module.exports);
 __reExport(generated_exports, require("./dash"), module.exports);
 __reExport(generated_exports, require("./dot"), module.exports);
+__reExport(generated_exports, require("./drag-handle"), module.exports);
 __reExport(generated_exports, require("./eyecon-closed"), module.exports);
 __reExport(generated_exports, require("./eyecon-open"), module.exports);
 __reExport(generated_exports, require("./hamburger-menu"), module.exports);
@@ -37,8 +41,11 @@ __reExport(generated_exports, require("./list-item"), module.exports);
 __reExport(generated_exports, require("./list"), module.exports);
 __reExport(generated_exports, require("./offline"), module.exports);
 __reExport(generated_exports, require("./play"), module.exports);
+__reExport(generated_exports, require("./radio-checked"), module.exports);
+__reExport(generated_exports, require("./radio-unchecked"), module.exports);
 __reExport(generated_exports, require("./scroll"), module.exports);
 __reExport(generated_exports, require("./subscript"), module.exports);
+__reExport(generated_exports, require("./subtract"), module.exports);
 __reExport(generated_exports, require("./superscript"), module.exports);
 __reExport(generated_exports, require("./unlinked"), module.exports);
 __reExport(generated_exports, require("./webstudio"), module.exports);

package/lib/cjs/__generated__/radio-checked.cjs

@@ -0,0 +1,49 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radio_checked_exports = {};
+__export(radio_checked_exports, {
+  RadioCheckedIcon: () => RadioCheckedIcon
+});
+module.exports = __toCommonJS(radio_checked_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const RadioCheckedIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+          d: "M8 5.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3Z"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+          fillRule: "evenodd",
+          d: "M8 1.35a6.65 6.65 0 1 0 0 13.3 6.65 6.65 0 0 0 0-13.3ZM2.65 8a5.35 5.35 0 1 1 10.7 0 5.35 5.35 0 0 1-10.7 0Z",
+          clipRule: "evenodd"
+        })
+      ]
+    });
+  }
+);
+RadioCheckedIcon.displayName = "RadioCheckedIcon";

package/lib/cjs/__generated__/radio-unchecked.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radio_unchecked_exports = {};
+__export(radio_unchecked_exports, {
+  RadioUncheckedIcon: () => RadioUncheckedIcon
+});
+module.exports = __toCommonJS(radio_unchecked_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const RadioUncheckedIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+        fillRule: "evenodd",
+        d: "M8 1.35a6.65 6.65 0 1 0 0 13.3 6.65 6.65 0 0 0 0-13.3ZM2.65 8a5.35 5.35 0 1 1 10.7 0 5.35 5.35 0 0 1-10.7 0Z",
+        clipRule: "evenodd"
+      })
+    });
+  }
+);
+RadioUncheckedIcon.displayName = "RadioUncheckedIcon";

package/lib/cjs/__generated__/subtract.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var subtract_exports = {};
+__export(subtract_exports, {
+  SubtractIcon: () => SubtractIcon
+});
+module.exports = __toCommonJS(subtract_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const SubtractIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+        fillRule: "evenodd",
+        d: "M14 8a.75.75 0 0 1-.75.75H2.75a.75.75 0 0 1 0-1.5h10.5A.75.75 0 0 1 14 8Z",
+        clipRule: "evenodd"
+      })
+    });
+  }
+);
+SubtractIcon.displayName = "SubtractIcon";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/icons",
-  "version": "0.36.0",
+  "version": "0.41.0",
   "description": "Webstudio Icons",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@radix-ui/react-icons": "^1.1.0",
     "react": "^17.0.2",
-    "@webstudio-is/css-vars": "^0.36.0"
+    "@webstudio-is/css-vars": "^0.41.0"
   },
   "module": "./lib/index.js",
   "exports": {

package/src/__generated__/checkbox-checked-filled.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/checkbox-checked-filled.svg
+
+import { forwardRef } from "react";
+import type { IconProps } from "../types";
+
+// prettier-ignore
+export const CheckboxCheckedFilledIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fillRule="evenodd" d="M1.592 2.56c-.242.474-.242 1.095-.242 2.337v6.206c0 1.242 0 1.863.242 2.337.212.417.551.756.968.968.474.242 1.095.242 2.337.242h6.206c1.242 0 1.863 0 2.337-.242.417-.212.756-.551.968-.968.242-.474.242-1.095.242-2.337V4.897c0-1.242 0-1.863-.242-2.337a2.217 2.217 0 0 0-.968-.968c-.474-.242-1.095-.242-2.337-.242H4.897c-1.242 0-1.863 0-2.337.242a2.217 2.217 0 0 0-.968.968Zm10.637 3.573a.887.887 0 1 0-1.254-1.254l-4.36 4.36-1.59-1.589A.887.887 0 0 0 3.77 8.904l2.217 2.217a.887.887 0 0 0 1.254 0l4.987-4.988Z" clipRule="evenodd" /></svg>
+    );
+  }
+);
+
+CheckboxCheckedFilledIcon.displayName = "CheckboxCheckedFilledIcon";

package/src/__generated__/checkbox-empty.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/checkbox-empty.svg
+
+import { forwardRef } from "react";
+import type { IconProps } from "../types";
+
+// prettier-ignore
+export const CheckboxEmptyIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fillRule="evenodd" d="M5.173 1.35h5.654c.537 0 .98 0 1.34.03.373.03.715.095 1.036.259.499.254.904.66 1.158 1.158.164.32.229.663.26 1.036.029.36.029.803.029 1.34v5.654c0 .537 0 .98-.03 1.34-.03.373-.095.715-.259 1.036a2.65 2.65 0 0 1-1.158 1.158c-.32.164-.663.229-1.037.26-.36.029-.802.029-1.34.029H5.174c-.537 0-.98 0-1.34-.03-.373-.03-.715-.095-1.036-.259a2.65 2.65 0 0 1-1.158-1.158c-.164-.32-.23-.663-.26-1.037-.029-.36-.029-.802-.029-1.34V5.174c0-.537 0-.98.03-1.34.03-.373.095-.715.259-1.036a2.65 2.65 0 0 1 1.158-1.158c.32-.164.663-.23 1.036-.26.36-.029.803-.029 1.34-.029ZM3.939 2.675c-.293.024-.445.068-.552.122a1.35 1.35 0 0 0-.59.59c-.054.107-.098.259-.122.552-.025.301-.025.69-.025 1.261v5.6c0 .57 0 .96.025 1.26.024.294.068.446.122.553.13.254.336.46.59.59.107.054.259.098.552.122.301.025.69.025 1.261.025h5.6c.57 0 .96 0 1.26-.025.294-.024.446-.068.553-.122.254-.13.46-.336.59-.59.054-.107.098-.26.122-.552.025-.301.025-.69.025-1.261V5.2c0-.57 0-.96-.025-1.26-.024-.294-.068-.446-.122-.553a1.35 1.35 0 0 0-.59-.59c-.107-.054-.26-.098-.552-.122-.301-.025-.69-.025-1.261-.025H5.2c-.57 0-.96 0-1.26.025Z" clipRule="evenodd" /></svg>
+    );
+  }
+);
+
+CheckboxEmptyIcon.displayName = "CheckboxEmptyIcon";

package/src/__generated__/checkbox-mixed-filled.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/checkbox-mixed-filled.svg
+
+import { forwardRef } from "react";
+import type { IconProps } from "../types";
+
+// prettier-ignore
+export const CheckboxMixedFilledIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fillRule="evenodd" d="M1.592 2.56c-.242.474-.242 1.095-.242 2.337v6.206c0 1.242 0 1.863.242 2.337.212.417.551.756.968.968.474.242 1.095.242 2.337.242h6.206c1.242 0 1.863 0 2.337-.242.417-.212.756-.551.968-.968.242-.474.242-1.095.242-2.337V4.897c0-1.242 0-1.863-.242-2.337a2.217 2.217 0 0 0-.968-.968c-.474-.242-1.095-.242-2.337-.242H4.897c-1.242 0-1.863 0-2.337.242a2.217 2.217 0 0 0-.968.968Zm3.083 4.553a.887.887 0 1 0 0 1.774h6.65a.887.887 0 1 0 0-1.774h-6.65Z" clipRule="evenodd" /></svg>
+    );
+  }
+);
+
+CheckboxMixedFilledIcon.displayName = "CheckboxMixedFilledIcon";

package/src/__generated__/chevron-big-down.tsx

@@ -7,7 +7,7 @@ import type { IconProps } from "../types";
 export const ChevronBigDownIcon = forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fill="#11181C" d="m8.46 10.947 4.553-5.463a.6.6 0 0 0-.46-.984H3.447a.6.6 0 0 0-.461.984l4.552 5.463a.6.6 0 0 0 .922 0Z" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path d="m8.46 10.947 4.553-5.463a.6.6 0 0 0-.46-.984H3.447a.6.6 0 0 0-.461.984l4.552 5.463a.6.6 0 0 0 .922 0Z" /></svg>
     );
   }
 );

package/src/__generated__/chevron-big-left.tsx

@@ -7,7 +7,7 @@ import type { IconProps } from "../types";
 export const ChevronBigLeftIcon = forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fill="#11181C" d="m5.053 8.46 5.463 4.553a.6.6 0 0 0 .984-.46V3.447a.6.6 0 0 0-.984-.461L5.053 7.539a.6.6 0 0 0 0 .922Z" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path d="m5.053 8.46 5.463 4.553a.6.6 0 0 0 .984-.46V3.447a.6.6 0 0 0-.984-.461L5.053 7.539a.6.6 0 0 0 0 .922Z" /></svg>
     );
   }
 );

package/src/__generated__/chevron-big-right.tsx

@@ -7,7 +7,7 @@ import type { IconProps } from "../types";
 export const ChevronBigRightIcon = forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fill="#11181C" d="M10.947 7.54 5.484 2.986a.6.6 0 0 0-.984.46v9.105a.6.6 0 0 0 .984.461l5.463-4.552a.6.6 0 0 0 0-.922Z" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path d="M10.947 7.54 5.484 2.986a.6.6 0 0 0-.984.46v9.105a.6.6 0 0 0 .984.461l5.463-4.552a.6.6 0 0 0 0-.922Z" /></svg>
     );
   }
 );

package/src/__generated__/chevron-big-up.tsx

@@ -7,7 +7,7 @@ import type { IconProps } from "../types";
 export const ChevronBigUpIcon = forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fill="#11181C" d="m7.54 5.053-4.553 5.463a.6.6 0 0 0 .46.984h9.105a.6.6 0 0 0 .461-.984L8.461 5.053a.6.6 0 0 0-.922 0Z" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path d="m7.54 5.053-4.553 5.463a.6.6 0 0 0 .46.984h9.105a.6.6 0 0 0 .461-.984L8.461 5.053a.6.6 0 0 0-.922 0Z" /></svg>
     );
   }
 );

package/src/__generated__/chevron-filled-down.tsx

@@ -7,7 +7,7 @@ import type { IconProps } from "../types";
 export const ChevronFilledDownIcon = forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fill="#11181C" d="m8.5 10.251 2.878-4.318a.6.6 0 0 0-.5-.933H5.122a.6.6 0 0 0-.5.933l2.88 4.318a.6.6 0 0 0 .998 0Z" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path d="m8.5 10.251 2.878-4.318a.6.6 0 0 0-.5-.933H5.122a.6.6 0 0 0-.5.933l2.88 4.318a.6.6 0 0 0 .998 0Z" /></svg>
     );
   }
 );

package/src/__generated__/chevron-filled-left.tsx

@@ -7,7 +7,7 @@ import type { IconProps } from "../types";
 export const ChevronFilledLeftIcon = forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fill="#11181C" d="m5.749 8.5 4.318 2.878a.6.6 0 0 0 .933-.5V5.122a.6.6 0 0 0-.933-.5L5.75 7.502a.6.6 0 0 0 0 .998Z" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path d="m5.749 8.5 4.318 2.878a.6.6 0 0 0 .933-.5V5.122a.6.6 0 0 0-.933-.5L5.75 7.502a.6.6 0 0 0 0 .998Z" /></svg>
     );
   }
 );

package/src/__generated__/chevron-filled-right.tsx

@@ -7,7 +7,7 @@ import type { IconProps } from "../types";
 export const ChevronFilledRightIcon = forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fill="#11181C" d="M10.251 7.5 5.933 4.623a.6.6 0 0 0-.933.5v5.757a.6.6 0 0 0 .933.5l4.318-2.88a.6.6 0 0 0 0-.998Z" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path d="M10.251 7.5 5.933 4.623a.6.6 0 0 0-.933.5v5.757a.6.6 0 0 0 .933.5l4.318-2.88a.6.6 0 0 0 0-.998Z" /></svg>
     );
   }
 );

package/src/__generated__/chevron-filled-up.tsx

@@ -7,7 +7,7 @@ import type { IconProps } from "../types";
 export const ChevronFilledUpIcon = forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fill="#11181C" d="M7.5 5.508 4.623 9.826a.6.6 0 0 0 .5.933h5.757a.6.6 0 0 0 .5-.933l-2.88-4.318a.6.6 0 0 0-.998 0Z" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path d="M7.5 5.508 4.623 9.826a.6.6 0 0 0 .5.933h5.757a.6.6 0 0 0 .5-.933l-2.88-4.318a.6.6 0 0 0-.998 0Z" /></svg>
     );
   }
 );

package/src/__generated__/drag-handle.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/drag-handle.svg
+
+import { forwardRef } from "react";
+import type { IconProps } from "../types";
+
+// prettier-ignore
+export const DragHandleIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><rect width="6" height="1" x="5" y="3" rx=".5" /><rect width="6" height="1" x="5" y="6" rx=".5" /><rect width="6" height="1" x="5" y="9" rx=".5" /><rect width="6" height="1" x="5" y="12" rx=".5" /></svg>
+    );
+  }
+);
+
+DragHandleIcon.displayName = "DragHandleIcon";

package/src/__generated__/index.ts

@@ -1,5 +1,8 @@
 export * from "./auto-scroll";
 export * from "./blockquote";
+export * from "./checkbox-checked-filled";
+export * from "./checkbox-empty";
+export * from "./checkbox-mixed-filled";
 export * from "./chevron-big-down";
 export * from "./chevron-big-left";
 export * from "./chevron-big-right";
@@ -11,6 +14,7 @@ export * from "./chevron-filled-up";
 export * from "./code";
 export * from "./dash";
 export * from "./dot";
+export * from "./drag-handle";
 export * from "./eyecon-closed";
 export * from "./eyecon-open";
 export * from "./hamburger-menu";
@@ -20,8 +24,11 @@ export * from "./list-item";
 export * from "./list";
 export * from "./offline";
 export * from "./play";
+export * from "./radio-checked";
+export * from "./radio-unchecked";
 export * from "./scroll";
 export * from "./subscript";
+export * from "./subtract";
 export * from "./superscript";
 export * from "./unlinked";
 export * from "./webstudio";

package/src/__generated__/radio-checked.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/radio-checked.svg
+
+import { forwardRef } from "react";
+import type { IconProps } from "../types";
+
+// prettier-ignore
+export const RadioCheckedIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path d="M8 5.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3Z" /><path fillRule="evenodd" d="M8 1.35a6.65 6.65 0 1 0 0 13.3 6.65 6.65 0 0 0 0-13.3ZM2.65 8a5.35 5.35 0 1 1 10.7 0 5.35 5.35 0 0 1-10.7 0Z" clipRule="evenodd" /></svg>
+    );
+  }
+);
+
+RadioCheckedIcon.displayName = "RadioCheckedIcon";

package/src/__generated__/radio-unchecked.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/radio-unchecked.svg
+
+import { forwardRef } from "react";
+import type { IconProps } from "../types";
+
+// prettier-ignore
+export const RadioUncheckedIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fillRule="evenodd" d="M8 1.35a6.65 6.65 0 1 0 0 13.3 6.65 6.65 0 0 0 0-13.3ZM2.65 8a5.35 5.35 0 1 1 10.7 0 5.35 5.35 0 0 1-10.7 0Z" clipRule="evenodd" /></svg>
+    );
+  }
+);
+
+RadioUncheckedIcon.displayName = "RadioUncheckedIcon";

package/src/__generated__/subtract.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/subtract.svg
+
+import { forwardRef } from "react";
+import type { IconProps } from "../types";
+
+// prettier-ignore
+export const SubtractIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", size = 16, ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width={size} height={size} fill={color} {...props} ref={forwardedRef}><path fillRule="evenodd" d="M14 8a.75.75 0 0 1-.75.75H2.75a.75.75 0 0 1 0-1.5h10.5A.75.75 0 0 1 14 8Z" clipRule="evenodd" /></svg>
+    );
+  }
+);
+
+SubtractIcon.displayName = "SubtractIcon";

package/src/index.stories.tsx

@@ -1,10 +1,16 @@
 import * as icons from "./index";
 import * as legacyIcons from "./legacy";
 
-export const Icons = () => {
+export const Icons = ({ testColor }: { testColor: boolean }) => {
   return (
     <>
-      <div style={{ display: "flex", flexWrap: "wrap" }}>
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          ...(testColor ? { color: "red" } : {}),
+        }}
+      >
         {Object.entries(icons).map(
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ([name, Icon]: [string, any]) => {
@@ -53,4 +59,10 @@ export const Icons = () => {
 export default {
   title: "All Icons",
   component: Icons,
+  argTypes: {
+    testColor: {
+      name: "Test color",
+      defaultValue: false,
+    },
+  },
 };