@vector-im/compound-design-tokens 1.5.0 → 1.6.0

package/assets/web/icons/visibility-on.cjs

@@ -0,0 +1,17 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function VisibilityOnIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
+    })
+  });
+}
+;
+VisibilityOnIcon.displayName = "VisibilityOnIcon";
+module.exports = VisibilityOnIcon;

package/assets/web/icons/visibility-on.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * visibility-on.svg
+ */
+declare const VisibilityOnIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default VisibilityOnIcon;

package/assets/web/icons/visibility-on.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function VisibilityOnIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
+    })
+  });
+}
+;
+VisibilityOnIcon.displayName = "VisibilityOnIcon";
+export default VisibilityOnIcon;

package/assets/web/icons/voice-call.cjs

@@ -0,0 +1,17 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function VoiceCallIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "m20.958 16.374.039 3.527c0 .284-.11.536-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.225 16.225 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.33.755-.33l3.528.04a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.18.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.07 1.07 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.068 1.068 0 0 1 .93 1.085Z"
+    })
+  });
+}
+;
+VoiceCallIcon.displayName = "VoiceCallIcon";
+module.exports = VoiceCallIcon;

package/assets/web/icons/voice-call.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * voice-call.svg
+ */
+declare const VoiceCallIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default VoiceCallIcon;

package/assets/web/icons/voice-call.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function VoiceCallIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "m20.958 16.374.039 3.527c0 .284-.11.536-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.225 16.225 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.33.755-.33l3.528.04a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.18.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.07 1.07 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.068 1.068 0 0 1 .93 1.085Z"
+    })
+  });
+}
+;
+VoiceCallIcon.displayName = "VoiceCallIcon";
+export default VoiceCallIcon;

package/assets/web/icons/volume-off-solid.cjs

@@ -0,0 +1,17 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function VolumeOffSolidIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M3.5 3.5a1 1 0 1 0-1.414 1.414L5.172 8H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2l3.293 3.293c.63.63 1.707.184 1.707-.707v-3.758l7.086 7.086A1 1 0 0 0 20.5 20.5l-2.136-2.136.003-.003-1.414-1.414-.003.003-1.414-1.414.003-.003-1.415-1.415-.002.003L12 12v-.006L7.503 7.497 7.5 7.5l-4-4Zm11.496 8.662 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
+    })
+  });
+}
+;
+VolumeOffSolidIcon.displayName = "VolumeOffSolidIcon";
+module.exports = VolumeOffSolidIcon;

package/assets/web/icons/volume-off-solid.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * volume-off-solid.svg
+ */
+declare const VolumeOffSolidIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default VolumeOffSolidIcon;

package/assets/web/icons/volume-off-solid.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function VolumeOffSolidIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M3.5 3.5a1 1 0 1 0-1.414 1.414L5.172 8H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2l3.293 3.293c.63.63 1.707.184 1.707-.707v-3.758l7.086 7.086A1 1 0 0 0 20.5 20.5l-2.136-2.136.003-.003-1.414-1.414-.003.003-1.414-1.414.003-.003-1.415-1.415-.002.003L12 12v-.006L7.503 7.497 7.5 7.5l-4-4Zm11.496 8.662 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
+    })
+  });
+}
+;
+VolumeOffSolidIcon.displayName = "VolumeOffSolidIcon";
+export default VolumeOffSolidIcon;

package/assets/web/icons/volume-off.cjs

@@ -0,0 +1,17 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function VolumeOffIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "m3.5 3.5 4 4 .003-.003L8.917 8.91l-.003.003L10 10v-.006l2 2V12l2.122 2.121.002-.003 1.415 1.415-.003.003 1.414 1.414.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414L12 14.828v3.758c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h.172L2.086 4.914A1 1 0 0 1 3.5 3.5ZM7.172 10H5v4h2.828L10 16.17v-3.343L7.172 10Zm7.824 2.162 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
+    })
+  });
+}
+;
+VolumeOffIcon.displayName = "VolumeOffIcon";
+module.exports = VolumeOffIcon;

package/assets/web/icons/volume-off.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * volume-off.svg
+ */
+declare const VolumeOffIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default VolumeOffIcon;

package/assets/web/icons/volume-off.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function VolumeOffIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "m3.5 3.5 4 4 .003-.003L8.917 8.91l-.003.003L10 10v-.006l2 2V12l2.122 2.121.002-.003 1.415 1.415-.003.003 1.414 1.414.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414L12 14.828v3.758c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h.172L2.086 4.914A1 1 0 0 1 3.5 3.5ZM7.172 10H5v4h2.828L10 16.17v-3.343L7.172 10Zm7.824 2.162 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
+    })
+  });
+}
+;
+VolumeOffIcon.displayName = "VolumeOffIcon";
+export default VolumeOffIcon;

package/assets/web/icons/volume-on-solid.cjs

@@ -0,0 +1,19 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function VolumeOnSolidIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2Zm11.121-5.536a1 1 0 0 1 1.415 0A4.987 4.987 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.536a1 1 0 0 1-1.415-1.415 2.988 2.988 0 0 0 .88-2.121c0-.829-.335-1.577-.88-2.121a1 1 0 0 1 0-1.415Z"
+    }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M16.95 5.636a1 1 0 0 1 1.414 0A8.975 8.975 0 0 1 21 12a8.975 8.975 0 0 1-2.636 6.364 1 1 0 0 1-1.414-1.414A6.975 6.975 0 0 0 19 12a6.975 6.975 0 0 0-2.05-4.95 1 1 0 0 1 0-1.414Z"
+    })]
+  });
+}
+;
+VolumeOnSolidIcon.displayName = "VolumeOnSolidIcon";
+module.exports = VolumeOnSolidIcon;

package/assets/web/icons/volume-on-solid.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * volume-on-solid.svg
+ */
+declare const VolumeOnSolidIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default VolumeOnSolidIcon;

package/assets/web/icons/volume-on-solid.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function VolumeOnSolidIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2Zm11.121-5.536a1 1 0 0 1 1.415 0A4.987 4.987 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.536a1 1 0 0 1-1.415-1.415 2.988 2.988 0 0 0 .88-2.121c0-.829-.335-1.577-.88-2.121a1 1 0 0 1 0-1.415Z"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M16.95 5.636a1 1 0 0 1 1.414 0A8.975 8.975 0 0 1 21 12a8.975 8.975 0 0 1-2.636 6.364 1 1 0 0 1-1.414-1.414A6.975 6.975 0 0 0 19 12a6.975 6.975 0 0 0-2.05-4.95 1 1 0 0 1 0-1.414Z"
+    })]
+  });
+}
+;
+VolumeOnSolidIcon.displayName = "VolumeOnSolidIcon";
+export default VolumeOnSolidIcon;

package/assets/web/icons/volume-on.cjs

@@ -0,0 +1,19 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function VolumeOnIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M3 10a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4Zm4.828 4L10 16.172V7.828L7.828 10H5v4h2.828Zm6.293-5.536a1 1 0 0 1 1.415 0A4.988 4.988 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.535a1 1 0 1 1-1.415-1.414 2.987 2.987 0 0 0 .88-2.121c0-.829-.335-1.578-.88-2.122a1 1 0 0 1 0-1.414Z"
+    }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M18.364 5.636A1 1 0 1 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.975 6.975 0 0 1-2.05 4.95 1 1 0 0 0 1.414 1.414A8.975 8.975 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364Z"
+    })]
+  });
+}
+;
+VolumeOnIcon.displayName = "VolumeOnIcon";
+module.exports = VolumeOnIcon;

package/assets/web/icons/volume-on.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * volume-on.svg
+ */
+declare const VolumeOnIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default VolumeOnIcon;

package/assets/web/icons/volume-on.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function VolumeOnIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M3 10a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4Zm4.828 4L10 16.172V7.828L7.828 10H5v4h2.828Zm6.293-5.536a1 1 0 0 1 1.415 0A4.988 4.988 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.535a1 1 0 1 1-1.415-1.414 2.987 2.987 0 0 0 .88-2.121c0-.829-.335-1.578-.88-2.122a1 1 0 0 1 0-1.414Z"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M18.364 5.636A1 1 0 1 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.975 6.975 0 0 1-2.05 4.95 1 1 0 0 0 1.414 1.414A8.975 8.975 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364Z"
+    })]
+  });
+}
+;
+VolumeOnIcon.displayName = "VolumeOnIcon";
+export default VolumeOnIcon;

package/assets/web/icons/warning.cjs

@@ -0,0 +1,21 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function WarningIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M12.713 17.712A.968.968 0 0 1 12 18a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 17a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 16a.97.97 0 0 1 .713.288c.191.191.287.429.287.712s-.096.52-.287.712Zm0-3.999A.968.968 0 0 1 12 14a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 13V9c0-.283.096-.52.287-.713A.968.968 0 0 1 12 8c.283 0 .52.096.713.287.191.192.287.43.287.713v4c0 .283-.096.52-.287.713Z"
+    }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      d: "M10.264 3.039c.767-1.344 2.705-1.344 3.472 0l8.554 14.969c.762 1.333-.2 2.992-1.736 2.992H3.446c-1.535 0-2.498-1.659-1.736-2.992l8.553-14.97ZM3.446 19 12 4.031 20.554 19H3.446Z",
+      clipRule: "evenodd"
+    })]
+  });
+}
+;
+WarningIcon.displayName = "WarningIcon";
+module.exports = WarningIcon;

package/assets/web/icons/warning.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * warning.svg
+ */
+declare const WarningIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default WarningIcon;

package/assets/web/icons/warning.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function WarningIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M12.713 17.712A.968.968 0 0 1 12 18a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 17a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 16a.97.97 0 0 1 .713.288c.191.191.287.429.287.712s-.096.52-.287.712Zm0-3.999A.968.968 0 0 1 12 14a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 13V9c0-.283.096-.52.287-.713A.968.968 0 0 1 12 8c.283 0 .52.096.713.287.191.192.287.43.287.713v4c0 .283-.096.52-.287.713Z"
+    }), /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      d: "M10.264 3.039c.767-1.344 2.705-1.344 3.472 0l8.554 14.969c.762 1.333-.2 2.992-1.736 2.992H3.446c-1.535 0-2.498-1.659-1.736-2.992l8.553-14.97ZM3.446 19 12 4.031 20.554 19H3.446Z",
+      clipRule: "evenodd"
+    })]
+  });
+}
+;
+WarningIcon.displayName = "WarningIcon";
+export default WarningIcon;

package/assets/web/icons/web-browser.cjs

@@ -0,0 +1,17 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function WebBrowserIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
+    })
+  });
+}
+;
+WebBrowserIcon.displayName = "WebBrowserIcon";
+module.exports = WebBrowserIcon;

package/assets/web/icons/web-browser.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * web-browser.svg
+ */
+declare const WebBrowserIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default WebBrowserIcon;

package/assets/web/icons/web-browser.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function WebBrowserIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
+    })
+  });
+}
+;
+WebBrowserIcon.displayName = "WebBrowserIcon";
+export default WebBrowserIcon;

package/assets/web/js/cpdDark.d.ts

@@ -625,4 +625,4 @@ export const cpdColorIconAccentPrimary : string;
 export const cpdColorIconCriticalPrimary : string;
 export const cpdColorIconSuccessPrimary : string;
 export const cpdColorIconInfoPrimary : string;
-export const cpdColorIconOnSolidPrimary : string;
+export const cpdColorIconOnSolidPrimary : string;

package/assets/web/js/cpdDark.js

@@ -1,5 +1,5 @@
 export const cpdSpaceScale = "4px";
-export const cpdSpace0X = "0px";
+export const cpdSpace0X = "0";
 export const cpdSpace0_5X = "2px";
 export const cpdSpace1X = "4px";
 export const cpdSpace1_5X = "6px";
@@ -625,4 +625,4 @@ export const cpdColorIconAccentPrimary = "#129a78";
 export const cpdColorIconCriticalPrimary = "#fd3e3c";
 export const cpdColorIconSuccessPrimary = "#129a78";
 export const cpdColorIconInfoPrimary = "#4187eb";
-export const cpdColorIconOnSolidPrimary = "#101317";
+export const cpdColorIconOnSolidPrimary = "#101317";

package/assets/web/js/cpdDarkHc.d.ts

@@ -625,4 +625,4 @@ export const cpdColorIconAccentPrimary : string;
 export const cpdColorIconCriticalPrimary : string;
 export const cpdColorIconSuccessPrimary : string;
 export const cpdColorIconInfoPrimary : string;
-export const cpdColorIconOnSolidPrimary : string;
+export const cpdColorIconOnSolidPrimary : string;

package/assets/web/js/cpdDarkHc.js

@@ -1,5 +1,5 @@
 export const cpdSpaceScale = "4px";
-export const cpdSpace0X = "0px";
+export const cpdSpace0X = "0";
 export const cpdSpace0_5X = "2px";
 export const cpdSpace1X = "4px";
 export const cpdSpace1_5X = "6px";
@@ -625,4 +625,4 @@ export const cpdColorIconAccentPrimary = "#37c998";
 export const cpdColorIconCriticalPrimary = "#ff968c";
 export const cpdColorIconSuccessPrimary = "#37c998";
 export const cpdColorIconInfoPrimary = "#89b5f6";
-export const cpdColorIconOnSolidPrimary = "#101317";
+export const cpdColorIconOnSolidPrimary = "#101317";

package/assets/web/js/cpdLight.d.ts

@@ -625,4 +625,4 @@ export const cpdColorIconAccentPrimary : string;
 export const cpdColorIconCriticalPrimary : string;
 export const cpdColorIconSuccessPrimary : string;
 export const cpdColorIconInfoPrimary : string;
-export const cpdColorIconOnSolidPrimary : string;
+export const cpdColorIconOnSolidPrimary : string;

package/assets/web/js/cpdLight.js

@@ -1,5 +1,5 @@
 export const cpdSpaceScale = "4px";
-export const cpdSpace0X = "0px";
+export const cpdSpace0X = "0";
 export const cpdSpace0_5X = "2px";
 export const cpdSpace1X = "4px";
 export const cpdSpace1_5X = "6px";
@@ -625,4 +625,4 @@ export const cpdColorIconAccentPrimary = "#007a61";
 export const cpdColorIconCriticalPrimary = "#d51928";
 export const cpdColorIconSuccessPrimary = "#007a61";
 export const cpdColorIconInfoPrimary = "#0467dd";
-export const cpdColorIconOnSolidPrimary = "#ffffff";
+export const cpdColorIconOnSolidPrimary = "#ffffff";

package/assets/web/js/cpdLightHc.d.ts

@@ -625,4 +625,4 @@ export const cpdColorIconAccentPrimary : string;
 export const cpdColorIconCriticalPrimary : string;
 export const cpdColorIconSuccessPrimary : string;
 export const cpdColorIconInfoPrimary : string;
-export const cpdColorIconOnSolidPrimary : string;
+export const cpdColorIconOnSolidPrimary : string;

package/assets/web/js/cpdLightHc.js

@@ -1,5 +1,5 @@
 export const cpdSpaceScale = "4px";
-export const cpdSpace0X = "0px";
+export const cpdSpace0X = "0";
 export const cpdSpace0_5X = "2px";
 export const cpdSpace1X = "4px";
 export const cpdSpace1_5X = "6px";
@@ -625,4 +625,4 @@ export const cpdColorIconAccentPrimary = "#00553d";
 export const cpdColorIconCriticalPrimary = "#99001a";
 export const cpdColorIconSuccessPrimary = "#00553d";
 export const cpdColorIconInfoPrimary = "#0543a7";
-export const cpdColorIconOnSolidPrimary = "#ffffff";
+export const cpdColorIconOnSolidPrimary = "#ffffff";

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@vector-im/compound-design-tokens",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Compound design tokens",
+  "sideEffects": false,
   "scripts": {
-    "build": "ts-node ./build.ts",
-    "dev": "http-server ."
+    "build": "tsx ./build.ts",
+    "dev": "http-server .",
+    "format": "yarn exec biome -- format",
+    "lint": "yarn exec biome -- lint",
+    "check": "yarn exec biome -- check",
+    "types": "yarn exec tsc -- --noEmit"
   },
   "keywords": [
     "compound",
@@ -17,6 +22,25 @@
     "./icons/**/*"
   ],
   "main": "assets/web/js/index.js",
+  "type": "module",
+  "exports": {
+    "./*": "./*",
+    "./assets/web/js": "./assets/web/js/index.js",
+    "./assets/web/js/*": {
+      "import": "./assets/web/js/*.js",
+      "types": "./assets/web/js/*.d.ts"
+    },
+    "./assets/web/icons": {
+      "import": "./assets/web/icons/index.js",
+      "require": "./assets/web/icons/index.cjs",
+      "types": "./assets/web/icons/index.d.ts"
+    },
+    "./assets/web/icons/*": {
+      "import": "./assets/web/icons/*.js",
+      "require": "./assets/web/icons/*.cjs",
+      "types": "./assets/web/icons/*.d.ts"
+    }
+  },
   "author": "",
   "license": "Apache-2.0",
   "homepage": "https://github.com/vector-im/compound-design-tokens",
@@ -28,17 +52,37 @@
     "url": "git+https://github.com/vector-im/compound-design-tokens.git"
   },
   "devDependencies": {
-    "@tokens-studio/sd-transforms": "^0.4.3",
-    "@types/fs-extra": "^11.0.1",
-    "@types/lodash": "^4.14.191",
-    "@types/node": "^18.13.0",
-    "fast-glob": "^3.2.12",
+    "@babel/core": "^7.24.7",
+    "@babel/generator": "^7.24.7",
+    "@babel/plugin-transform-react-jsx": "^7.24.7",
+    "@babel/types": "^7.24.7",
+    "@biomejs/biome": "^1.8.3",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@tokens-studio/sd-transforms": "^1.0.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/fs-extra": "^11.0.4",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.14.6",
+    "fast-glob": "^3.3.2",
     "http-server": "^14.1.1",
-    "style-dictionary": "https://github.com/amzn/style-dictionary",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "lodash-es": "^4.17.21",
+    "style-dictionary": "^4.0.0",
+    "svg2vectordrawable": "^2.9.1",
+    "tsx": "^4.15.6",
+    "typescript": "^5.4.5"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@types/react": "*",
+    "react": "^17 || ^18"
   },
-  "dependencies": {
-    "svg2vectordrawable": "^2.9.1"
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    }
   }
 }