@pega/sdk 0.0.2 → 0.0.4

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

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

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 |