@channel.io/bezier-react 2.0.7 → 2.0.9

package/dist/esm/utils/number.mjs

@@ -1,7 +1,4 @@
 function clamp(target, boundOne, boundTwo) {
-  if (!boundTwo) {
-    return Math.max(target, boundOne) === boundOne ? target : boundOne;
-  }
   if (Math.min(target, boundOne) === target) {
     return boundOne;
   }

package/dist/esm/utils/number.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"number.mjs","sources":["../../../src/utils/number.ts"],"sourcesContent":["export function range(start: number, end?: number, _step?: number): number[] {\n  if (end === undefined) {\n    if (start < 0) {\n      return Array.from({ length: -1 * start }, (_, i) => (i ? -1 * i : 0))\n    }\n    return Array.from({ length: start }, (_, i) => i)\n  }\n  const step = _step ?? 1\n  const length = step === 0 ? end - start : (end - start) / step\n  return Array.from({ length }, (_, i) => start + i * step)\n}\n\nexport function clamp(\n  target: number,\n  boundOne: number,\n  boundTwo?: number\n): number {\n  if (!boundTwo) {\n    return Math.max(target, boundOne) === boundOne ? target : boundOne\n  }\n  if (Math.min(target, boundOne) === target) {\n    return boundOne\n  }\n  if (Math.max(target, boundTwo) === target) {\n    return boundTwo\n  }\n  return target\n}\n"],"names":["clamp","target","boundOne","boundTwo","Math","max","min"],"mappings":"AAYO,SAASA,KAAKA,CACnBC,MAAc,EACdC,QAAgB,EAChBC,QAAiB,EACT;EACR,IAAI,CAACA,QAAQ,EAAE;AACb,IAAA,OAAOC,IAAI,CAACC,GAAG,CAACJ,MAAM,EAAEC,QAAQ,CAAC,KAAKA,QAAQ,GAAGD,MAAM,GAAGC,QAAQ,CAAA;AACpE,GAAA;EACA,IAAIE,IAAI,CAACE,GAAG,CAACL,MAAM,EAAEC,QAAQ,CAAC,KAAKD,MAAM,EAAE;AACzC,IAAA,OAAOC,QAAQ,CAAA;AACjB,GAAA;EACA,IAAIE,IAAI,CAACC,GAAG,CAACJ,MAAM,EAAEE,QAAQ,CAAC,KAAKF,MAAM,EAAE;AACzC,IAAA,OAAOE,QAAQ,CAAA;AACjB,GAAA;AACA,EAAA,OAAOF,MAAM,CAAA;AACf;;;;"}
+{"version":3,"file":"number.mjs","sources":["../../../src/utils/number.ts"],"sourcesContent":["export function range(start: number, end?: number, _step?: number): number[] {\n  if (end === undefined) {\n    if (start < 0) {\n      return Array.from({ length: -1 * start }, (_, i) => (i ? -1 * i : 0))\n    }\n    return Array.from({ length: start }, (_, i) => i)\n  }\n  const step = _step ?? 1\n  const length = step === 0 ? end - start : (end - start) / step\n  return Array.from({ length }, (_, i) => start + i * step)\n}\n\nexport function clamp(\n  target: number,\n  boundOne: number,\n  boundTwo?: number\n): number {\n  if (!boundTwo) {\n    return Math.max(target, boundOne) === boundOne ? target : boundOne\n  }\n  if (Math.min(target, boundOne) === target) {\n    return boundOne\n  }\n  if (Math.max(target, boundTwo) === target) {\n    return boundTwo\n  }\n  return target\n}\n"],"names":["clamp","target","boundOne","boundTwo","Math","min","max"],"mappings":"AAYO,SAASA,KAAKA,CACnBC,MAAc,EACdC,QAAgB,EAChBC,QAAiB,EACT;EAIR,IAAIC,IAAI,CAACC,GAAG,CAACJ,MAAM,EAAEC,QAAQ,CAAC,KAAKD,MAAM,EAAE;AACzC,IAAA,OAAOC,QAAQ,CAAA;AACjB,GAAA;EACA,IAAIE,IAAI,CAACE,GAAG,CAACL,MAAM,EAAEE,QAAQ,CAAC,KAAKF,MAAM,EAAE;AACzC,IAAA,OAAOE,QAAQ,CAAA;AACjB,GAAA;AACA,EAAA,OAAOF,MAAM,CAAA;AACf;;;;"}

package/dist/types/components/AlphaAvatar/AvatarSizeContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type AvatarProps } from './Avatar.types';
+declare const AvatarContextProvider: import("react").Provider<Pick<AvatarProps, "size">>, useAvatarContext: () => Pick<AvatarProps, "size">;
+export { AvatarContextProvider, useAvatarContext };
+//# sourceMappingURL=AvatarSizeContext.d.ts.map

package/dist/types/components/AlphaAvatar/AvatarSizeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarSizeContext.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaAvatar/AvatarSizeContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAEjD,QAAA,MAAO,qBAAqB,uDAAE,gBAAgB,iCAExB,CAAA;AAEtB,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/types/components/AlphaAvatarGroup/AvatarGroup.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import { type AvatarGroupContextValue, type AvatarGroupProps } from './AvatarGroup.types';
-declare const useAvatarGroupContext: () => AvatarGroupContextValue | undefined;
-export { useAvatarGroupContext };
+import { type AvatarGroupProps } from './AvatarGroup.types';
 export declare const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = "bezier-avatar-group-ellipsis-icon";
 /**
  * `AvatarGroup` is a component for grouping `Avatar` components

package/dist/types/components/AlphaAvatarGroup/AvatarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAkB/D,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAmC,qBAAqB,2CAE5C,CAAA;AAEZ,OAAO,EAAE,qBAAqB,EAAE,CAAA;AAIhC,eAAO,MAAM,kCAAkC,sCACV,CAAA;AA2CrC;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,yFAsIvB,CAAA"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAkB/D,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAM3D,eAAO,MAAM,kCAAkC,sCACV,CAAA;AA2CrC;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,yFAsIvB,CAAA"}

package/dist/types/components/AlphaAvatarGroup/AvatarGroup.types.d.ts

@@ -1,5 +1,5 @@
 import type { BezierComponentProps, ChildrenProps, SizeProps } from "../../types/props";
-import { type AlphaAvatarProps, type AlphaAvatarSize } from "../AlphaAvatar";
+import { type AlphaAvatarSize } from "../AlphaAvatar";
 type AvatarGroupEllipsisType = 'icon' | 'count';
 interface AvatarGroupOwnProps {
     /**
@@ -20,8 +20,6 @@ interface AvatarGroupOwnProps {
      */
     ellipsisType?: AvatarGroupEllipsisType;
 }
-export interface AvatarGroupContextValue extends Pick<AlphaAvatarProps, 'size'> {
-}
 export interface AvatarGroupProps extends BezierComponentProps<'div'>, ChildrenProps, SizeProps<AlphaAvatarSize>, AvatarGroupOwnProps {
 }
 export {};

package/dist/types/components/AlphaAvatarGroup/AvatarGroup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,aAAa,EACb,SAAS,EACV,0BAAyB;AAE1B,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,uBAAoC;AAErC,KAAK,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,UAAU,mBAAmB;IAC3B;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAA;IAEX;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAA;CACvC;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;CAAG;AAE3C,MAAM,WAAW,gBACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,aAAa,EACb,SAAS,CAAC,eAAe,CAAC,EAC1B,mBAAmB;CAAG"}
+{"version":3,"file":"AvatarGroup.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,aAAa,EACb,SAAS,EACV,0BAAyB;AAE1B,OAAO,EAEL,KAAK,eAAe,EACrB,uBAAoC;AAErC,KAAK,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,UAAU,mBAAmB;IAC3B;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAA;IAEX;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAA;CACvC;AAED,MAAM,WAAW,gBACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,aAAa,EACb,SAAS,CAAC,eAAe,CAAC,EAC1B,mBAAmB;CAAG"}

package/dist/types/components/AlphaButton/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaButton/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EACL,KAAK,WAAW,EAEjB,uBAAiD;AA8DlD,eAAO,MAAM,MAAM,uFAmElB,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaButton/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EACL,KAAK,WAAW,EAEjB,uBAAiD;AAkDlD,eAAO,MAAM,MAAM,uFA0ElB,CAAA"}

package/dist/types/components/AlphaFloatingButton/FloatingButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EACL,KAAK,mBAAmB,EAEzB,+BAAiE;AA8DlE,eAAO,MAAM,cAAc,+FAiEzB,CAAA"}
+{"version":3,"file":"FloatingButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EACL,KAAK,mBAAmB,EAEzB,+BAAiE;AAkDlE,eAAO,MAAM,cAAc,+FAwEzB,CAAA"}

package/dist/types/components/AlphaFloatingIconButton/FloatingIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EAAE,KAAK,4BAA4B,EAAE,WAAgD;AAgC5F,eAAO,MAAM,kBAAkB,wGAqD7B,CAAA"}
+{"version":3,"file":"FloatingIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EAAE,KAAK,4BAA4B,EAAE,WAAgD;AAoB5F,eAAO,MAAM,kBAAkB,wGA4D7B,CAAA"}

package/dist/types/components/AlphaIconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EAAE,KAAK,oBAAoB,EAAE,WAAwC;AAgC5E,eAAO,MAAM,UAAU,gGA0DtB,CAAA"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,EAAE,KAAK,oBAAoB,EAAE,WAAwC;AAoB5E,eAAO,MAAM,UAAU,gGAiEtB,CAAA"}

package/dist/types/components/AlphaSpinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaSpinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAInD,eAAO,MAAM,eAAe,mBAAmB,CAAA;AAE/C,eAAO,MAAM,OAAO,sFAuCnB,CAAA"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaSpinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAInD,eAAO,MAAM,eAAe,mBAAmB,CAAA;AAE/C,eAAO,MAAM,OAAO,sFAsCnB,CAAA"}

package/dist/types/components/AlphaToggleButton/ToggleButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type ToggleButtonProps } from './ToggleButton.types';
+export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToggleButton.d.ts.map

package/dist/types/components/AlphaToggleButton/ToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAYzC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAsB7D,eAAO,MAAM,YAAY,6FAkFxB,CAAA"}

package/dist/types/components/AlphaToggleButton/ToggleButton.types.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import { type BezierIcon } from '@channel.io/bezier-icons';
+import { type BezierComponentProps, type DisableProps, type PolymorphicProps, type SizeProps } from "../../types/props";
+type ToggleButtonSize = 'm';
+interface ToggleButtonOwnProps {
+    /**
+     * The text content in the button.
+     */
+    text: string;
+    /**
+     * If `loading` is true, spinner will be shown, replacing the content.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Props that shows whether the button is selected.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * The selected state of the button when it is initially rendered.
+     * Use when you **do not need to control** its selected state.
+     */
+    defaultSelected?: boolean;
+    /**
+     * The value to associate with the button when selected in a `ToggleButtonGroup` component.
+     */
+    value: string;
+    /**
+     * Types of visual styles for button.
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * Shape of button.
+     * @default 'capsule'
+     */
+    shape?: 'capsule' | 'rectangle';
+    /**
+     * Icon on the left.
+     */
+    prefixContent?: BezierIcon | ReactNode;
+    /**
+     * Icon on the right.
+     */
+    suffixContent?: BezierIcon | ReactNode;
+    /**
+     * Callback function to be called when the button toggles.
+     */
+    onSelectedChange?: (selected: boolean) => void;
+}
+export interface ToggleButtonProps extends Omit<BezierComponentProps<'button'>, keyof ToggleButtonOwnProps>, PolymorphicProps, SizeProps<ToggleButtonSize>, DisableProps, ToggleButtonOwnProps {
+}
+export {};
+//# sourceMappingURL=ToggleButton.types.d.ts.map

package/dist/types/components/AlphaToggleButton/ToggleButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,0BAAyB;AAE1B,KAAK,gBAAgB,GAAG,GAAG,CAAA;AAE3B,UAAU,oBAAoB;IAC5B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAEjC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAE/B;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IAEtC;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;CAC/C;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,MAAM,oBAAoB,CAAC,EACtE,gBAAgB,EAChB,SAAS,CAAC,gBAAgB,CAAC,EAC3B,YAAY,EACZ,oBAAoB;CAAG"}

package/dist/types/components/AlphaToggleButton/ToggleButtonContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type ToggleButtonProps } from "./ToggleButton.types";
+declare const ToggleButtonProvider: import("react").Provider<Pick<ToggleButtonProps, "shape">>, useToggleButtonContext: () => Pick<ToggleButtonProps, "shape">;
+export { ToggleButtonProvider, useToggleButtonContext };
+//# sourceMappingURL=ToggleButtonContext.d.ts.map

package/dist/types/components/AlphaToggleButton/ToggleButtonContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonContext.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaToggleButton/ToggleButtonContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,6BAA6D;AAE9F,QAAA,MAAO,oBAAoB,8DAAE,sBAAsB,wCAE5B,CAAA;AAEvB,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/types/components/AlphaToggleButton/index.d.ts

@@ -0,0 +1,3 @@
+export { ToggleButton as AlphaToggleButton } from './ToggleButton';
+export type { ToggleButtonProps as AlphaToggleButtonProps } from './ToggleButton.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/AlphaToggleButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaToggleButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAClE,YAAY,EAAE,iBAAiB,IAAI,sBAAsB,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/types/components/AlphaToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { type ToggleButtonMultipleGroupProps, type ToggleButtonSingleGroupProps } from "./ToggleButtonGroup.types";
+/**
+ * `ToggleButtonGroup` is a group of two-state buttons that can be toggled.
+ *  Notice that it keeps at least one button selected.
+ *  @example
+ *
+ * ```tsx
+ * <ToggleButtonGroup
+ *   shape="rectangle"
+ *   value="two"
+ * >
+ *   <ToggleButton
+ *     value="one"
+ *     text="left"
+ *   />
+ *   <ToggleButton
+ *     value="two"
+ *     text="center"
+ *   />
+ *   <ToggleButton
+ *     value="three"
+ *     text="right"
+ *   />
+ * </ToggleButtonGroup>
+ * ```
+ */
+export declare const ToggleButtonGroup: React.ForwardRefExoticComponent<(ToggleButtonSingleGroupProps | ToggleButtonMultipleGroupProps) & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ToggleButtonGroup.d.ts.map

package/dist/types/components/AlphaToggleButtonGroup/ToggleButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAOlD,OAAO,EACL,KAAK,8BAA8B,EACnC,KAAK,4BAA4B,EAClC,kCAAuE;AAIxE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,iBAAiB,wIAoD5B,CAAA"}

package/dist/types/components/AlphaToggleButtonGroup/ToggleButtonGroup.types.d.ts

@@ -0,0 +1,40 @@
+import { type PropsWithChildren } from 'react';
+import { type BezierComponentProps, type PolymorphicProps } from "../../types/props";
+import { type ToggleButtonProps } from "../AlphaToggleButton/ToggleButton.types";
+type Value<T> = T extends 'single' ? string : string[];
+interface ToggleButtonGroupOwnProps<T extends string = 'single' | 'multiple'> {
+    /**
+     * Shape of `ToggleButtonComponent` rendered as children.
+     * @default 'capsule'
+     */
+    shape?: ToggleButtonProps['shape'];
+    /**
+     * If true, the button group will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Determines whether a single or multiple buttons can be selected at a time.
+     * @default 'single'
+     */
+    type: T;
+    /**
+     * The controlled value of the selected button.
+     */
+    value?: Value<T>;
+    /**
+     * The reading direction of the button group.
+     * @default 'ltr'
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Event handler called when the selected state of an button changes.
+     */
+    onValueChange?: T extends 'single' ? (value: string) => void : (value: string[]) => void;
+}
+export interface ToggleButtonSingleGroupProps extends Omit<BezierComponentProps<'div'>, keyof ToggleButtonGroupOwnProps | 'defaultValue'>, PropsWithChildren, PolymorphicProps, ToggleButtonGroupOwnProps<'single'> {
+}
+export interface ToggleButtonMultipleGroupProps extends Omit<BezierComponentProps<'div'>, keyof ToggleButtonGroupOwnProps | 'defaultValue'>, PropsWithChildren, PolymorphicProps, ToggleButtonGroupOwnProps<'multiple'> {
+}
+export {};
+//# sourceMappingURL=ToggleButtonGroup.types.d.ts.map

package/dist/types/components/AlphaToggleButtonGroup/ToggleButtonGroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaToggleButtonGroup/ToggleButtonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACtB,0BAAyB;AAE1B,OAAO,EAAE,KAAK,iBAAiB,EAAE,gDAA6D;AAE9F,KAAK,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,QAAQ,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;AAEtD,UAAU,yBAAyB,CAAC,CAAC,SAAS,MAAM,GAAG,QAAQ,GAAG,UAAU;IAC1E;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAA;IAElC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;OAGG;IACH,IAAI,EAAE,CAAC,CAAA;IAEP;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,QAAQ,GAC9B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GACvB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,4BACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,KAAK,CAAC,EAC3B,MAAM,yBAAyB,GAAG,cAAc,CACjD,EACD,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,CAAC,QAAQ,CAAC;CAAG;AAE1C,MAAM,WAAW,8BACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,KAAK,CAAC,EAC3B,MAAM,yBAAyB,GAAG,cAAc,CACjD,EACD,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,CAAC,UAAU,CAAC;CAAG"}

package/dist/types/components/AlphaToggleButtonGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { ToggleButtonGroup } from './ToggleButtonGroup';
+export type { ToggleButtonMultipleGroupProps, ToggleButtonSingleGroupProps, } from './ToggleButtonGroup.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/AlphaToggleButtonGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AlphaToggleButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,YAAY,EACV,8BAA8B,EAC9B,4BAA4B,GAC7B,MAAM,2BAA2B,CAAA"}

package/dist/types/components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAO/C,OAAO,EAAE,KAAK,SAAS,EAAiB,MAAM,cAAc,CAAA;AAI5D,eAAO,MAAM,YAAY,gBAAgB,CAAA;AAezC,eAAO,MAAM,IAAI,4GAgChB,CAAA"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAO/C,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAI7C,eAAO,MAAM,YAAY,gBAAgB,CAAA;AAEzC,eAAO,MAAM,IAAI,4GAmChB,CAAA"}

package/dist/types/index.d.ts

@@ -8,6 +8,8 @@ export * from "./components/AlphaFloatingButton";
 export * from "./components/AlphaFloatingIconButton";
 export * from "./components/AlphaIconButton";
 export * from "./components/AlphaSpinner";
+export * from "./components/AlphaToggleButton";
+export * from "./components/AlphaToggleButtonGroup";
 export * from "./components/AlphaTooltipPrimitive";
 export * from "./components/AppProvider";
 export * from "./components/AutoFocus";

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAGlD,yCAA4C;AAC5C,8CAAiD;AACjD,yCAA4C;AAC5C,kDAAqD;AACrD,iDAAoD;AACpD,qDAAwD;AACxD,6CAAgD;AAChD,0CAA6C;AAC7C,mDAAsD;AACtD,yCAA4C;AAC5C,uCAA0C;AAC1C,oCAAuC;AACvC,yCAA4C;AAC5C,mCAAsC;AACtC,oCAAuC;AACvC,iCAAoC;AACpC,oCAAuC;AACvC,yCAA4C;AAC5C,oCAAuC;AACvC,6CAAgD;AAChD,sCAAyC;AACzC,0CAA6C;AAC7C,qCAAwC;AACxC,mCAAsC;AACtC,6CAAgD;AAChD,yCAA4C;AAC5C,uCAA0C;AAC1C,4CAA+C;AAC/C,uCAA0C;AAC1C,kCAAqC;AACrC,kCAAqC;AACrC,0CAA6C;AAC7C,wCAA2C;AAC3C,yCAA4C;AAC5C,2CAA8C;AAC9C,sCAAyC;AACzC,mCAAsC;AACtC,sCAAyC;AACzC,qCAAwC;AACxC,yCAA4C;AAC5C,qCAAwC;AACxC,yCAA4C;AAC5C,wCAA2C;AAC3C,0CAA6C;AAC7C,8CAAiD;AACjD,oCAAuC;AACvC,oCAAuC;AACvC,8CAAiD;AACjD,qCAAwC;AACxC,mCAAsC;AACtC,oCAAuC;AACvC,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,kCAAqC;AACrC,sCAAyC;AACzC,uCAA0C;AAC1C,2CAA8C;AAC9C,mCAAsC;AACtC,qCAAwC;AACxC,4CAA+C;AAC/C,4CAA+C;AAG/C,8DAAiE;AAGjE,8BAAiC;AACjC,+BAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAGlD,yCAA4C;AAC5C,8CAAiD;AACjD,yCAA4C;AAC5C,kDAAqD;AACrD,iDAAoD;AACpD,qDAAwD;AACxD,6CAAgD;AAChD,0CAA6C;AAC7C,+CAAkD;AAClD,oDAAuD;AACvD,mDAAsD;AACtD,yCAA4C;AAC5C,uCAA0C;AAC1C,oCAAuC;AACvC,yCAA4C;AAC5C,mCAAsC;AACtC,oCAAuC;AACvC,iCAAoC;AACpC,oCAAuC;AACvC,yCAA4C;AAC5C,oCAAuC;AACvC,6CAAgD;AAChD,sCAAyC;AACzC,0CAA6C;AAC7C,qCAAwC;AACxC,mCAAsC;AACtC,6CAAgD;AAChD,yCAA4C;AAC5C,uCAA0C;AAC1C,4CAA+C;AAC/C,uCAA0C;AAC1C,kCAAqC;AACrC,kCAAqC;AACrC,0CAA6C;AAC7C,wCAA2C;AAC3C,yCAA4C;AAC5C,2CAA8C;AAC9C,sCAAyC;AACzC,mCAAsC;AACtC,sCAAyC;AACzC,qCAAwC;AACxC,yCAA4C;AAC5C,qCAAwC;AACxC,yCAA4C;AAC5C,wCAA2C;AAC3C,0CAA6C;AAC7C,8CAAiD;AACjD,oCAAuC;AACvC,oCAAuC;AACvC,8CAAiD;AACjD,qCAAwC;AACxC,mCAAsC;AACtC,oCAAuC;AACvC,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,kCAAqC;AACrC,sCAAyC;AACzC,uCAA0C;AAC1C,2CAA8C;AAC9C,mCAAsC;AACtC,qCAAwC;AACxC,4CAA+C;AAC/C,4CAA+C;AAG/C,8DAAiE;AAGjE,8BAAiC;AACjC,+BAAkC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -63,7 +63,7 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@channel.io/bezier-icons": "0.24.0",
+    "@channel.io/bezier-icons": "0.27.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -127,7 +127,7 @@
     }
   },
   "dependencies": {
-    "@channel.io/bezier-tokens": "0.2.4",
+    "@channel.io/bezier-tokens": "0.2.5",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -136,6 +136,8 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-visually-hidden": "^1.0.3",

package/src/components/AlphaAvatar/Avatar.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 import { isEmpty } from '~/src/utils/type'
 
-import { useAvatarGroupContext } from '~/src/components/AlphaAvatarGroup/AvatarGroup'
+import { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext'
 import {
   SmoothCornersBox,
   type SmoothCornersBoxProps,
@@ -85,7 +85,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
   },
   forwardedRef
 ) {
-  const avatarGroupContext = useAvatarGroupContext()
+  const avatarGroupContext = useAvatarContext()
   const size = avatarGroupContext?.size ?? sizeProps
   const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)
   const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()

package/src/components/AlphaAvatar/AvatarSizeContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from '~/src/utils/react'
+
+import { type AvatarProps } from './Avatar.types'
+
+const [AvatarContextProvider, useAvatarContext] = createContext<
+  Pick<AvatarProps, 'size'>
+>({ size: undefined })
+
+export { AvatarContextProvider, useAvatarContext }

package/src/components/AlphaAvatarGroup/AvatarGroup.tsx

@@ -4,7 +4,6 @@ import { MoreIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
 
 import { isLastIndex } from '~/src/utils/array'
-import { createContext } from '~/src/utils/react'
 import { px } from '~/src/utils/style'
 
 import {
@@ -12,23 +11,15 @@ import {
   type AlphaAvatarSize,
   useAlphaAvatarRadiusToken,
 } from '~/src/components/AlphaAvatar'
+import { AvatarContextProvider } from '~/src/components/AlphaAvatar/AvatarSizeContext'
 import { Icon } from '~/src/components/Icon'
 import { SmoothCornersBox } from '~/src/components/SmoothCornersBox'
 import { Text } from '~/src/components/Text'
 
-import {
-  type AvatarGroupContextValue,
-  type AvatarGroupProps,
-} from './AvatarGroup.types'
+import { type AvatarGroupProps } from './AvatarGroup.types'
 
 import styles from './AvatarGroup.module.scss'
 
-const [AvatarGroupContextProvider, useAvatarGroupContext] = createContext<
-  AvatarGroupContextValue | undefined
->(undefined)
-
-export { useAvatarGroupContext }
-
 const MAX_AVATAR_LIST_COUNT = 99
 const AVATAR_GROUP_DEFAULT_SPACING = 4
 export const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =
@@ -197,7 +188,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
     ])
 
     return (
-      <AvatarGroupContextProvider
+      <AvatarContextProvider
         value={useMemo(
           () => ({
             size,
@@ -223,7 +214,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
         >
           {AvatarListComponent}
         </div>
-      </AvatarGroupContextProvider>
+      </AvatarContextProvider>
     )
   }
 )

package/src/components/AlphaAvatarGroup/AvatarGroup.types.ts

@@ -33,9 +33,6 @@ interface AvatarGroupOwnProps {
   ellipsisType?: AvatarGroupEllipsisType
 }
 
-export interface AvatarGroupContextValue
-  extends Pick<AlphaAvatarProps, 'size'> {}
-
 export interface AvatarGroupProps
   extends BezierComponentProps<'div'>,
     ChildrenProps,

package/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap

@@ -180,13 +180,13 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bgtxt-absolute-black-lightest);"
     >
       <svg
-        class="Icon margin"
+        class="Icon size-xs margin"
         data-testid="bezier-icon"
         fill="none"
-        height="16"
+        height="1em"
         style="--b-icon-color: var(--bgtxt-absolute-white-dark);"
         viewBox="0 0 24 24"
-        width="16"
+        width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path

package/src/components/AlphaButton/AlphaButton.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof AlphaButton> = {
 }
 export default meta
 
-export const Playground: StoryObj<AlphaButtonProps> = {
+export const Primary: StoryObj<AlphaButtonProps> = {
   args: {
     text: 'Invite',
     disabled: false,

package/src/components/AlphaButton/Button.module.scss

@@ -1,3 +1,7 @@
+@use '../../styles/mixins/dimension';
+
+@import '../Icon/Icon.module';
+
 $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
 .Button {
@@ -67,10 +71,11 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       purple: var(--alpha-color-bg-purple-normal),
       dark-grey: var(--alpha-color-bg-grey-darkest),
       light-grey: var(--alpha-color-bg-black-dark),
+      white: var(--alpha-color-bg-absolute-white-dark),
     );
 
     @each $color, $background-color in $background-color-by-color {
-      &:where(.color-#{$color}) {
+      &:where(.color-#{'' + $color}) {
         background-color: $background-color;
       }
     }
@@ -87,17 +92,18 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       purple: var(--alpha-color-bg-purple-lightest),
       dark-grey: var(--alpha-color-bg-black-lighter),
       light-grey: var(--alpha-color-bg-black-lighter),
+      white: var(--alpha-color-bg-absolute-white-lightest),
     );
 
     @each $color, $background-color in $background-color-by-color {
-      &:where(.color-#{$color}) {
+      &:where(.color-#{'' + $color}) {
         background-color: $background-color;
       }
     }
   }
 
   &:where(.variant-tertiary) {
-    background-color: initial;
+    background-color: var(--alpha-color-bg-white-white-alpha-transparent);
   }
 
   /* color */
@@ -128,7 +134,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     );
 
     @each $button-color, $color in $color-map {
-      &:where(.color-#{$button-color}) {
+      &:where(.color-#{'' + $button-color}) {
         color: $color;
       }
     }
@@ -179,7 +185,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
   &:where(.active, :hover):where(:not(:disabled)) {
     &:where(.variant-primary) {
       @each $color in $chromatic-colors {
-        &:where(.color-#{$color}) {
+        &:where(.color-#{'' + $color}) {
           background-color: var(--bgtxt-#{$color}-dark);
         }
       }
@@ -195,7 +201,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     &:where(.variant-secondary) {
       @each $color in $chromatic-colors {
-        &:where(.color-#{$color}) {
+        &:where(.color-#{'' + $color}) {
           background-color: var(--bgtxt-#{$color}-lighter);
         }
       }
@@ -207,7 +213,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
     &:where(.variant-tertiary) {
       @each $color in $chromatic-colors {
-        &:where(.color-#{$color}) {
+        &:where(.color-#{'' + $color}) {
           background-color: var(--bgtxt-#{$color}-lightest);
         }
       }
@@ -256,12 +262,20 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     }
   }
 
-  .ButtonLoader {
+  & :where(.ButtonLoader) {
     position: absolute;
     inset: 0;
 
     display: flex;
     align-items: center;
     justify-content: center;
+
+    @each $size, $value in $size-map {
+      &:where(.size-#{$size}) {
+        & :is(.Spinner) {
+          @include dimension.square(#{$value}px);
+        }
+      }
+    }
   }
 }

package/src/components/AlphaButton/Button.tsx

@@ -7,9 +7,9 @@ import {
   type ButtonProps,
   type ButtonSize,
 } from '~/src/components/AlphaButton/Button.types'
+import { AlphaSpinner } from '~/src/components/AlphaSpinner'
 import { BaseButton } from '~/src/components/BaseButton'
 import { Icon, type IconSize } from '~/src/components/Icon'
-import { Spinner } from '~/src/components/Spinner'
 import { Text } from '~/src/components/Text'
 
 import styles from './Button.module.scss'
@@ -44,18 +44,6 @@ function getIconSize(size: ButtonSize) {
   )[size]
 }
 
-function getSpinnerSize(size: ButtonSize) {
-  return (
-    {
-      xs: 'xs',
-      s: 'xs',
-      m: 's',
-      l: 's',
-      xl: 's',
-    } as const
-  )[size]
-}
-
 function getTypography(size: ButtonSize) {
   return (
     {
@@ -126,10 +114,17 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           />
         </div>
 
-        {/* TODO: use AlphaSpinner */}
         {loading && (
-          <div className={styles.ButtonLoader}>
-            <Spinner size={getSpinnerSize(size)} />
+          <div
+            className={classNames(
+              styles.ButtonLoader,
+              styles[`size-${getIconSize(size)}`]
+            )}
+          >
+            <AlphaSpinner
+              className={styles.Spinner}
+              variant="on-overlay"
+            />
           </div>
         )}
       </Comp>

package/src/components/AlphaFloatingButton/AlphaFloatingButton.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof AlphaFloatingButton> = {
 }
 export default meta
 
-export const Playground: StoryObj<AlphaFloatingButtonProps> = {
+export const Primary: StoryObj<AlphaFloatingButtonProps> = {
   args: {
     text: 'Invite',
     disabled: false,