@livechat/design-system-react-components 2.2.2 → 2.3.0

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/Picker.d.ts

@@ -0,0 +1,3 @@
+import { IPickerProps } from './types';
+import * as React from 'react';
+export declare const Picker: React.FC<IPickerProps>;

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

@@ -0,0 +1,27 @@
+import { FloatingContext } from '@floating-ui/react';
+import { VirtuosoProps } from 'react-virtuoso';
+import { IPickerListItem } from '../types';
+import * as React from 'react';
+export interface IPickerListProps {
+    pickerType?: 'single' | 'multi';
+    options: IPickerListItem[];
+    context: FloatingContext<HTMLButtonElement>;
+    setFloating: (node: HTMLElement | null) => void;
+    floatingStyles: React.CSSProperties;
+    maxHeight: number;
+    listElementsRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    activeIndex: number | null;
+    selectedKeys: string[];
+    isPositioned: boolean;
+    searchDisabled: boolean;
+    onItemRemove: (key: string) => void;
+    setPointer: (pointer: boolean) => void;
+    onSelect: (key: string) => void;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    emptyStateText?: string;
+    hideWhenEmpty?: boolean;
+    listClassName?: string;
+    virtuosoProps?: VirtuosoProps<IPickerListItem, unknown>;
+}
+export declare const PickerList: React.FC<IPickerListProps>;

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

@@ -0,0 +1,14 @@
+import { IPickerListItem } from '../types';
+import * as React from 'react';
+interface IPickerListItemProps {
+    index: number;
+    isActive: boolean;
+    isSelected: boolean;
+    numberOfItems: number;
+    listElementsRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    onSelect: (key: string) => void;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    item: IPickerListItem;
+}
+export declare const PickerListItem: React.FC<IPickerListItemProps>;
+export {};

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

@@ -0,0 +1,18 @@
+import { Size } from '../../../utils';
+import * as React from 'react';
+export interface PickerTriggerProps {
+    setReference: (element: HTMLElement | null) => void;
+    getReferenceProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    testId?: string;
+    size?: Size;
+    isMultiSelect?: boolean;
+    isItemSelected: boolean;
+    hideClearButton?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isError?: boolean;
+    isOpen: boolean;
+    onClear: () => void;
+    setTriggerFocus: (v: boolean) => void;
+}
+export declare const PickerTrigger: React.FC<React.PropsWithChildren<PickerTriggerProps>>;

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

@@ -0,0 +1,23 @@
+import { Size } from '../../../utils';
+import { PickerType, IPickerListItem } from '../types';
+import * as React from 'react';
+export interface ITriggerBodyProps {
+    isOpen: boolean;
+    isSearchDisabled?: boolean;
+    isDisabled?: boolean;
+    placeholder: string;
+    searchPhrase?: string;
+    selectedItems?: IPickerListItem[] | null;
+    type: PickerType;
+    clearSearchAfterSelection?: boolean;
+    size?: Size;
+    onItemRemove: (key: string) => void;
+    onSelect: (key: string) => void;
+    onFilter: (text: string) => void;
+    onClear: () => void;
+    virtualItemRef: React.MutableRefObject<HTMLElement | null>;
+    isTriggerFocused: boolean;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+export declare const PickerTriggerBody: React.FC<ITriggerBodyProps>;

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

@@ -0,0 +1,40 @@
+import { IPickerListItem } from './types';
+
+export declare const ITEM_GAP_HEIGHT = 2;
+export declare const MIN_LIST_HEIGHT = 200;
+export declare const DEFAULT_LIST_HEIGHT = 400;
+export declare const DEFAULT_PICKER_OPTIONS: ({
+    key: string;
+    name: string;
+    disabled: boolean;
+} | {
+    key: string;
+    name: string;
+    groupHeader?: undefined;
+} | {
+    key: string;
+    name: string;
+    groupHeader: boolean;
+})[];
+export declare const SELECTED_OPTIONS: {
+    key: string;
+    name: string;
+}[];
+export declare const DEFAULT_EXTENDED_OPTIONS: ({
+    key: string;
+    name: string;
+    groupHeader: boolean;
+    disabled?: undefined;
+} | {
+    key: string;
+    name: string;
+    groupHeader?: undefined;
+    disabled?: undefined;
+} | {
+    key: string;
+    name: string;
+    disabled: boolean;
+    groupHeader?: undefined;
+})[];
+export declare const DEFAULT_MORE_PICKER_OPTIONS: IPickerListItem[];
+export declare const SELECT_ALL_OPTION_KEY = "select-all";

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

@@ -0,0 +1,6 @@
+import { IPickerListItem } from './types';
+
+export declare const findIndicesWhere: <T>(array: T[], predicate: (item: T) => boolean) => number[];
+export declare const getNormalizedItems: (items: IPickerListItem[]) => IPickerListItem[];
+export declare const getPickerListItemKey: ({ key }: IPickerListItem) => string;
+export declare const getNewIndexes: (prev: string[], key: string) => string[];

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

@@ -0,0 +1,36 @@
+import { FloatingContext, Placement, Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
+import { IPickerListItem } from '../types';
+import * as React from 'react';
+interface UseFloatingPickerProps {
+    disabled?: boolean;
+    items: IPickerListItem[];
+    placement?: Placement;
+    floatingStrategy?: Strategy;
+    useClickHookProps?: UseClickProps;
+    useDismissHookProps?: UseDismissProps;
+    openedOnInit: boolean;
+    minListHeight: number;
+    maxListHeight: number;
+    isOpen?: boolean;
+    onVisibilityChange?: (open: boolean, event?: Event | undefined) => void;
+    searchPhrase?: string;
+}
+interface IUseFloatingPicker {
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    setReference: (element: HTMLElement | null) => void;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, 'selected' | 'active'>) => Record<string, unknown>;
+    floatingStyles: React.CSSProperties;
+    isPositioned: boolean;
+    context: FloatingContext<HTMLButtonElement>;
+    nodeId: string;
+    setFloating: (node: HTMLElement | null) => void;
+    activeIndex: number | null;
+    listElementsRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    virtualItemRef: React.RefObject<HTMLDivElement>;
+    maxHeight: number;
+    pointer: boolean;
+    setPointer: (pointer: boolean) => void;
+}
+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

@@ -0,0 +1,23 @@
+import { IPickerListItem } from '../types';
+import * as React from 'react';
+interface UsePickerItemsProps {
+    selected?: IPickerListItem[] | null;
+    options: IPickerListItem[];
+    type: 'single' | 'multi';
+    selectAllOptionText?: string;
+    onSelect: (items: IPickerListItem[] | null) => void;
+    setOpen: (isOpen: boolean) => void;
+    clearSearchAfterSelection: boolean;
+    inputRef: React.RefObject<HTMLInputElement>;
+}
+interface IUsePickerItems {
+    selectedKeys: string[];
+    items: IPickerListItem[];
+    searchPhrase: string;
+    handleSelect: (key: string) => void;
+    handleOnFilter: (text: string) => void;
+    handleItemRemove: (itemKey: string) => void;
+    handleClear: () => void;
+}
+export declare const usePickerItems: ({ selected, options, type, selectAllOptionText, onSelect, setOpen, clearSearchAfterSelection, inputRef, }: UsePickerItemsProps) => IUsePickerItems;
+export {};

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

@@ -0,0 +1,3 @@
+export * from './Picker';
+export * from './components/PickerList';
+export type { PickerType, IPickerListItem, IPickerProps } from './types';

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

@@ -0,0 +1,143 @@
+import { InputHTMLAttributes, ReactElement } from 'react';
+import { Placement, Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
+import { VirtuosoProps } from 'react-virtuoso';
+import { Size } from '../../utils';
+import { ComponentCoreProps } from '../../utils/types';
+import { IconSource } from '../Icon';
+
+export interface IPickerListItem {
+    key: string;
+    name: string;
+    customElement?: {
+        listItemBody?: ReactElement;
+        selectedItemBody?: ReactElement;
+    };
+    groupHeader?: boolean;
+    disabled?: boolean;
+    icon?: IconSource;
+    avatarSrc?: string;
+    secondaryText?: string;
+    showCheckbox?: boolean;
+}
+export type PickerType = 'single' | 'multi';
+export interface IPickerProps extends ComponentCoreProps {
+    /**
+     * Specify the custom id
+     */
+    id?: string;
+    /**
+     * The CSS class for picker container
+     */
+    className?: string;
+    /**
+     * The CSS class for picker list
+     */
+    listClassName?: string;
+    /**
+     * Specify the max height of the picker list
+     */
+    maxListHeight?: number;
+    /**
+     * Specify the min height of the picker list
+     */
+    minListHeight?: number;
+    /**
+     * Specify whether the picker should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the picker should be in error state
+     */
+    error?: boolean;
+    /**
+     * Array of picker options
+     */
+    options: IPickerListItem[];
+    /**
+     * Array of picker selected options
+     */
+    selected?: IPickerListItem[] | null;
+    /**
+     * Specify the picker size
+     */
+    size?: Size;
+    /**
+     * Specify the placeholder for search input
+     */
+    placeholder?: string;
+    /**
+     * Specify whether the option select is required
+     */
+    isRequired?: boolean;
+    /**
+     * Text if no search result were found
+     */
+    noSearchResultText?: string;
+    /**
+     * Text for `select all` option which will be visible if defined in multi select mode
+     */
+    selectAllOptionText?: string;
+    /**
+     * Set `multi` to specify whether the picker should allow to multi selection
+     */
+    type?: PickerType;
+    /**
+     * Set to disable search input
+     */
+    searchDisabled?: boolean;
+    /**
+     * Set to hide clear selection button
+     */
+    hideClearButton?: boolean;
+    /**
+     * Set picker visibility
+     */
+    isVisible?: boolean;
+    /**
+     * Optional handler called on picker list hide
+     */
+    onClose?: (event?: Event) => void;
+    /**
+     * Optional handler called on picker list show
+     */
+    onOpen?: (event?: Event) => void;
+    /**
+     * Will open picker on component initialization
+     */
+    openedOnInit?: boolean;
+    /**
+     * Callback called after item selection
+     */
+    onSelect: (selectedItems: IPickerListItem[] | null) => void;
+    /**
+     * Clears the search input after item select
+     */
+    clearSearchAfterSelection?: boolean;
+    /**
+     * The popover placement related to the trigger element
+     */
+    placement?: Placement;
+    /**
+     * Floating strategy for the picker component from @floating-ui/react
+     */
+    floatingStrategy?: Strategy;
+    /**
+     * Set the `floating-ui` useDismiss hook params if you need more control
+     * https://floating-ui.com/docs/usedismiss
+     */
+    useDismissHookProps?: UseDismissProps;
+    /**
+     * Set the `floating-ui` useClick hook params if you need more control
+     * https://floating-ui.com/docs/useclick
+     */
+    useClickHookProps?: UseClickProps;
+    /**
+     * Props for the Virtuoso component
+     * https://virtuoso.dev/virtuoso-api-reference/
+     */
+    virtuosoProps?: VirtuosoProps<IPickerListItem, unknown>;
+    /**
+     * Additional props for the input element
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement> | Record<string, unknown>;
+}

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

@@ -0,0 +1,3 @@
+import { IPopoverProps } from './types';
+import * as React from 'react';
+export declare const Popover: React.FC<React.PropsWithChildren<IPopoverProps>>;

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

@@ -0,0 +1,2 @@
+export * from './Popover';
+export type { IPopoverProps } from './types';

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

@@ -0,0 +1,65 @@
+import { OffsetOptions } from '@floating-ui/core';
+import { Placement, UseClickProps, UseDismissProps, FlipOptions, Strategy } from '@floating-ui/react';
+import * as React from 'react';
+export interface IPopoverProps {
+    children?: React.ReactNode;
+    /**
+     * The CSS class for popover container
+     */
+    className?: string;
+    /**
+     * The CSS class for trigger container
+     */
+    triggerClassName?: string;
+    /**
+     * The popover placement related to the trigger element
+     */
+    placement?: Placement;
+    /**
+     * Optional handler called on tooltip hide
+     */
+    onClose?: (event?: Event) => void;
+    /**
+     * Optional handler called on tooltip show
+     */
+    onOpen?: (event?: Event) => void;
+    /**
+     * Set popover visibility
+     */
+    isVisible?: boolean;
+    /**
+     * Will open menu on component initialization
+     */
+    openedOnInit?: boolean;
+    /**
+     * Set the popover placement to keep it in view
+     */
+    flipOptions?: FlipOptions;
+    /**
+     * Set the popover offset
+     */
+    offsetSize?: OffsetOptions;
+    /**
+     * Set `false` if the menu is not to be closed with an esc press
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Trigger element
+     */
+    triggerRenderer: React.ReactElement | (() => React.ReactNode);
+    /**
+     * Set the `floating-ui` useDismiss hook params if you need more control
+     * https://floating-ui.com/docs/usedismiss
+     */
+    useDismissHookProps?: UseDismissProps;
+    /**
+     * Set the `floating-ui` useClick hook params if you need more control
+     * https://floating-ui.com/docs/useclick
+     */
+    useClickHookProps?: UseClickProps;
+    /**
+     * Set the type of CSS position property to use
+     * https://floating-ui.com/docs/usefloating#strategy
+     */
+    floatingStrategy?: Strategy;
+}

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' | 'borderColor'> & {
+    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";