@livechat/design-system-react-components 2.0.0-alpha.3 → 2.0.0-alpha.5

package/dist/components/OnboardingChecklist/types.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+export interface IChecklistItemProps {
+    /**
+     * Define the unique id of the item
+     */
+    id: string;
+    /**
+     * Set the title of the item
+     */
+    title: string;
+    /**
+     * Set the additional text for the title
+     */
+    titleHint?: string;
+    /**
+     * Set the description of the item
+     */
+    description: string;
+    /**
+     * The element to display when the item is active
+     */
+    cta: React.ReactElement;
+    /**
+     * The element to display in the right column when the item is active
+     */
+    placeholder: React.ReactElement;
+}
+export interface ICheckListItem extends Omit<IChecklistItemProps, 'placeholder'> {
+    isActive: boolean;
+    isChecked: boolean;
+    isLastElement: boolean;
+    onClick: (id: string) => void;
+}
+export type ICompletionMessageDataProps = {
+    /**
+     * Set the title of the complete state
+     */
+    title: string;
+    /**
+     * Set the greeting text of the complete state
+     */
+    greetingText?: string;
+    /**
+     * The element to display when the checklist is completed before the animation starts
+     */
+    placeholder?: React.ReactElement;
+    /**
+     * Define the delay betweend displaying complete placeholder and the animation starts
+     */
+    delay?: number;
+    /**
+     * Define the custom heigh of content visible after checklist complete
+     */
+    height?: number;
+};
+export interface IOnboardingChecklistProps {
+    /**
+     * The CSS class for the component
+     */
+    className?: string;
+    /**
+     * Set the title of the checklist
+     */
+    title: string;
+    /**
+     * Set the greeting text of the checklist
+     */
+    greetingText?: string;
+    /**
+     * The list of items to display
+     */
+    items: IChecklistItemProps[];
+    /**
+     * Set to define the active item
+     */
+    activeItemId: string;
+    /**
+     * Set to defined the complete items
+     */
+    completedItemsIds: string[];
+    /**
+     * Callback function when list element is clicked
+     */
+    onActiveChange: (id: string) => void;
+    /**
+     * The CSS class for the right column
+     */
+    placeholderClassName?: string;
+    /**
+     * Set to define the checklist is completed
+     */
+    isCompleted?: boolean;
+    /**
+     * Complete element which will be displayed when `isCompleted` is true
+     */
+    completionMessageData: ICompletionMessageDataProps;
+}

package/dist/components/Picker/components/PickerTriggerBody.d.ts

@@ -17,5 +17,6 @@ export interface ITriggerBodyProps {
     onClear: () => void;
     virtualItemRef: React.MutableRefObject<HTMLElement | null>;
     isTriggerFocused: boolean;
+    inputRef?: React.RefObject<HTMLInputElement>;
 }
 export declare const PickerTriggerBody: React.FC<ITriggerBodyProps>;

package/dist/components/Picker/hooks/useFloatingPicker.d.ts

@@ -13,6 +13,7 @@ interface UseFloatingPickerProps {
     maxListHeight: number;
     isOpen?: boolean;
     onVisibilityChange?: (open: boolean, event?: Event | undefined) => void;
+    searchPhrase?: string;
 }
 interface IUseFloatingPicker {
     getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
@@ -31,5 +32,5 @@ interface IUseFloatingPicker {
     pointer: boolean;
     setPointer: (pointer: boolean) => void;
 }
-export declare const useFloatingPicker: ({ disabled, items, placement, minListHeight, maxListHeight, floatingStrategy, useDismissHookProps, useClickHookProps, isOpen, onVisibilityChange, }: UseFloatingPickerProps) => IUseFloatingPicker;
+export declare const useFloatingPicker: ({ disabled, items, placement, minListHeight, maxListHeight, floatingStrategy, useDismissHookProps, useClickHookProps, isOpen, onVisibilityChange, searchPhrase, }: UseFloatingPickerProps) => IUseFloatingPicker;
 export {};

package/dist/components/Picker/hooks/usePickerItems.d.ts

@@ -1,5 +1,5 @@
 import { IPickerListItem } from '../types';
-
+import * as React from 'react';
 interface UsePickerItemsProps {
     selected?: IPickerListItem[] | null;
     options: IPickerListItem[];
@@ -7,6 +7,8 @@ interface UsePickerItemsProps {
     selectAllOptionText?: string;
     onSelect: (items: IPickerListItem[] | null) => void;
     setOpen: (isOpen: boolean) => void;
+    clearSearchAfterSelection: boolean;
+    inputRef: React.RefObject<HTMLInputElement>;
 }
 interface IUsePickerItems {
     selectedKeys: string[];
@@ -17,5 +19,5 @@ interface IUsePickerItems {
     handleItemRemove: (itemKey: string) => void;
     handleClear: () => void;
 }
-export declare const usePickerItems: ({ selected, options, type, selectAllOptionText, onSelect, setOpen, }: UsePickerItemsProps) => IUsePickerItems;
+export declare const usePickerItems: ({ selected, options, type, selectAllOptionText, onSelect, setOpen, clearSearchAfterSelection, inputRef, }: UsePickerItemsProps) => IUsePickerItems;
 export {};

package/dist/components/Popover/types.d.ts

@@ -1,3 +1,4 @@
+import { OffsetOptions } from '@floating-ui/core';
 import { Placement, UseClickProps, UseDismissProps, FlipOptions, Strategy } from '@floating-ui/react';
 import * as React from 'react';
 export interface IPopoverProps {
@@ -37,7 +38,7 @@ export interface IPopoverProps {
     /**
      * Set the popover offset
      */
-    offsetSize?: number;
+    offsetSize?: OffsetOptions;
     /**
      * Set `false` if the menu is not to be closed with an esc press
      */

package/dist/components/ProductSwitcher/ProductSwitcher.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ProductSwitcherProps } from './types';
+
+export declare const ProductSwitcher: FC<ProductSwitcherProps>;

package/dist/components/ProductSwitcher/components/ProductRow/ProductRow.d.ts

@@ -0,0 +1,10 @@
+import { FC, MouseEvent } from 'react';
+import { ProductOption, ProductId } from '../../types';
+
+type IProps = {
+    onClick: (event: MouseEvent, id: ProductId) => void;
+    product: ProductOption;
+    isActive?: boolean;
+};
+export declare const ProductRow: FC<IProps>;
+export {};

package/dist/components/ProductSwitcher/components/ProductTile/ProductTile.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { ProductOption } from '../../types';
+
+type IProps = Pick<ProductOption, 'icon' | 'notificationCount' | 'backgroundColors' | 'expired' | 'iconColor'> & {
+    isMainProduct?: boolean;
+    withBorder?: boolean;
+};
+export declare const ProductTile: FC<IProps>;
+export {};

package/dist/components/ProductSwitcher/constants.d.ts

@@ -0,0 +1,7 @@
+import { ProductOption, ProductData, ProductId } from './types';
+
+export declare const ProductSwitcherProducts: ProductOption[];
+export declare const labsRedirectData: ProductData[];
+export declare const stagingRedirectData: ProductData[];
+export declare const prodRedirectData: ProductData[];
+export declare const alwaysVisibleProducts: ProductId[];

package/dist/components/ProductSwitcher/helpers.d.ts

@@ -0,0 +1,10 @@
+import { ProductName, ProductData, ProductId, ProductOption, ProductSubscription, Env } from './types';
+
+export declare const getRedirectURL: (productClientId: string, productRedirectUri: string, organizationId: string, mainProductId: ProductId, env: Env) => string;
+export declare const getTrialDaysLeft: (trialEnd: string) => number;
+export declare const isVisibleProduct: (productId: ProductId, installedProducts: {
+    product: ProductName;
+}[]) => boolean;
+export declare const createProductOption: (product: ProductOption, redirectData: ProductData[], subscriptions: ProductSubscription, organizationId: string, mainProductId: ProductId, env: Env) => ProductOption;
+export declare const getRedirectDataByEnv: (env: Env) => ProductData[];
+export declare const getUtmSource: (env: Env, mainProductId: ProductId) => string | undefined;

package/dist/components/ProductSwitcher/hooks/useProductSwitcher.d.ts

@@ -0,0 +1,14 @@
+import { Env, ProductId, ProductName, ProductOption, ProductSubscription } from '../types';
+
+export interface IProductSwitcherHook {
+    env?: Env;
+    installedProducts: {
+        product: ProductName;
+    }[];
+    organizationId: string;
+    subscriptions: ProductSubscription;
+    mainProductId: ProductId;
+}
+export declare const useProductSwitcher: ({ env, installedProducts, subscriptions, organizationId, mainProductId, }: IProductSwitcherHook) => {
+    products: ProductOption[];
+};

package/dist/components/ProductSwitcher/index.d.ts

@@ -0,0 +1,4 @@
+export { type ProductOption, type ProductSwitcherProps, type ProductId, type ProductData, } from './types';
+export * from './ProductSwitcher';
+export { useProductSwitcher } from './hooks/useProductSwitcher';
+export { ProductSwitcherProducts } from './constants';

package/dist/components/ProductSwitcher/openwidgetLogoUri.d.ts

@@ -0,0 +1 @@
+export declare const OpenWidgetLogoUri = "data:image/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg clip-path=\"url(%23clip0_24854_8994)\"%3E%3Crect width=\"40\" height=\"40\" fill=\"%230066FF\"/%3E%3Cg filter=\"url(%23filter0_f_24854_8994)\"%3E%3Cpath d=\"M32.6382 31.0816C41.9891 31.0816 49.5694 23.5012 49.5694 14.1504C49.5694 4.79953 41.9891 -2.78082 32.6382 -2.78082C23.2874 -2.78082 15.707 4.79953 15.707 14.1504C15.707 23.5012 23.2874 31.0816 32.6382 31.0816Z\" fill=\"%23FF4205\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter1_f_24854_8994)\"%3E%3Cpath d=\"M10.417 50.1292C19.7679 50.1292 27.3482 42.5488 27.3482 33.198C27.3482 23.8471 19.7679 16.2668 10.417 16.2668C1.0662 16.2668 -6.51416 23.8471 -6.51416 33.198C-6.51416 42.5488 1.0662 50.1292 10.417 50.1292Z\" fill=\"%2373CE3B\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter2_f_24854_8994)\"%3E%3Cpath d=\"M9.35788 16.2667C15.2022 16.2667 19.9399 11.529 19.9399 5.68472C19.9399 -0.159555 15.2022 -4.89728 9.35788 -4.89728C3.5136 -4.89728 -1.22412 -0.159555 -1.22412 5.68472C-1.22412 11.529 3.5136 16.2667 9.35788 16.2667Z\" fill=\"%233750FF\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter3_f_24854_8994)\"%3E%3Cpath d=\"M7.24274 18.3831C13.6714 18.3831 18.8829 13.1716 18.8829 6.74292C18.8829 0.314217 13.6714 -4.89728 7.24274 -4.89728C0.814034 -4.89728 -4.39746 0.314217 -4.39746 6.74292C-4.39746 13.1716 0.814034 18.3831 7.24274 18.3831Z\" fill=\"%233750FF\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter4_f_24854_8994)\"%3E%3Cpath d=\"M8.29938 21.5577C14.7281 21.5577 19.9396 16.3462 19.9396 9.91748C19.9396 3.48878 14.7281 -1.72272 8.29938 -1.72272C1.87068 -1.72272 -3.34082 3.48878 -3.34082 9.91748C-3.34082 16.3462 1.87068 21.5577 8.29938 21.5577Z\" fill=\"%233750FF\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter5_f_24854_8994)\"%3E%3Cpath d=\"M33.6973 45.8964C40.126 45.8964 45.3375 40.6849 45.3375 34.2562C45.3375 27.8275 40.126 22.616 33.6973 22.616C27.2686 22.616 22.0571 27.8275 22.0571 34.2562C22.0571 40.6849 27.2686 45.8964 33.6973 45.8964Z\" fill=\"%23FFD001\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter6_f_24854_8994)\"%3E%3Cpath d=\"M29.4639 48.0128C35.8926 48.0128 41.1041 42.8013 41.1041 36.3726C41.1041 29.9439 35.8926 24.7324 29.4639 24.7324C23.0352 24.7324 17.8237 29.9439 17.8237 36.3726C17.8237 42.8013 23.0352 48.0128 29.4639 48.0128Z\" fill=\"%23FFD001\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter7_f_24854_8994)\"%3E%3Cpath d=\"M29.4639 48.0128C35.8926 48.0128 41.1041 42.8013 41.1041 36.3726C41.1041 29.9439 35.8926 24.7324 29.4639 24.7324C23.0352 24.7324 17.8237 29.9439 17.8237 36.3726C17.8237 42.8013 23.0352 48.0128 29.4639 48.0128Z\" fill=\"%23FFD001\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter8_f_24854_8994)\"%3E%3Cpath d=\"M6.18299 39.5472C11.4428 39.5472 15.7068 35.2832 15.7068 30.0234C15.7068 24.7635 11.4428 20.4996 6.18299 20.4996C0.923135 20.4996 -3.34082 24.7635 -3.34082 30.0234C-3.34082 35.2832 0.923135 39.5472 6.18299 39.5472Z\" fill=\"%2373CE3B\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter9_f_24854_8994)\"%3E%3Cpath d=\"M6.18299 39.5472C11.4428 39.5472 15.7068 35.2832 15.7068 30.0234C15.7068 24.7635 11.4428 20.4996 6.18299 20.4996C0.923135 20.4996 -3.34082 24.7635 -3.34082 30.0234C-3.34082 35.2832 0.923135 39.5472 6.18299 39.5472Z\" fill=\"%2373CE3B\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter10_f_24854_8994)\"%3E%3Cpath d=\"M6.18299 39.5472C11.4428 39.5472 15.7068 35.2832 15.7068 30.0234C15.7068 24.7635 11.4428 20.4996 6.18299 20.4996C0.923135 20.4996 -3.34082 24.7635 -3.34082 30.0234C-3.34082 35.2832 0.923135 39.5472 6.18299 39.5472Z\" fill=\"%2373CE3B\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter11_f_24854_8994)\"%3E%3Cpath d=\"M6.18299 39.5472C11.4428 39.5472 15.7068 35.2832 15.7068 30.0234C15.7068 24.7635 11.4428 20.4996 6.18299 20.4996C0.923135 20.4996 -3.34082 24.7635 -3.34082 30.0234C-3.34082 35.2832 0.923135 39.5472 6.18299 39.5472Z\" fill=\"%2373CE3B\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter12_f_24854_8994)\"%3E%3Cpath d=\"M6.18299 39.5472C11.4428 39.5472 15.7068 35.2832 15.7068 30.0234C15.7068 24.7635 11.4428 20.4996 6.18299 20.4996C0.923135 20.4996 -3.34082 24.7635 -3.34082 30.0234C-3.34082 35.2832 0.923135 39.5472 6.18299 39.5472Z\" fill=\"%2373CE3B\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter13_f_24854_8994)\"%3E%3Cpath d=\"M9.35898 38.489C12.8655 38.489 15.7082 35.6463 15.7082 32.1398C15.7082 28.6332 12.8655 25.7906 9.35898 25.7906C5.8524 25.7906 3.00977 28.6332 3.00977 32.1398C3.00977 35.6463 5.8524 38.489 9.35898 38.489Z\" fill=\"%2373CE3B\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter14_f_24854_8994)\"%3E%3Cpath d=\"M38.9871 31.0816C46.5846 31.0816 52.7437 24.9225 52.7437 17.325C52.7437 9.7274 46.5846 3.56836 38.9871 3.56836C31.3895 3.56836 25.2305 9.7274 25.2305 17.325C25.2305 24.9225 31.3895 31.0816 38.9871 31.0816Z\" fill=\"%23FF4205\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter15_f_24854_8994)\"%3E%3Cpath d=\"M38.9879 25.7905C45.4166 25.7905 50.6281 20.579 50.6281 14.1503C50.6281 7.72157 45.4166 2.51007 38.9879 2.51007C32.5592 2.51007 27.3477 7.72157 27.3477 14.1503C27.3477 20.579 32.5592 25.7905 38.9879 25.7905Z\" fill=\"%23FF4205\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter16_f_24854_8994)\"%3E%3Cpath d=\"M9.35868 21.5578C14.0341 21.5578 17.8243 17.7676 17.8243 13.0922C17.8243 8.41674 14.0341 4.62656 9.35868 4.62656C4.68325 4.62656 0.893066 8.41674 0.893066 13.0922C0.893066 17.7676 4.68325 21.5578 9.35868 21.5578Z\" fill=\"%233750FF\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter17_f_24854_8994)\"%3E%3Cpath d=\"M31.5797 18.3831C35.0862 18.3831 37.9289 15.5404 37.9289 12.0339C37.9289 8.5273 35.0862 5.68466 31.5797 5.68466C28.0731 5.68466 25.2305 8.5273 25.2305 12.0339C25.2305 15.5404 28.0731 18.3831 31.5797 18.3831Z\" fill=\"%23FF2E00\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter18_f_24854_8994)\"%3E%3Cpath d=\"M12.5312 14.1503C18.3755 14.1503 23.1132 9.41257 23.1132 3.5683C23.1132 -2.27598 18.3755 -7.0137 12.5312 -7.0137C6.68694 -7.0137 1.94922 -2.27598 1.94922 3.5683C1.94922 9.41257 6.68694 14.1503 12.5312 14.1503Z\" fill=\"%233851FF\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter19_f_24854_8994)\"%3E%3Cpath d=\"M28.4057 13.0921C34.25 13.0921 38.9877 8.35441 38.9877 2.51013C38.9877 -3.33415 34.25 -8.07187 28.4057 -8.07187C22.5615 -8.07187 17.8237 -3.33415 17.8237 2.51013C17.8237 8.35441 22.5615 13.0921 28.4057 13.0921Z\" fill=\"%23F3354D\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter20_f_24854_8994)\"%3E%3Cpath d=\"M33.6958 48.0128C39.54 48.0128 44.2778 43.275 44.2778 37.4308C44.2778 31.5865 39.54 26.8488 33.6958 26.8488C27.8515 26.8488 23.1138 31.5865 23.1138 37.4308C23.1138 43.275 27.8515 48.0128 33.6958 48.0128Z\" fill=\"%23FFD101\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter21_f_24854_8994)\"%3E%3Cpath d=\"M8.30173 43.78C14.146 43.78 18.8837 39.0422 18.8837 33.198C18.8837 27.3537 14.146 22.616 8.30173 22.616C2.45745 22.616 -2.28027 27.3537 -2.28027 33.198C-2.28027 39.0422 2.45745 43.78 8.30173 43.78Z\" fill=\"%237FCF35\"/%3E%3C/g%3E%3Cg filter=\"url(%23filter22_f_24854_8994)\"%3E%3Cpath d=\"M6.18454 34.2562C12.0288 34.2562 16.7665 29.5184 16.7665 23.6742C16.7665 17.8299 12.0288 13.0922 6.18454 13.0922C0.340261 13.0922 -4.39746 17.8299 -4.39746 23.6742C-4.39746 29.5184 0.340261 34.2562 6.18454 34.2562Z\" fill=\"%231D7DD0\"/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id=\"filter0_f_24854_8994\" x=\"-8.29297\" y=\"-26.7808\" width=\"81.8623\" height=\"81.8624\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter1_f_24854_8994\" x=\"-30.5142\" y=\"-7.73322\" width=\"81.8623\" height=\"81.8624\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter2_f_24854_8994\" x=\"-25.2241\" y=\"-28.8973\" width=\"69.1641\" height=\"69.164\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter3_f_24854_8994\" x=\"-28.3975\" y=\"-28.8973\" width=\"71.2803\" height=\"71.2804\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter4_f_24854_8994\" x=\"-27.3408\" y=\"-25.7227\" width=\"71.2803\" height=\"71.2804\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter5_f_24854_8994\" x=\"-1.94287\" y=\"-1.38403\" width=\"71.2803\" height=\"71.2804\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter6_f_24854_8994\" x=\"-6.17627\" y=\"0.732361\" width=\"71.2803\" height=\"71.2804\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter7_f_24854_8994\" x=\"-6.17627\" y=\"0.732361\" width=\"71.2803\" height=\"71.2804\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter8_f_24854_8994\" x=\"-27.3408\" y=\"-3.50043\" width=\"67.0479\" height=\"67.0476\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter9_f_24854_8994\" x=\"-27.3408\" y=\"-3.50043\" width=\"67.0479\" height=\"67.0476\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter10_f_24854_8994\" x=\"-27.3408\" y=\"-3.50043\" width=\"67.0479\" height=\"67.0476\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter11_f_24854_8994\" x=\"-27.3408\" y=\"-3.50043\" width=\"67.0479\" height=\"67.0476\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter12_f_24854_8994\" x=\"-27.3408\" y=\"-3.50043\" width=\"67.0479\" height=\"67.0476\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter13_f_24854_8994\" x=\"-20.9902\" y=\"1.79056\" width=\"60.6982\" height=\"60.6984\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter14_f_24854_8994\" x=\"1.23047\" y=\"-20.4316\" width=\"75.5132\" height=\"75.5132\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter15_f_24854_8994\" x=\"3.34766\" y=\"-21.4899\" width=\"71.2803\" height=\"71.2804\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter16_f_24854_8994\" x=\"-23.1069\" y=\"-19.3734\" width=\"64.9312\" height=\"64.9312\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter17_f_24854_8994\" x=\"1.23047\" y=\"-18.3153\" width=\"60.6982\" height=\"60.6984\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"12\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter18_f_24854_8994\" x=\"-9.05078\" y=\"-18.0137\" width=\"43.1641\" height=\"43.164\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"5.5\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter19_f_24854_8994\" x=\"6.82373\" y=\"-19.0719\" width=\"43.1641\" height=\"43.164\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"5.5\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter20_f_24854_8994\" x=\"12.1138\" y=\"15.8488\" width=\"43.1641\" height=\"43.164\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"5.5\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter21_f_24854_8994\" x=\"-13.2803\" y=\"11.616\" width=\"43.1641\" height=\"43.164\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"5.5\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3Cfilter id=\"filter22_f_24854_8994\" x=\"-15.3975\" y=\"2.09216\" width=\"43.1641\" height=\"43.164\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"%3E%3CfeFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/%3E%3CfeBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/%3E%3CfeGaussianBlur stdDeviation=\"5.5\" result=\"effect1_foregroundBlur_24854_8994\"/%3E%3C/filter%3E%3CclipPath id=\"clip0_24854_8994\"%3E%3Crect width=\"40\" height=\"40\" fill=\"white\"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A";

package/dist/components/ProductSwitcher/types.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { IconSource } from '../Icon';
+
+export type ProductId = 'livechat' | 'helpdesk' | 'chatbot' | 'openwidget' | 'knowledgebase' | 'hello' | 'accounts';
+export type ProductName = 'LiveChat' | 'HelpDesk' | 'ChatBot' | 'OpenWidget' | 'KnowledgeBase' | 'Hello' | 'Accounts';
+export type Env = 'labs' | 'staging' | 'prod';
+export interface ProductSwitcherProps {
+    mainProductId: ProductId;
+    productOptions: ProductOption[];
+    textURL?: string;
+    openedOnInit?: boolean;
+    isVisible?: boolean;
+    onOpen?: (event?: Event) => void;
+    onClose?: (event?: Event) => void;
+    onSelect?: (id: ProductId) => void;
+}
+export declare const SSOProductIdMap: Record<ProductId, ProductName>;
+export type ProductSubscription = Partial<Record<ProductId, {
+    status: 'trial' | 'active' | 'cancelled' | 'past_due' | 'expired';
+    next_charge_at?: string;
+}>>;
+export interface ProductOption {
+    id: ProductId;
+    shortcutKey?: string;
+    name: string;
+    expired?: boolean;
+    trialDaysLeft?: number;
+    nameAdornment?: ReactNode;
+    icon: IconSource;
+    iconColor?: string;
+    notificationCount?: number;
+    backgroundColors: {
+        main: string;
+        second: string;
+        third: string;
+    };
+    withDivider?: boolean;
+    url: string;
+}
+export type ProductData = {
+    clientId: string;
+    product: ProductName;
+    redirectUri: string;
+};

package/dist/components/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type StatusBadgeSizes = '3XS' | '2XS' | 'XS' | 'SM' | 'MD' | 'LG' | 'XL' | '2XL' | '3XL';
+export interface IStatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Specify the status badge kind
+     */
+    kind?: 'offline' | 'accept' | 'not-accept';
+    /**
+     * Specify the status badge size
+     */
+    size?: StatusBadgeSizes;
+}
+export declare const StatusBadge: React.FC<IStatusBadgeProps>;

package/dist/components/StatusBadge/index.d.ts

@@ -0,0 +1 @@
+export { StatusBadge } from './StatusBadge';

package/dist/components/Tooltip/types.d.ts

@@ -93,6 +93,10 @@ export interface ITooltipProps {
      * Set the tooltip distance from the trigger
      */
     offsetMainAxis?: number;
+    /**
+     * Set the tooltip distance from the trigger
+     */
+    offsetCrossAxis?: number;
     /**
      * Set custom reference object for the tooltip
      */

package/dist/components/Typography/Text.d.ts

@@ -24,6 +24,8 @@ interface IProps extends React.HTMLAttributes<HTMLElement> {
     customColor?: string;
     /** Optional prop to set the text align */
     textAlign?: TTextAlign;
+    /** Optional prop to set the no margin */
+    noMargin?: boolean;
 }
 export declare const Text: React.FC<React.PropsWithChildren<IProps>>;
 export {};

package/dist/components/UpdateBadge/UpdateBadge.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const UpdateBadge: React.FC;

package/dist/components/UpdateBadge/index.d.ts

@@ -0,0 +1 @@
+export { UpdateBadge } from './UpdateBadge';

package/dist/foundations/design-token.d.ts

@@ -363,5 +363,12 @@ export declare const DesignToken: {
     OnePopoverMessageBackgroundDefault: string;
     OnePopoverBorderDefault: string;
     OnePopoverBorderActive: string;
+    OneTooltipBackground: string;
+    ContentBasicAutofill: string;
+    ProductsHello: string;
+    ProductsPlatform: string;
+    SurfaceCheckListItemOpenBackground: string;
+    SurfaceCheckListBackground: string;
+    ContentBasicPlaceholder: string;
 };
 export type DesignTokenKey = keyof typeof DesignToken;