@companycam/slab-web 2.1.0 → 2.1.2

package/lib/AssetThumbnail/AssetThumbnail.d.ts

@@ -1,12 +1,12 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
-type ButtonAction = Omit<ComponentPropsWithRef<'button'>, 'children'> & {
+type ButtonAction = Readonly<Omit<ComponentPropsWithRef<'button'>, 'children'> & {
     accessibilityLabel: string;
-};
+}>;
 export type AssetThumbnailProps = ComponentPropsWithRef<'div'> & {
-    image: {
+    image: Readonly<{
         src: string;
         alt?: string;
-    };
+    }>;
     /**
      * **Render a button that overlays the image**
      *
@@ -16,23 +16,24 @@ export type AssetThumbnailProps = ComponentPropsWithRef<'div'> & {
      * */
     buttonAction?: ButtonAction;
     /** Content slot - opt in to reveal content on hover/focus */
-    contentTopLeft?: {
+    contentTopLeft?: Readonly<{
         content: ReactNode;
         shouldShowOnHover: boolean;
-    };
+    }>;
     /** Content slot - opt in to reveal content on hover/focus */
-    contentTopRight?: {
+    contentTopRight?: Readonly<{
         content: ReactNode;
         shouldShowOnHover: boolean;
-    };
+    }>;
     /** Content slot */
     contentBottomLeft?: ReactNode;
     /** Content slot */
     contentBottomRight?: ReactNode;
-    /** **Render content below the thumbnail image**
-     *
-     * Accepts `string` or `ReactNode`. (Strings will be styled for you.) */
-    contentAfter?: string | ReactNode;
+    /**
+     * **Render content below the thumbnail image**
+     * (`string` will be styled automatically)
+     */
+    contentAfter?: ReactNode;
     /** Adds visual state to indicate image is selected */
     isSelected?: boolean;
     /** Adds visual state to indicate thumbnail previews a video */

package/lib/Avatar/Avatar.d.ts

@@ -17,10 +17,10 @@ export type AvatarProps = HTMLAvatarProps & {
     size?: number | 'xsmall' | 'small' | 'medium' | 'large';
     /** @deprecated - use `data-testid` */
     testId?: string;
-    tooltip?: {
+    tooltip?: Readonly<{
         shouldShow?: boolean;
         placement?: TooltipProps['placement'];
-    };
+    }>;
 };
 export declare const Avatar: import('react').ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
 export default Avatar;

package/lib/AvatarGroup/AvatarGroup.d.ts

@@ -4,9 +4,9 @@ type HTMLUnorderedListProps = ComponentPropsWithRef<'ul'>;
 type FilteredAvatarProps = Omit<AvatarProps, 'design' | 'size' | 'tooltip'>;
 export type AvatarGroupProps = HTMLUnorderedListProps & {
     /** [Avatar](../?path=/docs/avatar--docs) */
-    avatars: FilteredAvatarProps[];
+    avatars: readonly FilteredAvatarProps[];
     /** Render content at the end of the list (e.g., `+2`) */
-    renderListFooter?: (hiddenAvatars: FilteredAvatarProps[]) => ReactNode;
+    renderListFooter?: (hiddenAvatars: readonly FilteredAvatarProps[]) => ReactNode;
     /** [Avatar](../?path=/docs/avatar--docs) sizes */
     size?: AvatarProps['size'];
 };

package/lib/Billboard/Billboard.d.ts

@@ -1,16 +1,16 @@
 import { ComponentPropsWithRef, CSSProperties, ElementType } from 'react';
 import { ButtonProps } from '../Button/Button';
 export type BillboardIconColor = 'success' | 'caution' | 'destroy' | 'info';
-export type BillboardImage = {
+export type BillboardImage = Readonly<{
     src: string;
     alt: string;
-    imageContainerStyle?: CSSProperties;
-};
-type Action<C extends ElementType> = ButtonProps<C> & {
+    imageContainerStyle?: Readonly<CSSProperties>;
+}>;
+type Action<C extends ElementType> = ButtonProps<C> & Readonly<{
     label: string;
     'data-testid'?: string;
     children?: 'never';
-};
+}>;
 type HTMLDivProps = ComponentPropsWithRef<'div'>;
 export type BillboardProps<PrimaryActionButtonComponent extends ElementType = 'button', SecondaryActionButtonComponent extends ElementType = 'button'> = HTMLDivProps & {
     color?: BillboardIconColor;

package/lib/Button/Button.d.ts

@@ -15,20 +15,20 @@ type StyledButtonBaseProps = {
     $color: ButtonColor;
     $size: ButtonSize;
 };
-export type IconComponentProps = ReactElement<{
+export type IconComponentProps = Readonly<ReactElement<{
     style?: CSSProperties;
-}>;
+}>>;
 /** explicit, static props of the Slab button that will override any polyporphic props */
 export type BaseButtonProps = {
     ccMargin?: StyledButtonBaseProps['$ccMargin'];
     color?: StyledButtonBaseProps['$color'];
     design?: StyledButtonBaseProps['$design'];
     disabled?: boolean;
-    icon?: {
+    icon?: Readonly<{
         component?: IconComponentProps;
         name?: string;
         position?: 'before' | 'after';
-    };
+    }>;
     loading?: boolean;
     size?: StyledButtonBaseProps['$size'];
 };

package/lib/Card/Card.d.ts

@@ -3,7 +3,7 @@ export type HTMLCardProps = Omit<ComponentPropsWithRef<'button'> & ComponentProp
 export type CardProps = HTMLCardProps & {
     children?: ReactNode;
     /** Style hook for the _interior_ card container (border, background, etc.) */
-    containerStyle?: CSSProperties;
+    containerStyle?: Readonly<CSSProperties>;
     contentAction?: ReactNode;
     contentBefore?: ReactNode;
     contentAfter?: ReactNode;

package/lib/ChipFilter/ChipFilter.d.ts

@@ -3,10 +3,10 @@ import { GetChipProps } from '../shared/types';
 type HTMLSpanProps = ComponentPropsWithRef<'span'>;
 type HTMLButtonProps = ComponentPropsWithRef<'button'>;
 type FilteredChipProps = Omit<GetChipProps, 'contentAfter'>;
-type CloseAction = HTMLButtonProps & {
+type CloseAction = Readonly<HTMLButtonProps & {
     accessibilityLabel: string;
     'data-testid'?: string;
-};
+}>;
 export type ChipFilterProps = HTMLSpanProps & FilteredChipProps & {
     closeAction?: CloseAction;
 };

package/lib/Comment/Comment.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { AvatarProps } from '../Avatar/Avatar';
 type HTMLDivProps = ComponentPropsWithRef<'div'>;
-type CommentAvatar = Omit<AvatarProps, 'size' | 'ccMargin'>;
+type CommentAvatar = Readonly<Omit<AvatarProps, 'size' | 'ccMargin'>>;
 export type CommentProps = HTMLDivProps & {
     /** Provides access to most of [Avatar's props](/docs/avatar--docs) */
     avatar: CommentAvatar;

package/lib/Drawer/Drawer.d.ts

@@ -9,13 +9,13 @@ export type DrawerProps = ComponentPropsWithRef<'div'> & {
     /** The content of the Drawer */
     children?: ReactNode;
     /** Target content container (background color, shadow, border radius, padding, etc.) */
-    containerStyle?: CSSProperties;
+    containerStyle?: Readonly<CSSProperties>;
     /** Where to mount the Drawer portal */
     mountNodeId?: string;
     /** Offset from the edge of the viewport/window, using spacing design tokens (`s`, `m`, `l`, etc.) */
     offset?: Spacing;
     /** Target the backdrop container if `shouldShowBackdrop` */
-    backDropStyle?: CSSProperties;
+    backDropStyle?: Readonly<CSSProperties>;
     /** Side of screen the drawer is anchored to */
     placement?: 'top' | 'bottom' | 'left' | 'right';
     /** Whether to show the backdrop and trap focus inside drawer */

package/lib/Grid/Grid.d.ts

@@ -2,24 +2,24 @@ import { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
 import { CellSize, Spacing } from '../shared/types';
 type HTMLDivProps = ComponentPropsWithRef<'div'>;
 type ItemAlign = 'start' | 'center' | 'end';
-type Breakpoint = {
-    cols: CellSize[];
+type Breakpoint = Readonly<{
+    cols: readonly CellSize[];
     minWidth?: number;
     maxWidth?: number;
     colAlign?: ItemAlign;
     colGap?: Spacing;
     rowAlign?: ItemAlign;
     rowGap?: Spacing;
-    rows?: CellSize[];
-    areas?: string[];
-};
+    rows?: readonly CellSize[];
+    areas?: readonly string[];
+}>;
 export type GridProps = HTMLDivProps & {
     children: ReactNode;
     id: string;
-    breakpoints: Breakpoint[];
+    breakpoints: readonly Breakpoint[];
     debug?: boolean;
-    gridContainerStyle?: CSSProperties;
-    gridItemStyle?: CSSProperties;
+    gridContainerStyle?: Readonly<CSSProperties>;
+    gridItemStyle?: Readonly<CSSProperties>;
 };
 /**
 - Uses CSS [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) to change layouts based on the **width of the grid's container**

package/lib/InputCheckboxGroup/InputCheckboxGroup.d.ts

@@ -1,11 +1,11 @@
 import { ChangeEvent } from 'react';
 import { InputGroupProps } from '../shared/InputGroup/InputGroup';
 import { InputCheckboxProps } from '../InputCheckbox/InputCheckbox';
-type FilteredInputCheckboxProps = Omit<InputCheckboxProps, 'id' | 'name' | 'onChange'>;
+type FilteredInputCheckboxProps = Readonly<Omit<InputCheckboxProps, 'id' | 'name' | 'onChange'>>;
 export type InputCheckboxGroupProps = InputGroupProps & {
-    options: FilteredInputCheckboxProps[];
+    options: readonly FilteredInputCheckboxProps[];
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    selectedValues: string[];
+    selectedValues: readonly string[];
 };
 /**
  * - InputCheckboxGroup is a controlled component: You must provide an `onChange` handler to update `selectedValues`.

package/lib/InputDate/InputDate.d.ts

@@ -11,8 +11,8 @@ export type InputDateProps = DatePickerProps & UseMessageProps & {
     placement?: Placement;
     placeholder?: string;
     size?: 'medium' | 'large';
-    style?: CSSProperties;
-    months: string[];
+    style?: Readonly<CSSProperties>;
+    months: readonly string[];
 };
 /**
 - [react-datepicker docs](https://reactdatepicker.com/)

package/lib/InputDate/InputDateHeader.d.ts

@@ -1,6 +1,6 @@
 import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
 type InputDateHeaderProps = ReactDatePickerCustomHeaderProps & {
-    months: string[];
+    months: readonly string[];
 };
 export declare function InputDateHeader({ date, months, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }: InputDateHeaderProps): import("react/jsx-runtime").JSX.Element;
 export default InputDateHeader;

package/lib/InputDate/InputDateSelect.d.ts

@@ -2,7 +2,7 @@ import { ChangeEventHandler, ComponentPropsWithRef } from 'react';
 type HTMLSelectProps = ComponentPropsWithRef<'select'>;
 export type InputDateSelectProps = HTMLSelectProps & {
     label: string;
-    options: string[];
+    options: readonly string[];
     value: string;
     onChange: ChangeEventHandler<HTMLSelectElement>;
 };

package/lib/InputFile/InputFile.d.ts

@@ -4,25 +4,25 @@ import { UseMessageProps } from '../shared/types';
 type HTMLInputProps = Omit<ComponentPropsWithRef<'input'>, 'onDrop'>;
 export type DropEvent = DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement> | DragEvent;
 export type InputFileProps = HTMLInputProps & UseMessageProps & {
-    onDrop: (acceptedFiles: File[], rejectedFiles: File[], event: DropEvent) => void;
-    onDropAccepted?: (acceptedFiles: File[]) => void;
-    onDropRejected?: (rejectedFiles: File[]) => void;
-    messages?: string[];
+    onDrop: (acceptedFiles: readonly File[], rejectedFiles: readonly File[], event: DropEvent) => void;
+    onDropAccepted?: (acceptedFiles: readonly File[]) => void;
+    onDropRejected?: (rejectedFiles: readonly File[]) => void;
+    messages?: readonly string[];
     accept: string;
     multiple?: boolean;
-    loading?: {
+    loading?: Readonly<{
         isVisible: boolean;
         component?: ReactNode;
-    };
+    }>;
     maxSize?: number;
-    dropZoneStyle?: CSSProperties;
-    billboard?: {
+    dropZoneStyle?: Readonly<CSSProperties>;
+    billboard?: Readonly<{
         title?: BillboardProps['title'];
         iconName?: BillboardProps['iconName'];
         message?: BillboardProps['message'];
         color?: BillboardIconColor;
         image?: BillboardImage;
-    };
+    }>;
     fileUploadButtonLabel?: string;
 };
 /**

package/lib/InputRadioGroup/InputRadioGroup.d.ts

@@ -1,9 +1,9 @@
 import { ChangeEvent } from 'react';
 import { InputGroupProps } from '../shared/InputGroup/InputGroup';
 import { InputRadioProps } from '../InputRadio/InputRadio';
-type FilteredInputRadioProps = Omit<InputRadioProps, 'id' | 'name' | 'onChange'>;
+type FilteredInputRadioProps = Readonly<Omit<InputRadioProps, 'id' | 'name' | 'onChange'>>;
 export type InputRadioGroupProps = InputGroupProps & {
-    options: FilteredInputRadioProps[];
+    options: readonly FilteredInputRadioProps[];
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
     selectedValue: string;
 };

package/lib/InputSelectHTML/InputSelectHTML.d.ts

@@ -3,11 +3,11 @@ import { UseMessageProps } from '../shared/types';
 type FilteredHTMLSelectProps = Omit<ComponentPropsWithRef<'select'>, 'children' | 'multiple'>;
 export type InputSelectHTMLProps = FilteredHTMLSelectProps & UseMessageProps & {
     label: ReactNode;
-    options: {
+    options: readonly Readonly<{
         label: string;
         value: string;
         disabled?: boolean;
-    }[];
+    }>[];
     hideLabel?: boolean;
     inputSize?: 'medium' | 'large';
 };

package/lib/Lottie/Lottie.d.ts

@@ -11,7 +11,7 @@ export type LottieProps = LottieWebProps & {
     /** Simpler CSS-inspired API for lottie-web's `preserveAspectRatio`. You can still pass in `rendererSettings { preserveAspectRatio }` for more granular control. */
     objectFit?: 'contain' | 'cover' | 'fill';
     /** Set the width, height, etc. of the container, if needed */
-    style?: CSSProperties;
+    style?: Readonly<CSSProperties>;
     /** Applies a test id to the container */
     'data-testid'?: string;
 };

package/lib/Modal/Modal.d.ts

@@ -1,6 +1,16 @@
 import { CSSProperties, ReactNode } from 'react';
 type AsProp = keyof HTMLElementTagNameMap;
-export type ModalProps = {
+type ModalFooterProps = {
+    /** replace footer or pass `null` for no footer */
+    footerComponent?: ReactNode;
+    /** content slot for buttons in footer */
+    footerActions?: ReactNode;
+    /** content slot on left side of footer */
+    footerContentBefore?: ReactNode;
+    /** target footer container */
+    footerStyle?: Readonly<CSSProperties>;
+};
+export type ModalProps = ModalFooterProps & {
     isOpen: boolean;
     onClose: () => void;
     title: string;
@@ -9,25 +19,17 @@ export type ModalProps = {
     /** rendered in main content area */
     children?: ReactNode;
     /** target modal container */
-    containerStyle?: CSSProperties;
+    containerStyle?: Readonly<CSSProperties>;
     /** for automation testing */
     'data-testid__close-button'?: string;
     /** target main content area */
-    bodyStyle?: CSSProperties;
+    bodyStyle?: Readonly<CSSProperties>;
     /** target header container */
-    headerStyle?: CSSProperties;
-    /** target footer container */
-    footerStyle?: CSSProperties;
+    headerStyle?: Readonly<CSSProperties>;
     /** replace header or pass `null` for no header */
     headerComponent?: ReactNode | null;
     /** content slot below title in header */
     headerContentAfter?: ReactNode;
-    /** replace footer or pass `null` for no footer */
-    footerComponent?: ReactNode | null;
-    /** content slot for buttons in footer */
-    footerActions?: ReactNode;
-    /** content slot on left side of footer */
-    footerContentBefore?: ReactNode;
     /** `small (600)` | `medium (900)` | `large (full)` */
     size?: 'small' | 'medium' | 'large';
 };
@@ -35,6 +37,7 @@ export type ModalProps = {
  * - `Modal` is a controlled component; you must manage the `isOpen` state and provide an `onClose` handler
  * - `title` is required for accessibility. If you replace or provide no header via props, it will be read via `aria-label`
  * - The modal body (main content area) has padding is scrollable by default. Overwrite via `bodyStyle`.
+ * - Use `design="outline"` for non-primary footer actions (e.g. Cancel) to visually distinguish them from the primary action.
  */
 export declare function Modal({ isOpen, onClose, as, children, 'data-testid__close-button': dataTestIdCloseButton, bodyStyle, containerStyle, headerStyle, footerStyle, headerComponent, headerContentAfter, footerComponent, footerActions, footerContentBefore, size, title, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/lib/ProgressBar/ProgressBar.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import { ProgressProps } from '../shared/types';
 export type ProgressBarProps = ProgressProps & {
     /** Target the styles of the label */
-    labelStyle?: CSSProperties;
+    labelStyle?: Readonly<CSSProperties>;
     /** Visually hide the label */
     hideLabel?: boolean;
     size?: 'small' | 'medium';

package/lib/ProgressCircle/ProgressCircle.d.ts

@@ -13,10 +13,10 @@ type ProgressCircleSizeProps = WithSizeProp | WithCustomDiameterProp;
 export type ProgressCircleProps = ProgressProps & ProgressCircleSizeProps & {
     ccMargin?: string;
     shouldShowCompleteIcon?: boolean;
-    formatValue?: ({ value, max, }: {
+    formatValue?: ({ value, max, }: Readonly<{
         value: ProgressProps['value'];
         max: ProgressProps['max'];
-    }) => ReactNode;
+    }>) => ReactNode;
 };
 /**
 - Reads a hidden [HTML `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) to screen readers.

package/lib/Rating/Rating.d.ts

@@ -16,7 +16,7 @@ export type RatingProps = {
     onHover?: (hoveredValue: number) => void;
     /** Tracks our `size_avatar` tokens for consistent sizing */
     size?: 'xsmall' | 'small' | 'medium' | 'large';
-    style?: CSSProperties;
+    style?: Readonly<CSSProperties>;
     className?: string;
     /** Test id for automation */
     'data-testid'?: string;

package/lib/Spinner/Spinner.d.ts

@@ -21,7 +21,7 @@ export type SpinnerProps = ComponentPropsWithRef<'span'> & {
 type LayoutProps = {
     $isCentered?: boolean;
     $layout?: Layout;
-    $ccMargin?: string;
+    $ccMargin?: SpinnerProps['ccMargin'];
 };
 declare const Layout: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LayoutProps>> & string;
 /** Use Spinner when something's happening and the user needs to wait. Versatile and customizable.  */

package/lib/Table/Table.d.ts

@@ -1,19 +1,19 @@
 import { ComponentPropsWithRef } from 'react';
 import { Row, CellContext, ColumnDef, ColumnSort, OnChangeFn, SortingState } from '@tanstack/react-table';
-import { CellSize } from '../shared/types.js';
-type FilteredCellSize = Omit<CellSize, 'auto'>;
+import { CellSize } from '../shared/types';
+type FilteredCellSize = Exclude<CellSize, 'auto'>;
 type TableProps<T> = ComponentPropsWithRef<'table'> & {
-    defaultData: T[];
+    defaultData: readonly T[];
     /** Pulls in our spacing tokens for easy margin setting (e.g., `ccMargin="0 m xl"`). */
     ccMargin?: string;
-    columns: ColumnDef<T, unknown>[];
+    columns: readonly Readonly<ColumnDef<T, unknown>>[];
     /** Make sure this matches the number of `columns` */
-    columnSizes: FilteredCellSize[];
+    columnSizes: readonly FilteredCellSize[];
     /** Array of columns to sort by default, provided column id and whether or not sort should be descending */
-    defaultSortedColumns?: {
+    defaultSortedColumns?: readonly Readonly<{
         id: string;
         desc: boolean;
-    }[];
+    }>[];
     /** Enables/Disables the ability to remove sorting for the table.
      *
      * If true then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'none' -> ...
@@ -44,9 +44,9 @@ type TableProps<T> = ComponentPropsWithRef<'table'> & {
      * When this prop is provided, manual sorting is automatically enabled (useful for server-side sorting scenarios).
      * The table will not automatically sort rows and expects you to manually sort the rows before passing them to the table.
      */
-    sorting?: SortingState;
+    sorting?: readonly Readonly<ColumnSort>[];
     /** Callback for when the sorting changes */
-    onSortingChange?: (newSorting: SortingState) => void;
+    onSortingChange?: (newSorting: readonly Readonly<ColumnSort>[]) => void;
 };
 export type { CellContext, ColumnDef, ColumnSort, OnChangeFn, Row, SortingState, };
 export declare const Table: <T extends object>({ defaultSortedColumns, defaultData, ccMargin, columns, columnSizes, enableSortingRemoval, enableStickyHeaders, manualPagination, pageCount, sorting: externalSorting, onSortingChange, ...props }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/Text/Text.d.ts

@@ -13,7 +13,7 @@ export type TextProps = {
     weight?: string | number;
     display?: 'inline' | 'block';
     className?: string;
-    style?: CSSProperties;
+    style?: Readonly<CSSProperties>;
 };
 /**
 - Sensible defaults based on size, with the flexibility to render as any HTML element.

package/lib/TimeStamp/TimeStamp.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { AvatarProps } from '../Avatar/Avatar';
-type FilteredAvatarProps = Omit<AvatarProps, 'design' | 'size' | 'tooltip'>;
+type FilteredAvatarProps = Readonly<Omit<AvatarProps, 'design' | 'size' | 'tooltip'>>;
 export type TimeStampProps = ComponentPropsWithRef<'div'> & {
     /** Text for the timestamp (accepts markup, too) */
     children: ReactNode;

package/lib/shared/Buttons/IconFromSVG.d.ts

@@ -1,8 +1,10 @@
 import { ButtonSize, IconComponentProps } from '../../Button/Button';
 export type IconFromSVGProps = {
-    component: IconComponentProps;
+    component: Readonly<IconComponentProps>;
     isLoading?: boolean;
     size?: ButtonSize;
 };
-export declare const IconFromSVG: ({ component, isLoading, size, }: IconFromSVGProps) => IconComponentProps;
+export declare const IconFromSVG: ({ component, isLoading, size, }: IconFromSVGProps) => Readonly<Readonly<import('react').ReactElement<{
+    style?: import('react').CSSProperties;
+}, string | import('react').JSXElementConstructor<any>>>>;
 export default IconFromSVG;

package/lib/shared/Fieldset/Fieldset.d.ts

@@ -4,7 +4,7 @@ type HTMLFieldsetProps = ComponentPropsWithRef<'fieldset'>;
 type FilteredHTMLFieldsetProps = Omit<HTMLFieldsetProps, 'onChange'>;
 export type FieldsetProps = FilteredHTMLFieldsetProps & UseMessageProps & {
     label: ReactNode;
-    children?: ReactNode | ReactNode[];
+    children?: ReactNode;
     hideLabel?: boolean;
     testId?: string;
 };

package/lib/shared/styles.d.ts

@@ -10,6 +10,11 @@ export declare const statusStyles: (status: GetStatusProps["status"]) => {
     focusStyles: import('styled-components').RuleSet<object>;
 };
 export declare const visuallyHidden: import('styled-components').RuleSet<object>;
+/**
+ * Conversts {@linkcode CSSSpacing} values to CSS tokens.
+ *
+ * @param spacing Spacing value to be converted.
+ */
 export declare const spacingTokensToCSS: (spacing: string) => string;
 export declare const avatarSizes: {
     large: number;

package/lib/shared/types.d.ts

@@ -24,7 +24,7 @@ export type ProgressProps = ComponentPropsWithRef<'progress'> & {
     color?: keyof typeof ProgressColor;
     [key: `data-${string}`]: string;
 };
-export type CellSize = 'auto' | 'fill' | number | string;
+export type CellSize = 'auto' | 'fill' | 'masonry' | 'none' | 'subgrid' | `${'max' | 'min'}-content` | `${number}${string}` | `fit-content(${string})` | `minmax(${string})` | `repeat(${string})` | number;
 /** props applied to all polymorphic components */
 export type BasePolymorphicComponentProps<C extends ElementType> = {
     component?: C;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companycam/slab-web",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",