pixelize-design-library 2.4.2-beta.54 → 2.4.2-beta.56

package/CHANGELOG.md

@@ -81,6 +81,18 @@ next major.
 
 ### Fixed
 
+- **Control-size regression: field and button heights are two scales again, not one.** A
+  form-field-only bump had leaked into `Button`, `SegmentedControl`, `Tabs`, `TableToggle` and
+  `Dropdown`'s trigger through one shared token. `CONTROL_SIZES` (fields/selects: xs 24 · sm 38 ·
+  md 40 · lg 48) and `BUTTON_SIZES` (buttons and every button-like trigger: xs 24 · sm 32 · md 40 ·
+  lg 48, back to pre-regression) are now separate exports, gated by
+  `Common/sizeScaleOwnership.test.ts` so they can't silently merge again. `OPTION_ROW_SIZES`
+  (dropdown/select/menu row heights) is reverted to xs 24 · sm 30 · md 34 · lg 40; `OrgSwitcher`/
+  `AppSwitcher` are back on their own hardcoded literal sizes, not a shared token.
+- **`CONTROL_SIZES.xs` (fields only) raised 24px → 32px.** `TextInput`, `Select`, `MultiSelect`,
+  `SearchSelect`, `SelectSearch`, `SelectV2`, `NumberInput`, `PinInput`, `Search` and the
+  `DatePicker` family at `size="xs"` are now 32px tall. `BUTTON_SIZES.xs` (`Button`,
+  `SegmentedControl`, `Tabs`, `TableToggle`, `Dropdown`'s trigger) is untouched, still 24px.
 - **`SideBar`'s nav scrollbar thumb was the brand `primary` color.** Every other scrollbar in the
   library reads a neutral chrome token; the sidebar's hand-rolled CSS (`Constants/Sidebar.ts`) was
   the one place still reaching for `primary[500]`/`primary[700]`. It now reads

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` (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"` |
+| 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 24 / sm 38 / md 40 / lg 48 — the same height in every field, select and button. `TimePicker` has no `size` (fixed `sm`); `SegmentedControl` has no `xs`. **Since decoupled** — fields/selects now read `CONTROL_SIZES` (xs 24 / sm 38 / md 40 / lg 48 at the time of the split; xs later raised to 32px), `Button`/`SegmentedControl`/`Tabs`/`TableToggle`/`Dropdown`'s trigger read the separate `BUTTON_SIZES` (xs 24 / sm 32 / md 40 / lg 48, back to pre-regression) — see the gotcha below | `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 | — |
@@ -359,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 30 / 38 / 42 / 48, default `sm`) — it was silently ignored | `size="md"` |
+| `PinInput` | `size` now works (square cells 24 / 38 / 40 / 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 | — |
@@ -388,6 +388,26 @@ differ — this is a rewrite of the call site, not a rename.
 `RangeSlider`, `Spinner`, `Tab`, `TabList`, `TabPanel`, `TabPanels`, `Tabs`. They now point at the
 library's own themed component rather than the Chakra passthrough.
 
+### `CONTROL_SIZES` (fields) and `BUTTON_SIZES` (buttons) are separate scales — changing one never changes the other
+
+Fields/selects (`TextInput`, `Select`, `MultiSelect`, `SearchSelect`, `NumberInput`, `PinInput`, the
+`DatePicker` family, …) read `CONTROL_SIZES` — xs 32 · sm 38 · md 40 · lg 48. `Button` and every
+button-like trigger (`SegmentedControl`, `Tabs`, `TableToggle`, `Dropdown`'s trigger) read the
+separate `BUTTON_SIZES` — xs 24 · sm 32 · md 40 · lg 48. They used to share one token, which is what
+let a field-only size bump leak into buttons — the split is now gate-tested
+(`Common/sizeScaleOwnership.test.ts`).
+
+**Apply:** a PR that "just" bumps a form-field size should never touch `Button.styles.ts`,
+`SegmentedControl`, `Tab`, `TableToggle` or `Dropdown` — if it does, it's reading the wrong token.
+
+### `controlSizeStyles()`'s `minH` silently overrides a smaller `h` override
+
+`fieldStyles.ts`'s `controlSizeStyles()` sets both `h` and `minH` to the same token value. A caller
+overriding only `h` with a smaller literal compiles and renders, but the inherited `minH` still
+wins, so the field stays at the token height.
+
+**Apply:** override both `h` and `minH` together, or don't override either.
+
 ### `Tag`'s `onIconClick` renders nothing without `icon` — the remove button silently never appears
 
 `onIconClick` only turns `icon` into a remove button; it has no effect on its own (`Tag.tsx`

package/DESIGN-GUIDE.md

@@ -87,12 +87,14 @@ stay light in dark mode.
 `secondary` and `tertiary` render as the same hex on most brands (see `COMPONENT-GOTCHAS.md`) —
 don't lean on that pair to distinguish two categories; reach for a utility scheme instead.
 
-## 5. Controls — one scale, `sm` by default
-
-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.
+## 5. Controls — two scales, `sm` by default
+
+Fields (`TextInput`, `InputTextArea`, `NumberInput`, `Select`, `Search`, `RangeSlider`, the
+`DatePicker` family) sit on `CONTROL_SIZES` — `xs` 32px · `sm` 38px · `md` 40px · `lg` 48px.
+`Button` and every button-like trigger (`SegmentedControl`, `Tabs`, `TableToggle`, `Dropdown`)
+sit on the separate `BUTTON_SIZES` scale — `xs` 24px · `sm` 32px · `md` 40px · `lg` 48px. Both
+**default to `sm`**, so on a desktop page **don't pass `size`**. They line up at `md`/`lg`; at
+`sm` a button reads 6px shorter than the field beside it.
 
 | Button role | Props |
 | --- | --- |

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -46,10 +46,9 @@ 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: controlSizes_1.CONTROL_SIZES.sm.height, mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
+const s = { trigger: "36px", 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/Button.styles.js

@@ -8,7 +8,7 @@ const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_1 = require("../../Theme/chakra/motion");
 const primitives_1 = require("../../Theme/tokens/primitives");
 const controlSize = (size) => {
-    const { height, fontSize, paddingX } = primitives_1.CONTROL_SIZES[size];
+    const { height, fontSize, paddingX } = primitives_1.BUTTON_SIZES[size];
     return { h: height, minW: height, fontSize, px: paddingX };
 };
 // NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.

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 30 · sm 38 · md 42 · lg 48 (xl 56); defaults to "sm" via the theme, so a ButtonGroup size still applies. */
+    /** Control height xs 24 · sm 32 · md 40 · 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/Common/fieldStyles.d.ts

@@ -5,7 +5,7 @@ import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 export declare const FIELD_RADIUS = "lg";
 export declare const FIELD_BORDER_WIDTH = "1px";
 export declare const FIELD_TRANSITION: string;
-/** Chakra `h`/`fontSize`/`px` for a control of this size — fields, selects and buttons share it. */
+/** Chakra `h`/`fontSize`/`px` for a field or select of this size. */
 export declare const controlSizeStyles: (size: ControlSize) => {
     h: string;
     minH: string;

package/dist/Components/Common/fieldStyles.js

@@ -9,7 +9,7 @@ const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 exports.FIELD_RADIUS = "lg";
 exports.FIELD_BORDER_WIDTH = "1px";
 exports.FIELD_TRANSITION = (0, motion_1.transitionFor)(["border-color", "box-shadow", "background-color"]);
-/** Chakra `h`/`fontSize`/`px` for a control of this size — fields, selects and buttons share it. */
+/** Chakra `h`/`fontSize`/`px` for a field or select of this size. */
 const controlSizeStyles = (size) => {
     const spec = controlSizes_1.CONTROL_SIZES[size];
     return { h: spec.height, minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };

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 30 · sm 38 · md 42 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
+    /** Control-scale height: xs 32 · sm 38 · md 40 · 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/Dropdown/DropDown.js

@@ -17,10 +17,10 @@ const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
 const SIZE_MAP = {
-    xs: { btn: "xs", img: "1rem", chevron: controlSizes_1.CONTROL_SIZES.xs.iconSize, minW: "8rem", gap: 1.5, rowSize: "xs" },
-    sm: { btn: "sm", img: "1rem", chevron: controlSizes_1.CONTROL_SIZES.sm.iconSize, minW: "9rem", gap: 2, rowSize: "sm" },
-    md: { btn: "md", img: "1.125rem", chevron: controlSizes_1.CONTROL_SIZES.md.iconSize, minW: "11rem", gap: 2, rowSize: "md" },
-    lg: { btn: "lg", img: "1.25rem", chevron: controlSizes_1.CONTROL_SIZES.lg.iconSize, minW: "12rem", gap: 2.5, rowSize: "lg" },
+    xs: { btn: "xs", img: "1rem", chevron: controlSizes_1.BUTTON_SIZES.xs.iconSize, minW: "8rem", gap: 1.5, rowSize: "xs" },
+    sm: { btn: "sm", img: "1rem", chevron: controlSizes_1.BUTTON_SIZES.sm.iconSize, minW: "9rem", gap: 2, rowSize: "sm" },
+    md: { btn: "md", img: "1.125rem", chevron: controlSizes_1.BUTTON_SIZES.md.iconSize, minW: "11rem", gap: 2, rowSize: "md" },
+    lg: { btn: "lg", img: "1.25rem", chevron: controlSizes_1.BUTTON_SIZES.lg.iconSize, minW: "12rem", gap: 2.5, rowSize: "lg" },
     xl: { btn: "lg", img: "1.4rem", chevron: 20, minW: "13rem", gap: 3, rowSize: "lg" },
 };
 const TRIGGER_TRANSITION = (0, motion_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]);

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -28,7 +28,7 @@ export type DropdownProps = {
     LabelStyle?: React.CSSProperties;
     /** Inline style on each row's `image` icon; ignored for options without one. */
     ImageStyle?: React.CSSProperties;
-    /** Trigger + menu size on the shared control scale; defaults to `sm`. `xl` renders an `lg` trigger. */
+    /** Trigger on the button scale, menu rows on the option-row scale; defaults to `sm`. `xl` renders an `lg` trigger. */
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     /** @deprecated Use `size` instead. Kept for backward compatibility. */
     optionsSize?: "sm" | "md" | "lg";

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

@@ -10,7 +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. */
+    /** Control-scale height: xs 32 · sm 38 · md 40 · lg 48px. Defaults to "sm", like TextInput, so it lines up in a form. */
     size?: string;
     value?: string;
     codeValueReturn?: boolean;

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 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · 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/NotificationBell/NotificationBellProps.d.ts

@@ -4,7 +4,7 @@ import type { Tone } from "../../Theme/tokens/builders/tone";
 import type { DaySectionLabels } from "./notificationHelpers";
 /** Shared tone vocabulary for the badge, row tile and zone/filter buttons — an alias of the theme's Tone. */
 export type NotificationTone = Tone;
-/** Shared control scale for the bell trigger. */
+/** Button size scale for the bell trigger. */
 export type NotificationBellSize = "xs" | "sm" | "md" | "lg";
 /** Bell trigger with the three-state badge (capped count -> dot -> nothing); renders no panel itself. */
 export interface NotificationBellProps {

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -11,11 +11,10 @@ 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: 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 },
+    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 },
 };
 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 30 · sm 38 · md 42 · lg 48). Defaults to "sm". */
+    /** Square cell size, aligned to CONTROL_SIZES heights (xs 32 · sm 38 · md 40 · 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/RangeSlider/RangeSliderProps.d.ts

@@ -23,7 +23,7 @@ interface RangeSliderSharedProps {
     scale?: SliderScale;
     /** Formats a raw value for display — value labels, tooltip and aria-valuetext. Defaults to String. */
     formatValue?: (value: number) => string;
-    /** Track thickness and thumb size, from the shared control scale. Defaults to "sm". */
+    /** Track thickness and thumb size, keyed by ControlSize name — its own values, not the field or button scale. Defaults to "sm". */
     size?: ControlSize;
     /** Heading shown above the track. Pass "" to render none. Defaults to "Range". */
     label?: string;

package/dist/Components/RangeSlider/rangeSliderSize.d.ts

@@ -3,5 +3,5 @@ export type RangeSliderSizeSpec = {
     trackHeight: string;
     thumbSize: string;
 };
-/** Track thickness and thumb diameter for a size, aligned to the shared CONTROL_SIZES scale. */
+/** Track thickness and thumb diameter for a size — its own values, keyed by the same size names. */
 export declare const rangeSliderSize: (size: ControlSize) => RangeSliderSizeSpec;

package/dist/Components/RangeSlider/rangeSliderSize.js

@@ -7,6 +7,6 @@ const RANGE_SLIDER_SIZES = {
     md: { trackHeight: "4px", thumbSize: "1.25rem" },
     lg: { trackHeight: "5px", thumbSize: "1.5rem" },
 };
-/** Track thickness and thumb diameter for a size, aligned to the shared CONTROL_SIZES scale. */
+/** Track thickness and thumb diameter for a size — its own values, keyed by the same size names. */
 const rangeSliderSize = (size) => RANGE_SLIDER_SIZES[size];
 exports.rangeSliderSize = rangeSliderSize;

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 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · 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 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · 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/SegmentedControl.js

@@ -27,7 +27,7 @@ const formatCount = (count) => (count > MAX_COUNT ? `${MAX_COUNT}+` : `${count}`
 /** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
 function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", surface, "aria-label": ariaLabel, }) {
     const { colors, radii } = (0, useCustomTheme_1.useCustomTheme)();
-    const control = controlSizes_1.CONTROL_SIZES[size];
+    const control = controlSizes_1.BUTTON_SIZES[size];
     const isBrandSlide = variant === "brandSlide";
     const isUnderlineSlide = variant === "underlineSlide";
     const hasIndicator = isBrandSlide || isUnderlineSlide;

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 38 · md 42 · lg 48px); defaults to "sm". */
+/** Whole-track height on the button control scale (sm 32 · md 40 · 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 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · 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 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · 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 30 · sm 38 · md 42 · lg 48px). Defaults to `sm`. */
+    /** Field control scale (xs 32 · sm 38 · md 40 · 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/Components/Tabs/TabsProps.d.ts

@@ -32,7 +32,7 @@ export interface TabsProps {
     defaultValue?: string;
     onChange?: (value: string) => void;
     variant?: TabsVariant;
-    /** Defaults to "sm", matching every other control in this library. */
+    /** Defaults to "sm", on the button control scale (sm 32 · md 40 · lg 48px), not form fields. */
     size?: ControlSize;
     colorScheme?: TabsColorScheme;
     orientation?: TabsOrientation;

package/dist/Components/Tabs/components/Tab.js

@@ -29,7 +29,7 @@ const Tab = ({ value, children, icon, count, isDisabled }) => {
     const canvas = colors.backgroundColor.main;
     const scale = (0, tabStyles_1.scaleForColorScheme)(colors, ctx.colorScheme);
     const style = (0, tabStyles_1.resolveTabStyle)(colors, scale, canvas, ctx.variant, isSelected);
-    const spec = controlSizes_1.CONTROL_SIZES[ctx.size];
+    const spec = controlSizes_1.BUTTON_SIZES[ctx.size];
     // The list scrolls on both axes, so an outer ring is clipped into arcs; a negative offset draws it
     // inside the tab, clear of its own border rather than thickening it.
     const focusRing = {

package/dist/Components/Toggle/TableToggle.js

@@ -13,7 +13,7 @@ const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const useSlidingPill_1 = require("../SegmentedControl/useSlidingPill");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const MODES = ["grid", "list"];
-const TRACK_HEIGHT = controlSizes_1.CONTROL_SIZES.sm.height;
+const TRACK_HEIGHT = controlSizes_1.BUTTON_SIZES.sm.height;
 const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
 /** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl (see MODULE.md). */
 const TableToggle = ({ value, onChange, variant = "default" }) => {

package/dist/Theme/tokens/primitives/controlSizes.d.ts

@@ -5,8 +5,9 @@ export type ControlSizeSpec = {
     paddingX: string;
     iconSize: number;
 };
-/** One height scale for fields, selects and buttons, so controls side by side line up. */
+/** Height scale for form fields and selects — text inputs, pickers, anything typed or picked into. */
 export declare const CONTROL_SIZES: Readonly<Record<ControlSize, ControlSizeSpec>>;
+export declare const BUTTON_SIZES: Readonly<Record<ControlSize, ControlSizeSpec>>;
 export declare const CONTROL_SIZE_NAMES: readonly ControlSize[];
 export declare const DEFAULT_CONTROL_SIZE: ControlSize;
 export declare const isControlSize: (value: unknown) => value is ControlSize;

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

@@ -1,11 +1,17 @@
 "use strict";
 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.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.BUTTON_SIZES = exports.CONTROL_SIZES = void 0;
+/** Height scale for form fields and selects — text inputs, pickers, anything typed or picked into. */
 exports.CONTROL_SIZES = {
-    xs: { height: "1.875rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    xs: { height: "2rem", 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 },
+    md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
+    lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
+};
+exports.BUTTON_SIZES = {
+    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    md: { height: "2.5rem", 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.625rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
+        minH: "1.5rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
         fontSize: "0.75rem", descriptionFontSize: "0.6875rem", iconSize: 12,
-        avatarSize: "2xs", virtualRowHeightPx: 26,
+        avatarSize: "2xs", virtualRowHeightPx: 24,
     },
     sm: {
-        minH: "2rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "1.875rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.8125rem", descriptionFontSize: "0.75rem", iconSize: 14,
-        avatarSize: "xs", virtualRowHeightPx: 32,
+        avatarSize: "xs", virtualRowHeightPx: 30,
     },
     md: {
-        minH: "2.25rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "2.125rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.875rem", descriptionFontSize: "0.75rem", iconSize: 16,
-        avatarSize: "xs", virtualRowHeightPx: 36,
+        avatarSize: "xs", virtualRowHeightPx: 34,
     },
     lg: {
         minH: "2.5rem", px: "0.875rem", py: "0.375rem", gap: "0.625rem", mx: "0.5rem",

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

@@ -11,10 +11,9 @@ 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: CONTROL_SIZES.sm.height, mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
+const s = { trigger: "36px", 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/Button/Button.styles.js

@@ -3,9 +3,9 @@ import { darkerFillRung, labelOnFill, solidFillRung, } from "../../Theme/tokens/
 import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
-import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE, transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { BUTTON_SIZES, DEFAULT_CONTROL_SIZE, transitionFor } from "../../Theme/tokens/primitives/index.js";
 const controlSize = (size) => {
-    const { height, fontSize, paddingX } = CONTROL_SIZES[size];
+    const { height, fontSize, paddingX } = BUTTON_SIZES[size];
     return { h: height, minW: height, fontSize, px: paddingX };
 };
 // NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.

package/dist/esm/Components/Common/fieldStyles.js

@@ -6,7 +6,7 @@ import { fieldFocusVisible, focusGlowShadow } from "../../Theme/chakra/focusRing
 export const FIELD_RADIUS = "lg";
 export const FIELD_BORDER_WIDTH = "1px";
 export const FIELD_TRANSITION = transitionFor(["border-color", "box-shadow", "background-color"]);
-/** Chakra `h`/`fontSize`/`px` for a control of this size — fields, selects and buttons share it. */
+/** Chakra `h`/`fontSize`/`px` for a field or select of this size. */
 export const controlSizeStyles = (size) => {
     const spec = CONTROL_SIZES[size];
     return { h: spec.height, minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };

package/dist/esm/Components/Dropdown/DropDown.js

@@ -8,17 +8,17 @@ import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { ChevronDown } from "lucide-react";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
-import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 import { optionRowSpec, OPTION_ROW_RADIUS } from "../../Theme/tokens/primitives/optionRowSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 const MotionBox = motion(forwardRef((props, ref) => (_jsx(Box, { ref: ref, ...props }))));
 const SIZE_MAP = {
-    xs: { btn: "xs", img: "1rem", chevron: CONTROL_SIZES.xs.iconSize, minW: "8rem", gap: 1.5, rowSize: "xs" },
-    sm: { btn: "sm", img: "1rem", chevron: CONTROL_SIZES.sm.iconSize, minW: "9rem", gap: 2, rowSize: "sm" },
-    md: { btn: "md", img: "1.125rem", chevron: CONTROL_SIZES.md.iconSize, minW: "11rem", gap: 2, rowSize: "md" },
-    lg: { btn: "lg", img: "1.25rem", chevron: CONTROL_SIZES.lg.iconSize, minW: "12rem", gap: 2.5, rowSize: "lg" },
+    xs: { btn: "xs", img: "1rem", chevron: BUTTON_SIZES.xs.iconSize, minW: "8rem", gap: 1.5, rowSize: "xs" },
+    sm: { btn: "sm", img: "1rem", chevron: BUTTON_SIZES.sm.iconSize, minW: "9rem", gap: 2, rowSize: "sm" },
+    md: { btn: "md", img: "1.125rem", chevron: BUTTON_SIZES.md.iconSize, minW: "11rem", gap: 2, rowSize: "md" },
+    lg: { btn: "lg", img: "1.25rem", chevron: BUTTON_SIZES.lg.iconSize, minW: "12rem", gap: 2.5, rowSize: "lg" },
     xl: { btn: "lg", img: "1.4rem", chevron: 20, minW: "13rem", gap: 3, rowSize: "lg" },
 };
 const TRIGGER_TRANSITION = transitionFor(["background-color", "border-color", "color", "box-shadow"]);

package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -9,11 +9,10 @@ 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: 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 },
+    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 },
 };
 const Avatar = ({ org, boxSize, fontSize, }) => {
     const { colors } = useCustomTheme();

package/dist/esm/Components/RangeSlider/rangeSliderSize.js

@@ -4,5 +4,5 @@ const RANGE_SLIDER_SIZES = {
     md: { trackHeight: "4px", thumbSize: "1.25rem" },
     lg: { trackHeight: "5px", thumbSize: "1.5rem" },
 };
-/** Track thickness and thumb diameter for a size, aligned to the shared CONTROL_SIZES scale. */
+/** Track thickness and thumb diameter for a size — its own values, keyed by the same size names. */
 export const rangeSliderSize = (size) => RANGE_SLIDER_SIZES[size];

package/dist/esm/Components/SegmentedControl/SegmentedControl.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { Box, Flex } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
-import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { FOCUS_VISIBLE_OVER_STATE } from "../../Theme/chakra/focusRing.styles.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
@@ -21,7 +21,7 @@ const formatCount = (count) => (count > MAX_COUNT ? `${MAX_COUNT}+` : `${count}`
 /** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
 export default function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", surface, "aria-label": ariaLabel, }) {
     const { colors, radii } = useCustomTheme();
-    const control = CONTROL_SIZES[size];
+    const control = BUTTON_SIZES[size];
     const isBrandSlide = variant === "brandSlide";
     const isUnderlineSlide = variant === "underlineSlide";
     const hasIndicator = isBrandSlide || isUnderlineSlide;

package/dist/esm/Components/Tabs/components/Tab.js

@@ -7,7 +7,7 @@ import { AA_NON_TEXT, liftToContrast } from "../../../Theme/tokens/builders/outl
 import { compositeOver } from "../../../Theme/tokens/builders/color.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
-import { CONTROL_SIZES } from "../../../Theme/tokens/primitives/controlSizes.js";
+import { BUTTON_SIZES } from "../../../Theme/tokens/primitives/controlSizes.js";
 import { iconBoxSx } from "../../Common/iconBox.js";
 import { resolveTabStyle, scaleForColorScheme } from "../tabStyles.js";
 import { panelId, tabId, useTabsContext } from "../TabsContext.js";
@@ -24,7 +24,7 @@ const Tab = ({ value, children, icon, count, isDisabled }) => {
     const canvas = colors.backgroundColor.main;
     const scale = scaleForColorScheme(colors, ctx.colorScheme);
     const style = resolveTabStyle(colors, scale, canvas, ctx.variant, isSelected);
-    const spec = CONTROL_SIZES[ctx.size];
+    const spec = BUTTON_SIZES[ctx.size];
     // The list scrolls on both axes, so an outer ring is clipped into arcs; a negative offset draws it
     // inside the tab, clear of its own border rather than thickening it.
     const focusRing = {

package/dist/esm/Components/Toggle/TableToggle.js

@@ -6,9 +6,9 @@ import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outline
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { useSlidingPill } from "../SegmentedControl/useSlidingPill.js";
-import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 const MODES = ["grid", "list"];
-const TRACK_HEIGHT = CONTROL_SIZES.sm.height;
+const TRACK_HEIGHT = BUTTON_SIZES.sm.height;
 const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
 /** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl (see MODULE.md). */
 const TableToggle = ({ value, onChange, variant = "default" }) => {

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

@@ -1,8 +1,14 @@
-/** One height scale for fields, selects and buttons, so controls side by side line up. */
+/** Height scale for form fields and selects — text inputs, pickers, anything typed or picked into. */
 export const CONTROL_SIZES = {
-    xs: { height: "1.875rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    xs: { height: "2rem", 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 },
+    md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
+    lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
+};
+export const BUTTON_SIZES = {
+    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    md: { height: "2.5rem", 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.625rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
+        minH: "1.5rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
         fontSize: "0.75rem", descriptionFontSize: "0.6875rem", iconSize: 12,
-        avatarSize: "2xs", virtualRowHeightPx: 26,
+        avatarSize: "2xs", virtualRowHeightPx: 24,
     },
     sm: {
-        minH: "2rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "1.875rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.8125rem", descriptionFontSize: "0.75rem", iconSize: 14,
-        avatarSize: "xs", virtualRowHeightPx: 32,
+        avatarSize: "xs", virtualRowHeightPx: 30,
     },
     md: {
-        minH: "2.25rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
+        minH: "2.125rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
         fontSize: "0.875rem", descriptionFontSize: "0.75rem", iconSize: 16,
-        avatarSize: "xs", virtualRowHeightPx: 36,
+        avatarSize: "xs", virtualRowHeightPx: 34,
     },
     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.54",
+  "version": "2.4.2-beta.56",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",