pixelize-design-library 2.4.2-beta.49 → 2.4.2-beta.50

package/CHANGELOG.md

@@ -70,6 +70,17 @@ next major.
 
 ### Fixed
 
+- **Icons beside a field are centred at every size and height.** A lone right-hand icon in
+  `TextInput` (an `inputRightIcon`, the clear button or the password toggle) sat flush against the
+  border while the left one was inset; both now mirror at 6/9/12/15px. `SelectSearch`'s `rightIcon`
+  was centred on a 40px box whatever the field size (up to 8px high at `lg`). `Tabs` drew a
+  caller's icon at the caller's size inside a token-sized box, leaving it 3–6px off; it is now
+  pinned to the size token. `TableSearch`'s clear icon and `TableToggle` had a literal `2rem`
+  height and now follow the `sm` control height. `TextInput`'s `height` prop now wins over the
+  size token's `minH`, so an explicit height below the token no longer leaves a taller input in a
+  shorter group.
+- **`*Props` JSDoc quoted the old control scale.** Eleven components documented "xs 24 · sm 32";
+  they now say 28 / 35, and `Common/controlSizeDocs.test.ts` fails if they drift again.
 - **`Table` — a column search only ever matched the page you were looking at.** The per-column
   search ran on `filteredData`, which `useTable` had already sliced to the current page, so a match
   on page 3 was invisible from page 1 and the pager still counted every row. The search now runs

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

@@ -0,0 +1,3 @@
+import type { SystemStyleObject } from "@chakra-ui/styled-system";
+/** Centres a caller-supplied icon in a fixed box and pins its svg to that size, whatever size the caller gave it. */
+export declare const iconBoxSx: (px: number) => SystemStyleObject;

package/dist/Components/Common/iconBox.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconBoxSx = void 0;
+/** Centres a caller-supplied icon in a fixed box and pins its svg to that size, whatever size the caller gave it. */
+const iconBoxSx = (px) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 0,
+    flexShrink: 0,
+    "& > svg, & > * svg, & svg": {
+        width: `${px}px !important`,
+        height: `${px}px !important`,
+    },
+});
+exports.iconBoxSx = iconBoxSx;

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

@@ -121,7 +121,7 @@ const TextInput = (0, react_1.forwardRef)(({ label, type = "text", id, name, onC
     const { showError, showHelper } = (0, fieldMessageStyles_1.fieldMessageVisibility)({ error: isFieldInvalid, errorMessage, helperText });
     const showMessageRow = showCounter || showError || showHelper;
     const describedBy = [ids.describedBy, counterId].filter(Boolean).join(" ") || undefined;
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isFieldRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { style: inputGroupStyle, size: size, height: height, children: [inputLeftAddon && ((0, jsx_runtime_1.jsx)(react_2.InputLeftAddon, { sx: (0, TextInput_styles_1.fieldAddonSx)(theme.colors), children: inputLeftAddon })), inputLeftIcon && ((0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: onLeftIconClick ? "auto" : "none", ...leftElementStyle, height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(IconSlot, { icon: inputLeftIcon, onClick: onLeftIconClick, ariaLabel: leftIconAriaLabel !== null && leftIconAriaLabel !== void 0 ? leftIconAriaLabel : actionName("left icon action"), sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }) })), (0, jsx_runtime_1.jsx)(react_2.Input, { type: effectiveType, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isFieldDisabled, isReadOnly: isFieldReadOnly, name: name, size: size, variant: variant, maxLength: maxLength, ...(height != null && { height }), isInvalid: isFieldInvalid, ref: mergedRef, autoComplete: autoComplete, "aria-busy": isLoading || undefined, ...ids.controlProps, "aria-describedby": describedBy, ...inputStyle, ...props }), (isLoading || rightSlots.length > 0) && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: !isLoading && rightSlots.some((slot) => slot.onClick) ? "auto" : "none", ...rightElementStyle, height: "100%", display: "flex", alignItems: "center", justifyContent: "flex-end", width: !isLoading && rightSlots.length > 1 ? "auto" : undefined, ...(!isLoading && rightSlots.length > 1 ? { pr: 2, gap: 1 } : {}), children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", color: iconColor })) : (rightSlots.map((slot) => ((0, jsx_runtime_1.jsx)(IconSlot, { icon: slot.icon, onClick: slot.onClick, ariaLabel: slot.ariaLabel, sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }, slot.key)))) })), inputRightAddon && ((0, jsx_runtime_1.jsx)(react_2.InputRightAddon, { sx: (0, TextInput_styles_1.fieldAddonSx)(theme.colors), children: inputRightAddon }))] }), showMessageRow && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "flex-start", gap: 2, children: [(0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isFieldInvalid, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId }), showCounter && stringValue !== undefined && ((0, jsx_runtime_1.jsxs)(react_2.Text, { id: counterId, flexShrink: 0, ...(0, fieldMessageStyles_1.fieldMessageStyles)(theme.colors), color: isFieldInvalid ? theme.colors.semanticText.error : theme.colors.textMuted, children: [stringValue.length, "/", maxLength] }))] }))] }));
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isFieldRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { style: inputGroupStyle, size: size, height: height, children: [inputLeftAddon && ((0, jsx_runtime_1.jsx)(react_2.InputLeftAddon, { sx: (0, TextInput_styles_1.fieldAddonSx)(theme.colors), children: inputLeftAddon })), inputLeftIcon && ((0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: onLeftIconClick ? "auto" : "none", ...leftElementStyle, height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(IconSlot, { icon: inputLeftIcon, onClick: onLeftIconClick, ariaLabel: leftIconAriaLabel !== null && leftIconAriaLabel !== void 0 ? leftIconAriaLabel : actionName("left icon action"), sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }) })), (0, jsx_runtime_1.jsx)(react_2.Input, { type: effectiveType, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isFieldDisabled, isReadOnly: isFieldReadOnly, name: name, size: size, variant: variant, maxLength: maxLength, ...(height != null && { height, minH: height }), isInvalid: isFieldInvalid, ref: mergedRef, autoComplete: autoComplete, "aria-busy": isLoading || undefined, ...ids.controlProps, "aria-describedby": describedBy, ...inputStyle, ...props }), (isLoading || rightSlots.length > 0) && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: !isLoading && rightSlots.some((slot) => slot.onClick) ? "auto" : "none", ...rightElementStyle, height: "100%", display: "flex", alignItems: "center", justifyContent: !isLoading && rightSlots.length > 1 ? "flex-end" : "center", width: !isLoading && rightSlots.length > 1 ? "auto" : undefined, ...(!isLoading && rightSlots.length > 1 ? { pr: 2, gap: 1 } : {}), children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", color: iconColor })) : (rightSlots.map((slot) => ((0, jsx_runtime_1.jsx)(IconSlot, { icon: slot.icon, onClick: slot.onClick, ariaLabel: slot.ariaLabel, sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }, slot.key)))) })), inputRightAddon && ((0, jsx_runtime_1.jsx)(react_2.InputRightAddon, { sx: (0, TextInput_styles_1.fieldAddonSx)(theme.colors), children: inputRightAddon }))] }), showMessageRow && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "flex-start", gap: 2, children: [(0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isFieldInvalid, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId }), showCounter && stringValue !== undefined && ((0, jsx_runtime_1.jsxs)(react_2.Text, { id: counterId, flexShrink: 0, ...(0, fieldMessageStyles_1.fieldMessageStyles)(theme.colors), color: isFieldInvalid ? theme.colors.semanticText.error : theme.colors.textMuted, children: [stringValue.length, "/", maxLength] }))] }))] }));
     return hasParentFormControl ? ((0, jsx_runtime_1.jsx)(react_2.Box, { w: width, minW: minW, maxW: maxW, children: content })) : ((0, jsx_runtime_1.jsx)(react_2.FormControl, { w: width, minW: minW, maxW: maxW, children: content }));
 });
 TextInput.displayName = "TextInput";

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`, 32px; 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`, 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. */
 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/Input/textInputIconSize.js

@@ -3,22 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTextInputIconSizePx = getTextInputIconSizePx;
 exports.getTextInputIconWrapperSx = getTextInputIconWrapperSx;
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const iconBox_1 = require("../Common/iconBox");
 /** Icon px for a field size, from the shared control scale; unknown sizes fall back to the default size. */
 function getTextInputIconSizePx(size) {
     return controlSizes_1.CONTROL_SIZES[(0, controlSizes_1.isControlSize)(size) ? size : controlSizes_1.DEFAULT_CONTROL_SIZE].iconSize;
 }
 /** Scales SVG icons (e.g. Lucide, which set explicit width/height) in an icon slot to the field size. */
 function getTextInputIconWrapperSx(size) {
-    const px = getTextInputIconSizePx(size);
-    return {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        lineHeight: 0,
-        flexShrink: 0,
-        "& > svg, & > * svg, & svg": {
-            width: `${px}px !important`,
-            height: `${px}px !important`,
-        },
-    };
+    return (0, iconBox_1.iconBoxSx)(getTextInputIconSizePx(size));
 }

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 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 28 · sm 35 · 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/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 24 · sm 32 · md 40 · lg 48). Defaults to "sm". */
+    /** Square cell size, aligned to CONTROL_SIZES heights (xs 28 · sm 35 · 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/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 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 28 · sm 35 · 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 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 28 · sm 35 · 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/SegmentedControlProps.d.ts

@@ -1,5 +1,5 @@
 import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
-/** Whole-track height on the shared control scale (sm 32 · md 40 · lg 48px); defaults to "sm". */
+/** Whole-track height on the shared control scale (sm 35 · 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 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     /** Applied to the wrapping FormControl. */
     width?: string | number;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -228,13 +228,13 @@ function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnc
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "3.125rem", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, variant: "outline", value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "3.125rem", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: size, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, variant: "outline", value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
                                     if (skipNextInputFocusOpen.current) {
                                         skipNextInputFocusOpen.current = false;
                                         return;
                                     }
                                     openDropdown();
-                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), ...(0, fieldStyles_1.controlSizeStyles)(size), ...(0, motion_2.reducedMotionSx)() }, style: inputStyle }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), ...(0, fieldStyles_1.controlSizeStyles)(size), ...(0, motion_2.reducedMotionSx)() }, style: inputStyle }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
                                             ? BottomTextColor
                                             : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }) }) }));
 }

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 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the shared control scale (xs 28 · sm 35 · 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 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Shared control scale (xs 28 · sm 35 · 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/Table/components/TableSearch.js

@@ -30,6 +30,6 @@ const TableSearch = ({ onSearch }) => {
         setQuery(value);
         handleDebounce(value);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Search", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Search", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { maxW: "12.5rem", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "lg", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear search", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Search", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Search", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", maxW: "12.5rem", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "lg", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { display: "flex", alignItems: "center", height: "100%", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear search", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
 };
 exports.default = TableSearch;

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

@@ -13,6 +13,7 @@ const color_1 = require("../../../Theme/tokens/builders/color");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../../Theme/chakra/motion");
 const controlSizes_1 = require("../../../Theme/tokens/primitives/controlSizes");
+const iconBox_1 = require("../../Common/iconBox");
 const tabStyles_1 = require("../tabStyles");
 const TabsContext_1 = require("../TabsContext");
 const CountBadge_1 = __importDefault(require("./CountBadge"));
@@ -44,6 +45,6 @@ const Tab = ({ value, children, icon, count, isDisabled }) => {
                 ? { borderLeft: "0.125rem solid", borderLeftColor: (_c = style.indicator) !== null && _c !== void 0 ? _c : "transparent" }
                 : { borderBottom: "0.125rem solid", borderBottomColor: (_d = style.indicator) !== null && _d !== void 0 ? _d : "transparent" }
             : {};
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: ref, role: "tab", id: (0, TabsContext_1.tabId)(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? (0, TabsContext_1.panelId)(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), display: "flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flexShrink: 0, flex: ctx.isFitted ? 1 : undefined, w: isVertical ? "100%" : undefined, h: isVertical ? "auto" : spec.height, minH: spec.height, py: isVertical ? "0.5rem" : undefined, px: spec.paddingX, fontSize: spec.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, borderRadius: isLine ? "none" : "lg", bg: style.bg, color: style.color, ...borderProps, transition: (0, motion_1.transitionFor)(["background-color", "color", "border-color"]), sx: { _focusVisible: focusRing, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: focusRing, ...(0, motion_2.reducedMotionSx)() }, _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor } : undefined, children: [icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, boxSize: `${spec.iconSize}px`, children: icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", children: children }), count !== undefined ? ((0, jsx_runtime_1.jsx)(CountBadge_1.default, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: ref, role: "tab", id: (0, TabsContext_1.tabId)(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? (0, TabsContext_1.panelId)(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), display: "flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flexShrink: 0, flex: ctx.isFitted ? 1 : undefined, w: isVertical ? "100%" : undefined, h: isVertical ? "auto" : spec.height, minH: spec.height, py: isVertical ? "0.5rem" : undefined, px: spec.paddingX, fontSize: spec.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, borderRadius: isLine ? "none" : "lg", bg: style.bg, color: style.color, ...borderProps, transition: (0, motion_1.transitionFor)(["background-color", "color", "border-color"]), sx: { _focusVisible: focusRing, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: focusRing, ...(0, motion_2.reducedMotionSx)() }, _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor } : undefined, children: [icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: `${spec.iconSize}px`, sx: (0, iconBox_1.iconBoxSx)(spec.iconSize), children: icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", children: children }), count !== undefined ? ((0, jsx_runtime_1.jsx)(CountBadge_1.default, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
 };
 exports.default = Tab;

package/dist/Components/Toggle/TableToggle.js

@@ -11,7 +11,10 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 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 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" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -32,7 +35,7 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
             p: isUnderlineSlide ? "0" : "0.125rem",
             borderRadius: isUnderlineSlide ? "none" : "lg",
             borderBottom: isUnderlineSlide ? `0.0625rem solid ${colors.boxborder[200]}` : undefined,
-            height: "2rem",
+            height: TRACK_HEIGHT,
             gap: isUnderlineSlide ? "0" : "0.125rem",
             width: "6.3rem",
             position: "relative",
@@ -50,7 +53,7 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
                     ? colors.accentText
                     : restInk,
             borderRadius: isUnderlineSlide ? "none" : "lg",
-            height: "1.75rem",
+            height: SEGMENT_HEIGHT,
             border: hasIndicator ? "none" : "1px solid",
             borderColor: hasIndicator
                 ? "transparent"
@@ -75,7 +78,7 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
             transition: "color 0.2s ease-in-out",
         }),
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: "1.75rem", w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Grid View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Grid View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
                         refs.current[0] = node;
                     }, "aria-label": "Grid View", "aria-pressed": value === "grid", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "List View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
                         refs.current[1] = node;

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

@@ -0,0 +1,12 @@
+/** Centres a caller-supplied icon in a fixed box and pins its svg to that size, whatever size the caller gave it. */
+export const iconBoxSx = (px) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 0,
+    flexShrink: 0,
+    "& > svg, & > * svg, & svg": {
+        width: `${px}px !important`,
+        height: `${px}px !important`,
+    },
+});

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

@@ -83,7 +83,7 @@ const TextInput = forwardRef(({ label, type = "text", id, name, onChange, onBlur
     const { showError, showHelper } = fieldMessageVisibility({ error: isFieldInvalid, errorMessage, helperText });
     const showMessageRow = showCounter || showError || showHelper;
     const describedBy = [ids.describedBy, counterId].filter(Boolean).join(" ") || undefined;
-    const content = (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isFieldRequired })), _jsxs(InputGroup, { style: inputGroupStyle, size: size, height: height, children: [inputLeftAddon && (_jsx(InputLeftAddon, { sx: fieldAddonSx(theme.colors), children: inputLeftAddon })), inputLeftIcon && (_jsx(InputLeftElement, { pointerEvents: onLeftIconClick ? "auto" : "none", ...leftElementStyle, height: "100%", display: "flex", alignItems: "center", children: _jsx(IconSlot, { icon: inputLeftIcon, onClick: onLeftIconClick, ariaLabel: leftIconAriaLabel !== null && leftIconAriaLabel !== void 0 ? leftIconAriaLabel : actionName("left icon action"), sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }) })), _jsx(Input, { type: effectiveType, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isFieldDisabled, isReadOnly: isFieldReadOnly, name: name, size: size, variant: variant, maxLength: maxLength, ...(height != null && { height }), isInvalid: isFieldInvalid, ref: mergedRef, autoComplete: autoComplete, "aria-busy": isLoading || undefined, ...ids.controlProps, "aria-describedby": describedBy, ...inputStyle, ...props }), (isLoading || rightSlots.length > 0) && (_jsx(InputRightElement, { pointerEvents: !isLoading && rightSlots.some((slot) => slot.onClick) ? "auto" : "none", ...rightElementStyle, height: "100%", display: "flex", alignItems: "center", justifyContent: "flex-end", width: !isLoading && rightSlots.length > 1 ? "auto" : undefined, ...(!isLoading && rightSlots.length > 1 ? { pr: 2, gap: 1 } : {}), children: isLoading ? (_jsx(Spinner, { size: "xs", color: iconColor })) : (rightSlots.map((slot) => (_jsx(IconSlot, { icon: slot.icon, onClick: slot.onClick, ariaLabel: slot.ariaLabel, sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }, slot.key)))) })), inputRightAddon && (_jsx(InputRightAddon, { sx: fieldAddonSx(theme.colors), children: inputRightAddon }))] }), showMessageRow && (_jsxs(Flex, { justify: "space-between", align: "flex-start", gap: 2, children: [_jsx(FieldMessage, { error: isFieldInvalid, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId }), showCounter && stringValue !== undefined && (_jsxs(Text, { id: counterId, flexShrink: 0, ...fieldMessageStyles(theme.colors), color: isFieldInvalid ? theme.colors.semanticText.error : theme.colors.textMuted, children: [stringValue.length, "/", maxLength] }))] }))] }));
+    const content = (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isFieldRequired })), _jsxs(InputGroup, { style: inputGroupStyle, size: size, height: height, children: [inputLeftAddon && (_jsx(InputLeftAddon, { sx: fieldAddonSx(theme.colors), children: inputLeftAddon })), inputLeftIcon && (_jsx(InputLeftElement, { pointerEvents: onLeftIconClick ? "auto" : "none", ...leftElementStyle, height: "100%", display: "flex", alignItems: "center", children: _jsx(IconSlot, { icon: inputLeftIcon, onClick: onLeftIconClick, ariaLabel: leftIconAriaLabel !== null && leftIconAriaLabel !== void 0 ? leftIconAriaLabel : actionName("left icon action"), sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }) })), _jsx(Input, { type: effectiveType, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isFieldDisabled, isReadOnly: isFieldReadOnly, name: name, size: size, variant: variant, maxLength: maxLength, ...(height != null && { height, minH: height }), isInvalid: isFieldInvalid, ref: mergedRef, autoComplete: autoComplete, "aria-busy": isLoading || undefined, ...ids.controlProps, "aria-describedby": describedBy, ...inputStyle, ...props }), (isLoading || rightSlots.length > 0) && (_jsx(InputRightElement, { pointerEvents: !isLoading && rightSlots.some((slot) => slot.onClick) ? "auto" : "none", ...rightElementStyle, height: "100%", display: "flex", alignItems: "center", justifyContent: !isLoading && rightSlots.length > 1 ? "flex-end" : "center", width: !isLoading && rightSlots.length > 1 ? "auto" : undefined, ...(!isLoading && rightSlots.length > 1 ? { pr: 2, gap: 1 } : {}), children: isLoading ? (_jsx(Spinner, { size: "xs", color: iconColor })) : (rightSlots.map((slot) => (_jsx(IconSlot, { icon: slot.icon, onClick: slot.onClick, ariaLabel: slot.ariaLabel, sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }, slot.key)))) })), inputRightAddon && (_jsx(InputRightAddon, { sx: fieldAddonSx(theme.colors), children: inputRightAddon }))] }), showMessageRow && (_jsxs(Flex, { justify: "space-between", align: "flex-start", gap: 2, children: [_jsx(FieldMessage, { error: isFieldInvalid, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId }), showCounter && stringValue !== undefined && (_jsxs(Text, { id: counterId, flexShrink: 0, ...fieldMessageStyles(theme.colors), color: isFieldInvalid ? theme.colors.semanticText.error : theme.colors.textMuted, children: [stringValue.length, "/", maxLength] }))] }))] }));
     return hasParentFormControl ? (_jsx(Box, { w: width, minW: minW, maxW: maxW, children: content })) : (_jsx(FormControl, { w: width, minW: minW, maxW: maxW, children: content }));
 });
 TextInput.displayName = "TextInput";

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

@@ -1,20 +1,10 @@
 import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE, isControlSize, } from "../../Theme/tokens/primitives/controlSizes.js";
+import { iconBoxSx } from "../Common/iconBox.js";
 /** Icon px for a field size, from the shared control scale; unknown sizes fall back to the default size. */
 export function getTextInputIconSizePx(size) {
     return CONTROL_SIZES[isControlSize(size) ? size : DEFAULT_CONTROL_SIZE].iconSize;
 }
 /** Scales SVG icons (e.g. Lucide, which set explicit width/height) in an icon slot to the field size. */
 export function getTextInputIconWrapperSx(size) {
-    const px = getTextInputIconSizePx(size);
-    return {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        lineHeight: 0,
-        flexShrink: 0,
-        "& > svg, & > * svg, & svg": {
-            width: `${px}px !important`,
-            height: `${px}px !important`,
-        },
-    };
+    return iconBoxSx(getTextInputIconSizePx(size));
 }

package/dist/esm/Components/SelectSearch/SelectSearch.js

@@ -222,13 +222,13 @@ export default function SelectSearch({ options, initialSelectedOption, onOptionS
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    return (_jsx(_Fragment, { children: _jsx(FormControl, { isInvalid: error, children: _jsxs(Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && (_jsx(HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => (_jsxs(Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [_jsx(TagLabel, { width: "3.125rem", children: option.label }), _jsx(TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), _jsxs(InputGroup, { children: [_jsx(Input, { ref: inputRef, ...ids.controlProps, variant: "outline", value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
+    return (_jsx(_Fragment, { children: _jsx(FormControl, { isInvalid: error, children: _jsxs(Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && (_jsx(HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => (_jsxs(Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [_jsx(TagLabel, { width: "3.125rem", children: option.label }), _jsx(TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), _jsxs(InputGroup, { size: size, children: [_jsx(Input, { ref: inputRef, ...ids.controlProps, variant: "outline", value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
                                     if (skipNextInputFocusOpen.current) {
                                         skipNextInputFocusOpen.current = false;
                                         return;
                                     }
                                     openDropdown();
-                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...fieldControlStyles(theme.colors), ...controlSizeStyles(size), ...reducedMotionSx() }, style: inputStyle }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [_jsx(Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: _jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), _jsx("hr", {}), isBottomIcon && (_jsxs(Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [_jsx(Box, { children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { fontSize: "0.875rem", color: BottomTextColor
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...fieldControlStyles(theme.colors), ...controlSizeStyles(size), ...reducedMotionSx() }, style: inputStyle }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [_jsx(Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: _jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), _jsx("hr", {}), isBottomIcon && (_jsxs(Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [_jsx(Box, { children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { fontSize: "0.875rem", color: BottomTextColor
                                             ? BottomTextColor
                                             : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }) }) }));
 }

package/dist/esm/Components/Table/components/TableSearch.js

@@ -25,6 +25,6 @@ const TableSearch = ({ onSearch }) => {
         setQuery(value);
         handleDebounce(value);
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "lg", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { size: "sm", maxW: "12.5rem", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "lg", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "100%", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
 };
 export default TableSearch;

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

@@ -8,6 +8,7 @@ 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 { iconBoxSx } from "../../Common/iconBox.js";
 import { resolveTabStyle, scaleForColorScheme } from "../tabStyles.js";
 import { panelId, tabId, useTabsContext } from "../TabsContext.js";
 import CountBadge from "./CountBadge.js";
@@ -39,6 +40,6 @@ const Tab = ({ value, children, icon, count, isDisabled }) => {
                 ? { borderLeft: "0.125rem solid", borderLeftColor: (_c = style.indicator) !== null && _c !== void 0 ? _c : "transparent" }
                 : { borderBottom: "0.125rem solid", borderBottomColor: (_d = style.indicator) !== null && _d !== void 0 ? _d : "transparent" }
             : {};
-    return (_jsxs(Box, { as: "button", type: "button", ref: ref, role: "tab", id: tabId(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? panelId(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), display: "flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flexShrink: 0, flex: ctx.isFitted ? 1 : undefined, w: isVertical ? "100%" : undefined, h: isVertical ? "auto" : spec.height, minH: spec.height, py: isVertical ? "0.5rem" : undefined, px: spec.paddingX, fontSize: spec.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, borderRadius: isLine ? "none" : "lg", bg: style.bg, color: style.color, ...borderProps, transition: transitionFor(["background-color", "color", "border-color"]), sx: { _focusVisible: focusRing, [FOCUS_VISIBLE_OVER_STATE]: focusRing, ...reducedMotionSx() }, _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor } : undefined, children: [icon ? (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, boxSize: `${spec.iconSize}px`, children: icon })) : null, _jsx(Box, { as: "span", children: children }), count !== undefined ? (_jsx(CountBadge, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+    return (_jsxs(Box, { as: "button", type: "button", ref: ref, role: "tab", id: tabId(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? panelId(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), display: "flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flexShrink: 0, flex: ctx.isFitted ? 1 : undefined, w: isVertical ? "100%" : undefined, h: isVertical ? "auto" : spec.height, minH: spec.height, py: isVertical ? "0.5rem" : undefined, px: spec.paddingX, fontSize: spec.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, borderRadius: isLine ? "none" : "lg", bg: style.bg, color: style.color, ...borderProps, transition: transitionFor(["background-color", "color", "border-color"]), sx: { _focusVisible: focusRing, [FOCUS_VISIBLE_OVER_STATE]: focusRing, ...reducedMotionSx() }, _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor } : undefined, children: [icon ? (_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${spec.iconSize}px`, sx: iconBoxSx(spec.iconSize), children: icon })) : null, _jsx(Box, { as: "span", children: children }), count !== undefined ? (_jsx(CountBadge, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
 };
 export default Tab;

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

@@ -6,7 +6,10 @@ 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";
 const MODES = ["grid", "list"];
+const TRACK_HEIGHT = CONTROL_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" }) => {
     const theme = useCustomTheme();
@@ -27,7 +30,7 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
             p: isUnderlineSlide ? "0" : "0.125rem",
             borderRadius: isUnderlineSlide ? "none" : "lg",
             borderBottom: isUnderlineSlide ? `0.0625rem solid ${colors.boxborder[200]}` : undefined,
-            height: "2rem",
+            height: TRACK_HEIGHT,
             gap: isUnderlineSlide ? "0" : "0.125rem",
             width: "6.3rem",
             position: "relative",
@@ -45,7 +48,7 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
                     ? colors.accentText
                     : restInk,
             borderRadius: isUnderlineSlide ? "none" : "lg",
-            height: "1.75rem",
+            height: SEGMENT_HEIGHT,
             border: hasIndicator ? "none" : "1px solid",
             borderColor: hasIndicator
                 ? "transparent"
@@ -70,7 +73,7 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
             transition: "color 0.2s ease-in-out",
         }),
     };
-    return (_jsxs(Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: "1.75rem", w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), _jsx(ToolTip, { label: "Grid View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
+    return (_jsxs(Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), _jsx(ToolTip, { label: "Grid View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
                         refs.current[0] = node;
                     }, "aria-label": "Grid View", "aria-pressed": value === "grid", icon: _jsx(Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), _jsx(ToolTip, { label: "List View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
                         refs.current[1] = node;

package/package.json

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