@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

package/src/components/Link/utils/relativeUrlRegex.spec.ts

@@ -1,32 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { describe, expect, it } from 'vitest';
-import { relativeUrlRegex } from './relativeUrlRegex';
-
-describe('Regex values', () => {
-    it.each([
-        {
-            input: '/document/123',
-            shouldMatch: true,
-        },
-        {
-            input: '/r/123',
-            shouldMatch: true,
-        },
-        {
-            input: '/wrong/123',
-            shouldMatch: false,
-        },
-        {
-            input: '/r/',
-            shouldMatch: false,
-        },
-        {
-            input: '/document/',
-            shouldMatch: false,
-        },
-    ])('should only match internal documents starting with /r/ or /document/', ({ input, shouldMatch }) => {
-        const isMatching = relativeUrlRegex.test(input);
-        expect(isMatching).toBe(shouldMatch);
-    });
-});

package/src/components/Link/utils/relativeUrlRegex.ts

@@ -1,3 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export const relativeUrlRegex = /^\/(document|r)\/\S+$/i;

package/src/components/Link/utils/url.spec.ts

@@ -1,75 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { describe, expect, it } from 'vitest';
-import { isValidUrl } from './url';
-
-describe('LinkPlugin URL utils', () => {
-    it('should validate isValidUrl', () => {
-        const testData = [
-            {
-                input: 'https://frontify.com',
-                shouldBeValid: true,
-            },
-            {
-                input: 'http://frontify.com',
-                shouldBeValid: true,
-            },
-            {
-                input: 'http://frontify.com/any/path',
-                shouldBeValid: true,
-            },
-            {
-                input: 'https://product.frontify.com/any/path/with#3/',
-                shouldBeValid: true,
-            },
-            {
-                input: 'mailto:hello@frontify.com',
-                shouldBeValid: true,
-            },
-            {
-                input: 'tel:+123456789',
-                shouldBeValid: true,
-            },
-            {
-                input: 'tel:',
-                shouldBeValid: false,
-            },
-            {
-                input: 'anyword:',
-                shouldBeValid: false,
-            },
-            {
-                input: '/r/123',
-                shouldBeValid: true,
-            },
-            {
-                input: '/document/123',
-                shouldBeValid: true,
-            },
-            {
-                input: '/wrongpage/123',
-                shouldBeValid: false,
-            },
-            {
-                input: '+123456789',
-                shouldBeValid: false,
-            },
-            {
-                input: 'hello@frontify.com',
-                shouldBeValid: false,
-            },
-            {
-                input: 'frontify.com',
-                shouldBeValid: false,
-            },
-            {
-                input: 'frontify',
-                shouldBeValid: false,
-            },
-        ];
-        for (const data of testData) {
-            const isValid = isValidUrl(data.input);
-            expect(isValid).toBe(data.shouldBeValid);
-        }
-    });
-});

package/src/components/Link/utils/url.ts

@@ -1,21 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { addHttps } from '../../../helpers';
-import { relativeUrlRegex } from './relativeUrlRegex';
-
-export const isValidUrl = (url: string) => {
-    if (relativeUrlRegex.test(url)) {
-        return true;
-    }
-    try {
-        const parsedUrl = new URL(url);
-        const validProtocols = ['http:', 'https:', 'mailto:', 'tel:'];
-        return validProtocols.includes(parsedUrl.protocol) && parsedUrl.pathname !== '';
-    } catch (error) {
-        return false;
-    }
-};
-
-export const isValidUrlOrEmpty = (url: string): boolean => {
-    return isValidUrl(addHttps(url)) || url === '';
-};

package/src/components/RichTextEditor/RichTextEditor.spec.ct.tsx

@@ -1,231 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { DocumentApiDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
-import { PluginComposer } from '@frontify/fondue';
-import { mount } from 'cypress/react18';
-import type { SinonStub } from 'sinon';
-import { ButtonPlugin, LinkPlugin, RichTextEditor, TextStyles } from '.';
-import { convertToRteValue } from '../../helpers';
-
-const RteHtmlSelector = '[data-test-id="rte-content-html"]';
-const RichTextSelector = '[data-test-id="rich-text-editor"]';
-const ButtonSelector = '[data-test-id="button"]';
-const CheckboxSelector = '[data-test-id="checkbox-icon-box"]';
-const ToolbarButtonSelector = '[data-testid="ToolbarButton"]';
-const InternalDocumentLinkSelector = '[data-test-id="internal-link-selector-document-link"]';
-const FloatingLinkModalSelector = '[data-test-id="floating-link-insert"]';
-const FloatingButtonModalSelector = '[data-test-id="floating-button-insert"]';
-const UrlInputSelector = 'input[id="url"]';
-
-const apiDocuments = [{ ...DocumentApiDummy.with(1), permanentLink: '/r/document' }];
-
-const appBridge = getAppBridgeBlockStub({
-    blockId: 1,
-});
-
-describe('RichTextEditor', () => {
-    it('should render a rich text editor in edit mode', () => {
-        mount(<RichTextEditor isEditing />);
-        cy.get(RichTextSelector).should('exist');
-    });
-
-    it('should render a rich text html in view mode', () => {
-        mount(<RichTextEditor isEditing={false} value="test" />);
-        cy.get(RteHtmlSelector).should('exist');
-    });
-
-    it('should render a json value in view mode', () => {
-        mount(<RichTextEditor isEditing={false} value={convertToRteValue(TextStyles.heading1, 'Test Heading')} />);
-        cy.get(RteHtmlSelector).should('exist');
-    });
-
-    it('should render a html value in view mode', () => {
-        mount(<RichTextEditor isEditing={false} value="<p>Test Paragraph</p>" />);
-        cy.get(RteHtmlSelector).should('exist');
-    });
-
-    it('should not render html output if value is empty', () => {
-        mount(<RichTextEditor isEditing={false} value="" />);
-        cy.get(RteHtmlSelector).should('not.exist');
-    });
-
-    it('should not render html output if value is undefined', () => {
-        mount(<RichTextEditor isEditing={false} />);
-        cy.get(RteHtmlSelector).should('not.exist');
-    });
-
-    it('should be able to select internal link', () => {
-        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
-        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
-
-        mount(
-            <RichTextEditor
-                isEditing={true}
-                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
-                value={convertToRteValue('p', 'This is a link')}
-            />,
-        );
-        cy.get(RichTextSelector).click();
-        cy.get(RichTextSelector).type('{selectall}');
-        cy.get(ToolbarButtonSelector).click();
-        cy.get(ButtonSelector).first().click();
-        cy.get(InternalDocumentLinkSelector).click();
-        cy.get(ButtonSelector).last().click();
-        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
-        const linkTag = cy.get(RichTextSelector).find('a[href="/r/document"]');
-        linkTag.should('exist');
-        linkTag.should('have.attr', 'target', '_self');
-    });
-
-    it('should be able to select internal link with target blank', () => {
-        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
-        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
-
-        mount(
-            <RichTextEditor
-                isEditing={true}
-                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
-                value={convertToRteValue('p', 'This is a link')}
-            />,
-        );
-        cy.get(RichTextSelector).click();
-        cy.get(RichTextSelector).type('{selectall}');
-        cy.get(ToolbarButtonSelector).click();
-        cy.get(ButtonSelector).first().click();
-        cy.get(InternalDocumentLinkSelector).click();
-        cy.get(ButtonSelector).last().click();
-        cy.get(CheckboxSelector).click();
-        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
-        const linkTag = cy.get(RichTextSelector).find('a[href="/r/document"]');
-        linkTag.should('exist');
-        linkTag.should('have.attr', 'target', '_blank');
-    });
-
-    it('should prepend the URL with https:// if not exists', () => {
-        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
-        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
-
-        mount(
-            <RichTextEditor
-                isEditing={true}
-                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
-                value={convertToRteValue('p', 'This is a link')}
-            />,
-        );
-        cy.get(RichTextSelector).click();
-        cy.get(RichTextSelector).type('{selectall}');
-        cy.get(ToolbarButtonSelector).click();
-        cy.get(UrlInputSelector).type('frontify.com');
-        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
-        cy.get(RichTextSelector).find('a[href="https://frontify.com"]').should('exist');
-    });
-
-    it('should allow URLs that start with /document/', () => {
-        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
-        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
-
-        mount(
-            <RichTextEditor
-                isEditing={true}
-                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
-                value={convertToRteValue('p', 'This is a link')}
-            />,
-        );
-
-        cy.get(RichTextSelector).click();
-        cy.get(RichTextSelector).type('{selectall}');
-        cy.get(ToolbarButtonSelector).click();
-        cy.get(UrlInputSelector).type('/document/test');
-        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
-        cy.get(RichTextSelector).find('a[href="/document/test"]').should('exist');
-    });
-
-    it('should not add https:// to the URL for mailto: links', () => {
-        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
-        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
-
-        mount(
-            <RichTextEditor
-                isEditing={true}
-                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
-                value={convertToRteValue('p', 'This is a link')}
-            />,
-        );
-        cy.get(RichTextSelector).click();
-        cy.get(RichTextSelector).type('{selectall}');
-        cy.get(ToolbarButtonSelector).click();
-        cy.get(UrlInputSelector).type('mailto:info@frontify.com');
-        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
-        cy.get(RichTextSelector).find('a[href="mailto:info@frontify.com"]').should('exist');
-    });
-
-    it('should create a link with a link typed in the RTE', () => {
-        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
-        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
-
-        mount(
-            <RichTextEditor
-                isEditing={true}
-                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
-            />,
-        );
-        cy.get(RichTextSelector).click();
-        cy.get(RichTextSelector).type('mailto:info@frontify.com {enter}');
-        cy.get(RichTextSelector).find('a[href="mailto:info@frontify.com"]').should('exist');
-    });
-
-    it('should not create a link with a : after a word', () => {
-        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
-        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
-
-        mount(
-            <RichTextEditor
-                isEditing={true}
-                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
-            />,
-        );
-        cy.get(RichTextSelector).click();
-        cy.get(RichTextSelector).type('list:{enter}');
-        cy.get(RichTextSelector).find('a').should('not.exist');
-    });
-
-    it('should allow URLs that start with /document/', () => {
-        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
-        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
-
-        mount(
-            <RichTextEditor
-                isEditing={true}
-                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
-                value={convertToRteValue('p', 'This is a link')}
-            />,
-        );
-        cy.get(RichTextSelector).click();
-        cy.get(RichTextSelector).type('{selectall}');
-        cy.get(ToolbarButtonSelector).click();
-        cy.get(UrlInputSelector).type('/document/test');
-        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
-        cy.get(RichTextSelector).find('a[href="/document/test"]').should('exist');
-    });
-
-    it('should be able to select internal button link', () => {
-        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
-        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
-
-        mount(
-            <RichTextEditor
-                isEditing={true}
-                plugins={new PluginComposer().setPlugin([new ButtonPlugin({ appBridge })])}
-                value={convertToRteValue('p', 'This is a button')}
-            />,
-        );
-        cy.get(RichTextSelector).click();
-        cy.get(RichTextSelector).type('{selectall}');
-        cy.get(ToolbarButtonSelector).click();
-        cy.get(ButtonSelector).first().click();
-        cy.get(InternalDocumentLinkSelector).click();
-        cy.get(ButtonSelector).last().click();
-        cy.get(FloatingButtonModalSelector).find(ButtonSelector).last().click();
-        cy.get(RichTextSelector).find('a[href="/r/document"]').should('exist');
-    });
-});

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,62 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { useEffect, useState } from 'react';
-
-import { RichTextEditor as FondueRichTextEditor } from '@frontify/fondue';
-import { RichTextEditorProps } from './types';
-import { SerializedText } from './SerializedText';
-import { floatingButtonActions, floatingButtonSelectors } from './plugins/ButtonPlugin/components';
-
-export const RichTextEditor = ({
-    id = 'rte',
-    isEditing,
-    value,
-    columns,
-    gap,
-    placeholder,
-    plugins,
-    onTextChange,
-    showSerializedText,
-}: RichTextEditorProps) => {
-    const [shouldPreventPageLeave, setShouldPreventPageLeave] = useState(false);
-
-    const saveText = (newContent: string) => {
-        if (onTextChange && newContent !== value) {
-            onTextChange(newContent);
-        }
-        setShouldPreventPageLeave(false);
-    };
-
-    useEffect(() => {
-        const unloadHandler = (event: BeforeUnloadEvent) => {
-            event.preventDefault();
-            return (event.returnValue = 'Unprocessed changes');
-        };
-
-        if (shouldPreventPageLeave) {
-            window.addEventListener('beforeunload', unloadHandler);
-        }
-
-        return () => window.removeEventListener('beforeunload', unloadHandler);
-    }, [shouldPreventPageLeave]);
-
-    if (isEditing) {
-        return (
-            <FondueRichTextEditor
-                id={id}
-                value={value}
-                border={false}
-                placeholder={placeholder}
-                plugins={plugins}
-                onValueChanged={() => setShouldPreventPageLeave(true)}
-                onTextChange={saveText}
-                hideExternalFloatingModals={(editorId: string) => {
-                    if (floatingButtonSelectors.isOpen(editorId)) {
-                        floatingButtonActions.reset();
-                    }
-                }}
-            />
-        );
-    }
-    return <SerializedText value={value} columns={columns} gap={gap} show={showSerializedText} plugins={plugins} />;
-};

package/src/components/RichTextEditor/SerializedText.tsx

@@ -1,29 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { useEffect, useState } from 'react';
-import { serializeRawToHtmlAsync } from '@frontify/fondue';
-import { SerializedTextProps } from './types';
-
-export const SerializedText = ({ value = '', gap, columns, show = true, plugins }: SerializedTextProps) => {
-    const [html, setHtml] = useState<string | null>(null);
-
-    useEffect(() => {
-        (async () => {
-            setHtml(await serializeRawToHtmlAsync(value, plugins, columns, gap));
-        })();
-    }, [value, columns, gap, plugins]);
-
-    if (!show || html === '<br />') {
-        return null;
-    }
-
-    return html !== null ? (
-        <div
-            className="tw-w-full tw-whitespace-pre-wrap"
-            data-test-id="rte-content-html"
-            dangerouslySetInnerHTML={{ __html: html }}
-        />
-    ) : (
-        <div className="tw-rounded-sm tw-bg-base-alt tw-animate-pulse tw-h-full tw-min-h-[10px] tw-w-full" />
-    );
-};

package/src/components/RichTextEditor/constants.ts

@@ -1,3 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export const THEME_PREFIX = '--f-theme-settings-';

package/src/components/RichTextEditor/index.ts

@@ -1,6 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './RichTextEditor';
-export * from './plugins';
-export * from './pluginPresets';
-export * from './constants';

package/src/components/RichTextEditor/pluginPresets/defaultPluginsWithLinkChooser.tsx

@@ -1,55 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { AppBridgeBlock } from '@frontify/app-bridge';
-import {
-    AlignCenterPlugin,
-    AlignJustifyPlugin,
-    AlignLeftPlugin,
-    AlignRightPlugin,
-    AutoformatPlugin,
-    BoldPlugin,
-    CheckboxListPlugin,
-    CodePlugin,
-    ItalicPlugin,
-    OrderedListPlugin,
-    PluginComposer,
-    ResetFormattingPlugin,
-    SoftBreakPlugin,
-    StrikethroughPlugin,
-    TextStylePlugin,
-    UnderlinePlugin,
-    UnorderedListPlugin,
-} from '@frontify/fondue';
-import { ButtonPlugin, LinkPlugin, TextStylePluginsWithoutImage, TextStylesWithoutImage } from '../plugins';
-
-export const getDefaultPluginsWithLinkChooser = (appBridge: AppBridgeBlock) => {
-    return new PluginComposer()
-        .setPlugin(
-            new SoftBreakPlugin(),
-            new TextStylePlugin({
-                textStyles: TextStylePluginsWithoutImage,
-            }),
-        )
-        .setPlugin(
-            [
-                new BoldPlugin(),
-                new ItalicPlugin(),
-                new UnderlinePlugin(),
-                new StrikethroughPlugin(),
-                new LinkPlugin({ appBridge }),
-                new ButtonPlugin({ appBridge }),
-                new CodePlugin(),
-            ],
-            [
-                new AlignLeftPlugin({ validTypes: TextStylesWithoutImage }),
-                new AlignCenterPlugin({ validTypes: TextStylesWithoutImage }),
-                new AlignRightPlugin({ validTypes: TextStylesWithoutImage }),
-                new AlignJustifyPlugin({ validTypes: TextStylesWithoutImage }),
-                new UnorderedListPlugin(),
-                new CheckboxListPlugin(),
-                new OrderedListPlugin(),
-                new ResetFormattingPlugin(),
-                new AutoformatPlugin(),
-            ],
-        );
-};

package/src/components/RichTextEditor/pluginPresets/index.ts

@@ -1,3 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './defaultPluginsWithLinkChooser';

package/src/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx

@@ -1,74 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { HTMLPropsAs, PlateRenderElementProps, Value, useElementProps } from '@udecode/plate';
-import { CSSProperties, HTMLAttributeAnchorTarget, ReactElement, ReactNode, useState } from 'react';
-import { RichTextButtonStyle, TButtonElement } from '../types';
-import { BlockButtonStyles } from '../utils';
-
-export type ButtonRootProps = PlateRenderElementProps<Value, TButtonElement> & HTMLPropsAs<'a'>;
-
-const useButton = (props: ButtonRootProps): HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle } => {
-    const _props = useElementProps<TButtonElement, 'a'>({
-        ...props,
-        elementToAttributes: (element) => ({
-            url: element.href,
-            buttonStyle: element.buttonStyle || 'primary',
-            target: element.target || '_blank',
-        }),
-    });
-
-    return {
-        ...(_props as HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle }),
-        // quick fix: hovering <a> with href loses the editor focus
-        onMouseOver: (e) => {
-            e.stopPropagation();
-        },
-    };
-};
-
-export const ButtonMarkupElementNode = (props: ButtonRootProps) => {
-    const { href, target, buttonStyle } = useButton(props);
-    const { attributes, children } = props;
-
-    return (
-        <HoverableButtonLink
-            attributes={attributes}
-            href={href}
-            target={target}
-            styles={BlockButtonStyles[`button${buttonStyle.charAt(0).toUpperCase() + buttonStyle.slice(1)}`]}
-        >
-            {children}
-        </HoverableButtonLink>
-    );
-};
-
-type Props = {
-    attributes: ButtonRootProps['attributes'];
-    children: ReactNode;
-    styles?: CSSProperties & { hover?: CSSProperties };
-    href?: string;
-    target?: HTMLAttributeAnchorTarget;
-};
-
-const HoverableButtonLink = ({
-    attributes,
-    styles = { hover: {} },
-    children,
-    href = '#',
-    target,
-}: Props): ReactElement => {
-    const [hovered, setHovered] = useState(false);
-
-    return (
-        <a
-            {...attributes}
-            onMouseEnter={() => setHovered(true)}
-            onMouseLeave={() => setHovered(false)}
-            href={href}
-            target={target}
-            style={hovered ? { ...styles, ...styles.hover } : styles}
-        >
-            {children}
-        </a>
-    );
-};

package/src/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/index.ts

@@ -1,11 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { MarkupElement } from '@frontify/fondue';
-import { ELEMENT_BUTTON } from '../createButtonPlugin';
-import { ButtonMarkupElementNode } from './ButtonMarkupElementNode';
-
-export class ButtonMarkupElement extends MarkupElement {
-    constructor(id = ELEMENT_BUTTON, node = ButtonMarkupElementNode) {
-        super(id, node);
-    }
-}

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonButton.tsx

@@ -1,20 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { IconButton16, PluginButtonProps, buttonStyles } from '@frontify/fondue';
-import { getPluginType } from '@udecode/plate';
-import { ELEMENT_BUTTON } from '../createButtonPlugin';
-import { ButtonToolbarButton } from './ButtonToolbarButton';
-
-export const ButtonButton = ({ editor, id }: PluginButtonProps) => (
-    <div data-plugin-id={id}>
-        <ButtonToolbarButton
-            type={getPluginType(editor, ELEMENT_BUTTON)}
-            icon={
-                <span className="tw-p-2 tw-h-8 tw-justify-center tw-items-center tw-flex">
-                    <IconButton16 />
-                </span>
-            }
-            styles={buttonStyles}
-        />
-    </div>
-);