pixelize-design-library 2.4.2-beta.52 → 2.4.2-beta.53

package/CHANGELOG.md

@@ -53,6 +53,7 @@ next major.
   `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`, `Tabs`, `TableToggle` and the
   `DatePicker` family all grow together and still line up side by side. `sm` is the default size,
   so most call sites gain 6px of height without passing anything.
+- **`PhoneNumberInput` defaults to `size="sm"`, not `md`.** It was the one field still defaulting to `md`, so in a form it stood 4px taller than the `TextInput`s around it. Pass `size="md"` to keep the old height.
 - **Option rows follow the scale: 24/30/34/40px → 26/32/36/40px** in `Select`, `SelectV2`,
   `SearchSelect`, `SelectSearch`, `Dropdown`, table filter selects and Chakra `MenuItem` — always
   6px inside the trigger that opens them (4px at `lg`).

package/COMPONENT-GOTCHAS.md

@@ -330,6 +330,7 @@ not enough when the overlay sits inside a transition wrapper — the wrapper kee
 | `SettingsSection` | New optional `action` slot, right of the title/description on the header row — additive, nothing changes without it | — |
 | `Button` / `Buttons` | Icon-only buttons are square. `Buttons` (plural) is themed instead of hardcoded purple | — |
 | `ProgressBar` | Fill lifted to ≥ 3:1 on its track — green/orange/blue/cyan are visibly darker in light mode | — |
+| `PhoneNumberInput` | Default `size` `md` → `sm`, so it matches the `TextInput`s beside it | `size="md"` |
 | `PhoneNumberInput` / `PinInput` / `NoteTextArea` | `ref` now attaches; labels bound; PIN digits grouped and named | — |
 | `RangeDatePicker` | Outside click keeps a fully picked range (was discarded) | — |
 | `FilePreview` / `ContactForm` | Radius `2xl` → `xl` | — |

package/dist/Components/Input/PhoneNumberInput.js

@@ -21,7 +21,7 @@ const getFlagEmoji = (countryCode) => {
 const sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
 const sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
 /** Country-code-aware phone field with a flag/dial-code prefix; `ref` forwards to the number `<input>`. */
-const PhoneNumberInput = (0, react_1.forwardRef)(function PhoneNumberInput({ size = "md", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, name, minW, maxW, countrySelectAriaLabel = "Country code", ...rest }, ref) {
+const PhoneNumberInput = (0, react_1.forwardRef)(function PhoneNumberInput({ size = "sm", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, name, minW, maxW, countrySelectAriaLabel = "Country code", ...rest }, ref) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const ids = (0, useFieldIds_1.useFieldIds)(inputId !== null && inputId !== void 0 ? inputId : id, { error, errorMessage, helperText });
     const getCountryTelCode = (0, react_1.useCallback)((countryCode) => {

package/dist/Components/Input/PhoneNumberInputProps.d.ts

@@ -10,6 +10,7 @@ export type PhoneNumberInputProps = {
     label?: string;
     /** Falls back to an auto-generated id (shared with `inputId` when that's omitted too), so the label is always bound. */
     id?: string;
+    /** Control-scale height: "xs" | "sm" | "md" | "lg" (30 / 38 / 42 / 48px). Defaults to "sm", like TextInput, so it lines up in a form. */
     size?: string;
     value?: string;
     codeValueReturn?: boolean;

package/dist/esm/Components/Input/PhoneNumberInput.js

@@ -16,7 +16,7 @@ const getFlagEmoji = (countryCode) => {
 const sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
 const sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
 /** Country-code-aware phone field with a flag/dial-code prefix; `ref` forwards to the number `<input>`. */
-const PhoneNumberInput = forwardRef(function PhoneNumberInput({ size = "md", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, name, minW, maxW, countrySelectAriaLabel = "Country code", ...rest }, ref) {
+const PhoneNumberInput = forwardRef(function PhoneNumberInput({ size = "sm", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, name, minW, maxW, countrySelectAriaLabel = "Country code", ...rest }, ref) {
     const theme = useCustomTheme();
     const ids = useFieldIds(inputId !== null && inputId !== void 0 ? inputId : id, { error, errorMessage, helperText });
     const getCountryTelCode = useCallback((countryCode) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.52",
+  "version": "2.4.2-beta.53",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",