@frontify/guideline-blocks-settings 0.28.1 → 0.28.2

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

@@ -62,7 +62,7 @@ describe('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}');
@@ -83,7 +83,7 @@ describe('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}');
@@ -102,7 +102,7 @@ describe('RichTextEditor', () => {
                 isEditing={true}
                 plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
                 value={convertToRteValue('p', 'This is a link')}
-            />
+            />,
         );
 
         cy.get(RichTextSelector).click();
@@ -122,7 +122,7 @@ describe('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}');
@@ -140,7 +140,7 @@ describe('RichTextEditor', () => {
             <RichTextEditor
                 isEditing={true}
                 plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
-            />
+            />,
         );
         cy.get(RichTextSelector).click();
         cy.get(RichTextSelector).type('mailto:info@frontify.com {enter}');
@@ -155,7 +155,7 @@ describe('RichTextEditor', () => {
             <RichTextEditor
                 isEditing={true}
                 plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
-            />
+            />,
         );
         cy.get(RichTextSelector).click();
         cy.get(RichTextSelector).type('list:{enter}');
@@ -171,7 +171,7 @@ describe('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}');
@@ -190,7 +190,7 @@ describe('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}');

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

@@ -27,7 +27,7 @@ export const getDefaultPluginsWithLinkChooser = (appBridge: AppBridgeBlock) => {
             new SoftBreakPlugin(),
             new TextStylePlugin({
                 textStyles: TextStylePluginsWithoutImage,
-            })
+            }),
         )
         .setPlugin(
             [
@@ -48,6 +48,6 @@ export const getDefaultPluginsWithLinkChooser = (appBridge: AppBridgeBlock) => {
                 new CheckboxListPlugin(),
                 new OrderedListPlugin(),
                 new ResetFormattingPlugin(),
-            ]
+            ],
         );
 };

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

@@ -32,7 +32,7 @@ export const ButtonToolbarButton = ({ type, ...props }: LinkToolbarButtonProps)
             tooltip={getTooltip(
                 isEnabled
                     ? `Button\n${getHotkeyByPlatform('Ctrl+Shift+K')}`
-                    : 'Buttons can only be set for a single text block.'
+                    : 'Buttons can only be set for a single text block.',
             )}
             classNames={getButtonClassNames(isEnabled)}
             active={isLink}

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonUrlInput.tsx

@@ -25,6 +25,6 @@ export const useFloatingButtonUrlInput = (props: HTMLPropsAs<'input'>): HTMLProp
             onChange,
             defaultValue: floatingButtonSelectors.url(),
         },
-        { ...props, ref: useComposedRef<HTMLInputElement>(props.ref, ref) }
+        { ...props, ref: useComposedRef<HTMLInputElement>(props.ref, ref) },
     );
 };

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.ts

@@ -125,7 +125,7 @@ export const useInsertModal = () => {
         {
             enableOnFormTags: ['INPUT'],
         },
-        []
+        [],
     );
 
     return {

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.ts

@@ -95,7 +95,7 @@ export const useFloatingButtonEdit = ({ floatingOptions, ...props }: FloatingBut
         {
             enableOnContentEditable: true,
         },
-        []
+        [],
     );
 
     useFloatingButtonEnter();

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEnter.ts

@@ -16,6 +16,6 @@ export const useFloatingButtonEnter = () => {
         {
             enableOnFormTags: ['INPUT'],
         },
-        []
+        [],
     );
 };

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEscape.ts

@@ -25,6 +25,6 @@ export const useFloatingButtonEscape = () => {
             enableOnFormTags: ['INPUT'],
             enableOnContentEditable: true,
         },
-        []
+        [],
     );
 };

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.ts

@@ -40,7 +40,7 @@ export const useFloatingButtonInsert = ({ floatingOptions, ...props }: FloatingB
         {
             enableOnContentEditable: true,
         },
-        [focused]
+        [focused],
     );
 
     const { update, style, floating } = useVirtualFloatingButton({

package/src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts

@@ -14,6 +14,7 @@ import { withButton } from './withButton';
 export const ELEMENT_BUTTON = 'button';
 export const BUTTON_PLUGIN = 'button-plugin';
 
+// eslint-disable-next-line
 export interface ButtonPlugin {
     forceSubmit?: boolean;
 
@@ -97,6 +98,7 @@ export type ButtonPluginProps = Omit<PluginProps, 'styles'> & {
     styles?: Record<string, CSSProperties & { hover?: CSSProperties }>;
 } & { appBridge: AppBridgeBlock };
 
+// eslint-disable-next-line
 export class ButtonPlugin extends Plugin {
     public styles: CSSProperties = {};
     private appBridge: AppBridgeBlock;

package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/insertButton.ts

@@ -7,11 +7,11 @@ import { CreateButtonNodeOptions, createButtonNode } from '../utils/index';
 export const insertButton = <V extends Value>(
     editor: PlateEditor<V>,
     createButtonNodeOptions: CreateButtonNodeOptions,
-    options?: InsertNodesOptions<V>
+    options?: InsertNodesOptions<V>,
 ) => {
     insertNodes<TButtonElement | TText>(
         editor,
         [createButtonNode(editor, createButtonNodeOptions)],
-        options as InsertNodesOptions
+        options as InsertNodesOptions,
     );
 };

package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/unwrapButton.ts

@@ -20,7 +20,7 @@ export const unwrapButton = <V extends Value>(
     editor: PlateEditor<V>,
     options?: UnwrapNodesOptions & {
         split?: boolean;
-    }
+    },
 ) => {
     return withoutNormalizing(editor, () => {
         if (options?.split) {

package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/upsertButton.ts

@@ -55,7 +55,7 @@ export const upsertButton = <V extends Value>(
         insertTextInButton,
         insertNodesOptions,
         isUrl = getPluginOptions<ButtonPlugin, V>(editor, ELEMENT_BUTTON).isUrl,
-    }: UpsertButtonOptions<V>
+    }: UpsertButtonOptions<V>,
 ) => {
     const at = editor.selection;
     if (!at) {
@@ -136,7 +136,7 @@ export const upsertButton = <V extends Value>(
                 },
             ],
         },
-        insertNodesOptions
+        insertNodesOptions,
     );
     return true;
 };
@@ -151,7 +151,7 @@ function anchorAndFocusInButton<V extends Value>(
     url: string,
     buttonStyle?: RichTextButtonStyle,
     target?: string,
-    text?: string
+    text?: string,
 ) {
     if (buttonAbove) {
         unwrapButton(editor, {
@@ -178,7 +178,7 @@ function editButtonUrlAndTarget<V extends Value>(
     buttonAbove: TNodeEntry<TButtonElement>,
     target?: string,
     buttonStyle?: string,
-    text?: string
+    text?: string,
 ) {
     if (
         url !== buttonAbove[0]?.url ||
@@ -190,7 +190,7 @@ function editButtonUrlAndTarget<V extends Value>(
             { url, target, buttonStyle },
             {
                 at: buttonAbove[1],
-            }
+            },
         );
     }
 

package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/wrapButton.ts

@@ -14,7 +14,7 @@ export interface WrapButtonOptions<V extends Value = Value> extends WrapNodesOpt
  */
 export const wrapButton = <V extends Value>(
     editor: PlateEditor<V>,
-    { url, buttonStyle, target, ...options }: WrapButtonOptions<V>
+    { url, buttonStyle, target, ...options }: WrapButtonOptions<V>,
 ) => {
     wrapNodes<TButtonElement, Value>(
         editor,
@@ -25,6 +25,6 @@ export const wrapButton = <V extends Value>(
             target,
             children: [],
         },
-        { split: true, ...options } as WrapNodesOptions
+        { split: true, ...options } as WrapNodesOptions,
     );
 };

package/src/components/RichTextEditor/plugins/ButtonPlugin/utils/createButtonNode.ts

@@ -14,7 +14,7 @@ export interface CreateButtonNodeOptions {
 
 export const createButtonNode = <V extends Value>(
     editor: PlateEditor<V>,
-    { url, text = '', buttonStyle = 'primary', target, children }: CreateButtonNodeOptions
+    { url, text = '', buttonStyle = 'primary', target, children }: CreateButtonNodeOptions,
 ): TButtonElement => {
     const type = getPluginType(editor, ELEMENT_BUTTON);
 

package/src/components/RichTextEditor/plugins/ButtonPlugin/utils/triggerFloatingButton.ts

@@ -10,7 +10,7 @@ export const triggerFloatingButton = <V extends Value>(
         focused,
     }: {
         focused?: boolean;
-    } = {}
+    } = {},
 ) => {
     if (floatingButtonSelectors.mode() === 'edit') {
         triggerFloatingButtonEdit(editor);

package/src/components/RichTextEditor/plugins/ButtonPlugin/utils/triggerFloatingButtonInsert.ts

@@ -19,7 +19,7 @@ export const triggerFloatingButtonInsert = <V extends Value>(
         focused,
     }: {
         focused?: boolean;
-    } = {}
+    } = {},
 ) => {
     if (floatingButtonSelectors.mode()) {
         return;

package/src/components/RichTextEditor/plugins/ButtonPlugin/withButton.ts

@@ -101,6 +101,6 @@ export const withButton: WithOverride = (editor, { type }) => {
         editor,
         mockPlugin<AnyObject, Value, PlateEditor<Value>>({
             options: { types: type },
-        })
+        }),
     );
 };

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/useFloatingLinkEdit.ts

@@ -95,7 +95,7 @@ export const useFloatingLinkEdit = ({ floatingOptions, ...props }: FloatingLinkP
         {
             enableOnContentEditable: true,
         },
-        []
+        [],
     );
 
     useFloatingLinkEnter();

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/useFloatingLinkInsert.ts

@@ -38,7 +38,7 @@ export const useFloatingLinkInsert = ({ floatingOptions, ...props }: FloatingLin
         {
             enableOnContentEditable: true,
         },
-        [focused]
+        [focused],
     );
 
     const { update, style, floating } = useVirtualFloatingLink({

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/useInsertModal.ts

@@ -119,7 +119,7 @@ export const useInsertModal = () => {
         {
             enableOnFormTags: ['INPUT'],
         },
-        []
+        [],
     );
 
     return {

package/src/components/RichTextEditor/plugins/LinkPlugin/LinkButton.tsx

@@ -22,7 +22,7 @@ export const LinkButton = ({ id, editorId }: PluginButtonProps) => {
                 tooltip={getTooltip(
                     isEnabled
                         ? `Link\n${getHotkeyByPlatform('Ctrl+K')}`
-                        : 'Links can only be set for a single text block.'
+                        : 'Links can only be set for a single text block.',
                 )}
                 icon={
                     <span className="tw-p-2 tw-h-8 tw-justify-center tw-items-center tw-flex">

package/src/components/RichTextEditor/plugins/LinkPlugin/utils/relativeUrlRegex.spec.ts

@@ -4,32 +4,29 @@ import { describe, expect, it } from 'vitest';
 import { relativeUrlRegex } from './relativeUrlRegex';
 
 describe('Regex values', () => {
-    it('should only match internal documents starting with /r/ or /document/', () => {
-        const testData = [
-            {
-                input: '/document/123',
-                shouldMatch: true,
-            },
-            {
-                input: '/r/123',
-                shouldMatch: true,
-            },
-            {
-                input: '/wrong/123',
-                shouldMatch: false,
-            },
-            {
-                input: '/r/',
-                shouldMatch: false,
-            },
-            {
-                input: '/document/',
-                shouldMatch: false,
-            },
-        ];
-        for (const data of testData) {
-            const isMatching = relativeUrlRegex.test(data.input);
-            expect(isMatching).toBe(data.shouldMatch);
-        }
+    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/RichTextEditor/serializer/nodes/checkItemNode.ts

@@ -9,7 +9,7 @@ export const checkItemNode = (
     node: TElement,
     children: string,
     defaultClassNames: string,
-    styles: Record<string, CSSProperties & { hover?: CSSProperties }>
+    styles: Record<string, CSSProperties & { hover?: CSSProperties }>,
 ) => {
     return `<div disabled class="tw-flex tw-flex-row tw-pb-2 first-of-type:tw-ml-0 ${defaultClassNames}" style="margin-left:${
         ((node.indent as number) ?? 0) * 24

package/src/components/RichTextEditor/serializer/nodes/default.ts

@@ -36,13 +36,13 @@ export const defaultNode = (node: TElement, children: string, styles: CSSPropert
     if (node.type === TextStyles.imageTitle) {
         return `<p class="${merge([defaultClassNames, 'a-image-title'])}">${getStyledChild(
             children,
-            defaultStyles
+            defaultStyles,
         )}</p>`;
     }
     if (node.type === TextStyles.imageCaption) {
         return `<p class="${merge([defaultClassNames, 'a-image-caption'])}">${getStyledChild(
             children,
-            defaultStyles
+            defaultStyles,
         )}</p>`;
     }
 

package/src/components/RichTextEditor/serializer/nodes/link.ts

@@ -11,7 +11,7 @@ export const linkNode = (
     node: TElement,
     children: string,
     defaultClassNames: string,
-    styles: Record<string, CSSProperties & { hover?: CSSProperties }>
+    styles: Record<string, CSSProperties & { hover?: CSSProperties }>,
 ) => {
     if (node.chosenLink) {
         const { chosenLink } = node as TLinkElement;

package/src/components/RichTextEditor/serializer/serializeNodesToHtmlRecursive.ts

@@ -57,7 +57,7 @@ type SerializeNodeToHtmlRecursiveOptions = {
 export const serializeNodeToHtmlRecursive = (
     node: TDescendant,
     styles: Record<string, CSSProperties & { hover?: CSSProperties }> | ButtonStylesType,
-    { mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions
+    { mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,
 ): string => {
     if (isText(node)) {
         return serializeLeafToHtml(node);
@@ -90,7 +90,7 @@ export const serializeNodeToHtmlRecursive = (
             node,
             children,
             styles[node.type],
-            getClassNames(node.breakAfterColumn as string | undefined, node.align as string | undefined)
+            getClassNames(node.breakAfterColumn as string | undefined, node.align as string | undefined),
         );
     }
 };
@@ -109,12 +109,12 @@ const MapNodeTypesToHtml: { [key: string]: ({ ...args }: Arguments) => string }
     [ELEMENT_OL]: ({ classNames, children, node, rootNestingCount }) => {
         const nestingLevel = Math.max(rootNestingCount - countNodesOfType([node], ELEMENT_OL), 0);
         return `<ol class="${getOrderedListClasses(nestingLevel)} ${classNames}" style="${reactCssPropsToCss(
-            OL_STYLES
+            OL_STYLES,
         )}">${children}</ol>`;
     },
     [ELEMENT_LI]: ({ classNames, children, node, styles }) =>
         `<li class="${classNames} ${LI_CLASSNAMES}" style="${reactCssPropsToCss(
-            getLiStyles(node, styles)
+            getLiStyles(node, styles),
         )}">${children}</li>`,
     [ELEMENT_LIC]: ({ classNames, children, node }) =>
         `<p class="${classNames} ${getLicElementClassNames(node)}"><span>${children}</span></p>`,

package/src/components/RichTextEditor/serializer/serializeToHtml.ts

@@ -9,7 +9,7 @@ export const serializeRawToHtmlAsync = async (
     raw: string,
     columns: SerializeNodesToHtmlOptions['columns'] = 1,
     columnGap: SerializeNodesToHtmlOptions['columnGap'] = 'normal',
-    plugins: PluginComposer = new PluginComposer()
+    plugins: PluginComposer = new PluginComposer(),
 ): Promise<string> => {
     const nodes = parseRawValue({ raw, plugins });
     const styles = plugins.getStyles;
@@ -18,7 +18,7 @@ export const serializeRawToHtmlAsync = async (
 
 export const serializeNodesToHtml = (
     nodes: TDescendant[],
-    { mentionable, columns = 1, columnGap = 'normal', styles = BlockStyles }: SerializeNodesToHtmlOptions = {}
+    { mentionable, columns = 1, columnGap = 'normal', styles = BlockStyles }: SerializeNodesToHtmlOptions = {},
 ): string => {
     const mappedMentionable = mentionable ? mapMentionable(mentionable) : new Map();
 

package/src/hooks/useAttachments.ts

@@ -24,7 +24,7 @@ export const useAttachments = (appBridge: AppBridgeBlock, assetId: string) => {
 
     const onAttachmentReplace = async (attachmentToReplace: Asset, newAsset: Asset) => {
         const newAssetIds = attachments.map((attachment) =>
-            attachment.id === attachmentToReplace.id ? newAsset.id : attachment.id
+            attachment.id === attachmentToReplace.id ? newAsset.id : attachment.id,
         );
 
         await updateAssetIdsFromKey(assetId, newAssetIds);

package/src/hooks/useDndSensors.ts

@@ -16,7 +16,7 @@ export const useDndSensors = (columnGap = 0, rowGap = 0) => {
         useSensor(KeyboardSensor, {
             coordinateGetter: customCoordinatesGetter,
             keyboardCodes,
-        })
+        }),
     );
 
     return sensors;

package/src/index.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import 'tailwindcss/tailwind.css';
+import './styles.css';
 
 import type { FC } from 'react';
 import type { AppBridgeBlock } from '@frontify/app-bridge';
@@ -124,9 +124,9 @@ export const defineSettings = <
     T extends
         | BlockSettingsStructureExport
         | (() => Promise<BlockSettingsStructureExport>)
-        | (() => BlockSettingsStructureExport)
+        | (() => BlockSettingsStructureExport),
 >(
-    settingsStructure: T
+    settingsStructure: T,
 ): T => settingsStructure;
 
 export * from './components';

package/src/settings/background.spec.ts

@@ -94,7 +94,7 @@ describe('getBackgroundSettings', () => {
                 id: 'Test',
                 defaultValue: true,
                 defaultColor: { red: 0, green: 0, blue: 0, alpha: 1 },
-            })
+            }),
         ).toEqual({
             id: 'hasBackgroundTest',
             label: 'Background',

package/src/settings/border.spec.ts

@@ -41,7 +41,7 @@ describe('getBorderSettings', () => {
         });
         expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
             'id',
-            'borderWidth'
+            'borderWidth',
         );
         expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty('type', 'input');
         expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toEqual({

package/src/settings/borderRadiusExtended.spec.ts

@@ -20,19 +20,19 @@ describe('getBorderRadiusExtendedSettings', () => {
 
         expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toHaveProperty(
             'id',
-            'extendedRadiusTopLeft'
+            'extendedRadiusTopLeft',
         );
         expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
             'id',
-            'extendedRadiusTopRight'
+            'extendedRadiusTopRight',
         );
         expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toHaveProperty(
             'id',
-            'extendedRadiusBottomLeft'
+            'extendedRadiusBottomLeft',
         );
         expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[3]).toHaveProperty(
             'id',
-            'extendedRadiusBottomRight'
+            'extendedRadiusBottomRight',
         );
         expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('id', 'extendedRadiusChoice');
         expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');

package/src/settings/marginExtended.spec.ts

@@ -20,19 +20,19 @@ describe('getMarginExtendedSettings', () => {
 
         expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toHaveProperty(
             'id',
-            'extendedMarginTop'
+            'extendedMarginTop',
         );
         expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
             'id',
-            'extendedMarginLeft'
+            'extendedMarginLeft',
         );
         expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toHaveProperty(
             'id',
-            'extendedMarginRight'
+            'extendedMarginRight',
         );
         expect((extendedMarginSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[3]).toHaveProperty(
             'id',
-            'extendedMarginBottom'
+            'extendedMarginBottom',
         );
         expect(extendedMarginSettings.off?.[0]).toHaveProperty('id', 'extendedMarginChoice');
         expect(extendedMarginSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');

package/src/settings/paddingExtended.spec.ts

@@ -20,19 +20,19 @@ describe('getPaddingExtendedSettings', () => {
 
         expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toHaveProperty(
             'id',
-            'extendedPaddingTop'
+            'extendedPaddingTop',
         );
         expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
             'id',
-            'extendedPaddingLeft'
+            'extendedPaddingLeft',
         );
         expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toHaveProperty(
             'id',
-            'extendedPaddingRight'
+            'extendedPaddingRight',
         );
         expect((extendedPaddingSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[3]).toHaveProperty(
             'id',
-            'extendedPaddingBottom'
+            'extendedPaddingBottom',
         );
         expect(extendedPaddingSettings.off?.[0]).toHaveProperty('id', 'extendedPaddingChoice');
         expect(extendedPaddingSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');

package/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/utilities/react/getBorderStyles.ts

@@ -11,7 +11,7 @@ import { toRgbaString } from '../color';
 export const getBorderStyles = (
     style = BorderStyle.Solid,
     borderWidth = '1px',
-    color = BORDER_COLOR_DEFAULT_VALUE as Color
+    color = BORDER_COLOR_DEFAULT_VALUE as Color,
 ): CSSProperties => {
     return {
         borderStyle: borderStyleMap[style],