@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/.claude/skills/field-skills/DateTime.md

@@ -19,6 +19,7 @@ Renders a combined date and time picker. Stores values as ISO 8601 UTC strings.
 ## Props (component-specific)
 
 No props beyond `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -46,27 +47,29 @@ import type { PConnFieldProps } from '@pega/sdk-react';
 ## Display Mode Rendering
 
 Format using `format(value, 'datetime', { format: \`${dateFormatString} hh:mm a\` })`:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />`.
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />`.
 
 ## Read-Only Rendering
 
 Format value as `format(props.value, 'datetime')` then pass to `TextInput`:
+
 ```
 return <TextInput {...props} value={formattedDateTime} />
 ```
 
 ## Visual Specifications
 
-| Property | Value |
-|----------|-------|
-| Width | Auto |
-| Size | Small |
-| Variant | Outlined |
-| Format | `MM/DD/YYYY hh:mm a` (locale-aware date + 12h time) |
-| Placeholder | Lowercase format, e.g., `mm/dd/yyyy hh:mm a` |
-| Minutes step | 5 minutes |
-| Error state | Red border + red helper text |
+| Property     | Value                                               |
+| ------------ | --------------------------------------------------- |
+| Width        | Auto                                                |
+| Size         | Small                                               |
+| Variant      | Outlined                                            |
+| Format       | `MM/DD/YYYY hh:mm a` (locale-aware date + 12h time) |
+| Placeholder  | Lowercase format, e.g., `mm/dd/yyyy hh:mm a`        |
+| Minutes step | 5 minutes                                           |
+| Error state  | Red border + red helper text                        |
 
 **Note on known issue:** Keyboard input in the minute field may jump to the am/pm field after one digit — this is a known quirk of some date-time picker library versions.
 
@@ -95,9 +98,9 @@ return <TextInput {...props} value={formattedDateTime} />
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="datetime-local">` (no timezone control) |
-| MUI | `<DateTimePicker />` from `@mui/x-date-pickers` + `dayjs.tz` |
-| Ant Design | `<DatePicker showTime />` |
-| Chakra UI | Third-party datetime picker |
+| Design System      | Recommended Component                                        |
+| ------------------ | ------------------------------------------------------------ |
+| Default (CSS only) | `<input type="datetime-local">` (no timezone control)        |
+| MUI                | `<DateTimePicker />` from `@mui/x-date-pickers` + `dayjs.tz` |
+| Ant Design         | `<DatePicker showTime />`                                    |
+| Chakra UI          | Third-party datetime picker                                  |

package/templates/react-sdk-reference/.claude/skills/field-skills/Decimal.md

@@ -18,12 +18,12 @@ Renders a numeric input that accepts decimal values. Supports configurable decim
 
 ## Props (component-specific)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `currencyISOCode` | `string` (optional) | `'USD'` | ISO code for symbol/separator lookup (used when `formatter === 'Currency'`) |
-| `decimalPrecision` | `number` (optional) | — | Number of decimal places to show |
-| `showGroupSeparators` | `boolean` (optional) | — | Whether to show thousands separators |
-| `formatter` | `string` (optional) | — | `'Currency'` or `'Percentage'` — changes display mode formatting and read-only prefix/suffix |
+| Prop                  | Type                 | Default | Description                                                                                  |
+| --------------------- | -------------------- | ------- | -------------------------------------------------------------------------------------------- |
+| `currencyISOCode`     | `string` (optional)  | `'USD'` | ISO code for symbol/separator lookup (used when `formatter === 'Currency'`)                  |
+| `decimalPrecision`    | `number` (optional)  | —       | Number of decimal places to show                                                             |
+| `showGroupSeparators` | `boolean` (optional) | —       | Whether to show thousands separators                                                         |
+| `formatter`           | `string` (optional)  | —       | `'Currency'` or `'Percentage'` — changes display mode formatting and read-only prefix/suffix |
 
 ## Behavioral Contract
 
@@ -48,6 +48,7 @@ Renders a numeric input that accepts decimal values. Supports configurable decim
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />`.
 
 `formattedValue` is computed before display-mode check:
+
 - `formatter === 'Currency'` → currency-formatted string.
 - Otherwise → decimal-formatted string using `pConn.getComponentName()?.toLowerCase()` as format key.
 
@@ -57,16 +58,16 @@ Keep numeric format input with `readOnly: true`. Apply prefix (`$`) or suffix (`
 
 ## Visual Specifications
 
-| Property | Standard (editable) | Read-only |
-|----------|---------------------|-----------|
-| Width | 100% | 100% |
-| Size | Small | Small |
-| Variant | Outlined | Standard (flat) |
-| Prefix | None (unless read-only Currency) | Currency symbol if `formatter='Currency'` |
-| Suffix | None (unless read-only Percentage) | `%` if `formatter='Percentage'` |
-| Thousands separator | Only when `showGroupSeparators=true` | Same |
-| Decimal scale | From `decimalPrecision` | Undefined for Currency, `decimalPrecision` otherwise |
-| Placeholder | From `placeholder` prop | — |
+| Property            | Standard (editable)                  | Read-only                                            |
+| ------------------- | ------------------------------------ | ---------------------------------------------------- |
+| Width               | 100%                                 | 100%                                                 |
+| Size                | Small                                | Small                                                |
+| Variant             | Outlined                             | Standard (flat)                                      |
+| Prefix              | None (unless read-only Currency)     | Currency symbol if `formatter='Currency'`            |
+| Suffix              | None (unless read-only Percentage)   | `%` if `formatter='Percentage'`                      |
+| Thousands separator | Only when `showGroupSeparators=true` | Same                                                 |
+| Decimal scale       | From `decimalPrecision`              | Undefined for Currency, `decimalPrecision` otherwise |
+| Placeholder         | From `placeholder` prop              | —                                                    |
 
 ## Edge Cases & Special Logic
 
@@ -90,9 +91,9 @@ Keep numeric format input with `readOnly: true`. Apply prefix (`$`) or suffix (`
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                             |
+| ------------------ | ------------------------------------------------- |
 | Default (CSS only) | `<input type="text">` with custom numeric masking |
-| MUI | `NumericFormat` with `customInput={TextField}` |
-| Ant Design | `<InputNumber precision={decimalPrecision} />` |
-| Chakra UI | `<NumberInput>` |
+| MUI                | `NumericFormat` with `customInput={TextField}`    |
+| Ant Design         | `<InputNumber precision={decimalPrecision} />`    |
+| Chakra UI          | `<NumberInput>`                                   |

package/templates/react-sdk-reference/.claude/skills/field-skills/Dropdown.md

@@ -18,16 +18,16 @@ Renders a single-select dropdown (select box). Options are loaded from a Pega da
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `listType` | `string` | `'associated'` or `'datapage'` — determines how options are loaded |
-| `datasource` | `any[]` (optional) | The raw datasource (array for associated, string name for datapage) |
-| `columns` | `any[]` | Column config for extracting key/value from datasource records |
-| `parameters` | `any` (optional) | Query parameters for data page calls |
-| `deferDatasource` | `boolean` (optional) | If true, transform `datasourceMetadata` into datapage config |
-| `datasourceMetadata` | `any` (optional) | Metadata from deferred datasource resolution |
-| `fieldMetadata` | `any` (optional) | Field metadata for localization context |
-| `onRecordChange` | `any` (optional) | Callback fired after a selection change |
+| Prop                 | Type                 | Description                                                         |
+| -------------------- | -------------------- | ------------------------------------------------------------------- |
+| `listType`           | `string`             | `'associated'` or `'datapage'` — determines how options are loaded  |
+| `datasource`         | `any[]` (optional)   | The raw datasource (array for associated, string name for datapage) |
+| `columns`            | `any[]`              | Column config for extracting key/value from datasource records      |
+| `parameters`         | `any` (optional)     | Query parameters for data page calls                                |
+| `deferDatasource`    | `boolean` (optional) | If true, transform `datasourceMetadata` into datapage config        |
+| `datasourceMetadata` | `any` (optional)     | Metadata from deferred datasource resolution                        |
+| `fieldMetadata`      | `any` (optional)     | Field metadata for localization context                             |
+| `onRecordChange`     | `any` (optional)     | Callback fired after a selection change                             |
 
 ## Behavioral Contract
 
@@ -42,7 +42,7 @@ Renders a single-select dropdown (select box). Options are loaded from a Pega da
 5. **Loading options for `associated` listType:** In `useEffect` watching `theDatasource`, call `Utils.getOptionList(props, pConn.getDataObject(''))`. Prepend a placeholder option `{key: placeholder, value: localizedPlaceholder}`.
 6. **Loading options for `datapage` listType:** In mount-time `useEffect`, call `getDataPage(datasource, parameters, context)`. Map results using `getDisplayFieldsMetaData(columns)` to extract `key` and `value` per row.
 7. **Placeholder:** Default `'Select...'` if not provided. Prepended as the first option for associated lists.
-8. **On change:** 
+8. **On change:**
    - If selected value equals `placeholder`, treat as empty string: `selectedValue = evt.target.value === placeholder ? '' : evt.target.value`.
    - Commit via `handleEvent(actionsApi, 'changeNblur', propName, selectedValue)`.
    - Fire `onRecordChange(evt)` if provided.
@@ -52,10 +52,13 @@ Renders a single-select dropdown (select box). Options are loaded from a Pega da
 ## Display Mode Rendering
 
 Display modes use the **resolved display value** (the `value` string matching the selected `key`), NOT the raw stored key:
+
 ```
 options.find(option => option.key === value)?.value || value
 ```
+
 Both modes pass this resolved value through `pConn.getLocalizedValue()` for localization:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={localizedDisplayValue} />`
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={localizedDisplayValue} variant='stacked' />`
 
@@ -65,22 +68,39 @@ Set `readOnly: true` on the select element. Flat/borderless variant. Change hand
 
 ## Visual Specifications
 
-| Property | Standard (editable) | Read-only |
-|----------|---------------------|-----------|
-| Width | 100% | 100% |
-| Size | Small | Small |
-| Variant | Outlined | Standard (flat) |
-| Placeholder option | First option in list (`'Select...'`) | Not shown |
-| Options | Rendered as select menu items | — |
-| Error state | Red border + red helper text | — |
-| Label | Floating label | — |
+| Property           | Standard (editable)                  | Read-only       |
+| ------------------ | ------------------------------------ | --------------- |
+| Width              | 100%                                 | 100%            |
+| Size               | Small                                | Small           |
+| Variant            | Outlined                             | Standard (flat) |
+| Placeholder option | First option in list (`'Select...'`) | Not shown       |
+| Options            | Rendered as select menu items        | —               |
+| Error state        | Red border + red helper text         | —               |
+| Label              | Floating label                       | —               |
 
 **CSS-only notes:**
+
 ```css
-select { width: 100%; height: 40px; border: 1px solid rgba(0,0,0,0.23); border-radius: 4px; padding: 8px 12px; font-size: 0.875rem; }
-select:focus { border-color: #1976d2; outline: none; }
-select.error { border-color: #d32f2f; }
-select[readonly] { border: none; background: transparent; pointer-events: none; }
+select {
+  width: 100%;
+  height: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+}
+select:focus {
+  border-color: #1976d2;
+  outline: none;
+}
+select.error {
+  border-color: #d32f2f;
+}
+select[readonly] {
+  border: none;
+  background: transparent;
+  pointer-events: none;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -106,9 +126,9 @@ select[readonly] { border: none; background: transparent; pointer-events: none;
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<select>` with `<option>` elements |
-| MUI | `<TextField select>` with `<MenuItem>` children |
-| Ant Design | `<Select>` with `<Select.Option>` |
-| Chakra UI | `<Select>` |
+| Design System      | Recommended Component                           |
+| ------------------ | ----------------------------------------------- |
+| Default (CSS only) | `<select>` with `<option>` elements             |
+| MUI                | `<TextField select>` with `<MenuItem>` children |
+| Ant Design         | `<Select>` with `<Select.Option>`               |
+| Chakra UI          | `<Select>`                                      |

package/templates/react-sdk-reference/.claude/skills/field-skills/Email.md

@@ -19,6 +19,7 @@ Renders a single-line text input of type `email` with a leading mail icon adornm
 ## Props (component-specific)
 
 No props beyond `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -45,20 +46,21 @@ Delegate to `TextInput`: `return <TextInput {...props} />`. This means the mail
 
 Derived from the reference component's MUI props and styles:
 
-| Property | Value |
-|----------|-------|
-| Width | 100% |
-| Size | Small (~40px height) |
-| Variant | Outlined |
-| Leading icon | Mail/envelope icon (`position='start'` adornment) |
-| Icon color | Inherits text color |
-| Border | 1px solid outlined |
-| Border radius | 4px |
-| Error state | Red border + red helper text |
-| Helper text | Below input |
-| Placeholder | From `placeholder` prop (`''` default) |
+| Property      | Value                                             |
+| ------------- | ------------------------------------------------- |
+| Width         | 100%                                              |
+| Size          | Small (~40px height)                              |
+| Variant       | Outlined                                          |
+| Leading icon  | Mail/envelope icon (`position='start'` adornment) |
+| Icon color    | Inherits text color                               |
+| Border        | 1px solid outlined                                |
+| Border radius | 4px                                               |
+| Error state   | Red border + red helper text                      |
+| Helper text   | Below input                                       |
+| Placeholder   | From `placeholder` prop (`''` default)            |
 
 **CSS-only implementation notes:**
+
 ```css
 .email-input-wrapper {
   position: relative;
@@ -99,9 +101,9 @@ Derived from the reference component's MUI props and styles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="email">` with absolutely-positioned icon |
-| MUI | `<TextField type='email' InputProps={{ startAdornment: <MailIcon /> }} />` |
-| Ant Design | `<Input type="email" prefix={<MailOutlined />} />` |
-| Chakra UI | `<InputGroup><InputLeftElement><EmailIcon /></InputLeftElement><Input type="email" /></InputGroup>` |
+| Design System      | Recommended Component                                                                               |
+| ------------------ | --------------------------------------------------------------------------------------------------- |
+| Default (CSS only) | `<input type="email">` with absolutely-positioned icon                                              |
+| MUI                | `<TextField type='email' InputProps={{ startAdornment: <MailIcon /> }} />`                          |
+| Ant Design         | `<Input type="email" prefix={<MailOutlined />} />`                                                  |
+| Chakra UI          | `<InputGroup><InputLeftElement><EmailIcon /></InputLeftElement><Input type="email" /></InputGroup>` |

package/templates/react-sdk-reference/.claude/skills/field-skills/Group.md

@@ -18,14 +18,14 @@ A layout/structural component (not a form input). Wraps a set of child field com
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `children` | `ReactElement[]` | Child field components to render inside the group |
-| `heading` | `string` | The group heading/title |
-| `showHeading` | `boolean` | Whether to display the heading |
-| `instructions` | `string` (optional) | Instructional text shown below the heading |
-| `collapsible` | `boolean` | Whether the group can be collapsed |
-| `type` | `string` | Group type (used for layout context) |
+| Prop           | Type                | Description                                       |
+| -------------- | ------------------- | ------------------------------------------------- |
+| `children`     | `ReactElement[]`    | Child field components to render inside the group |
+| `heading`      | `string`            | The group heading/title                           |
+| `showHeading`  | `boolean`           | Whether to display the heading                    |
+| `instructions` | `string` (optional) | Instructional text shown below the heading        |
+| `collapsible`  | `boolean`           | Whether the group can be collapsed                |
+| `type`         | `string`            | Group type (used for layout context)              |
 
 `displayMode` is also consumed from `PConnFieldProps`.
 
@@ -54,11 +54,17 @@ Grid container (spacing=2):
 ```
 
 **CSS-only grid layout:**
+
 ```css
-.field-group-children { display: grid; grid-template-columns: 1fr; gap: 16px; }
+.field-group-children {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
 ```
 
 The `FieldGroup` component itself provides:
+
 - Optional heading/title above the children
 - Optional collapse/expand control
 - Optional instructions text
@@ -82,9 +88,9 @@ The `FieldGroup` component itself provides:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<fieldset>` or `<details>/<summary>` for collapsible |
-| MUI | `<Grid container spacing={2}>` with `<Grid size={{ xs: 12 }}>` per child |
-| Ant Design | `<Collapse>` panel or `<Card>` |
-| Chakra UI | `<Box>` or `<Accordion>` |
+| Design System      | Recommended Component                                                    |
+| ------------------ | ------------------------------------------------------------------------ |
+| Default (CSS only) | `<fieldset>` or `<details>/<summary>` for collapsible                    |
+| MUI                | `<Grid container spacing={2}>` with `<Grid size={{ xs: 12 }}>` per child |
+| Ant Design         | `<Collapse>` panel or `<Card>`                                           |
+| Chakra UI          | `<Box>` or `<Accordion>`                                                 |

package/templates/react-sdk-reference/.claude/skills/field-skills/Integer.md

@@ -19,6 +19,7 @@ Renders a single-line text input restricted to integer values. Actively filters
 ## Props (component-specific)
 
 No props beyond `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -49,16 +50,16 @@ Delegate to `TextInput`: `return <TextInput {...props} />`.
 
 Identical to `TextInput` visually:
 
-| Property | Value |
-|----------|-------|
-| Width | 100% |
-| Size | Small (~40px height) |
-| Variant | Outlined |
-| Border | 1px solid |
-| Border radius | 4px |
-| Error state | Red border + red helper text |
-| Input mode | `numeric` (shows numeric keyboard on mobile) |
-| Pattern | `[0-9]*` |
+| Property      | Value                                        |
+| ------------- | -------------------------------------------- |
+| Width         | 100%                                         |
+| Size          | Small (~40px height)                         |
+| Variant       | Outlined                                     |
+| Border        | 1px solid                                    |
+| Border radius | 4px                                          |
+| Error state   | Red border + red helper text                 |
+| Input mode    | `numeric` (shows numeric keyboard on mobile) |
+| Pattern       | `[0-9]*`                                     |
 
 ## Edge Cases & Special Logic
 
@@ -79,9 +80,9 @@ Identical to `TextInput` visually:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="text" inputMode="numeric" pattern="[0-9]*">` |
-| MUI | `<TextField type='text' slotProps={{ htmlInput: { inputMode: 'numeric', pattern: '[0-9]*' } }} />` |
-| Ant Design | `<InputNumber precision={0} />` or `<Input />` with custom `onChange` filter |
-| Chakra UI | `<NumberInput allowMouseWheel={false} />` or plain `<Input>` with filter |
+| Design System      | Recommended Component                                                                              |
+| ------------------ | -------------------------------------------------------------------------------------------------- |
+| Default (CSS only) | `<input type="text" inputMode="numeric" pattern="[0-9]*">`                                         |
+| MUI                | `<TextField type='text' slotProps={{ htmlInput: { inputMode: 'numeric', pattern: '[0-9]*' } }} />` |
+| Ant Design         | `<InputNumber precision={0} />` or `<Input />` with custom `onChange` filter                       |
+| Chakra UI          | `<NumberInput allowMouseWheel={false} />` or plain `<Input>` with filter                           |

package/templates/react-sdk-reference/.claude/skills/field-skills/Location.md

@@ -18,12 +18,12 @@ Renders a text input that integrates with Google Maps Places API for address/loc
 
 ## Props (component-specific)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `coordinates` | `string` (optional) | `''` | Comma-separated lat/lng string (e.g., `'18.5204, 73.8567'`) |
+| Prop              | Type                 | Default | Description                                                              |
+| ----------------- | -------------------- | ------- | ------------------------------------------------------------------------ |
+| `coordinates`     | `string` (optional)  | `''`    | Comma-separated lat/lng string (e.g., `'18.5204, 73.8567'`)              |
 | `onlyCoordinates` | `boolean` (optional) | `false` | If `true`, store and display lat/lng coordinates instead of address text |
-| `showMap` | `boolean` (optional) | — | Show the interactive map in editable mode |
-| `showMapReadOnly` | `boolean` (optional) | — | Show the map in read-only mode |
+| `showMap`         | `boolean` (optional) | —       | Show the interactive map in editable mode                                |
+| `showMapReadOnly` | `boolean` (optional) | —       | Show the map in read-only mode                                           |
 
 ## Behavioral Contract
 
@@ -58,13 +58,17 @@ Renders a text input that integrates with Google Maps Places API for address/loc
 ### Map configuration (disabled state)
 
 When `disabled`, map options disable all interactions:
+
 - `gestureHandling: 'none'`, `keyboardShortcuts: false`, `disableDefaultUI: true`, `clickableIcons: false`
 - Map opacity: `0.7` when disabled
 
 ### CSS for Google Maps autocomplete dropdown z-index:
+
 ```css
 /* Location.css */
-.pac-container { z-index: 2147483647; }
+.pac-container {
+  z-index: 2147483647;
+}
 ```
 
 ## Display Mode Rendering
@@ -83,23 +87,28 @@ When `disabled`, map options disable all interactions:
 
 ## Visual Specifications
 
-| Property | Value |
-|----------|-------|
-| Width | 100% |
-| Input variant | Default (outlined, from `TextField`) |
-| Trailing icon | Location pin icon button (for current location) |
-| Error alert | Alert banner ABOVE the input field when `hasError` |
-| Map container | `width: 100%`, `height: 300px`, `marginTop: 0px` |
-| Map render | Only shown when `isLoaded && (showMap || showMapReadOnly)` |
-| Disabled map opacity | `0.7` |
+| Property             | Value                                              |
+| -------------------- | -------------------------------------------------- |
+| Width                | 100%                                               |
+| Input variant        | Default (outlined, from `TextField`)               |
+| Trailing icon        | Location pin icon button (for current location)    |
+| Error alert          | Alert banner ABOVE the input field when `hasError` |
+| Map container        | `width: 100%`, `height: 300px`, `marginTop: 0px`   |
+| Map render           | Only shown when `isLoaded && (showMap              |     | showMapReadOnly)` |
+| Disabled map opacity | `0.7`                                              |
 
 **CSS companion file required:** `Location.css` with:
+
 ```css
-.pac-container { z-index: 2147483647; }
+.pac-container {
+  z-index: 2147483647;
+}
 ```
+
 This ensures the Google Maps autocomplete dropdown appears above modal/dialog overlays.
 
 **CSS-only implementation notes:**
+
 - Location pin button: `<button>` with `position: absolute; right: 8px; top: 50%; transform: translateY(-50%);`
 
 ## Edge Cases & Special Logic
@@ -128,9 +137,9 @@ This ensures the Google Maps autocomplete dropdown appears above modal/dialog ov
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
 | Default (CSS only) | `<input type="text">` + Google Maps Autocomplete API + Google Map embed |
-| MUI | `<TextField>` + `InputAdornment` for icon + `@react-google-maps/api` |
-| Ant Design | `<Input suffix={<LocationIcon />}>` + Google Maps |
-| Chakra UI | `<InputGroup>` + `<InputRightElement>` + Google Maps |
+| MUI                | `<TextField>` + `InputAdornment` for icon + `@react-google-maps/api`    |
+| Ant Design         | `<Input suffix={<LocationIcon />}>` + Google Maps                       |
+| Chakra UI          | `<InputGroup>` + `<InputRightElement>` + Google Maps                    |