@pexip/components 16.17.0 → 17.1.0

package/CHANGELOG.md

@@ -1,5 +1,104 @@
 # Changelog
 
+## 17.1.0
+
+### Minor Changes
+
+- d2b4d22: Introducing `user-select` css helper classes
+
+## 17.0.0
+
+### Major Changes
+
+- 15f9674: - Adds `none` size to `Modal` size modifier which skips `width`
+  styles
+  - `useMobileDevice` considers
+    `${TOUCH_DEVICE} and ${LANDSCAPE} and ${mediaBreakpointDown('lg')}` a mobile
+    device in addition to
+    `${TOUCH_DEVICE} and ${PORTRAIT} and ${mediaBreakpointDown('md')}`.
+  - added two new mixins `mobile-portrait` and `mobile-landscape`, with `mobile`
+    mixin including these both
+- fcacb46: - removes `buttonTooltip`, `buttonTooltipPosition` from
+  `AriaMenuProps`, type `button` a generic `ReactElement` so we can pass any
+  interactive element as the `AriaMenu` trigger component.
+- eba25c0: Introduce new pexip colors to the components library. Provide
+  `theme-legacy` as a fallback.
+
+  Components library now supports new Pexip colors based on our design system.
+  You can still use our legacy theme:
+
+  ```tsx
+  <ThemeProvider colorScheme={colorScheme} theme="theme-legacy">
+    {children}
+  </ThemeProvider>
+  ```
+
+  Sync up design tokens from figma and export it in `variables.css` and
+  `variables.ts`.
+
+### Minor Changes
+
+- f9f2867: Introduces `pointerCaptureTarget` prop for `Draggable`. It specifies
+  which element will be the pointer capture target if `pointerCapture` is set to
+  `true`.
+- 3d72739: Turn off box shadow for `StatCardBox`. Accept div props for
+  `StatCardRow`.
+- 3aaa924: Support `figureClassName` and `captionClassName` in `StatCard`.
+- bb6297c: Allow `PreferenceWrapper` to also take `div` props.
+- bb6297c: Export `ThemeContext`.
+- 3d72739: Add `textStyle` and `textClassName` to `TextLink`.
+- 6267a3e: @pexip/components
+
+  Add ellipsis-multiline mixin, allows ellipsis on text with multiple lines
+
+  Give Box component headerContentBelowDivider prop, allows rendering of React
+  Element below the Box header's divider/bottom border
+
+  Give Scrollbars component's scrolling div a data-testid value
+
+  Create CondensedTabs components
+
+- eda3361: Adds `useMobileDeviceLandscape` and `useMobileDevicePortrait` hooks.
+- bb6297c: Add `overflow.scss` with related utility classes.
+- f025402: Flip show password-icon for `PasswordInput`. Take translations as
+  props.
+- 8f35a13: Adds `b-none` helper class for `border: 0`.
+- b79c1a5: - `Panel`: Now a `forwardRef` component. Renders scrollbars only if
+  there are any children.
+  - `Box`: Renders children wrapper only if there are any.
+- 3d72739: Hover effect in `StatCard` placed behind `withHover` prop.
+
+### Patch Changes
+
+- 0932c52: Make tooltip markup semantically correct.
+- 56cc914: Add role="complementary" to AriaMenu
+- a99c099: added refresh-step-name action to `multistepIndicatorReducer`,
+  enabling it to reflect translated step name in `MultistepIndicator` on ad-hoc
+  language changes
+- 262122d: Add `colorScheme` to `ThemeProvider`. This makes it possible to
+  access the css custom properties by just using the ThemeProvider.
+- f025402: Add some padding to `PasswordInput` icon.
+- 1965f23: Add back `color-brand` overrides for buttons
+- 6663887: Draggable calls `releasePointerCapture` on `pointerup`.
+- 2b3afb0: Cancel drag changes if `Draggable` sideEffect re-renders whilst
+  dragging.
+- 1b9bc12: Removes `-webkit-appearance` and `appearance` styles for button-like
+  elements
+- 9b42c7a: Import new `Authenticated` and `NotAuthenticated` icons and use it in
+  Participant panel
+- 8282958: Use @react-aria/tooltip with CustomTooltip component
+- 2a48655: Adjusts `InnerAriaMenuItem` hover & active styles.
+- 0f2c13e: prevent default `onPointerUp` event to prevent unexpected aria menu
+  item selection when the menu is opened by mouse click
+- Updated dependencies [164a3e2]
+- Updated dependencies [b13010c]
+- Updated dependencies [10fdb9d]
+- Updated dependencies [66a8f72]
+- Updated dependencies [d8f7f78]
+  - @pexip/utils@16.13.0
+  - @pexip/hooks@19.0.1
+  - @pexip/signal@16.7.1
+
 ## 16.17.0
 
 ### Minor Changes

package/design-tokens/base/variants.variables.scss

@@ -9,16 +9,17 @@ $base-button-variants: (
     'primary',
     'secondary',
     'tertiary',
-    'neutral',
     'translucent',
-    'bordered',
-    'transparent',
-    'transparentAlternative',
     'text',
     'danger',
     'dangerBordered',
     'success',
-    'obvious'
+    // FIXME: variants below are used for call controls, we need to probably find a better naming,
+    // but currently there is only one variant in the design system called `call` so I sticked to what we have for now,
+    // but we should probably rename it or implement call controls as separate component
+    'neutral',
+    'transparent',
+    'transparentAlternative'
 );
 $base-text-variants: (
     'standard',

package/design-tokens/border.scss

@@ -0,0 +1,5 @@
+.b {
+    &-zero {
+        border: 0 !important;
+    }
+}

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

@@ -1,6 +1,7 @@
 export const API_URL = 'https://api.figma.com/v1/';
 export const FRAME_ID = '88rQRQU5LaIUIzesjpdt1j';
 export const ICONS_FRAME_ID = 'hE9toOmPYV61a1ysNMTSbG';
+export const VARIABLES_FRAME_ID = 'Z2GR4oIYL20ZgbQ3YvYFKw';
 export const RESOURCES_IDS = {
     COLORS: '5433:21000',
     ICONS: '2052:20',

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

@@ -3,15 +3,16 @@ import {getIcons} from './icons.mjs';
 import {getFonts, syncFonts} from './fonts.mjs';
 import {getBreakpoints, syncBreakpoints} from './breakpoints.mjs';
 import {RESOURCES_IDS} from './constants.mjs';
+import {exportVariables, getVariables} from './variables.mjs';
 
 if (!process.env.ACCESS_TOKEN) {
-    throw new Error('Provide access token');
+    throw new Error('Provide figma ACCESS_TOKEN environment variable.');
 }
 
 async function buildTokens() {
-    const types = (process.argv[2] ?? 'colors,icons,fonts,breakpoints').split(
-        ',',
-    );
+    const types = (
+        process.argv[2] ?? 'colors,icons,fonts,breakpoints,variables'
+    ).split(',');
     try {
         console.log('Starting...');
         if (types.includes('colors')) {
@@ -44,6 +45,12 @@ async function buildTokens() {
             console.log(breakpoints);
             console.log('Breakpoints generated');
         }
+        if (types.includes('variables')) {
+            const variables = await getVariables();
+            exportVariables(variables);
+            console.log(variables);
+            console.log('Variables generated');
+        }
         console.log('All done');
     } catch (e) {
         console.error('Build tokens failed', e);

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

@@ -0,0 +1,117 @@
+import fs from 'fs';
+import path from 'path';
+import {camelCase, paramCase} from 'change-case';
+
+import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
+import {VARIABLES_FRAME_ID} from './constants.mjs';
+import {Content} from './content.mjs';
+
+const VARIABLE_ALIAS = 'VARIABLE_ALIAS';
+const MAPPED_DEFAULTS = 'Mapped';
+
+const getHexCode = num => {
+    const hex = Math.round(num * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+};
+
+const getColor = ({r, g, b, a}) =>
+    `#${getHexCode(r)}${getHexCode(g)}${getHexCode(b)}${a === 1 ? '' : getHexCode(a)}`;
+
+const getFloat = value => (value > 0 ? `${value}px` : value);
+
+const getValue = (valueRef, type) => {
+    switch (type) {
+        case 'COLOR':
+            return getColor(valueRef);
+        case 'FLOAT':
+            return getFloat(valueRef);
+        default:
+            return valueRef;
+    }
+};
+
+export const getVariables = async () => {
+    const res = await fetchWithAccessToken(
+        `files/${VARIABLES_FRAME_ID}/variables/local`,
+    );
+
+    const getVariable = id => {
+        const variable = res.meta.variables[id];
+        const collection =
+            res.meta.variableCollections[variable.variableCollectionId];
+        const modes = collection.modes;
+
+        for (const mode of modes) {
+            const valueRef = res.meta.variables[id].valuesByMode[mode.modeId];
+            return valueRef.type === VARIABLE_ALIAS
+                ? getVariable(valueRef.id)
+                : getValue(valueRef, variable.resolvedType);
+        }
+    };
+
+    const variables = {};
+    for (const collection of Object.values(res.meta.variableCollections)) {
+        console.log(collection.name);
+        if (collection.name !== MAPPED_DEFAULTS) {
+            continue;
+        }
+
+        const variableIds = collection.variableIds.sort((idA, idB) => {
+            const nameA = res.meta.variables[idA]?.name ?? '';
+            const nameB = res.meta.variables[idB]?.name ?? '';
+            return nameA.localeCompare(nameB);
+        });
+
+        for (const mode of collection.modes) {
+            const modeName = camelCase(mode.name);
+            variables[modeName] = {};
+
+            variableIds.forEach(variableId => {
+                const variable = res.meta.variables[variableId];
+                const valueRef =
+                    res.meta.variables[variableId].valuesByMode[mode.modeId];
+                const value =
+                    valueRef.type === VARIABLE_ALIAS
+                        ? getVariable(valueRef.id)
+                        : getValue(valueRef, variable.resolvedType);
+
+                variables[modeName][variable.name] = value;
+            });
+        }
+    }
+
+    return variables;
+};
+
+const getFileHeader = ext =>
+    `/* FILE GENERATED BY packages/components/design-tokens/build-scripts/variables.${ext} DO NOT CHANGE */`;
+
+const exportTsVariables = async variables => {
+    const content = new Content(getFileHeader('ts'));
+    content.push('export const variables = ');
+    content.push(JSON.stringify(variables, null, 2) + ';');
+    fs.writeFileSync(
+        path.resolve('..', 'generated', 'variables.ts'),
+        await content.print('typescript'),
+    );
+};
+
+const exportCssVariables = async cssVariables => {
+    const content = new Content(getFileHeader('css'));
+    for (const [colorScheme, v] of Object.entries(cssVariables)) {
+        content.push(`.${paramCase(colorScheme)} {`);
+        for (const [key, value] of Object.entries(v)) {
+            content.push(`  --${paramCase(key)}: ${value};`);
+        }
+        content.push('}\n');
+    }
+    fs.writeFileSync(
+        path.resolve('..', 'generated', 'variables.css'),
+        await content.print('css'),
+    );
+};
+
+export const exportVariables = variables => {
+    exportTsVariables(variables);
+    exportCssVariables(variables);
+};

package/design-tokens/display.scss

@@ -1,25 +1,10 @@
 .d {
-    &-block {
-        display: block !important;
-    }
-
-    &-inline {
-        display: inline !important;
-    }
-
-    &-inline-block {
-        display: inline-block !important;
-    }
-
-    &-inline-flex {
-        display: inline-flex !important;
-    }
-
-    &-flex {
-        display: flex !important;
-    }
-
-    &-none {
-        display: none !important;
+    @each $display in block, inline, inline-block, flex, inline-flex, grid,
+        inline-grid, flow-root, none, contents, table, table-row, list-item,
+        inherit, initial, revert, revert-layer, unset
+    {
+        &-#{$display} {
+            display: $display !important;
+        }
     }
 }

package/design-tokens/generated/Icons.ts

@@ -29,6 +29,9 @@ import IconArrowRight_16 from './icons/arrow-right-16.svg';
 import IconArrowRight_24 from './icons/arrow-right-24.svg';
 import IconArrowUp_16 from './icons/arrow-up-16.svg';
 import IconArrowUp_24 from './icons/arrow-up-24.svg';
+import IconAuthenticated_16 from './icons/authenticated-16.svg';
+import IconAuthenticated_24 from './icons/authenticated-24.svg';
+import IconAuthenticated_32 from './icons/authenticated-32.svg';
 import IconBackgroundBlur_16 from './icons/background-blur-16.svg';
 import IconBackgroundBlur_24 from './icons/background-blur-24.svg';
 import IconBackspace_16 from './icons/backspace-16.svg';
@@ -150,6 +153,8 @@ import IconMeetingRoom_16 from './icons/meeting-room-16.svg';
 import IconMeetingRoom_24 from './icons/meeting-room-24.svg';
 import IconMeetings_16 from './icons/meetings-16.svg';
 import IconMeetings_24 from './icons/meetings-24.svg';
+import IconMicrophoneMutedByHost_16 from './icons/microphone-muted-by-host-16.svg';
+import IconMicrophoneMutedByHost_24 from './icons/microphone-muted-by-host-24.svg';
 import IconMicrophoneOff_16 from './icons/microphone-off-16.svg';
 import IconMicrophoneOff_24 from './icons/microphone-off-24.svg';
 import IconMicrophoneOff_32 from './icons/microphone-off-32.svg';
@@ -163,6 +168,9 @@ import IconMoreVertical_16 from './icons/more-vertical-16.svg';
 import IconMoreVertical_24 from './icons/more-vertical-24.svg';
 import IconMove_16 from './icons/move-16.svg';
 import IconMove_24 from './icons/move-24.svg';
+import IconNotauthenticated_16 from './icons/notauthenticated-16.svg';
+import IconNotauthenticated_24 from './icons/notauthenticated-24.svg';
+import IconNotauthenticated_32 from './icons/notauthenticated-32.svg';
 import IconOpenInNew_16 from './icons/open-in-new-16.svg';
 import IconOpenInNew_24 from './icons/open-in-new-24.svg';
 import IconParticipant_16 from './icons/participant-16.svg';
@@ -273,6 +281,7 @@ export interface IconCollection {
     IconArrowLeftRegular: IconSource;
     IconArrowRight: IconSource;
     IconArrowUp: IconSource;
+    IconAuthenticated: IconSource;
     IconBackgroundBlur: IconSource;
     IconBackspace: IconSource;
     IconBackToTop: IconSource;
@@ -334,12 +343,14 @@ export interface IconCollection {
     IconMail: IconSource;
     IconMeetingRoom: IconSource;
     IconMeetings: IconSource;
+    IconMicrophoneMutedByHost: IconSource;
     IconMicrophoneOff: IconSource;
     IconMicrophoneOn: IconSource;
     IconMinus: IconSource;
     IconMoreHorizontal: IconSource;
     IconMoreVertical: IconSource;
     IconMove: IconSource;
+    IconNotauthenticated: IconSource;
     IconOpenInNew: IconSource;
     IconParticipant: IconSource;
     IconPasswordHide: IconSource;
@@ -454,6 +465,11 @@ const collection: IconCollection = {
         size24: IconArrowUp_24,
         size32: IconArrowUp_24,
     },
+    IconAuthenticated: {
+        size16: IconAuthenticated_16,
+        size24: IconAuthenticated_24,
+        size32: IconAuthenticated_32,
+    },
     IconBackgroundBlur: {
         size16: IconBackgroundBlur_16,
         size24: IconBackgroundBlur_24,
@@ -715,6 +731,11 @@ const collection: IconCollection = {
         size24: IconMeetings_24,
         size32: IconMeetings_24,
     },
+    IconMicrophoneMutedByHost: {
+        size16: IconMicrophoneMutedByHost_16,
+        size24: IconMicrophoneMutedByHost_24,
+        size32: IconMicrophoneMutedByHost_24,
+    },
     IconMicrophoneOff: {
         size16: IconMicrophoneOff_16,
         size24: IconMicrophoneOff_24,
@@ -741,6 +762,11 @@ const collection: IconCollection = {
         size32: IconMoreVertical_24,
     },
     IconMove: {size16: IconMove_16, size24: IconMove_24, size32: IconMove_24},
+    IconNotauthenticated: {
+        size16: IconNotauthenticated_16,
+        size24: IconNotauthenticated_24,
+        size32: IconNotauthenticated_32,
+    },
     IconOpenInNew: {
         size16: IconOpenInNew_16,
         size24: IconOpenInNew_24,

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

@@ -0,0 +1,7 @@
+{
+  "iconName": "authenticated-16",
+  "name": "16px-authenticated",
+  "pascalName": "IconAuthenticated_16",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/98ef883c-cabe-4354-b64f-91630a586807",
+  "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=\"M3.58375 12.2088C4.63958 13.6613 5.97833 14.5917 7.6 15C9.22167 14.5917 10.5604 13.6613 11.6163 12.2088C12.6721 10.7563 13.2 9.14333 13.2 7.37V3.1L7.6 1L2 3.1V7.37C2 9.14333 2.52792 10.7563 3.58375 12.2088ZM9.9157 6.118C10.073 5.96067 10.3273 5.96067 10.4847 6.118C10.642 6.27493 10.642 6.52965 10.4847 6.68658L7.2889 9.88196C7.15249 10.0184 6.89697 10.059 6.71992 9.88196L5.118 8.28005C4.96067 8.12271 4.96067 7.8684 5.118 7.71106C5.27534 7.55373 5.52965 7.55373 5.68698 7.71106L7.00441 9.02889L9.9157 6.118Z\" fill=\"white\"/>\n</svg>\n"
+}

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

@@ -0,0 +1,16 @@
+<!-- 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="IconAuthenticated_16"
+    viewBox="0 0 16 16"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M3.584 12.209Q5.168 14.387 7.6 15q2.432-.613 4.016-2.791Q13.2 10.029 13.2 7.37V3.1L7.6 1 2 3.1v4.27q0 2.66 1.584 4.839m6.332-6.091a.402.402 0 1 1 .569.569L7.289 9.882a.4.4 0 0 1-.57 0L5.119 8.28a.402.402 0 1 1 .569-.569L7.004 9.03z"
+        clip-rule="evenodd"
+    />
+</svg>

package/design-tokens/generated/icons/authenticated-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/authenticated-24.json

@@ -0,0 +1,7 @@
+{
+  "iconName": "authenticated-24",
+  "name": "24px-authenticated",
+  "pascalName": "IconAuthenticated_24",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/79b1787e-b34c-4fc6-8565-e674287e386d",
+  "graphic": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.4101 16.81C8.61676 18.47 10.1468 19.5333 12.0001 20C13.8534 19.5333 15.3834 18.47 16.5901 16.81C17.7968 15.15 18.4001 13.3067 18.4001 11.28V6.4L12.0001 4L5.6001 6.4V11.28C5.6001 13.3067 6.20343 15.15 7.4101 16.81ZM14.8821 8.9652C15.1024 8.74493 15.4584 8.74493 15.6787 8.9652C15.8989 9.18491 15.8989 9.54151 15.6787 9.76121L11.2046 14.2347C11.0136 14.4257 10.6559 14.4826 10.408 14.2347L8.16532 11.9921C7.94506 11.7718 7.94506 11.4158 8.16532 11.1955C8.38559 10.9752 8.74163 10.9752 8.9619 11.1955L10.8063 13.0405L14.8821 8.9652Z\" fill=\"white\"/>\n</svg>\n"
+}

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

@@ -0,0 +1,16 @@
+<!-- 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="IconAuthenticated_24"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M7.41 16.81Q9.22 19.3 12 20q2.78-.7 4.59-3.19t1.81-5.53V6.4L12 4 5.6 6.4v4.88q0 3.04 1.81 5.53m7.472-7.845a.563.563 0 1 1 .797.796l-4.474 4.474a.563.563 0 0 1-.797 0l-2.243-2.243a.563.563 0 1 1 .797-.797l1.844 1.845z"
+        clip-rule="evenodd"
+    />
+</svg>

package/design-tokens/generated/icons/authenticated-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;

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

@@ -0,0 +1,7 @@
+{
+  "iconName": "authenticated-32",
+  "name": "32px-authenticated",
+  "pascalName": "IconAuthenticated_32",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/064b0f38-3afd-41db-8f80-4f25b59637e5",
+  "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=\"M9.87989 22.4134C11.4888 24.6267 13.5288 26.0445 15.9999 26.6667C18.471 26.0445 20.511 24.6267 22.1199 22.4134C23.7288 20.2 24.5332 17.7423 24.5332 15.04V8.53337L15.9999 5.33337L7.46655 8.53337V15.04C7.46655 17.7423 8.271 20.2 9.87989 22.4134ZM19.8426 11.9536C20.1363 11.66 20.611 11.66 20.9047 11.9536C21.1984 12.2466 21.1984 12.722 20.9047 13.015L14.9392 18.9797C14.6846 19.2343 14.2076 19.3102 13.8771 18.9797L10.8869 15.9895C10.5932 15.6958 10.5932 15.2211 10.8869 14.9274C11.1805 14.6337 11.6553 14.6337 11.9489 14.9274L14.4081 17.3873L19.8426 11.9536Z\" fill=\"white\"/>\n</svg>\n"
+}

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

@@ -0,0 +1,16 @@
+<!-- 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="IconAuthenticated_32"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M9.88 22.413q2.413 3.32 6.12 4.254 3.707-.934 6.12-4.254t2.413-7.373V8.533L16 5.333l-8.533 3.2v6.507q0 4.053 2.413 7.373m9.963-10.46a.75.75 0 1 1 1.062 1.062l-5.966 5.965a.75.75 0 0 1-1.062 0l-2.99-2.99a.75.75 0 1 1 1.062-1.063l2.46 2.46z"
+        clip-rule="evenodd"
+    />
+</svg>

package/design-tokens/generated/icons/authenticated-32.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/microphone-muted-by-host-16.json

@@ -0,0 +1,7 @@
+{
+  "iconName": "microphone-muted-by-host-16",
+  "name": "16px-microphone-muted-by-host",
+  "pascalName": "IconMicrophoneMutedByHost_16",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/64b6f99b-b478-4992-a233-ef7672a1d374",
+  "graphic": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.10073 5.80057C7.68235 6.17444 7.33932 6.63087 7.09725 7.14428L3.08311 3.12945C3.27531 1.92394 4.31138 1 5.57169 1C6.96856 1 8.10073 2.13217 8.10073 3.52904V5.80057Z\" fill=\"white\"/>\n<path d=\"M0.719302 1.9576L6.79484 8.03363C6.73158 8.32348 6.69825 8.62451 6.69825 8.93333C6.69825 9.27697 6.73952 9.61098 6.81738 9.93065C6.45103 10.146 6.02829 10.2731 5.57169 10.2731C4.17482 10.2731 3.04265 9.14092 3.04265 7.74405V5.47297L0.123291 2.55361C-0.0410969 2.38922 -0.0410969 2.12199 0.123291 1.9576C0.287679 1.79321 0.554914 1.79321 0.719302 1.9576Z\" fill=\"white\"/>\n<path d=\"M10.8983 13.1333C10.916 13.1333 10.9338 13.1332 10.9515 13.133C10.929 13.1367 10.9063 13.1385 10.8835 13.1385C10.8595 13.1385 10.8355 13.1365 10.8117 13.1325C10.8405 13.133 10.8693 13.1333 10.8983 13.1333Z\" fill=\"white\"/>\n<path d=\"M5.9932 11.9355C6.54932 11.8789 7.07186 11.7122 7.54157 11.4582C7.3711 11.2319 7.22298 10.9878 7.10048 10.7292C6.64394 10.9737 6.12696 11.1161 5.57169 11.1161C3.712 11.1161 2.19963 9.60374 2.19963 7.74405V6.90104C2.19963 6.66836 2.0108 6.47953 1.77813 6.47953C1.54546 6.47953 1.35662 6.66836 1.35662 6.90104V7.74405C1.35662 9.92408 3.02579 11.7012 5.15018 11.9161V13.6451C5.15018 13.8778 5.33902 14.0667 5.57169 14.0667C5.80436 14.0667 5.9932 13.8778 5.9932 13.6451V11.9355Z\" fill=\"white\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.7333 5.66667C8.9292 5.66667 7.46667 7.1292 7.46667 8.93333C7.46667 10.7375 8.9292 12.2 10.7333 12.2C12.5375 12.2 14 10.7375 14 8.93333C14 7.1292 12.5375 5.66667 10.7333 5.66667ZM10.7333 10.5667C10.9137 10.5667 11.06 10.4204 11.06 10.24C11.06 10.0596 10.9137 9.91333 10.7333 9.91333H10.7301C10.5497 9.91333 10.4034 10.0596 10.4034 10.24C10.4034 10.4204 10.5497 10.5667 10.7301 10.5667H10.7333ZM10.4067 8.93333C10.4067 9.11375 10.5529 9.26 10.7333 9.26C10.9137 9.26 11.06 9.11375 11.06 8.93333V7.62667C11.06 7.44625 10.9137 7.3 10.7333 7.3C10.5529 7.3 10.4067 7.44625 10.4067 7.62667V8.93333Z\" fill=\"white\"/>\n</svg>\n"
+}

package/design-tokens/generated/icons/microphone-muted-by-host-16.svg

@@ -0,0 +1,24 @@
+<!-- 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="IconMicrophoneMutedByHost_16"
+    viewBox="0 0 16 16"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        d="M8.1 5.8c-.418.374-.76.83-1.003 1.344L3.083 3.13A2.52 2.52 0 0 1 5.572 1 2.53 2.53 0 0 1 8.1 3.529zM.72 1.958l6.075 6.076a4.2 4.2 0 0 0 .022 1.897c-.366.215-.789.342-1.245.342a2.53 2.53 0 0 1-2.53-2.529V5.473L.124 2.553a.422.422 0 0 1 .596-.595M10.898 13.133h.053a.4.4 0 0 1-.14 0z"
+    />
+    <path
+        fill="currentColor"
+        d="M5.993 11.936a4.1 4.1 0 0 0 1.549-.478 4.2 4.2 0 0 1-.442-.729 3.2 3.2 0 0 1-1.528.387A3.375 3.375 0 0 1 2.2 7.744v-.843a.422.422 0 0 0-.843 0v.843c0 2.18 1.669 3.957 3.793 4.172v1.73a.422.422 0 0 0 .843 0z"
+    />
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M10.733 5.667a3.267 3.267 0 1 0 0 6.533 3.267 3.267 0 0 0 0-6.533m0 4.9a.327.327 0 0 0 0-.654h-.003a.327.327 0 0 0 0 .654zm-.326-1.634a.327.327 0 1 0 .653 0V7.627a.327.327 0 0 0-.653 0z"
+        clip-rule="evenodd"
+    />
+</svg>

package/design-tokens/generated/icons/microphone-muted-by-host-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/microphone-muted-by-host-24.json

@@ -0,0 +1,7 @@
+{
+  "iconName": "microphone-muted-by-host-24",
+  "name": "24px-microphone-muted-by-host",
+  "pascalName": "IconMicrophoneMutedByHost_24",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0b4409fc-ee7d-4629-a91d-c36c11601b33",
+  "graphic": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.3991 9.34782C11.7587 9.92006 11.2337 10.6187 10.8631 11.4045L4.71905 5.25937C5.01324 3.4142 6.59905 2 8.5281 2C10.6662 2 12.3991 3.73291 12.3991 5.87099V9.34782Z\" fill=\"white\"/>\n<path d=\"M1.10097 3.46572L10.4003 12.7658C10.3034 13.2094 10.2524 13.6702 10.2524 14.1429C10.2524 14.6688 10.3156 15.1801 10.4348 15.6694C9.87403 15.999 9.22698 16.1935 8.5281 16.1935C6.39003 16.1935 4.65712 14.4606 4.65712 12.3225V8.84639L0.188711 4.37798C-0.0629035 4.12637 -0.0629035 3.71733 0.188711 3.46572C0.440325 3.2141 0.849359 3.2141 1.10097 3.46572Z\" fill=\"white\"/>\n<path d=\"M16.681 20.5714C16.7082 20.5714 16.7354 20.5713 16.7625 20.5709C16.7281 20.5765 16.6933 20.5793 16.6585 20.5793C16.6217 20.5793 16.5849 20.5763 16.5486 20.5701C16.5926 20.571 16.6368 20.5714 16.681 20.5714Z\" fill=\"white\"/>\n<path d=\"M9.17327 18.738C10.0245 18.6515 10.8243 18.3962 11.5432 18.0074C11.2823 17.661 11.0556 17.2875 10.8681 16.8917C10.1693 17.2659 9.37801 17.4838 8.5281 17.4838C5.68164 17.4838 3.36679 15.169 3.36679 12.3225V11.0322C3.36679 10.6761 3.07776 10.387 2.72163 10.387C2.36549 10.387 2.07646 10.6761 2.07646 11.0322V12.3225C2.07646 15.6593 4.63131 18.3793 7.88294 18.7084V21.3548C7.88294 21.711 8.17197 22 8.5281 22C8.88424 22 9.17327 21.711 9.17327 21.3548V18.738Z\" fill=\"white\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.4286 9.14286C13.6672 9.14286 11.4286 11.3814 11.4286 14.1429C11.4286 16.9043 13.6672 19.1429 16.4286 19.1429C19.19 19.1429 21.4286 16.9043 21.4286 14.1429C21.4286 11.3814 19.19 9.14286 16.4286 9.14286ZM16.4286 16.6429C16.7047 16.6429 16.9286 16.419 16.9286 16.1429C16.9286 15.8667 16.7047 15.6429 16.4286 15.6429H16.4236C16.1474 15.6429 15.9236 15.8667 15.9236 16.1429C15.9236 16.419 16.1474 16.6429 16.4236 16.6429H16.4286ZM15.9286 14.1429C15.9286 14.419 16.1524 14.6429 16.4286 14.6429C16.7047 14.6429 16.9286 14.419 16.9286 14.1429V12.1429C16.9286 11.8667 16.7047 11.6429 16.4286 11.6429C16.1524 11.6429 15.9286 11.8667 15.9286 12.1429V14.1429Z\" fill=\"white\"/>\n</svg>\n"
+}

package/design-tokens/generated/icons/microphone-muted-by-host-24.svg

@@ -0,0 +1,24 @@
+<!-- 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="IconMicrophoneMutedByHost_24"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        d="M12.4 9.348a6.45 6.45 0 0 0-1.537 2.057L4.72 5.259A3.86 3.86 0 0 1 8.53 2a3.87 3.87 0 0 1 3.87 3.871zM1.101 3.466l9.3 9.3a6.45 6.45 0 0 0 .034 2.903c-.561.33-1.208.524-1.907.524a3.87 3.87 0 0 1-3.87-3.87V8.846L.187 4.378a.646.646 0 0 1 .913-.912M16.681 20.571h.081a.7.7 0 0 1-.213 0z"
+    />
+    <path
+        fill="currentColor"
+        d="M9.173 18.738a6.3 6.3 0 0 0 2.37-.73 6.4 6.4 0 0 1-.675-1.116 4.9 4.9 0 0 1-2.34.592 5.166 5.166 0 0 1-5.161-5.162v-1.29a.645.645 0 0 0-1.29 0v1.29c0 3.337 2.554 6.057 5.806 6.386v2.647a.645.645 0 0 0 1.29 0z"
+    />
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M16.429 9.143a5 5 0 1 0 0 10 5 5 0 0 0 0-10m0 7.5a.5.5 0 0 0 0-1h-.005a.5.5 0 1 0 0 1zm-.5-2.5a.5.5 0 1 0 1 0v-2a.5.5 0 1 0-1 0z"
+        clip-rule="evenodd"
+    />
+</svg>

package/design-tokens/generated/icons/microphone-muted-by-host-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;

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

@@ -0,0 +1,7 @@
+{
+  "iconName": "notauthenticated-16",
+  "name": "16px-notauthenticated",
+  "pascalName": "IconNotauthenticated_16",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c3f6797a-2db1-4b13-9bc4-f3dec154c8a7",
+  "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=\"M4.2505 12.5421C5.30633 13.9946 6.64508 14.925 8.26675 15.3334C9.88841 14.925 11.2272 13.9946 12.283 12.5421C13.3388 11.0896 13.8667 9.47671 13.8667 7.70337V3.43337L8.26675 1.33337L2.66675 3.43337V7.70337C2.66675 9.47671 3.19466 11.0896 4.2505 12.5421ZM8.00007 11.3334C8.36826 11.3334 8.66674 11.0349 8.66674 10.6667C8.66674 10.2985 8.36826 10 8.00007 10H7.99341C7.62522 10 7.32674 10.2985 7.32674 10.6667C7.32674 11.0349 7.62522 11.3334 7.99341 11.3334L8.00007 11.3334ZM7.33341 8.00004C7.33341 8.36823 7.63189 8.66671 8.00007 8.66671C8.36826 8.66671 8.66674 8.36823 8.66674 8.00004V5.33337C8.66674 4.96518 8.36826 4.66671 8.00007 4.66671C7.63189 4.66671 7.33341 4.96518 7.33341 5.33337V8.00004Z\" fill=\"white\"/>\n</svg>\n"
+}

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

@@ -0,0 +1,16 @@
+<!-- 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="IconNotauthenticated_16"
+    viewBox="0 0 16 16"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M4.25 12.542q1.584 2.18 4.017 2.791 2.432-.612 4.016-2.79 1.584-2.18 1.584-4.84v-4.27l-5.6-2.1-5.6 2.1v4.27q0 2.66 1.584 4.84M8 11.333A.667.667 0 0 0 8 10h-.007a.667.667 0 0 0 0 1.333zM7.333 8a.667.667 0 0 0 1.334 0V5.333a.667.667 0 0 0-1.334 0z"
+        clip-rule="evenodd"
+    />
+</svg>

package/design-tokens/generated/icons/notauthenticated-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;