@pega/sdk 0.0.2 → 0.0.4

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                          |

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

@@ -18,8 +18,8 @@ Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
+| Prop              | Type                | Description                                   |
+| ----------------- | ------------------- | --------------------------------------------- |
 | `additionalProps` | `object` (optional) | Extra props forwarded to the `RichTextEditor` |
 
 ## Behavioral Contract
@@ -29,8 +29,8 @@ Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved
 3. **Props coercion:** `readOnly`, `required`, `disabled` must be coerced to booleans:
    ```typescript
    [readOnly, required, disabled] = [readOnly, required, disabled].map(
-     prop => prop === true || (typeof prop === 'string' && prop === 'true')
-   )
+     (prop) => prop === true || (typeof prop === 'string' && prop === 'true'),
+   );
    ```
 4. **Editable mode:**
    - Track `status` for error state.
@@ -47,6 +47,7 @@ Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved
 6. **`RichTextEditor` component:** Resolved via `getComponentFromRegistry('RichTextEditor')`. This is a design-system extension component that wraps the actual WYSIWYG library (e.g., TinyMCE).
 
 ### Editable RichTextEditor props
+
 ```
 label, labelHidden={hideLabel}, info={helperTextToDisplay}, defaultValue={value},
 placeholder, disabled, required, testId, ref={editorRef},
@@ -54,6 +55,7 @@ error={status === 'error'}, onBlur={handleBlur}, onChange={handleChange}
 ```
 
 ### Read-only RichTextEditor props
+
 ```
 label, labelHidden={hideLabel}, defaultValue={value}, testId, info={helperTextToDisplay},
 ref={editorRef}, readOnly
@@ -62,6 +64,7 @@ ref={editorRef}, readOnly
 ## Display Mode Rendering
 
 Display modes pass `isHtml={true}` to render HTML content safely:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} isHtml />`
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} isHtml variant='stacked' />`
 
@@ -75,9 +78,15 @@ The visual appearance of the rich text editor depends on the underlying `RichTex
 
 ```css
 /* RichText.css — must be imported */
-.tox .tox-toolbar { background-color: var(--app-background-color) !important; }
-.tox .tox-toolbar__primary { background-color: var(--app-background-color) !important; }
-.tox .tox-toolbar__button { color: var(--app-text-color) !important; }
+.tox .tox-toolbar {
+  background-color: var(--app-background-color) !important;
+}
+.tox .tox-toolbar__primary {
+  background-color: var(--app-background-color) !important;
+}
+.tox .tox-toolbar__button {
+  color: var(--app-text-color) !important;
+}
 .tox .tox-toolbar__button--enabled {
   background: var(--app-primary-color) !important;
   color: #fff !important;
@@ -100,6 +109,7 @@ The visual appearance of the rich text editor depends on the underlying `RichTex
 **Note:** Import `./RichText.css` in the component file. The CSS variables (`--app-background-color`, `--app-text-color`, etc.) are set by the application theme.
 
 When implementing with a different design system:
+
 - Custom CSS for toolbar theming may be needed
 - The editor container should be full-width
 - Minimum height: ~200px for a usable editing area
@@ -121,6 +131,7 @@ When implementing with a different design system:
 - `useRef` from React.
 
 **For other rich text editors:**
+
 - Any WYSIWYG editor that exposes `ref.current.getContent()` or equivalent.
 - Examples: Quill, Draft.js, Slate.js, CKEditor.
 
@@ -130,9 +141,9 @@ When implementing with a different design system:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                             |
+| ------------------ | ------------------------------------------------- |
 | Default (CSS only) | `contenteditable` div + custom toolbar OR TinyMCE |
-| MUI | `RichTextEditor` custom extension (TinyMCE) |
-| Ant Design | Quill or TinyMCE with Ant styling |
-| Chakra UI | Quill or TipTap with Chakra styling |
+| MUI                | `RichTextEditor` custom extension (TinyMCE)       |
+| Ant Design         | Quill or TinyMCE with Ant styling                 |
+| Chakra UI          | Quill or TipTap with Chakra styling               |

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

@@ -24,14 +24,14 @@ Renders a list of scalar (primitive) values by dynamically creating a child comp
 import type { PConnProps } from '@pega/sdk-react';
 ```
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `value` | `any[]` | Array of scalar values to display |
-| `componentType` | `string` | The Pega component type to use for each item (e.g., `'TextInput'`, `'Date'`) |
-| `label` | `string` | Field label |
-| `displayMode` | `string` | Display mode |
-| `hideLabel` | `boolean` | Whether to hide the label |
-| `displayInModal` | `boolean` | Whether this is displayed in a modal context |
+| Prop             | Type      | Description                                                                  |
+| ---------------- | --------- | ---------------------------------------------------------------------------- |
+| `value`          | `any[]`   | Array of scalar values to display                                            |
+| `componentType`  | `string`  | The Pega component type to use for each item (e.g., `'TextInput'`, `'Date'`) |
+| `label`          | `string`  | Field label                                                                  |
+| `displayMode`    | `string`  | Display mode                                                                 |
+| `hideLabel`      | `boolean` | Whether to hide the label                                                    |
+| `displayInModal` | `boolean` | Whether this is displayed in a modal context                                 |
 
 All remaining props (`...restProps`) are forwarded to each child component.
 
@@ -40,7 +40,7 @@ All remaining props (`...restProps`) are forwarded to each child component.
 1. **No state, no event handling** — purely display/read-only.
 2. **Item rendering:** Map each value in `scalarValues` to a component via `getPConnect().createComponent(...)`:
    ```typescript
-   const items = scalarValues?.map(scalarValue =>
+   const items = scalarValues?.map((scalarValue) =>
      getPConnect().createComponent(
        {
          type: componentType,
@@ -49,14 +49,14 @@ All remaining props (`...restProps`) are forwarded to each child component.
            displayMode: 'DISPLAY_ONLY',
            label,
            ...restProps,
-           readOnly: 'true'
-         }
+           readOnly: 'true',
+         },
        },
-       '',   // 2nd arg: empty string
-       '',   // 3rd arg: empty string
-       {}    // 4th arg: empty object
-     )
-   )
+       '', // 2nd arg: empty string
+       '', // 3rd arg: empty string
+       {}, // 4th arg: empty object
+     ),
+   );
    ```
 3. **`CommaSeparatedList` sub-component:** A local component that renders items as `<span>` elements inside a `<ul>` with no list styling:
    ```html
@@ -70,31 +70,41 @@ All remaining props (`...restProps`) are forwarded to each child component.
 ## Display Mode Rendering
 
 **`STACKED_LARGE_VAL` or `DISPLAY_ONLY`:**
+
 ```html
 <div>
-  <CommaSeparatedList items={items} />
+  <CommaSeparatedList items="{items}" />
 </div>
 ```
+
 No `FieldValueList` wrapper in these modes — the items are rendered directly.
 
 **Default (no display mode):**
+
 ```
 <FieldValueList name={hideLabel ? '' : label} value={<CommaSeparatedList items={items} />} variant='stacked' />
 ```
 
 ## Visual Specifications
 
-| Property | Value |
-|----------|-------|
-| List style | No bullets, no padding, no margin on `<ul>` |
-| Item display | Each item rendered as `<span>` (inline) |
-| Separator | Items are adjacent spans (no comma separator despite the name) |
-| Layout | Vertical stack when wrapped in `FieldValueList variant='stacked'` |
+| Property     | Value                                                             |
+| ------------ | ----------------------------------------------------------------- |
+| List style   | No bullets, no padding, no margin on `<ul>`                       |
+| Item display | Each item rendered as `<span>` (inline)                           |
+| Separator    | Items are adjacent spans (no comma separator despite the name)    |
+| Layout       | Vertical stack when wrapped in `FieldValueList variant='stacked'` |
 
 **CSS-only notes:**
+
 ```css
-.scalar-list { list-style: none; padding: 0; margin: 0; }
-.scalar-list-item { display: inline; }
+.scalar-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.scalar-list-item {
+  display: inline;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -116,9 +126,9 @@ No `FieldValueList` wrapper in these modes — the items are rendered directly.
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<ul>` with `<span>` items |
-| MUI | `<List>` with `<ListItem>` or just `<Typography>` per item |
-| Ant Design | `<List>` items or `<Space>` with `<Tag>` |
-| Chakra UI | `<List>` or `<HStack>` with `<Tag>` |
+| Design System      | Recommended Component                                      |
+| ------------------ | ---------------------------------------------------------- |
+| Default (CSS only) | `<ul>` with `<span>` items                                 |
+| MUI                | `<List>` with `<ListItem>` or just `<Typography>` per item |
+| Ant Design         | `<List>` items or `<Space>` with `<Tag>`                   |
+| Chakra UI          | `<List>` or `<HStack>` with `<Tag>`                        |

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

@@ -20,29 +20,29 @@ Renders a grid of selectable cards. Each card contains a radio button or checkbo
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `getPConnect` | `function` | — | PConnect accessor |
-| `type` | `'radio' \| 'checkbox'` | — | Selection type |
-| `image` | `object` | — | `{ imagePosition, imageSize, showImageDescription, imageField, imageDescription }` |
-| `dataSource` | `any` | — | Source of card data (in editable mode) |
-| `recordKey` | `string` | `''` | The key field name in each record (e.g., `'pyID'`) |
-| `className` | `string` | — | CSS class for the card |
-| `cardLabel` | `string` | — | The field name to use as card title |
-| `hideFieldLabels` | `boolean` | `false` | Hide field labels inside cards |
-| `readOnly` | `boolean` | — | Read-only mode |
-| `disabled` | `boolean` | — | Disabled state |
-| `readOnlyList` | `any[]` | `[]` | Selected items for read-only display |
-| `displayMode` | `string` | — | Display mode string |
-| `radioBtnValue` | `any` | — | Currently selected value (radio mode) |
-| `onChange` | `function` | — | Change handler |
-| `onBlur` | `function` | — | Blur handler |
-| `onClick` | `function` | — | Click handler |
-| `onKeyDown` | `function` | — | KeyDown handler |
-| `additionalProps` | `any` | — | Spread onto the radio/checkbox input |
-| `testId` | `string` | — | Test identifier |
-| `setIsRadioCardSelected` | `function` | — | Callback to inform parent whether radio selection matched |
-| `showNoValue` | `boolean` | `false` | When true (read-only + no selected items), render "No Value" text |
+| Prop                     | Type                    | Default | Description                                                                        |
+| ------------------------ | ----------------------- | ------- | ---------------------------------------------------------------------------------- |
+| `getPConnect`            | `function`              | —       | PConnect accessor                                                                  |
+| `type`                   | `'radio' \| 'checkbox'` | —       | Selection type                                                                     |
+| `image`                  | `object`                | —       | `{ imagePosition, imageSize, showImageDescription, imageField, imageDescription }` |
+| `dataSource`             | `any`                   | —       | Source of card data (in editable mode)                                             |
+| `recordKey`              | `string`                | `''`    | The key field name in each record (e.g., `'pyID'`)                                 |
+| `className`              | `string`                | —       | CSS class for the card                                                             |
+| `cardLabel`              | `string`                | —       | The field name to use as card title                                                |
+| `hideFieldLabels`        | `boolean`               | `false` | Hide field labels inside cards                                                     |
+| `readOnly`               | `boolean`               | —       | Read-only mode                                                                     |
+| `disabled`               | `boolean`               | —       | Disabled state                                                                     |
+| `readOnlyList`           | `any[]`                 | `[]`    | Selected items for read-only display                                               |
+| `displayMode`            | `string`                | —       | Display mode string                                                                |
+| `radioBtnValue`          | `any`                   | —       | Currently selected value (radio mode)                                              |
+| `onChange`               | `function`              | —       | Change handler                                                                     |
+| `onBlur`                 | `function`              | —       | Blur handler                                                                       |
+| `onClick`                | `function`              | —       | Click handler                                                                      |
+| `onKeyDown`              | `function`              | —       | KeyDown handler                                                                    |
+| `additionalProps`        | `any`                   | —       | Spread onto the radio/checkbox input                                               |
+| `testId`                 | `string`                | —       | Test identifier                                                                    |
+| `setIsRadioCardSelected` | `function`              | —       | Callback to inform parent whether radio selection matched                          |
+| `showNoValue`            | `boolean`               | `false` | When true (read-only + no selected items), render "No Value" text                  |
 
 ## Behavioral Contract
 
@@ -61,18 +61,20 @@ If `showNoValue`: render a plain text element showing `'No Value'` and return ea
 ### Card click handler
 
 Cards should be clickable anywhere (not just on the checkbox/radio):
+
 ```typescript
 const handleCardClick = (event) => {
-  if (disabled || readOnly) return
-  if (event.target.closest('label, input')) return  // native click already handled
-  const input = event.currentTarget.querySelector('input[type="radio"], input[type="checkbox"]')
-  if (input) input.click()
-}
+  if (disabled || readOnly) return;
+  if (event.target.closest('label, input')) return; // native click already handled
+  const input = event.currentTarget.querySelector('input[type="radio"], input[type="checkbox"]');
+  if (input) input.click();
+};
 ```
 
 ### Subsection: Display mode (`displayMode === 'DISPLAY_ONLY'`)
 
 Render a **simple read-only card** (no radio/checkbox) with:
+
 - Optional image (`<img>`)
 - Card title: `item[cardLabel]`
 - Additional resolved fields (from `resolveReferenceFields`)
@@ -80,7 +82,7 @@ Render a **simple read-only card** (no radio/checkbox) with:
 
 ```html
 <Card style="display: flex">
-  {image && <img src="..." alt="..." style="width: 100px">}
+  {image && <img src="..." alt="..." style="width: 100px" />}
   <CardContent>
     <body1>{item[cardLabel]}</body1>
     {fields.map(field => <body2>{field.value}</body2>)}
@@ -112,11 +114,11 @@ Render a **selectable card** with click handler, containing the appropriate inpu
 
 ### Image layout (inline positions)
 
-| `imagePosition` | CardContent style | Image section width | Content section width |
-|-----------------|-------------------|--------------------|----------------------|
-| `'inline-start'` | `display: flex` | 40% | 60% |
-| `'inline-end'` | `display: flex, flexDirection: row-reverse` | 40% | 60% |
-| block (default) | default | full width | full width |
+| `imagePosition`  | CardContent style                           | Image section width | Content section width |
+| ---------------- | ------------------------------------------- | ------------------- | --------------------- |
+| `'inline-start'` | `display: flex`                             | 40%                 | 60%                   |
+| `'inline-end'`   | `display: flex, flexDirection: row-reverse` | 40%                 | 60%                   |
+| block (default)  | default                                     | full width          | full width            |
 
 ### Image element
 
@@ -135,10 +137,11 @@ img {
 ### Field display layout
 
 Each additional field in editable mode:
+
 ```css
 .card-field {
   font-size: 0.875rem;
-  display: grid;           /* only if type !== 'TextArea' */
+  display: grid; /* only if type !== 'TextArea' */
   grid-template-columns: 1fr 1fr;
   margin: 5px;
 }
@@ -147,6 +150,7 @@ Each additional field in editable mode:
 ### Radio tracking
 
 After iterating cards, if `type === 'radio'` and `setIsRadioCardSelected`:
+
 ```
 if (radioBtnValue === item[recordKey]) radioItemSelected = true
 // After loop:
@@ -159,20 +163,21 @@ setIsRadioCardSelected(radioItemSelected)
 
 ## Visual Specifications
 
-| Property | Editable card | Display-only card |
-|----------|--------------|-------------------|
-| Cursor | `pointer` (unless disabled/readOnly → `default`) | Default |
-| Height | `100%` (fills grid row) | Auto |
-| Layout | Column flex | Row flex |
-| Padding top | 15px wrapper | — |
-| Image (display-only) | 100px fixed width | 100px fixed width |
-| Card border | Default (design-system card elevation) | Default |
-| Disabled | `cursor: default` | — |
+| Property             | Editable card                                    | Display-only card |
+| -------------------- | ------------------------------------------------ | ----------------- |
+| Cursor               | `pointer` (unless disabled/readOnly → `default`) | Default           |
+| Height               | `100%` (fills grid row)                          | Auto              |
+| Layout               | Column flex                                      | Row flex          |
+| Padding top          | 15px wrapper                                     | —                 |
+| Image (display-only) | 100px fixed width                                | 100px fixed width |
+| Card border          | Default (design-system card elevation)           | Default           |
+| Disabled             | `cursor: default`                                | —                 |
 
 **CSS-only card implementation:**
+
 ```css
 .selectable-card {
-  border: 1px solid rgba(0,0,0,0.12);
+  border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 4px;
   padding: 16px;
   cursor: pointer;
@@ -182,10 +187,20 @@ setIsRadioCardSelected(radioItemSelected)
   margin-top: 15px;
   transition: border-color 0.2s;
 }
-.selectable-card:hover { border-color: #1976d2; }
-.selectable-card.disabled { cursor: default; opacity: 0.7; }
-.selectable-card.readonly { cursor: default; }
-.selectable-card-label { font-size: 1rem; font-weight: 400; }
+.selectable-card:hover {
+  border-color: #1976d2;
+}
+.selectable-card.disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+.selectable-card.readonly {
+  cursor: default;
+}
+.selectable-card-label {
+  font-size: 1rem;
+  font-weight: 400;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -208,9 +223,9 @@ setIsRadioCardSelected(radioItemSelected)
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Custom `<div>` cards with `<input type="radio/checkbox">` inside |
-| MUI | `<Card>` + `<CardContent>` + `<FormControlLabel>` + `<Radio>`/`<Checkbox>` |
-| Ant Design | Custom cards with `<Radio>`/`<Checkbox>` |
-| Chakra UI | `<Box>` as card + `<Radio>`/`<Checkbox>` |
+| Design System      | Recommended Component                                                      |
+| ------------------ | -------------------------------------------------------------------------- |
+| Default (CSS only) | Custom `<div>` cards with `<input type="radio/checkbox">` inside           |
+| MUI                | `<Card>` + `<CardContent>` + `<FormControlLabel>` + `<Radio>`/`<Checkbox>` |
+| Ant Design         | Custom cards with `<Radio>`/`<Checkbox>`                                   |
+| Chakra UI          | `<Box>` as card + `<Radio>`/`<Checkbox>`                                   |