@frontify/guideline-blocks-settings 0.27.0 → 0.28.1

package/src/hooks/useDndSensors.ts

@@ -0,0 +1,23 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { customCoordinatesGetterFactory } from '../helpers/customCoordinatesGetterFactory';
+
+const keyboardCodes = {
+    start: ['Space', 'Enter'],
+    cancel: [],
+    end: ['Space', 'Enter', 'Escape'],
+};
+
+export const useDndSensors = (columnGap = 0, rowGap = 0) => {
+    const customCoordinatesGetter = customCoordinatesGetterFactory(columnGap, rowGap);
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: customCoordinatesGetter,
+            keyboardCodes,
+        })
+    );
+
+    return sensors;
+};

package/src/index.ts

@@ -1,5 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import 'tailwindcss/tailwind.css';
+
 import type { FC } from 'react';
 import type { AppBridgeBlock } from '@frontify/app-bridge';
 import type {
@@ -126,3 +128,9 @@ export const defineSettings = <
 >(
     settingsStructure: T
 ): T => settingsStructure;
+
+export * from './components';
+export * from './helpers';
+export * from './hooks';
+export * from './settings';
+export * from './utilities';

package/src/settings/background.spec.ts

@@ -0,0 +1,173 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { getBackgroundSettings } from './background';
+
+describe('getBackgroundSettings', () => {
+    it('should return background settings without arguments', () => {
+        expect(getBackgroundSettings()).toEqual({
+            id: 'hasBackground',
+            label: 'Background',
+            type: 'switch',
+            defaultValue: false,
+            on: [
+                {
+                    id: 'backgroundColor',
+                    defaultValue: {
+                        red: 241,
+                        green: 241,
+                        blue: 241,
+                        alpha: 1,
+                    },
+                    type: 'colorInput',
+                },
+            ],
+        });
+    });
+
+    it('should return background settings with id', () => {
+        expect(getBackgroundSettings({ id: 'Test' })).toEqual({
+            id: 'hasBackgroundTest',
+            label: 'Background',
+            type: 'switch',
+            defaultValue: false,
+            on: [
+                {
+                    id: 'backgroundColorTest',
+                    defaultValue: {
+                        red: 241,
+                        green: 241,
+                        blue: 241,
+                        alpha: 1,
+                    },
+                    type: 'colorInput',
+                },
+            ],
+        });
+    });
+
+    it('should return background settings with default value', () => {
+        expect(getBackgroundSettings({ defaultValue: true })).toEqual({
+            id: 'hasBackground',
+            label: 'Background',
+            type: 'switch',
+            defaultValue: true,
+            on: [
+                {
+                    id: 'backgroundColor',
+                    defaultValue: {
+                        red: 241,
+                        green: 241,
+                        blue: 241,
+                        alpha: 1,
+                    },
+                    type: 'colorInput',
+                },
+            ],
+        });
+    });
+
+    it('should return background settings with default color', () => {
+        expect(getBackgroundSettings({ defaultColor: { red: 0, green: 0, blue: 0, alpha: 1 } })).toEqual({
+            id: 'hasBackground',
+            label: 'Background',
+            type: 'switch',
+            defaultValue: false,
+            on: [
+                {
+                    id: 'backgroundColor',
+                    defaultValue: {
+                        red: 0,
+                        green: 0,
+                        blue: 0,
+                        alpha: 1,
+                    },
+                    type: 'colorInput',
+                },
+            ],
+        });
+    });
+
+    it('should return background settings with id, default value and default color', () => {
+        expect(
+            getBackgroundSettings({
+                id: 'Test',
+                defaultValue: true,
+                defaultColor: { red: 0, green: 0, blue: 0, alpha: 1 },
+            })
+        ).toEqual({
+            id: 'hasBackgroundTest',
+            label: 'Background',
+            type: 'switch',
+            defaultValue: true,
+            on: [
+                {
+                    id: 'backgroundColorTest',
+                    defaultValue: {
+                        red: 0,
+                        green: 0,
+                        blue: 0,
+                        alpha: 1,
+                    },
+                    type: 'colorInput',
+                },
+            ],
+        });
+    });
+
+    it('should return background settings with switch label', () => {
+        expect(getBackgroundSettings({ switchLabel: 'Test' })).toEqual({
+            id: 'hasBackground',
+            label: 'Background',
+            type: 'switch',
+            switchLabel: 'Test',
+            defaultValue: false,
+            on: [
+                {
+                    id: 'backgroundColor',
+                    defaultValue: {
+                        red: 241,
+                        green: 241,
+                        blue: 241,
+                        alpha: 1,
+                    },
+                    type: 'colorInput',
+                },
+            ],
+        });
+    });
+    it('should not return default color if hasDefaultColor is false', () => {
+        expect(getBackgroundSettings({ preventDefaultColor: true })).toEqual({
+            id: 'hasBackground',
+            label: 'Background',
+            type: 'switch',
+            defaultValue: false,
+            on: [
+                {
+                    id: 'backgroundColor',
+                    type: 'colorInput',
+                },
+            ],
+        });
+    });
+    it('should return default color if hasDefaultColor is true', () => {
+        expect(getBackgroundSettings({ preventDefaultColor: false })).toEqual({
+            id: 'hasBackground',
+            label: 'Background',
+            type: 'switch',
+            defaultValue: false,
+            on: [
+                {
+                    id: 'backgroundColor',
+                    defaultValue: {
+                        red: 241,
+                        green: 241,
+                        blue: 241,
+                        alpha: 1,
+                    },
+                    type: 'colorInput',
+                },
+            ],
+        });
+    });
+});

package/src/settings/background.ts

@@ -0,0 +1,49 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Color } from '@frontify/fondue';
+import { BACKGROUND_COLOR_DEFAULT_VALUE } from './defaultValues';
+import { SettingBlock } from '../';
+
+/**
+ * Returns background settings: background switch, background color
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @param options.defaultValue Default value for the background switch
+ * @param options.defaultColor Default value for the background color
+ * @param options.preventDefaultColor Whether the background color should be empty by default
+ * @param options.switchLabel Label for the background switch
+ * @returns {SettingBlock} Returns background settings
+ */
+
+type BackgroundSettingsType = {
+    id?: string;
+    defaultValue?: boolean;
+    defaultColor?: Color;
+    preventDefaultColor?: boolean;
+    switchLabel?: string;
+};
+
+export const getBackgroundSettings = (options?: BackgroundSettingsType): SettingBlock => {
+    const hasId = options?.id ? `hasBackground${options.id}` : 'hasBackground';
+    const colorId = options?.id ? `backgroundColor${options.id}` : 'backgroundColor';
+    const defaultColor = !!options?.preventDefaultColor
+        ? undefined
+        : options?.defaultColor || BACKGROUND_COLOR_DEFAULT_VALUE;
+    const switchLabel = options?.switchLabel ? options.switchLabel : undefined;
+
+    return {
+        id: hasId,
+        label: 'Background',
+        type: 'switch',
+        switchLabel,
+        defaultValue: !!options?.defaultValue,
+        on: [
+            {
+                id: colorId,
+                defaultValue: defaultColor,
+                type: 'colorInput',
+            },
+        ],
+    };
+};

package/src/settings/border.spec.ts

@@ -0,0 +1,76 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { getBorderSettings } from './border';
+import { MultiInputBlock, MultiInputLayout } from '@frontify/sidebar-settings';
+import { BorderStyle } from '../settings';
+import { BORDER_COLOR_DEFAULT_VALUE } from '../settings/defaultValues';
+import { SwitchBlock } from '../';
+import { AppBridgeBlock } from '@frontify/app-bridge';
+
+describe('getBorderSettings', () => {
+    it('should return border settings without arguments', () => {
+        const borderSettings = getBorderSettings() as SwitchBlock;
+
+        expect(borderSettings).toHaveProperty('id', 'hasBorder');
+        expect(borderSettings).toHaveProperty('label', 'Border');
+        expect(borderSettings).toHaveProperty('type', 'switch');
+        expect(borderSettings).toHaveProperty('defaultValue', false);
+        expect(borderSettings.on?.[0]).toHaveProperty('id', 'borderSelection');
+        expect(borderSettings.on?.[0]).toHaveProperty('type', 'multiInput');
+        expect(borderSettings.on?.[0]).toHaveProperty('lastItemFullWidth', true);
+        expect(borderSettings.on?.[0]).toHaveProperty('layout', MultiInputLayout.Columns);
+        expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toEqual({
+            id: 'borderStyle',
+            type: 'dropdown',
+            defaultValue: BorderStyle.Solid,
+            choices: [
+                {
+                    value: BorderStyle.Solid,
+                    label: BorderStyle.Solid,
+                },
+                {
+                    value: BorderStyle.Dotted,
+                    label: BorderStyle.Dotted,
+                },
+                {
+                    value: BorderStyle.Dashed,
+                    label: BorderStyle.Dashed,
+                },
+            ],
+        });
+        expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
+            'id',
+            'borderWidth'
+        );
+        expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty('type', 'input');
+        expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toEqual({
+            id: 'borderColor',
+            type: 'colorInput',
+            defaultValue: BORDER_COLOR_DEFAULT_VALUE,
+        });
+    });
+
+    it('should return border settings with custom id', () => {
+        expect(getBorderSettings({ id: 'Test' })).toHaveProperty('id', 'hasBorder_Test');
+    });
+
+    it('should return border settings with custom color', () => {
+        const borderSettings = getBorderSettings({ defaultColor: { red: 255, green: 0, blue: 0 } }) as SwitchBlock;
+        expect((borderSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toEqual({
+            id: 'borderColor',
+            type: 'colorInput',
+            defaultValue: { red: 255, green: 0, blue: 0 },
+        });
+    });
+
+    it('should return border settings with custom default value', () => {
+        const borderSettings = getBorderSettings({ defaultValue: true }) as SwitchBlock;
+        expect(borderSettings).toHaveProperty('defaultValue', true);
+    });
+
+    it('should return border settings with custom switch label', () => {
+        const borderSettings = getBorderSettings({ switchLabel: 'mock' }) as SwitchBlock;
+        expect(borderSettings).toHaveProperty('switchLabel', 'mock');
+    });
+});

package/src/settings/border.ts

@@ -0,0 +1,90 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    Color,
+    MultiInputLayout,
+    SettingBlock,
+    appendUnit,
+    maximumNumericalOrPixelOrAutoRule,
+    numericalOrPixelRule,
+} from '../';
+import { BORDER_COLOR_DEFAULT_VALUE, BORDER_WIDTH_DEFAULT_VALUE } from './defaultValues';
+import { BorderStyle } from './types';
+
+/**
+ * Returns border settings: border switch, border style, border width, border color
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @param options.switchLabel Label for the border switch
+ * @param options.defaultValue Default value for the border switch
+ * @returns {SettingBlock} Returns border settings
+ */
+
+type BorderSettingsType = {
+    id?: string;
+    defaultValue?: boolean;
+    defaultColor?: Color;
+    switchLabel?: string;
+};
+
+export const getBorderSettings = (options?: BorderSettingsType): SettingBlock => {
+    const hasId = options?.id ? `hasBorder_${options.id}` : 'hasBorder';
+    const selectionId = options?.id ? `borderSelection_${options.id}` : 'borderSelection';
+    const styleId = options?.id ? `borderStyle_${options.id}` : 'borderStyle';
+    const widthId = options?.id ? `borderWidth_${options.id}` : 'borderWidth';
+    const colorId = options?.id ? `borderColor_${options.id}` : 'borderColor';
+    const defaultColor = options?.defaultColor || BORDER_COLOR_DEFAULT_VALUE;
+    const switchLabel = options?.switchLabel ? options.switchLabel : undefined;
+
+    return {
+        id: hasId,
+        label: 'Border',
+        type: 'switch',
+        switchLabel,
+        defaultValue: !!options?.defaultValue,
+        on: [
+            {
+                id: selectionId,
+                type: 'multiInput',
+                onChange: (bundle) => appendUnit(bundle, widthId),
+                layout: MultiInputLayout.Columns,
+                lastItemFullWidth: true,
+                blocks: [
+                    {
+                        id: styleId,
+                        type: 'dropdown',
+                        defaultValue: BorderStyle.Solid,
+                        choices: [
+                            {
+                                value: BorderStyle.Solid,
+                                label: BorderStyle.Solid,
+                            },
+                            {
+                                value: BorderStyle.Dotted,
+                                label: BorderStyle.Dotted,
+                            },
+                            {
+                                value: BorderStyle.Dashed,
+                                label: BorderStyle.Dashed,
+                            },
+                        ],
+                    },
+                    {
+                        id: widthId,
+                        type: 'input',
+                        defaultValue: BORDER_WIDTH_DEFAULT_VALUE,
+                        rules: [numericalOrPixelRule, maximumNumericalOrPixelOrAutoRule(500)],
+                        placeholder: 'e.g. 3px',
+                    },
+                    {
+                        id: colorId,
+                        type: 'colorInput',
+                        defaultValue: defaultColor,
+                    },
+                ],
+            },
+        ],
+        off: [],
+    };
+};

package/src/settings/borderRadius.spec.ts

@@ -0,0 +1,30 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { Radius, getBorderRadiusSettings } from '.';
+import { SwitchBlock } from '..';
+
+describe('getBorderRadiusSettings', () => {
+    it('should return border radius settings without arguments', () => {
+        const borderRadiusSettings = getBorderRadiusSettings() as SwitchBlock;
+
+        expect(borderRadiusSettings).toHaveProperty('id', 'hasRadius');
+        expect(borderRadiusSettings).toHaveProperty('label', 'Corner radius');
+        expect(borderRadiusSettings).toHaveProperty('type', 'switch');
+        expect(borderRadiusSettings).toHaveProperty('defaultValue', false);
+        expect(borderRadiusSettings.on?.[0]).toHaveProperty('id', 'radiusValue');
+        expect(borderRadiusSettings.on?.[0]).toHaveProperty('type', 'input');
+        expect(borderRadiusSettings.off?.[0]).toHaveProperty('id', 'radiusChoice');
+        expect(borderRadiusSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');
+        expect(borderRadiusSettings.off?.[0]).toHaveProperty('defaultValue', Radius.None);
+    });
+
+    it('should return border radius settings with custom id', () => {
+        expect(getBorderRadiusSettings({ id: 'Test' })).toHaveProperty('id', 'hasRadius_Test');
+    });
+
+    it('should return border settings with custom default radius', () => {
+        const borderRadiusSettings = getBorderRadiusSettings({ defaultRadius: Radius.Large }) as SwitchBlock;
+        expect(borderRadiusSettings.off?.[0]).toHaveProperty('defaultValue', Radius.Large);
+    });
+});

package/src/settings/borderRadius.ts

@@ -0,0 +1,73 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { SettingBlock, appendUnit, numericalOrPixelRule, presetCustomValue } from '../';
+
+import { Radius, radiusStyleMap } from './types';
+
+/**
+ * Returns border radius settings: border radius switch, radius slider, custom radius input
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @param options.dependentSettingId Id of setting which the border radius is dependent on
+ * @returns {SettingBlock} Returns border settings
+ */
+
+type BorderRadiusSettingsType = {
+    id?: string;
+    dependentSettingId?: string;
+    radiusStyleMap?: Record<Radius, string>;
+    defaultRadius?: Radius;
+};
+
+export const getBorderRadiusSlider = (id: string, defaultValue: Radius = Radius.None): SettingBlock => ({
+    id,
+    type: 'segmentedControls',
+    defaultValue,
+    choices: [
+        {
+            value: Radius.None,
+            label: 'None',
+        },
+        {
+            value: Radius.Small,
+            label: 'S',
+        },
+        {
+            value: Radius.Medium,
+            label: 'M',
+        },
+        {
+            value: Radius.Large,
+            label: 'L',
+        },
+    ],
+});
+
+export const getBorderRadiusSettings = (options?: BorderRadiusSettingsType): SettingBlock => {
+    const hasId = options?.id ? `hasRadius_${options.id}` : 'hasRadius';
+    const valueId = options?.id ? `radiusValue_${options.id}` : 'radiusValue';
+    const choiceId = options?.id ? `radiusChoice_${options.id}` : 'radiusChoice';
+    const defaultValue = options?.defaultRadius || Radius.None;
+
+    return {
+        id: hasId,
+        label: 'Corner radius',
+        type: 'switch',
+        switchLabel: 'Custom',
+        defaultValue: false,
+        info: 'Determining how rounded the corners are.',
+        show: (bundle) => (options?.dependentSettingId ? !!bundle.getBlock(options.dependentSettingId)?.value : true),
+        onChange: (bundle) => presetCustomValue(bundle, choiceId, valueId, options?.radiusStyleMap || radiusStyleMap),
+        on: [
+            {
+                id: valueId,
+                type: 'input',
+                placeholder: 'e.g. 10px',
+                rules: [numericalOrPixelRule],
+                onChange: (bundle) => appendUnit(bundle, valueId),
+            },
+        ],
+        off: [getBorderRadiusSlider(choiceId, defaultValue)],
+    };
+};

package/src/settings/borderRadiusExtended.spec.ts

@@ -0,0 +1,52 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { MultiInputBlock, MultiInputLayout } from '@frontify/sidebar-settings';
+import { Radius, getExtendedBorderRadiusSettings } from '.';
+import { SwitchBlock } from '..';
+import { AppBridgeBlock } from '@frontify/app-bridge';
+
+describe('getBorderRadiusExtendedSettings', () => {
+    it('should return extended border radius settings without arguments', () => {
+        const extendedBorderRadiusSettings = getExtendedBorderRadiusSettings() as SwitchBlock;
+
+        expect(extendedBorderRadiusSettings).toHaveProperty('id', 'hasExtendedCustomRadius');
+        expect(extendedBorderRadiusSettings).toHaveProperty('label', 'Corner radius');
+        expect(extendedBorderRadiusSettings).toHaveProperty('type', 'switch');
+        expect(extendedBorderRadiusSettings).toHaveProperty('defaultValue', false);
+        expect(extendedBorderRadiusSettings.on?.[0]).toHaveProperty('id', 'extendedRadiusValue');
+        expect(extendedBorderRadiusSettings.on?.[0]).toHaveProperty('type', 'multiInput');
+        expect(extendedBorderRadiusSettings.on?.[0]).toHaveProperty('layout', MultiInputLayout.Columns);
+
+        expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[0]).toHaveProperty(
+            'id',
+            'extendedRadiusTopLeft'
+        );
+        expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[1]).toHaveProperty(
+            'id',
+            'extendedRadiusTopRight'
+        );
+        expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[2]).toHaveProperty(
+            'id',
+            'extendedRadiusBottomLeft'
+        );
+        expect((extendedBorderRadiusSettings.on?.[0] as MultiInputBlock<AppBridgeBlock>).blocks[3]).toHaveProperty(
+            'id',
+            'extendedRadiusBottomRight'
+        );
+        expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('id', 'extendedRadiusChoice');
+        expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('type', 'segmentedControls');
+        expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('defaultValue', Radius.None);
+    });
+
+    it('should return extended border radius settings with id', () => {
+        expect(getExtendedBorderRadiusSettings({ id: 'Test' })).toHaveProperty('id', 'hasExtendedCustomRadius_Test');
+    });
+
+    it('should return extended border settings with custom default value', () => {
+        const extendedBorderRadiusSettings = getExtendedBorderRadiusSettings({
+            defaultValue: Radius.Large,
+        }) as SwitchBlock;
+        expect(extendedBorderRadiusSettings.off?.[0]).toHaveProperty('defaultValue', Radius.Large);
+    });
+});

package/src/settings/borderRadiusExtended.ts

@@ -0,0 +1,84 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { MultiInputLayout, SettingBlock, appendUnit, numericalOrPixelRule, presetCustomValue } from '../';
+import { getBorderRadiusSlider } from './borderRadius';
+import { Radius, radiusStyleMap } from './types';
+
+/**
+ * Returns border radius settings: border radius switch, radius slider, custom radius inputs for every corner
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @param options.dependentSettingId Id of setting which the border radius is dependent on
+ * @returns {SettingBlock} Returns border settings
+ */
+
+type BorderRadiusSettingsType = {
+    id?: string;
+    dependentSettingId?: string;
+    defaultValue?: Radius;
+};
+
+export const getExtendedBorderRadiusSettings = (options?: BorderRadiusSettingsType): SettingBlock => {
+    const hasId = options?.id ? `hasExtendedCustomRadius_${options.id}` : 'hasExtendedCustomRadius';
+    const valueId = options?.id ? `extendedRadiusValue_${options.id}` : 'extendedRadiusValue';
+    const choiceId = options?.id ? `extendedRadiusChoice_${options.id}` : 'extendedRadiusChoice';
+    const topLeftId = options?.id ? `extendedRadiusTopLeft_${options.id}` : 'extendedRadiusTopLeft';
+    const topRightId = options?.id ? `extendedRadiusTopRight_${options.id}` : 'extendedRadiusTopRight';
+    const bottomLeftId = options?.id ? `extendedRadiusBottomLeft_${options.id}` : 'extendedRadiusBottomLeft';
+    const bottomRightId = options?.id ? `extendedRadiusBottomRight_${options.id}` : 'extendedRadiusBottomRight';
+
+    return {
+        id: hasId,
+        label: 'Corner radius',
+        type: 'switch',
+        switchLabel: 'Custom',
+        defaultValue: false,
+        info: 'Determining how rounded the corners are.',
+        show: (bundle) => (options?.dependentSettingId ? !!bundle.getBlock(options.dependentSettingId)?.value : true),
+        onChange: (bundle) => {
+            presetCustomValue(bundle, choiceId, topLeftId, radiusStyleMap);
+            presetCustomValue(bundle, choiceId, topRightId, radiusStyleMap);
+            presetCustomValue(bundle, choiceId, bottomLeftId, radiusStyleMap);
+            presetCustomValue(bundle, choiceId, bottomRightId, radiusStyleMap);
+        },
+        on: [
+            {
+                id: valueId,
+                type: 'multiInput',
+                layout: MultiInputLayout.Columns,
+                blocks: [
+                    {
+                        id: topLeftId,
+                        type: 'input',
+                        label: 'Top Left',
+                        rules: [numericalOrPixelRule],
+                        onChange: (bundle) => appendUnit(bundle, topLeftId),
+                    },
+                    {
+                        id: topRightId,
+                        type: 'input',
+                        label: 'Top Right',
+                        rules: [numericalOrPixelRule],
+                        onChange: (bundle) => appendUnit(bundle, topRightId),
+                    },
+                    {
+                        id: bottomLeftId,
+                        type: 'input',
+                        label: 'Bottom Left',
+                        rules: [numericalOrPixelRule],
+                        onChange: (bundle) => appendUnit(bundle, bottomLeftId),
+                    },
+                    {
+                        id: bottomRightId,
+                        type: 'input',
+                        label: 'Bottom Right',
+                        rules: [numericalOrPixelRule],
+                        onChange: (bundle) => appendUnit(bundle, bottomRightId),
+                    },
+                ],
+            },
+        ],
+        off: [getBorderRadiusSlider(choiceId, options?.defaultValue)],
+    };
+};