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

package/CHANGELOG.md

@@ -47,12 +47,19 @@ next major.
 
 ### Changed
 
-- **Control heights: `xs` 24px → 28px, `sm` 32px → 35px.** `md` (40px) and `lg` (48px) are
+- **Control heights: `xs` 24px → 30px, `sm` 32px → 38px, `md` 40px → 42px.** `lg` (48px) is
   unchanged. `CONTROL_SIZES` is the one scale behind every field, select and button, so `Button`,
   `TextInput`, `InputTextArea`, `NumberInput`, `PinInput`, `Select`, `SelectV2`, `SearchSelect`,
-  `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl` and the `DatePicker` family all grow
-  together and still line up side by side. `sm` is the default size, so most call sites gain 3px of
-  height without passing anything.
+  `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`).
+- **`OrgSwitcher` and `AppSwitcher` sit on the control scale.** `OrgSwitcher` sm/md/lg were
+  32/40/48px and are now 38/42/48px; the `AppSwitcher` trigger was 36px and is now 38px, so both
+  line up with an `sm` button beside them.
 
 - **`SideBar` sizing is one scale.** Rail, submenu, collapsed flyout and `SecondaryBar` rows now all
   read `SIDEBAR_ROW`, so every nav label is 13px at every level. Visible changes: submenu and flyout

package/COMPONENT-GOTCHAS.md

@@ -312,7 +312,7 @@ not enough when the overlay sits inside a transition wrapper — the wrapper kee
 
 | Component | beta.43 → beta.44 | Restore the old look |
 | --- | --- | --- |
-| Fields, selects, buttons (`Button`, `TextInput`, `InputTextArea`, `NumberInput`, DatePicker family, `Select`, `SelectV2`, `SearchSelect`, `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`) | Default size `md` → `sm` (35px). One scale for all: xs 28 / sm 35 / md 40 / lg 48 — `md` is now 40px everywhere (`TextInput` was 44, selects 38, `SegmentedControl` ~36). `TimePicker` has no `size` (fixed `sm`); `SegmentedControl` has no `xs` | `size="md"` |
+| Fields, selects, buttons (`Button`, `TextInput`, `InputTextArea`, `NumberInput`, DatePicker family, `Select`, `SelectV2`, `SearchSelect`, `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`) | Default size `md` → `sm` (38px). One scale for all: xs 30 / sm 38 / md 42 / lg 48 — the same height in every field, select and button. `TimePicker` has no `size` (fixed `sm`); `SegmentedControl` has no `xs` | `size="md"` |
 | `Button` | Text one step smaller (sm 14→13px, md 16→14, lg 18→16). Busy = spinner only, width kept (was "Loading" + spinner). Outline: 1px border, hover is a tint, not a fill | `loadingText="Loading"` |
 | `Tag` | `solid`/`md` → `subtle`/`sm`. Hover + pointer only with `onTagClick`; `maxW` truncates with the full text as a title. Exact heights 20/24/28/32, weight 500, 1px inset ring (never adds height); subtle is a light tint with ink ≥ 6.5:1 | `variant="solid" size="md"` |
 | `resolveSoftTone` | `bg`/`border` are now translucent (alpha hex) — composite onto the surface before `contrastRatio`; optional 3rd `surface` arg; adds `hoverBg`/`activeBg`. Badge/Alert/Toaster/EmptyState follow | — |
@@ -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` | — |
@@ -358,7 +359,7 @@ not enough when the overlay sits inside a transition wrapper — the wrapper kee
 | `Tag` | Label line-height 1.45 so descenders (`p`, `g`, `y`) are no longer clipped by the ellipsis overflow | — |
 | `Toaster` | `error` toasts announce assertively (`role="alert"`); status icons have a text equivalent | — |
 | `FeedbackForm` | Built on `TextInput`/`InputTextArea`/`RadioButtonGroup`; required fields show `*` in the label | — |
-| `PinInput` | `size` now works (square cells 28/35/40/48, default `sm`) — it was silently ignored | `size="md"` |
+| `PinInput` | `size` now works (square cells 30 / 38 / 42 / 48, default `sm`) — it was silently ignored | `size="md"` |
 | `Tag` | New `leadingIcon` (decorative, before the label) and `isDisabled` (sets `aria-disabled` + native `disabled` on the clickable/remove buttons, so they leave the tab order — not just dimmed) | — |
 | `ToolTip` | Defaults a Popper `preventOverflow` padding of 8px, so a bubble near the right edge no longer overhangs by a subpixel and raises page scrollbars. A caller-supplied `preventOverflow` modifier still wins | pass your own `modifiers` |
 | `Table` / `KanbanBoard` | Column sort buttons and draggable cards now show the library focus ring on keyboard focus (was an opacity flicker / the browser default outline). Kanban card wrappers render as Chakra `Box`; keyboard drag (Space, arrows, Space) is unchanged | — |

package/DESIGN-GUIDE.md

@@ -89,7 +89,7 @@ don't lean on that pair to distinguish two categories; reach for a utility schem
 
 ## 5. Controls — one scale, `sm` by default
 
-Every control shares one height scale — `xs` 28px · `sm` 35px · `md` 40px · `lg` 48px — and
+Every control shares one height scale — `xs` 30px · `sm` 38px · `md` 42px · `lg` 48px — and
 **defaults to `sm`**: `Button`, `TextInput`, `InputTextArea`, `NumberInput`, `Select`, `Search`,
 `RangeSlider`, the `DatePicker` family and `SegmentedControl`. So on a desktop page **don't pass `size`**; controls
 side by side line up. Nothing in a toolbar or table row is taller than the fields beside it.

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -46,9 +46,10 @@ const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const AppMark_1 = __importStar(require("./AppMark"));
 const AppSwitcherProps_1 = require("./AppSwitcherProps");
 const useAppSwitcherShortcut_1 = require("./useAppSwitcherShortcut");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const COLUMNS = 2;
 const HEADING = "Your apps";
-const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
+const s = { trigger: controlSizes_1.CONTROL_SIZES.sm.height, mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
 const warned = new Set();
 const warnOnce = (key, message) => {
     if (process.env.NODE_ENV === "production" || warned.has(key))

package/dist/Components/Button/ButtonProps.d.ts

@@ -11,7 +11,7 @@ export type ButtonProps = LayoutProps & DataAttributes & Pick<ChakraButtonProps,
     loadingText?: string;
     /** Defaults to "fit-content", not 100%; the w alias only applies when width is unset — width wins if both are passed. */
     width?: string | number;
-    /** Control height xs 28 · sm 35 · md 40 · lg 48 (xl 56); defaults to "sm" via the theme, so a ButtonGroup size still applies. */
+    /** Control height xs 30 · sm 38 · md 42 · lg 48 (xl 56); defaults to "sm" via the theme, so a ButtonGroup size still applies. */
     size?: "lg" | "md" | "sm" | "xs" | "xl";
     /** Defaults to "solid"; "gradient" paints the theme's fixed brand gradient. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";

package/dist/Components/DatePicker/DatePickerProps.d.ts

@@ -44,7 +44,7 @@ export type BaseDatePickerProps = {
     width?: string | number;
     /** Blocks today in the calendar and in typed input; the single picker preselects tomorrow instead. */
     disableToday?: boolean;
-    /** Control-scale height: xs 28 · sm 35 · md 40 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
+    /** Control-scale height: xs 30 · sm 38 · md 42 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
     size?: "xs" | "sm" | "md" | "lg";
 };
 /** Single-date variant, Date API (default) — `isRange` must be false or omitted; this is the discriminant the DatePickerProps union switches on. */

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/Components/Input/TextInputProps.d.ts

@@ -1,6 +1,6 @@
 import { InputProps, SystemProps } from "@chakra-ui/react";
 import type { CSSProperties, ReactNode } from "react";
-/** The library's primary single-line text field (default size `sm`, 35px; no default placeholder). `type="password"` auto-renders a show/hide toggle unless `inputRightIcon` is set or `isPasswordToggleDisabled` is true. Inside a consumer's own `FormControl`, it detects the ancestor and skips rendering its own, inheriting id/invalid/required/disabled from it. */
+/** The library's primary single-line text field (default size `sm`, 38px; no default placeholder). `type="password"` auto-renders a show/hide toggle unless `inputRightIcon` is set or `isPasswordToggleDisabled` is true. Inside a consumer's own `FormControl`, it detects the ancestor and skips rendering its own, inheriting id/invalid/required/disabled from it. */
 export type TextInputProps = Omit<InputProps, "id" | "name" | "minW" | "maxW" | "autoComplete" | "ref" | "isInvalid"> & {
     label?: string;
     /** Optional — an id is generated when omitted, so the label is always bound. `isRequired` sets `aria-required`, not native `required`. */

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -18,7 +18,7 @@ export type MultiSelectProps = {
     addOnBlur?: boolean;
     /** Marks the field invalid (`aria-invalid` + error border) and swaps `helperText` for `errorMessage`; a rejected email sets this internally too. */
     error?: boolean;
-    /** Height on the shared control scale (xs 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
     inputStyle?: object;
     /** Rendered only while `error` is true; a rejected email's internal "Invalid email address" text wins over this until the input changes. */

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -11,10 +11,11 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const sizeMap = {
-    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
-    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
-    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+    sm: { h: controlSizes_1.CONTROL_SIZES.sm.height, avatar: "26px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: controlSizes_1.CONTROL_SIZES.md.height, avatar: "30px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: controlSizes_1.CONTROL_SIZES.lg.height, avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
 const Avatar = ({ org, boxSize, fontSize, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -2,7 +2,7 @@ import { PinInputProps } from "@chakra-ui/react";
 /** The only pin/OTP component exported from the package. */
 export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultValue" | "placeholder" | "manageFocus" | "errorBorderColor" | "focusBorderColor" | "onChange" | "onComplete"> & {
     type?: "alphanumeric" | "number";
-    /** Square cell size, aligned to CONTROL_SIZES heights (xs 28 · sm 35 · md 40 · lg 48). Defaults to "sm". */
+    /** Square cell size, aligned to CONTROL_SIZES heights (xs 30 · sm 38 · md 42 · lg 48). Defaults to "sm". */
     size?: "xs" | "sm" | "md" | "lg";
     variant?: "flushed" | "outline" | "filled" | "unstyled";
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";

package/dist/Components/Search/SearchProps.d.ts

@@ -15,7 +15,7 @@ export type SearchProps = {
     onClear?: () => void;
     /** @deprecated Use `onClear` — same behaviour, consistent casing. */
     onclose?: () => void;
-    /** Height on the shared control scale (xs 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     name?: string;
     /** Disables the input and hides the clear button; the hotkey still focuses it. */

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -38,7 +38,7 @@ export type SearchSelectProps = {
     width?: string | number;
     /** Only sets the insideSelect segment's height, not the main field's — that's driven by `size`. */
     height?: string | number;
-    /** Height on the shared control scale (xs 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
     /** Blocks opening, typing, chip removal and clearing; renders the shared disabled field look. */
     isDisabled?: boolean;

package/dist/Components/SegmentedControl/SegmentedControlProps.d.ts

@@ -1,5 +1,5 @@
 import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
-/** Whole-track height on the shared control scale (sm 35 · md 40 · lg 48px); defaults to "sm". */
+/** Whole-track height on the shared control scale (sm 38 · md 42 · lg 48px); defaults to "sm". */
 export type SegmentedControlSize = Exclude<ControlSize, "xs">;
 /** brandSlide = primary view switcher; underlineSlide = dense toolbar; default = plain buttons. */
 export type SegmentedControlVariant = "default" | "brandSlide" | "underlineSlide";

package/dist/Components/Select/SelectProps.d.ts

@@ -24,7 +24,7 @@ type SelectCommonProps = {
     label?: string;
     /** Native: the built-in placeholder `<option>`. Popup: trigger text when nothing is selected. Defaults to "Select Option". */
     placeholder?: string;
-    /** Height on the shared control scale (xs 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     /** Applied to the wrapping FormControl. */
     width?: string | number;

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -49,7 +49,7 @@ export type SelectSearchProps = {
     errorMessage?: string | undefined;
     /** Hint under the field; replaced by `errorMessage` while `error` is true. */
     helperText?: string;
-    /** Height on the shared control scale (xs 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     /** Shows a sticky "Add New"-style footer row in the popup; required for all Bottom* props. */
     isBottomIcon?: boolean | undefined;

package/dist/Components/SelectV2/SelectV2Props.d.ts

@@ -33,7 +33,7 @@ type SelectV2CommonProps = {
     isReadOnly?: boolean;
     /** Label asterisk + `aria-required` only; never blocks an empty submit. */
     isRequired?: boolean;
-    /** Shared control scale (xs 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Shared control scale (xs 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     /** Shows a type-ahead filter input at the top of the popup. Defaults to true. */
     isSearchable?: boolean;

package/dist/Theme/tokens/primitives/controlSizes.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = void 0;
 /** One height scale for fields, selects and buttons, so controls side by side line up. */
 exports.CONTROL_SIZES = {
-    xs: { height: "1.75rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
-    sm: { height: "2.1875rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
-    md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
+    xs: { height: "1.875rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2.375rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    md: { height: "2.625rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
 };
 exports.CONTROL_SIZE_NAMES = ["xs", "sm", "md", "lg"];

package/dist/Theme/tokens/primitives/optionRowSizes.js

@@ -4,19 +4,19 @@ exports.optionRowSpec = exports.OPTION_ROW_RADIUS = exports.OPTION_ROW_SIZES = v
 /** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
 exports.OPTION_ROW_SIZES = {
     xs: {
-        minH: "1.5rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
+        minH: "1.625rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
         fontSize: "0.75rem", descriptionFontSize: "0.6875rem", iconSize: 12,
-        avatarSize: "2xs", virtualRowHeightPx: 24,
+        avatarSize: "2xs", virtualRowHeightPx: 26,
     },
     sm: {
-        minH: "1.875rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "2rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.8125rem", descriptionFontSize: "0.75rem", iconSize: 14,
-        avatarSize: "xs", virtualRowHeightPx: 30,
+        avatarSize: "xs", virtualRowHeightPx: 32,
     },
     md: {
-        minH: "2.125rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "2.25rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.875rem", descriptionFontSize: "0.75rem", iconSize: 16,
-        avatarSize: "xs", virtualRowHeightPx: 34,
+        avatarSize: "xs", virtualRowHeightPx: 36,
     },
     lg: {
         minH: "2.5rem", px: "0.875rem", py: "0.375rem", gap: "0.625rem", mx: "0.5rem",

package/dist/esm/Components/AppSwitcher/AppSwitcher.js

@@ -11,9 +11,10 @@ import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import AppMark, { assignAppHues } from "./AppMark.js";
 import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
 import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 const COLUMNS = 2;
 const HEADING = "Your apps";
-const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
+const s = { trigger: CONTROL_SIZES.sm.height, mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
 const warned = new Set();
 const warnOnce = (key, message) => {
     if (process.env.NODE_ENV === "production" || warned.has(key))

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/dist/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -9,10 +9,11 @@ import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { avatarColor, orgInitial, } from "./OrgSwitcherProps.js";
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 const sizeMap = {
-    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
-    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
-    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+    sm: { h: CONTROL_SIZES.sm.height, avatar: "26px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: CONTROL_SIZES.md.height, avatar: "30px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: CONTROL_SIZES.lg.height, avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
 const Avatar = ({ org, boxSize, fontSize, }) => {
     const { colors } = useCustomTheme();

package/dist/esm/Theme/tokens/primitives/controlSizes.js

@@ -1,8 +1,8 @@
 /** One height scale for fields, selects and buttons, so controls side by side line up. */
 export const CONTROL_SIZES = {
-    xs: { height: "1.75rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
-    sm: { height: "2.1875rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
-    md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
+    xs: { height: "1.875rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2.375rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    md: { height: "2.625rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
 };
 export const CONTROL_SIZE_NAMES = ["xs", "sm", "md", "lg"];

package/dist/esm/Theme/tokens/primitives/optionRowSizes.js

@@ -1,19 +1,19 @@
 /** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
 export const OPTION_ROW_SIZES = {
     xs: {
-        minH: "1.5rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
+        minH: "1.625rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
         fontSize: "0.75rem", descriptionFontSize: "0.6875rem", iconSize: 12,
-        avatarSize: "2xs", virtualRowHeightPx: 24,
+        avatarSize: "2xs", virtualRowHeightPx: 26,
     },
     sm: {
-        minH: "1.875rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "2rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.8125rem", descriptionFontSize: "0.75rem", iconSize: 14,
-        avatarSize: "xs", virtualRowHeightPx: 30,
+        avatarSize: "xs", virtualRowHeightPx: 32,
     },
     md: {
-        minH: "2.125rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "2.25rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.875rem", descriptionFontSize: "0.75rem", iconSize: 16,
-        avatarSize: "xs", virtualRowHeightPx: 34,
+        avatarSize: "xs", virtualRowHeightPx: 36,
     },
     lg: {
         minH: "2.5rem", px: "0.875rem", py: "0.375rem", gap: "0.625rem", mx: "0.5rem",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.51",
+  "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",