@vector-im/compound-design-tokens 6.9.0 → 6.10.1

package/assets/web/css/cpd-common-semantic.css

@@ -79,19 +79,11 @@
   --cpd-color-gradient-subtle-stop4: var(--cpd-color-alpha-green-200);
   --cpd-color-gradient-subtle-stop5: var(--cpd-color-alpha-green-100);
   --cpd-color-gradient-subtle-stop6: var(--cpd-color-transparent);
-  --cpd-color-gradient-info-stop1: var(--cpd-color-alpha-blue-500);
-  --cpd-color-gradient-info-stop2: var(--cpd-color-alpha-blue-400);
-  --cpd-color-gradient-info-stop3: var(--cpd-color-alpha-blue-300);
-  --cpd-color-gradient-info-stop4: var(--cpd-color-alpha-blue-200);
-  --cpd-color-gradient-info-stop5: var(--cpd-color-alpha-blue-100);
-  --cpd-color-gradient-info-stop6: var(--cpd-color-transparent);
-  --cpd-color-gradient-critical-stop1: var(--cpd-color-alpha-red-500);
-  --cpd-color-gradient-critical-stop2: var(--cpd-color-alpha-red-400);
-  --cpd-color-gradient-critical-stop3: var(--cpd-color-alpha-red-300);
-  --cpd-color-gradient-critical-stop4: var(--cpd-color-alpha-red-200);
-  --cpd-color-gradient-critical-stop5: var(--cpd-color-alpha-red-100);
-  --cpd-color-gradient-critical-stop6: var(--cpd-color-transparent);
+  --cpd-color-gradient-info-stop1: var(--cpd-color-blue-200);
+  --cpd-color-gradient-info-stop2: var(--cpd-color-theme-bg);
+  --cpd-color-gradient-critical-stop1: var(--cpd-color-red-200);
+  --cpd-color-gradient-critical-stop2: var(--cpd-color-theme-bg);
   --cpd-color-gradient-subtle-linear: linear-gradient(180deg, var(--cpd-color-gradient-subtle-stop1) 0%, var(--cpd-color-gradient-subtle-stop2) 20%, var(--cpd-color-gradient-subtle-stop3) 40%, var(--cpd-color-gradient-subtle-stop4) 60%, var(--cpd-color-gradient-subtle-stop5) 80%, var(--cpd-color-gradient-subtle-stop6) 100%);
-  --cpd-color-gradient-info-linear: linear-gradient(180deg, var(--cpd-color-gradient-info-stop1) 0%, var(--cpd-color-gradient-info-stop2) 20%, var(--cpd-color-gradient-info-stop3) 40%, var(--cpd-color-gradient-info-stop4) 60%, var(--cpd-color-gradient-info-stop5) 80%, var(--cpd-color-gradient-info-stop6) 100%);
-  --cpd-color-gradient-critical-linear: linear-gradient(180deg, var(--cpd-color-gradient-critical-stop1) 0%, var(--cpd-color-gradient-critical-stop2) 20%, var(--cpd-color-gradient-critical-stop3) 40%, var(--cpd-color-gradient-critical-stop4) 60%, var(--cpd-color-gradient-critical-stop5) 80%, var(--cpd-color-gradient-critical-stop6) 100%);
+  --cpd-color-gradient-info-linear: linear-gradient(180deg, var(--cpd-color-gradient-info-stop1) 0%, var(--cpd-color-gradient-info-stop2) 100%);
+  --cpd-color-gradient-critical-linear: linear-gradient(180deg, var(--cpd-color-gradient-critical-stop1) 0%, var(--cpd-color-gradient-critical-stop2) 100%);
 }

package/assets/web/icons/index.cjs

@@ -147,6 +147,7 @@ module.exports = {
   QrCodeIcon: require("./qr-code.cjs"),
   QuoteIcon: require("./quote.cjs"),
   RaisedHandSolidIcon: require("./raised-hand-solid.cjs"),
+  ReOrderIcon: require("./re-order.cjs"),
   ReactionAddIcon: require("./reaction-add.cjs"),
   ReactionSolidIcon: require("./reaction-solid.cjs"),
   ReactionIcon: require("./reaction.cjs"),
@@ -156,6 +157,7 @@ module.exports = {
   RotateLeftIcon: require("./rotate-left.cjs"),
   RotateRightIcon: require("./rotate-right.cjs"),
   SearchIcon: require("./search.cjs"),
+  SectionIcon: require("./section.cjs"),
   SendSolidIcon: require("./send-solid.cjs"),
   SendIcon: require("./send.cjs"),
   SettingsSolidIcon: require("./settings-solid.cjs"),

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

@@ -146,6 +146,7 @@ export { default as PublicIcon } from "./public.js";
 export { default as QrCodeIcon } from "./qr-code.js";
 export { default as QuoteIcon } from "./quote.js";
 export { default as RaisedHandSolidIcon } from "./raised-hand-solid.js";
+export { default as ReOrderIcon } from "./re-order.js";
 export { default as ReactionAddIcon } from "./reaction-add.js";
 export { default as ReactionSolidIcon } from "./reaction-solid.js";
 export { default as ReactionIcon } from "./reaction.js";
@@ -155,6 +156,7 @@ export { default as RoomIcon } from "./room.js";
 export { default as RotateLeftIcon } from "./rotate-left.js";
 export { default as RotateRightIcon } from "./rotate-right.js";
 export { default as SearchIcon } from "./search.js";
+export { default as SectionIcon } from "./section.js";
 export { default as SendSolidIcon } from "./send-solid.js";
 export { default as SendIcon } from "./send.js";
 export { default as SettingsSolidIcon } from "./settings-solid.js";

package/assets/web/icons/index.js

@@ -146,6 +146,7 @@ export { default as PublicIcon } from "./public.js";
 export { default as QrCodeIcon } from "./qr-code.js";
 export { default as QuoteIcon } from "./quote.js";
 export { default as RaisedHandSolidIcon } from "./raised-hand-solid.js";
+export { default as ReOrderIcon } from "./re-order.js";
 export { default as ReactionAddIcon } from "./reaction-add.js";
 export { default as ReactionSolidIcon } from "./reaction-solid.js";
 export { default as ReactionIcon } from "./reaction.js";
@@ -155,6 +156,7 @@ export { default as RoomIcon } from "./room.js";
 export { default as RotateLeftIcon } from "./rotate-left.js";
 export { default as RotateRightIcon } from "./rotate-right.js";
 export { default as SearchIcon } from "./search.js";
+export { default as SectionIcon } from "./section.js";
 export { default as SendSolidIcon } from "./send-solid.js";
 export { default as SendIcon } from "./send.js";
 export { default as SettingsSolidIcon } from "./settings-solid.js";

package/assets/web/icons/linux.cjs

@@ -10,7 +10,7 @@ function LinuxIcon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsxs("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_LinuxIcon_a)",
       children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
         d: "M13.206 20.644a2.7 2.7 0 0 1-1.097.248 2.8 2.8 0 0 1-1.567-.495c-.153.38-.392.723-.7 1a2.8 2.8 0 0 1-1.078.604h6.141a2.8 2.8 0 0 1-.99-.51 2.8 2.8 0 0 1-.709-.847M6.71 16.673a.2.2 0 0 0 .067-.03q.056-.49.13-.94c-.01-.169.017-.338.08-.495.348-1.904.834-3.24 1.504-4.052a.13.13 0 0 1 .18-.018.123.123 0 0 1 .018.174 4 4 0 0 0-.203.272q-.764 1.113-1.199 3.389h.03a.6.6 0 0 1 .166 0c.198.042.508.203.985.67.061-2.72 1.661-4.913 3.642-4.913 1.748 0 3.208 1.715 3.556 3.997a1.7 1.7 0 0 1 .762-.742.8.8 0 0 1 .254-.047 7.5 7.5 0 0 0-.948-2.342 4 4 0 0 0-.2-.272.12.12 0 0 1-.03-.09.12.12 0 0 1 .048-.083.13.13 0 0 1 .092-.028.13.13 0 0 1 .085.045c.508.624.93 1.557 1.245 2.822.678.247.696 1.361.71 2.267 0 .43 0 .877.105.99.104.114.325.09.635-.04.036-.393.053-.742.063-1.036v-1.082c0-2.475-3.266-6.755-3.266-6.755l-.378-3.218c0-2.953-2.733-2.926-2.733-2.926s-2.743-.027-2.743 2.914l-.365 3.23s-3.267 4.277-3.267 6.755v.31s-.012.299 0 .767v.227c.414.154.839.315.976.28m5.388-10.41c.761.068 1.975.247 2.031.613.04.282-.429.822-.523.926-.195.215-.876.92-1.49.92-.615 0-1.296-.705-1.49-.92-.093-.104-.563-.644-.525-.926.046-.374 1.273-.545 1.996-.614"
       }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
@@ -20,7 +20,7 @@ function LinuxIcon(props, ref) {
       })]
     }), /*#__PURE__*/_reactJsxRuntime.jsx("defs", {
       children: /*#__PURE__*/_reactJsxRuntime.jsx("clipPath", {
-        id: "a",
+        id: "cpd_LinuxIcon_a",
         children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
           d: "M3.167 2.19H20.5V22H3.165z"
         })

package/assets/web/icons/linux.js

@@ -10,7 +10,7 @@ function LinuxIcon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsxs("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_LinuxIcon_a)",
       children: [/*#__PURE__*/_jsx("path", {
         d: "M13.206 20.644a2.7 2.7 0 0 1-1.097.248 2.8 2.8 0 0 1-1.567-.495c-.153.38-.392.723-.7 1a2.8 2.8 0 0 1-1.078.604h6.141a2.8 2.8 0 0 1-.99-.51 2.8 2.8 0 0 1-.709-.847M6.71 16.673a.2.2 0 0 0 .067-.03q.056-.49.13-.94c-.01-.169.017-.338.08-.495.348-1.904.834-3.24 1.504-4.052a.13.13 0 0 1 .18-.018.123.123 0 0 1 .018.174 4 4 0 0 0-.203.272q-.764 1.113-1.199 3.389h.03a.6.6 0 0 1 .166 0c.198.042.508.203.985.67.061-2.72 1.661-4.913 3.642-4.913 1.748 0 3.208 1.715 3.556 3.997a1.7 1.7 0 0 1 .762-.742.8.8 0 0 1 .254-.047 7.5 7.5 0 0 0-.948-2.342 4 4 0 0 0-.2-.272.12.12 0 0 1-.03-.09.12.12 0 0 1 .048-.083.13.13 0 0 1 .092-.028.13.13 0 0 1 .085.045c.508.624.93 1.557 1.245 2.822.678.247.696 1.361.71 2.267 0 .43 0 .877.105.99.104.114.325.09.635-.04.036-.393.053-.742.063-1.036v-1.082c0-2.475-3.266-6.755-3.266-6.755l-.378-3.218c0-2.953-2.733-2.926-2.733-2.926s-2.743-.027-2.743 2.914l-.365 3.23s-3.267 4.277-3.267 6.755v.31s-.012.299 0 .767v.227c.414.154.839.315.976.28m5.388-10.41c.761.068 1.975.247 2.031.613.04.282-.429.822-.523.926-.195.215-.876.92-1.49.92-.615 0-1.296-.705-1.49-.92-.093-.104-.563-.644-.525-.926.046-.374 1.273-.545 1.996-.614"
       }), /*#__PURE__*/_jsx("path", {
@@ -20,7 +20,7 @@ function LinuxIcon(props, ref) {
       })]
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
-        id: "a",
+        id: "cpd_LinuxIcon_a",
         children: /*#__PURE__*/_jsx("path", {
           d: "M3.167 2.19H20.5V22H3.165z"
         })

package/assets/web/icons/presence-outline-8x8.cjs

@@ -10,7 +10,7 @@ function PresenceOutline8X8Icon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_PresenceOutline8X8Icon_a)",
       children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
         fillRule: "evenodd",
         d: "M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8",
@@ -18,7 +18,7 @@ function PresenceOutline8X8Icon(props, ref) {
       })
     }), /*#__PURE__*/_reactJsxRuntime.jsx("defs", {
       children: /*#__PURE__*/_reactJsxRuntime.jsx("clipPath", {
-        id: "a",
+        id: "cpd_PresenceOutline8X8Icon_a",
         children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
           d: "M0 0h8v8H0z"
         })

package/assets/web/icons/presence-outline-8x8.js

@@ -10,7 +10,7 @@ function PresenceOutline8X8Icon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_PresenceOutline8X8Icon_a)",
       children: /*#__PURE__*/_jsx("path", {
         fillRule: "evenodd",
         d: "M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8",
@@ -18,7 +18,7 @@ function PresenceOutline8X8Icon(props, ref) {
       })
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
-        id: "a",
+        id: "cpd_PresenceOutline8X8Icon_a",
         children: /*#__PURE__*/_jsx("path", {
           d: "M0 0h8v8H0z"
         })

package/assets/web/icons/presence-solid-8x8.cjs

@@ -10,13 +10,13 @@ function PresenceSolid8X8Icon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_PresenceSolid8X8Icon_a)",
       children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
         d: "M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
       })
     }), /*#__PURE__*/_reactJsxRuntime.jsx("defs", {
       children: /*#__PURE__*/_reactJsxRuntime.jsx("clipPath", {
-        id: "a",
+        id: "cpd_PresenceSolid8X8Icon_a",
         children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
           d: "M0 0h8v8H0z"
         })

package/assets/web/icons/presence-solid-8x8.js

@@ -10,13 +10,13 @@ function PresenceSolid8X8Icon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_PresenceSolid8X8Icon_a)",
       children: /*#__PURE__*/_jsx("path", {
         d: "M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
       })
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
-        id: "a",
+        id: "cpd_PresenceSolid8X8Icon_a",
         children: /*#__PURE__*/_jsx("path", {
           d: "M0 0h8v8H0z"
         })

package/assets/web/icons/presence-strikethrough-8x8.cjs

@@ -10,7 +10,7 @@ function PresenceStrikethrough8X8Icon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_PresenceStrikethrough8X8Icon_a)",
       children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
         fillRule: "evenodd",
         d: "M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961",
@@ -18,7 +18,7 @@ function PresenceStrikethrough8X8Icon(props, ref) {
       })
     }), /*#__PURE__*/_reactJsxRuntime.jsx("defs", {
       children: /*#__PURE__*/_reactJsxRuntime.jsx("clipPath", {
-        id: "a",
+        id: "cpd_PresenceStrikethrough8X8Icon_a",
         children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
           d: "M0 0h8v8H0z"
         })

package/assets/web/icons/presence-strikethrough-8x8.js

@@ -10,7 +10,7 @@ function PresenceStrikethrough8X8Icon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_PresenceStrikethrough8X8Icon_a)",
       children: /*#__PURE__*/_jsx("path", {
         fillRule: "evenodd",
         d: "M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961",
@@ -18,7 +18,7 @@ function PresenceStrikethrough8X8Icon(props, ref) {
       })
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
-        id: "a",
+        id: "cpd_PresenceStrikethrough8X8Icon_a",
         children: /*#__PURE__*/_jsx("path", {
           d: "M0 0h8v8H0z"
         })

package/assets/web/icons/re-order.cjs

@@ -0,0 +1,19 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+function ReOrderIcon(props, ref) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M9 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+    })
+  });
+}
+;
+ReOrderIcon.displayName = "ReOrderIcon";
+module.exports = React.forwardRef(ReOrderIcon);

package/assets/web/icons/re-order.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+/**
+ * re-order.svg
+ */
+declare const ReOrderIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
+>;
+
+export default ReOrderIcon;

package/assets/web/icons/re-order.js

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ReOrderIcon(props, ref) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M9 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+    })
+  });
+}
+;
+ReOrderIcon.displayName = "ReOrderIcon";
+export default forwardRef(ReOrderIcon);

package/assets/web/icons/rotate-right.cjs

@@ -10,13 +10,13 @@ function RotateRightIcon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_RotateRightIcon_a)",
       children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
         d: "M14.83 4.83 12.7 2.7c-.62-.62-1.7-.18-1.7.71v.66C7.06 4.56 4 7.92 4 12c0 3.64 2.43 6.71 5.77 7.68.62.18 1.23-.32 1.23-.96v-.03a.97.97 0 0 0-.68-.94A5.98 5.98 0 0 1 6 12c0-2.97 2.16-5.43 5-5.91v1.53c0 .89 1.07 1.33 1.7.71l2.13-2.08a.99.99 0 0 0 0-1.42m4.84 4.93q-.24-.825-.66-1.59c-.31-.57-1.1-.66-1.56-.2l-.01.01c-.31.31-.38.78-.17 1.16.2.37.36.76.48 1.16.12.42.51.7.94.7h.02c.65 0 1.15-.62.96-1.24M13 18.68v.02c0 .65.62 1.14 1.24.96q.825-.24 1.59-.66c.57-.31.66-1.1.2-1.56l-.02-.02a.97.97 0 0 0-1.16-.17c-.37.21-.76.37-1.16.49-.41.12-.69.51-.69.94m4.44-2.65c.46.46 1.25.37 1.56-.2.28-.51.5-1.04.67-1.59.18-.62-.31-1.24-.96-1.24h-.02c-.44 0-.82.28-.94.7q-.18.6-.48 1.17c-.21.38-.13.86.17 1.16"
       })
     }), /*#__PURE__*/_reactJsxRuntime.jsx("defs", {
       children: /*#__PURE__*/_reactJsxRuntime.jsx("clipPath", {
-        id: "a",
+        id: "cpd_RotateRightIcon_a",
         children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
           d: "M0 0h24v24H0z"
         })

package/assets/web/icons/rotate-right.js

@@ -10,13 +10,13 @@ function RotateRightIcon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_RotateRightIcon_a)",
       children: /*#__PURE__*/_jsx("path", {
         d: "M14.83 4.83 12.7 2.7c-.62-.62-1.7-.18-1.7.71v.66C7.06 4.56 4 7.92 4 12c0 3.64 2.43 6.71 5.77 7.68.62.18 1.23-.32 1.23-.96v-.03a.97.97 0 0 0-.68-.94A5.98 5.98 0 0 1 6 12c0-2.97 2.16-5.43 5-5.91v1.53c0 .89 1.07 1.33 1.7.71l2.13-2.08a.99.99 0 0 0 0-1.42m4.84 4.93q-.24-.825-.66-1.59c-.31-.57-1.1-.66-1.56-.2l-.01.01c-.31.31-.38.78-.17 1.16.2.37.36.76.48 1.16.12.42.51.7.94.7h.02c.65 0 1.15-.62.96-1.24M13 18.68v.02c0 .65.62 1.14 1.24.96q.825-.24 1.59-.66c.57-.31.66-1.1.2-1.56l-.02-.02a.97.97 0 0 0-1.16-.17c-.37.21-.76.37-1.16.49-.41.12-.69.51-.69.94m4.44-2.65c.46.46 1.25.37 1.56-.2.28-.51.5-1.04.67-1.59.18-.62-.31-1.24-.96-1.24h-.02c-.44 0-.82.28-.94.7q-.18.6-.48 1.17c-.21.38-.13.86.17 1.16"
       })
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
-        id: "a",
+        id: "cpd_RotateRightIcon_a",
         children: /*#__PURE__*/_jsx("path", {
           d: "M0 0h24v24H0z"
         })

package/assets/web/icons/section.cjs

@@ -0,0 +1,19 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+function SectionIcon(props, ref) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M16 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 8q0 .424.287.713Q15.576 9 16 9t.712-.287A.97.97 0 0 0 17 8a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 7m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 12q0 .424.287.713.288.287.713.287.424 0 .712-.287A.97.97 0 0 0 17 12a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 11m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 16q0 .424.287.712.288.288.713.288.424 0 .712-.288A.97.97 0 0 0 17 16a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 15m-4-8H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 8q0 .424.287.713Q7.576 9 8 9h4q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 12q0 .424.287.713Q7.576 13 8 13h4q.424 0 .713-.287A.97.97 0 0 0 13 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 16q0 .424.287.712Q7.576 17 8 17h4q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15m7-12q.824 0 1.413.587Q21 4.176 21 5v14q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3zm0 2H5v14h14z"
+    })
+  });
+}
+;
+SectionIcon.displayName = "SectionIcon";
+module.exports = React.forwardRef(SectionIcon);

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

@@ -0,0 +1,11 @@
+import React from "react";
+
+/**
+ * section.svg
+ */
+declare const SectionIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
+>;
+
+export default SectionIcon;

package/assets/web/icons/section.js

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function SectionIcon(props, ref) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M16 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 8q0 .424.287.713Q15.576 9 16 9t.712-.287A.97.97 0 0 0 17 8a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 7m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 12q0 .424.287.713.288.287.713.287.424 0 .712-.287A.97.97 0 0 0 17 12a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 11m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 16q0 .424.287.712.288.288.713.288.424 0 .712-.288A.97.97 0 0 0 17 16a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 15m-4-8H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 8q0 .424.287.713Q7.576 9 8 9h4q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 12q0 .424.287.713Q7.576 13 8 13h4q.424 0 .713-.287A.97.97 0 0 0 13 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 16q0 .424.287.712Q7.576 17 8 17h4q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15m7-12q.824 0 1.413.587Q21 4.176 21 5v14q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3zm0 2H5v14h14z"
+    })
+  });
+}
+;
+SectionIcon.displayName = "SectionIcon";
+export default forwardRef(SectionIcon);

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

@@ -1,7 +1,7 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
 var React = require("react");
 function VoiceCallIcon(props, ref) {
-  return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -9,21 +9,11 @@ function VoiceCallIcon(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref,
     ...props,
-    children: [/*#__PURE__*/_reactJsxRuntime.jsx("g", {
-      clipPath: "url(#a)",
-      children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
-        fillRule: "evenodd",
-        d: "M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.644 1.792-1.792-.483-3.519-3.123-.034-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.4 11.4 0 0 0 3.206 3.54q.457.33.948.614l.762-.761a2 2 0 0 1 .774-.486c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.361.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062",
-        clipRule: "evenodd"
-      })
-    }), /*#__PURE__*/_reactJsxRuntime.jsx("defs", {
-      children: /*#__PURE__*/_reactJsxRuntime.jsx("clipPath", {
-        id: "a",
-        children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
-          d: "M0 0h24v24H0z"
-        })
-      })
-    })]
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      d: "M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.645 1.792-1.791-.483-3.52-3.123-.033-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.3 11.3 0 0 0 1.806 2.348 11.4 11.4 0 0 0 2.348 1.806l.762-.762a2 2 0 0 1 .774-.485c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.36.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062",
+      clipRule: "evenodd"
+    })
   });
 }
 ;

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

@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function VoiceCallIcon(props, ref) {
-  return /*#__PURE__*/_jsxs("svg", {
+  return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -9,21 +9,11 @@ function VoiceCallIcon(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref,
     ...props,
-    children: [/*#__PURE__*/_jsx("g", {
-      clipPath: "url(#a)",
-      children: /*#__PURE__*/_jsx("path", {
-        fillRule: "evenodd",
-        d: "M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.644 1.792-1.792-.483-3.519-3.123-.034-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.4 11.4 0 0 0 3.206 3.54q.457.33.948.614l.762-.761a2 2 0 0 1 .774-.486c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.361.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062",
-        clipRule: "evenodd"
-      })
-    }), /*#__PURE__*/_jsx("defs", {
-      children: /*#__PURE__*/_jsx("clipPath", {
-        id: "a",
-        children: /*#__PURE__*/_jsx("path", {
-          d: "M0 0h24v24H0z"
-        })
-      })
-    })]
+    children: /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      d: "M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.645 1.792-1.791-.483-3.52-3.123-.033-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.3 11.3 0 0 0 1.806 2.348 11.4 11.4 0 0 0 2.348 1.806l.762-.762a2 2 0 0 1 .774-.485c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.36.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062",
+      clipRule: "evenodd"
+    })
   });
 }
 ;

package/assets/web/icons/zoom-in.cjs

@@ -10,7 +10,7 @@ function ZoomInIcon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsxs("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_ZoomInIcon_a)",
       children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
         d: "M10.5 6.5q.425 0 .713.287.288.288.287.713v2h2q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-2v2a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713v-2h-2a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5h2v-2q0-.425.287-.713A.97.97 0 0 1 10.5 6.5"
       }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
@@ -24,7 +24,7 @@ function ZoomInIcon(props, ref) {
       })]
     }), /*#__PURE__*/_reactJsxRuntime.jsx("defs", {
       children: /*#__PURE__*/_reactJsxRuntime.jsx("clipPath", {
-        id: "a",
+        id: "cpd_ZoomInIcon_a",
         children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
           d: "M0 0h24v24H0z"
         })

package/assets/web/icons/zoom-in.js

@@ -10,7 +10,7 @@ function ZoomInIcon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsxs("g", {
-      clipPath: "url(#a)",
+      clipPath: "url(#cpd_ZoomInIcon_a)",
       children: [/*#__PURE__*/_jsx("path", {
         d: "M10.5 6.5q.425 0 .713.287.288.288.287.713v2h2q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-2v2a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713v-2h-2a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5h2v-2q0-.425.287-.713A.97.97 0 0 1 10.5 6.5"
       }), /*#__PURE__*/_jsx("path", {
@@ -24,7 +24,7 @@ function ZoomInIcon(props, ref) {
       })]
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
-        id: "a",
+        id: "cpd_ZoomInIcon_a",
         children: /*#__PURE__*/_jsx("path", {
           d: "M0 0h24v24H0z"
         })

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

@@ -276,6 +276,7 @@ export const cpdIconPresenceOutline8X8: string;
 export const cpdIconPresenceStrikethrough8X8: string;
 export const cpdIconError: string;
 export const cpdIconDialPad: string;
+export const cpdIconReOrder: string;
 export const cpdIconSpace: string;
 export const cpdIconSpaceSolid: string;
 export const cpdIconGuest: string;
@@ -299,6 +300,7 @@ export const cpdIconVoiceCallOutgoingSolid: string;
 export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
+export const cpdIconSection: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -697,17 +699,9 @@ export const cpdColorGradientSubtleStop6: string;
 export const cpdColorGradientSubtleLinear: string;
 export const cpdColorGradientInfoStop1: string;
 export const cpdColorGradientInfoStop2: string;
-export const cpdColorGradientInfoStop3: string;
-export const cpdColorGradientInfoStop4: string;
-export const cpdColorGradientInfoStop5: string;
-export const cpdColorGradientInfoStop6: string;
 export const cpdColorGradientInfoLinear: string;
 export const cpdColorGradientCriticalStop1: string;
 export const cpdColorGradientCriticalStop2: string;
-export const cpdColorGradientCriticalStop3: string;
-export const cpdColorGradientCriticalStop4: string;
-export const cpdColorGradientCriticalStop5: string;
-export const cpdColorGradientCriticalStop6: string;
 export const cpdColorGradientCriticalLinear: string;
 export const cpdColorGradientActionStop1: string;
 export const cpdColorGradientActionStop2: string;

package/assets/web/js/cpdDark.js

@@ -301,6 +301,7 @@ export const cpdIconPresenceStrikethrough8X8 =
   "icons/presence-strikethrough-8x8.svg";
 export const cpdIconError = "icons/error.svg";
 export const cpdIconDialPad = "icons/dial-pad.svg";
+export const cpdIconReOrder = "icons/re-order.svg";
 export const cpdIconSpace = "icons/space.svg";
 export const cpdIconSpaceSolid = "icons/space-solid.svg";
 export const cpdIconGuest = "icons/guest.svg";
@@ -327,6 +328,7 @@ export const cpdIconVoiceCallOutgoingSolid =
 export const cpdIconStopSolid = "icons/stop-solid.svg";
 export const cpdIconStop = "icons/stop.svg";
 export const cpdIconTheme = "icons/theme.svg";
+export const cpdIconSection = "icons/section.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#14171b";
 export const cpdColorGray200 = "#181a1f";
@@ -724,22 +726,14 @@ export const cpdColorGradientSubtleStop5 = "hsl(144, 100%, 6%, 1)";
 export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
 export const cpdColorGradientSubtleLinear =
   "linear-gradient(180deg, hsl(160, 100%, 12%, 1) 0%, hsl(155, 100%, 9%, 1) 20%, hsl(151, 100%, 7%, 1) 40%, hsl(147, 100%, 6%, 1) 60%, hsl(144, 100%, 6%, 1) 80%, rgba(0,0,0,0) 100%)";
-export const cpdColorGradientInfoStop1 = "hsla(221, 100%, 37%, 0.63)";
-export const cpdColorGradientInfoStop2 = "hsl(224, 100%, 22%, 1)";
-export const cpdColorGradientInfoStop3 = "hsl(229, 100%, 20%, 1)";
-export const cpdColorGradientInfoStop4 = "hsl(234, 100%, 18%, 1)";
-export const cpdColorGradientInfoStop5 = "hsl(237, 100%, 18%, 1)";
-export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
+export const cpdColorGradientInfoStop1 = "#00095d";
+export const cpdColorGradientInfoStop2 = "#101317";
 export const cpdColorGradientInfoLinear =
-  "linear-gradient(180deg, hsla(221, 100%, 37%, 0.63) 0%, hsl(224, 100%, 22%, 1) 20%, hsl(229, 100%, 20%, 1) 40%, hsl(234, 100%, 18%, 1) 60%, hsl(237, 100%, 18%, 1) 80%, rgba(0,0,0,0) 100%)";
-export const cpdColorGradientCriticalStop1 = "hsl(0, 100%, 22%, 1)";
-export const cpdColorGradientCriticalStop2 = "hsl(0, 100%, 18%, 1)";
-export const cpdColorGradientCriticalStop3 = "hsl(0, 100%, 14%, 1)";
-export const cpdColorGradientCriticalStop4 = "hsl(0, 100%, 12%, 1)";
-export const cpdColorGradientCriticalStop5 = "hsl(0, 100%, 11%, 1)";
-export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
+  "linear-gradient(180deg, #00095d 0%, #101317 100%)";
+export const cpdColorGradientCriticalStop1 = "#3e0000";
+export const cpdColorGradientCriticalStop2 = "#101317";
 export const cpdColorGradientCriticalLinear =
-  "linear-gradient(180deg, hsl(0, 100%, 22%, 1) 0%, hsl(0, 100%, 18%, 1) 20%, hsl(0, 100%, 14%, 1) 40%, hsl(0, 100%, 12%, 1) 60%, hsl(0, 100%, 11%, 1) 80%, rgba(0,0,0,0) 100%)";
+  "linear-gradient(180deg, #3e0000 0%, #101317 100%)";
 export const cpdColorGradientActionStop1 = "#1fc090";
 export const cpdColorGradientActionStop2 = "#129a78";
 export const cpdColorGradientActionStop3 = "#005a43";

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

@@ -276,6 +276,7 @@ export const cpdIconPresenceOutline8X8: string;
 export const cpdIconPresenceStrikethrough8X8: string;
 export const cpdIconError: string;
 export const cpdIconDialPad: string;
+export const cpdIconReOrder: string;
 export const cpdIconSpace: string;
 export const cpdIconSpaceSolid: string;
 export const cpdIconGuest: string;
@@ -299,6 +300,7 @@ export const cpdIconVoiceCallOutgoingSolid: string;
 export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
+export const cpdIconSection: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -697,17 +699,9 @@ export const cpdColorGradientSubtleStop6: string;
 export const cpdColorGradientSubtleLinear: string;
 export const cpdColorGradientInfoStop1: string;
 export const cpdColorGradientInfoStop2: string;
-export const cpdColorGradientInfoStop3: string;
-export const cpdColorGradientInfoStop4: string;
-export const cpdColorGradientInfoStop5: string;
-export const cpdColorGradientInfoStop6: string;
 export const cpdColorGradientInfoLinear: string;
 export const cpdColorGradientCriticalStop1: string;
 export const cpdColorGradientCriticalStop2: string;
-export const cpdColorGradientCriticalStop3: string;
-export const cpdColorGradientCriticalStop4: string;
-export const cpdColorGradientCriticalStop5: string;
-export const cpdColorGradientCriticalStop6: string;
 export const cpdColorGradientCriticalLinear: string;
 export const cpdColorGradientActionStop1: string;
 export const cpdColorGradientActionStop2: string;

package/assets/web/js/cpdDarkHc.js

@@ -301,6 +301,7 @@ export const cpdIconPresenceStrikethrough8X8 =
   "icons/presence-strikethrough-8x8.svg";
 export const cpdIconError = "icons/error.svg";
 export const cpdIconDialPad = "icons/dial-pad.svg";
+export const cpdIconReOrder = "icons/re-order.svg";
 export const cpdIconSpace = "icons/space.svg";
 export const cpdIconSpaceSolid = "icons/space-solid.svg";
 export const cpdIconGuest = "icons/guest.svg";
@@ -327,6 +328,7 @@ export const cpdIconVoiceCallOutgoingSolid =
 export const cpdIconStopSolid = "icons/stop-solid.svg";
 export const cpdIconStop = "icons/stop.svg";
 export const cpdIconTheme = "icons/theme.svg";
+export const cpdIconSection = "icons/section.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#181a1f";
 export const cpdColorGray200 = "#1d1f24";
@@ -724,22 +726,14 @@ export const cpdColorGradientSubtleStop5 = "hsl(147, 100%, 6%, 1)";
 export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
 export const cpdColorGradientSubtleLinear =
   "linear-gradient(180deg, hsl(162, 100%, 14%, 1) 0%, hsl(158, 100%, 11%, 1) 20%, hsl(155, 100%, 9%, 1) 40%, hsl(151, 100%, 7%, 1) 60%, hsl(147, 100%, 6%, 1) 80%, rgba(0,0,0,0) 100%)";
-export const cpdColorGradientInfoStop1 = "hsla(219, 99%, 50%, 0.53)";
-export const cpdColorGradientInfoStop2 = "hsla(222, 100%, 28%, 0.82)";
-export const cpdColorGradientInfoStop3 = "hsl(224, 100%, 22%, 1)";
-export const cpdColorGradientInfoStop4 = "hsl(229, 100%, 20%, 1)";
-export const cpdColorGradientInfoStop5 = "hsl(234, 100%, 18%, 1)";
-export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
+export const cpdColorGradientInfoStop1 = "#001264";
+export const cpdColorGradientInfoStop2 = "#101317";
 export const cpdColorGradientInfoLinear =
-  "linear-gradient(180deg, hsla(219, 99%, 50%, 0.53) 0%, hsla(222, 100%, 28%, 0.82) 20%, hsl(224, 100%, 22%, 1) 40%, hsl(229, 100%, 20%, 1) 60%, hsl(234, 100%, 18%, 1) 80%, rgba(0,0,0,0) 100%)";
-export const cpdColorGradientCriticalStop1 = "hsl(356, 100%, 26%, 1)";
-export const cpdColorGradientCriticalStop2 = "hsl(0, 100%, 20%, 1)";
-export const cpdColorGradientCriticalStop3 = "hsl(0, 100%, 18%, 1)";
-export const cpdColorGradientCriticalStop4 = "hsl(0, 100%, 14%, 1)";
-export const cpdColorGradientCriticalStop5 = "hsl(0, 100%, 12%, 1)";
-export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
+  "linear-gradient(180deg, #001264 0%, #101317 100%)";
+export const cpdColorGradientCriticalStop1 = "#470000";
+export const cpdColorGradientCriticalStop2 = "#101317";
 export const cpdColorGradientCriticalLinear =
-  "linear-gradient(180deg, hsl(356, 100%, 26%, 1) 0%, hsl(0, 100%, 20%, 1) 20%, hsl(0, 100%, 18%, 1) 40%, hsl(0, 100%, 14%, 1) 60%, hsl(0, 100%, 12%, 1) 80%, rgba(0,0,0,0) 100%)";
+  "linear-gradient(180deg, #470000 0%, #101317 100%)";
 export const cpdColorGradientActionStop1 = "#8fddbc";
 export const cpdColorGradientActionStop2 = "#37c998";
 export const cpdColorGradientActionStop3 = "#00745c";

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

@@ -276,6 +276,7 @@ export const cpdIconPresenceOutline8X8: string;
 export const cpdIconPresenceStrikethrough8X8: string;
 export const cpdIconError: string;
 export const cpdIconDialPad: string;
+export const cpdIconReOrder: string;
 export const cpdIconSpace: string;
 export const cpdIconSpaceSolid: string;
 export const cpdIconGuest: string;
@@ -299,6 +300,7 @@ export const cpdIconVoiceCallOutgoingSolid: string;
 export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
+export const cpdIconSection: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -697,17 +699,9 @@ export const cpdColorGradientSubtleStop6: string;
 export const cpdColorGradientSubtleLinear: string;
 export const cpdColorGradientInfoStop1: string;
 export const cpdColorGradientInfoStop2: string;
-export const cpdColorGradientInfoStop3: string;
-export const cpdColorGradientInfoStop4: string;
-export const cpdColorGradientInfoStop5: string;
-export const cpdColorGradientInfoStop6: string;
 export const cpdColorGradientInfoLinear: string;
 export const cpdColorGradientCriticalStop1: string;
 export const cpdColorGradientCriticalStop2: string;
-export const cpdColorGradientCriticalStop3: string;
-export const cpdColorGradientCriticalStop4: string;
-export const cpdColorGradientCriticalStop5: string;
-export const cpdColorGradientCriticalStop6: string;
 export const cpdColorGradientCriticalLinear: string;
 export const cpdColorGradientActionStop1: string;
 export const cpdColorGradientActionStop2: string;

package/assets/web/js/cpdLight.js

@@ -301,6 +301,7 @@ export const cpdIconPresenceStrikethrough8X8 =
   "icons/presence-strikethrough-8x8.svg";
 export const cpdIconError = "icons/error.svg";
 export const cpdIconDialPad = "icons/dial-pad.svg";
+export const cpdIconReOrder = "icons/re-order.svg";
 export const cpdIconSpace = "icons/space.svg";
 export const cpdIconSpaceSolid = "icons/space-solid.svg";
 export const cpdIconGuest = "icons/guest.svg";
@@ -327,6 +328,7 @@ export const cpdIconVoiceCallOutgoingSolid =
 export const cpdIconStopSolid = "icons/stop-solid.svg";
 export const cpdIconStop = "icons/stop.svg";
 export const cpdIconTheme = "icons/theme.svg";
+export const cpdIconSection = "icons/section.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#fbfcfd";
 export const cpdColorGray200 = "#f7f9fa";
@@ -724,22 +726,14 @@ export const cpdColorGradientSubtleStop5 = "hsla(156, 79%, 41%, 0.03)";
 export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
 export const cpdColorGradientSubtleLinear =
   "linear-gradient(180deg, hsla(154, 96%, 37%, 0.41) 0%, hsla(151, 93%, 37%, 0.23) 20%, hsla(150, 100%, 36%, 0.11) 40%, hsla(150, 79%, 41%, 0.06) 60%, hsla(156, 79%, 41%, 0.03) 80%, rgba(0,0,0,0) 100%)";
-export const cpdColorGradientInfoStop1 = "hsla(215, 93%, 50%, 0.28)";
-export const cpdColorGradientInfoStop2 = "hsla(216, 95%, 51%, 0.16)";
-export const cpdColorGradientInfoStop3 = "hsla(215, 100%, 52%, 0.09)";
-export const cpdColorGradientInfoStop4 = "hsla(218, 100%, 57%, 0.05)";
-export const cpdColorGradientInfoStop5 = "hsla(210, 100%, 61%, 0.03)";
-export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
+export const cpdColorGradientInfoStop1 = "#f4f8ff";
+export const cpdColorGradientInfoStop2 = "#ffffff";
 export const cpdColorGradientInfoLinear =
-  "linear-gradient(180deg, hsla(215, 93%, 50%, 0.28) 0%, hsla(216, 95%, 51%, 0.16) 20%, hsla(215, 100%, 52%, 0.09) 40%, hsla(218, 100%, 57%, 0.05) 60%, hsla(210, 100%, 61%, 0.03) 80%, rgba(0,0,0,0) 100%)";
-export const cpdColorGradientCriticalStop1 = "hsla(8, 100%, 51%, 0.27)";
-export const cpdColorGradientCriticalStop2 = "hsla(8, 100%, 52%, 0.15)";
-export const cpdColorGradientCriticalStop3 = "hsla(9, 100%, 54%, 0.08)";
-export const cpdColorGradientCriticalStop4 = "hsla(7, 100%, 56%, 0.04)";
-export const cpdColorGradientCriticalStop5 = "hsla(10, 100%, 61%, 0.03)";
-export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
+  "linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%)";
+export const cpdColorGradientCriticalStop1 = "#fff7f6";
+export const cpdColorGradientCriticalStop2 = "#ffffff";
 export const cpdColorGradientCriticalLinear =
-  "linear-gradient(180deg, hsla(8, 100%, 51%, 0.27) 0%, hsla(8, 100%, 52%, 0.15) 20%, hsla(9, 100%, 54%, 0.08) 40%, hsla(7, 100%, 56%, 0.04) 60%, hsla(10, 100%, 61%, 0.03) 80%, rgba(0,0,0,0) 100%)";
+  "linear-gradient(180deg, #fff7f6 0%, #ffffff 100%)";
 export const cpdColorGradientActionStop1 = "#98e1c1";
 export const cpdColorGradientActionStop2 = "#0bc491";
 export const cpdColorGradientActionStop3 = "#007a61";

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

@@ -276,6 +276,7 @@ export const cpdIconPresenceOutline8X8: string;
 export const cpdIconPresenceStrikethrough8X8: string;
 export const cpdIconError: string;
 export const cpdIconDialPad: string;
+export const cpdIconReOrder: string;
 export const cpdIconSpace: string;
 export const cpdIconSpaceSolid: string;
 export const cpdIconGuest: string;
@@ -299,6 +300,7 @@ export const cpdIconVoiceCallOutgoingSolid: string;
 export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
+export const cpdIconSection: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -697,17 +699,9 @@ export const cpdColorGradientSubtleStop6: string;
 export const cpdColorGradientSubtleLinear: string;
 export const cpdColorGradientInfoStop1: string;
 export const cpdColorGradientInfoStop2: string;
-export const cpdColorGradientInfoStop3: string;
-export const cpdColorGradientInfoStop4: string;
-export const cpdColorGradientInfoStop5: string;
-export const cpdColorGradientInfoStop6: string;
 export const cpdColorGradientInfoLinear: string;
 export const cpdColorGradientCriticalStop1: string;
 export const cpdColorGradientCriticalStop2: string;
-export const cpdColorGradientCriticalStop3: string;
-export const cpdColorGradientCriticalStop4: string;
-export const cpdColorGradientCriticalStop5: string;
-export const cpdColorGradientCriticalStop6: string;
 export const cpdColorGradientCriticalLinear: string;
 export const cpdColorGradientActionStop1: string;
 export const cpdColorGradientActionStop2: string;

package/assets/web/js/cpdLightHc.js

@@ -301,6 +301,7 @@ export const cpdIconPresenceStrikethrough8X8 =
   "icons/presence-strikethrough-8x8.svg";
 export const cpdIconError = "icons/error.svg";
 export const cpdIconDialPad = "icons/dial-pad.svg";
+export const cpdIconReOrder = "icons/re-order.svg";
 export const cpdIconSpace = "icons/space.svg";
 export const cpdIconSpaceSolid = "icons/space-solid.svg";
 export const cpdIconGuest = "icons/guest.svg";
@@ -327,6 +328,7 @@ export const cpdIconVoiceCallOutgoingSolid =
 export const cpdIconStopSolid = "icons/stop-solid.svg";
 export const cpdIconStop = "icons/stop.svg";
 export const cpdIconTheme = "icons/theme.svg";
+export const cpdIconSection = "icons/section.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#f7f9fa";
 export const cpdColorGray200 = "#f0f2f5";
@@ -724,22 +726,14 @@ export const cpdColorGradientSubtleStop5 = "hsla(150, 79%, 41%, 0.06)";
 export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
 export const cpdColorGradientSubtleLinear =
   "linear-gradient(180deg, hsla(156, 99%, 36%, 0.56) 0%, hsla(153, 95%, 37%, 0.32) 20%, hsla(151, 93%, 37%, 0.23) 40%, hsla(150, 100%, 36%, 0.11) 60%, hsla(150, 79%, 41%, 0.06) 80%, rgba(0,0,0,0) 100%)";
-export const cpdColorGradientInfoStop1 = "hsla(216, 95%, 48%, 0.37)";
-export const cpdColorGradientInfoStop2 = "hsla(216, 96%, 49%, 0.22)";
-export const cpdColorGradientInfoStop3 = "hsla(216, 95%, 51%, 0.16)";
-export const cpdColorGradientInfoStop4 = "hsla(215, 100%, 52%, 0.09)";
-export const cpdColorGradientInfoStop5 = "hsla(218, 100%, 57%, 0.05)";
-export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
+export const cpdColorGradientInfoStop1 = "#e9f2ff";
+export const cpdColorGradientInfoStop2 = "#ffffff";
 export const cpdColorGradientInfoLinear =
-  "linear-gradient(180deg, hsla(216, 95%, 48%, 0.37) 0%, hsla(216, 96%, 49%, 0.22) 20%, hsla(216, 95%, 51%, 0.16) 40%, hsla(215, 100%, 52%, 0.09) 60%, hsla(218, 100%, 57%, 0.05) 80%, rgba(0,0,0,0) 100%)";
-export const cpdColorGradientCriticalStop1 = "hsla(7, 100%, 51%, 0.36)";
-export const cpdColorGradientCriticalStop2 = "hsla(8, 100%, 51%, 0.21)";
-export const cpdColorGradientCriticalStop3 = "hsla(8, 100%, 52%, 0.15)";
-export const cpdColorGradientCriticalStop4 = "hsla(9, 100%, 54%, 0.08)";
-export const cpdColorGradientCriticalStop5 = "hsla(7, 100%, 56%, 0.04)";
-export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
+  "linear-gradient(180deg, #e9f2ff 0%, #ffffff 100%)";
+export const cpdColorGradientCriticalStop1 = "#ffefec";
+export const cpdColorGradientCriticalStop2 = "#ffffff";
 export const cpdColorGradientCriticalLinear =
-  "linear-gradient(180deg, hsla(7, 100%, 51%, 0.36) 0%, hsla(8, 100%, 51%, 0.21) 20%, hsla(8, 100%, 52%, 0.15) 40%, hsla(9, 100%, 54%, 0.08) 60%, hsla(7, 100%, 56%, 0.04) 80%, rgba(0,0,0,0) 100%)";
+  "linear-gradient(180deg, #ffefec 0%, #ffffff 100%)";
 export const cpdColorGradientActionStop1 = "#71d7ae";
 export const cpdColorGradientActionStop2 = "#00a27c";
 export const cpdColorGradientActionStop3 = "#00553d";

package/icons/$icons.json

@@ -796,6 +796,10 @@
       "value": "icons/dial-pad.svg",
       "type": "icon"
     },
+    "re-order": {
+      "value": "icons/re-order.svg",
+      "type": "icon"
+    },
     "space": {
       "value": "icons/space.svg",
       "type": "icon"
@@ -887,6 +891,10 @@
     "theme": {
       "value": "icons/theme.svg",
       "type": "icon"
+    },
+    "section": {
+      "value": "icons/section.svg",
+      "type": "icon"
     }
   }
 }

package/icons/re-order.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M9 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"/></svg>

package/icons/section.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M16 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 8q0 .424.287.713Q15.576 9 16 9t.712-.287A.97.97 0 0 0 17 8a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 7m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 12q0 .424.287.713.288.287.713.287.424 0 .712-.287A.97.97 0 0 0 17 12a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 11m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 16q0 .424.287.712.288.288.713.288.424 0 .712-.288A.97.97 0 0 0 17 16a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 15m-4-8H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 8q0 .424.287.713Q7.576 9 8 9h4q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 12q0 .424.287.713Q7.576 13 8 13h4q.424 0 .713-.287A.97.97 0 0 0 13 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 16q0 .424.287.712Q7.576 17 8 17h4q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15m7-12q.824 0 1.413.587Q21 4.176 21 5v14q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3zm0 2H5v14h14z"/></svg>

package/icons/voice-call.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill-rule="evenodd" d="M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.644 1.792-1.792-.483-3.519-3.123-.034-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.4 11.4 0 0 0 3.206 3.54q.457.33.948.614l.762-.761a2 2 0 0 1 .774-.486c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.361.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062" clip-rule="evenodd"/></g><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.645 1.792-1.791-.483-3.52-3.123-.033-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.3 11.3 0 0 0 1.806 2.348 11.4 11.4 0 0 0 2.348 1.806l.762-.762a2 2 0 0 1 .774-.485c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.36.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062" clip-rule="evenodd"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-design-tokens",
-  "version": "6.9.0",
+  "version": "6.10.1",
   "description": "Compound design tokens",
   "sideEffects": false,
   "scripts": {
@@ -64,6 +64,7 @@
     "@capsizecss/metrics": "^3.3.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
     "@tokens-studio/sd-transforms": "^2.0.0",
     "@types/babel__core": "^7.20.5",
     "@types/fs-extra": "^11.0.4",