@pexip/components 16.11.0 → 16.12.1

package/CHANGELOG.md

@@ -1,5 +1,116 @@
 # Changelog
 
+## 16.12.1
+
+### Patch Changes
+
+- de0a150e: Typo fix for TagList story
+- 8d493614: add testid to BadgeCounter
+- a9a49f7dce: Fix zero pages calculation in TablePagination.
+- f2f106c3: ### add auto scrolling support for drag and drop
+
+  - `Draggable` allows an optional `scrollElementRef` that is used to to detect
+    the need of auto scrolling.
+    - Scrolling speed can be set by `scrollTimer` (default 30 ms).
+    - Scroll offset per "scroll step" for auto scrolling can be set by
+      `scrollOffset` (default 10 px).
+  - `pointerCapture` can be activated for dragged element by `pointerCapture`
+    property (default false).
+  - `Draggable` allows optional "lock style". Which means the the drag direction
+    can be locked horizontal or vertical. That can be set by `LockStyle`
+    property. (default `LockStyle.NONE`)
+  - `Panel` allows to set the overflow to hidden by `overflowHidden` property.
+  - `Panel` suppports a ref to the scrollElement by `scrollElemenRef` property.
+
+- 96f3ce8802: Typescript and tests updates after `yarn.lock` file maintenance
+- Updated dependencies [7b29d953]
+  - @pexip/utils@16.9.0
+  - @pexip/hooks@17.0.1
+  - @pexip/signal@16.6.0
+
+## 16.12.0
+
+### Minor Changes
+
+- 680becae: allowing passing `titleTestId` and `subtitleTestId` to `Section`
+- 3527507c08: `Toast` - provides way to dismiss a Toast if `onDismiss` prop is
+  specified.
+
+  `NotificationToast` - forwards `onDismiss` prop to `Toast`
+
+- 3bfb629a5a: Describtion of `ConfirmationModal` detects links.
+- 7295a95a: Add SimpleButton component. Refactor Button to use SimpleButton and
+  composition.
+- 66b7f66e: Add useGroupedPagesNav hook
+- 92084ee0: Add IconBackToTop, IconBluetooth, IconFecc, IconLocation,
+  IconHeadset, IconHospital, IconKey, IconMove, IconPhoneHorisontal,
+  IconPhoneTalk, IconPin, IconRecording, IconSettingsMeeting, IconTimer Replace
+  IconPauseRound to IconPause
+- 05d14293a5: Add new warning variant for StatIndicator
+- ed24b398: Adds `colorScheme` prop to `UserMenuDropContent`.
+- 562947533b: - adds `wordBreak` property to `Text`
+  `typescript             wordBreak?: 'normal' | 'breakAll' | 'keepAll' | 'overflowWrap'     `
+
+  - adds `descriptionWordBreak` property to `ConfirmationModal`
+    ```typescript
+            descriptionWordBreak?: TextProps['wordBreak'];
+    ```
+
+- 284ea444db: - update `TablePagination` stylings
+
+  - adds `isSticky` property to `TablePagination`
+    ```typescript
+            isSticky?: boolean;
+    ```
+  - adds `maxUngroupedPageButtons` property to `TablePagination`
+    ```typescript
+            maxUngroupedPageButtons?: number; // default and minimum value 16
+    ```
+  - adds `resultsCountComponent` property to `TablePagination`
+    ```typescript
+           resultsCountComponent?: React.FC<TableResultsCountProps>;
+           type TableResultsCountProps = {
+                endCount: number;
+                isDisabled?: boolean;
+                startCount: number;
+                totalCount: number;
+            };
+    ```
+  - adds `nextPageButtonChildren` and `previousPageButtonChildren` property to
+    `TablePagination`
+    ```typescript
+            nextPageButtonChildren?: React.ReactNode; // default value 'Next'
+            previousPageButtonChildren?: React.ReactNode; // default value 'Previous'
+    ```
+
+- 92f3a497bf: Replace default icon in `UserMenuButton` and support overriding
+  `modifier` in there.
+- 577f804902: Adds `IconPause`
+
+### Patch Changes
+
+- e3b13cb6c2: Remove duplicated description from ConfirmationModal
+- 57103e32e5: Add 'large' size for Modal and new type ModalSizeModifier
+- e7a2b3ff61: Add isSelectable option to MultistepIndicator
+- e90ac2a4: Give the Tab component a testId
+- 288ec5d3: add `isSorted` prop to SortingIndicator
+- 88363b2f: revert Tooltip/DropContent React.Portal usage
+- 5ad0e3562f: Adjust sticky TablePagination component z-index
+- 59541f4ab3: Update @testing-library/dom dependency.
+- df5c5eaece: Panel and Box css updates
+- 4ea55a5205: Prettier and linting for new prettier version.
+- 46b53d56: Uses correct app name (Pexip Connect for Web) in `AboutModal`
+- 40615b95: change property 'header' to be 'React.ReactNode' for
+  'NotificationTooltip'
+- e7a2b3ff61: add warning icon
+- Updated dependencies [244cb04c]
+- Updated dependencies [88363b2f]
+- Updated dependencies [244cb04c]
+- Updated dependencies [4ea55a5205]
+  - @pexip/hooks@17.0.0
+  - @pexip/utils@16.8.0
+  - @pexip/signal@16.6.0
+
 ## 16.11.0
 
 ### Minor Changes

package/design-tokens/base/font-family.variables.scss

@@ -1,3 +1,13 @@
-$font-inter: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+$font-inter:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
     sans-serif;

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

@@ -17,7 +17,7 @@ async function generateSvg(icon) {
     svg.push(data);
     await fs.writeFile(
         path.resolve('..', 'generated', 'icons', `${icon.iconName}.svg`),
-        svg.print('html'),
+        await svg.print('html'),
     );
     const declaration = new Content(
         '// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE',
@@ -29,7 +29,7 @@ async function generateSvg(icon) {
     );
     await fs.writeFile(
         path.resolve('..', 'generated', 'icons', `${icon.iconName}.svg.d.ts`),
-        declaration.print('typescript'),
+        await declaration.print('typescript'),
     );
 }
 
@@ -90,7 +90,7 @@ async function generate(meta) {
 
     await fs.writeFile(
         path.resolve('..', 'generated', 'Icons.ts'),
-        iconImports.print('typescript'),
+        await iconImports.print('typescript'),
     );
 }
 

package/design-tokens/generated/Icons.ts

@@ -30,6 +30,8 @@ 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';
 import IconBackspace_24 from './icons/backspace-24.svg';
+import IconBackToTop_16 from './icons/back-to-top-16.svg';
+import IconBackToTop_24 from './icons/back-to-top-24.svg';
 import IconBandwidth_16 from './icons/bandwidth-16.svg';
 import IconBandwidth_24 from './icons/bandwidth-24.svg';
 import IconBell_16 from './icons/bell-16.svg';
@@ -38,6 +40,8 @@ import IconBilling_16 from './icons/billing-16.svg';
 import IconBilling_24 from './icons/billing-24.svg';
 import IconBlock_16 from './icons/block-16.svg';
 import IconBlock_24 from './icons/block-24.svg';
+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 IconCalendar_16 from './icons/calendar-16.svg';
@@ -86,6 +90,8 @@ import IconExpand_16 from './icons/expand-16.svg';
 import IconExpand_24 from './icons/expand-24.svg';
 import IconExport_16 from './icons/export-16.svg';
 import IconExport_24 from './icons/export-24.svg';
+import IconFecc_16 from './icons/fecc-16.svg';
+import IconFecc_24 from './icons/fecc-24.svg';
 import IconFirefoxLogo_16 from './icons/firefox-logo-16.svg';
 import IconFirefoxLogo_24 from './icons/firefox-logo-24.svg';
 import IconFlipCamera_16 from './icons/flip-camera-16.svg';
@@ -96,14 +102,20 @@ import IconFullscreenOn_16 from './icons/fullscreen-on-16.svg';
 import IconFullscreenOn_24 from './icons/fullscreen-on-24.svg';
 import IconGroup_16 from './icons/group-16.svg';
 import IconGroup_24 from './icons/group-24.svg';
+import IconHeadset_16 from './icons/headset-16.svg';
+import IconHeadset_24 from './icons/headset-24.svg';
 import IconHelpRound_16 from './icons/help-round-16.svg';
 import IconHelpRound_24 from './icons/help-round-24.svg';
 import IconHome_16 from './icons/home-16.svg';
 import IconHome_24 from './icons/home-24.svg';
+import IconHospital_16 from './icons/hospital-16.svg';
+import IconHospital_24 from './icons/hospital-24.svg';
 import IconImport_16 from './icons/import-16.svg';
 import IconImport_24 from './icons/import-24.svg';
 import IconInfoRound_16 from './icons/info-round-16.svg';
 import IconInfoRound_24 from './icons/info-round-24.svg';
+import IconKey_16 from './icons/key-16.svg';
+import IconKey_24 from './icons/key-24.svg';
 import IconLeave_16 from './icons/leave-16.svg';
 import IconLeave_24 from './icons/leave-24.svg';
 import IconLink_16 from './icons/link-16.svg';
@@ -112,6 +124,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 IconLocation_16 from './icons/location-16.svg';
+import IconLocation_24 from './icons/location-24.svg';
 import IconLock_16 from './icons/lock-16.svg';
 import IconLock_24 from './icons/lock-24.svg';
 import IconMail_16 from './icons/mail-16.svg';
@@ -129,17 +143,25 @@ import IconMinus_24 from './icons/minus-24.svg';
 import IconMoreHorizontal_24 from './icons/more-horizontal-24.svg';
 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 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';
 import IconParticipant_24 from './icons/participant-24.svg';
 import IconPasswordHide_24 from './icons/password-hide-24.svg';
 import IconPasswordShow_24 from './icons/password-show-24.svg';
-import IconPauseRound_16 from './icons/pause-round-16.svg';
-import IconPauseRound_24 from './icons/pause-round-24.svg';
+import IconPause_16 from './icons/pause-16.svg';
+import IconPause_24 from './icons/pause-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';
+import IconPhoneHorisontal_16 from './icons/phone-horisontal-16.svg';
+import IconPhoneHorisontal_24 from './icons/phone-horisontal-24.svg';
+import IconPhoneTalk_16 from './icons/phone-talk-16.svg';
+import IconPhoneTalk_24 from './icons/phone-talk-24.svg';
+import IconPin_16 from './icons/pin-16.svg';
+import IconPin_24 from './icons/pin-24.svg';
 import IconPlay_16 from './icons/play-16.svg';
 import IconPlay_24 from './icons/play-24.svg';
 import IconPlayRound_16 from './icons/play-round-16.svg';
@@ -152,6 +174,8 @@ import IconPresentationOn_16 from './icons/presentation-on-16.svg';
 import IconPresentationOn_24 from './icons/presentation-on-24.svg';
 import IconRaiseHand_16 from './icons/raise-hand-16.svg';
 import IconRaiseHand_24 from './icons/raise-hand-24.svg';
+import IconRecording_16 from './icons/recording-16.svg';
+import IconRecording_24 from './icons/recording-24.svg';
 import IconRefresh_16 from './icons/refresh-16.svg';
 import IconRefresh_24 from './icons/refresh-24.svg';
 import IconRemoteControl_24 from './icons/remote-control-24.svg';
@@ -161,6 +185,8 @@ import IconSend_16 from './icons/send-16.svg';
 import IconSend_24 from './icons/send-24.svg';
 import IconSettings_16 from './icons/settings-16.svg';
 import IconSettings_24 from './icons/settings-24.svg';
+import IconSettingsMeeting_16 from './icons/settings-meeting-16.svg';
+import IconSettingsMeeting_24 from './icons/settings-meeting-24.svg';
 import IconShield_16 from './icons/shield-16.svg';
 import IconShield_24 from './icons/shield-24.svg';
 import IconShuffle_16 from './icons/shuffle-16.svg';
@@ -179,6 +205,8 @@ import IconSupport_16 from './icons/support-16.svg';
 import IconSupport_24 from './icons/support-24.svg';
 import IconThumbsDown_24 from './icons/thumbs-down-24.svg';
 import IconThumbsUp_24 from './icons/thumbs-up-24.svg';
+import IconTimer_16 from './icons/timer-16.svg';
+import IconTimer_24 from './icons/timer-24.svg';
 import IconTranscript_16 from './icons/transcript-16.svg';
 import IconTranscript_24 from './icons/transcript-24.svg';
 import IconTrash_16 from './icons/trash-16.svg';
@@ -191,6 +219,8 @@ import IconVideoOn_16 from './icons/video-on-16.svg';
 import IconVideoOn_24 from './icons/video-on-24.svg';
 import IconVideoSystems_16 from './icons/video-systems-16.svg';
 import IconVideoSystems_24 from './icons/video-systems-24.svg';
+import IconWarning_16 from './icons/warning-16.svg';
+import IconWarning_24 from './icons/warning-24.svg';
 import IconWarningRound_16 from './icons/warning-round-16.svg';
 import IconWarningRound_24 from './icons/warning-round-24.svg';
 
@@ -215,10 +245,12 @@ export interface IconCollection {
     IconArrowUp: IconSource;
     IconBackgroundBlur: IconSource;
     IconBackspace: IconSource;
+    IconBackToTop: IconSource;
     IconBandwidth: IconSource;
     IconBell: IconSource;
     IconBilling: IconSource;
     IconBlock: IconSource;
+    IconBluetooth: IconSource;
     IconBreakoutRooms: IconSource;
     IconCalendar: IconSource;
     IconChat: IconSource;
@@ -245,19 +277,24 @@ export interface IconCollection {
     IconEmoji: IconSource;
     IconExpand: IconSource;
     IconExport: IconSource;
+    IconFecc: IconSource;
     IconFirefoxLogo: IconSource;
     IconFlipCamera: IconSource;
     IconFullscreenOff: IconSource;
     IconFullscreenOn: IconSource;
     IconGroup: IconSource;
+    IconHeadset: IconSource;
     IconHelpRound: IconSource;
     IconHome: IconSource;
+    IconHospital: IconSource;
     IconImport: IconSource;
     IconInfoRound: IconSource;
+    IconKey: IconSource;
     IconLeave: IconSource;
     IconLink: IconSource;
     IconLiveCaption: IconSource;
     IconLiveStream: IconSource;
+    IconLocation: IconSource;
     IconLock: IconSource;
     IconMail: IconSource;
     IconMeetingRoom: IconSource;
@@ -267,24 +304,30 @@ export interface IconCollection {
     IconMinus: IconSource;
     IconMoreHorizontal: IconSource;
     IconMoreVertical: IconSource;
+    IconMove: IconSource;
     IconOpenInNew: IconSource;
     IconParticipant: IconSource;
     IconPasswordHide: IconSource;
     IconPasswordShow: IconSource;
-    IconPauseRound: IconSource;
+    IconPause: IconSource;
     IconPexipLogo: IconSource;
     IconPhone: IconSource;
+    IconPhoneHorisontal: IconSource;
+    IconPhoneTalk: IconSource;
+    IconPin: IconSource;
     IconPlay: IconSource;
     IconPlayRound: IconSource;
     IconPlus: IconSource;
     IconPresentationOff: IconSource;
     IconPresentationOn: IconSource;
     IconRaiseHand: IconSource;
+    IconRecording: IconSource;
     IconRefresh: IconSource;
     IconRemoteControl: IconSource;
     IconSearch: IconSource;
     IconSend: IconSource;
     IconSettings: IconSource;
+    IconSettingsMeeting: IconSource;
     IconShield: IconSource;
     IconShuffle: IconSource;
     IconSpeakerDisabled: IconSource;
@@ -295,12 +338,14 @@ export interface IconCollection {
     IconSupport: IconSource;
     IconThumbsDown: IconSource;
     IconThumbsUp: IconSource;
+    IconTimer: IconSource;
     IconTranscript: IconSource;
     IconTrash: IconSource;
     IconUnlock: IconSource;
     IconVideoOff: IconSource;
     IconVideoOn: IconSource;
     IconVideoSystems: IconSource;
+    IconWarning: IconSource;
     IconWarningRound: IconSource;
 }
 
@@ -335,10 +380,12 @@ const collection: IconCollection = {
         size24: IconBackgroundBlur_24,
     },
     IconBackspace: {size16: IconBackspace_16, size24: IconBackspace_24},
+    IconBackToTop: {size16: IconBackToTop_16, size24: IconBackToTop_24},
     IconBandwidth: {size16: IconBandwidth_16, size24: IconBandwidth_24},
     IconBell: {size16: IconBell_16, size24: IconBell_24},
     IconBilling: {size16: IconBilling_16, size24: IconBilling_24},
     IconBlock: {size16: IconBlock_16, size24: IconBlock_24},
+    IconBluetooth: {size16: IconBluetooth_16, size24: IconBluetooth_24},
     IconBreakoutRooms: {
         size16: IconBreakoutRooms_16,
         size24: IconBreakoutRooms_24,
@@ -398,6 +445,7 @@ const collection: IconCollection = {
     IconEmoji: {size16: IconEmoji_16, size24: IconEmoji_24},
     IconExpand: {size16: IconExpand_16, size24: IconExpand_24},
     IconExport: {size16: IconExport_16, size24: IconExport_24},
+    IconFecc: {size16: IconFecc_16, size24: IconFecc_24},
     IconFirefoxLogo: {size16: IconFirefoxLogo_16, size24: IconFirefoxLogo_24},
     IconFlipCamera: {size16: IconFlipCamera_16, size24: IconFlipCamera_24},
     IconFullscreenOff: {
@@ -409,14 +457,18 @@ const collection: IconCollection = {
         size24: IconFullscreenOn_24,
     },
     IconGroup: {size16: IconGroup_16, size24: IconGroup_24},
+    IconHeadset: {size16: IconHeadset_16, size24: IconHeadset_24},
     IconHelpRound: {size16: IconHelpRound_16, size24: IconHelpRound_24},
     IconHome: {size16: IconHome_16, size24: IconHome_24},
+    IconHospital: {size16: IconHospital_16, size24: IconHospital_24},
     IconImport: {size16: IconImport_16, size24: IconImport_24},
     IconInfoRound: {size16: IconInfoRound_16, size24: IconInfoRound_24},
+    IconKey: {size16: IconKey_16, size24: IconKey_24},
     IconLeave: {size16: IconLeave_16, size24: IconLeave_24},
     IconLink: {size16: IconLink_16, size24: IconLink_24},
     IconLiveCaption: {size16: IconLiveCaption_16, size24: IconLiveCaption_24},
     IconLiveStream: {size16: IconLiveStream_16, size24: IconLiveStream_24},
+    IconLocation: {size16: IconLocation_16, size24: IconLocation_24},
     IconLock: {size16: IconLock_16, size24: IconLock_24},
     IconMail: {size16: IconMail_16, size24: IconMail_24},
     IconMeetingRoom: {size16: IconMeetingRoom_16, size24: IconMeetingRoom_24},
@@ -438,6 +490,7 @@ const collection: IconCollection = {
         size16: IconMoreVertical_16,
         size24: IconMoreVertical_24,
     },
+    IconMove: {size16: IconMove_16, size24: IconMove_24},
     IconOpenInNew: {size16: IconOpenInNew_16, size24: IconOpenInNew_24},
     IconParticipant: {size16: IconParticipant_16, size24: IconParticipant_24},
     IconPasswordHide: {
@@ -448,9 +501,15 @@ const collection: IconCollection = {
         size16: IconPasswordShow_24,
         size24: IconPasswordShow_24,
     },
-    IconPauseRound: {size16: IconPauseRound_16, size24: IconPauseRound_24},
+    IconPause: {size16: IconPause_16, size24: IconPause_24},
     IconPexipLogo: {size16: IconPexipLogo_24, size24: IconPexipLogo_24},
     IconPhone: {size16: IconPhone_16, size24: IconPhone_24},
+    IconPhoneHorisontal: {
+        size16: IconPhoneHorisontal_16,
+        size24: IconPhoneHorisontal_24,
+    },
+    IconPhoneTalk: {size16: IconPhoneTalk_16, size24: IconPhoneTalk_24},
+    IconPin: {size16: IconPin_16, size24: IconPin_24},
     IconPlay: {size16: IconPlay_16, size24: IconPlay_24},
     IconPlayRound: {size16: IconPlayRound_16, size24: IconPlayRound_24},
     IconPlus: {size16: IconPlus_16, size24: IconPlus_24},
@@ -463,6 +522,7 @@ const collection: IconCollection = {
         size24: IconPresentationOn_24,
     },
     IconRaiseHand: {size16: IconRaiseHand_16, size24: IconRaiseHand_24},
+    IconRecording: {size16: IconRecording_16, size24: IconRecording_24},
     IconRefresh: {size16: IconRefresh_16, size24: IconRefresh_24},
     IconRemoteControl: {
         size16: IconRemoteControl_24,
@@ -471,6 +531,10 @@ const collection: IconCollection = {
     IconSearch: {size16: IconSearch_16, size24: IconSearch_24},
     IconSend: {size16: IconSend_16, size24: IconSend_24},
     IconSettings: {size16: IconSettings_16, size24: IconSettings_24},
+    IconSettingsMeeting: {
+        size16: IconSettingsMeeting_16,
+        size24: IconSettingsMeeting_24,
+    },
     IconShield: {size16: IconShield_16, size24: IconShield_24},
     IconShuffle: {size16: IconShuffle_16, size24: IconShuffle_24},
     IconSpeakerDisabled: {
@@ -484,6 +548,7 @@ const collection: IconCollection = {
     IconSupport: {size16: IconSupport_16, size24: IconSupport_24},
     IconThumbsDown: {size16: IconThumbsDown_24, size24: IconThumbsDown_24},
     IconThumbsUp: {size16: IconThumbsUp_24, size24: IconThumbsUp_24},
+    IconTimer: {size16: IconTimer_16, size24: IconTimer_24},
     IconTranscript: {size16: IconTranscript_16, size24: IconTranscript_24},
     IconTrash: {size16: IconTrash_16, size24: IconTrash_24},
     IconUnlock: {size16: IconUnlock_16, size24: IconUnlock_24},
@@ -493,6 +558,7 @@ const collection: IconCollection = {
         size16: IconVideoSystems_16,
         size24: IconVideoSystems_24,
     },
+    IconWarning: {size16: IconWarning_16, size24: IconWarning_24},
     IconWarningRound: {
         size16: IconWarningRound_16,
         size24: IconWarningRound_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/8267d756-638f-4ab2-8982-8c9066f6688f",
-  "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=\"#F7F7F7\"/>\n</svg>\n"
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a2a12018-98f6-4d0e-a079-c15c2ec4b4a0",
+  "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-16.svg

@@ -1,14 +1,14 @@
 <!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
 
 <svg
-    viewBox="0 0 16 16"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
+    fill="none"
     data-token-name="IconAdd_16"
+    viewBox="0 0 16 16"
+    aria-hidden="true"
 >
     <path
-        d="M12.5 1h-9A2.5 2.5 0 0 0 1 3.5v9A2.5 2.5 0 0 0 3.5 15h9a2.5 2.5 0 0 0 2.5-2.5v-9A2.5 2.5 0 0 0 12.5 1Zm-.964 7.75H8.75v2.786a.75.75 0 0 1-1.5 0V8.75H4.464a.75.75 0 0 1 0-1.5H7.25V4.464a.75.75 0 0 1 1.5 0V7.25h2.786a.75.75 0 0 1 0 1.5Z"
         fill="currentColor"
+        d="M12.5 1h-9A2.5 2.5 0 0 0 1 3.5v9A2.5 2.5 0 0 0 3.5 15h9a2.5 2.5 0 0 0 2.5-2.5v-9A2.5 2.5 0 0 0 12.5 1Zm-.964 7.75H8.75v2.786a.75.75 0 0 1-1.5 0V8.75H4.464a.75.75 0 0 1 0-1.5H7.25V4.464a.75.75 0 0 1 1.5 0V7.25h2.786a.75.75 0 0 1 0 1.5Z"
     />
 </svg>

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/a6fd74ff-814d-4787-b70e-7c3cbb2e222b",
-  "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=\"#F7F7F7\"/>\n</svg>\n"
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c6a766fe-3e1c-4141-93c5-4c5081cdcd6c",
+  "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-24.svg

@@ -1,14 +1,14 @@
 <!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
 
 <svg
-    viewBox="0 0 24 24"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
+    fill="none"
     data-token-name="IconAdd_24"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
 >
     <path
-        d="M18.429 2H5.571A3.571 3.571 0 0 0 2 5.571v12.857A3.571 3.571 0 0 0 5.571 22h12.857A3.571 3.571 0 0 0 22 18.429V5.571A3.571 3.571 0 0 0 18.429 2ZM17 13h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2Z"
         fill="currentColor"
+        d="M18.429 2H5.571A3.571 3.571 0 0 0 2 5.571v12.857A3.571 3.571 0 0 0 5.571 22h12.857A3.571 3.571 0 0 0 22 18.429V5.571A3.571 3.571 0 0 0 18.429 2ZM17 13h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2Z"
     />
 </svg>

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/ff584238-8477-48d1-a4c0-7c34ba79fe38",
-  "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.83334C13.2761 1.83334 13.4999 2.0572 13.4999 2.33334V3.50001H14.6666C14.9428 3.50001 15.1666 3.72387 15.1666 4.00001C15.1666 4.27615 14.9428 4.50001 14.6666 4.50001H13.4999V5.66668C13.4999 5.94282 13.2761 6.16668 12.9999 6.16668C12.7238 6.16668 12.4999 5.94282 12.4999 5.66668V4.50001H11.3333C11.0571 4.50001 10.8333 4.27615 10.8333 4.00001C10.8333 3.72387 11.0571 3.50001 11.3333 3.50001H12.4999V2.33334C12.4999 2.0572 12.7238 1.83334 12.9999 1.83334ZM7.33329 8.39135C8.68529 8.39135 9.78462 7.29201 9.78462 5.93934C9.78462 4.58801 8.68529 3.48868 7.33329 3.48868C5.98129 3.48868 4.88129 4.58801 4.88129 5.93934C4.88129 7.29134 5.98129 8.39135 7.33329 8.39135ZM11.3473 10.6307C10.7079 9.94667 9.5026 9.43867 7.33327 9.43867C5.14527 9.43867 3.93794 9.95534 3.3026 10.648L3.28504 10.6672C3.1131 10.8545 2.8359 11.1565 2.71994 11.8993C2.65794 12.3013 2.9746 12.6667 3.38127 12.6667H11.2853C11.6919 12.6667 12.0093 12.3013 11.9466 11.8993C11.8279 11.1421 11.5416 10.8375 11.3565 10.6405L11.3473 10.6307Z\" fill=\"#F7F7F7\"/>\n</svg>\n"
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5bda4752-aefa-45ad-b552-9e697c8a8c44",
+  "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/add-someone-16.svg

@@ -1,16 +1,16 @@
 <!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
 
 <svg
-    viewBox="0 0 16 16"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
+    fill="none"
     data-token-name="IconAddSomeone_16"
+    viewBox="0 0 16 16"
+    aria-hidden="true"
 >
     <path
+        fill="currentColor"
         fill-rule="evenodd"
+        d="M13 1.833a.5.5 0 0 1 .5.5V3.5h1.167a.5.5 0 1 1 0 1H13.5v1.167a.5.5 0 1 1-1 0V4.5h-1.167a.5.5 0 1 1 0-1H12.5V2.333a.5.5 0 0 1 .5-.5ZM7.333 8.391c1.352 0 2.452-1.1 2.452-2.452 0-1.351-1.1-2.45-2.452-2.45a2.454 2.454 0 0 0-2.452 2.45c0 1.352 1.1 2.452 2.452 2.452Zm4.014 2.24c-.64-.684-1.844-1.192-4.014-1.192-2.188 0-3.395.516-4.03 1.209l-.018.02c-.172.186-.45.489-.565 1.231a.67.67 0 0 0 .661.768h7.904a.67.67 0 0 0 .662-.768c-.12-.757-.405-1.062-.59-1.258l-.01-.01Z"
         clip-rule="evenodd"
-        d="M13 1.833a.5.5 0 0 1 .5.5V3.5h1.167a.5.5 0 1 1 0 1H13.5v1.167a.5.5 0 1 1-1 0V4.5h-1.167a.5.5 0 1 1 0-1H12.5V2.333a.5.5 0 0 1 .5-.5ZM7.333 8.391c1.352 0 2.452-1.099 2.452-2.452 0-1.351-1.1-2.45-2.452-2.45a2.454 2.454 0 0 0-2.452 2.45c0 1.352 1.1 2.452 2.452 2.452Zm4.014 2.24c-.64-.684-1.844-1.192-4.014-1.192-2.188 0-3.395.516-4.03 1.209l-.018.02c-.172.187-.45.489-.565 1.231a.67.67 0 0 0 .661.768h7.904a.67.67 0 0 0 .662-.768c-.12-.757-.405-1.061-.59-1.258l-.01-.01Z"
-        fill="currentColor"
     />
 </svg>

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

@@ -2,6 +2,6 @@
   "iconName": "add-someone-24",
   "name": "24px-add-someone",
   "pascalName": "IconAddSomeone_24",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/34a424bc-6a30-4c29-aa29-5754bff8168d",
-  "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=\"M19.5 2.75C19.9142 2.75 20.25 3.08579 20.25 3.5V5.25H22C22.4142 5.25 22.75 5.58579 22.75 6C22.75 6.41421 22.4142 6.75 22 6.75H20.25V8.5C20.25 8.91421 19.9142 9.25 19.5 9.25C19.0858 9.25 18.75 8.91421 18.75 8.5V6.75H17C16.5858 6.75 16.25 6.41421 16.25 6C16.25 5.58579 16.5858 5.25 17 5.25H18.75V3.5C18.75 3.08579 19.0858 2.75 19.5 2.75ZM11 12.587C13.028 12.587 14.677 10.938 14.677 8.909C14.677 6.882 13.028 5.233 11 5.233C8.97204 5.233 7.32204 6.882 7.32204 8.909C7.32204 10.937 8.97204 12.587 11 12.587ZM17.021 15.946C16.062 14.92 14.254 14.158 11 14.158C7.71803 14.158 5.90703 14.933 4.95403 15.972L4.92768 16.0007C4.66978 16.2817 4.25397 16.7348 4.08003 17.849C3.98703 18.452 4.46203 19 5.07203 19H16.928C17.538 19 18.014 18.452 17.92 17.849C17.742 16.7131 17.3126 16.2562 17.0349 15.9608L17.021 15.946Z\" fill=\"#F7F7F7\"/>\n</svg>\n"
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a18242f6-906b-4173-95a8-f690417767cf",
+  "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=\"M19.5 2.75C19.9142 2.75 20.25 3.08579 20.25 3.5V5.25H22C22.4142 5.25 22.75 5.58579 22.75 6C22.75 6.41421 22.4142 6.75 22 6.75H20.25V8.5C20.25 8.91421 19.9142 9.25 19.5 9.25C19.0858 9.25 18.75 8.91421 18.75 8.5V6.75H17C16.5858 6.75 16.25 6.41421 16.25 6C16.25 5.58579 16.5858 5.25 17 5.25H18.75V3.5C18.75 3.08579 19.0858 2.75 19.5 2.75ZM11 12.587C13.028 12.587 14.677 10.938 14.677 8.909C14.677 6.882 13.028 5.233 11 5.233C8.97204 5.233 7.32204 6.882 7.32204 8.909C7.32204 10.937 8.97204 12.587 11 12.587ZM17.021 15.946C16.062 14.92 14.254 14.158 11 14.158C7.71803 14.158 5.90703 14.933 4.95403 15.972L4.92768 16.0007C4.66978 16.2817 4.25397 16.7348 4.08003 17.849C3.98703 18.452 4.46203 19 5.07203 19H16.928C17.538 19 18.014 18.452 17.92 17.849C17.742 16.7131 17.3126 16.2562 17.0349 15.9608L17.021 15.946Z\" fill=\"white\"/>\n</svg>\n"
 }

package/design-tokens/generated/icons/add-someone-24.svg

@@ -1,16 +1,16 @@
 <!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
 
 <svg
-    viewBox="0 0 24 24"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
+    fill="none"
     data-token-name="IconAddSomeone_24"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
 >
     <path
+        fill="currentColor"
         fill-rule="evenodd"
-        clip-rule="evenodd"
         d="M19.5 2.75a.75.75 0 0 1 .75.75v1.75H22a.75.75 0 0 1 0 1.5h-1.75V8.5a.75.75 0 0 1-1.5 0V6.75H17a.75.75 0 0 1 0-1.5h1.75V3.5a.75.75 0 0 1 .75-.75ZM11 12.587a3.68 3.68 0 0 0 3.677-3.678A3.68 3.68 0 0 0 11 5.233a3.681 3.681 0 0 0-3.678 3.676A3.682 3.682 0 0 0 11 12.587Zm6.021 3.359c-.959-1.026-2.767-1.788-6.021-1.788-3.282 0-5.093.775-6.046 1.814l-.026.029c-.258.28-.674.734-.848 1.848A1.005 1.005 0 0 0 5.072 19h11.856c.61 0 1.086-.548.992-1.151-.178-1.136-.607-1.593-.885-1.888l-.014-.015Z"
-        fill="currentColor"
+        clip-rule="evenodd"
     />
 </svg>

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

@@ -2,6 +2,6 @@
   "iconName": "alert-16",
   "name": "16px-alert",
   "pascalName": "IconAlert_16",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d0b87be1-dcfc-4c56-97da-96a005a1159e",
-  "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=\"M9.34811 2.55725C8.74978 1.52091 7.25395 1.52091 6.65562 2.55725L1.27064 11.8843C0.672312 12.9206 1.42023 14.2161 2.61689 14.2161H13.3868C14.5835 14.2161 15.3314 12.9206 14.7331 11.8843L9.34811 2.55725ZM8.00459 12.4637C8.40842 12.4637 8.7358 12.1347 8.7358 11.7289C8.7358 11.323 8.40843 10.994 8.00459 10.994H7.99728C7.59345 10.994 7.26608 11.323 7.26608 11.7289C7.26608 12.1347 7.59345 12.4637 7.99728 12.4637H8.00459ZM7.27339 8.78945C7.27339 9.1953 7.60076 9.52431 8.00459 9.52431C8.40843 9.52431 8.7358 9.1953 8.7358 8.78945V5.85001C8.7358 5.44416 8.40843 5.11516 8.00459 5.11516C7.60076 5.11516 7.27339 5.44416 7.27339 5.85001L7.27339 8.78945Z\" fill=\"#F7F7F7\"/>\n</svg>\n"
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a1602df3-9941-4da8-a5a7-5fa15deedad2",
+  "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=\"M9.34811 2.55728C8.74978 1.52094 7.25395 1.52094 6.65562 2.55728L1.27064 11.8843C0.672312 12.9207 1.42023 14.2161 2.61689 14.2161H13.3868C14.5835 14.2161 15.3314 12.9207 14.7331 11.8843L9.34811 2.55728ZM8.00459 12.4638C8.40842 12.4638 8.7358 12.1348 8.7358 11.7289C8.7358 11.3231 8.40843 10.9941 8.00459 10.9941H7.99728C7.59345 10.9941 7.26608 11.3231 7.26608 11.7289C7.26608 12.1348 7.59345 12.4638 7.99728 12.4638H8.00459ZM7.27339 8.78948C7.27339 9.19533 7.60076 9.52434 8.00459 9.52434C8.40843 9.52434 8.7358 9.19533 8.7358 8.78948V5.85004C8.7358 5.44419 8.40843 5.11519 8.00459 5.11519C7.60076 5.11519 7.27339 5.44419 7.27339 5.85004L7.27339 8.78948Z\" fill=\"white\"/>\n</svg>\n"
 }

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

@@ -1,16 +1,16 @@
 <!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
 
 <svg
-    viewBox="0 0 16 16"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
+    fill="none"
     data-token-name="IconAlert_16"
+    viewBox="0 0 16 16"
+    aria-hidden="true"
 >
     <path
+        fill="currentColor"
         fill-rule="evenodd"
-        clip-rule="evenodd"
         d="M9.348 2.557a1.555 1.555 0 0 0-2.692 0L1.27 11.884a1.555 1.555 0 0 0 1.346 2.332h10.77a1.555 1.555 0 0 0 1.346-2.332L9.348 2.557Zm-1.343 9.907a.733.733 0 0 0 .73-.735.733.733 0 0 0-.73-.735h-.008a.733.733 0 0 0-.73.735c0 .406.326.735.73.735h.008Zm-.732-3.675c0 .406.328.735.732.735a.733.733 0 0 0 .73-.735V5.85a.733.733 0 0 0-.73-.735.733.733 0 0 0-.732.735v2.94Z"
-        fill="currentColor"
+        clip-rule="evenodd"
     />
 </svg>