Phone input base

frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx

@@ -13,6 +13,7 @@ const shouldAddBoxShadowAndVisibility = [
   'TextArea',
   'PasswordInput',
   'EmailInput',
+  'PhoneInput',
   'NumberInput',
   'Text',
   'Checkbox',

frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx

@@ -120,6 +120,7 @@ export const ComponentsManagerTab = ({ darkMode }) => {
         'PasswordInput',
         'TextArea',
         'EmailInput',
+        'PhoneInput',
         'ToggleSwitchV2',
         'DropdownV2',
         'MultiselectV2',

frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx

@@ -18,6 +18,7 @@ const SHOW_ADDITIONAL_ACTIONS = [
   'NumberInput',
   'PasswordInput',
   'EmailInput',
+  'PhoneInput',
   'ToggleSwitchV2',
   'Checkbox',
   'DropdownV2',
@@ -125,6 +126,7 @@ export const baseComponentProperties = (
       'PasswordInput',
       'TextArea',
       'EmailInput',
+      'PhoneInput',
       'NumberInput',
       'Text',
       'Table',

frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx

@@ -70,6 +70,7 @@ const NEW_REVAMPED_COMPONENTS = [
   'TextArea',
   'PasswordInput',
   'EmailInput',
+  'PhoneInput',
   'NumberInput',
   'Table',
   'ToggleSwitchV2',

frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js

@@ -44,6 +44,7 @@ export function renderCustomStyles(
     componentConfig.component == 'NumberInput' ||
     componentConfig.component == 'PasswordInput' ||
     componentConfig.component == 'EmailInput' ||
+    componentConfig.component == 'PhoneInput' ||
     componentConfig.component == 'ToggleSwitchV2' ||
     componentConfig.component == 'Checkbox' ||
     componentConfig.component == 'Table' ||

frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js

@@ -59,6 +59,7 @@ import {
   iconConfig,
   boundedBoxConfig,
   emailinputConfig,
+  phoneinputConfig,
 } from '../widgets';
 
 export const widgets = [
@@ -72,6 +73,7 @@ export const widgets = [
   numberinputConfig,
   passinputConfig,
   emailinputConfig,
+  phoneinputConfig,
   datepickerConfig,
   datetimePickerV2Config,
   datePickerV2Config,

frontend/src/AppBuilder/WidgetManager/widgets/index.js

@@ -59,6 +59,7 @@ import { datetimePickerV2Config } from './datetimepickerV2';
 import { datePickerV2Config } from './datepickerV2';
 import { timePickerConfig } from './timepicker';
 import { emailinputConfig } from './emailinput';
+import { phoneinputConfig } from './phoneinput';
 
 export {
   buttonConfig,
@@ -75,6 +76,7 @@ export {
   datePickerV2Config,
   timePickerConfig,
   emailinputConfig,
+  phoneinputConfig,
   checkboxConfig,
   radiobuttonConfig, //!Depreciated
   radiobuttonV2Config,

frontend/src/AppBuilder/WidgetManager/widgets/phoneinput.js

@@ -0,0 +1,303 @@
+export const phoneinputConfig = {
+  name: 'PhoneInput',
+  displayName: 'Phone Input',
+  description: 'Phone input field',
+  component: 'PhoneInput',
+  defaultSize: {
+    width: 10,
+    height: 40,
+  },
+  others: {
+    showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+    showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+  },
+  properties: {
+    label: {
+      type: 'code',
+      displayName: 'Label',
+      validation: { schema: { type: 'string' }, defaultValue: 'Label' },
+    },
+    placeholder: {
+      type: 'code',
+      displayName: 'Placeholder',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'Enter your input',
+      },
+    },
+    value: {
+      type: 'code',
+      displayName: 'Default value',
+      validation: {
+        schema: {
+          type: 'string',
+        },
+        defaultValue: 'Default value',
+      },
+    },
+
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Loading state',
+      validation: { schema: { type: 'boolean' }, defaultValue: false },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      section: 'additionalActions',
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: { schema: { type: 'boolean' }, defaultValue: false },
+      section: 'additionalActions',
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+      section: 'additionalActions',
+      placeholder: 'Enter tooltip text',
+    },
+  },
+  validation: {
+    mandatory: { type: 'toggle', displayName: 'Make this field mandatory' },
+    regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' },
+    minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' },
+    maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' },
+    customRule: {
+      type: 'code',
+      displayName: 'Custom validation',
+      placeholder: `{{components.text2.text=='yes'&&'valid'}}`,
+    },
+  },
+  events: {
+    onChange: { displayName: 'On change' },
+    onEnterPressed: { displayName: 'On enter pressed' },
+    onFocus: { displayName: 'On focus' },
+    onBlur: { displayName: 'On blur' },
+  },
+  styles: {
+    color: {
+      type: 'color',
+      displayName: 'Text',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'label',
+    },
+    alignment: {
+      type: 'switch',
+      displayName: 'Alignment',
+      validation: { schema: { type: 'string' }, defaultValue: 'side' },
+      options: [
+        { displayName: 'Side', value: 'side' },
+        { displayName: 'Top', value: 'top' },
+      ],
+      accordian: 'label',
+    },
+    direction: {
+      type: 'switch',
+      displayName: '',
+      validation: { schema: { type: 'string' }, defaultValue: 'left' },
+      showLabel: false,
+      isIcon: true,
+      options: [
+        { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
+        { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
+      ],
+      accordian: 'label',
+      isFxNotRequired: true,
+    },
+    width: {
+      type: 'slider',
+      displayName: 'Width',
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+    auto: {
+      type: 'checkbox',
+      displayName: 'auto',
+      showLabel: false,
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+
+    backgroundColor: {
+      type: 'color',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      accordian: 'field',
+    },
+    borderColor: {
+      type: 'color',
+      displayName: 'Border',
+      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      accordian: 'field',
+    },
+    accentColor: {
+      type: 'color',
+      displayName: 'Accent',
+      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      accordian: 'field',
+    },
+    textColor: {
+      type: 'color',
+      displayName: 'Text',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'field',
+    },
+    errTextColor: {
+      type: 'color',
+      displayName: 'Error text',
+      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      accordian: 'field',
+    },
+    icon: {
+      type: 'icon',
+      displayName: 'Icon',
+      validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
+      accordian: 'field',
+      visibility: false,
+    },
+    iconColor: {
+      type: 'color',
+      displayName: 'Icon color',
+      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      accordian: 'field',
+      visibility: false,
+      showLabel: false,
+    },
+    borderRadius: {
+      type: 'numberInput',
+      displayName: 'Border radius',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 },
+      accordian: 'field',
+    },
+    boxShadow: {
+      type: 'boxShadow',
+      displayName: 'Box Shadow',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: '0px 0px 0px 0px #00000040',
+      },
+      accordian: 'field',
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: 'default',
+      },
+      isFxNotRequired: true,
+      options: [
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
+      ],
+      accordian: 'container',
+    },
+  },
+  exposedVariables: {
+    value: '',
+    isMandatory: false,
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
+  },
+  actions: [
+    {
+      handle: 'setText',
+      displayName: 'Set text',
+      params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }],
+    },
+    {
+      handle: 'clear',
+      displayName: 'Clear',
+    },
+    {
+      handle: 'setFocus',
+      displayName: 'Set focus',
+    },
+    {
+      handle: 'setBlur',
+      displayName: 'Set blur',
+    },
+    {
+      handle: 'disable',
+      displayName: 'Disable(deprecated)',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'visibility',
+      displayName: 'Visibility(deprecated)',
+      params: [{ handle: 'visibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
+  definition: {
+    validation: {
+      mandatory: { value: '{{false}}' },
+      regex: { value: '' },
+      minLength: { value: '' },
+      maxLength: { value: '' },
+      customRule: { value: '' },
+    },
+
+    others: {
+      showOnDesktop: { value: '{{true}}' },
+      showOnMobile: { value: '{{false}}' },
+    },
+    properties: {
+      value: { value: '' },
+      label: { value: 'Label' },
+      placeholder: { value: 'Enter your phone' },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      loadingState: { value: '{{false}}' },
+      tooltip: { value: '' },
+    },
+    events: [],
+    styles: {
+      textColor: { value: '#1B1F24' },
+      borderColor: { value: '#CCD1D5' },
+      accentColor: { value: '#4368E3' },
+      errTextColor: { value: '#D72D39' },
+      borderRadius: { value: '{{6}}' },
+      backgroundColor: { value: '#fff' },
+      iconColor: { value: '#CFD3D859' },
+      direction: { value: 'left' },
+      width: { value: '{{33}}' },
+      alignment: { value: 'side' },
+      color: { value: '#1B1F24' },
+      auto: { value: '{{true}}' },
+      padding: { value: 'default' },
+      boxShadow: { value: '0px 0px 0px 0px #00000040' },
+      icon: { value: 'IconHome2' },
+      iconVisibility: { value: false },
+    },
+  },
+};

frontend/src/AppBuilder/Widgets/PhoneInput.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { default as ReactPhoneInput } from 'react-phone-input-2';
+import 'react-phone-input-2/lib/material.css';
+
+export const PhoneInput = (props) => {
+  const [value, setValue] = React.useState();
+  return <ReactPhoneInput placeholder="Enter phone number" value={value} onChange={setValue} enableSearch={true} />;
+};

frontend/src/AppBuilder/_helpers/editorHelpers.js

@@ -31,6 +31,7 @@ import { Divider } from '@/Editor/Components/Divider';
 import { FilePicker } from '@/Editor/Components/FilePicker';
 import { PasswordInput } from '@/AppBuilder/Widgets/PasswordInput';
 import { EmailInput } from '@/AppBuilder/Widgets/EmailInput';
+import { PhoneInput } from '@/AppBuilder/Widgets/PhoneInput';
 // import { Calendar } from '@/Editor/Components/Calendar';
 // import { Listview } from '@/Editor/Components/Listview';
 import { IFrame } from '@/Editor/Components/IFrame';
@@ -120,6 +121,7 @@ export const AllComponents = {
   FilePicker,
   PasswordInput,
   EmailInput,
+  PhoneInput,
   Calendar,
   IFrame,
   CodeEditor,

frontend/src/AppBuilder/_stores/slices/componentsSlice.js

@@ -1845,6 +1845,7 @@ export const createComponentsSlice = (set, get) => ({
         'TextInput',
         'PasswordInput',
         'EmailInput',
+        'PhoneInput',
         'NumberInput',
         'DropdownV2',
         'MultiselectV2',

server/src/modules/apps/services/widget-config/index.js

@@ -59,6 +59,7 @@ import { datetimePickerV2Config } from './datetimepickerV2';
 import { datePickerV2Config } from './datepickerV2';
 import { timePickerConfig } from './timepicker';
 import { emailinputConfig } from './emailinput';
+import { phoneinputConfig } from './phoneinput';
 
 const widgets = {
   buttonConfig,
@@ -75,6 +76,7 @@ const widgets = {
   datePickerV2Config,
   timePickerConfig,
   emailinputConfig,
+  phoneinputConfig,
   checkboxConfig,
   radiobuttonConfig, //!Depreciated
   radiobuttonV2Config,

server/src/modules/apps/services/widget-config/phoneinput.js

@@ -0,0 +1,303 @@
+export const phoneinputConfig = {
+  name: 'PhoneInput',
+  displayName: 'Phone Input',
+  description: 'Phone input field',
+  component: 'PhoneInput',
+  defaultSize: {
+    width: 10,
+    height: 40,
+  },
+  others: {
+    showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+    showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+  },
+  properties: {
+    label: {
+      type: 'code',
+      displayName: 'Label',
+      validation: { schema: { type: 'string' }, defaultValue: 'Label' },
+    },
+    placeholder: {
+      type: 'code',
+      displayName: 'Placeholder',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'Enter your input',
+      },
+    },
+    value: {
+      type: 'code',
+      displayName: 'Default value',
+      validation: {
+        schema: {
+          type: 'string',
+        },
+        defaultValue: 'Default value',
+      },
+    },
+
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Loading state',
+      validation: { schema: { type: 'boolean' }, defaultValue: false },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      section: 'additionalActions',
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: { schema: { type: 'boolean' }, defaultValue: false },
+      section: 'additionalActions',
+    },
+    tooltip: {
+      type: 'code',
+      displayName: 'Tooltip',
+      validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+      section: 'additionalActions',
+      placeholder: 'Enter tooltip text',
+    },
+  },
+  validation: {
+    mandatory: { type: 'toggle', displayName: 'Make this field mandatory' },
+    regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' },
+    minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' },
+    maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' },
+    customRule: {
+      type: 'code',
+      displayName: 'Custom validation',
+      placeholder: `{{components.text2.text=='yes'&&'valid'}}`,
+    },
+  },
+  events: {
+    onChange: { displayName: 'On change' },
+    onEnterPressed: { displayName: 'On enter pressed' },
+    onFocus: { displayName: 'On focus' },
+    onBlur: { displayName: 'On blur' },
+  },
+  styles: {
+    color: {
+      type: 'color',
+      displayName: 'Text',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'label',
+    },
+    alignment: {
+      type: 'switch',
+      displayName: 'Alignment',
+      validation: { schema: { type: 'string' }, defaultValue: 'side' },
+      options: [
+        { displayName: 'Side', value: 'side' },
+        { displayName: 'Top', value: 'top' },
+      ],
+      accordian: 'label',
+    },
+    direction: {
+      type: 'switch',
+      displayName: '',
+      validation: { schema: { type: 'string' }, defaultValue: 'left' },
+      showLabel: false,
+      isIcon: true,
+      options: [
+        { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
+        { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
+      ],
+      accordian: 'label',
+      isFxNotRequired: true,
+    },
+    width: {
+      type: 'slider',
+      displayName: 'Width',
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+    auto: {
+      type: 'checkbox',
+      displayName: 'auto',
+      showLabel: false,
+      validation: { schema: { type: 'boolean' }, defaultValue: true },
+      accordian: 'label',
+      conditionallyRender: {
+        key: 'alignment',
+        value: 'side',
+      },
+      isFxNotRequired: true,
+    },
+
+    backgroundColor: {
+      type: 'color',
+      displayName: 'Background',
+      validation: { schema: { type: 'string' }, defaultValue: '#fff' },
+      accordian: 'field',
+    },
+    borderColor: {
+      type: 'color',
+      displayName: 'Border',
+      validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
+      accordian: 'field',
+    },
+    accentColor: {
+      type: 'color',
+      displayName: 'Accent',
+      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      accordian: 'field',
+    },
+    textColor: {
+      type: 'color',
+      displayName: 'Text',
+      validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
+      accordian: 'field',
+    },
+    errTextColor: {
+      type: 'color',
+      displayName: 'Error text',
+      validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
+      accordian: 'field',
+    },
+    icon: {
+      type: 'icon',
+      displayName: 'Icon',
+      validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' },
+      accordian: 'field',
+      visibility: false,
+    },
+    iconColor: {
+      type: 'color',
+      displayName: 'Icon color',
+      validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
+      accordian: 'field',
+      visibility: false,
+      showLabel: false,
+    },
+    borderRadius: {
+      type: 'numberInput',
+      displayName: 'Border radius',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 },
+      accordian: 'field',
+    },
+    boxShadow: {
+      type: 'boxShadow',
+      displayName: 'Box Shadow',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: '0px 0px 0px 0px #00000040',
+      },
+      accordian: 'field',
+    },
+    padding: {
+      type: 'switch',
+      displayName: 'Padding',
+      validation: {
+        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+        defaultValue: 'default',
+      },
+      isFxNotRequired: true,
+      options: [
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
+      ],
+      accordian: 'container',
+    },
+  },
+  exposedVariables: {
+    value: '',
+    isMandatory: false,
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
+  },
+  actions: [
+    {
+      handle: 'setText',
+      displayName: 'Set text',
+      params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }],
+    },
+    {
+      handle: 'clear',
+      displayName: 'Clear',
+    },
+    {
+      handle: 'setFocus',
+      displayName: 'Set focus',
+    },
+    {
+      handle: 'setBlur',
+      displayName: 'Set blur',
+    },
+    {
+      handle: 'disable',
+      displayName: 'Disable(deprecated)',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'visibility',
+      displayName: 'Visibility(deprecated)',
+      params: [{ handle: 'visibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
+  definition: {
+    validation: {
+      mandatory: { value: '{{false}}' },
+      regex: { value: '' },
+      minLength: { value: '' },
+      maxLength: { value: '' },
+      customRule: { value: '' },
+    },
+
+    others: {
+      showOnDesktop: { value: '{{true}}' },
+      showOnMobile: { value: '{{false}}' },
+    },
+    properties: {
+      value: { value: '' },
+      label: { value: 'Label' },
+      placeholder: { value: 'Enter your phone' },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
+      loadingState: { value: '{{false}}' },
+      tooltip: { value: '' },
+    },
+    events: [],
+    styles: {
+      textColor: { value: '#1B1F24' },
+      borderColor: { value: '#CCD1D5' },
+      accentColor: { value: '#4368E3' },
+      errTextColor: { value: '#D72D39' },
+      borderRadius: { value: '{{6}}' },
+      backgroundColor: { value: '#fff' },
+      iconColor: { value: '#CFD3D859' },
+      direction: { value: 'left' },
+      width: { value: '{{33}}' },
+      alignment: { value: 'side' },
+      color: { value: '#1B1F24' },
+      auto: { value: '{{true}}' },
+      padding: { value: 'default' },
+      boxShadow: { value: '0px 0px 0px 0px #00000040' },
+      icon: { value: 'IconHome2' },
+      iconVisibility: { value: false },
+    },
+  },
+};