@pexip/components 17.1.0 → 18.0.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 18.0.0
+
+### Major Changes
+
+- 2bfd9e1: Adds esm entry points.
+- f8913c6: Draggable component stops `pointerdown` propagation.
+- 75c8fd5: CollapsableContainer component must take isOpen and onToggle props
+  and control the isOpen state outside the component
+
+### Minor Changes
+
+- 1b214a0: Add new icons.
+- a043359: Adds support for `itemClassName` to `AriaMenu` which is passed to
+  each individual item.
+- 683f9dc: Adds Columns icon ListLink component gets optional iconAlignedStart
+  prop, Icon appears to the left of link text if true Menu component uses
+  ListLink and a menu item can define iconAlignedStart. New components added:
+  CollpasableContainer, ThreeColumnSelector
+- 045340e: Allow `summary` elements for `InteractiveElement`.
+- 3555d9d: Adds `build:sourcemap` script.
+- 8bdba01: Adds `withScrollbars` prop to `Panel`.
+- df83605: Introduce new color for the `primary` `ProgressBar` variant
+- 7aefc30: Add Header and Children ClassNames to Box Component
+- ed53b05: Upgrade Typescript
+- 9651b1e: - Adds `BulletPoint` icon.
+  - Introduces `isValidIconName` typeguard.
+- 95aebc3: Migrate to Vite.js V6
+- 0106183: Support RTL languages
+- 8fdea2f: Adds support for `BadgeCounter` children wrapper classname.
+
+### Patch Changes
+
+- 94f9086: Allow FullSizeWindow to have background=white
+- 1abfe03: Biome linting
+- 0b3a726: Make `BoxHeader` have box sizing `border-box`.
+- 367bcd6: Fixes fetch icon script, fixes white icons.
+- 51703af: Adjust focus contrast for the new theme and keep the fallbacks in the
+  legacy theme
+- e76a15e: Migrate to biome linter
+- Updated dependencies [2bfd9e1]
+- Updated dependencies [4fe77de]
+- Updated dependencies [f8913c6]
+- Updated dependencies [2bbff64]
+- Updated dependencies [db3a370]
+- Updated dependencies [4ea0492]
+- Updated dependencies [3555d9d]
+- Updated dependencies [1601985]
+- Updated dependencies [3cb5aee]
+- Updated dependencies [fa06b8b]
+- Updated dependencies [84956b8]
+- Updated dependencies [ed53b05]
+- Updated dependencies [941363c]
+- Updated dependencies [d681fd3]
+- Updated dependencies [e76a15e]
+  - @pexip/utils@17.0.0
+  - @pexip/hooks@20.0.0
+  - @pexip/signal@16.8.0
+
 ## 17.1.0
 
 ### Minor Changes

package/design-tokens/build-scripts/breakpoints.mjs

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 
 import {Content} from './content.mjs';
 

package/design-tokens/build-scripts/colors.mjs

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 
 import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
 import {FRAME_ID, RESOURCES_IDS} from './constants.mjs';
@@ -57,10 +57,7 @@ export async function getColors() {
                 return c;
             }, {});
 
-        return {
-            ...acc,
-            ...newColors,
-        };
+        return Object.assign(acc, newColors);
     }, {});
 }
 

package/design-tokens/build-scripts/download-icons.mjs

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 import {pascalCase} from 'change-case';
 
 import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
@@ -76,16 +76,17 @@ export async function downloadIcons() {
     const frames = iconsFrame.document.children;
 
     // frames now contain multiple nested icons
-    const allIcons = frames.reduce(
-        (icons, currentFrame) => [
-            ...icons,
-            ...currentFrame.children.map(child => ({
-                ...child,
-                parentFrameName: currentFrame.name,
-            })),
-        ],
-        [],
-    );
+    const allIcons = frames
+        .reduce((icons, currentFrame) => {
+            icons.push(
+                currentFrame.children.map(child => ({
+                    ...child,
+                    parentFrameName: currentFrame.name,
+                })),
+            );
+            return icons;
+        }, [])
+        .flat();
 
     console.log(
         `preparing to fetch ${allIcons.length} icons from ${frames.length} frames`,

package/design-tokens/build-scripts/fonts.mjs

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 import {camelCase, paramCase, pascalCase} from 'change-case';
 
 import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
@@ -8,12 +8,12 @@ import {Content} from './content.mjs';
 
 const getFrameChildren = parent => {
     let children = [];
-    parent.children.forEach(child => {
+    for (const child of parent.children) {
         children.push(child);
         if (child.children) {
             children = [...children, ...getFrameChildren(child)];
         }
-    });
+    }
     return children;
 };
 
@@ -48,10 +48,10 @@ export async function getFonts(recourceIds) {
 
 function pxToRem(bodySizePx, relativeSizeInPx) {
     const relativeSize = Number(relativeSizeInPx);
-    if (isNaN(relativeSize)) {
+    if (Number.isNaN(relativeSize)) {
         throw Error('Cannot get relative size, returned NaN.');
     }
-    const remSize = parseFloat(relativeSize) / bodySizePx;
+    const remSize = Number.parseFloat(relativeSize) / bodySizePx;
     return Math.round(remSize * 100) / 100;
 }
 
@@ -71,17 +71,17 @@ export function syncFonts(fonts, destination, suffix) {
     })[1].fontSize;
 
     content.push(
-        ['$base-size', suffix].filter(s => !!s).join('-') + `: ${bodySize}px;`,
+        `${['$base-size', suffix].filter(s => !!s).join('-')}: ${bodySize}px;`,
     );
 
-    content.push(0, ['$font-size', suffix].filter(s => !!s).join('-') + ': (');
+    content.push(0, `${['$font-size', suffix].filter(s => !!s).join('-')}: (`);
     content.push(
         1,
-        ['$font-line-height', suffix].filter(s => !!s).join('-') + ': (',
+        `${['$font-line-height', suffix].filter(s => !!s).join('-')}: (`,
     );
     content.push(
         2,
-        ['$font-weight', suffix].filter(s => !!s).join('-') + ': (',
+        `${['$font-weight', suffix].filter(s => !!s).join('-')}: (`,
     );
 
     for (const [key, {fontSize, lineHeight, fontWeight}] of fontsObject) {

package/design-tokens/build-scripts/generate-icons.mjs

@@ -1,5 +1,5 @@
-import fs from 'fs/promises';
-import path from 'path';
+import fs from 'node:fs/promises';
+import path from 'node:path';
 
 import {optimize} from './svgo.mjs';
 import {Content} from './content.mjs';
@@ -36,9 +36,11 @@ async function generateSvg(icon) {
 async function generate(meta) {
     const collection = meta.reduce((all, icon) => {
         const [key, size] = icon.pascalName.split('_');
-        return key in all
-            ? {...all, [key]: {...all[key], [`size${size}`]: icon}}
-            : {...all, [key]: {[`size${size}`]: icon}};
+        all[key] =
+            key in all
+                ? {...all[key], [`size${size}`]: icon}
+                : {[`size${size}`]: icon};
+        return all;
     }, {});
     const sortedCollection = Object.entries(collection).sort((a, b) =>
         a[0].localeCompare(b[0]),

package/design-tokens/build-scripts/index.mjs

@@ -14,7 +14,7 @@ async function buildTokens() {
         process.argv[2] ?? 'colors,icons,fonts,breakpoints,variables'
     ).split(',');
     try {
-        console.log('Starting...');
+        console.log(`Will fetch "${types.join('", "')}"...`);
         if (types.includes('colors')) {
             console.log('Fetching colors...');
             const colors = await getColors();

package/design-tokens/build-scripts/svgo.mjs

@@ -1,44 +1,7 @@
 import {optimize as svgoOptimize} from 'svgo';
 
-const CURRENT_COLOR = 'currentColor';
 const TOKEN_KEY = 'data-token-name';
 
-function getIsElemWithColor(item) {
-    return (
-        !item.attributes['stroke'] &&
-        !item.attributes['fill'] &&
-        !item.attributes['color']
-    );
-}
-function getIsColorAttr(name) {
-    return name === 'stroke' || name === 'fill' || name === 'color';
-}
-function getIsColorAttrNone(value) {
-    return value === 'none';
-}
-function defaultToCurrentColor(item) {
-    const overrideColor = item => {
-        if (item.type !== 'element') return;
-        if (getIsElemWithColor(item)) return;
-
-        Object.entries(item.attributes).forEach(([name, value]) => {
-            const isColorAttr = getIsColorAttr(name);
-            if (!isColorAttr || getIsColorAttrNone(value)) return;
-
-            item.attributes[name] = CURRENT_COLOR;
-        });
-    };
-
-    const processItem = item => {
-        if (item.children.length === 0) {
-            overrideColor(item);
-        } else {
-            item.children.forEach(child => processItem(child));
-        }
-    };
-    processItem(item);
-}
-
 function addTokenId(item, ...rest) {
     const svg = item.children[0];
     if (svg.name !== 'svg') return;
@@ -53,11 +16,10 @@ const config = {
             name: 'preset-default',
         },
         {
-            type: 'perItem',
-            name: 'defaultToCurrentColor',
-            description:
-                'Alter all the colors to be currentColor. Useful for monochrome icons mostly.',
-            fn: defaultToCurrentColor,
+            name: 'convertColors',
+            params: {
+                currentColor: true,
+            },
         },
         {
             type: 'perItem',

package/design-tokens/build-scripts/variables.mjs

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 import {camelCase, paramCase} from 'change-case';
 
 import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
@@ -11,7 +11,7 @@ const MAPPED_DEFAULTS = 'Mapped';
 
 const getHexCode = num => {
     const hex = Math.round(num * 255).toString(16);
-    return hex.length === 1 ? '0' + hex : hex;
+    return hex.length === 1 ? `0${hex}` : hex;
 };
 
 const getColor = ({r, g, b, a}) =>
@@ -66,7 +66,7 @@ export const getVariables = async () => {
             const modeName = camelCase(mode.name);
             variables[modeName] = {};
 
-            variableIds.forEach(variableId => {
+            for (const variableId of variableIds) {
                 const variable = res.meta.variables[variableId];
                 const valueRef =
                     res.meta.variables[variableId].valuesByMode[mode.modeId];
@@ -76,7 +76,7 @@ export const getVariables = async () => {
                         : getValue(valueRef, variable.resolvedType);
 
                 variables[modeName][variable.name] = value;
-            });
+            }
         }
     }
 
@@ -89,7 +89,7 @@ const getFileHeader = ext =>
 const exportTsVariables = async variables => {
     const content = new Content(getFileHeader('ts'));
     content.push('export const variables = ');
-    content.push(JSON.stringify(variables, null, 2) + ';');
+    content.push(`${JSON.stringify(variables, null, 2)};`);
     fs.writeFileSync(
         path.resolve('..', 'generated', 'variables.ts'),
         await content.print('typescript'),

package/design-tokens/flex.scss

@@ -16,14 +16,14 @@
     }
 
     &-no-wrap {
-        flex-wrap: no-wrap;
+        flex-wrap: nowrap !important;
     }
 
     &-wrap {
-        flex-wrap: wrap;
+        flex-wrap: wrap !important;
 
         &-reverse {
-            flex-wrap: wrap-reverse;
+            flex-wrap: wrap-reverse !important;
         }
     }
 

package/design-tokens/generated/Icons.ts

@@ -7,6 +7,8 @@ import IconAddSomeone_24 from './icons/add-someone-24.svg';
 import IconAdjust_16 from './icons/adjust-16.svg';
 import IconAdjust_24 from './icons/adjust-24.svg';
 import IconAdjust_32 from './icons/adjust-32.svg';
+import IconAiAssistant_16 from './icons/ai_assistant-16.svg';
+import IconAiAssistant_24 from './icons/ai_assistant-24.svg';
 import IconAlert_16 from './icons/alert-16.svg';
 import IconAlert_24 from './icons/alert-24.svg';
 import IconAnalyticsChart_16 from './icons/analytics-chart-16.svg';
@@ -50,6 +52,8 @@ import IconBluetooth_16 from './icons/bluetooth-16.svg';
 import IconBluetooth_24 from './icons/bluetooth-24.svg';
 import IconBreakoutRooms_16 from './icons/breakout-rooms-16.svg';
 import IconBreakoutRooms_24 from './icons/breakout-rooms-24.svg';
+import IconBulletPoint_16 from './icons/bullet-point-16.svg';
+import IconBulletPoint_24 from './icons/bullet-point-24.svg';
 import IconCalendar_16 from './icons/calendar-16.svg';
 import IconCalendar_24 from './icons/calendar-24.svg';
 import IconChat_16 from './icons/chat-16.svg';
@@ -72,10 +76,15 @@ import IconClock_16 from './icons/clock-16.svg';
 import IconClock_24 from './icons/clock-24.svg';
 import IconClose_16 from './icons/close-16.svg';
 import IconClose_24 from './icons/close-24.svg';
+import IconColumns_16 from './icons/columns-16.svg';
+import IconColumns_24 from './icons/columns-24.svg';
+import IconColumns_32 from './icons/columns-32.svg';
 import IconConnectionIndicatorHigh_24 from './icons/connection-indicator-high-24.svg';
 import IconConnectionIndicatorLow_24 from './icons/connection-indicator-low-24.svg';
 import IconConnectionIndicatorMedium_24 from './icons/connection-indicator-medium-24.svg';
 import IconConnectionIndicatorVeryLow_24 from './icons/connection-indicator-very-low-24.svg';
+import IconCopy_16 from './icons/copy-16.svg';
+import IconCopy_24 from './icons/copy-24.svg';
 import IconDoubleChevronDown_16 from './icons/double-chevron-down-16.svg';
 import IconDoubleChevronDown_24 from './icons/double-chevron-down-24.svg';
 import IconDoubleChevronLeft_16 from './icons/double-chevron-left-16.svg';
@@ -141,6 +150,8 @@ import IconLiveCaption_16 from './icons/live-caption-16.svg';
 import IconLiveCaption_24 from './icons/live-caption-24.svg';
 import IconLiveStream_16 from './icons/live-stream-16.svg';
 import IconLiveStream_24 from './icons/live-stream-24.svg';
+import IconLiveStreamCloud_16 from './icons/live-stream-cloud-16.svg';
+import IconLiveStreamCloud_24 from './icons/live-stream-cloud-24.svg';
 import IconLocation_16 from './icons/location-16.svg';
 import IconLocation_24 from './icons/location-24.svg';
 import IconLock_16 from './icons/lock-16.svg';
@@ -179,6 +190,7 @@ import IconPasswordHide_24 from './icons/password-hide-24.svg';
 import IconPasswordShow_24 from './icons/password-show-24.svg';
 import IconPause_16 from './icons/pause-16.svg';
 import IconPause_24 from './icons/pause-24.svg';
+import IconPexip_24 from './icons/pexip-24.svg';
 import IconPexipLogo_24 from './icons/pexip-logo-24.svg';
 import IconPhone_16 from './icons/phone-16.svg';
 import IconPhone_24 from './icons/phone-24.svg';
@@ -270,6 +282,7 @@ export interface IconCollection {
     IconAdd: IconSource;
     IconAddSomeone: IconSource;
     IconAdjust: IconSource;
+    IconAiAssistant: IconSource;
     IconAlert: IconSource;
     IconAnalyticsChart: IconSource;
     IconAnalyticsProgress: IconSource;
@@ -291,6 +304,7 @@ export interface IconCollection {
     IconBlock: IconSource;
     IconBluetooth: IconSource;
     IconBreakoutRooms: IconSource;
+    IconBulletPoint: IconSource;
     IconCalendar: IconSource;
     IconChat: IconSource;
     IconCheckmark: IconSource;
@@ -302,10 +316,12 @@ export interface IconCollection {
     IconChromeLogo: IconSource;
     IconClock: IconSource;
     IconClose: IconSource;
+    IconColumns: IconSource;
     IconConnectionIndicatorHigh: IconSource;
     IconConnectionIndicatorLow: IconSource;
     IconConnectionIndicatorMedium: IconSource;
     IconConnectionIndicatorVeryLow: IconSource;
+    IconCopy: IconSource;
     IconDoubleChevronDown: IconSource;
     IconDoubleChevronLeft: IconSource;
     IconDoubleChevronRight: IconSource;
@@ -337,6 +353,7 @@ export interface IconCollection {
     IconLink: IconSource;
     IconLiveCaption: IconSource;
     IconLiveStream: IconSource;
+    IconLiveStreamCloud: IconSource;
     IconLocation: IconSource;
     IconLock: IconSource;
     IconLowerhand: IconSource;
@@ -356,6 +373,7 @@ export interface IconCollection {
     IconPasswordHide: IconSource;
     IconPasswordShow: IconSource;
     IconPause: IconSource;
+    IconPexip: IconSource;
     IconPexipLogo: IconSource;
     IconPhone: IconSource;
     IconPhoneHorisontal: IconSource;
@@ -410,6 +428,11 @@ const collection: IconCollection = {
         size24: IconAdjust_24,
         size32: IconAdjust_32,
     },
+    IconAiAssistant: {
+        size16: IconAiAssistant_16,
+        size24: IconAiAssistant_24,
+        size32: IconAiAssistant_24,
+    },
     IconAlert: {
         size16: IconAlert_16,
         size24: IconAlert_24,
@@ -511,6 +534,11 @@ const collection: IconCollection = {
         size24: IconBreakoutRooms_24,
         size32: IconBreakoutRooms_24,
     },
+    IconBulletPoint: {
+        size16: IconBulletPoint_16,
+        size24: IconBulletPoint_24,
+        size32: IconBulletPoint_24,
+    },
     IconCalendar: {
         size16: IconCalendar_16,
         size24: IconCalendar_24,
@@ -562,6 +590,11 @@ const collection: IconCollection = {
         size24: IconClose_24,
         size32: IconClose_24,
     },
+    IconColumns: {
+        size16: IconColumns_16,
+        size24: IconColumns_24,
+        size32: IconColumns_32,
+    },
     IconConnectionIndicatorHigh: {
         size16: IconConnectionIndicatorHigh_24,
         size24: IconConnectionIndicatorHigh_24,
@@ -582,6 +615,7 @@ const collection: IconCollection = {
         size24: IconConnectionIndicatorVeryLow_24,
         size32: IconConnectionIndicatorVeryLow_24,
     },
+    IconCopy: {size16: IconCopy_16, size24: IconCopy_24, size32: IconCopy_24},
     IconDoubleChevronDown: {
         size16: IconDoubleChevronDown_16,
         size24: IconDoubleChevronDown_24,
@@ -709,6 +743,11 @@ const collection: IconCollection = {
         size24: IconLiveStream_24,
         size32: IconLiveStream_24,
     },
+    IconLiveStreamCloud: {
+        size16: IconLiveStreamCloud_16,
+        size24: IconLiveStreamCloud_24,
+        size32: IconLiveStreamCloud_24,
+    },
     IconLocation: {
         size16: IconLocation_16,
         size24: IconLocation_24,
@@ -792,6 +831,11 @@ const collection: IconCollection = {
         size24: IconPause_24,
         size32: IconPause_24,
     },
+    IconPexip: {
+        size16: IconPexip_24,
+        size24: IconPexip_24,
+        size32: IconPexip_24,
+    },
     IconPexipLogo: {
         size16: IconPexipLogo_24,
         size24: IconPexipLogo_24,

package/design-tokens/generated/icons/add-16.json

@@ -2,6 +2,6 @@
   "iconName": "add-16",
   "name": "16px-add",
   "pascalName": "IconAdd_16",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/488c2be8-87d8-4386-8f05-1f58e99041a9",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c4a74207-b7ea-41d3-99db-7425e93c5bc5",
   "graphic": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.5 1H3.5C2.119 1 1 2.119 1 3.5V12.5C1 13.881 2.119 15 3.5 15H12.5C13.881 15 15 13.881 15 12.5V3.5C15 2.119 13.881 1 12.5 1ZM11.536 8.75H8.75V11.536C8.75 11.95 8.414 12.286 8 12.286C7.586 12.286 7.25 11.95 7.25 11.536V8.75H4.464C4.05 8.75 3.714 8.414 3.714 8C3.714 7.586 4.05 7.25 4.464 7.25H7.25V4.464C7.25 4.05 7.586 3.714 8 3.714C8.414 3.714 8.75 4.05 8.75 4.464V7.25H11.536C11.95 7.25 12.286 7.586 12.286 8C12.286 8.414 11.95 8.75 11.536 8.75Z\" fill=\"white\"/>\n</svg>\n"
 }

package/design-tokens/generated/icons/add-24.json

@@ -2,6 +2,6 @@
   "iconName": "add-24",
   "name": "24px-add",
   "pascalName": "IconAdd_24",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d6ce58ff-1b27-439f-94b8-937a20d6bbad",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d8a63c2a-bcf3-4a85-a6d0-12ce963907ec",
   "graphic": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M18.429 2H5.571C3.599 2 2 3.599 2 5.571V18.428C2 20.401 3.599 22 5.571 22H18.428C20.401 22 22 20.401 22 18.429V5.571C22 3.599 20.401 2 18.429 2ZM17 13H13V17C13 17.552 12.552 18 12 18C11.448 18 11 17.552 11 17V13H7C6.448 13 6 12.552 6 12C6 11.448 6.448 11 7 11H11V7C11 6.448 11.448 6 12 6C12.552 6 13 6.448 13 7V11H17C17.552 11 18 11.448 18 12C18 12.552 17.552 13 17 13Z\" fill=\"white\"/>\n</svg>\n"
 }

package/design-tokens/generated/icons/add-someone-16.json

@@ -2,6 +2,6 @@
   "iconName": "add-someone-16",
   "name": "16px-add-someone",
   "pascalName": "IconAddSomeone_16",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/29fae952-84cf-474f-9388-cade85b9e3f9",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/3b9aba02-ac03-40ff-a3c2-310600482150",
   "graphic": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.9999 1.83325C13.2761 1.83325 13.4999 2.05711 13.4999 2.33325V3.49992H14.6666C14.9428 3.49992 15.1666 3.72378 15.1666 3.99992C15.1666 4.27606 14.9428 4.49992 14.6666 4.49992H13.4999V5.66659C13.4999 5.94273 13.2761 6.16659 12.9999 6.16659C12.7238 6.16659 12.4999 5.94273 12.4999 5.66659V4.49992H11.3333C11.0571 4.49992 10.8333 4.27606 10.8333 3.99992C10.8333 3.72378 11.0571 3.49992 11.3333 3.49992H12.4999V2.33325C12.4999 2.05711 12.7238 1.83325 12.9999 1.83325ZM7.33329 8.39126C8.68529 8.39126 9.78462 7.29193 9.78462 5.93926C9.78462 4.58793 8.68529 3.4886 7.33329 3.4886C5.98129 3.4886 4.88129 4.58793 4.88129 5.93926C4.88129 7.29126 5.98129 8.39126 7.33329 8.39126ZM11.3473 10.6306C10.7079 9.94659 9.5026 9.43859 7.33327 9.43859C5.14527 9.43859 3.93794 9.95526 3.3026 10.6479L3.28504 10.6671C3.1131 10.8544 2.8359 11.1565 2.71994 11.8993C2.65794 12.3013 2.9746 12.6666 3.38127 12.6666H11.2853C11.6919 12.6666 12.0093 12.3013 11.9466 11.8993C11.8279 11.142 11.5416 10.8374 11.3565 10.6405L11.3473 10.6306Z\" fill=\"white\"/>\n</svg>\n"
 }

package/design-tokens/generated/icons/adjust-32.json

@@ -2,6 +2,6 @@
   "iconName": "adjust-32",
   "name": "32px-adjust",
   "pascalName": "IconAdjust_32",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7bc2ecab-d369-4473-90f1-1a3a52ff96ea",
-  "graphic": "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.83341 5.33337C6.00499 5.33337 5.33341 6.00495 5.33341 6.83338V13.3334H4.00008C3.2637 13.3334 2.66675 13.9303 2.66675 14.6667V15C2.66675 15.7364 3.2637 16.3334 4.00008 16.3334H5.33341V25.1667C5.33341 25.9951 6.00499 26.6667 6.83341 26.6667C7.66184 26.6667 8.33341 25.9951 8.33341 25.1667V16.3334H9.33342C10.0698 16.3334 10.6667 15.7364 10.6667 15V14.6667C10.6667 13.9303 10.0698 13.3334 9.33341 13.3334H8.33341V6.83337C8.33341 6.00495 7.66184 5.33337 6.83341 5.33337ZM16.1667 5.33337C15.3383 5.33337 14.6667 6.00495 14.6667 6.83338V20H13.3334C12.597 20 12.0001 20.597 12.0001 21.3334V21.6667C12.0001 22.4031 12.597 23 13.3334 23H14.6667V25.1667C14.6667 25.9951 15.3383 26.6667 16.1667 26.6667C16.9952 26.6667 17.6667 25.9951 17.6667 25.1667V23H18.6667C19.4031 23 20.0001 22.4031 20.0001 21.6667V21.3334C20.0001 20.597 19.4031 20 18.6667 20H17.6667V6.83337C17.6667 6.00495 16.9952 5.33337 16.1667 5.33337ZM24.0001 6.83338C24.0001 6.00495 24.6717 5.33337 25.5001 5.33337C26.3285 5.33337 27.0001 6.00495 27.0001 6.83337V9.00004H27.6666C28.403 9.00004 29 9.59699 29 10.3334V10.6667C29 11.4031 28.403 12 27.6666 12H27.0001V25.1667C27.0001 25.9951 26.3285 26.6667 25.5001 26.6667C24.6717 26.6667 24.0001 25.9951 24.0001 25.1667V12H22.3333C21.5969 12 21 11.4031 21 10.6667V10.3334C21 9.59699 21.5969 9.00004 22.3333 9.00004H24.0001V6.83338Z\" fill=\"white\"/>\n</svg>\n"
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1c7d5a93-f202-492d-9988-f1b0720271de",
+  "graphic": "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.83346 5.33333C6.00503 5.33333 5.33346 6.00491 5.33346 6.83333V13.3333H4.00012C3.26374 13.3333 2.66679 13.9303 2.66679 14.6667V15C2.66679 15.7364 3.26374 16.3333 4.00012 16.3333H5.33346V25.1667C5.33346 25.9951 6.00503 26.6667 6.83346 26.6667C7.66188 26.6667 8.33346 25.9951 8.33346 25.1667V16.3333H9.33346C10.0698 16.3333 10.6668 15.7364 10.6668 15V14.6667C10.6668 13.9303 10.0698 13.3333 9.33346 13.3333H8.33346V6.83333C8.33346 6.00491 7.66188 5.33333 6.83346 5.33333ZM16.1668 5.33333C15.3384 5.33333 14.6668 6.00491 14.6668 6.83333V20H13.3335C12.5971 20 12.0001 20.597 12.0001 21.3333V21.6667C12.0001 22.403 12.5971 23 13.3335 23H14.6668V25.1667C14.6668 25.9951 15.3384 26.6667 16.1668 26.6667C16.9952 26.6667 17.6668 25.9951 17.6668 25.1667V23H18.6668C19.4032 23 20.0001 22.403 20.0001 21.6667V21.3333C20.0001 20.597 19.4032 20 18.6668 20H17.6668V6.83333C17.6668 6.00491 16.9952 5.33333 16.1668 5.33333ZM24.0001 6.83333C24.0001 6.00491 24.6717 5.33333 25.5001 5.33333C26.3285 5.33333 27.0001 6.00491 27.0001 6.83333V9H27.6667C28.403 9 29 9.59695 29 10.3333V10.6667C29 11.403 28.403 12 27.6667 12H27.0001V25.1667C27.0001 25.9951 26.3285 26.6667 25.5001 26.6667C24.6717 26.6667 24.0001 25.9951 24.0001 25.1667V12H22.3333C21.597 12 21 11.403 21 10.6667V10.3333C21 9.59695 21.597 9 22.3333 9H24.0001V6.83333Z\" fill=\"white\"/>\n</svg>\n"
 }

package/design-tokens/generated/icons/adjust-32.svg

@@ -10,7 +10,7 @@
     <path
         fill="currentColor"
         fill-rule="evenodd"
-        d="M6.833 5.333a1.5 1.5 0 0 0-1.5 1.5v6.5H4c-.736 0-1.333.597-1.333 1.334V15c0 .736.597 1.333 1.333 1.333h1.333v8.834a1.5 1.5 0 0 0 3 0v-8.834h1c.737 0 1.334-.597 1.334-1.333v-.333c0-.737-.597-1.334-1.334-1.334h-1v-6.5a1.5 1.5 0 0 0-1.5-1.5m9.334 0a1.5 1.5 0 0 0-1.5 1.5V20h-1.334c-.736 0-1.333.597-1.333 1.333v.334c0 .736.597 1.333 1.333 1.333h1.334v2.167a1.5 1.5 0 0 0 3 0V23h1c.736 0 1.333-.597 1.333-1.333v-.334c0-.736-.597-1.333-1.333-1.333h-1V6.833a1.5 1.5 0 0 0-1.5-1.5M24 6.833a1.5 1.5 0 0 1 3 0V9h.667C28.403 9 29 9.597 29 10.333v.334c0 .736-.597 1.333-1.333 1.333H27v13.167a1.5 1.5 0 0 1-3 0V12h-1.667A1.333 1.333 0 0 1 21 10.667v-.334C21 9.597 21.597 9 22.333 9H24z"
+        d="M6.833 5.333a1.5 1.5 0 0 0-1.5 1.5v6.5H4c-.736 0-1.333.597-1.333 1.334V15c0 .736.597 1.333 1.333 1.333h1.333v8.834a1.5 1.5 0 0 0 3 0v-8.834h1c.737 0 1.334-.597 1.334-1.333v-.333c0-.737-.597-1.334-1.334-1.334h-1v-6.5a1.5 1.5 0 0 0-1.5-1.5m9.334 0a1.5 1.5 0 0 0-1.5 1.5V20h-1.333c-.737 0-1.334.597-1.334 1.333v.334c0 .736.597 1.333 1.334 1.333h1.333v2.167a1.5 1.5 0 0 0 3 0V23h1c.736 0 1.333-.597 1.333-1.333v-.334c0-.736-.597-1.333-1.333-1.333h-1V6.833a1.5 1.5 0 0 0-1.5-1.5M24 6.833a1.5 1.5 0 0 1 3 0V9h.667C28.403 9 29 9.597 29 10.333v.334c0 .736-.597 1.333-1.333 1.333H27v13.167a1.5 1.5 0 0 1-3 0V12h-1.667A1.333 1.333 0 0 1 21 10.667v-.334C21 9.597 21.597 9 22.333 9H24z"
         clip-rule="evenodd"
     />
 </svg>

package/design-tokens/generated/icons/ai_assistant-16.json

@@ -0,0 +1,7 @@
+{
+  "iconName": "ai_assistant-16",
+  "name": "16px-ai_assistant",
+  "pascalName": "IconAiAssistant_16",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/08077dba-d8ae-46d3-a113-0353162f4eac",
+  "graphic": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_4841_98)\">\n<path d=\"M5.14278 12.0167V6H6.15865C6.23272 6 6.3068 6.00833 6.38087 6.025C6.45495 6.04167 6.52902 6.06111 6.60309 6.08333L10.9999 7.8C11.1481 7.85556 11.2671 7.95556 11.3571 8.1C11.447 8.24444 11.492 8.39444 11.492 8.55C11.492 8.78333 11.4153 8.97222 11.2618 9.11667C11.1084 9.26111 10.9311 9.33333 10.7301 9.33333H9.06341C9.0105 9.33333 8.97082 9.33056 8.94436 9.325C8.91791 9.31944 8.88352 9.30556 8.84119 9.28333L7.82532 8.86667L7.61897 9.51667L8.84119 9.96667C8.86235 9.97778 8.8941 9.98611 8.93643 9.99167C8.97875 9.99722 9.01579 10 9.04754 10H13.3967C13.7354 10 14.0317 10.1278 14.2856 10.3833C14.5396 10.6389 14.6666 10.9556 14.6666 11.3333L9.60309 13.3333L5.14278 12.0167ZM1.33325 13.3333V6H3.87293V13.3333H1.33325Z\" fill=\"white\"/>\n<path d=\"M12.6998 8.66671C12.6998 7.64449 13.0909 6.77782 13.8732 6.06671C14.6554 5.3556 15.6087 5.00004 16.7332 5.00004C15.6087 5.00004 14.6554 4.64449 13.8732 3.93337C13.0909 3.22226 12.6998 2.3556 12.6998 1.33337C12.6998 2.3556 12.3087 3.22226 11.5265 3.93337C10.7443 4.64449 9.79095 5.00004 8.6665 5.00004C9.79095 5.00004 10.7443 5.3556 11.5265 6.06671C12.3087 6.77782 12.6998 7.64449 12.6998 8.66671Z\" fill=\"white\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_4841_98\">\n<rect width=\"16\" height=\"16\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n"
+}

package/design-tokens/generated/icons/ai_assistant-16.svg

@@ -0,0 +1,20 @@
+<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    data-token-name="IconAiAssistant_16"
+    viewBox="0 0 16 16"
+    aria-hidden="true"
+>
+    <g fill="currentColor" clip-path="url(#IconAiAssistant_16__a)">
+        <path
+            d="M5.143 12.017V6h1.016q.111 0 .222.025t.222.058L11 7.8a.7.7 0 0 1 .357.3.84.84 0 0 1 .135.45.74.74 0 0 1-.23.567.75.75 0 0 1-.532.216H9.063a.6.6 0 0 1-.119-.008.4.4 0 0 1-.103-.042l-1.016-.416-.206.65 1.222.45q.032.016.095.025Q9 10 9.048 10h4.349q.508 0 .889.383.38.384.38.95l-5.063 2zm-3.81 1.316V6h2.54v7.333zM12.7 8.667q0-1.535 1.173-2.6Q15.047 5 16.733 5q-1.687 0-2.86-1.067-1.173-1.065-1.173-2.6 0 1.535-1.173 2.6Q10.353 5 8.667 5q1.686 0 2.86 1.067 1.173 1.065 1.173 2.6"
+        />
+    </g>
+    <defs>
+        <clipPath id="IconAiAssistant_16__a">
+            <path fill="currentColor" d="M0 0h16v16H0z" />
+        </clipPath>
+    </defs>
+</svg>

package/design-tokens/generated/icons/ai_assistant-16.svg.d.ts

@@ -0,0 +1,5 @@
+// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE
+
+import type React from 'react';
+const icon: React.FC<React.ComponentProps<'svg'>>;
+export default icon;

package/design-tokens/generated/icons/ai_assistant-24.json

@@ -0,0 +1,7 @@
+{
+  "iconName": "ai_assistant-24",
+  "name": "24px-ai_assistant",
+  "pascalName": "IconAiAssistant_24",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/023f2c7d-8fb7-4b42-851c-0365a1ae7831",
+  "graphic": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_4841_97)\">\n<path d=\"M7.71429 18.025V9H9.2381C9.34921 9 9.46032 9.0125 9.57143 9.0375C9.68254 9.0625 9.79365 9.09167 9.90476 9.125L16.5 11.7C16.7222 11.7833 16.9008 11.9333 17.0357 12.15C17.1706 12.3667 17.2381 12.5917 17.2381 12.825C17.2381 13.175 17.123 13.4583 16.8929 13.675C16.6627 13.8917 16.3968 14 16.0952 14H13.5952C13.5159 14 13.4563 13.9958 13.4167 13.9875C13.377 13.9792 13.3254 13.9583 13.2619 13.925L11.7381 13.3L11.4286 14.275L13.2619 14.95C13.2937 14.9667 13.3413 14.9792 13.4048 14.9875C13.4683 14.9958 13.5238 15 13.5714 15H20.0952C20.6032 15 21.0476 15.1917 21.4286 15.575C21.8095 15.9583 22 16.4333 22 17L14.4048 20L7.71429 18.025ZM2 20V9H5.80952V20H2Z\" fill=\"white\"/>\n<path d=\"M19.05 13C19.05 11.4667 19.6367 10.1667 20.81 9.1C21.9833 8.03333 23.4133 7.5 25.1 7.5C23.4133 7.5 21.9833 6.96667 20.81 5.9C19.6367 4.83333 19.05 3.53333 19.05 2C19.05 3.53333 18.4633 4.83333 17.29 5.9C16.1167 6.96667 14.6867 7.5 13 7.5C14.6867 7.5 16.1167 8.03333 17.29 9.1C18.4633 10.1667 19.05 11.4667 19.05 13Z\" fill=\"white\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_4841_97\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n"
+}

package/design-tokens/generated/icons/ai_assistant-24.svg

@@ -0,0 +1,20 @@
+<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    data-token-name="IconAiAssistant_24"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+>
+    <g fill="currentColor" clip-path="url(#IconAiAssistant_24__a)">
+        <path
+            d="M7.714 18.025V9h1.524q.166 0 .333.037.168.038.334.088L16.5 11.7q.332.125.536.45.202.325.202.675 0 .525-.345.85t-.798.325h-2.5a1 1 0 0 1-.178-.012.6.6 0 0 1-.155-.063l-1.524-.625-.31.975 1.834.675q.048.026.143.038t.166.012h6.524q.762 0 1.334.575.57.574.571 1.425l-7.595 3zM2 20V9h3.81v11zM19.05 13q0-2.3 1.76-3.9t4.29-1.6q-2.53 0-4.29-1.6T19.05 2q0 2.3-1.76 3.9T13 7.5q2.53 0 4.29 1.6t1.76 3.9"
+        />
+    </g>
+    <defs>
+        <clipPath id="IconAiAssistant_24__a">
+            <path fill="currentColor" d="M0 0h24v24H0z" />
+        </clipPath>
+    </defs>
+</svg>

package/design-tokens/generated/icons/ai_assistant-24.svg.d.ts

@@ -0,0 +1,5 @@
+// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE
+
+import type React from 'react';
+const icon: React.FC<React.ComponentProps<'svg'>>;
+export default icon;