@homebound/beam 3.63.1 → 3.65.0

package/dist/index.d.cts

@@ -49,8 +49,11 @@ declare enum Tokens {
     ButtonGhostFg = "--b-button-ghost-fg",
     ButtonPrimaryDisabledBg = "--b-button-primary-disabled-bg",
     ButtonPrimaryDisabledFg = "--b-button-primary-disabled-fg",
+    ButtonSecondaryFg = "--b-button-secondary-fg",
     ButtonTertiaryFg = "--b-button-tertiary-fg",
     ButtonTertiaryFgPressed = "--b-button-tertiary-fg-pressed",
+    ChoiceDisabled = "--b-choice-disabled",
+    ChoiceSelected = "--b-choice-selected",
     Danger = "--b-danger",
     DangerPressed = "--b-danger-pressed",
     EnvBrandDev = "--b-env-brand-dev",
@@ -67,11 +70,15 @@ declare enum Tokens {
     FieldTextDisabled = "--b-field-text-disabled",
     FocusRingInset = "--b-focus-ring-inset",
     FocusRingMuted = "--b-focus-ring-muted",
-    ListRowBgHover = "--b-list-row-bg-hover",
     LoaderFill = "--b-loader-fill",
     LoaderSpinner = "--b-loader-spinner",
     LoaderTrack = "--b-loader-track",
-    MenuItemBgHover = "--b-menu-item-bg-hover",
+    NavGlobalItemBgActive = "--b-nav-global-item-bg-active",
+    NavGlobalItemBgHover = "--b-nav-global-item-bg-hover",
+    NavGlobalItemBgPressed = "--b-nav-global-item-bg-pressed",
+    NavGlobalText = "--b-nav-global-text",
+    NavGlobalTextActive = "--b-nav-global-text-active",
+    NavGlobalTextDisabled = "--b-nav-global-text-disabled",
     NavItemBgActive = "--b-nav-item-bg-active",
     NavItemBgHover = "--b-nav-item-bg-hover",
     NavItemBgPressed = "--b-nav-item-bg-pressed",
@@ -80,6 +87,7 @@ declare enum Tokens {
     NavTextDisabled = "--b-nav-text-disabled",
     NavTextFocusVisible = "--b-nav-text-focus-visible",
     NavTextPressed = "--b-nav-text-pressed",
+    NeutralFillHover = "--b-neutral-fill-hover",
     NeutralFillHoverStrong = "--b-neutral-fill-hover-strong",
     NeutralFillHoverSubtle = "--b-neutral-fill-hover-subtle",
     NeutralFillPressed = "--b-neutral-fill-pressed",
@@ -87,18 +95,17 @@ declare enum Tokens {
     OnPrimary = "--b-on-primary",
     OnSurface = "--b-on-surface",
     OnSurfaceMuted = "--b-on-surface-muted",
-    OnSurfaceSubtle = "--b-on-surface-subtle",
     OnSurfaceDisabled = "--b-on-surface-disabled",
     OnSurfaceRaisedHover = "--b-on-surface-raised-hover",
     OnSurfaceRaisedPressed = "--b-on-surface-raised-pressed",
-    PopoverSurface = "--b-popover-surface",
     Primary = "--b-primary",
     PrimaryHover = "--b-primary-hover",
     PrimaryPressed = "--b-primary-pressed",
     Scrim = "--b-scrim",
+    SelectionFill = "--b-selection-fill",
     SelectionIndicator = "--b-selection-indicator",
-    StatusSuccessFg = "--b-status-success-fg",
     Surface = "--b-surface",
+    SurfaceHover = "--b-surface-hover",
     SurfaceRaised = "--b-surface-raised",
     SurfaceRaisedHover = "--b-surface-raised-hover",
     SurfaceRaisedPressed = "--b-surface-raised-pressed",
@@ -4118,6 +4125,18 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     fontFamily(value: Properties["fontFamily"]): CssBuilder<T & {
         fontFamily: csstype.Property.FontFamily | undefined;
     }, S>;
+    /** Sets `width: "calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px))"; left: "var(--beam-side-nav-layout-width, 0px)"; position: "sticky"; paddingLeft: "24px"; paddingRight: "24px"`. */
+    get layoutContainer(): CssBuilder<T & {
+        width: csstype.Property.Width<string | 0> | undefined;
+    } & {
+        left: csstype.Property.Left<string | 0> | undefined;
+    } & {
+        position: csstype.Property.Position | undefined;
+    } & {
+        paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
+    } & {
+        paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
+    }, S>;
     /** Sets `transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
     get transition(): CssBuilder<T & {
         transition: csstype.Property.Transition<string> | undefined;
@@ -4790,13 +4809,13 @@ type LabelSuffixStyle = {
     optional?: string;
 };
 
-interface AvatarProps {
+type AvatarProps = {
     src: string | undefined;
     name?: string;
     size?: AvatarSize;
     showName?: boolean;
     preventTooltip?: boolean;
-}
+};
 declare function Avatar({ src, name, size, showName, preventTooltip, ...others }: AvatarProps): JSX.Element;
 type AvatarSize = "sm" | "md" | "lg" | "xl";
 
@@ -4856,7 +4875,7 @@ interface TextFieldInternalProps {
     forceHover?: boolean;
 }
 
-interface AvatarButtonProps extends AvatarProps, BeamButtonProps, BeamFocusableProps {
+type AvatarButtonProps = {
     menuTriggerProps?: AriaButtonProps;
     buttonRef?: RefObject<HTMLButtonElement>;
     /** Storybook-only visual state overrides for snapshotting pseudo-interactions. */
@@ -4865,7 +4884,7 @@ interface AvatarButtonProps extends AvatarProps, BeamButtonProps, BeamFocusableP
         focusVisible?: boolean;
         pressed?: boolean;
     };
-}
+} & AvatarProps & BeamButtonProps & BeamFocusableProps;
 declare function AvatarButton(props: AvatarButtonProps): JSX.Element;
 declare const hoverStyles: Pick<Properties, never> & {
     boxShadow: csstype.Property.BoxShadow | undefined;
@@ -5943,7 +5962,7 @@ type CardTag = {
     text: string;
     type?: TagType;
 };
-interface CardProps {
+type CardProps = {
     title: string;
     subtitle: string;
     detailContent?: ReactNode;
@@ -5959,7 +5978,7 @@ interface CardProps {
     disabled?: boolean;
     buttonMenuItems?: MenuItem[];
     tag?: CardTag;
-}
+};
 declare function Card(props: CardProps): JSX.Element;
 
 type CardSlotBase<K extends string> = {
@@ -6250,7 +6269,7 @@ type GridStyle = {
         firstContentColumn?: Properties;
     });
     /** Allows for customization of the background color used to denote an "active" row */
-    activeBgColor?: Palette;
+    activeBgColor?: BeamColor;
     /** Defines styles for the group row which holds the selected rows that have been filtered out */
     keptGroupRowCss?: Properties;
     /** Defines styles for the last row `keptGroup` to provide separation from the rest of the table */
@@ -7062,7 +7081,7 @@ interface ToggleChipsProps<T, X> {
 declare function ToggleChips<T, X extends Only<ToggleChipXss$1, X>>(props: ToggleChipsProps<T, X>): JSX.Element;
 
 type AccordionXss = Xss<Padding>;
-interface AccordionProps<X = AccordionXss> {
+type AccordionProps<X = AccordionXss> = {
     title: ReactNode;
     children: ReactNode;
     disabled?: boolean;
@@ -7087,7 +7106,7 @@ interface AccordionProps<X = AccordionXss> {
     xss?: X;
     /** Modifies the typography, padding, icon size and background color of the accordion header */
     compact?: boolean;
-}
+};
 declare function Accordion<X extends Only<AccordionXss, X>>(props: AccordionProps<X>): JSX.Element;
 type AccordionSize = "xs" | "sm" | "md" | "lg";
 
@@ -7128,10 +7147,10 @@ type AppNavSection = {
 };
 type AppNavItem = AppNavLink | AppNavGroup | AppNavSection;
 
-interface AutoSaveIndicatorProps {
+type AutoSaveIndicatorProps = {
     hideOnIdle?: boolean;
     doNotReset?: boolean;
-}
+};
 declare function AutoSaveIndicator({ hideOnIdle, doNotReset }: AutoSaveIndicatorProps): JSX.Element | null;
 
 interface AvatarGroupProps {
@@ -7315,12 +7334,12 @@ type ButtonDatePickerProps = {
 } & DatePickerProps & Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip">;
 declare function ButtonDatePicker(props: ButtonDatePickerProps): JSX.Element;
 
-interface ButtonGroupProps {
+type ButtonGroupProps = {
     buttons: ButtonGroupButton[];
     /** Disables all buttons in ButtonGroup */
     disabled?: boolean;
     size?: ButtonGroupSize;
-}
+};
 type ButtonGroupButton = {
     icon?: IconProps["icon"];
     iconColor?: IconProps["color"];
@@ -7909,7 +7928,7 @@ type RadioGroupFieldProps<K extends string> = {
  */
 declare function RadioGroupField<K extends string>(props: RadioGroupFieldProps<K>): JSX.Element;
 
-interface RichTextFieldProps extends Pick<PresentationFieldProps, "fullWidth"> {
+type RichTextFieldProps = {
     /** The initial html value to show in the trix editor. */
     value: string | undefined;
     onChange: (html: string | undefined, text: string | undefined, mergeTags: string[]) => void;
@@ -7928,7 +7947,7 @@ interface RichTextFieldProps extends Pick<PresentationFieldProps, "fullWidth"> {
     onFocus?: () => void;
     /** For rendering formatted text */
     readOnly?: boolean;
-}
+} & Pick<PresentationFieldProps, "fullWidth">;
 declare const RichTextField: (props: RichTextFieldProps) => JSX.Element;
 /**
  * Provides a simple rich text editor based on trix.
@@ -8021,7 +8040,7 @@ declare function SelectField<O extends HasIdIsh<V>, V extends Value>(props: Opti
 declare function SelectField<O extends HasNameIsh, V extends Value>(props: Optional<SelectFieldProps<O, V>, "getOptionLabel">): JSX.Element;
 declare function SelectField<O, V extends Value>(props: SelectFieldProps<O, V>): JSX.Element;
 
-interface SwitchProps {
+type SwitchProps = {
     /** Whether the element should receive focus on render. */
     autoFocus?: boolean;
     /** Whether to render a compact version of Switch */
@@ -8047,7 +8066,7 @@ interface SwitchProps {
         hovered?: boolean;
         focusVisible?: boolean;
     };
-}
+};
 declare function Switch(props: SwitchProps): JSX.Element;
 declare const switchHoverStyles: Pick<Properties, never> & {
     backgroundColor: csstype.Property.BackgroundColor | undefined;
@@ -8099,7 +8118,7 @@ type TextFieldApi = {
     focus: VoidFunction;
 };
 
-interface ToggleButtonProps {
+type ToggleButtonProps = {
     /** Input label */
     label: string;
     selected?: boolean;
@@ -8115,7 +8134,7 @@ interface ToggleButtonProps {
         pressed?: boolean;
         focusVisible?: boolean;
     };
-}
+};
 declare function ToggleButton(props: ToggleButtonProps): JSX.Element;
 /** Styles */
 declare const toggleHoverStyles: Pick<Properties, never> & {
@@ -8930,12 +8949,12 @@ type FormSectionProps = {
 /** A titled section of form content — title/description/actions row, then `fields`, then any recursively-rendered `childSections`. */
 declare function FormSection$1(props: FormSectionProps): JSX.Element;
 
-interface StaticFieldProps {
+type StaticFieldProps = {
     label: ReactNode;
     value?: string;
     children?: ReactNode;
     labelStyle?: PresentationFieldProps["labelStyle"];
-}
+};
 declare function StaticField(props: StaticFieldProps): JSX.Element;
 
 type SubmitButtonProps<T> = Omit<ButtonProps, "label"> & {
@@ -8994,13 +9013,13 @@ interface SelectToggleProps {
 /** Provides a checkbox to show/drive this row's selected state. */
 declare function SelectToggle({ id, disabled }: SelectToggleProps): JSX.Element;
 
-interface SortHeaderProps {
+type SortHeaderProps = {
     content: string;
     xss?: Properties;
     iconOnLeft?: boolean;
     sortKey: string;
     tooltipEl?: ReactNode;
-}
+};
 /**
  * Wraps column header names with up/down sorting icons.
  *
@@ -9502,7 +9521,7 @@ declare function useRightPaneContext(): RightPaneLayoutContextProps;
 
 declare function RightPaneLayout(props: {
     children: ReactElement;
-    paneBgColor?: Palette;
+    paneBgColor?: BeamColor;
     paneWidth?: number;
     defaultPaneContent?: ReactElement;
 }): JSX.Element;
@@ -9759,11 +9778,11 @@ type OffsetAndLimit = {
     limit: number;
 };
 declare const defaultPage: OffsetAndLimit;
-interface PaginationProps {
+type PaginationProps = {
     page: readonly [PageNumberAndSize, Dispatch<PageNumberAndSize>] | readonly [OffsetAndLimit, Dispatch<OffsetAndLimit>];
     totalCount: number;
     pageSizes?: number[];
-}
+};
 declare function Pagination(props: PaginationProps): JSX.Element;
 declare function toLimitAndOffset(page: PageSettings): OffsetAndLimit;
 declare function toPageNumberSize(page: PageSettings): PageNumberAndSize;
@@ -9790,7 +9809,7 @@ type SideNavProps = {
 declare function SideNav(props: SideNavProps): JSX.Element;
 
 type SnackbarNoticeTypes = "error" | "warning" | "success" | "info" | "alert";
-interface SnackbarNoticeProps {
+type SnackbarNoticeProps = {
     /** Adds action button to the right of the notice */
     action?: Pick<ButtonProps, "label" | "onClick" | "variant">;
     /** Does not allow the user to close the notice manually. Notice will fade away in 10s. Value will be ignored if 'persistent' is set to 'true'. */
@@ -9804,7 +9823,7 @@ interface SnackbarNoticeProps {
     id: string;
     /** Removes the snackbar notice from the stack */
     onClose: () => void;
-}
+};
 
 type Offset = {
     bottom?: number;
@@ -9830,17 +9849,17 @@ interface TriggerNoticeProps extends Omit<SnackbarNoticeProps, "id" | "onClose">
     onClose?: () => void;
 }
 
-interface Step {
+type Step = {
     label: string;
     state: "incomplete" | "complete" | "error";
     disabled?: boolean;
     value: string;
-}
-interface StepperProps {
+};
+type StepperProps = {
     steps: Step[];
     currentStep: Step["value"];
     onChange: (stepValue: string) => void;
-}
+};
 declare function Stepper(props: StepperProps): JSX.Element;
 
 type StepperTabProps = {
@@ -9892,7 +9911,7 @@ interface ConfirmCloseModalProps {
 /** Modal content to appear when a close checks fails */
 declare function ConfirmCloseModal(props: ConfirmCloseModalProps): JSX.Element;
 
-interface SuperDrawerContentProps {
+type SuperDrawerContentProps = {
     children: ReactNode;
     /**
      * Actions represents an array of button props with represents that different
@@ -9901,7 +9920,7 @@ interface SuperDrawerContentProps {
      * Ex: A `cancel` and `submit` button
      * */
     actions?: ButtonProps[];
-}
+};
 /**
  * Helper component to place the given children and actions into the appropriate
  * DOM format to render inside the SuperDrawer.

package/dist/index.d.ts

@@ -49,8 +49,11 @@ declare enum Tokens {
     ButtonGhostFg = "--b-button-ghost-fg",
     ButtonPrimaryDisabledBg = "--b-button-primary-disabled-bg",
     ButtonPrimaryDisabledFg = "--b-button-primary-disabled-fg",
+    ButtonSecondaryFg = "--b-button-secondary-fg",
     ButtonTertiaryFg = "--b-button-tertiary-fg",
     ButtonTertiaryFgPressed = "--b-button-tertiary-fg-pressed",
+    ChoiceDisabled = "--b-choice-disabled",
+    ChoiceSelected = "--b-choice-selected",
     Danger = "--b-danger",
     DangerPressed = "--b-danger-pressed",
     EnvBrandDev = "--b-env-brand-dev",
@@ -67,11 +70,15 @@ declare enum Tokens {
     FieldTextDisabled = "--b-field-text-disabled",
     FocusRingInset = "--b-focus-ring-inset",
     FocusRingMuted = "--b-focus-ring-muted",
-    ListRowBgHover = "--b-list-row-bg-hover",
     LoaderFill = "--b-loader-fill",
     LoaderSpinner = "--b-loader-spinner",
     LoaderTrack = "--b-loader-track",
-    MenuItemBgHover = "--b-menu-item-bg-hover",
+    NavGlobalItemBgActive = "--b-nav-global-item-bg-active",
+    NavGlobalItemBgHover = "--b-nav-global-item-bg-hover",
+    NavGlobalItemBgPressed = "--b-nav-global-item-bg-pressed",
+    NavGlobalText = "--b-nav-global-text",
+    NavGlobalTextActive = "--b-nav-global-text-active",
+    NavGlobalTextDisabled = "--b-nav-global-text-disabled",
     NavItemBgActive = "--b-nav-item-bg-active",
     NavItemBgHover = "--b-nav-item-bg-hover",
     NavItemBgPressed = "--b-nav-item-bg-pressed",
@@ -80,6 +87,7 @@ declare enum Tokens {
     NavTextDisabled = "--b-nav-text-disabled",
     NavTextFocusVisible = "--b-nav-text-focus-visible",
     NavTextPressed = "--b-nav-text-pressed",
+    NeutralFillHover = "--b-neutral-fill-hover",
     NeutralFillHoverStrong = "--b-neutral-fill-hover-strong",
     NeutralFillHoverSubtle = "--b-neutral-fill-hover-subtle",
     NeutralFillPressed = "--b-neutral-fill-pressed",
@@ -87,18 +95,17 @@ declare enum Tokens {
     OnPrimary = "--b-on-primary",
     OnSurface = "--b-on-surface",
     OnSurfaceMuted = "--b-on-surface-muted",
-    OnSurfaceSubtle = "--b-on-surface-subtle",
     OnSurfaceDisabled = "--b-on-surface-disabled",
     OnSurfaceRaisedHover = "--b-on-surface-raised-hover",
     OnSurfaceRaisedPressed = "--b-on-surface-raised-pressed",
-    PopoverSurface = "--b-popover-surface",
     Primary = "--b-primary",
     PrimaryHover = "--b-primary-hover",
     PrimaryPressed = "--b-primary-pressed",
     Scrim = "--b-scrim",
+    SelectionFill = "--b-selection-fill",
     SelectionIndicator = "--b-selection-indicator",
-    StatusSuccessFg = "--b-status-success-fg",
     Surface = "--b-surface",
+    SurfaceHover = "--b-surface-hover",
     SurfaceRaised = "--b-surface-raised",
     SurfaceRaisedHover = "--b-surface-raised-hover",
     SurfaceRaisedPressed = "--b-surface-raised-pressed",
@@ -4118,6 +4125,18 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     fontFamily(value: Properties["fontFamily"]): CssBuilder<T & {
         fontFamily: csstype.Property.FontFamily | undefined;
     }, S>;
+    /** Sets `width: "calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px))"; left: "var(--beam-side-nav-layout-width, 0px)"; position: "sticky"; paddingLeft: "24px"; paddingRight: "24px"`. */
+    get layoutContainer(): CssBuilder<T & {
+        width: csstype.Property.Width<string | 0> | undefined;
+    } & {
+        left: csstype.Property.Left<string | 0> | undefined;
+    } & {
+        position: csstype.Property.Position | undefined;
+    } & {
+        paddingLeft: csstype.Property.PaddingLeft<string | 0> | undefined;
+    } & {
+        paddingRight: csstype.Property.PaddingRight<string | 0> | undefined;
+    }, S>;
     /** Sets `transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
     get transition(): CssBuilder<T & {
         transition: csstype.Property.Transition<string> | undefined;
@@ -4790,13 +4809,13 @@ type LabelSuffixStyle = {
     optional?: string;
 };
 
-interface AvatarProps {
+type AvatarProps = {
     src: string | undefined;
     name?: string;
     size?: AvatarSize;
     showName?: boolean;
     preventTooltip?: boolean;
-}
+};
 declare function Avatar({ src, name, size, showName, preventTooltip, ...others }: AvatarProps): JSX.Element;
 type AvatarSize = "sm" | "md" | "lg" | "xl";
 
@@ -4856,7 +4875,7 @@ interface TextFieldInternalProps {
     forceHover?: boolean;
 }
 
-interface AvatarButtonProps extends AvatarProps, BeamButtonProps, BeamFocusableProps {
+type AvatarButtonProps = {
     menuTriggerProps?: AriaButtonProps;
     buttonRef?: RefObject<HTMLButtonElement>;
     /** Storybook-only visual state overrides for snapshotting pseudo-interactions. */
@@ -4865,7 +4884,7 @@ interface AvatarButtonProps extends AvatarProps, BeamButtonProps, BeamFocusableP
         focusVisible?: boolean;
         pressed?: boolean;
     };
-}
+} & AvatarProps & BeamButtonProps & BeamFocusableProps;
 declare function AvatarButton(props: AvatarButtonProps): JSX.Element;
 declare const hoverStyles: Pick<Properties, never> & {
     boxShadow: csstype.Property.BoxShadow | undefined;
@@ -5943,7 +5962,7 @@ type CardTag = {
     text: string;
     type?: TagType;
 };
-interface CardProps {
+type CardProps = {
     title: string;
     subtitle: string;
     detailContent?: ReactNode;
@@ -5959,7 +5978,7 @@ interface CardProps {
     disabled?: boolean;
     buttonMenuItems?: MenuItem[];
     tag?: CardTag;
-}
+};
 declare function Card(props: CardProps): JSX.Element;
 
 type CardSlotBase<K extends string> = {
@@ -6250,7 +6269,7 @@ type GridStyle = {
         firstContentColumn?: Properties;
     });
     /** Allows for customization of the background color used to denote an "active" row */
-    activeBgColor?: Palette;
+    activeBgColor?: BeamColor;
     /** Defines styles for the group row which holds the selected rows that have been filtered out */
     keptGroupRowCss?: Properties;
     /** Defines styles for the last row `keptGroup` to provide separation from the rest of the table */
@@ -7062,7 +7081,7 @@ interface ToggleChipsProps<T, X> {
 declare function ToggleChips<T, X extends Only<ToggleChipXss$1, X>>(props: ToggleChipsProps<T, X>): JSX.Element;
 
 type AccordionXss = Xss<Padding>;
-interface AccordionProps<X = AccordionXss> {
+type AccordionProps<X = AccordionXss> = {
     title: ReactNode;
     children: ReactNode;
     disabled?: boolean;
@@ -7087,7 +7106,7 @@ interface AccordionProps<X = AccordionXss> {
     xss?: X;
     /** Modifies the typography, padding, icon size and background color of the accordion header */
     compact?: boolean;
-}
+};
 declare function Accordion<X extends Only<AccordionXss, X>>(props: AccordionProps<X>): JSX.Element;
 type AccordionSize = "xs" | "sm" | "md" | "lg";
 
@@ -7128,10 +7147,10 @@ type AppNavSection = {
 };
 type AppNavItem = AppNavLink | AppNavGroup | AppNavSection;
 
-interface AutoSaveIndicatorProps {
+type AutoSaveIndicatorProps = {
     hideOnIdle?: boolean;
     doNotReset?: boolean;
-}
+};
 declare function AutoSaveIndicator({ hideOnIdle, doNotReset }: AutoSaveIndicatorProps): JSX.Element | null;
 
 interface AvatarGroupProps {
@@ -7315,12 +7334,12 @@ type ButtonDatePickerProps = {
 } & DatePickerProps & Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip">;
 declare function ButtonDatePicker(props: ButtonDatePickerProps): JSX.Element;
 
-interface ButtonGroupProps {
+type ButtonGroupProps = {
     buttons: ButtonGroupButton[];
     /** Disables all buttons in ButtonGroup */
     disabled?: boolean;
     size?: ButtonGroupSize;
-}
+};
 type ButtonGroupButton = {
     icon?: IconProps["icon"];
     iconColor?: IconProps["color"];
@@ -7909,7 +7928,7 @@ type RadioGroupFieldProps<K extends string> = {
  */
 declare function RadioGroupField<K extends string>(props: RadioGroupFieldProps<K>): JSX.Element;
 
-interface RichTextFieldProps extends Pick<PresentationFieldProps, "fullWidth"> {
+type RichTextFieldProps = {
     /** The initial html value to show in the trix editor. */
     value: string | undefined;
     onChange: (html: string | undefined, text: string | undefined, mergeTags: string[]) => void;
@@ -7928,7 +7947,7 @@ interface RichTextFieldProps extends Pick<PresentationFieldProps, "fullWidth"> {
     onFocus?: () => void;
     /** For rendering formatted text */
     readOnly?: boolean;
-}
+} & Pick<PresentationFieldProps, "fullWidth">;
 declare const RichTextField: (props: RichTextFieldProps) => JSX.Element;
 /**
  * Provides a simple rich text editor based on trix.
@@ -8021,7 +8040,7 @@ declare function SelectField<O extends HasIdIsh<V>, V extends Value>(props: Opti
 declare function SelectField<O extends HasNameIsh, V extends Value>(props: Optional<SelectFieldProps<O, V>, "getOptionLabel">): JSX.Element;
 declare function SelectField<O, V extends Value>(props: SelectFieldProps<O, V>): JSX.Element;
 
-interface SwitchProps {
+type SwitchProps = {
     /** Whether the element should receive focus on render. */
     autoFocus?: boolean;
     /** Whether to render a compact version of Switch */
@@ -8047,7 +8066,7 @@ interface SwitchProps {
         hovered?: boolean;
         focusVisible?: boolean;
     };
-}
+};
 declare function Switch(props: SwitchProps): JSX.Element;
 declare const switchHoverStyles: Pick<Properties, never> & {
     backgroundColor: csstype.Property.BackgroundColor | undefined;
@@ -8099,7 +8118,7 @@ type TextFieldApi = {
     focus: VoidFunction;
 };
 
-interface ToggleButtonProps {
+type ToggleButtonProps = {
     /** Input label */
     label: string;
     selected?: boolean;
@@ -8115,7 +8134,7 @@ interface ToggleButtonProps {
         pressed?: boolean;
         focusVisible?: boolean;
     };
-}
+};
 declare function ToggleButton(props: ToggleButtonProps): JSX.Element;
 /** Styles */
 declare const toggleHoverStyles: Pick<Properties, never> & {
@@ -8930,12 +8949,12 @@ type FormSectionProps = {
 /** A titled section of form content — title/description/actions row, then `fields`, then any recursively-rendered `childSections`. */
 declare function FormSection$1(props: FormSectionProps): JSX.Element;
 
-interface StaticFieldProps {
+type StaticFieldProps = {
     label: ReactNode;
     value?: string;
     children?: ReactNode;
     labelStyle?: PresentationFieldProps["labelStyle"];
-}
+};
 declare function StaticField(props: StaticFieldProps): JSX.Element;
 
 type SubmitButtonProps<T> = Omit<ButtonProps, "label"> & {
@@ -8994,13 +9013,13 @@ interface SelectToggleProps {
 /** Provides a checkbox to show/drive this row's selected state. */
 declare function SelectToggle({ id, disabled }: SelectToggleProps): JSX.Element;
 
-interface SortHeaderProps {
+type SortHeaderProps = {
     content: string;
     xss?: Properties;
     iconOnLeft?: boolean;
     sortKey: string;
     tooltipEl?: ReactNode;
-}
+};
 /**
  * Wraps column header names with up/down sorting icons.
  *
@@ -9502,7 +9521,7 @@ declare function useRightPaneContext(): RightPaneLayoutContextProps;
 
 declare function RightPaneLayout(props: {
     children: ReactElement;
-    paneBgColor?: Palette;
+    paneBgColor?: BeamColor;
     paneWidth?: number;
     defaultPaneContent?: ReactElement;
 }): JSX.Element;
@@ -9759,11 +9778,11 @@ type OffsetAndLimit = {
     limit: number;
 };
 declare const defaultPage: OffsetAndLimit;
-interface PaginationProps {
+type PaginationProps = {
     page: readonly [PageNumberAndSize, Dispatch<PageNumberAndSize>] | readonly [OffsetAndLimit, Dispatch<OffsetAndLimit>];
     totalCount: number;
     pageSizes?: number[];
-}
+};
 declare function Pagination(props: PaginationProps): JSX.Element;
 declare function toLimitAndOffset(page: PageSettings): OffsetAndLimit;
 declare function toPageNumberSize(page: PageSettings): PageNumberAndSize;
@@ -9790,7 +9809,7 @@ type SideNavProps = {
 declare function SideNav(props: SideNavProps): JSX.Element;
 
 type SnackbarNoticeTypes = "error" | "warning" | "success" | "info" | "alert";
-interface SnackbarNoticeProps {
+type SnackbarNoticeProps = {
     /** Adds action button to the right of the notice */
     action?: Pick<ButtonProps, "label" | "onClick" | "variant">;
     /** Does not allow the user to close the notice manually. Notice will fade away in 10s. Value will be ignored if 'persistent' is set to 'true'. */
@@ -9804,7 +9823,7 @@ interface SnackbarNoticeProps {
     id: string;
     /** Removes the snackbar notice from the stack */
     onClose: () => void;
-}
+};
 
 type Offset = {
     bottom?: number;
@@ -9830,17 +9849,17 @@ interface TriggerNoticeProps extends Omit<SnackbarNoticeProps, "id" | "onClose">
     onClose?: () => void;
 }
 
-interface Step {
+type Step = {
     label: string;
     state: "incomplete" | "complete" | "error";
     disabled?: boolean;
     value: string;
-}
-interface StepperProps {
+};
+type StepperProps = {
     steps: Step[];
     currentStep: Step["value"];
     onChange: (stepValue: string) => void;
-}
+};
 declare function Stepper(props: StepperProps): JSX.Element;
 
 type StepperTabProps = {
@@ -9892,7 +9911,7 @@ interface ConfirmCloseModalProps {
 /** Modal content to appear when a close checks fails */
 declare function ConfirmCloseModal(props: ConfirmCloseModalProps): JSX.Element;
 
-interface SuperDrawerContentProps {
+type SuperDrawerContentProps = {
     children: ReactNode;
     /**
      * Actions represents an array of button props with represents that different
@@ -9901,7 +9920,7 @@ interface SuperDrawerContentProps {
      * Ex: A `cancel` and `submit` button
      * */
     actions?: ButtonProps[];
-}
+};
 /**
  * Helper component to place the given children and actions into the appropriate
  * DOM format to render inside the SuperDrawer.