smartsell-ui-kit 0.1.5 → 0.1.7

package/dist/index.d.cts

@@ -47,10 +47,10 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dan
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     indeterminate?: boolean;
 }
-declare function Checkbox({ label, hint, error, controlSize, id, checked, defaultChecked, disabled, indeterminate, required, className, style, onChange, onFocus, onBlur, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ label, hint, error, size, id, checked, defaultChecked, disabled, indeterminate, required, className, style, onChange, onFocus, onBlur, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface ModalSlotIds {
     header: string;
@@ -110,7 +110,7 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'd
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     value?: DatePickerValue;
     defaultValue?: DatePickerValue;
     onChange?: (value: string | null, context: DatePickerChangeContext) => void;
@@ -129,18 +129,18 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'd
     pickerButtonLabel?: string;
     clearButtonLabel?: string;
 }
-declare function DatePicker({ label, hint, error, controlSize, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ label, hint, error, size, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size'> {
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     showPasswordToggle?: boolean;
     fileButtonLabel?: ReactNode;
     icon?: ReactNode;
 }
-declare function Input({ label, hint, error, controlSize, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ label, hint, error, size, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
 
 type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
 type ModalThemeColors = {
@@ -208,7 +208,7 @@ interface SharedSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>
     hint?: ReactNode;
     error?: ReactNode;
     placeholder?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     isMulti?: boolean;
     isFilterable?: boolean;
 }
@@ -320,6 +320,11 @@ interface SharedTableProps<TItem> {
     actions?: TableActionSource<TItem>;
     stickyActionsColumn?: boolean;
     maxInlineActions?: number;
+    /**
+     * Viewport width (in px) below which the table switches from the desktop
+     * table layout to the stacked mobile card layout. Defaults to 768 so the
+     * table collapses in sync with the host app's mobile breakpoint.
+     */
     collapseBelow?: number;
     searchable?: boolean;
     showSearch?: boolean;
@@ -367,8 +372,8 @@ interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
 }
-declare function Textarea({ label, hint, error, controlSize, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
+declare function Textarea({ label, hint, error, size, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
 
 export { Button, type ButtonProps, Card, type CardProps, CardSmall, type CardSmallProps, Checkbox, type CheckboxProps, ComposableModal, type ComposableModalProps, type ComposableModalSlotRenderProps, type ComposableModalSlotRenderer, type ControlSize, DatePicker, type DatePickerChangeContext, type DatePickerChangeReason, type DatePickerMode, type DatePickerProps, type DatePickerValue, Input, type InputProps, Modal, type ModalAction, type ModalProps, type ModalSlotContext, type ModalSlotIds, type ModalTheme, type ModalThemeSource, Select, SelectAsync, type SelectAsyncLoadContext, type SelectAsyncLoadResult, type SelectAsyncOption, type SelectAsyncOptionValue, type SelectAsyncProps, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, type SharedTableProps, type StandardModalProps, Table, type TableAction, type TableActionSource, type TableActionTone, TableAsync, type TableAsyncLoadContext, type TableAsyncLoadResult, type TableAsyncProps, type TableColumn, type TableColumnAlign, type TableColumnType, type TableLabels, type TableProps, Textarea, type TextareaProps, type UiKitTheme, createModalSlotIds, useUiKitTheme };

package/dist/index.d.ts

@@ -47,10 +47,10 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dan
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     indeterminate?: boolean;
 }
-declare function Checkbox({ label, hint, error, controlSize, id, checked, defaultChecked, disabled, indeterminate, required, className, style, onChange, onFocus, onBlur, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ label, hint, error, size, id, checked, defaultChecked, disabled, indeterminate, required, className, style, onChange, onFocus, onBlur, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface ModalSlotIds {
     header: string;
@@ -110,7 +110,7 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'd
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     value?: DatePickerValue;
     defaultValue?: DatePickerValue;
     onChange?: (value: string | null, context: DatePickerChangeContext) => void;
@@ -129,18 +129,18 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'd
     pickerButtonLabel?: string;
     clearButtonLabel?: string;
 }
-declare function DatePicker({ label, hint, error, controlSize, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ label, hint, error, size, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size'> {
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     showPasswordToggle?: boolean;
     fileButtonLabel?: ReactNode;
     icon?: ReactNode;
 }
-declare function Input({ label, hint, error, controlSize, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ label, hint, error, size, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
 
 type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
 type ModalThemeColors = {
@@ -208,7 +208,7 @@ interface SharedSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>
     hint?: ReactNode;
     error?: ReactNode;
     placeholder?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
     isMulti?: boolean;
     isFilterable?: boolean;
 }
@@ -320,6 +320,11 @@ interface SharedTableProps<TItem> {
     actions?: TableActionSource<TItem>;
     stickyActionsColumn?: boolean;
     maxInlineActions?: number;
+    /**
+     * Viewport width (in px) below which the table switches from the desktop
+     * table layout to the stacked mobile card layout. Defaults to 768 so the
+     * table collapses in sync with the host app's mobile breakpoint.
+     */
     collapseBelow?: number;
     searchable?: boolean;
     showSearch?: boolean;
@@ -367,8 +372,8 @@ interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    controlSize?: ControlSize;
+    size?: ControlSize;
 }
-declare function Textarea({ label, hint, error, controlSize, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
+declare function Textarea({ label, hint, error, size, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
 
 export { Button, type ButtonProps, Card, type CardProps, CardSmall, type CardSmallProps, Checkbox, type CheckboxProps, ComposableModal, type ComposableModalProps, type ComposableModalSlotRenderProps, type ComposableModalSlotRenderer, type ControlSize, DatePicker, type DatePickerChangeContext, type DatePickerChangeReason, type DatePickerMode, type DatePickerProps, type DatePickerValue, Input, type InputProps, Modal, type ModalAction, type ModalProps, type ModalSlotContext, type ModalSlotIds, type ModalTheme, type ModalThemeSource, Select, SelectAsync, type SelectAsyncLoadContext, type SelectAsyncLoadResult, type SelectAsyncOption, type SelectAsyncOptionValue, type SelectAsyncProps, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, type SharedTableProps, type StandardModalProps, Table, type TableAction, type TableActionSource, type TableActionTone, TableAsync, type TableAsyncLoadContext, type TableAsyncLoadResult, type TableAsyncProps, type TableColumn, type TableColumnAlign, type TableColumnType, type TableLabels, type TableProps, Textarea, type TextareaProps, type UiKitTheme, createModalSlotIds, useUiKitTheme };

package/dist/index.js

@@ -511,7 +511,7 @@ function CardSmall({
 // src/components/Checkbox.tsx
 import { useEffect as useEffect2, useId, useRef, useState } from "react";
 import { jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
-var CHECKBOX_SIZE_BY_CONTROL_SIZE = {
+var CHECKBOX_SIZE_BY_SIZE = {
   sm: 14,
   md: 16,
   lg: 20
@@ -521,7 +521,7 @@ var CHECKBOX_LABEL_CLASSNAMES = {
   md: "text-sm leading-[18px]",
   lg: "text-[15px] leading-[18px]"
 };
-var getCheckboxSize = (controlSize) => CHECKBOX_SIZE_BY_CONTROL_SIZE[controlSize];
+var getCheckboxSize = (size) => CHECKBOX_SIZE_BY_SIZE[size];
 var hasNodeContent = (value) => {
   if (Array.isArray(value)) {
     return value.some(hasNodeContent);
@@ -593,7 +593,7 @@ function Checkbox({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   id,
   checked,
   defaultChecked,
@@ -609,7 +609,7 @@ function Checkbox({
 }) {
   const theme = useUiKitTheme();
   const mutedText = theme.colors.textLight;
-  const indicatorSize = getCheckboxSize(controlSize);
+  const indicatorSize = getCheckboxSize(size);
   const hasLabel = hasNodeContent(label);
   const hasHint = hasNodeContent(hint);
   const hasError = hasNodeContent(error);
@@ -703,7 +703,7 @@ function Checkbox({
                   hasSecondaryContent ? "justify-start" : "justify-center"
                 ),
                 children: [
-                  label ? /* @__PURE__ */ jsxs4("span", { className: cx("font-semibold text-[var(--theme-text)]", CHECKBOX_LABEL_CLASSNAMES[controlSize]), children: [
+                  label ? /* @__PURE__ */ jsxs4("span", { className: cx("font-semibold text-[var(--theme-text)]", CHECKBOX_LABEL_CLASSNAMES[size]), children: [
                     label,
                     required ? /* @__PURE__ */ jsx3("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
                   ] }) : null,
@@ -1552,7 +1552,7 @@ function Input({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   className,
   showPasswordToggle = true,
   fileButtonLabel,
@@ -1566,8 +1566,8 @@ function Input({
   ...rest
 }) {
   useUiKitTheme();
-  const controlMetrics = getControlMetrics(controlSize);
-  const passwordToggleMetrics = getPasswordToggleMetrics(controlSize);
+  const controlMetrics = getControlMetrics(size);
+  const passwordToggleMetrics = getPasswordToggleMetrics(size);
   const generatedId = useId2();
   const inputId = id != null ? id : generatedId;
   const fileInputRef = useRef2(null);
@@ -1601,16 +1601,16 @@ function Input({
   const showUploadLabel = hasFileButtonLabel && !hasSelectedFiles;
   const passwordLockIconSize = passwordToggleMetrics.iconSize + 2;
   const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
-  const leadingIconInset = getControlLeadingIconInset(controlSize);
+  const leadingIconInset = getControlLeadingIconInset(size);
   const controlTextNudgeStyle = getControlTextNudgeStyle();
   const hasExternalError = error !== void 0 && error !== null && error !== "";
   const resolvedError = hasExternalError ? error : validationError;
   const hasResolvedError = resolvedError !== void 0 && resolvedError !== null && resolvedError !== "";
   const fileSelectionText = selectedFileNames.length === 0 ? placeholder != null ? placeholder : "" : selectedFileNames.length === 1 ? selectedFileNames[0] : `${selectedFileNames.length} files selected`;
   const fileIconSize = Math.max(controlMetrics.fontSize + 3, 16);
-  const fileTriggerWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
-  const leadingAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
-  const passwordAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, passwordLockIconSize);
+  const fileTriggerWidth = getControlLeadingAdornmentWidth(size, fileIconSize);
+  const leadingAdornmentWidth = getControlLeadingAdornmentWidth(size, fileIconSize);
+  const passwordAdornmentWidth = getControlLeadingAdornmentWidth(size, passwordLockIconSize);
   const defaultLeadingIcon = isEmailField ? /* @__PURE__ */ jsx6(EmailIcon, { size: fileIconSize }) : isLoginField ? /* @__PURE__ */ jsx6(LoginIcon, { size: fileIconSize }) : null;
   const resolvedLeadingIcon = icon != null ? icon : defaultLeadingIcon;
   const hasLeadingIcon = isRenderableNode(resolvedLeadingIcon);
@@ -1621,8 +1621,8 @@ function Input({
     "w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
     "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
     "duration-150 placeholder:text-[var(--theme-textLight)]",
-    FIELD_HEIGHT_CLASSNAMES[controlSize],
-    FIELD_TEXT_CLASSNAMES[controlSize],
+    FIELD_HEIGHT_CLASSNAMES[size],
+    FIELD_TEXT_CLASSNAMES[size],
     hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
     disabled ? "cursor-not-allowed opacity-70" : "cursor-text"
   );
@@ -1632,15 +1632,15 @@ function Input({
     "border border-solid bg-[var(--theme-surface)] text-[var(--theme-text)] text-left",
     "transition-[border-color,box-shadow,background-color] duration-150",
     "shadow-[0px_4px_5px_var(--theme-shadow)]",
-    FIELD_HEIGHT_CLASSNAMES[controlSize],
-    FIELD_TEXT_CLASSNAMES[controlSize],
+    FIELD_HEIGHT_CLASSNAMES[size],
+    FIELD_TEXT_CLASSNAMES[size],
     hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
     disabled ? "opacity-70" : null
   );
   const adornedInputClassName = cx(
     "h-full min-w-0 flex-1 border-0 bg-transparent text-[var(--theme-text)] outline-none",
     "placeholder:text-[var(--theme-textLight)]",
-    FIELD_TEXT_CLASSNAMES[controlSize],
+    FIELD_TEXT_CLASSNAMES[size],
     disabled ? "cursor-not-allowed" : "cursor-text"
   );
   const adornmentColorClassName = hasResolvedError ? "text-[var(--theme-negative)]" : "text-[var(--theme-textLight)]";
@@ -1704,7 +1704,7 @@ function Input({
               className: cx(
                 "inline-flex shrink-0 self-stretch whitespace-nowrap border-0 bg-transparent",
                 "items-center text-[var(--theme-text)] appearance-none",
-                FIELD_TEXT_CLASSNAMES[controlSize],
+                FIELD_TEXT_CLASSNAMES[size],
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 showUploadLabel ? "justify-start font-bold" : "justify-center"
               ),
@@ -1752,7 +1752,7 @@ function Input({
                 {
                   className: cx(
                     "flex h-full min-w-0 flex-1 items-center overflow-hidden text-ellipsis whitespace-nowrap",
-                    FIELD_TEXT_CLASSNAMES[controlSize],
+                    FIELD_TEXT_CLASSNAMES[size],
                     hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]"
                   ),
                   style: {
@@ -1813,7 +1813,7 @@ function Input({
             className: cx(adornedInputClassName, className),
             "aria-invalid": hasResolvedError,
             style: {
-              padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
+              padding: getTextInputPadding(size, { leadingPadding: leadingContentGap })
             }
           }
         )
@@ -1854,7 +1854,7 @@ function Input({
             className: cx(adornedInputClassName, className),
             "aria-invalid": hasResolvedError,
             style: {
-              padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
+              padding: getTextInputPadding(size, { leadingPadding: leadingContentGap })
             }
           }
         )
@@ -1870,10 +1870,10 @@ function Input({
       disabled,
       onChange: handleValidatedInputChange,
       "aria-invalid": hasResolvedError,
-      className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[controlSize], className),
+      className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[size], className),
       style: {
         boxShadow: "0px 4px 5px var(--theme-shadow)",
-        padding: getTextInputPadding(controlSize),
+        padding: getTextInputPadding(size),
         ...style
       }
     }
@@ -2120,7 +2120,7 @@ function DatePicker({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   value,
   defaultValue,
   onChange,
@@ -2154,8 +2154,8 @@ function DatePicker({
 }) {
   var _a;
   useUiKitTheme();
-  const controlMetrics = getControlMetrics(controlSize);
-  const accessoryMetrics = ACCESSORY_METRICS_BY_SIZE[controlSize];
+  const controlMetrics = getControlMetrics(size);
+  const accessoryMetrics = ACCESSORY_METRICS_BY_SIZE[size];
   const generatedIdRef = useRef3();
   const visibleInputRef = useRef3(null);
   const nativeInputRef = useRef3(null);
@@ -2213,8 +2213,8 @@ function DatePicker({
   const canOpenPicker = !disabled && !readOnly && !hasConfigurationConflict;
   const canClear = clearable && !disabled && !readOnly && !required && hasAnyValue;
   const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
-  const leadingIconInset = getControlLeadingIconInset(controlSize);
-  const pickerAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, accessoryMetrics.iconSize);
+  const leadingIconInset = getControlLeadingIconInset(size);
+  const pickerAdornmentWidth = getControlLeadingAdornmentWidth(size, accessoryMetrics.iconSize);
   const trailingButtonCount = Number(canClear);
   const trailingInset = trailingButtonCount > 0 ? Math.max(
     0,
@@ -2226,8 +2226,8 @@ function DatePicker({
     "w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
     "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
     "duration-150 placeholder:text-[var(--theme-textLight)]",
-    FIELD_HEIGHT_CLASSNAMES2[controlSize],
-    FIELD_TEXT_CLASSNAMES2[controlSize],
+    FIELD_HEIGHT_CLASSNAMES2[size],
+    FIELD_TEXT_CLASSNAMES2[size],
     resolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
     disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
   );
@@ -2235,15 +2235,15 @@ function DatePicker({
     "box-border flex w-full items-center gap-0 overflow-hidden rounded-2xl",
     "bg-[var(--theme-surface)] text-[var(--theme-text)]",
     "transition-[border-color,box-shadow,background-color] duration-150",
-    FIELD_HEIGHT_CLASSNAMES2[controlSize],
-    FIELD_TEXT_CLASSNAMES2[controlSize],
+    FIELD_HEIGHT_CLASSNAMES2[size],
+    FIELD_TEXT_CLASSNAMES2[size],
     disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
   );
   const integratedFieldBoxShadow = getInsetBorderShadow(fieldBorderColor, resolvedError ? { outerShadow: "0 0 0 3px var(--theme-negative)", componentShadow: "0px 4px 5px var(--theme-shadow)" } : { componentShadow: "0px 4px 5px var(--theme-shadow)" });
   const integratedInputClassName = cx(
     "h-full w-full box-border border-0 bg-transparent text-[var(--theme-text)]",
     "outline-none placeholder:text-[var(--theme-textLight)]",
-    FIELD_TEXT_CLASSNAMES2[controlSize],
+    FIELD_TEXT_CLASSNAMES2[size],
     disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
   );
   const pickerAdornmentClassName = cx(
@@ -2488,7 +2488,7 @@ function DatePicker({
               ...visibleInputProps,
               className: cx(integratedInputClassName, className),
               style: {
-                padding: getTextInputPadding(controlSize, {
+                padding: getTextInputPadding(size, {
                   leadingPadding: leadingContentGap,
                   trailingPadding: controlMetrics.paddingX + trailingInset
                 })
@@ -2505,9 +2505,9 @@ function DatePicker({
       "input",
       {
         ...visibleInputProps,
-        className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[controlSize], className),
+        className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[size], className),
         style: {
-          padding: getTextInputPadding(controlSize, {
+          padding: getTextInputPadding(size, {
             trailingPadding: controlMetrics.paddingX + trailingInset
           }),
           boxShadow: resolvedError ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",
@@ -2644,7 +2644,7 @@ function SelectBase({
   hint,
   error,
   placeholder,
-  controlSize = "sm",
+  size = "sm",
   id,
   disabled,
   style,
@@ -2717,7 +2717,7 @@ function SelectBase({
   const visibleEnabledValues = visibleEnabledOptions.map((option) => option.value);
   const selectedValuesKey = selectedValues.join("\0");
   const visibleEnabledValuesKey = visibleEnabledValues.join("\0");
-  const indicatorOffset = getSelectIndicatorOffset(controlSize);
+  const indicatorOffset = getSelectIndicatorOffset(size);
   const controlTextNudgeStyle = getSelectTextNudgeStyle();
   const listboxId = `${resolvedId}-listbox`;
   const searchInputId = `${resolvedId}-search`;
@@ -2737,8 +2737,8 @@ function SelectBase({
     "m-0 box-border flex w-full min-w-0 items-center justify-between gap-3 rounded-2xl border-0 appearance-none",
     "bg-[var(--theme-surface)] outline-none transition-[border-color,box-shadow,background-color]",
     "duration-150 text-left",
-    FIELD_HEIGHT_CLASSNAMES3[controlSize],
-    FIELD_TEXT_CLASSNAMES3[controlSize],
+    FIELD_HEIGHT_CLASSNAMES3[size],
+    FIELD_TEXT_CLASSNAMES3[size],
     hasSelection ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]",
     isTriggerDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
@@ -3128,7 +3128,7 @@ function SelectBase({
             onBlur: handleTriggerBlur,
             onKeyDown: handleTriggerKeyDown,
             style: {
-              padding: getSelectControlPadding(controlSize),
+              padding: getSelectControlPadding(size),
               boxShadow: triggerBoxShadow,
               ...style,
               ...isTriggerDisabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
@@ -3335,7 +3335,7 @@ function SelectBase({
                                 className: cx(
                                   "flex w-full min-w-0 items-center justify-between gap-3 rounded-xl box-border",
                                   "transition-[background-color,color] duration-150",
-                                  OPTION_PADDING_CLASSNAMES[controlSize],
+                                  OPTION_PADDING_CLASSNAMES[size],
                                   option.disabled ? "cursor-not-allowed text-[var(--theme-secondary)]" : "cursor-pointer",
                                   !option.disabled && isActive ? "text-[var(--theme-onPrimary)]" : null,
                                   !option.disabled && !isActive ? "text-[var(--theme-text)]" : null,
@@ -3804,7 +3804,7 @@ import { useEffect as useEffect8, useId as useId4, useRef as useRef6, useState a
 
 // src/componentsBase/table/utils.ts
 import { isValidElement as isValidElement3 } from "react";
-var DEFAULT_COLLAPSE_BELOW = 420;
+var DEFAULT_COLLAPSE_BELOW = 768;
 var DEFAULT_MAX_INLINE_ACTIONS = 2;
 var DEFAULT_PAGE_SIZE = 10;
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
@@ -4327,7 +4327,7 @@ function TableBase({
   const alternateSurfaceColor = theme.colors.background;
   const scrollRegionId = useId4().replace(/:/g, "");
   const containerRef = useRef6(null);
-  const [containerWidth, setContainerWidth] = useState7(null);
+  const [viewportWidth, setViewportWidth] = useState7(null);
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState7(false);
   const resolvedLabels = mergeTableLabels({
     ...labels != null ? labels : {},
@@ -4335,8 +4335,8 @@ function TableBase({
   });
   const normalizedPage = clampPage(page, totalPages);
   const normalizedPageSizeOptions = sanitizePageSizeOptions(pageSizeOptions, pageSize);
-  const isCollapsed = containerWidth !== null ? containerWidth < collapseBelow : false;
-  const mobileGridColumnCount = containerWidth !== null && containerWidth < 520 ? 1 : 2;
+  const isCollapsed = viewportWidth !== null ? viewportWidth < collapseBelow : false;
+  const mobileGridColumnCount = viewportWidth !== null && viewportWidth < 520 ? 1 : 2;
   const canGoToPreviousPage = normalizedPage > 1;
   const canGoToNextPage = normalizedPage < Math.max(1, totalPages);
   const canGoToFirstPage = canGoToPreviousPage;
@@ -4371,31 +4371,16 @@ function TableBase({
     borderLeft: `1px solid ${softBorderColor}`
   });
   useEffect8(() => {
-    const element = containerRef.current;
-    if (!element) {
+    if (typeof window === "undefined") {
       return;
     }
-    const setWidthFromElement = (nextWidth) => {
-      const measuredWidth = nextWidth != null ? nextWidth : element.getBoundingClientRect().width;
-      setContainerWidth(measuredWidth > 0 ? measuredWidth : null);
+    const updateViewportWidth = () => {
+      setViewportWidth(window.innerWidth);
     };
-    setWidthFromElement();
-    if (typeof ResizeObserver === "undefined") {
-      const handleResize = () => {
-        setWidthFromElement(window.innerWidth);
-      };
-      window.addEventListener("resize", handleResize);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-      };
-    }
-    const observer = new ResizeObserver((entries) => {
-      const [entry] = entries;
-      setWidthFromElement(entry == null ? void 0 : entry.contentRect.width);
-    });
-    observer.observe(element);
+    updateViewportWidth();
+    window.addEventListener("resize", updateViewportWidth);
     return () => {
-      observer.disconnect();
+      window.removeEventListener("resize", updateViewportWidth);
     };
   }, []);
   const actionButtonBaseStyle = (tone, disabled, iconOnly) => ({
@@ -4652,7 +4637,7 @@ function TableBase({
         !hasRows && (!loading || error) ? renderEmptyState() : null,
         hasRows ? isCollapsed ? /* @__PURE__ */ jsx13("div", { role: "list", "aria-label": ariaLabel, className: "flex flex-col gap-3.5", children: items.map((item, rowIndex) => {
           const rowActions = renderActions(item, rowIndex);
-          const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : alternateSurfaceColor;
+          const rowBackgroundColor = theme.colors.surface;
           return /* @__PURE__ */ jsxs11(
             "article",
             {
@@ -4824,7 +4809,7 @@ function TableBase({
                           width: column.width,
                           minWidth: column.minWidth
                         },
-                        children: column.label
+                        children: !column.hideLabel ? column.label : null
                       },
                       getColumnKey(column, columnIndex)
                     );
@@ -5274,7 +5259,7 @@ function Textarea({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   id,
   disabled,
   style,
@@ -5295,7 +5280,7 @@ function Textarea({
         "duration-150 placeholder:opacity-100 disabled:cursor-not-allowed",
         "placeholder:text-[var(--theme-textLight)]",
         error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
-        TEXTAREA_SIZE_CLASSNAMES[controlSize]
+        TEXTAREA_SIZE_CLASSNAMES[size]
       ),
       style: {
         boxShadow: error ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",