@stream-io/video-react-sdk 1.43.2 → 2.0.0-beta.1

package/dist/esm/index.js

@@ -7,6 +7,7 @@ export { ParticipantActionsContextMenu } from './src/core/components/Participant
 export { ParticipantView } from './src/core/components/ParticipantView/ParticipantView.js';
 export { ParticipantViewContext, useParticipantViewContext } from './src/core/components/ParticipantView/ParticipantViewContext.js';
 export { DefaultAudioBlockedNotification, DefaultParticipantViewUI, DefaultScreenShareOverlay, ParticipantDetails, SpeechIndicator } from './src/core/components/ParticipantView/DefaultParticipantViewUI.js';
+export { ConnectionQualityIndicator } from './src/core/components/ParticipantView/ConnectionQualityIndicator.js';
 export { StreamCall } from './src/core/components/StreamCall/StreamCall.js';
 export { StreamVideo } from './src/core/components/StreamVideo/StreamVideo.js';
 export { BaseVideo } from './src/core/components/Video/BaseVideo.js';
@@ -19,12 +20,12 @@ export { useFilteredParticipants } from './src/core/components/CallLayout/hooks.
 export { useTrackElementVisibility } from './src/core/hooks/useTrackElementVisibility.js';
 export { Avatar, AvatarFallback } from './src/components/Avatar/Avatar.js';
 export { BackgroundFiltersProvider, useBackgroundFilters } from './src/components/BackgroundFilters/BackgroundFiltersProvider.js';
-export { CompositeButton } from './src/components/Button/CompositeButton.js';
+export { Badge } from './src/components/Badge/Badge.js';
+export { Button } from './src/components/Button/Button.js';
 export { IconButton } from './src/components/Button/IconButton.js';
-export { TextButton } from './src/components/Button/TextButton.js';
+export { CompositeButton } from './src/components/Button/CompositeButton.js';
 export { AcceptCallButton } from './src/components/CallControls/AcceptCallButton.js';
 export { CallControls } from './src/components/CallControls/CallControls.js';
-export { CallStatsButton } from './src/components/CallControls/CallStatsButton.js';
 export { CancelCallButton, CancelCallConfirmButton } from './src/components/CallControls/CancelCallButton.js';
 export { DefaultReactionsMenu, ReactionsButton, defaultReactions } from './src/components/CallControls/ReactionsButton.js';
 export { RecordCallButton, RecordCallConfirmationButton } from './src/components/CallControls/RecordCallButton.js';
@@ -41,7 +42,6 @@ export { CallRecordingListHeader } from './src/components/CallRecordingList/Call
 export { CallRecordingListItem } from './src/components/CallRecordingList/CallRecordingListItem.js';
 export { EmptyCallRecordingListing } from './src/components/CallRecordingList/EmptyCallRecordingListing.js';
 export { LoadingCallRecordingListing } from './src/components/CallRecordingList/LoadingCallRecordingListing.js';
-export { CallStats, StatCard } from './src/components/CallStats/CallStats.js';
 export { AudioVolumeIndicator } from './src/components/DeviceSettings/AudioVolumeIndicator.js';
 export { DeviceSettings } from './src/components/DeviceSettings/DeviceSettings.js';
 export { DeviceSelector } from './src/components/DeviceSettings/DeviceSelector.js';
@@ -52,7 +52,7 @@ export { DropDownSelect, DropDownSelectOption } from './src/components/DropdownS
 export { Icon } from './src/components/Icon/Icon.js';
 export { LoadingIndicator } from './src/components/LoadingIndicator/LoadingIndicator.js';
 export { MenuToggle, MenuVisualType, useMenuContext } from './src/components/Menu/MenuToggle.js';
-export { GenericMenu, GenericMenuButtonItem } from './src/components/Menu/GenericMenu.js';
+export { GenericMenu, GenericMenuButtonItem, GenericMenuSeparator } from './src/components/Menu/GenericMenu.js';
 export { NoiseCancellationProvider, useNoiseCancellation } from './src/components/NoiseCancellation/NoiseCancellationProvider.js';
 export { Notification } from './src/components/Notification/Notification.js';
 export { PermissionNotification } from './src/components/Notification/PermissionNotification.js';
@@ -71,7 +71,10 @@ export { WithTooltip } from './src/components/Tooltip/WithTooltip.js';
 export { DefaultVideoPlaceholder } from './src/core/components/Video/DefaultVideoPlaceholder.js';
 export { VideoPreview } from './src/components/VideoPreview/VideoPreview.js';
 export { LivestreamPlayer } from './src/wrappers/LivestreamPlayer/LivestreamPlayer.js';
-export { translations } from './src/translations/index.js';
+export { Streami18n } from './src/i18n/Streami18n.js';
+export { TranslationContext, TranslationProvider, useI18n } from './src/i18n/TranslationContext.js';
+export { useStreami18n } from './src/i18n/useStreami18n.js';
+export { asDynamicKey, defaultDateTimeParser, getDateString, predefinedFormatters } from '@stream-io/i18n';
 import 'react';
 import '@floating-ui/react';
 export { usePersistedDevicePreferences } from './src/hooks/usePersistedDevicePreferences.js';
@@ -82,7 +85,7 @@ export { useModeration } from './src/hooks/useModeration.js';
 export { useLoopbackRecording } from './src/hooks/useLoopbackRecording.js';
 export { applyFilter } from './src/utilities/filter.js';
 
-const [major, minor, patch] = ("1.43.2").split('.');
+const [major, minor, patch] = ("2.0.0-beta.1").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../index.ts"],"sourcesContent":["import { setSdkInfo, SfuModels } from '@stream-io/video-client';\n\nexport * from '@stream-io/video-client';\nexport * from '@stream-io/video-react-bindings';\n\nexport * from './src/core';\n\nexport * from './src/components';\nexport * from './src/wrappers';\nexport * from './src/translations';\nexport {\n  useHorizontalScrollPosition,\n  useVerticalScrollPosition,\n  useRequestPermission,\n  usePersistedDevicePreferences,\n  useDeviceList,\n  useModeration,\n  useLoopbackRecording,\n  type LoopbackRecordingState,\n  type StartLoopbackRecordingOptions,\n  type UseLoopbackRecordingResult,\n} from './src/hooks';\nexport { applyFilter, type Filter } from './src/utilities/filter';\n\nconst [major, minor, patch] = (\n  process.env.PKG_VERSION || '0.0.0-development'\n).split('.');\n\nsetSdkInfo({\n  type: SfuModels.SdkType.REACT,\n  major,\n  minor,\n  patch,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,CAC5B,QAA8C,EAC9C,KAAK,CAAC,GAAG,CAAC;AAEZ,UAAU,CAAC;AACT,IAAA,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,KAAK;IAC7B,KAAK;IACL,KAAK;IACL,KAAK;AACN,CAAA,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../../index.ts"],"sourcesContent":["import { setSdkInfo, SfuModels } from '@stream-io/video-client';\n\nexport * from '@stream-io/video-client';\nexport * from '@stream-io/video-react-bindings';\n\nexport * from './src/core';\n\nexport * from './src/components';\nexport * from './src/wrappers';\nexport * from './src/i18n';\nexport {\n  useHorizontalScrollPosition,\n  useVerticalScrollPosition,\n  useRequestPermission,\n  usePersistedDevicePreferences,\n  useDeviceList,\n  useModeration,\n  useLoopbackRecording,\n  type LoopbackRecordingState,\n  type StartLoopbackRecordingOptions,\n  type UseLoopbackRecordingResult,\n} from './src/hooks';\nexport { applyFilter, type Filter } from './src/utilities/filter';\n\nconst [major, minor, patch] = (\n  process.env.PKG_VERSION || '0.0.0-development'\n).split('.');\n\nsetSdkInfo({\n  type: SfuModels.SdkType.REACT,\n  major,\n  minor,\n  patch,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,CAC5B,cAA8C,EAC9C,KAAK,CAAC,GAAG,CAAC;AAEZ,UAAU,CAAC;AACT,IAAA,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,KAAK;IAC7B,KAAK;IACL,KAAK;IACL,KAAK;AACN,CAAA,CAAC"}

package/dist/esm/src/components/Avatar/Avatar.js

@@ -1,13 +1,21 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 import clsx from 'clsx';
 
-const Avatar = ({ imageSrc, name, style, className, ...rest }) => {
+const variantClasses = ({ size = 'md', showOutline }) => [
+    `str-video__avatar--size-${size}`,
+    showOutline && 'str-video__avatar--outlined',
+];
+const Avatar = ({ imageSrc, name, style, className, size = 'md', showOutline, ...rest }) => {
     const [error, setError] = useState(false);
-    return (jsxs(Fragment, { children: [(!imageSrc || error) && name && (jsx(AvatarFallback, { className: className, style: style, names: [name] })), imageSrc && !error && (jsx("img", { onError: () => setError(true), alt: "avatar", className: clsx('str-video__avatar', className), src: imageSrc, style: style, ...rest }))] }));
+    if (!imageSrc || error) {
+        return name ? (jsx(AvatarFallback, { className: className, style: style, names: name.split(/\s+/).filter(Boolean), size: size, showOutline: showOutline })) : null;
+    }
+    return (jsx("img", { onError: () => setError(true), alt: "avatar", className: clsx('str-video__avatar', variantClasses({ size, showOutline }), className), src: imageSrc, style: style, ...rest }));
 };
-const AvatarFallback = ({ className, names, style, }) => {
-    return (jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
+const AvatarFallback = ({ className, names, style, size = 'md', showOutline, }) => {
+    const isCompact = size === 'xs' || size === 'sm';
+    return (jsx("div", { className: clsx('str-video__avatar--initials-fallback', variantClasses({ size, showOutline }), className), style: style, children: jsxs("div", { children: [names[0]?.[0], !isCompact && names[1]?.[0]] }) }));
 };
 
 export { Avatar, AvatarFallback };

package/dist/esm/src/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { ComponentProps, CSSProperties, useState } from 'react';\nimport clsx from 'clsx';\n\nexport type AvatarData = {\n  imageSrc?: string;\n  name?: string;\n  style?: CSSProperties & Record<string, string | number>;\n};\n\nexport type AvatarProps = AvatarData & ComponentProps<'img'>;\n\nexport const Avatar = ({\n  imageSrc,\n  name,\n  style,\n  className,\n  ...rest\n}: AvatarProps) => {\n  const [error, setError] = useState(false);\n\n  return (\n    <>\n      {(!imageSrc || error) && name && (\n        <AvatarFallback className={className} style={style} names={[name]} />\n      )}\n      {imageSrc && !error && (\n        <img\n          onError={() => setError(true)}\n          alt=\"avatar\"\n          className={clsx('str-video__avatar', className)}\n          src={imageSrc}\n          style={style}\n          {...rest}\n        />\n      )}\n    </>\n  );\n};\n\ntype AvatarFallbackProps = {\n  names: string[];\n  className?: string;\n  style?: CSSProperties & Record<string, string | number>;\n};\nexport const AvatarFallback = ({\n  className,\n  names,\n  style,\n}: AvatarFallbackProps) => {\n  return (\n    <div\n      className={clsx('str-video__avatar--initials-fallback', className)}\n      style={style}\n    >\n      <div>\n        {names[0][0]}\n        {names[1]?.[0]}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;AAWO,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACK,KAAI;IAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEzC,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,CAAC,CAAC,QAAQ,IAAI,KAAK,KAAK,IAAI,KAC3BC,GAAA,CAAC,cAAc,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAA,CAAI,CACtE,EACA,QAAQ,IAAI,CAAC,KAAK,KACjBA,GAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAC/C,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,KACR,IAAI,EAAA,CACR,CACH,CAAA,EAAA,CACA;AAEP;AAOO,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,KAAK,GACe,KAAI;AACxB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,sCAAsC,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE,KAAK,YAEZF,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACX,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA,EAAA,CACV,EAAA,CACF;AAEV;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { ComponentProps, CSSProperties, useState } from 'react';\nimport clsx from 'clsx';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\nexport type AvatarData = {\n  imageSrc?: string;\n  name?: string;\n  style?: CSSProperties & Record<string, string | number>;\n};\n\nexport type AvatarVariantProps = {\n  size?: AvatarSize;\n  showOutline?: boolean;\n};\n\nexport type AvatarProps = AvatarData &\n  ComponentProps<'img'> &\n  AvatarVariantProps;\n\nconst variantClasses = ({ size = 'md', showOutline }: AvatarVariantProps) => [\n  `str-video__avatar--size-${size}`,\n  showOutline && 'str-video__avatar--outlined',\n];\n\nexport const Avatar = ({\n  imageSrc,\n  name,\n  style,\n  className,\n  size = 'md',\n  showOutline,\n  ...rest\n}: AvatarProps) => {\n  const [error, setError] = useState(false);\n\n  if (!imageSrc || error) {\n    return name ? (\n      <AvatarFallback\n        className={className}\n        style={style}\n        names={name.split(/\\s+/).filter(Boolean)}\n        size={size}\n        showOutline={showOutline}\n      />\n    ) : null;\n  }\n\n  return (\n    <img\n      onError={() => setError(true)}\n      alt=\"avatar\"\n      className={clsx(\n        'str-video__avatar',\n        variantClasses({ size, showOutline }),\n        className,\n      )}\n      src={imageSrc}\n      style={style}\n      {...rest}\n    />\n  );\n};\n\ntype AvatarFallbackProps = {\n  names: string[];\n  className?: string;\n  style?: CSSProperties & Record<string, string | number>;\n} & AvatarVariantProps;\n\nexport const AvatarFallback = ({\n  className,\n  names,\n  style,\n  size = 'md',\n  showOutline,\n}: AvatarFallbackProps) => {\n  const isCompact = size === 'xs' || size === 'sm';\n\n  return (\n    <div\n      className={clsx(\n        'str-video__avatar--initials-fallback',\n        variantClasses({ size, showOutline }),\n        className,\n      )}\n      style={style}\n    >\n      <div>\n        {names[0]?.[0]}\n        {!isCompact && names[1]?.[0]}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAoBA,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,WAAW,EAAsB,KAAK;AAC3E,IAAA,CAAA,wBAAA,EAA2B,IAAI,CAAA,CAAE;AACjC,IAAA,WAAW,IAAI,6BAA6B;CAC7C;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,GAAG,IAAI,EACX,WAAW,EACX,GAAG,IAAI,EACK,KAAI;IAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEzC,IAAA,IAAI,CAAC,QAAQ,IAAI,KAAK,EAAE;AACtB,QAAA,OAAO,IAAI,IACTA,GAAA,CAAC,cAAc,EAAA,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACxC,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EAAA,CACxB,IACA,IAAI;IACV;IAEA,QACEA,aACE,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAE,IAAI,CACb,mBAAmB,EACnB,cAAc,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EACrC,SAAS,CACV,EACD,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EAAA,GACR,IAAI,EAAA,CACR;AAEN;AAQO,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,GAAG,IAAI,EACX,WAAW,GACS,KAAI;IACxB,MAAM,SAAS,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI;IAEhD,QACEA,aACE,SAAS,EAAE,IAAI,CACb,sCAAsC,EACtC,cAAc,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EACrC,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EAAA,QAAA,EAEZC,yBACG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EACb,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA,EAAA,CACxB,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/components/Badge/Badge.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon/Icon.js';
+
+/**
+ * A compact badge for counts, notifications and error markers.
+ *
+ * Without `icon` it is a pill that grows with its content; with `icon` it is a
+ * circle of the size given by `size`.
+ *
+ * The badge carries no positioning of its own — whatever it annotates places
+ * it. For the call controls, rendering a badge among `CompositeButton`'s
+ * children anchors it to the top-right corner of the button.
+ */
+const Badge = forwardRef(function BadgeRender({ variant = 'default', size = 'sm', icon, className, children, ...rest }, ref) {
+    return (jsx("span", { ref: ref, className: clsx('str-video__badge', `str-video__badge--${variant}`, `str-video__badge--size-${size}`, icon && 'str-video__badge--icon', className), ...rest, children: icon ? jsx(Icon, { icon: icon }) : children }));
+});
+
+export { Badge };
+//# sourceMappingURL=Badge.js.map

package/dist/esm/src/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { Icon } from '../Icon';\n\nexport type BadgeVariant =\n  'default' | 'primary' | 'error' | 'neutral' | 'inverse';\n\nexport type BadgeSize = 'xs' | 'sm' | 'md';\n\nexport type BadgeProps = ComponentPropsWithoutRef<'span'> & {\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  icon?: string;\n};\n\n/**\n * A compact badge for counts, notifications and error markers.\n *\n * Without `icon` it is a pill that grows with its content; with `icon` it is a\n * circle of the size given by `size`.\n *\n * The badge carries no positioning of its own — whatever it annotates places\n * it. For the call controls, rendering a badge among `CompositeButton`'s\n * children anchors it to the top-right corner of the button.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  function BadgeRender(\n    { variant = 'default', size = 'sm', icon, className, children, ...rest },\n    ref,\n  ) {\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          'str-video__badge',\n          `str-video__badge--${variant}`,\n          `str-video__badge--size-${size}`,\n          icon && 'str-video__badge--icon',\n          className,\n        )}\n        {...rest}\n      >\n        {icon ? <Icon icon={icon} /> : children}\n      </span>\n    );\n  },\n);\n"],"names":["_jsx"],"mappings":";;;;;AAgBA;;;;;;;;;AASG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,SAAS,WAAW,CAClB,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EACxE,GAAG,EAAA;IAEH,QACEA,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,kBAAkB,EAClB,CAAA,kBAAA,EAAqB,OAAO,CAAA,CAAE,EAC9B,0BAA0B,IAAI,CAAA,CAAE,EAChC,IAAI,IAAI,wBAAwB,EAChC,SAAS,CACV,KACG,IAAI,EAAA,QAAA,EAEP,IAAI,GAAGA,GAAA,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAA,CAAI,GAAG,QAAQ,EAAA,CAClC;AAEX,CAAC;;;;"}

package/dist/esm/src/components/Button/Button.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+
+const Button = forwardRef(function ButtonRender({ variant = 'primary', appearance = 'solid', size = 'md', active, className, type = 'button', children, ...rest }, ref) {
+    return (jsx("button", { ref: ref, type: type, className: clsx('str-video__button', `str-video__button--${variant}`, `str-video__button--${appearance}`, `str-video__button--size-${size}`, className), ...rest, "aria-pressed": active ?? rest['aria-pressed'], children: children }));
+});
+
+export { Button };
+//# sourceMappingURL=Button.js.map

package/dist/esm/src/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from 'react';\nimport clsx from 'clsx';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'destructive';\n\nexport type ButtonAppearance = 'solid' | 'outline' | 'ghost';\n\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nexport type ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  variant?: ButtonVariant;\n  appearance?: ButtonAppearance;\n  size?: ButtonSize;\n  active?: boolean;\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function ButtonRender(\n    {\n      variant = 'primary',\n      appearance = 'solid',\n      size = 'md',\n      active,\n      className,\n      type = 'button',\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    return (\n      <button\n        ref={ref}\n        type={type}\n        className={clsx(\n          'str-video__button',\n          `str-video__button--${variant}`,\n          `str-video__button--${appearance}`,\n          `str-video__button--size-${size}`,\n          className,\n        )}\n        {...rest}\n        aria-pressed={active ?? rest['aria-pressed']}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["_jsx"],"mappings":";;;;AAgBO,MAAM,MAAM,GAAG,UAAU,CAC9B,SAAS,YAAY,CACnB,EACE,OAAO,GAAG,SAAS,EACnB,UAAU,GAAG,OAAO,EACpB,IAAI,GAAG,IAAI,EACX,MAAM,EACN,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EAAA;AAEH,IAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsB,OAAO,EAAE,EAC/B,CAAA,mBAAA,EAAsB,UAAU,CAAA,CAAE,EAClC,2BAA2B,IAAI,CAAA,CAAE,EACjC,SAAS,CACV,KACG,IAAI,EAAA,cAAA,EACM,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,YAE3C,QAAQ,EAAA,CACF;AAEb,CAAC;;;;"}

package/dist/esm/src/components/Button/CompositeButton.js

@@ -2,27 +2,20 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { MenuToggle } from '../Menu/MenuToggle.js';
 import { forwardRef } from 'react';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
+import { Button } from './Button.js';
 import { IconButton } from './IconButton.js';
 import { isComponentType } from '../../utilities/isComponentType.js';
 
-const CompositeButton = forwardRef(function CompositeButtonRender({ disabled, caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, onMenuToggle, ...restButtonProps }, ref) {
-    return (jsxs("div", { className: clsx('str-video__composite-button', className, {
-            'str-video__composite-button--caption': caption,
-            'str-video__composite-button--menu': Menu,
-        }), title: title, ref: ref, children: [jsxs("div", { className: clsx('str-video__composite-button__button-group', {
-                    'str-video__composite-button__button-group--active': active,
-                    'str-video__composite-button__button-group--active-primary': active && variant === 'primary',
-                    'str-video__composite-button__button-group--active-secondary': active && variant === 'secondary',
-                    'str-video__composite-button__button-group--disabled': disabled,
-                }), children: [jsx("button", { type: "button", className: "str-video__composite-button__button", onClick: (e) => {
-                            e.preventDefault();
-                            onClick?.(e);
-                        }, disabled: disabled, ...restButtonProps, children: children }), Menu && (jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsx(Menu, {}) : Menu }))] }), caption && (jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
+const CompositeButton = forwardRef(function CompositeButtonRender({ appearance, caption, children, className, disabled, Menu, menuOffset, menuPlacement, onMenuToggle, active, size = 'md', title, ToggleMenuButton = CompositeCaret, variant = 'secondary', ...buttonProps }, ref) {
+    return (jsxs("div", { ref: ref, title: title, className: clsx('str-video__composite-button', `str-video__composite-button--${variant}`, `str-video__composite-button--size-${size}`, `str-video__composite-button--${appearance ?? 'solid'}`, Menu && 'str-video__composite-button--menu', className), children: [jsxs("div", { className: "str-video__composite-button__group", children: [jsx(Button, { variant: variant, appearance: appearance, size: size, disabled: disabled, active: active, className: "str-video__composite-button__action str-video__button--icon-only", ...buttonProps, children: children }), Menu &&
+                        (disabled ? (jsx(CompositeCaret, { menuShown: false, disabled: true })) : (jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsx(Menu, {}) : Menu })))] }), caption && (jsx("span", { className: "str-video__composite-button__caption", children: caption }))] }));
 });
-const DefaultToggleMenuButton = forwardRef(function DefaultToggleMenuButtonRender({ menuShown }, ref) {
-    return (jsx(IconButton, { className: clsx('str-video__menu-toggle-button', {
-            'str-video__menu-toggle-button--active': menuShown,
-        }), icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
+const CompositeCaret = forwardRef(function CompositeCaretRender({ menuShown, disabled }, ref) {
+    const { t } = useI18n();
+    return (jsx(IconButton, { className: "str-video__composite-button__caret", size: "xs", appearance: "ghost", disabled: disabled, "aria-label": t('common.toggleMenu.ariaLabel', 'Toggle menu'), "aria-haspopup": "menu", "aria-expanded": menuShown, icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
 });
 
 export { CompositeButton };

package/dist/esm/src/components/Button/CompositeButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompositeButton.js","sources":["../../../../../../../src/components/Button/CompositeButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { MenuToggle, ToggleMenuButtonProps } from '../Menu';\nimport {\n  ComponentProps,\n  ComponentType,\n  forwardRef,\n  PropsWithChildren,\n  ReactElement,\n} from 'react';\nimport { Placement } from '@floating-ui/react';\n\nimport { IconButton } from './IconButton';\nimport { isComponentType } from '../../utilities';\n\nexport type IconButtonWithMenuProps<E extends HTMLElement = HTMLButtonElement> =\n  PropsWithChildren<{\n    active?: boolean;\n    Menu?: ComponentType | ReactElement | null;\n    caption?: string;\n    className?: string;\n    menuPlacement?: Placement;\n    menuOffset?: number;\n    ToggleMenuButton?: ComponentType<ToggleMenuButtonProps<E>>;\n    variant?: 'primary' | 'secondary';\n    onMenuToggle?: (menuShown: boolean) => void;\n  }> &\n    ComponentProps<'button'>;\n\nexport const CompositeButton = forwardRef<\n  HTMLDivElement,\n  IconButtonWithMenuProps\n>(function CompositeButtonRender(\n  {\n    disabled,\n    caption,\n    children,\n    className,\n    active,\n    Menu,\n    menuPlacement,\n    menuOffset,\n    title,\n    ToggleMenuButton = DefaultToggleMenuButton,\n    variant,\n    onClick,\n    onMenuToggle,\n    ...restButtonProps\n  },\n  ref,\n) {\n  return (\n    <div\n      className={clsx('str-video__composite-button', className, {\n        'str-video__composite-button--caption': caption,\n        'str-video__composite-button--menu': Menu,\n      })}\n      title={title}\n      ref={ref}\n    >\n      <div\n        className={clsx('str-video__composite-button__button-group', {\n          'str-video__composite-button__button-group--active': active,\n          'str-video__composite-button__button-group--active-primary':\n            active && variant === 'primary',\n          'str-video__composite-button__button-group--active-secondary':\n            active && variant === 'secondary',\n          'str-video__composite-button__button-group--disabled': disabled,\n        })}\n      >\n        <button\n          type=\"button\"\n          className=\"str-video__composite-button__button\"\n          onClick={(e) => {\n            e.preventDefault();\n            onClick?.(e);\n          }}\n          disabled={disabled}\n          {...restButtonProps}\n        >\n          {children}\n        </button>\n        {Menu && (\n          <MenuToggle\n            offset={menuOffset}\n            placement={menuPlacement}\n            ToggleButton={ToggleMenuButton}\n            onToggle={onMenuToggle}\n          >\n            {isComponentType(Menu) ? <Menu /> : Menu}\n          </MenuToggle>\n        )}\n      </div>\n      {caption && (\n        <div className=\"str-video__composite-button__caption\">{caption}</div>\n      )}\n    </div>\n  );\n});\n\nconst DefaultToggleMenuButton = forwardRef<\n  HTMLButtonElement,\n  ToggleMenuButtonProps\n>(function DefaultToggleMenuButtonRender({ menuShown }, ref) {\n  return (\n    <IconButton\n      className={clsx('str-video__menu-toggle-button', {\n        'str-video__menu-toggle-button--active': menuShown,\n      })}\n      icon={menuShown ? 'caret-down' : 'caret-up'}\n      ref={ref}\n    />\n  );\n});\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AA4BO,MAAM,eAAe,GAAG,UAAU,CAGvC,SAAS,qBAAqB,CAC9B,EACE,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,MAAM,EACN,IAAI,EACJ,aAAa,EACb,UAAU,EACV,KAAK,EACL,gBAAgB,GAAG,uBAAuB,EAC1C,OAAO,EACP,OAAO,EACP,YAAY,EACZ,GAAG,eAAe,EACnB,EACD,GAAG,EAAA;IAEH,QACEA,cACE,SAAS,EAAE,IAAI,CAAC,6BAA6B,EAAE,SAAS,EAAE;AACxD,YAAA,sCAAsC,EAAE,OAAO;AAC/C,YAAA,mCAAmC,EAAE,IAAI;AAC1C,SAAA,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAERA,cACE,SAAS,EAAE,IAAI,CAAC,2CAA2C,EAAE;AAC3D,oBAAA,mDAAmD,EAAE,MAAM;AAC3D,oBAAA,2DAA2D,EACzD,MAAM,IAAI,OAAO,KAAK,SAAS;AACjC,oBAAA,6DAA6D,EAC3D,MAAM,IAAI,OAAO,KAAK,WAAW;AACnC,oBAAA,qDAAqD,EAAE,QAAQ;AAChE,iBAAA,CAAC,EAAA,QAAA,EAAA,CAEFC,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qCAAqC,EAC/C,OAAO,EAAE,CAAC,CAAC,KAAI;4BACb,CAAC,CAAC,cAAc,EAAE;AAClB,4BAAA,OAAO,GAAG,CAAC,CAAC;AACd,wBAAA,CAAC,EACD,QAAQ,EAAE,QAAQ,EAAA,GACd,eAAe,EAAA,QAAA,EAElB,QAAQ,EAAA,CACF,EACR,IAAI,KACHA,GAAA,CAAC,UAAU,EAAA,EACT,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EAAE,YAAY,EAAA,QAAA,EAErB,eAAe,CAAC,IAAI,CAAC,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAA,CAAG,GAAG,IAAI,EAAA,CAC7B,CACd,CAAA,EAAA,CACG,EACL,OAAO,KACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAE,OAAO,EAAA,CAAO,CACtE,CAAA,EAAA,CACG;AAEV,CAAC;AAED,MAAM,uBAAuB,GAAG,UAAU,CAGxC,SAAS,6BAA6B,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAA;IACzD,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAE,IAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,uCAAuC,EAAE,SAAS;AACnD,SAAA,CAAC,EACF,IAAI,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,EAC3C,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CAAC;;;;"}
+{"version":3,"file":"CompositeButton.js","sources":["../../../../../../../src/components/Button/CompositeButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { MenuToggle, ToggleMenuButtonProps } from '../Menu';\nimport {\n  ComponentProps,\n  ComponentType,\n  forwardRef,\n  PropsWithChildren,\n  ReactElement,\n} from 'react';\nimport { Placement } from '@floating-ui/react';\nimport { useI18n } from '../../i18n';\n\nimport { Button, ButtonAppearance, ButtonSize, ButtonVariant } from './Button';\nimport { IconButton } from './IconButton';\nimport { isComponentType } from '../../utilities';\n\nexport type CompositeButtonProps<E extends HTMLElement = HTMLButtonElement> =\n  PropsWithChildren<{\n    active?: boolean;\n    Menu?: ComponentType | ReactElement | null;\n    caption?: string;\n    className?: string;\n    menuPlacement?: Placement;\n    menuOffset?: number;\n    ToggleMenuButton?: ComponentType<ToggleMenuButtonProps<E>>;\n    variant?: ButtonVariant;\n    appearance?: ButtonAppearance;\n    size?: Exclude<ButtonSize, 'xs'>;\n    onMenuToggle?: (menuShown: boolean) => void;\n  }> &\n    ComponentProps<'button'>;\n\nexport const CompositeButton = forwardRef<HTMLDivElement, CompositeButtonProps>(\n  function CompositeButtonRender(\n    {\n      appearance,\n      caption,\n      children,\n      className,\n      disabled,\n      Menu,\n      menuOffset,\n      menuPlacement,\n      onMenuToggle,\n      active,\n      size = 'md',\n      title,\n      ToggleMenuButton = CompositeCaret,\n      variant = 'secondary',\n      ...buttonProps\n    },\n    ref,\n  ) {\n    return (\n      <div\n        ref={ref}\n        title={title}\n        className={clsx(\n          'str-video__composite-button',\n          `str-video__composite-button--${variant}`,\n          `str-video__composite-button--size-${size}`,\n          `str-video__composite-button--${appearance ?? 'solid'}`,\n          Menu && 'str-video__composite-button--menu',\n          className,\n        )}\n      >\n        <div className=\"str-video__composite-button__group\">\n          <Button\n            variant={variant}\n            appearance={appearance}\n            size={size}\n            disabled={disabled}\n            active={active}\n            className=\"str-video__composite-button__action str-video__button--icon-only\"\n            {...buttonProps}\n          >\n            {children}\n          </Button>\n          {Menu &&\n            (disabled ? (\n              <CompositeCaret menuShown={false} disabled />\n            ) : (\n              <MenuToggle\n                offset={menuOffset}\n                placement={menuPlacement}\n                ToggleButton={ToggleMenuButton}\n                onToggle={onMenuToggle}\n              >\n                {isComponentType(Menu) ? <Menu /> : Menu}\n              </MenuToggle>\n            ))}\n        </div>\n        {caption && (\n          <span className=\"str-video__composite-button__caption\">\n            {caption}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nconst CompositeCaret = forwardRef<\n  HTMLButtonElement,\n  { menuShown: boolean; disabled?: boolean }\n>(function CompositeCaretRender({ menuShown, disabled }, ref) {\n  const { t } = useI18n();\n\n  return (\n    <IconButton\n      className=\"str-video__composite-button__caret\"\n      size=\"xs\"\n      appearance=\"ghost\"\n      disabled={disabled}\n      aria-label={t('common.toggleMenu.ariaLabel', 'Toggle menu')}\n      aria-haspopup=\"menu\"\n      aria-expanded={menuShown}\n      icon={menuShown ? 'caret-down' : 'caret-up'}\n      ref={ref}\n    />\n  );\n});\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;MAgCa,eAAe,GAAG,UAAU,CACvC,SAAS,qBAAqB,CAC5B,EACE,UAAU,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,aAAa,EACb,YAAY,EACZ,MAAM,EACN,IAAI,GAAG,IAAI,EACX,KAAK,EACL,gBAAgB,GAAG,cAAc,EACjC,OAAO,GAAG,WAAW,EACrB,GAAG,WAAW,EACf,EACD,GAAG,EAAA;AAEH,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACb,6BAA6B,EAC7B,CAAA,6BAAA,EAAgC,OAAO,CAAA,CAAE,EACzC,CAAA,kCAAA,EAAqC,IAAI,CAAA,CAAE,EAC3C,gCAAgC,UAAU,IAAI,OAAO,CAAA,CAAE,EACvD,IAAI,IAAI,mCAAmC,EAC3C,SAAS,CACV,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,CACjDC,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,kEAAkE,KACxE,WAAW,EAAA,QAAA,EAEd,QAAQ,EAAA,CACF,EACR,IAAI;AACH,yBAAC,QAAQ,IACPA,GAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,SAAG,KAE7CA,GAAA,CAAC,UAAU,EAAA,EACT,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EAAE,YAAY,EAAA,QAAA,EAErB,eAAe,CAAC,IAAI,CAAC,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAA,CAAG,GAAG,IAAI,EAAA,CAC7B,CACd,CAAC,CAAA,EAAA,CACA,EACL,OAAO,KACNA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,sCAAsC,YACnD,OAAO,EAAA,CACH,CACR,CAAA,EAAA,CACG;AAEV,CAAC;AAGH,MAAM,cAAc,GAAG,UAAU,CAG/B,SAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAA;AAC1D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAC,oCAAoC,EAC9C,IAAI,EAAC,IAAI,EACT,UAAU,EAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,CAAC,CAAC,6BAA6B,EAAE,aAAa,CAAC,EAAA,eAAA,EAC7C,MAAM,EAAA,eAAA,EACL,SAAS,EACxB,IAAI,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,EAC3C,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CAAC;;;;"}

package/dist/esm/src/components/Button/IconButton.js

@@ -1,17 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
+import { Button } from './Button.js';
 import { Icon } from '../Icon/Icon.js';
 
-const IconButton = forwardRef(function IconButtonRender(props, ref) {
-    const { icon, enabled, variant, onClick, className, ...rest } = props;
-    return (jsx("button", { className: clsx('str-video__call-controls__button', className, {
-            [`str-video__call-controls__button--variant-${variant}`]: variant,
-            'str-video__call-controls__button--enabled': enabled,
-        }), onClick: (e) => {
-            e.preventDefault();
-            onClick?.(e);
-        }, ref: ref, ...rest, children: jsx(Icon, { icon: icon }) }));
+const IconButton = forwardRef(function IconButtonRender({ icon, className, ...props }, ref) {
+    return (jsx(Button, { ref: ref, className: clsx('str-video__button--icon-only', className), ...props, children: jsx(Icon, { icon: icon }) }));
 });
 
 export { IconButton };

package/dist/esm/src/components/Button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../../../../src/components/Button/IconButton.tsx"],"sourcesContent":["import { ComponentProps, ForwardedRef, forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { Icon, IconProps } from '../Icon';\n\nexport type ButtonWithIconProps = {\n  enabled?: boolean;\n  variant?: string;\n} & ComponentProps<'button'> &\n  IconProps;\n\nexport const IconButton = forwardRef(function IconButtonRender(\n  props: ButtonWithIconProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const { icon, enabled, variant, onClick, className, ...rest } = props;\n  return (\n    <button\n      className={clsx('str-video__call-controls__button', className, {\n        [`str-video__call-controls__button--variant-${variant}`]: variant,\n        'str-video__call-controls__button--enabled': enabled,\n      })}\n      onClick={(e) => {\n        e.preventDefault();\n        onClick?.(e);\n      }}\n      ref={ref}\n      {...rest}\n    >\n      <Icon icon={icon} />\n    </button>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;AAWO,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,gBAAgB,CAC5D,KAA0B,EAC1B,GAAoC,EAAA;AAEpC,IAAA,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK;IACrE,QACEA,gBACE,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,SAAS,EAAE;AAC7D,YAAA,CAAC,CAAA,0CAAA,EAA6C,OAAO,CAAA,CAAE,GAAG,OAAO;AACjE,YAAA,2CAA2C,EAAE,OAAO;AACrD,SAAA,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,KAAI;YACb,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,OAAO,GAAG,CAAC,CAAC;AACd,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,GACJ,IAAI,EAAA,QAAA,EAERA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,EAAA,CACb;AAEb,CAAC;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../../../../src/components/Button/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { Button, ButtonProps } from './Button';\nimport { Icon } from '../Icon';\n\nexport type IconButtonProps = Omit<ButtonProps, 'children'> & {\n  icon: string;\n};\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButtonRender({ icon, className, ...props }, ref) {\n    return (\n      <Button\n        ref={ref}\n        className={clsx('str-video__button--icon-only', className)}\n        {...props}\n      >\n        <Icon icon={icon} />\n      </Button>\n    );\n  },\n);\n"],"names":["_jsx"],"mappings":";;;;;;AAUO,MAAM,UAAU,GAAG,UAAU,CAClC,SAAS,gBAAgB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;AAC1D,IAAA,QACEA,GAAA,CAAC,MAAM,EAAA,EACL,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,SAAS,CAAC,EAAA,GACtD,KAAK,EAAA,QAAA,EAETA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,EAAA,CACb;AAEb,CAAC;;;;"}

package/dist/esm/src/components/CallControls/AcceptCallButton.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
-import '../Button/CompositeButton.js';
+import '../Button/Button.js';
 import { IconButton } from '../Button/IconButton.js';
+import '../Button/CompositeButton.js';
 import { useCall } from '@stream-io/video-react-bindings';
 
 const AcceptCallButton = ({ disabled, onAccept, onClick, }) => {
@@ -21,7 +22,7 @@ const AcceptCallButton = ({ disabled, onAccept, onClick, }) => {
             }
         }
     }, [onClick, onAccept, call]);
-    return (jsx(IconButton, { disabled: disabled, icon: "call-accept", variant: "success", "data-testid": "accept-call-button", onClick: handleClick }));
+    return (jsx(IconButton, { className: "str-video__accept-call-button", size: "sm", disabled: disabled, icon: "call-accept", variant: "secondary", "data-testid": "accept-call-button", onClick: handleClick }));
 };
 
 export { AcceptCallButton };

package/dist/esm/src/components/CallControls/AcceptCallButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AcceptCallButton.js","sources":["../../../../../../../src/components/CallControls/AcceptCallButton.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback } from 'react';\nimport { IconButton } from '../Button';\nimport { useCall } from '@stream-io/video-react-bindings';\n\nexport type AcceptCallButtonProps = {\n  disabled?: boolean;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  onAccept?: (err?: Error) => void;\n};\n\nexport const AcceptCallButton = ({\n  disabled,\n  onAccept,\n  onClick,\n}: AcceptCallButtonProps) => {\n  const call = useCall();\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.join();\n          onAccept?.();\n        } catch (err) {\n          console.error(`Failed to accept call`, err);\n          onAccept?.(err as Error);\n        }\n      }\n    },\n    [onClick, onAccept, call],\n  );\n  return (\n    <IconButton\n      disabled={disabled}\n      icon=\"call-accept\"\n      variant=\"success\"\n      data-testid=\"accept-call-button\"\n      onClick={handleClick}\n    />\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAUO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,OAAO,GACe,KAAI;AAC1B,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IACtB,MAAM,WAAW,GAAyC,WAAW,CACnE,OAAO,CAAC,KAAI;QACV,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,CAAC,CAAC;QACZ;aAAO,IAAI,IAAI,EAAE;AACf,YAAA,IAAI;AACF,gBAAA,MAAM,IAAI,CAAC,IAAI,EAAE;gBACjB,QAAQ,IAAI;YACd;YAAE,OAAO,GAAG,EAAE;AACZ,gBAAA,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,GAAG,CAAC;AAC3C,gBAAA,QAAQ,GAAG,GAAY,CAAC;YAC1B;QACF;IACF,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,CAC1B;IACD,QACEA,IAAC,UAAU,EAAA,EACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAC,SAAS,EAAA,aAAA,EACL,oBAAoB,EAChC,OAAO,EAAE,WAAW,EAAA,CACpB;AAEN;;;;"}
+{"version":3,"file":"AcceptCallButton.js","sources":["../../../../../../../src/components/CallControls/AcceptCallButton.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback } from 'react';\nimport { IconButton } from '../Button';\nimport { useCall } from '@stream-io/video-react-bindings';\n\nexport type AcceptCallButtonProps = {\n  disabled?: boolean;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  onAccept?: (err?: Error) => void;\n};\n\nexport const AcceptCallButton = ({\n  disabled,\n  onAccept,\n  onClick,\n}: AcceptCallButtonProps) => {\n  const call = useCall();\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.join();\n          onAccept?.();\n        } catch (err) {\n          console.error(`Failed to accept call`, err);\n          onAccept?.(err as Error);\n        }\n      }\n    },\n    [onClick, onAccept, call],\n  );\n  return (\n    <IconButton\n      className=\"str-video__accept-call-button\"\n      size=\"sm\"\n      disabled={disabled}\n      icon=\"call-accept\"\n      variant=\"secondary\"\n      data-testid=\"accept-call-button\"\n      onClick={handleClick}\n    />\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAUO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,OAAO,GACe,KAAI;AAC1B,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IACtB,MAAM,WAAW,GAAyC,WAAW,CACnE,OAAO,CAAC,KAAI;QACV,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,CAAC,CAAC;QACZ;aAAO,IAAI,IAAI,EAAE;AACf,YAAA,IAAI;AACF,gBAAA,MAAM,IAAI,CAAC,IAAI,EAAE;gBACjB,QAAQ,IAAI;YACd;YAAE,OAAO,GAAG,EAAE;AACZ,gBAAA,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,GAAG,CAAC;AAC3C,gBAAA,QAAQ,GAAG,GAAY,CAAC;YAC1B;QACF;IACF,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,CAC1B;AACD,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EACT,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAC,WAAW,EAAA,aAAA,EACP,oBAAoB,EAChC,OAAO,EAAE,WAAW,EAAA,CACpB;AAEN;;;;"}

package/dist/esm/src/components/CallControls/CallControls.js

@@ -4,6 +4,9 @@ import { Restricted } from '@stream-io/video-react-bindings';
 import 'react';
 import 'clsx';
 import '@floating-ui/react';
+import '@stream-io/i18n';
+import '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { SpeakingWhileMutedNotification } from '../Notification/SpeakingWhileMutedNotification.js';
 import { RecordCallButton } from './RecordCallButton.js';
 import { ReactionsButton } from './ReactionsButton.js';

package/dist/esm/src/components/CallControls/CallControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallControls.js","sources":["../../../../../../../src/components/CallControls/CallControls.tsx"],"sourcesContent":["import { OwnCapability } from '@stream-io/video-client';\nimport { Restricted } from '@stream-io/video-react-bindings';\nimport { SpeakingWhileMutedNotification } from '../Notification';\nimport { RecordCallButton } from './RecordCallButton';\nimport { ReactionsButton } from './ReactionsButton';\nimport { ScreenShareButton } from './ScreenShareButton';\nimport { ToggleAudioPublishingButton } from './ToggleAudioButton';\nimport { ToggleVideoPublishingButton } from './ToggleVideoButton';\nimport { CancelCallButton } from './CancelCallButton';\n\nexport type CallControlsProps = {\n  onLeave?: (err?: Error) => void;\n};\n\nexport const CallControls = ({ onLeave }: CallControlsProps) => (\n  <div className=\"str-video__call-controls\">\n    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>\n      <SpeakingWhileMutedNotification>\n        <ToggleAudioPublishingButton />\n      </SpeakingWhileMutedNotification>\n    </Restricted>\n    <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>\n      <ToggleVideoPublishingButton />\n    </Restricted>\n    <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n      <ReactionsButton />\n    </Restricted>\n    <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n      <ScreenShareButton />\n    </Restricted>\n    <Restricted\n      requiredGrants={[\n        OwnCapability.START_RECORD_CALL,\n        OwnCapability.STOP_RECORD_CALL,\n      ]}\n    >\n      <RecordCallButton />\n    </Restricted>\n    <CancelCallButton onLeave={onLeave} />\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAqB,MACzDA,cAAK,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAA,CACvCC,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAAA,QAAA,EACpDA,GAAA,CAAC,8BAA8B,EAAA,EAAA,QAAA,EAC7BA,GAAA,CAAC,2BAA2B,EAAA,EAAA,CAAG,EAAA,CACA,GACtB,EACbA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAAA,QAAA,EACpDA,GAAA,CAAC,2BAA2B,EAAA,EAAA,CAAG,EAAA,CACpB,EACbA,GAAA,CAAC,UAAU,IAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAA,QAAA,EACzDA,IAAC,eAAe,EAAA,EAAA,CAAG,GACR,EACbA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,YACrDA,GAAA,CAAC,iBAAiB,KAAG,EAAA,CACV,EACbA,IAAC,UAAU,EAAA,EACT,cAAc,EAAE;AACd,gBAAA,aAAa,CAAC,iBAAiB;AAC/B,gBAAA,aAAa,CAAC,gBAAgB;AAC/B,aAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,EAAA,CACT,EACbA,GAAA,CAAC,gBAAgB,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,CAAI,CAAA,EAAA,CAClC;;;;"}
+{"version":3,"file":"CallControls.js","sources":["../../../../../../../src/components/CallControls/CallControls.tsx"],"sourcesContent":["import { OwnCapability } from '@stream-io/video-client';\nimport { Restricted } from '@stream-io/video-react-bindings';\nimport { SpeakingWhileMutedNotification } from '../Notification';\nimport { RecordCallButton } from './RecordCallButton';\nimport { ReactionsButton } from './ReactionsButton';\nimport { ScreenShareButton } from './ScreenShareButton';\nimport { ToggleAudioPublishingButton } from './ToggleAudioButton';\nimport { ToggleVideoPublishingButton } from './ToggleVideoButton';\nimport { CancelCallButton } from './CancelCallButton';\n\nexport type CallControlsProps = {\n  onLeave?: (err?: Error) => void;\n};\n\nexport const CallControls = ({ onLeave }: CallControlsProps) => (\n  <div className=\"str-video__call-controls\">\n    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>\n      <SpeakingWhileMutedNotification>\n        <ToggleAudioPublishingButton />\n      </SpeakingWhileMutedNotification>\n    </Restricted>\n    <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>\n      <ToggleVideoPublishingButton />\n    </Restricted>\n    <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n      <ReactionsButton />\n    </Restricted>\n    <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n      <ScreenShareButton />\n    </Restricted>\n    <Restricted\n      requiredGrants={[\n        OwnCapability.START_RECORD_CALL,\n        OwnCapability.STOP_RECORD_CALL,\n      ]}\n    >\n      <RecordCallButton />\n    </Restricted>\n    <CancelCallButton onLeave={onLeave} />\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAcO,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAqB,MACzDA,cAAK,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAA,CACvCC,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAAA,QAAA,EACpDA,GAAA,CAAC,8BAA8B,EAAA,EAAA,QAAA,EAC7BA,GAAA,CAAC,2BAA2B,EAAA,EAAA,CAAG,EAAA,CACA,GACtB,EACbA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAAA,QAAA,EACpDA,GAAA,CAAC,2BAA2B,EAAA,EAAA,CAAG,EAAA,CACpB,EACbA,GAAA,CAAC,UAAU,IAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAA,QAAA,EACzDA,IAAC,eAAe,EAAA,EAAA,CAAG,GACR,EACbA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,YACrDA,GAAA,CAAC,iBAAiB,KAAG,EAAA,CACV,EACbA,IAAC,UAAU,EAAA,EACT,cAAc,EAAE;AACd,gBAAA,aAAa,CAAC,iBAAiB;AAC/B,gBAAA,aAAa,CAAC,gBAAgB;AAC/B,aAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,EAAA,CACT,EACbA,GAAA,CAAC,gBAAgB,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,CAAI,CAAA,EAAA,CAClC;;;;"}

package/dist/esm/src/components/CallControls/CancelCallButton.js

@@ -1,10 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useCallback } from 'react';
 import { OwnCapability } from '@stream-io/video-client';
-import { useI18n, useCall, Restricted } from '@stream-io/video-react-bindings';
+import { useCall, Restricted } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { MenuToggle } from '../Menu/MenuToggle.js';
-import '../Button/CompositeButton.js';
+import { Button } from '../Button/Button.js';
 import { IconButton } from '../Button/IconButton.js';
+import '../Button/CompositeButton.js';
 import { Icon } from '../Icon/Icon.js';
 import 'clsx';
 import '@floating-ui/react';
@@ -13,11 +17,11 @@ import { WithTooltip } from '../Tooltip/WithTooltip.js';
 const EndCallMenu = (props) => {
     const { onLeave, onEnd } = props;
     const { t } = useI18n();
-    return (jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxs("button", { className: "str-video__button str-video__end-call__leave", type: "button", "data-testid": "leave-call-button", onClick: onLeave, children: [jsx(Icon, { className: "str-video__button__icon str-video__end-call__leave-icon", icon: "logout" }), t('Leave call')] }), jsx(Restricted, { requiredGrants: [OwnCapability.END_CALL], children: jsxs("button", { className: "str-video__button str-video__end-call__end", type: "button", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsx(Icon, { className: "str-video__button__icon str-video__end-call__end-icon", icon: "call-end" }), t('End call for all')] }) })] }));
+    return (jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxs(Button, { variant: "secondary", appearance: "outline", className: "str-video__end-call__leave", "data-testid": "leave-call-button", onClick: onLeave, children: [jsx(Icon, { icon: "logout" }), t('callControls.cancelCallButton.leaveCall.title', 'Leave call')] }), jsx(Restricted, { requiredGrants: [OwnCapability.END_CALL], children: jsxs(Button, { variant: "destructive", className: "str-video__end-call__end", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsx(Icon, { icon: "call-end" }), t('callControls.cancelCallButton.endCallForAll.label', 'End call for all')] }) })] }));
 };
 const CancelCallToggleMenuButton = forwardRef(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {
     const { t } = useI18n();
-    return (jsx(WithTooltip, { title: t('Leave call'), tooltipDisabled: menuShown, children: jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: menuShown ? 'active' : 'danger', "data-testid": "leave-call-button", ref: ref }) }));
+    return (jsx(WithTooltip, { title: t('callControls.cancelCallButton.leaveCall.title', 'Leave call'), tooltipDisabled: menuShown, children: jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: "destructive", "data-testid": "leave-call-button", ref: ref }) }));
 });
 const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
     const call = useCall();
@@ -53,7 +57,7 @@ const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
     }, [onClick, onLeave, call]);
     return (jsx(MenuToggle, { placement: "top-start", ToggleButton: CancelCallToggleMenuButton, children: jsx(EndCallMenu, { onEnd: handleEndCall, onLeave: handleLeave }) }));
 };
-const CancelCallButton = ({ disabled, caption, onClick, onLeave, }) => {
+const CancelCallButton = ({ disabled, caption, size, onClick, onLeave, }) => {
     const call = useCall();
     const { t } = useI18n();
     const handleClick = useCallback(async (e) => {
@@ -71,7 +75,8 @@ const CancelCallButton = ({ disabled, caption, onClick, onLeave, }) => {
             }
         }
     }, [onClick, onLeave, call]);
-    return (jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", title: caption ?? t('Leave call'), "data-testid": "cancel-call-button", onClick: handleClick }));
+    return (jsx(IconButton, { size: size, disabled: disabled, icon: "call-end", variant: "destructive", title: caption ??
+            t('callControls.cancelCallButton.leaveCall.title', 'Leave call'), "data-testid": "cancel-call-button", onClick: handleClick }));
 };
 
 export { CancelCallButton, CancelCallConfirmButton };

package/dist/esm/src/components/CallControls/CancelCallButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CancelCallButton.js","sources":["../../../../../../../src/components/CallControls/CancelCallButton.tsx"],"sourcesContent":["import { forwardRef, MouseEventHandler, useCallback } from 'react';\nimport { OwnCapability } from '@stream-io/video-client';\nimport { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';\n\nimport { MenuToggle, ToggleMenuButtonProps } from '../Menu';\n\nimport { IconButton } from '../Button';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\n\nconst EndCallMenu = (props: {\n  onLeave: MouseEventHandler<HTMLButtonElement>;\n  onEnd: MouseEventHandler<HTMLButtonElement>;\n}) => {\n  const { onLeave, onEnd } = props;\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__end-call__confirmation\">\n      <button\n        className=\"str-video__button str-video__end-call__leave\"\n        type=\"button\"\n        data-testid=\"leave-call-button\"\n        onClick={onLeave}\n      >\n        <Icon\n          className=\"str-video__button__icon str-video__end-call__leave-icon\"\n          icon=\"logout\"\n        />\n        {t('Leave call')}\n      </button>\n      <Restricted requiredGrants={[OwnCapability.END_CALL]}>\n        <button\n          className=\"str-video__button str-video__end-call__end\"\n          type=\"button\"\n          data-testid=\"end-call-for-all-button\"\n          onClick={onEnd}\n        >\n          <Icon\n            className=\"str-video__button__icon str-video__end-call__end-icon\"\n            icon=\"call-end\"\n          />\n          {t('End call for all')}\n        </button>\n      </Restricted>\n    </div>\n  );\n};\n\nconst CancelCallToggleMenuButton = forwardRef<\n  HTMLButtonElement,\n  ToggleMenuButtonProps\n>(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {\n  const { t } = useI18n();\n  return (\n    <WithTooltip title={t('Leave call')} tooltipDisabled={menuShown}>\n      <IconButton\n        icon={menuShown ? 'close' : 'call-end'}\n        variant={menuShown ? 'active' : 'danger'}\n        data-testid=\"leave-call-button\"\n        ref={ref}\n      />\n    </WithTooltip>\n  );\n});\n\nexport type CancelCallButtonProps = {\n  disabled?: boolean;\n  caption?: string;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  onLeave?: (err?: Error) => void;\n};\n\nexport const CancelCallConfirmButton = ({\n  onClick,\n  onLeave,\n}: CancelCallButtonProps) => {\n  const call = useCall();\n\n  const handleLeave: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.leave();\n          onLeave?.();\n        } catch (err) {\n          console.error(`Failed to leave call`, err);\n          onLeave?.(err as Error);\n        }\n      }\n    },\n    [onClick, onLeave, call],\n  );\n\n  const handleEndCall: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.endCall();\n          onLeave?.();\n        } catch (err) {\n          console.error(`Failed to end call`, err);\n          onLeave?.(err as Error);\n        }\n      }\n    },\n    [onClick, onLeave, call],\n  );\n\n  return (\n    <MenuToggle placement=\"top-start\" ToggleButton={CancelCallToggleMenuButton}>\n      <EndCallMenu onEnd={handleEndCall} onLeave={handleLeave} />\n    </MenuToggle>\n  );\n};\n\nexport const CancelCallButton = ({\n  disabled,\n  caption,\n  onClick,\n  onLeave,\n}: CancelCallButtonProps) => {\n  const call = useCall();\n  const { t } = useI18n();\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.leave();\n          onLeave?.();\n        } catch (err) {\n          console.error(`Failed to leave call`, err);\n          onLeave?.(err as Error);\n        }\n      }\n    },\n    [onClick, onLeave, call],\n  );\n  return (\n    <IconButton\n      disabled={disabled}\n      icon=\"call-end\"\n      variant=\"danger\"\n      title={caption ?? t('Leave call')}\n      data-testid=\"cancel-call-button\"\n      onClick={handleClick}\n    />\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"CancelCallButton.js","sources":["../../../../../../../src/components/CallControls/CancelCallButton.tsx"],"sourcesContent":["import { forwardRef, MouseEventHandler, useCallback } from 'react';\nimport { OwnCapability } from '@stream-io/video-client';\nimport { Restricted, useCall } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\n\nimport { MenuToggle, ToggleMenuButtonProps } from '../Menu';\n\nimport { Button, ButtonProps, IconButton } from '../Button';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\n\nconst EndCallMenu = (props: {\n  onLeave: MouseEventHandler<HTMLButtonElement>;\n  onEnd: MouseEventHandler<HTMLButtonElement>;\n}) => {\n  const { onLeave, onEnd } = props;\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__end-call__confirmation\">\n      <Button\n        variant=\"secondary\"\n        appearance=\"outline\"\n        className=\"str-video__end-call__leave\"\n        data-testid=\"leave-call-button\"\n        onClick={onLeave}\n      >\n        <Icon icon=\"logout\" />\n        {t('callControls.cancelCallButton.leaveCall.title', 'Leave call')}\n      </Button>\n      <Restricted requiredGrants={[OwnCapability.END_CALL]}>\n        <Button\n          variant=\"destructive\"\n          className=\"str-video__end-call__end\"\n          data-testid=\"end-call-for-all-button\"\n          onClick={onEnd}\n        >\n          <Icon icon=\"call-end\" />\n          {t(\n            'callControls.cancelCallButton.endCallForAll.label',\n            'End call for all',\n          )}\n        </Button>\n      </Restricted>\n    </div>\n  );\n};\n\nconst CancelCallToggleMenuButton = forwardRef<\n  HTMLButtonElement,\n  ToggleMenuButtonProps\n>(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {\n  const { t } = useI18n();\n  return (\n    <WithTooltip\n      title={t('callControls.cancelCallButton.leaveCall.title', 'Leave call')}\n      tooltipDisabled={menuShown}\n    >\n      <IconButton\n        icon={menuShown ? 'close' : 'call-end'}\n        variant=\"destructive\"\n        data-testid=\"leave-call-button\"\n        ref={ref}\n      />\n    </WithTooltip>\n  );\n});\n\nexport type CancelCallButtonProps = {\n  disabled?: boolean;\n  caption?: string;\n  size?: ButtonProps['size'];\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  onLeave?: (err?: Error) => void;\n};\n\nexport const CancelCallConfirmButton = ({\n  onClick,\n  onLeave,\n}: CancelCallButtonProps) => {\n  const call = useCall();\n\n  const handleLeave: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.leave();\n          onLeave?.();\n        } catch (err) {\n          console.error(`Failed to leave call`, err);\n          onLeave?.(err as Error);\n        }\n      }\n    },\n    [onClick, onLeave, call],\n  );\n\n  const handleEndCall: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.endCall();\n          onLeave?.();\n        } catch (err) {\n          console.error(`Failed to end call`, err);\n          onLeave?.(err as Error);\n        }\n      }\n    },\n    [onClick, onLeave, call],\n  );\n\n  return (\n    <MenuToggle placement=\"top-start\" ToggleButton={CancelCallToggleMenuButton}>\n      <EndCallMenu onEnd={handleEndCall} onLeave={handleLeave} />\n    </MenuToggle>\n  );\n};\n\nexport const CancelCallButton = ({\n  disabled,\n  caption,\n  size,\n  onClick,\n  onLeave,\n}: CancelCallButtonProps) => {\n  const call = useCall();\n  const { t } = useI18n();\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.leave();\n          onLeave?.();\n        } catch (err) {\n          console.error(`Failed to leave call`, err);\n          onLeave?.(err as Error);\n        }\n      }\n    },\n    [onClick, onLeave, call],\n  );\n  return (\n    <IconButton\n      size={size}\n      disabled={disabled}\n      icon=\"call-end\"\n      variant=\"destructive\"\n      title={\n        caption ??\n        t('callControls.cancelCallButton.leaveCall.title', 'Leave call')\n      }\n      data-testid=\"cancel-call-button\"\n      onClick={handleClick}\n    />\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/components/CallControls/ReactionsButton.js

@@ -2,10 +2,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { OwnCapability } from '@stream-io/video-client';
-import { useI18n, useCall, Restricted } from '@stream-io/video-react-bindings';
+import { useCall, Restricted } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { useMenuContext, MenuToggle, MenuVisualType } from '../Menu/MenuToggle.js';
-import { CompositeButton } from '../Button/CompositeButton.js';
+import '../Button/Button.js';
 import '../Button/IconButton.js';
+import { CompositeButton } from '../Button/CompositeButton.js';
 import { defaultEmojiReactionMap } from '../Reaction/Reaction.js';
 import { Icon } from '../Icon/Icon.js';
 import '@floating-ui/react';
@@ -43,7 +47,7 @@ const ReactionsButton = ({ reactions = defaultReactions, }) => {
 };
 const ToggleReactionsMenuButton = forwardRef(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {
     const { t } = useI18n();
-    return (jsx(WithTooltip, { title: t('Reactions'), tooltipDisabled: menuShown, children: jsx(CompositeButton, { ref: ref, active: menuShown, variant: "primary", children: jsx(Icon, { icon: "reactions" }) }) }));
+    return (jsx(WithTooltip, { title: t('callControls.reactionsButton.reactions.title', 'Reactions'), tooltipDisabled: menuShown, children: jsx(CompositeButton, { ref: ref, active: menuShown, children: jsx(Icon, { icon: "reactions" }) }) }));
 });
 const DefaultReactionsMenu = ({ reactions, layout = 'horizontal', }) => {
     const call = useCall();

package/dist/esm/src/components/CallControls/ReactionsButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionsButton.js","sources":["../../../../../../../src/components/CallControls/ReactionsButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { OwnCapability, StreamReaction } from '@stream-io/video-client';\nimport { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';\n\nimport {\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n  useMenuContext,\n} from '../Menu';\nimport { CompositeButton } from '../Button';\nimport { defaultEmojiReactionMap } from '../Reaction';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\n\nexport const defaultReactions: StreamReaction[] = [\n  {\n    type: 'reaction',\n    emoji_code: ':like:',\n  },\n  {\n    // TODO OL: use `prompt` type?\n    type: 'raised-hand',\n    emoji_code: ':raise-hand:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':fireworks:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':dislike:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':heart:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':smile:',\n  },\n];\n\nexport interface ReactionsButtonProps {\n  reactions?: StreamReaction[];\n}\n\nexport const ReactionsButton = ({\n  reactions = defaultReactions,\n}: ReactionsButtonProps) => {\n  return (\n    <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n      <MenuToggle\n        placement=\"top\"\n        ToggleButton={ToggleReactionsMenuButton}\n        visualType={MenuVisualType.MENU}\n      >\n        <DefaultReactionsMenu reactions={reactions} />\n      </MenuToggle>\n    </Restricted>\n  );\n};\n\nconst ToggleReactionsMenuButton = forwardRef<\n  HTMLDivElement,\n  ToggleMenuButtonProps\n>(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {\n  const { t } = useI18n();\n  return (\n    <WithTooltip title={t('Reactions')} tooltipDisabled={menuShown}>\n      <CompositeButton ref={ref} active={menuShown} variant=\"primary\">\n        <Icon icon=\"reactions\" />\n      </CompositeButton>\n    </WithTooltip>\n  );\n});\n\nexport interface DefaultReactionsMenuProps {\n  reactions: StreamReaction[];\n  layout?: 'horizontal' | 'vertical';\n}\n\nexport const DefaultReactionsMenu = ({\n  reactions,\n  layout = 'horizontal',\n}: DefaultReactionsMenuProps) => {\n  const call = useCall();\n  const { close } = useMenuContext();\n  return (\n    <div\n      className={clsx('str-video__reactions-menu', {\n        'str-video__reactions-menu--horizontal': layout === 'horizontal',\n        'str-video__reactions-menu--vertical': layout === 'vertical',\n      })}\n    >\n      {reactions.map((reaction) => (\n        <button\n          key={reaction.emoji_code}\n          type=\"button\"\n          className=\"str-video__reactions-menu__button\"\n          onClick={() => {\n            call?.sendReaction(reaction);\n            close?.();\n          }}\n        >\n          {reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code]}\n        </button>\n      ))}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;AAiBO,MAAM,gBAAgB,GAAqB;AAChD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,QAAQ;AACrB,KAAA;AACD,IAAA;;AAEE,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,UAAU,EAAE,cAAc;AAC3B,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA;;AAOI,MAAM,eAAe,GAAG,CAAC,EAC9B,SAAS,GAAG,gBAAgB,GACP,KAAI;AACzB,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAA,QAAA,EACzDA,GAAA,CAAC,UAAU,EAAA,EACT,SAAS,EAAC,KAAK,EACf,YAAY,EAAE,yBAAyB,EACvC,UAAU,EAAE,cAAc,CAAC,IAAI,EAAA,QAAA,EAE/BA,GAAA,CAAC,oBAAoB,EAAA,EAAC,SAAS,EAAE,SAAS,GAAI,EAAA,CACnC,EAAA,CACF;AAEjB;AAEA,MAAM,yBAAyB,GAAG,UAAU,CAG1C,SAAS,+BAA+B,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAA;AAC3D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,WAAW,IAAC,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,eAAe,EAAE,SAAS,YAC5DA,GAAA,CAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAC,SAAS,EAAA,QAAA,EAC7DA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,WAAW,GAAG,EAAA,CACT,EAAA,CACN;AAElB,CAAC,CAAC;AAOK,MAAM,oBAAoB,GAAG,CAAC,EACnC,SAAS,EACT,MAAM,GAAG,YAAY,GACK,KAAI;AAC9B,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,EAAE;AAClC,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,2BAA2B,EAAE;YAC3C,uCAAuC,EAAE,MAAM,KAAK,YAAY;YAChE,qCAAqC,EAAE,MAAM,KAAK,UAAU;SAC7D,CAAC,EAAA,QAAA,EAED,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,MACtBA,gBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC;gBAC5B,KAAK,IAAI;YACX,CAAC,EAAA,QAAA,EAEA,QAAQ,CAAC,UAAU,IAAI,uBAAuB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAA,EAR/D,QAAQ,CAAC,UAAU,CASjB,CACV,CAAC,EAAA,CACE;AAEV;;;;"}
+{"version":3,"file":"ReactionsButton.js","sources":["../../../../../../../src/components/CallControls/ReactionsButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { OwnCapability, StreamReaction } from '@stream-io/video-client';\nimport { Restricted, useCall } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\n\nimport {\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n  useMenuContext,\n} from '../Menu';\nimport { CompositeButton } from '../Button';\nimport { defaultEmojiReactionMap } from '../Reaction';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\n\nexport const defaultReactions: StreamReaction[] = [\n  {\n    type: 'reaction',\n    emoji_code: ':like:',\n  },\n  {\n    // TODO OL: use `prompt` type?\n    type: 'raised-hand',\n    emoji_code: ':raise-hand:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':fireworks:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':dislike:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':heart:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':smile:',\n  },\n];\n\nexport interface ReactionsButtonProps {\n  reactions?: StreamReaction[];\n}\n\nexport const ReactionsButton = ({\n  reactions = defaultReactions,\n}: ReactionsButtonProps) => {\n  return (\n    <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n      <MenuToggle\n        placement=\"top\"\n        ToggleButton={ToggleReactionsMenuButton}\n        visualType={MenuVisualType.MENU}\n      >\n        <DefaultReactionsMenu reactions={reactions} />\n      </MenuToggle>\n    </Restricted>\n  );\n};\n\nconst ToggleReactionsMenuButton = forwardRef<\n  HTMLDivElement,\n  ToggleMenuButtonProps\n>(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {\n  const { t } = useI18n();\n  return (\n    <WithTooltip\n      title={t('callControls.reactionsButton.reactions.title', 'Reactions')}\n      tooltipDisabled={menuShown}\n    >\n      <CompositeButton ref={ref} active={menuShown}>\n        <Icon icon=\"reactions\" />\n      </CompositeButton>\n    </WithTooltip>\n  );\n});\n\nexport interface DefaultReactionsMenuProps {\n  reactions: StreamReaction[];\n  layout?: 'horizontal' | 'vertical';\n}\n\nexport const DefaultReactionsMenu = ({\n  reactions,\n  layout = 'horizontal',\n}: DefaultReactionsMenuProps) => {\n  const call = useCall();\n  const { close } = useMenuContext();\n  return (\n    <div\n      className={clsx('str-video__reactions-menu', {\n        'str-video__reactions-menu--horizontal': layout === 'horizontal',\n        'str-video__reactions-menu--vertical': layout === 'vertical',\n      })}\n    >\n      {reactions.map((reaction) => (\n        <button\n          key={reaction.emoji_code}\n          type=\"button\"\n          className=\"str-video__reactions-menu__button\"\n          onClick={() => {\n            call?.sendReaction(reaction);\n            close?.();\n          }}\n        >\n          {reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code]}\n        </button>\n      ))}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAkBO,MAAM,gBAAgB,GAAqB;AAChD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,QAAQ;AACrB,KAAA;AACD,IAAA;;AAEE,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,UAAU,EAAE,cAAc;AAC3B,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA;;AAOI,MAAM,eAAe,GAAG,CAAC,EAC9B,SAAS,GAAG,gBAAgB,GACP,KAAI;AACzB,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAA,QAAA,EACzDA,GAAA,CAAC,UAAU,EAAA,EACT,SAAS,EAAC,KAAK,EACf,YAAY,EAAE,yBAAyB,EACvC,UAAU,EAAE,cAAc,CAAC,IAAI,EAAA,QAAA,EAE/BA,GAAA,CAAC,oBAAoB,EAAA,EAAC,SAAS,EAAE,SAAS,GAAI,EAAA,CACnC,EAAA,CACF;AAEjB;AAEA,MAAM,yBAAyB,GAAG,UAAU,CAG1C,SAAS,+BAA+B,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAA;AAC3D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,WAAW,EAAA,EACV,KAAK,EAAE,CAAC,CAAC,8CAA8C,EAAE,WAAW,CAAC,EACrE,eAAe,EAAE,SAAS,YAE1BA,GAAA,CAAC,eAAe,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAA,QAAA,EAC1CA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,WAAW,GAAG,EAAA,CACT,EAAA,CACN;AAElB,CAAC,CAAC;AAOK,MAAM,oBAAoB,GAAG,CAAC,EACnC,SAAS,EACT,MAAM,GAAG,YAAY,GACK,KAAI;AAC9B,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,EAAE;AAClC,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,2BAA2B,EAAE;YAC3C,uCAAuC,EAAE,MAAM,KAAK,YAAY;YAChE,qCAAqC,EAAE,MAAM,KAAK,UAAU;SAC7D,CAAC,EAAA,QAAA,EAED,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,MACtBA,gBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC;gBAC5B,KAAK,IAAI;YACX,CAAC,EAAA,QAAA,EAEA,QAAQ,CAAC,UAAU,IAAI,uBAAuB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAA,EAR/D,QAAQ,CAAC,UAAU,CASjB,CACV,CAAC,EAAA,CACE;AAEV;;;;"}

package/dist/esm/src/components/CallControls/RecordCallButton.js

@@ -1,9 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { OwnCapability } from '@stream-io/video-client';
-import { useI18n, useToggleCallRecording, Restricted } from '@stream-io/video-react-bindings';
-import { CompositeButton } from '../Button/CompositeButton.js';
+import { useToggleCallRecording, Restricted } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
+import { Button } from '../Button/Button.js';
 import '../Button/IconButton.js';
+import { CompositeButton } from '../Button/CompositeButton.js';
 import { Icon } from '../Icon/Icon.js';
 import { MenuToggle, MenuVisualType, useMenuContext } from '../Menu/MenuToggle.js';
 import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.js';
@@ -17,10 +21,10 @@ const RecordEndConfirmation = (props) => {
     const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();
     const { close } = useMenuContext();
     const handleClick = createCallControlHandler(props, toggleCallRecording);
-    return (jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxs("div", { className: "str-video__end-recording__header", children: [jsx(Icon, { icon: "recording-on" }), jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxs("div", { className: "str-video__end-recording__actions", children: [jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsx(CompositeButton, { variant: "primary", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
+    return (jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxs("div", { className: "str-video__end-recording__header", children: [jsx(Icon, { icon: "recording-on" }), jsxs("div", { className: "str-video__end-recording__text", children: [jsx("h2", { className: "str-video__end-recording__heading", children: t('callControls.recordCallButton.endRecording.title', 'End recording') }), jsx("p", { className: "str-video__end-recording__description", children: t('callControls.recordCallButton.confirmEndRecording.description', 'Are you sure you want end the recording?') })] })] }), jsxs("div", { className: "str-video__end-recording__actions", children: [jsx(Button, { variant: "destructive", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (t('callControls.recordCallButton.endRecording.title', 'End recording')) }), jsx(Button, { variant: "secondary", appearance: "outline", onClick: close, children: t('common.cancel.label', 'Cancel') })] })] }));
 };
 const ToggleEndRecordingMenuButton = forwardRef(function ToggleEndRecordingMenuButtonRender(props, ref) {
-    return (jsx(CompositeButton, { ref: ref, active: true, variant: "secondary", "data-testid": "recording-stop-button", children: jsx(Icon, { icon: "recording-off" }) }));
+    return (jsx(CompositeButton, { ref: ref, active: true, variant: "destructive", "data-testid": "recording-stop-button", children: jsx(Icon, { icon: "recording-off" }) }));
 });
 const RecordCallConfirmationButton = (props) => {
     const { caption } = props;
@@ -34,28 +38,30 @@ const RecordCallConfirmationButton = (props) => {
             ], children: jsx(MenuToggle, { ToggleButton: ToggleEndRecordingMenuButton, visualType: MenuVisualType.PORTAL, children: jsx(RecordEndConfirmation, { onError: props.onError }) }) }));
     }
     const title = isAwaitingResponse
-        ? t('Waiting for recording to start...')
-        : (caption ?? t('Record call'));
+        ? t('callControls.recordCallButton.waitingRecordingStart.title', 'Waiting for recording to start...')
+        : (caption ??
+            t('callControls.recordCallButton.recordCall.title', 'Record call'));
     return (jsx(Restricted, { requiredGrants: [
             OwnCapability.START_RECORD_CALL,
             OwnCapability.STOP_RECORD_CALL,
-        ], children: jsx(WithTooltip, { title: title, children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (jsx(Icon, { icon: "recording-off" })) }) }) }));
+        ], children: jsx(WithTooltip, { title: title, children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: isCallRecordingInProgress ? 'destructive' : 'secondary', "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (jsx(Icon, { icon: "recording-off" })) }) }) }));
 };
 const RecordCallButton = (props) => {
     const { caption } = props;
     const { t } = useI18n();
     const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
     const handleClick = createCallControlHandler(props, toggleCallRecording);
-    let title = caption ?? t('Record call');
+    let title = caption ??
+        t('callControls.recordCallButton.recordCall.title', 'Record call');
     if (isAwaitingResponse) {
         title = isCallRecordingInProgress
-            ? t('Waiting for recording to stop...')
-            : t('Waiting for recording to start...');
+            ? t('callControls.recordCallButton.waitingRecordingStop.title', 'Waiting for recording to stop...')
+            : t('callControls.recordCallButton.waitingRecordingStart.title', 'Waiting for recording to start...');
     }
     return (jsx(Restricted, { requiredGrants: [
             OwnCapability.START_RECORD_CALL,
             OwnCapability.STOP_RECORD_CALL,
-        ], children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": isCallRecordingInProgress
+        ], children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: isCallRecordingInProgress ? 'destructive' : 'secondary', "data-testid": isCallRecordingInProgress
                 ? 'recording-stop-button'
                 : 'recording-start-button', title: title, onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (jsx(Icon, { icon: isCallRecordingInProgress ? 'recording-on' : 'recording-off' })) }) }));
 };