@azure/communication-react 1.4.3-alpha-202212070014.0 → 1.4.3-alpha-202212080013.0

package/dist/dist-esm/react-components/src/components/styles/VideoGallery.styles.d.ts

@@ -1,6 +1,4 @@
-import { IStackStyles, IModalStyleProps, IModalStyles, IStyleFunctionOrObject, Theme, IStyle, IButtonStyles } from '@fluentui/react';
-import { VideoTileStylesProps } from '../VideoTile';
-import { HorizontalGalleryStyles } from '../HorizontalGallery';
+import { IButtonStyles, IStackStyles, Theme } from '@fluentui/react';
 /**
  * @private
  */
@@ -9,100 +7,8 @@ export declare const videoGalleryOuterDivStyle: string;
  * @private
  */
 export declare const videoGalleryContainerStyle: IStackStyles;
-/**
- * Small floating modal width and height in rem for small screen
- */
-export declare const SMALL_FLOATING_MODAL_SIZE_PX: {
-    width: number;
-    height: number;
-};
-/**
- * Large floating modal width and height in rem for large screen
- */
-export declare const LARGE_FLOATING_MODAL_SIZE_PX: {
-    width: number;
-    height: number;
-};
-/**
- * @private
- * z-index to ensure that the local video tile is above the video gallery.
- */
-export declare const LOCAL_VIDEO_TILE_ZINDEX = 2;
-/**
- * @private
- */
-export declare const floatingLocalVideoModalStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;
-/**
- * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
- * @private
- */
-export declare const localVideoTileOuterPaddingPX = 8;
-/**
- * @private
- */
-export declare const localVideoTileContainerStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStyle;
-/**
- * @private
- */
-export declare const localVideoTileWithControlsContainerStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStackStyles;
-/**
- * @private
- */
-export declare const floatingLocalVideoTileStyle: VideoTileStylesProps;
-/**
- * @private
- */
-export declare const horizontalGalleryContainerStyle: (shouldFloatLocalVideo: boolean, isNarrow: boolean) => IStyle;
-/**
- * @private
- */
-export declare const horizontalGalleryStyle: (isNarrow: boolean) => HorizontalGalleryStyles;
-/**
- * Small horizontal gallery tile size in rem
- * @private
- */
-export declare const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM: {
-    height: number;
-    width: number;
-};
-/**
- * Large horizontal gallery tile size in rem
- * @private
- */
-export declare const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM: {
-    height: number;
-    width: number;
-};
-/**
- * @private
- */
-export declare const SMALL_HORIZONTAL_GALLERY_TILE_STYLE: {
-    minHeight: string;
-    minWidth: string;
-    maxHeight: string;
-    maxWidth: string;
-};
-/**
- * @private
- */
-export declare const LARGE_HORIZONTAL_GALLERY_TILE_STYLE: {
-    minHeight: string;
-    minWidth: string;
-    maxHeight: string;
-    maxWidth: string;
-};
-/**
- * @private
- */
-export declare const layerHostStyle: IStyle;
 /**
  * @private
  */
 export declare const localVideoCameraCycleButtonStyles: (theme: Theme) => IButtonStyles;
-/**
- * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
- * @private
- */
-export declare const localVideoModalStyles: Partial<IModalStyles>;
 //# sourceMappingURL=VideoGallery.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/VideoGallery.styles.js

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { mergeStyles, concatStyleSets } from '@fluentui/react';
+import { mergeStyles } from '@fluentui/react';
 import { _pxToRem } from "../../../../acs-ui-common/src";
 /**
  * @private
@@ -12,133 +12,6 @@ export const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', wid
 export const videoGalleryContainerStyle = {
     root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
 };
-/**
- * Small floating modal width and height in rem for small screen
- */
-export const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
-/**
- * Large floating modal width and height in rem for large screen
- */
-export const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
-/**
- * @private
- * z-index to ensure that the local video tile is above the video gallery.
- */
-export const LOCAL_VIDEO_TILE_ZINDEX = 2;
-/**
- * @private
- */
-export const floatingLocalVideoModalStyle = (theme, isNarrow) => {
-    return concatStyleSets({
-        main: localVideoTileContainerStyle(theme, isNarrow)
-    }, {
-        main: {
-            boxShadow: theme.effects.elevation8,
-            ':focus-within': {
-                boxShadow: theme.effects.elevation16,
-                border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
-            }
-        }
-    }, localVideoModalStyles);
-};
-/**
- * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
- * @private
- */
-export const localVideoTileOuterPaddingPX = 8;
-/**
- * @private
- */
-export const localVideoTileContainerStyle = (theme, isNarrow) => {
-    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
-        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
-        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
-};
-/**
- * @private
- */
-export const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
-    return concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
-        root: { boxShadow: theme.effects.elevation8 }
-    });
-};
-/**
- * @private
- */
-export const floatingLocalVideoTileStyle = {
-    root: {
-        position: 'absolute',
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
-        height: '100%',
-        width: '100%'
-    }
-};
-/**
- * @private
- */
-export const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
-    return {
-        minHeight: isNarrow
-            ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
-            : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-        width: shouldFloatLocalVideo
-            ? isNarrow
-                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
-                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
-            : '100%',
-        paddingRight: '0.5rem'
-    };
-};
-/**
- * @private
- */
-export const horizontalGalleryStyle = (isNarrow) => {
-    return {
-        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
-    };
-};
-/**
- * Small horizontal gallery tile size in rem
- * @private
- */
-export const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
-/**
- * Large horizontal gallery tile size in rem
- * @private
- */
-export const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
-/**
- * @private
- */
-export const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
-    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
-    maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
-};
-/**
- * @private
- */
-export const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
-    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
-    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
-};
-/**
- * @private
- */
-export const layerHostStyle = {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden',
-    // pointer events for layerHost set to none to make descendants interactive
-    pointerEvents: 'none'
-};
 /**
  * @private
  */
@@ -170,13 +43,4 @@ export const localVideoCameraCycleButtonStyles = (theme) => {
         }
     };
 };
-/**
- * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
- * @private
- */
-export const localVideoModalStyles = {
-    keyboardMoveIconContainer: {
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
-    }
-};
 //# sourceMappingURL=VideoGallery.styles.js.map

package/dist/dist-esm/react-components/src/components/styles/VideoGallery.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoGallery.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  mergeStyles,\n  IStackStyles,\n  IModalStyleProps,\n  IModalStyles,\n  IStyleFunctionOrObject,\n  Theme,\n  IStyle,\n  concatStyleSets,\n  IButtonStyles\n} from '@fluentui/react';\nimport { VideoTileStylesProps } from '../VideoTile';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };\n\n/**\n * Large floating modal width and height in rem for large screen\n */\nexport const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };\n\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (\n  theme: Theme,\n  isNarrow?: boolean\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets(\n    {\n      main: localVideoTileContainerStyle(theme, isNarrow)\n    },\n    {\n      main: {\n        boxShadow: theme.effects.elevation8,\n        ':focus-within': {\n          boxShadow: theme.effects.elevation16,\n          border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n        }\n      }\n    },\n    localVideoModalStyles\n  );\n};\n\n/**\n * Padding equal to the amount the modal should stay inside the bounds of the container.\n * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.\n * @private\n */\nexport const localVideoTileOuterPaddingPX = 8;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (theme: Theme, isNarrow?: boolean): IStyle => {\n  return {\n    minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width),\n    minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height),\n    position: 'absolute',\n    bottom: _pxToRem(localVideoTileOuterPaddingPX),\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    ...(theme.rtl\n      ? { left: _pxToRem(localVideoTileOuterPaddingPX) }\n      : { right: _pxToRem(localVideoTileOuterPaddingPX) })\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (theme: Theme, isNarrow?: boolean): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {\n    root: { boxShadow: theme.effects.elevation8 }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const horizontalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean): IStyle => {\n  return {\n    minHeight: isNarrow\n      ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`\n      : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n    width: shouldFloatLocalVideo\n      ? isNarrow\n        ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`\n        : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`\n      : '100%',\n    paddingRight: '0.5rem'\n  };\n};\n\n/**\n * @private\n */\nexport const horizontalGalleryStyle = (isNarrow: boolean): HorizontalGalleryStyles => {\n  return {\n    children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE\n  };\n};\n\n/**\n * Small horizontal gallery tile size in rem\n * @private\n */\nexport const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };\n/**\n * Large horizontal gallery tile size in rem\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };\n\n/**\n * @private\n */\nexport const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {\n  minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`\n};\n/**\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {\n  minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`\n};\n\n/**\n * @private\n */\nexport const layerHostStyle: IStyle = {\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  // pointer events for layerHost set to none to make descendants interactive\n  pointerEvents: 'none'\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2, // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n  keyboardMoveIconContainer: {\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n  }\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"VideoGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA+B,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAE9G;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAiB;IACtD,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;CACjF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAY,EAAiB,EAAE;IAC/E,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC;YACnB,MAAM,EAAE,QAAQ,CAAC,EAAE,CAAC;YACpB,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,iBAAiB;YAC7B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SAC3C;QACD,WAAW,EAAE;YACX,yFAAyF;YACzF,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,iBAAiB,CAAC,6EAA6E;SAC5G;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;YACxB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;YACzB,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE;YACb,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;SAC3B;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, IStackStyles, mergeStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2, // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\"../../../../acs-ui-common/src\""]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.4.3-alpha-202212070014.0",
+  "version": "1.4.3-alpha-202212080013.0",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -86,13 +86,13 @@
     "@azure/core-auth": "1.3.2",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.4.3-alpha-202212070014.0",
-    "@internal/calling-stateful-client": "1.4.3-alpha-202212070014.0",
-    "@internal/chat-component-bindings": "1.4.3-alpha-202212070014.0",
-    "@internal/chat-stateful-client": "1.4.3-alpha-202212070014.0",
-    "@internal/fake-backends": "1.4.3-alpha-202212070014.0",
-    "@internal/react-components": "1.4.3-alpha-202212070014.0",
-    "@internal/react-composites": "1.4.3-alpha-202212070014.0",
+    "@internal/calling-component-bindings": "1.4.3-alpha-202212080013.0",
+    "@internal/calling-stateful-client": "1.4.3-alpha-202212080013.0",
+    "@internal/chat-component-bindings": "1.4.3-alpha-202212080013.0",
+    "@internal/chat-stateful-client": "1.4.3-alpha-202212080013.0",
+    "@internal/fake-backends": "1.4.3-alpha-202212080013.0",
+    "@internal/react-components": "1.4.3-alpha-202212080013.0",
+    "@internal/react-composites": "1.4.3-alpha-202212080013.0",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "~4.1.0",