@pega/sdk 0.0.2 → 0.0.4

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

@@ -18,12 +18,13 @@ Renders a numeric input formatted as a currency value. Displays the correct curr
 
 ## Props (component-specific)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `currencyISOCode` | `string` (optional) | `'USD'` | ISO 4217 currency code (e.g., `'USD'`, `'EUR'`, `'GBP'`) |
-| `allowDecimals` | `boolean` | — | Whether to allow decimal input. If `false`, `decimalScale=0`. If `true`, fixed 2 decimal places shown. |
+| Prop              | Type                | Default | Description                                                                                            |
+| ----------------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `currencyISOCode` | `string` (optional) | `'USD'` | ISO 4217 currency code (e.g., `'USD'`, `'EUR'`, `'GBP'`)                                               |
+| `allowDecimals`   | `boolean`           | —       | Whether to allow decimal input. If `false`, `decimalScale=0`. If `true`, fixed 2 decimal places shown. |
 
 All other props from `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -49,6 +50,7 @@ import type { PConnFieldProps } from '@pega/sdk-react';
 ## Display Mode Rendering
 
 Format the value before display using a currency formatter with `currencyISOCode`:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedValue} />` where `formattedValue = format(value, 'currency', currencyOptions)`.
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />`.
 
@@ -60,16 +62,16 @@ Keep the numeric format input but set `readOnly: true` on the input element. Swi
 
 ## Visual Specifications
 
-| Property | Standard (editable) | Read-only |
-|----------|---------------------|-----------|
-| Width | 100% | 100% |
-| Size | Small | Small |
-| Variant | Outlined | Standard (flat) |
-| Prefix | Currency symbol (e.g., `$`) | Currency symbol |
-| Alignment | Left-aligned text | Left-aligned |
-| Decimal places | 2 (when `allowDecimals`) | 2 |
-| Error state | Red border + red helper text | — |
-| Placeholder | From `placeholder` prop | — |
+| Property       | Standard (editable)          | Read-only       |
+| -------------- | ---------------------------- | --------------- |
+| Width          | 100%                         | 100%            |
+| Size           | Small                        | Small           |
+| Variant        | Outlined                     | Standard (flat) |
+| Prefix         | Currency symbol (e.g., `$`)  | Currency symbol |
+| Alignment      | Left-aligned text            | Left-aligned    |
+| Decimal places | 2 (when `allowDecimals`)     | 2               |
+| Error state    | Red border + red helper text | —               |
+| Placeholder    | From `placeholder` prop      | —               |
 
 ## Edge Cases & Special Logic
 
@@ -89,6 +91,7 @@ Keep the numeric format input but set `readOnly: true` on the input element. Swi
 - `getComponentFromRegistry('FieldValueList')` for display modes.
 
 **For CSS-only / design-system-agnostic implementations:**
+
 - The numeric format library handles the input masking. Use any numeric format library that supports prefix, decimal separator, and thousands separator configuration.
 - Alternatively, implement manually: on change, strip non-numeric chars, insert separators, prepend symbol.
 
@@ -98,9 +101,9 @@ Keep the numeric format input but set `readOnly: true` on the input element. Swi
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="text">` + custom numeric formatting logic |
-| MUI | `NumericFormat` (from `react-number-format`) with `customInput={TextField}` |
-| Ant Design | `<InputNumber prefix="$" precision={2} />` |
-| Chakra UI | `<NumberInput>` + custom formatting |
+| Design System      | Recommended Component                                                       |
+| ------------------ | --------------------------------------------------------------------------- |
+| Default (CSS only) | `<input type="text">` + custom numeric formatting logic                     |
+| MUI                | `NumericFormat` (from `react-number-format`) with `customInput={TextField}` |
+| Ant Design         | `<InputNumber prefix="$" precision={2} />`                                  |
+| Chakra UI          | `<NumberInput>` + custom formatting                                         |

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

@@ -19,6 +19,7 @@ Renders a date picker input. Stores dates as `YYYY-MM-DD` strings. Displays date
 ## Props (component-specific)
 
 No props beyond `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -32,7 +33,7 @@ import type { PConnFieldProps } from '@pega/sdk-react';
 3. **Date format:** Get locale-aware format string via `getDateFormatInfo()`:
    - Returns `dateFormatString` (display format, e.g., `'MM/DD/YYYY'`), `dateFormatStringLC` (lowercase for placeholder, e.g., `'mm/dd/yyyy'`), `dateFormatMask`.
    - Start from `dateFormatInfoDefault` and override with locale-specific values.
-4. **On change (valid date selected):** 
+4. **On change (valid date selected):**
    - Validate the date is valid (e.g., `date.isValid()`).
    - Format to `YYYY-MM-DD` string: `${year}-${(month+1).padStart(2,'0')}-${day.padStart(2,'0')}`.
    - Commit immediately via `handleEvent(actions, 'changeNblur', propName, formattedDate)`.
@@ -44,6 +45,7 @@ import type { PConnFieldProps } from '@pega/sdk-react';
 ## Display Mode Rendering
 
 Format the value before display using `format(value, 'date', { format: dateFormatInfo.dateFormatString })`:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedDate} />`.
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />`.
 - Both modes compute `formattedDate` from the raw `props.value` (not local state).
@@ -54,16 +56,16 @@ Delegate to `TextInput`: `return <TextInput {...props} />`. The raw `YYYY-MM-DD`
 
 ## Visual Specifications
 
-| Property | Value |
-|----------|-------|
-| Width | Auto (date picker natural width) |
-| Size | Small |
-| Variant | Outlined |
-| Placeholder | Lowercase format string (e.g., `mm/dd/yyyy`) |
-| Calendar popup | Opens below the input |
-| Error state | Red border + red helper text |
-| Required indicator | `*` on label |
-| Format display | Locale-aware (e.g., `MM/DD/YYYY`, `DD/MM/YYYY`) |
+| Property           | Value                                           |
+| ------------------ | ----------------------------------------------- |
+| Width              | Auto (date picker natural width)                |
+| Size               | Small                                           |
+| Variant            | Outlined                                        |
+| Placeholder        | Lowercase format string (e.g., `mm/dd/yyyy`)    |
+| Calendar popup     | Opens below the input                           |
+| Error state        | Red border + red helper text                    |
+| Required indicator | `*` on label                                    |
+| Format display     | Locale-aware (e.g., `MM/DD/YYYY`, `DD/MM/YYYY`) |
 
 **CSS-only notes:** For a CSS-only date input, use `<input type="date">` — note that the display format is browser-controlled. A custom date picker component is needed for locale-aware format strings.
 
@@ -91,9 +93,9 @@ Delegate to `TextInput`: `return <TextInput {...props} />`. The raw `YYYY-MM-DD`
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="date">` (browser native, limited locale control) |
-| MUI | `<DatePicker />` from `@mui/x-date-pickers` with `dayjs` adapter |
-| Ant Design | `<DatePicker format="MM/DD/YYYY" />` |
-| Chakra UI | Third-party date picker or `<input type="date">` |
+| Design System      | Recommended Component                                            |
+| ------------------ | ---------------------------------------------------------------- |
+| Default (CSS only) | `<input type="date">` (browser native, limited locale control)   |
+| MUI                | `<DatePicker />` from `@mui/x-date-pickers` with `dayjs` adapter |
+| Ant Design         | `<DatePicker format="MM/DD/YYYY" />`                             |
+| Chakra UI          | Third-party date picker or `<input type="date">`                 |

package/templates/react-sdk-reference/.github/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/.github/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/.github/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/.github/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/.github/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/.github/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                           |