@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/.github/skills/field-skills/Multiselect.md

@@ -20,35 +20,36 @@ Renders a multi-value typeahead input where users can search and select multiple
 
 ## Props (component-specific)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `getPConnect` | `function` | — | PConnect accessor |
-| `label` | `string` | — | Field label |
-| `placeholder` | `string` | — | Input placeholder |
-| `referenceList` | `any[]` | — | Currently selected items from embedded page list |
-| `selectionKey` | `string` | — | Property path used as the selection key |
-| `primaryField` | `string` | — | Property path for the primary display field |
-| `initialCaseClass` | `string` | — | Case class for context in search |
-| `selectionList` | `string` | — | Property path of the reference list |
-| `datasource` | `any[]` | `[]` | Flat data source |
-| `columns` | `any[]` | `[{}]` | Column config for key/value extraction |
-| `listType` | `string` | `''` | `'associated'`, `'datapage'`, `'promptList'`, `'localList'` |
-| `isGroupData` | `boolean` | `false` | Whether to use grouped/hierarchical data |
-| `groupDataSource` | `any[]` | `[]` | Data source for grouped display |
-| `groupColumnsConfig` | `any[]` | `[{}]` | Column config for group display |
-| `referenceType` | `string` | — | `'Case'` or `'Data'` |
-| `secondaryFields` | `any` | — | Additional secondary display fields |
-| `showSecondaryInSearchOnly` | `boolean` | `false` | Show secondary fields only during search |
-| `parameters` | `object` | `{}` | Data page query parameters |
-| `matchPosition` | `string` | `'contains'` | Search match position (`'contains'`, `'startsWith'`) |
-| `maxResultsDisplay` | `string` | — | Max results to display (`'100'` default) |
-| `value` | `any` | — | Current value |
+| Prop                        | Type       | Default      | Description                                                 |
+| --------------------------- | ---------- | ------------ | ----------------------------------------------------------- |
+| `getPConnect`               | `function` | —            | PConnect accessor                                           |
+| `label`                     | `string`   | —            | Field label                                                 |
+| `placeholder`               | `string`   | —            | Input placeholder                                           |
+| `referenceList`             | `any[]`    | —            | Currently selected items from embedded page list            |
+| `selectionKey`              | `string`   | —            | Property path used as the selection key                     |
+| `primaryField`              | `string`   | —            | Property path for the primary display field                 |
+| `initialCaseClass`          | `string`   | —            | Case class for context in search                            |
+| `selectionList`             | `string`   | —            | Property path of the reference list                         |
+| `datasource`                | `any[]`    | `[]`         | Flat data source                                            |
+| `columns`                   | `any[]`    | `[{}]`       | Column config for key/value extraction                      |
+| `listType`                  | `string`   | `''`         | `'associated'`, `'datapage'`, `'promptList'`, `'localList'` |
+| `isGroupData`               | `boolean`  | `false`      | Whether to use grouped/hierarchical data                    |
+| `groupDataSource`           | `any[]`    | `[]`         | Data source for grouped display                             |
+| `groupColumnsConfig`        | `any[]`    | `[{}]`       | Column config for group display                             |
+| `referenceType`             | `string`   | —            | `'Case'` or `'Data'`                                        |
+| `secondaryFields`           | `any`      | —            | Additional secondary display fields                         |
+| `showSecondaryInSearchOnly` | `boolean`  | `false`      | Show secondary fields only during search                    |
+| `parameters`                | `object`   | `{}`         | Data page query parameters                                  |
+| `matchPosition`             | `string`   | `'contains'` | Search match position (`'contains'`, `'startsWith'`)        |
+| `maxResultsDisplay`         | `string`   | —            | Max results to display (`'100'` default)                    |
+| `value`                     | `any`      | —            | Current value                                               |
 
 ## Behavioral Contract
 
 ### Reference List Mode (when `referenceList.length > 0`)
 
 When `referenceList` has items, override datasource and columns:
+
 - `datasource = referenceList`
 - Build `columns`: primary display field, key field, secondary columns (from `secondaryFields` or default to `selectionKey`)
 - If `referenceType === 'Case'`: append secondary columns
@@ -56,6 +57,7 @@ When `referenceList` has items, override datasource and columns:
 ### Data Config
 
 Build a `dataConfig` object (memoized with deep comparison) containing:
+
 - `dataSource`, `groupDataSource`, `isGroupData`, `showSecondaryInSearchOnly`, `parameters`, `matchPosition`, `listType`, `maxResultsDisplay`
 - `columns`: preprocessed (strip leading `.` from value fields)
 - `groupColumnsConfig`: preprocessed
@@ -69,6 +71,7 @@ Build a `dataConfig` object (memoized with deep comparison) containing:
 ### Data API Initialization
 
 In `useEffect` watching `dataConfig` (non-associated lists):
+
 ```
 PCore.getDataApi().init(dataConfig, contextName).then(dataObj => {
   dataApiObj.current = dataObj
@@ -81,6 +84,7 @@ PCore.getDataApi().init(dataConfig, contextName).then(dataObj => {
 ### Search
 
 `getCaseListBasedOnParams(searchText, group, selectedRows, currentItemsTree, isTriggeredFromSearch)`:
+
 1. If `referenceList.length > 0`: get currently selected rows from `listActions.getSelectedRows(true)`, map to `{id, primary}` format, update `selectedItems` state.
 2. Build `initalItemsTree`: use fresh data if `isTriggeredFromSearch || !currentItemsTree`, else current.
 3. Call `doSearch(...)` to get filtered results.
@@ -96,6 +100,7 @@ PCore.getDataApi().init(dataConfig, contextName).then(dataObj => {
 ### Selection Changes (`handleChange`)
 
 When selection changes (user adds/removes item):
+
 1. Mark all currently selected items as `selected: true`.
 2. Determine if this was an add or remove.
 3. Update `itemsTree` selections in-place.
@@ -115,23 +120,42 @@ No explicit `displayMode` handling in the reference implementation — Multisele
 
 ## Visual Specifications
 
-| Property | Value |
-|----------|-------|
-| Width | 100% |
-| Size | Small |
-| Variant | Outlined |
-| Multiple values | Tags/chips shown inside the input box |
-| Dropdown | Shows filtered options with checkboxes |
+| Property        | Value                                                                  |
+| --------------- | ---------------------------------------------------------------------- |
+| Width           | 100%                                                                   |
+| Size            | Small                                                                  |
+| Variant         | Outlined                                                               |
+| Multiple values | Tags/chips shown inside the input box                                  |
+| Dropdown        | Shows filtered options with checkboxes                                 |
 | Close on select | Off (`disableCloseOnSelect`) — user can select multiple before closing |
-| Option label | `option.primary` field |
-| Placeholder | From `placeholder` prop |
-| Error state | Red border + red helper text |
+| Option label    | `option.primary` field                                                 |
+| Placeholder     | From `placeholder` prop                                                |
+| Error state     | Red border + red helper text                                           |
 
 **CSS-only notes:**
+
 ```css
-.multiselect-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid rgba(0,0,0,0.23); border-radius: 4px; }
-.multiselect-tag { background: rgba(0,0,0,0.08); border-radius: 16px; padding: 2px 8px; font-size: 0.8125rem; display: flex; align-items: center; gap: 4px; }
-.multiselect-tag-delete { cursor: pointer; font-size: 0.75rem; }
+.multiselect-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+}
+.multiselect-tag {
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+  padding: 2px 8px;
+  font-size: 0.8125rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.multiselect-tag-delete {
+  cursor: pointer;
+  font-size: 0.75rem;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -156,9 +180,9 @@ No explicit `displayMode` handling in the reference implementation — Multisele
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Custom tag input + filterable dropdown list |
-| MUI | `<Autocomplete multiple disableCloseOnSelect>` |
-| Ant Design | `<Select mode="multiple" showSearch>` |
-| Chakra UI | Third-party multi-select (e.g., Chakra React Select) |
+| Design System      | Recommended Component                                |
+| ------------------ | ---------------------------------------------------- |
+| Default (CSS only) | Custom tag input + filterable dropdown list          |
+| MUI                | `<Autocomplete multiple disableCloseOnSelect>`       |
+| Ant Design         | `<Select mode="multiple" showSearch>`                |
+| Chakra UI          | Third-party multi-select (e.g., Chakra React Select) |

package/templates/react-sdk-reference/.github/skills/field-skills/ObjectReference.md

@@ -20,18 +20,18 @@ Does NOT render a UI control directly. Instead, it reads the raw metadata to det
 
 > Uses `Omit<PConnFieldProps, 'value'>` — no direct `value` prop.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `getPConnect` | `any` | — | PConnect accessor |
-| `displayMode` | `any` | — | Display mode |
-| `allowAndPersistChangesInReviewMode` | `any` | `false` | Whether the reference can be edited while in review/display mode |
-| `targetObjectType` | `any` | — | `'case'` or `'data'` — determines `referenceType` |
-| `mode` | `string` | `''` | `'single'` or `'multi'` (SELECTION_MODE) |
-| `parameters` | `object` | — | Data page query parameters |
-| `hideLabel` | `boolean` | `false` | Whether to hide label |
-| `inline` | `boolean` | `false` | Whether to render inline |
-| `showPromotedFilters` | `boolean` | `false` | Show promoted filters in child |
-| `additionalFields` | `any` | — | Additional fields for read-only display |
+| Prop                                 | Type      | Default | Description                                                      |
+| ------------------------------------ | --------- | ------- | ---------------------------------------------------------------- |
+| `getPConnect`                        | `any`     | —       | PConnect accessor                                                |
+| `displayMode`                        | `any`     | —       | Display mode                                                     |
+| `allowAndPersistChangesInReviewMode` | `any`     | `false` | Whether the reference can be edited while in review/display mode |
+| `targetObjectType`                   | `any`     | —       | `'case'` or `'data'` — determines `referenceType`                |
+| `mode`                               | `string`  | `''`    | `'single'` or `'multi'` (SELECTION_MODE)                         |
+| `parameters`                         | `object`  | —       | Data page query parameters                                       |
+| `hideLabel`                          | `boolean` | `false` | Whether to hide label                                            |
+| `inline`                             | `boolean` | `false` | Whether to render inline                                         |
+| `showPromotedFilters`                | `boolean` | `false` | Show promoted filters in child                                   |
+| `additionalFields`                   | `any`     | —       | Additional fields for read-only display                          |
 
 ## Behavioral Contract
 
@@ -48,6 +48,7 @@ Does NOT render a UI control directly. Instead, it reads the raw metadata to det
 
 **If `componentType === 'SemanticLink'` and `!canBeChangedInReviewMode`:**
 Build a SemanticLink config from rawViewMetadata and call `getPConnect().createComponent({ type: 'SemanticLink', config: {...} })`. Config includes:
+
 - `displayField` → `primaryField` and `text`
 - `value` → `caseID`
 - `resourceParams: { workID: value }`, `resourcePayload: { caseClassName: caseClass }`
@@ -55,6 +56,7 @@ Build a SemanticLink config from rawViewMetadata and call `getPConnect().createC
 
 **If `isDisplayModeEnabled && !canBeChangedInReviewMode` (other types):**
 Render `<SingleReferenceReadonly>` with config from `rawViewMetadata.config`, passing:
+
 - `label`, `type`, `displayAs='readonly'`, `displayMode`, `referenceType`, `hideLabel`, `dataRelationshipContext`, `additionalFields`
 
 ### Subsection: Editable variants (including editable-in-review)
@@ -71,6 +73,7 @@ Render `<SingleReferenceReadonly>` with config from `rawViewMetadata.config`, pa
    - If `!canBeChangedInReviewMode`: set `rawViewMetadata.config.displayMode = displayMode`
 
 3. **Build fieldMetaData:**
+
    ```
    fieldMetaData = { datasourceMetadata: { datasource: { parameters: {} } } }
    ```
@@ -100,6 +103,7 @@ Render `<SingleReferenceReadonly>` with config from `rawViewMetadata.config`, pa
 ### `onRecordChange` handler
 
 Called when user selects a new value in editable/editable-in-review mode:
+
 1. Build `refreshOptions = { autoDetectRefresh: true, propertyName: rawViewMetadata.config?.value }`
 2. If `!canBeChangedInReviewMode || !pConn.getValue('__currentPageTabViewName')`: call `getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions)`.
 3. Extract `propValue = event?.id || event?.target?.value`.
@@ -121,6 +125,7 @@ Display mode is passed through to the child component — the child (Dropdown, A
 ## Visual Specifications
 
 ObjectReference itself renders a minimal grid container:
+
 ```
 <Grid container>
   <Grid>{recreatedFirstChild}</Grid>
@@ -130,8 +135,12 @@ ObjectReference itself renders a minimal grid container:
 The visual appearance is entirely determined by the child component being rendered. No additional styling is applied by `ObjectReference` itself.
 
 **CSS-only implementation:**
+
 ```css
-.object-reference-container { display: grid; width: 100%; }
+.object-reference-container {
+  display: grid;
+  width: 100%;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -156,9 +165,9 @@ The visual appearance is entirely determined by the child component being render
 
 Listed design systems are examples only.
 
-| Scenario | Rendered Child |
-|----------|----------------|
-| `componentType='Dropdown'` (editable) | `Dropdown` component |
-| `componentType='AutoComplete'` (editable) | `AutoComplete` component |
-| `componentType='SemanticLink'` | `SemanticLink` component |
+| Scenario                                              | Rendered Child                      |
+| ----------------------------------------------------- | ----------------------------------- |
+| `componentType='Dropdown'` (editable)                 | `Dropdown` component                |
+| `componentType='AutoComplete'` (editable)             | `AutoComplete` component            |
+| `componentType='SemanticLink'`                        | `SemanticLink` component            |
 | `displayMode='DISPLAY_ONLY'` (non-editable-in-review) | `SingleReferenceReadonly` component |

package/templates/react-sdk-reference/.github/skills/field-skills/Percentage.md

@@ -18,11 +18,11 @@ Renders a numeric input for percentage values. Always appends a `%` suffix in th
 
 ## Props (component-specific)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `currencyISOCode` | `string` (optional) | `'USD'` | ISO code used for locale-aware decimal/thousands separator lookup only (not for currency symbol) |
-| `showGroupSeparators` | `string` (optional) | — | Whether to show thousands separators (passed as string, truthy check applies) |
-| `decimalPrecision` | `number` (optional) | — | Number of decimal places |
+| Prop                  | Type                | Default | Description                                                                                      |
+| --------------------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `currencyISOCode`     | `string` (optional) | `'USD'` | ISO code used for locale-aware decimal/thousands separator lookup only (not for currency symbol) |
+| `showGroupSeparators` | `string` (optional) | —       | Whether to show thousands separators (passed as string, truthy check applies)                    |
+| `decimalPrecision`    | `number` (optional) | —       | Number of decimal places                                                                         |
 
 ## Behavioral Contract
 
@@ -39,6 +39,7 @@ Renders a numeric input for percentage values. Always appends a `%` suffix in th
 ## Display Mode Rendering
 
 Format the value using the percentage formatter before display:
+
 - `formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), currencyOptions)`
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedValue} />`.
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />`.
@@ -49,17 +50,17 @@ Keep numeric format input with `readOnly: true` and `%` suffix still visible. Fl
 
 ## Visual Specifications
 
-| Property | Value |
-|----------|-------|
-| Width | 100% |
-| Size | Small |
-| Variant editable | Outlined |
-| Variant read-only | Standard (flat) |
-| Suffix | `%` (always shown after the value) |
+| Property            | Value                                     |
+| ------------------- | ----------------------------------------- |
+| Width               | 100%                                      |
+| Size                | Small                                     |
+| Variant editable    | Outlined                                  |
+| Variant read-only   | Standard (flat)                           |
+| Suffix              | `%` (always shown after the value)        |
 | Thousands separator | Only when `showGroupSeparators` is truthy |
-| Decimal scale | `decimalPrecision` |
-| Placeholder | From `placeholder` prop |
-| Error state | Red border + red helper text |
+| Decimal scale       | `decimalPrecision`                        |
+| Placeholder         | From `placeholder` prop                   |
+| Error state         | Red border + red helper text              |
 
 **CSS-only notes:** Achieve the `%` suffix by wrapping the input in a relative container and absolutely positioning a `%` label at the right side, or using an input with a `::after` pseudo-element technique.
 
@@ -84,9 +85,9 @@ Keep numeric format input with `readOnly: true` and `%` suffix still visible. Fl
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="text">` + custom masking + `%` suffix span |
-| MUI | `NumericFormat` with `suffix='%'` and `customInput={TextField}` |
-| Ant Design | `<InputNumber suffix="%" precision={decimalPrecision} />` |
-| Chakra UI | `<NumberInput>` + `<InputRightAddon>%</InputRightAddon>` |
+| Design System      | Recommended Component                                           |
+| ------------------ | --------------------------------------------------------------- |
+| Default (CSS only) | `<input type="text">` + custom masking + `%` suffix span        |
+| MUI                | `NumericFormat` with `suffix='%'` and `customInput={TextField}` |
+| Ant Design         | `<InputNumber suffix="%" precision={decimalPrecision} />`       |
+| Chakra UI          | `<NumberInput>` + `<InputRightAddon>%</InputRightAddon>`        |

package/templates/react-sdk-reference/.github/skills/field-skills/Phone.md

@@ -19,6 +19,7 @@ Renders a telephone number input with an integrated country code selector (flag
 ## Props (component-specific)
 
 No props beyond `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -61,22 +62,39 @@ Render phone input with `readOnly: true` and `disableDropdown: true` on the coun
 
 ## Visual Specifications
 
-| Property | Editable | Read-only |
-|----------|----------|-----------|
-| Width | 100% | 100% |
-| Size | Small | Small |
-| Variant | Outlined | Outlined (same, with readOnly input) |
+| Property         | Editable                       | Read-only                                 |
+| ---------------- | ------------------------------ | ----------------------------------------- |
+| Width            | 100%                           | 100%                                      |
+| Size             | Small                          | Small                                     |
+| Variant          | Outlined                       | Outlined (same, with readOnly input)      |
 | Country selector | Dropdown with flag + dial code | Flag + dial code shown, dropdown disabled |
-| Default country | US (`+1`) | US (`+1`) |
-| Error state | Red border + red helper text | — |
-| Helper text | Below input | Below input |
+| Default country  | US (`+1`)                      | US (`+1`)                                 |
+| Error state      | Red border + red helper text   | —                                         |
+| Helper text      | Below input                    | Below input                               |
 
 **CSS-only notes:**
 For a CSS-only implementation, create a two-part input:
+
 ```css
-.phone-input-wrapper { display: flex; border: 1px solid rgba(0,0,0,0.23); border-radius: 4px; overflow: hidden; }
-.phone-country-select { border: none; border-right: 1px solid rgba(0,0,0,0.23); padding: 0 8px; background: none; }
-.phone-number-input { flex: 1; border: none; padding: 8px 12px; font-size: 0.875rem; outline: none; }
+.phone-input-wrapper {
+  display: flex;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.phone-country-select {
+  border: none;
+  border-right: 1px solid rgba(0, 0, 0, 0.23);
+  padding: 0 8px;
+  background: none;
+}
+.phone-number-input {
+  flex: 1;
+  border: none;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  outline: none;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -93,6 +111,7 @@ For a CSS-only implementation, create a two-part input:
 - `getComponentFromRegistry('FieldValueList')` for display modes.
 
 **For CSS-only / non-library implementations:**
+
 - Use a `<select>` for country code + a text `<input>` for the number.
 - On blur, combine dial code + number and strip non-digits, then format as `+{digits}`.
 
@@ -102,9 +121,9 @@ For a CSS-only implementation, create a two-part input:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<select>` (country) + `<input type="tel">` |
-| MUI | `<MuiTelInput>` from `mui-tel-input` |
-| Ant Design | `<Input addonBefore={countrySelect}>` |
-| Chakra UI | `<InputGroup>` with `<InputLeftAddon>` for country |
+| Design System      | Recommended Component                              |
+| ------------------ | -------------------------------------------------- |
+| Default (CSS only) | `<select>` (country) + `<input type="tel">`        |
+| MUI                | `<MuiTelInput>` from `mui-tel-input`               |
+| Ant Design         | `<Input addonBefore={countrySelect}>`              |
+| Chakra UI          | `<InputGroup>` with `<InputLeftAddon>` for country |

package/templates/react-sdk-reference/.github/skills/field-skills/RadioButtons.md

@@ -18,17 +18,17 @@ Renders a group of radio buttons for single-selection from a list of options. Su
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `inline` | `boolean` | If `true`, render radio buttons in a horizontal row; if `false`, vertical stack |
-| `fieldMetadata` | `any` (optional) | For localization context (tableType, datasource name, display text property) |
-| `variant` | `string` (optional) | `'card'` — renders options as selectable cards instead of radio buttons |
-| `hideFieldLabels` | `boolean` (optional) | Hide field labels inside card variant |
-| `additionalProps` | `any` (optional) | Extra props passed to `SelectableCard` in card variant |
-| `imagePosition` | `string` (optional) | Card image position: `'inline-start'`, `'inline-end'`, or block |
-| `imageSize` | `string` (optional) | Card image size |
-| `showImageDescription` | `boolean` (optional) | Whether to show image description in cards |
-| `datasource` | `any` (optional) | Datasource for card variant |
+| Prop                   | Type                 | Description                                                                     |
+| ---------------------- | -------------------- | ------------------------------------------------------------------------------- |
+| `inline`               | `boolean`            | If `true`, render radio buttons in a horizontal row; if `false`, vertical stack |
+| `fieldMetadata`        | `any` (optional)     | For localization context (tableType, datasource name, display text property)    |
+| `variant`              | `string` (optional)  | `'card'` — renders options as selectable cards instead of radio buttons         |
+| `hideFieldLabels`      | `boolean` (optional) | Hide field labels inside card variant                                           |
+| `additionalProps`      | `any` (optional)     | Extra props passed to `SelectableCard` in card variant                          |
+| `imagePosition`        | `string` (optional)  | Card image position: `'inline-start'`, `'inline-end'`, or block                 |
+| `imageSize`            | `string` (optional)  | Card image size                                                                 |
+| `showImageDescription` | `boolean` (optional) | Whether to show image description in cards                                      |
+| `datasource`           | `any` (optional)     | Datasource for card variant                                                     |
 
 ## Behavioral Contract
 
@@ -49,6 +49,7 @@ Renders a group of radio buttons for single-selection from a list of options. Su
 ### Variant: Standard (default)
 
 Render a radio group with `FormControl > FormLabel > RadioGroup > FormControlLabel (Radio)` pattern:
+
 - `FormLabel`: the `label` prop
 - `RadioGroup`: `value={theSelectedButton}`, `onChange={handleChange}`, `onBlur`, `row={inline}`
 - Each `FormControlLabel`: `value={option.key}`, `label={localizedLabel}`, `control={<Radio color='primary' disabled={readOnly} />}`
@@ -58,6 +59,7 @@ Render a radio group with `FormControl > FormLabel > RadioGroup > FormControlLab
 ### Variant: Card (`variant === 'card'`)
 
 Render a heading (`<h4>`) with the `label`, then delegate to `SelectableCard` component:
+
 ```
 <div>
   <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
@@ -78,12 +80,14 @@ Render a heading (`<h4>`) with the `label`, then delegate to `SelectableCard` co
   </div>
 </div>
 ```
+
 - `imageField`: `stateProps.image?.split('.').pop()`
 - `imageDescription`: `stateProps.imageDescription?.split('.').pop()`
 
 ## Display Mode Rendering
 
 Both modes render the localized display label of the selected option:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={localizedValue} />`
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={localizedValue} variant='stacked' />`
 
@@ -93,31 +97,48 @@ Where `localizedValue = pConn.getLocalizedValue(value, localePath, localeRuleNam
 
 ### Standard Variant
 
-| Property | Value |
-|----------|-------|
-| Layout | Vertical stack (or horizontal row when `inline=true`) |
-| Radio indicator | Circle button with filled inner circle when selected |
-| Label | Label text to the right of the radio button (`labelPlacement='end'`) |
-| Group label | `<legend>` / `<FormLabel>` above the group |
-| Error state | Group border or text in red |
-| Helper text | Below the group |
-| Disabled (readOnly) | Greyed-out radio buttons, not-allowed cursor |
+| Property            | Value                                                                |
+| ------------------- | -------------------------------------------------------------------- |
+| Layout              | Vertical stack (or horizontal row when `inline=true`)                |
+| Radio indicator     | Circle button with filled inner circle when selected                 |
+| Label               | Label text to the right of the radio button (`labelPlacement='end'`) |
+| Group label         | `<legend>` / `<FormLabel>` above the group                           |
+| Error state         | Group border or text in red                                          |
+| Helper text         | Below the group                                                      |
+| Disabled (readOnly) | Greyed-out radio buttons, not-allowed cursor                         |
 
 **CSS-only notes:**
+
 ```css
-.radio-group { display: flex; flex-direction: column; gap: 4px; }
-.radio-group.inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }
-.radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
-input[type="radio"]:disabled { opacity: 0.38; cursor: default; }
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.radio-group.inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+input[type='radio']:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
 ```
 
 ### Card Variant
 
-| Property | Value |
-|----------|-------|
-| Layout | CSS Grid: `repeat(auto-fit, minmax(min(200px, 100%), 1fr))`, gap `1rem` |
-| Card | Elevated card with click handler that activates the radio |
-| Heading | `<h4>` with `marginTop: 0, marginBottom: 0` above grid |
+| Property | Value                                                                   |
+| -------- | ----------------------------------------------------------------------- |
+| Layout   | CSS Grid: `repeat(auto-fit, minmax(min(200px, 100%), 1fr))`, gap `1rem` |
+| Card     | Elevated card with click handler that activates the radio               |
+| Heading  | `<h4>` with `marginTop: 0, marginBottom: 0` above grid                  |
 
 ## Edge Cases & Special Logic
 
@@ -138,9 +159,9 @@ input[type="radio"]:disabled { opacity: 0.38; cursor: default; }
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="radio">` with `<label>` per option |
-| MUI | `<RadioGroup>` with `<FormControlLabel control={<Radio />}>` |
-| Ant Design | `<Radio.Group>` with `<Radio>` options |
-| Chakra UI | `<RadioGroup>` with `<Radio>` items |
+| Design System      | Recommended Component                                        |
+| ------------------ | ------------------------------------------------------------ |
+| Default (CSS only) | `<input type="radio">` with `<label>` per option             |
+| MUI                | `<RadioGroup>` with `<FormControlLabel control={<Radio />}>` |
+| Ant Design         | `<Radio.Group>` with `<Radio>` options                       |
+| Chakra UI          | `<RadioGroup>` with `<Radio>` items                          |