@webstudio-is/icons 0.20.0 → 0.22.0

package/lib/__generated__/auto-scroll.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const AutoScrollIcon = forwardRef(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: "16",
+      height: "16",
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          d: "M2.375 3.302c0-.305.28-.552.625-.552h10c.345 0 .625.247.625.552 0 .305-.28.552-.625.552H3c-.345 0-.625-.247-.625-.552ZM2.375 12.698c0-.305.28-.552.625-.552h10c.345 0 .625.247.625.552 0 .305-.28.552-.625.552H3c-.345 0-.625-.247-.625-.552ZM11.23 5.429c0-.26-.211-.47-.473-.47a.472.472 0 0 0-.474.47v3.946l-1.238-1.23a.476.476 0 0 0-.67 0 .468.468 0 0 0 0 .666l2.047 2.033a.476.476 0 0 0 .67 0L13.14 8.81a.468.468 0 0 0 0-.666.476.476 0 0 0-.67 0l-1.238 1.23V5.429Z"
+        }),
+        /* @__PURE__ */ jsx("path", {
+          fillRule: "evenodd",
+          d: "M5.487 4.965a.749.749 0 0 1 .262.345c.037.087.075.2.115.317l1.629 4.825a.482.482 0 0 1-.913.304l-.581-1.722H4.272l-.58 1.722a.482.482 0 0 1-.913-.304l1.623-4.81.005-.015c.04-.117.078-.23.114-.316l.001-.001c.028-.067.1-.237.262-.345a.631.631 0 0 1 .703 0Zm-.892 3.113h1.081l-.54-1.6-.54 1.6Z",
+          clipRule: "evenodd"
+        })
+      ]
+    });
+  }
+);
+AutoScrollIcon.displayName = "AutoScrollIcon";
+export {
+  AutoScrollIcon
+};

package/lib/__generated__/eyecon-closed.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const EyeconClosedIcon = forwardRef(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: "16",
+      height: "16",
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("path", {
+        d: "M2.209 7.594a.55.55 0 0 1 .757.175 6.463 6.463 0 0 0 1.36 1.562A5.708 5.708 0 0 0 8 10.653c2.146 0 3.944-1.14 5.034-2.884a.55.55 0 0 1 .933.583c-.323.516-.702.99-1.13 1.41l.832.831a.55.55 0 1 1-.778.778l-.899-.898a6.815 6.815 0 0 1-1.889.954l.314 1.172a.55.55 0 0 1-1.062.284l-.323-1.206a6.992 6.992 0 0 1-2.063 0l-.323 1.206a.55.55 0 1 1-1.062-.284l.314-1.171a6.812 6.812 0 0 1-1.89-.955l-.897.898a.55.55 0 0 1-.778-.777l.83-.831a7.665 7.665 0 0 1-1.13-1.411.55.55 0 0 1 .176-.758Z"
+      })
+    });
+  }
+);
+EyeconClosedIcon.displayName = "EyeconClosedIcon";
+export {
+  EyeconClosedIcon
+};

package/lib/__generated__/eyecon-open.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const EyeconOpenIcon = forwardRef(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: "16",
+      height: "16",
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          d: "M8 9.849A1.849 1.849 0 1 0 8 6.15 1.849 1.849 0 0 0 8 9.85Z"
+        }),
+        /* @__PURE__ */ jsx("path", {
+          fillRule: "evenodd",
+          d: "M2.132 8.458a.857.857 0 0 1 0-.915A6.927 6.927 0 0 1 8 4.303a6.927 6.927 0 0 1 5.868 3.24.857.857 0 0 1 0 .915A6.927 6.927 0 0 1 8 11.698a6.927 6.927 0 0 1-5.868-3.24ZM8 10.698A5.926 5.926 0 0 1 3.027 8 5.926 5.926 0 0 1 8 5.303 5.926 5.926 0 0 1 12.973 8 5.926 5.926 0 0 1 8 10.697Z",
+          clipRule: "evenodd"
+        })
+      ]
+    });
+  }
+);
+EyeconOpenIcon.displayName = "EyeconOpenIcon";
+export {
+  EyeconOpenIcon
+};

package/lib/__generated__/index.js

@@ -1,4 +1,8 @@
+export * from "./auto-scroll";
+export * from "./eyecon-closed";
+export * from "./eyecon-open";
 export * from "./linked";
+export * from "./scroll";
 export * from "./subscript";
 export * from "./superscript";
 export * from "./unlinked";

package/lib/__generated__/linked.js

@@ -11,7 +11,6 @@ const LinkedIcon = forwardRef(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("path", {
-        fill: "#11181C",
         fillRule: "evenodd",
         d: "M11.223 6.08h-1.142a.7.7 0 0 1 0-1.4h1.142c1.952 0 3.7 1.4 3.7 3.32s-1.748 3.32-3.7 3.32h-1.142a.7.7 0 0 1 0-1.4h1.142c1.363 0 2.3-.946 2.3-1.92s-.937-1.92-2.3-1.92Zm-6.447 0c-1.363 0-2.3.946-2.3 1.92 0 .975.937 1.92 2.3 1.92h1.142a.7.7 0 0 1 0 1.4H4.776c-1.952 0-3.7-1.4-3.7-3.32s1.748-3.32 3.7-3.32h1.142a.7.7 0 1 1 0 1.4H4.776ZM5.233 8a.7.7 0 0 1 .7-.7h4.133a.7.7 0 1 1 0 1.4H5.933a.7.7 0 0 1-.7-.7Z",
         clipRule: "evenodd"

package/lib/__generated__/scroll.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const ScrollIcon = forwardRef(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: "16",
+      height: "16",
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          d: "M10.953 5.399a.484.484 0 0 0-.49-.478c-.27 0-.49.214-.49.478v4.009l-1.28-1.25a.499.499 0 0 0-.693 0 .47.47 0 0 0 0 .677l2.117 2.065a.499.499 0 0 0 .693 0l2.116-2.065a.47.47 0 0 0 0-.676.499.499 0 0 0-.693 0l-1.28 1.249V5.399Z"
+        }),
+        /* @__PURE__ */ jsx("path", {
+          fillRule: "evenodd",
+          d: "M1.94 12.7c0 .304.277.55.618.55h10.894c.341 0 .618-.246.618-.55 0-.304-.277-.55-.618-.55H2.558c-.341 0-.618.246-.618.55ZM1.94 3.3c0 .304.277.55.618.55h10.894c.341 0 .618-.246.618-.55 0-.304-.277-.55-.618-.55H2.558c-.341 0-.618.246-.618.55ZM1.94 5.65c0 .304.26.55.582.55h3.796c.321 0 .582-.246.582-.55 0-.304-.26-.55-.582-.55H2.522c-.321 0-.582.246-.582.55ZM1.94 10.35c0 .304.26.55.582.55h3.796c.321 0 .582-.246.582-.55 0-.304-.26-.55-.582-.55H2.522c-.321 0-.582.246-.582.55ZM1.94 8c0 .304.26.55.582.55h3.796c.321 0 .582-.246.582-.55 0-.304-.26-.55-.582-.55H2.522c-.321 0-.582.246-.582.55Z",
+          clipRule: "evenodd"
+        })
+      ]
+    });
+  }
+);
+ScrollIcon.displayName = "ScrollIcon";
+export {
+  ScrollIcon
+};

package/lib/__generated__/unlinked.js

@@ -11,7 +11,6 @@ const UnlinkedIcon = forwardRef(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("path", {
-        fill: "#11181C",
         fillRule: "evenodd",
         d: "M11.223 6.08h-1.142a.7.7 0 0 1 0-1.4h1.142c1.952 0 3.7 1.4 3.7 3.32s-1.748 3.32-3.7 3.32h-1.142a.7.7 0 0 1 0-1.4h1.142c1.363 0 2.3-.946 2.3-1.92s-.937-1.92-2.3-1.92Zm-6.447 0c-1.363 0-2.3.946-2.3 1.92 0 .975.937 1.92 2.3 1.92h1.142a.7.7 0 0 1 0 1.4H4.776c-1.952 0-3.7-1.4-3.7-3.32s1.748-3.32 3.7-3.32h1.142a.7.7 0 1 1 0 1.4H4.776Z",
         clipRule: "evenodd"

package/lib/cjs/__generated__/auto-scroll.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 auto_scroll_exports = {};
+__export(auto_scroll_exports, {
+  AutoScrollIcon: () => AutoScrollIcon
+});
+module.exports = __toCommonJS(auto_scroll_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const AutoScrollIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: "16",
+      height: "16",
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+          d: "M2.375 3.302c0-.305.28-.552.625-.552h10c.345 0 .625.247.625.552 0 .305-.28.552-.625.552H3c-.345 0-.625-.247-.625-.552ZM2.375 12.698c0-.305.28-.552.625-.552h10c.345 0 .625.247.625.552 0 .305-.28.552-.625.552H3c-.345 0-.625-.247-.625-.552ZM11.23 5.429c0-.26-.211-.47-.473-.47a.472.472 0 0 0-.474.47v3.946l-1.238-1.23a.476.476 0 0 0-.67 0 .468.468 0 0 0 0 .666l2.047 2.033a.476.476 0 0 0 .67 0L13.14 8.81a.468.468 0 0 0 0-.666.476.476 0 0 0-.67 0l-1.238 1.23V5.429Z"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+          fillRule: "evenodd",
+          d: "M5.487 4.965a.749.749 0 0 1 .262.345c.037.087.075.2.115.317l1.629 4.825a.482.482 0 0 1-.913.304l-.581-1.722H4.272l-.58 1.722a.482.482 0 0 1-.913-.304l1.623-4.81.005-.015c.04-.117.078-.23.114-.316l.001-.001c.028-.067.1-.237.262-.345a.631.631 0 0 1 .703 0Zm-.892 3.113h1.081l-.54-1.6-.54 1.6Z",
+          clipRule: "evenodd"
+        })
+      ]
+    });
+  }
+);
+AutoScrollIcon.displayName = "AutoScrollIcon";

package/lib/cjs/__generated__/eyecon-closed.cjs

@@ -0,0 +1,42 @@
+"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 eyecon_closed_exports = {};
+__export(eyecon_closed_exports, {
+  EyeconClosedIcon: () => EyeconClosedIcon
+});
+module.exports = __toCommonJS(eyecon_closed_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const EyeconClosedIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: "16",
+      height: "16",
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+        d: "M2.209 7.594a.55.55 0 0 1 .757.175 6.463 6.463 0 0 0 1.36 1.562A5.708 5.708 0 0 0 8 10.653c2.146 0 3.944-1.14 5.034-2.884a.55.55 0 0 1 .933.583c-.323.516-.702.99-1.13 1.41l.832.831a.55.55 0 1 1-.778.778l-.899-.898a6.815 6.815 0 0 1-1.889.954l.314 1.172a.55.55 0 0 1-1.062.284l-.323-1.206a6.992 6.992 0 0 1-2.063 0l-.323 1.206a.55.55 0 1 1-1.062-.284l.314-1.171a6.812 6.812 0 0 1-1.89-.955l-.897.898a.55.55 0 0 1-.778-.777l.83-.831a7.665 7.665 0 0 1-1.13-1.411.55.55 0 0 1 .176-.758Z"
+      })
+    });
+  }
+);
+EyeconClosedIcon.displayName = "EyeconClosedIcon";

package/lib/cjs/__generated__/eyecon-open.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 eyecon_open_exports = {};
+__export(eyecon_open_exports, {
+  EyeconOpenIcon: () => EyeconOpenIcon
+});
+module.exports = __toCommonJS(eyecon_open_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const EyeconOpenIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: "16",
+      height: "16",
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+          d: "M8 9.849A1.849 1.849 0 1 0 8 6.15 1.849 1.849 0 0 0 8 9.85Z"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+          fillRule: "evenodd",
+          d: "M2.132 8.458a.857.857 0 0 1 0-.915A6.927 6.927 0 0 1 8 4.303a6.927 6.927 0 0 1 5.868 3.24.857.857 0 0 1 0 .915A6.927 6.927 0 0 1 8 11.698a6.927 6.927 0 0 1-5.868-3.24ZM8 10.698A5.926 5.926 0 0 1 3.027 8 5.926 5.926 0 0 1 8 5.303 5.926 5.926 0 0 1 12.973 8 5.926 5.926 0 0 1 8 10.697Z",
+          clipRule: "evenodd"
+        })
+      ]
+    });
+  }
+);
+EyeconOpenIcon.displayName = "EyeconOpenIcon";

package/lib/cjs/__generated__/index.cjs

@@ -15,7 +15,11 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var generated_exports = {};
 module.exports = __toCommonJS(generated_exports);
+__reExport(generated_exports, require("./auto-scroll"), module.exports);
+__reExport(generated_exports, require("./eyecon-closed"), module.exports);
+__reExport(generated_exports, require("./eyecon-open"), module.exports);
 __reExport(generated_exports, require("./linked"), module.exports);
+__reExport(generated_exports, require("./scroll"), module.exports);
 __reExport(generated_exports, require("./subscript"), module.exports);
 __reExport(generated_exports, require("./superscript"), module.exports);
 __reExport(generated_exports, require("./unlinked"), module.exports);

package/lib/cjs/__generated__/linked.cjs

@@ -34,7 +34,6 @@ const LinkedIcon = (0, import_react.forwardRef)(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        fill: "#11181C",
         fillRule: "evenodd",
         d: "M11.223 6.08h-1.142a.7.7 0 0 1 0-1.4h1.142c1.952 0 3.7 1.4 3.7 3.32s-1.748 3.32-3.7 3.32h-1.142a.7.7 0 0 1 0-1.4h1.142c1.363 0 2.3-.946 2.3-1.92s-.937-1.92-2.3-1.92Zm-6.447 0c-1.363 0-2.3.946-2.3 1.92 0 .975.937 1.92 2.3 1.92h1.142a.7.7 0 0 1 0 1.4H4.776c-1.952 0-3.7-1.4-3.7-3.32s1.748-3.32 3.7-3.32h1.142a.7.7 0 1 1 0 1.4H4.776ZM5.233 8a.7.7 0 0 1 .7-.7h4.133a.7.7 0 1 1 0 1.4H5.933a.7.7 0 0 1-.7-.7Z",
         clipRule: "evenodd"

package/lib/cjs/__generated__/scroll.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 scroll_exports = {};
+__export(scroll_exports, {
+  ScrollIcon: () => ScrollIcon
+});
+module.exports = __toCommonJS(scroll_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const ScrollIcon = (0, import_react.forwardRef)(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: "16",
+      height: "16",
+      fill: color,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+          d: "M10.953 5.399a.484.484 0 0 0-.49-.478c-.27 0-.49.214-.49.478v4.009l-1.28-1.25a.499.499 0 0 0-.693 0 .47.47 0 0 0 0 .677l2.117 2.065a.499.499 0 0 0 .693 0l2.116-2.065a.47.47 0 0 0 0-.676.499.499 0 0 0-.693 0l-1.28 1.249V5.399Z"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+          fillRule: "evenodd",
+          d: "M1.94 12.7c0 .304.277.55.618.55h10.894c.341 0 .618-.246.618-.55 0-.304-.277-.55-.618-.55H2.558c-.341 0-.618.246-.618.55ZM1.94 3.3c0 .304.277.55.618.55h10.894c.341 0 .618-.246.618-.55 0-.304-.277-.55-.618-.55H2.558c-.341 0-.618.246-.618.55ZM1.94 5.65c0 .304.26.55.582.55h3.796c.321 0 .582-.246.582-.55 0-.304-.26-.55-.582-.55H2.522c-.321 0-.582.246-.582.55ZM1.94 10.35c0 .304.26.55.582.55h3.796c.321 0 .582-.246.582-.55 0-.304-.26-.55-.582-.55H2.522c-.321 0-.582.246-.582.55ZM1.94 8c0 .304.26.55.582.55h3.796c.321 0 .582-.246.582-.55 0-.304-.26-.55-.582-.55H2.522c-.321 0-.582.246-.582.55Z",
+          clipRule: "evenodd"
+        })
+      ]
+    });
+  }
+);
+ScrollIcon.displayName = "ScrollIcon";

package/lib/cjs/__generated__/unlinked.cjs

@@ -34,7 +34,6 @@ const UnlinkedIcon = (0, import_react.forwardRef)(
       ...props,
       ref: forwardedRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        fill: "#11181C",
         fillRule: "evenodd",
         d: "M11.223 6.08h-1.142a.7.7 0 0 1 0-1.4h1.142c1.952 0 3.7 1.4 3.7 3.32s-1.748 3.32-3.7 3.32h-1.142a.7.7 0 0 1 0-1.4h1.142c1.363 0 2.3-.946 2.3-1.92s-.937-1.92-2.3-1.92Zm-6.447 0c-1.363 0-2.3.946-2.3 1.92 0 .975.937 1.92 2.3 1.92h1.142a.7.7 0 0 1 0 1.4H4.776c-1.952 0-3.7-1.4-3.7-3.32s1.748-3.32 3.7-3.32h1.142a.7.7 0 1 1 0 1.4H4.776Z",
         clipRule: "evenodd"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/icons",
-  "version": "0.20.0",
+  "version": "0.22.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.20.0"
+    "@webstudio-is/css-vars": "^0.22.0"
   },
   "module": "./lib/index.js",
   "exports": {

package/src/__generated__/auto-scroll.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/auto-scroll.svg
+
+import { forwardRef } from "react";
+import { IconProps } from "../types";
+
+// prettier-ignore
+export const AutoScrollIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path d="M2.375 3.302c0-.305.28-.552.625-.552h10c.345 0 .625.247.625.552 0 .305-.28.552-.625.552H3c-.345 0-.625-.247-.625-.552ZM2.375 12.698c0-.305.28-.552.625-.552h10c.345 0 .625.247.625.552 0 .305-.28.552-.625.552H3c-.345 0-.625-.247-.625-.552ZM11.23 5.429c0-.26-.211-.47-.473-.47a.472.472 0 0 0-.474.47v3.946l-1.238-1.23a.476.476 0 0 0-.67 0 .468.468 0 0 0 0 .666l2.047 2.033a.476.476 0 0 0 .67 0L13.14 8.81a.468.468 0 0 0 0-.666.476.476 0 0 0-.67 0l-1.238 1.23V5.429Z" /><path fillRule="evenodd" d="M5.487 4.965a.749.749 0 0 1 .262.345c.037.087.075.2.115.317l1.629 4.825a.482.482 0 0 1-.913.304l-.581-1.722H4.272l-.58 1.722a.482.482 0 0 1-.913-.304l1.623-4.81.005-.015c.04-.117.078-.23.114-.316l.001-.001c.028-.067.1-.237.262-.345a.631.631 0 0 1 .703 0Zm-.892 3.113h1.081l-.54-1.6-.54 1.6Z" clipRule="evenodd" /></svg>
+    );
+  }
+);
+
+AutoScrollIcon.displayName = "AutoScrollIcon";

package/src/__generated__/eyecon-closed.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/eyecon-closed.svg
+
+import { forwardRef } from "react";
+import { IconProps } from "../types";
+
+// prettier-ignore
+export const EyeconClosedIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path d="M2.209 7.594a.55.55 0 0 1 .757.175 6.463 6.463 0 0 0 1.36 1.562A5.708 5.708 0 0 0 8 10.653c2.146 0 3.944-1.14 5.034-2.884a.55.55 0 0 1 .933.583c-.323.516-.702.99-1.13 1.41l.832.831a.55.55 0 1 1-.778.778l-.899-.898a6.815 6.815 0 0 1-1.889.954l.314 1.172a.55.55 0 0 1-1.062.284l-.323-1.206a6.992 6.992 0 0 1-2.063 0l-.323 1.206a.55.55 0 1 1-1.062-.284l.314-1.171a6.812 6.812 0 0 1-1.89-.955l-.897.898a.55.55 0 0 1-.778-.777l.83-.831a7.665 7.665 0 0 1-1.13-1.411.55.55 0 0 1 .176-.758Z" /></svg>
+    );
+  }
+);
+
+EyeconClosedIcon.displayName = "EyeconClosedIcon";

package/src/__generated__/eyecon-open.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/eyecon-open.svg
+
+import { forwardRef } from "react";
+import { IconProps } from "../types";
+
+// prettier-ignore
+export const EyeconOpenIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path d="M8 9.849A1.849 1.849 0 1 0 8 6.15 1.849 1.849 0 0 0 8 9.85Z" /><path fillRule="evenodd" d="M2.132 8.458a.857.857 0 0 1 0-.915A6.927 6.927 0 0 1 8 4.303a6.927 6.927 0 0 1 5.868 3.24.857.857 0 0 1 0 .915A6.927 6.927 0 0 1 8 11.698a6.927 6.927 0 0 1-5.868-3.24ZM8 10.698A5.926 5.926 0 0 1 3.027 8 5.926 5.926 0 0 1 8 5.303 5.926 5.926 0 0 1 12.973 8 5.926 5.926 0 0 1 8 10.697Z" clipRule="evenodd" /></svg>
+    );
+  }
+);
+
+EyeconOpenIcon.displayName = "EyeconOpenIcon";

package/src/__generated__/index.ts

@@ -1,4 +1,8 @@
+export * from "./auto-scroll";
+export * from "./eyecon-closed";
+export * from "./eyecon-open";
 export * from "./linked";
+export * from "./scroll";
 export * from "./subscript";
 export * from "./superscript";
 export * from "./unlinked";

package/src/__generated__/linked.tsx

@@ -7,7 +7,7 @@ import { IconProps } from "../types";
 export const LinkedIcon = forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", ...props }, forwardedRef) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path fill="#11181C" fillRule="evenodd" d="M11.223 6.08h-1.142a.7.7 0 0 1 0-1.4h1.142c1.952 0 3.7 1.4 3.7 3.32s-1.748 3.32-3.7 3.32h-1.142a.7.7 0 0 1 0-1.4h1.142c1.363 0 2.3-.946 2.3-1.92s-.937-1.92-2.3-1.92Zm-6.447 0c-1.363 0-2.3.946-2.3 1.92 0 .975.937 1.92 2.3 1.92h1.142a.7.7 0 0 1 0 1.4H4.776c-1.952 0-3.7-1.4-3.7-3.32s1.748-3.32 3.7-3.32h1.142a.7.7 0 1 1 0 1.4H4.776ZM5.233 8a.7.7 0 0 1 .7-.7h4.133a.7.7 0 1 1 0 1.4H5.933a.7.7 0 0 1-.7-.7Z" clipRule="evenodd" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path fillRule="evenodd" d="M11.223 6.08h-1.142a.7.7 0 0 1 0-1.4h1.142c1.952 0 3.7 1.4 3.7 3.32s-1.748 3.32-3.7 3.32h-1.142a.7.7 0 0 1 0-1.4h1.142c1.363 0 2.3-.946 2.3-1.92s-.937-1.92-2.3-1.92Zm-6.447 0c-1.363 0-2.3.946-2.3 1.92 0 .975.937 1.92 2.3 1.92h1.142a.7.7 0 0 1 0 1.4H4.776c-1.952 0-3.7-1.4-3.7-3.32s1.748-3.32 3.7-3.32h1.142a.7.7 0 1 1 0 1.4H4.776ZM5.233 8a.7.7 0 0 1 .7-.7h4.133a.7.7 0 1 1 0 1.4H5.933a.7.7 0 0 1-.7-.7Z" clipRule="evenodd" /></svg>
     );
   }
 );

package/src/__generated__/scroll.tsx

@@ -0,0 +1,15 @@
+// Generated from icons/scroll.svg
+
+import { forwardRef } from "react";
+import { IconProps } from "../types";
+
+// prettier-ignore
+export const ScrollIcon = forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, forwardedRef) => {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path d="M10.953 5.399a.484.484 0 0 0-.49-.478c-.27 0-.49.214-.49.478v4.009l-1.28-1.25a.499.499 0 0 0-.693 0 .47.47 0 0 0 0 .677l2.117 2.065a.499.499 0 0 0 .693 0l2.116-2.065a.47.47 0 0 0 0-.676.499.499 0 0 0-.693 0l-1.28 1.249V5.399Z" /><path fillRule="evenodd" d="M1.94 12.7c0 .304.277.55.618.55h10.894c.341 0 .618-.246.618-.55 0-.304-.277-.55-.618-.55H2.558c-.341 0-.618.246-.618.55ZM1.94 3.3c0 .304.277.55.618.55h10.894c.341 0 .618-.246.618-.55 0-.304-.277-.55-.618-.55H2.558c-.341 0-.618.246-.618.55ZM1.94 5.65c0 .304.26.55.582.55h3.796c.321 0 .582-.246.582-.55 0-.304-.26-.55-.582-.55H2.522c-.321 0-.582.246-.582.55ZM1.94 10.35c0 .304.26.55.582.55h3.796c.321 0 .582-.246.582-.55 0-.304-.26-.55-.582-.55H2.522c-.321 0-.582.246-.582.55ZM1.94 8c0 .304.26.55.582.55h3.796c.321 0 .582-.246.582-.55 0-.304-.26-.55-.582-.55H2.522c-.321 0-.582.246-.582.55Z" clipRule="evenodd" /></svg>
+    );
+  }
+);
+
+ScrollIcon.displayName = "ScrollIcon";

package/src/__generated__/unlinked.tsx

@@ -7,7 +7,7 @@ import { IconProps } from "../types";
 export const UnlinkedIcon = forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", ...props }, forwardedRef) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path fill="#11181C" fillRule="evenodd" d="M11.223 6.08h-1.142a.7.7 0 0 1 0-1.4h1.142c1.952 0 3.7 1.4 3.7 3.32s-1.748 3.32-3.7 3.32h-1.142a.7.7 0 0 1 0-1.4h1.142c1.363 0 2.3-.946 2.3-1.92s-.937-1.92-2.3-1.92Zm-6.447 0c-1.363 0-2.3.946-2.3 1.92 0 .975.937 1.92 2.3 1.92h1.142a.7.7 0 0 1 0 1.4H4.776c-1.952 0-3.7-1.4-3.7-3.32s1.748-3.32 3.7-3.32h1.142a.7.7 0 1 1 0 1.4H4.776Z" clipRule="evenodd" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill={color} {...props} ref={forwardedRef}><path fillRule="evenodd" d="M11.223 6.08h-1.142a.7.7 0 0 1 0-1.4h1.142c1.952 0 3.7 1.4 3.7 3.32s-1.748 3.32-3.7 3.32h-1.142a.7.7 0 0 1 0-1.4h1.142c1.363 0 2.3-.946 2.3-1.92s-.937-1.92-2.3-1.92Zm-6.447 0c-1.363 0-2.3.946-2.3 1.92 0 .975.937 1.92 2.3 1.92h1.142a.7.7 0 0 1 0 1.4H4.776c-1.952 0-3.7-1.4-3.7-3.32s1.748-3.32 3.7-3.32h1.142a.7.7 0 1 1 0 1.4H4.776Z" clipRule="evenodd" /></svg>
     );
   }
 );

package/src/index.stories.tsx

@@ -34,7 +34,7 @@ export const Icons = () => {
                     textAlign: "center",
                     wordWrap: "break-word",
                     width: "100%",
-                    fontSize: "$fontSize$4",
+                    fontSize: "14px",
                     color: "#5a5a5a",
                   }}
                 >