@bloomreach/react-banana-ui 1.1.0-next.1

package/dist/components/navigation/pagination/pagination-types.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+export type ItemsPerPageOptionsType = Array<number | {
+    label: string;
+    value: number;
+}>;
+export type PageNavigationItemType = number | '...';
+export type PageNavigationItemsListType = Array<PageNavigationItemType>;
+export interface BrPaginationProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom class name for the container of this component
+     */
+    className?: string;
+    /**
+     * Total number of items
+     */
+    count: number;
+    /**
+     * Zero-based index of the current page
+     */
+    page: number;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage: number;
+    /**
+     * Callback fired when the page is changed.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Customizes the options of the items per page select field.
+     * If less than two options are available, no select field will be displayed
+     */
+    itemsPerPageOptions?: ItemsPerPageOptionsType;
+    /**
+     * Callback fired when the number of items per page is changed
+     */
+    onItemsPerPageChange?: (itemsPerPage: number) => void;
+}

package/dist/components/navigation/pagination/pagination.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { BrPaginationProps } from './pagination-types';
+/**
+ * Pagination component to display pagination links and manage the number of items per page
+ *
+ * ### Usage
+ * ```tsx
+ * import { BrPagination } from '@bloomreach/react-banana-ui'
+ *
+ * <BrPagination
+ *   count={100}
+ *   itemsPerPage={10}
+ *   page={0}
+ *   onPageChange={(page) => console.log(page)}
+ *   itemsPerPageOptions={[10, 25, 50]}
+ *   onItemsPerPageChange={(num) => console.log(num)}
+ * />
+ * ```
+ */
+declare const BrPagination: import("react").ForwardRefExoticComponent<BrPaginationProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BrPagination;

package/dist/components/navigation/pagination/pagination.qa.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import BrPagination from './pagination';
+import { type Story } from './pagination.stories';
+declare const meta: Meta<typeof BrPagination>;
+export default meta;
+export declare const OnePage: Story;
+export declare const TwoPages: Story;
+export declare const LotsOfPages: Story;

package/dist/components/navigation/pagination/pagination.stories.d.ts

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import BrPagination from './pagination';
+declare const meta: Meta<typeof BrPagination>;
+export default meta;
+export type Story = StoryObj<typeof BrPagination>;
+export declare const Simple: Story;
+export declare const Interactive: Story;
+export declare const OnePage: Story;
+export declare const TwoPages: Story;
+export declare const FewPages: Story;
+export declare const LotsOfPages: Story;
+export declare const ZeroItems: Story;
+export declare const OneItem: Story;
+export declare const OnlyPagination: Story;
+export declare const NoItemsPerPage: Story;
+export declare const DefaultItemsPerPage: Story;
+export declare const CustomItemsPerPage: Story;
+export declare const ItemsPerPageWithAllOption: Story;
+export declare const ItemsPerPageWithFewItems: Story;
+export declare const CustomClassNameAndDataTestId: Story;

package/dist/components/popovers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './modal';
+export * from './tooltip';

package/dist/components/popovers/modal/index.d.ts

@@ -0,0 +1,8 @@
+export { default as BrModal } from './modal';
+export { default as BrModalHeader } from './modal-header';
+export { default as BrModalHeaderTitle } from './modal-header-title';
+export { default as BrModalBody } from './modal-body';
+export { default as BrModalFooter } from './modal-footer';
+export { default as BrModalFooterActions } from './modal-footer-actions';
+export { default as BrModalCloseButton } from './modal-close-button';
+export type { BrModalProps, BrModalChildProps, BrModalBodyProps } from './modal-types';

package/dist/components/popovers/modal/modal-body.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BrModalBodyProps } from './modal-types';
+/**
+ * Modal body component is used to render the body section of the modal dialog.
+ * Use the `padding` prop to control the padding of the body section, the default is `narrow`.
+ */
+declare const BrModalBody: import("react").ForwardRefExoticComponent<BrModalBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BrModalBody;

package/dist/components/popovers/modal/modal-close-button.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { BrButtonProps } from '../../buttons/button/button';
+/**
+ * This button is a convenience component that applies the recommended styling for the Cancel button in the
+ * modal footer. It wraps the BrButton and sets the type to tertiary and attaches the Modal's onClose handler
+ * to the button's onClick event handler, so the developer does not have to manually attach the modal dialog close
+ * handler to the onClose handler of the Modal and again to the BrButton for the cancel button in the footer.
+ */
+declare function BrModalCloseButton(props: BrButtonProps): ReactElement;
+declare namespace BrModalCloseButton {
+    var displayName: string;
+}
+export default BrModalCloseButton;

package/dist/components/popovers/modal/modal-context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BrModalProps } from './modal-types';
+declare const ModalContext: import("react").Context<BrModalProps | null>;
+export declare function useModalContext(): BrModalProps | null;
+export default ModalContext;

package/dist/components/popovers/modal/modal-footer-actions.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BrModalChildProps } from './modal-types';
+/**
+ * Modal footer actions component is used to render the actions section of the modal dialog footer.
+ * You can use `BrModalCloseButton` component to render the cancel button which is call `onClose` by default.
+ */
+declare const BrModalFooterActions: import("react").ForwardRefExoticComponent<BrModalChildProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BrModalFooterActions;

package/dist/components/popovers/modal/modal-footer.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { BrModalChildProps } from './modal-types';
+/**
+ * Modal footer component is used to render the footer section of the modal dialog and it is recommended to use
+ * the `BrModalFooterActions` component to render the actions in the footer section.
+ * All content inside the `BrModalFooter` component is justified to the left. The `BrModalFooterActions`
+ * component is justified to the right.
+ */
+declare const BrModalFooter: import("react").ForwardRefExoticComponent<BrModalChildProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BrModalFooter;

package/dist/components/popovers/modal/modal-header-title.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BrModalChildProps } from './modal-types';
+/**
+ * Modal header title is used to render the title in the header section of the modal dialog.
+ */
+declare const BrModalHeaderTitle: import("react").ForwardRefExoticComponent<BrModalChildProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BrModalHeaderTitle;

package/dist/components/popovers/modal/modal-header.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BrModalChildProps } from './modal-types';
+/**
+ * Modal header component is used to render the header section of the modal dialog.
+ * If `onClose` is provided to the `BrModal` component, then a close button is rendered in the header section.
+ * Use `BrModalHeaderTitle` component to render the title in the header section.
+ */
+declare const BrModalHeader: import("react").ForwardRefExoticComponent<BrModalChildProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BrModalHeader;

package/dist/components/popovers/modal/modal-types.d.ts

@@ -0,0 +1,94 @@
+import { ReactNode } from 'react';
+export type BrModalWidth = 'sm' | 'md' | 'lg' | 'full';
+export interface BrModalProps {
+    /**
+     * If true, the component is shown.
+     */
+    open: boolean;
+    /**
+     * The content inside the modal
+     */
+    children: ReactNode;
+    /**
+     * Total width of the modal.
+     * @default 'sm'
+     */
+    width?: BrModalWidth;
+    /**
+     * The ARIA role attribute of the element.
+     * @default 'dialog'
+     */
+    role?: string;
+    /**
+     * Custom css class name.
+     */
+    className?: string;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose?: (() => void);
+    /**
+     * An HTML element or function that returns one. The container will have the portal children appended to it.
+     * By default, it uses the body of the top-level document object, so it's simply document.body most of the time.
+     */
+    container?: HTMLElement | (() => HTMLElement);
+    /**
+     * If true, the modal will not automatically shift focus to itself when it opens, and replace it to the last
+     * focused element when it closes. This also works correctly with any modal children that have the disableAutoFocus
+     * prop. Generally this should never be set to true as it makes the modal less accessible to assistive technologies,
+     * like screen readers.
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * If true, the modal will not prevent focus from leaving the modal while open.
+     * Generally this should never be set to true as it makes the modal less accessible to assistive technologies,
+     * like screen readers.
+     */
+    disableEnforceFocus?: boolean;
+    /**
+     * The children will be under the DOM hierarchy of the parent component.
+     */
+    disablePortal?: boolean;
+    /**
+     * If true, the modal will not restore focus to previously focused element once modal is hidden or unmounted.
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Disable the scroll lock behavior.
+     */
+    disableScrollLock?: boolean;
+    /**
+     * If true, the backdrop is not rendered.
+     */
+    hideBackdrop?: boolean;
+    /**
+     * Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize
+     * the responsiveness of the Modal.
+     */
+    keepMounted?: boolean;
+}
+export interface BrModalChildProps {
+    /**
+     * Custom css class name.
+     */
+    className?: string;
+    /**
+     * Children to be rendered inside the component
+     */
+    children: ReactNode;
+}
+export interface BrModalBodyProps {
+    /**
+     * The content to be rendered in the body section of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Padding around the content in the body of the modal.
+     * @default 'narrow'
+     */
+    padding?: 'narrow' | 'wide' | 'none';
+    /**
+     * Custom css class name.
+     */
+    className?: string;
+}

package/dist/components/popovers/modal/modal.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { BrModalProps } from './modal-types';
+/**
+ * Modal component lets you create dialogs that force the user to take action before continuing
+ *
+ * ## Usage
+ *
+ * ```tsx
+ *   <BrModal open>
+ *     <BrModalHeader>
+ *       <BrModalHeaderTitle>
+ *         Modal header
+ *       </BrModalHeaderTitle>
+ *     </BrModalHeader>
+ *     <BrModalBody>
+ *       Design systems bridge the gap between creativity and consistency, ensuring a harmonious user experience
+ *       across platforms. By establishing a set of guidelines and components, they empower designers to craft
+ *       cohesive digital environments.
+ *     </BrModalBody>
+ *     <BrModalFooter>
+ *       <BrModalFooterActions>
+ *         <BrModalCloseButton>
+ *           Cancel
+ *         </BrModalCloseButton>
+ *         <BrButton
+ *           onClick={() => {}}
+ *           type="primary"
+ *         >
+ *           Primary
+ *         </BrButton>
+ *       </BrModalFooterActions>
+ *     </BrModalFooter>
+ *   </BrModal>
+ * ```
+ */
+declare const BrModal: import("react").ForwardRefExoticComponent<BrModalProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BrModal;

package/dist/components/popovers/modal/modal.qa.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react';
+import { BrModalProps } from './modal-types';
+import { type Story } from './modal.stories';
+declare const meta: Meta<BrModalProps>;
+export default meta;
+export declare const Basic: Story;
+export declare const WithCheckbox: Story;
+export declare const ModalInsideModal: Story;
+export declare const ModalSizes: Story;
+export declare const ContentPadding: Story;

package/dist/components/popovers/modal/modal.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BrModalProps } from '..';
+declare const meta: Meta<BrModalProps>;
+export default meta;
+export type Story = StoryObj<BrModalProps>;
+export declare const Basic: Story;
+export declare const AlertDialog: Story;
+export declare const WithCheckbox: Story;
+export declare const FocusTrap: Story;
+export declare const OnlyContent: Story;
+export declare const LongContent: Story;
+export declare const ModalSizes: Story;
+export declare const ModalInsideModal: Story;
+export declare const ContentPadding: Story;

package/dist/components/popovers/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BrTooltip } from './tooltip';
+export type { BrTooltipProps } from './tooltip';

package/dist/components/popovers/tooltip/tooltip-config.d.ts

@@ -0,0 +1,2 @@
+export declare const TOOLTIP_OPEN_DELAY = 50;
+export declare const TOOLTIP_CLOSE_DELAY = 200;

package/dist/components/popovers/tooltip/tooltip.d.ts

@@ -0,0 +1,50 @@
+import { Placement } from '@floating-ui/react';
+import React, { ReactNode, ReactElement, HTMLAttributes } from 'react';
+export interface BrTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * Custom class name for the tooltip container
+     */
+    className?: string;
+    /**
+     * The tooltip child has to be a valid React element
+     */
+    children: ReactElement;
+    /**
+     * The tooltip message, it can be string or any valid React node
+     */
+    title: ReactNode;
+    /**
+     * Location of the tooltip, default is 'top'. The placement automatically adjusts if there is not enough space
+     * to render in the specified direction
+     */
+    placement?: Placement;
+    /**
+     * By default the tooltip container is attached to the body, turning on this flag will attach it to the container
+     * where the tooltip component is used
+     */
+    disablePortal?: boolean;
+    /**
+     * Specify a custom container (using id or ref) to attach the tooltip to. The tooltip will also use this container to
+     * determine the placement of the tooltip
+     */
+    portalRoot?: string | HTMLElement | React.MutableRefObject<HTMLElement | null>;
+}
+/**
+ * The tooltip component is supposed to display informative text when users hover over or tap an element
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { BrTooltip } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyElementWithTooltip() {
+ *   return (
+ *     <BrTooltip title="My tooltip">
+ *       <span>Hover over me</span>
+ *     </BrTooltip>
+ *   );
+ * }
+ * ```
+ */
+declare const BrTooltip: React.ForwardRefExoticComponent<BrTooltipProps & React.RefAttributes<HTMLDivElement>>;
+export default BrTooltip;

package/dist/components/popovers/tooltip/tooltip.qa.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import BrTooltip from './tooltip';
+import { type Story } from './tooltip.stories';
+declare const meta: Meta<typeof BrTooltip>;
+export default meta;
+export declare const Simple: Story;
+export declare const LongHtmlContent: Story;
+export declare const AutoPlacement: Story;

package/dist/components/popovers/tooltip/tooltip.stories.d.ts

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import BrTooltip from './tooltip';
+declare const meta: Meta<typeof BrTooltip>;
+export default meta;
+export type Story = StoryObj<typeof BrTooltip>;
+export declare const Simple: Story;
+export declare const LongHtmlContent: Story;
+/**
+ * Automatically place the tooltip in the most appropriate place. This example also shows how you can pass a
+ * reference to a custom portal(container where the tooltip is rendered and used to calculate the tooltip position)
+ * using id. You can also pass a ref or a HTML element to the portalRoot prop
+ */
+export declare const AutoPlacement: Story;
+export declare const InsideContainerWithOverflowHidden: Story;
+export declare const InsideContainerWithCustomScroll: Story;
+/**
+ * Story to check that the refs are being passed properly in the icons component
+ */
+export declare const IconTooltips: Story;
+export declare const EmptyTitleNoTooltip: Story;
+/**
+ * If you want to show a tooltip over an element that can be disabled, wrap it in another HTML element like a
+ * \<span\> or a \<div\>, since disabled elements do not trigger the hover and focus events
+ */
+export declare const DisabledTriggerShouldShowTooltip: Story;

package/dist/components/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ID used for the Toast modal. Helpful for keeping the modals sorted to a
+ * degree.
+ */
+export declare const ToastModalID = "__yeah_toast__";
+/**
+ * ID used for the tooltip modal. Helpful for keeping the modals sorted to a
+ * degree.
+ */
+export declare const TooltipModalID = "__tooltip__";
+/**
+ * ID used for the generic dropdown modal. Helpful for keeping the modals sorted
+ * to a degree.
+ */
+export declare const DropdownModalID = "__dropdown__";
+/**
+ * Date type format. Strings are expected to be in an appropriate ISO format.
+ */
+export type DateType = string | number | Date;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/style.css

@@ -0,0 +1 @@
+:root{--banana-text-negative: #f24165;--banana-text-link: #019ace;--banana-text-warning: #ff9500;--banana-text-success: #0dca7a;--banana-text-subtl: #5e739c;--banana-text-body: #3d506d;--banana-space-0x: 4px;--banana-space-1x: 8px;--banana-space-2x: 16px;--banana-space-3x: 24px;--banana-space-4x: 32px;--banana-space-5x: 40px;--banana-space-6x: 48px;--banana-space-7x: 56px;--banana-space-8x: 64px;--banana-space-9x: 72px;--banana-space-10x: 80px;--banana-toast-success-border: #0dca7a;--banana-toast-success-background: #ffffff;--banana-toast-success-foreground: #0dca7a;--banana-toast-error-border: #f24165;--banana-toast-error-background: #ffffff;--banana-toast-error-foreground: #f24165;--banana-toast-info-border: #019ace;--banana-toast-info-background: #ffffff;--banana-toast-info-foreground: #019ace;--banana-toast-warning-background: #ffffff;--banana-toast-warning-foreground: #ff9500;--banana-toast-warning-border: #ff9500;--banana-breadcrumbs-disabled: #8d9db9;--banana-breadcrumbs-hover: #002840;--banana-breadcrumbs-inactive: #3d506d;--banana-breadcrumbs-active: #002840;--banana-pills-secondary-backgroound-hover: #006894;--banana-pills-secondary-backgroound-default: #019ace;--banana-pills-secondary-backgroound-inactive: #ffffff;--banana-pills-secondary-border-inactive: #019ace;--banana-pills-secondary-foreground-inactive: #006894;--banana-pills-secondary-foreground-default: #ffffff;--banana-pills-accent-3-border-inactive: #00C586;--banana-pills-accent-3-foreground-inactive: #02B373;--banana-pills-accent-3-foreground-default: #ffffff;--banana-pills-accent-3-background-inactive: #ffffff;--banana-pills-accent-3-background-default: #00C586;--banana-pills-accent-3-background-hover: #02B373;--banana-pills-accent-2-background-inactive: #ffffff;--banana-pills-accent-2-background-default: #f84cac;--banana-pills-accent-2-background-hover: #f6239a;--banana-pills-accent-2-border-inactive: #f84cac;--banana-pills-accent-2-foreground-inactive: #f6239a;--banana-pills-accent-2-foreground-default: #ffffff;--banana-pills-neutral-backgroound-inactive: #ffffff;--banana-pills-neutral-backgroound-hover: #bdcee3;--banana-pills-neutral-backgroound-default: #e1e8f5;--banana-pills-neutral-border-inactive: #bdcee3;--banana-pills-neutral-foreground-inactive: #3d506d;--banana-pills-neutral-foreground-default: #002840;--banana-pills-accent-1-border-inactive: #8873ff;--banana-pills-accent-1-foreground-inactive: #6347ff;--banana-pills-accent-1-foreground-default: #ffffff;--banana-pills-accent-1-background-inactive: #ffffff;--banana-pills-accent-1-background-hover: #6347ff;--banana-pills-accent-1-background-default: #8873ff;--banana-pills-primary-backgroound-inactive: #ffffff;--banana-pills-primary-backgroound-hover: #e0bb00;--banana-pills-primary-backgroound-default: #ffd500;--banana-pills-primary-foreground-inactive: #002840;--banana-pills-primary-foreground-default: #002840;--banana-pills-primary-border-inactive: #ffd500;--banana-pills-accent-4-border-inactive: #0099ff;--banana-pills-accent-4-foreground-inactive: #008deb;--banana-pills-accent-4-foreground-default: #ffffff;--banana-pills-accent-4-background-inactive: #ffffff;--banana-pills-accent-4-background-default: #0099ff;--banana-pills-accent-4-background-hover: #008deb;--banana-pills-accent-5-border-inactive: #c24cfc;--banana-pills-accent-5-foreground-inactive: #9b05e6;--banana-pills-accent-5-foreground-default: #ffffff;--banana-pills-accent-5-background-inactive: #ffffff;--banana-pills-accent-5-background-default: #c24cfc;--banana-pills-accent-5-background-hover: #9b05e6;--banana-pills-accent-6-border-inactive: #FF862E;--banana-pills-accent-6-foreground-inactive: #ED6E12;--banana-pills-accent-6-foreground-default: #ffffff;--banana-pills-accent-6-background-inactive: #ffffff;--banana-pills-accent-6-background-default: #FF862E;--banana-pills-accent-6-background-hover: #ED6E12;--banana-pills-accent-7-border-inactive: #6d2ded;--banana-pills-accent-7-foreground-inactive: #5413d8;--banana-pills-accent-7-foreground-default: #ffffff;--banana-pills-accent-7-background-inactive: #ffffff;--banana-pills-accent-7-background-default: #6d2ded;--banana-pills-accent-7-background-hover: #5413d8;--banana-toggle-background-default: #bdcee3;--banana-toggle-background-active-disabled: #e1e8f5;--banana-toggle-background-active: #019ace;--banana-toggle-background-read-only-active: rgba(91, 197, 232, .6);--banana-toggle-background-disabled: #e1e8f5;--banana-toggle-background-read-only: #e1e8f5;--banana-toggle-foreground-disabled: #f7f9fc;--banana-toggle-foreground-active-disabled: #f7f9fc;--banana-toggle-foreground-default: #ffffff;--banana-toggle-foreground-active: #ffffff;--banana-toggle-foreground-read-only-active: #e6f9ff;--banana-toggle-foreground-read-only: #ffffff;--banana-checkbox-background-disabled: #f7f9fc;--banana-checkbox-background-read-only: #e1e8f5;--banana-checkbox-background-active: #019ace;--banana-checkbox-background-default: #ffffff;--banana-checkbox-background-error: #ffffff;--banana-checkbox-background-hover: #ffffff;--banana-checkbox-border-disbled: #e1e8f5;--banana-checkbox-border-error: #f24165;--banana-checkbox-border-default: #bdcee3;--banana-checkbox-border-read-only: #e1e8f5;--banana-checkbox-border-hover: #8d9db9;--banana-checkbox-foreground-read-only: #8d9db9;--banana-checkbox-foreground-disabled: #8d9db9;--banana-checkbox-foreground-active: #ffffff;--banana-radio-border-error: #f24165;--banana-radio-border-hover: #8d9db9;--banana-radio-border-read-only: #e1e8f5;--banana-radio-border-default: #bdcee3;--banana-radio-border-disbled: #e1e8f5;--banana-radio-background-active: #019ace;--banana-radio-background-default: #ffffff;--banana-radio-background-hover: #ffffff;--banana-radio-background-error: #ffffff;--banana-radio-background-disabled: #f7f9fc;--banana-radio-background-read-only: #e1e8f5;--banana-radio-foreground-active: #f7f9fc;--banana-radio-foreground-read-only: #8d9db9;--banana-radio-foreground-disabled: #8d9db9;--banana-dropdown-background-active: rgba(0, 172, 229, .1);--banana-dropdown-background-main: #ffffff;--banana-dropdown-background-group: #f7f9fc;--banana-dropdown-background-hover: #f7f9fc;--banana-dropdown-foreground-group: #3d506d;--banana-dropdown-foreground-disabled: #8d9db9;--banana-dropdown-foreground-default: #3d506d;--banana-dropdown-foreground-hover: #3d506d;--banana-dropdown-foreground-active: #002840;--banana-dropdown-border-divider: #e1e8f5;--banana-input-foreground-disabled: #8d9db9;--banana-input-foreground-placeholder: #5e739c;--banana-input-foreground-input-text: #002840;--banana-input-foreground-label: #3d506d;--banana-input-foreground-icon: #5e739c;--banana-input-border-hover: #8d9db9;--banana-input-border-filling-inline: #019ace;--banana-input-border-disabled: #e1e8f5;--banana-input-border-default: #bdcee3;--banana-input-border-read-only: #e1e8f5;--banana-input-background-disabled: #f7f9fc;--banana-input-background-default: #ffffff;--banana-input-background-hover: #ffffff;--banana-input-background-read-only: #e1e8f5;--banana-input-label: 600 12px/16px Inter, Arial, Helvetica, sans-serif;--banana-input-input-text: 400 14px/20px Inter, Arial, Helvetica, sans-serif;--banana-input-helper: 400 12px/16px Inter, Arial, Helvetica, sans-serif;--banana-button-secondary-border-disabled: #e1e8f5;--banana-button-secondary-border-clicked: #5e739c;--banana-button-secondary-border-pressed: #bdcee3;--banana-button-secondary-border-default: #bdcee3;--banana-button-secondary-border-hover: #8d9db9;--banana-button-secondary-background-disabled: #f7f9fc;--banana-button-secondary-background-clicked: #5e739c;--banana-button-secondary-background-pressed: #e1e8f5;--banana-button-secondary-background-hover: #f7f9fc;--banana-button-secondary-background-default: #f7f9fc;--banana-button-secondary-foreground-clicked: #ffffff;--banana-button-secondary-foreground-disabled: #8d9db9;--banana-button-secondary-foreground-default: #3d506d;--banana-button-secondary-foreground-pressed: #3d506d;--banana-button-secondary-foreground-hover: #3d506d;--banana-button-tertiary-foreground-disabled: #8d9db9;--banana-button-tertiary-foreground-default: #3d506d;--banana-button-tertiary-foreground-hover: #002840;--banana-button-tertiary-background-hover: rgba(94, 115, 156, .1);--banana-button-primary-foreground-default: #002840;--banana-button-primary-foreground-hover: #002840;--banana-button-primary-foreground-pressed: #002840;--banana-button-primary-foreground-disabled: rgba(94, 115, 156, .6);--banana-button-primary-border-split: #e0bb00;--banana-button-primary-background-disabled: rgba(255, 228, 92, .6);--banana-button-primary-background-pressed: #e0bb00;--banana-button-primary-background-hover: #ffdd33;--banana-button-primary-background-default: #ffd500;--banana-button-tertiary-danger-foreground-disabled: #f78da4;--banana-button-tertiary-danger-foreground-default: #f24165;--banana-button-tertiary-danger-foreground-hover: #f24165;--banana-button-tertiary-danger-background-hover: rgba(242, 65, 101, .1);--banana-button-secondary-danger-border-disabled: #fab3c2;--banana-button-secondary-danger-border-pressed: #f24165;--banana-button-secondary-danger-border-hover: #f02450;--banana-button-secondary-danger-border-default: #f24165;--banana-button-secondary-danger-foreground-disabled: #f78da4;--banana-button-secondary-danger-foreground-default: #f24165;--banana-button-secondary-danger-foreground-pressed: #f24165;--banana-button-secondary-danger-foreground-hover: #f24165;--banana-button-secondary-danger-background-pressed: #fcd9e1;--banana-button-secondary-danger-background-disabled: #feecf0;--banana-button-secondary-danger-background-default: #feecf0;--banana-button-secondary-danger-background-hover: #feecf0;--banana-button-primary-danger-foreground-disabled: #fcd9e1;--banana-button-primary-danger-foreground-default: #ffffff;--banana-button-primary-danger-foreground-hover: #ffffff;--banana-button-primary-danger-foreground-pressed: #ffffff;--banana-button-primary-danger-background-disabled: #f78da4;--banana-button-primary-danger-background-pressed: #f02450;--banana-button-primary-danger-background-hover: #f35376;--banana-button-primary-danger-background-default: #f24165;--banana-button-label: 600 14px/16px Inter, Arial, Helvetica, sans-serif;--banana-button-tertiary-alt-foreground-disabled: #5BC5E8;--banana-button-tertiary-alt-foreground-default: #019ace;--banana-button-tertiary-alt-foreground-hover: #019ace;--banana-button-tertiary-alt-background-hover: rgba(1, 154, 206, .1);--banana-table-head-default: #5e739c;--banana-table-head-active: #3d506d;--banana-table-row-border-default: #e1e8f5;--banana-table-row-background-active: #e6f9ff;--banana-table-row-background-hover: #f7f9fc;--banana-table-row-foreground-secondary: #3d506d;--banana-table-row-foreground-primary: #002840;--banana-tab-border-default: #e1e8f5;--banana-tab-border-hover: #e1e8f5;--banana-tab-border-active: #019ace;--banana-tab-background-hover: rgba(130, 211, 238, .1);--banana-tab-background-main-variants: #f7f9fc;--banana-tab-background-subtl: #f7f9fc;--banana-tab-background-main: #ffffff;--banana-tab-background-active-variants: #ffffff;--banana-tab-foreground-active: #002840;--banana-tab-foreground-hover: #002840;--banana-tab-foreground-inactive: #3d506d;--banana-tab-foreground-disabled: #8d9db9;--banana-states-warning: #ff9500;--banana-states-success: #0dca7a;--banana-states-default: #bdcee3;--banana-states-error: #f24165;--banana-states-info: #019ace;--banana-nav-border-active: #ffd500;--banana-nav-background-hover: #00334E;--banana-nav-background-default: #002840;--banana-nav-foreground-active: #ffd500;--banana-nav-foreground-hover: #ffffff;--banana-nav-foreground-default: #bdcee3;--banana-scroll-hover: #8d9db9;--banana-scroll-default: #bdcee3;--banana-alert-info-background: #e6f9ff;--banana-alert-info-foreground: #019ace;--banana-alert-error-foreground: #f24165;--banana-alert-error-background: #feecf0;--banana-alert-success-foreground: #0dca7a;--banana-alert-success-background: #e7fdf4;--banana-alert-warning-background: #fff4e5;--banana-alert-warning-foreground: #ff9500;--banana-global-focus: #00ace5;--banana-global-separator: #e1e8f5;--banana-global-main: #ffffff;--banana-global-overlay: rgba(0, 40, 64, .4);--banana-tooltip-foreground-icon: #5e739c;--banana-tooltip-foreground-text: #ffffff;--banana-tooltip-background-error: #f24165;--banana-tooltip-background-default: #002840;--banana-aside-border: #e1e8f5;--banana-aside-background: #f7f9fc;--banana-heading-tertiary-foreground: #5e739c;--banana-heading-secondary-foreground: #3d506d;--banana-heading-primary-foreground: #002840;--banana-badge-neutral-foreground-default: #3d506d;--banana-badge-neutral-foreground-invert: #002840;--banana-badge-neutral-background-default: #f7f9fc;--banana-badge-neutral-background-invert: #e1e8f5;--banana-badge-neutral-border-default: #5e739c;--banana-badge-default-foreground-default: #8c7503;--banana-badge-default-foreground-invert: #002840;--banana-badge-default-background-default: #fff8d6;--banana-badge-default-background-invert: #ffd500;--banana-badge-default-border-default: #ffd500;--banana-badge-sucess-foreground-default: #0dca7a;--banana-badge-sucess-foreground-invert: #ffffff;--banana-badge-sucess-background-default: #e7fdf4;--banana-badge-sucess-background-invert: #0dca7a;--banana-badge-sucess-border-default: #0dca7a;--banana-tree-foreground-default: #3d506d;--banana-tree-foreground-active: #002840;--banana-tree-background-hover: #f7f9fc;--banana-tree-background-active: rgba(0, 172, 229, .1);--banana-tree-border-structure: #8d9db9;--banana-heading-xl: 600 32px/40px Inter, Arial, Helvetica, sans-serif;--banana-heading-1: 600 24px/32px Inter, Arial, Helvetica, sans-serif;--banana-heading-1-regular: 400 24px/32px Inter, Arial, Helvetica, sans-serif;--banana-heading-2: 600 20px/28px Inter, Arial, Helvetica, sans-serif;--banana-heading-3: 600 18px/24px Inter, Arial, Helvetica, sans-serif;--banana-heading-4: 600 16px/20px Inter, Arial, Helvetica, sans-serif;--banana-heading-5: 600 12px/18px Inter, Arial, Helvetica, sans-serif;--banana-p: 400 14px/20px Inter, Arial, Helvetica, sans-serif;--banana-p-bold: 600 14px/20px Inter, Arial, Helvetica, sans-serif;--banana-p-small: 400 12px/16px Inter, Arial, Helvetica, sans-serif;--banana-p-small-bold: 600 12px/16px Inter, Arial, Helvetica, sans-serif;--banana-mono: 400 14px/24px "Roboto Mono";--banana-item-default: 400 14px/16px Inter, Arial, Helvetica, sans-serif;--banana-item-active: 600 14px/16px Inter, Arial, Helvetica, sans-serif;--banana-item-group: 600 12px/16px Inter, Arial, Helvetica, sans-serif;--banana-modal-background-default: #ffffff;--banana-modal-background-footer: #f7f9fc;--banana-slider-foreground-default: #019ace;--banana-slider-foreground-disabled: #5BC5E8;--banana-slider-foreground-tickmark-active: #ffffff;--banana-slider-foreground-tickmark: #8d9db9;--banana-slider-background-default: #e1e8f5;--banana-slider-border-hover: rgba(1, 154, 206, .1);--banana-card-background-default: #ffffff;--banana-card-background-new: #e6f9ff;--banana-card-broder-default: #e1e8f5;--banana-card-broder-new: #82D3EE;--banana-progress-bar-foreground-default: #019ace;--banana-progress-bar-background-default: #e1e8f5;--banana-transition-default: all .15s cubic-bezier(.65, .05, .36, 1);--banana-pagination-foreground-default: #3d506d;--banana-pagination-foreground-hover: #3d506d;--banana-pagination-foreground-active: #ffffff;--banana-pagination-background-hover: #f7f9fc;--banana-pagination-background-active: #019ace}:root{--banana-accent-100: #8873ff;--banana-accent-150: #6347ff;--banana-accent-200: #f84cac;--banana-accent-250: #f6239a;--banana-accent-300: #00C586;--banana-accent-350: #02B373;--banana-accent-400: #0099ff;--banana-accent-450: #008deb;--banana-accent-500: #c24cfc;--banana-accent-550: #9b05e6;--banana-accent-600: #FF862E;--banana-accent-650: #ED6E12;--banana-accent-700: #6d2ded;--banana-accent-750: #5413d8;--banana-accent-800: #ffd500;--banana-accent-850: #e0bb00;--banana-green-50: #e7fdf4;--banana-green-100: #d4fceb;--banana-green-200: #a9f9d6;--banana-green-300: #7ef6c2;--banana-green-400: #28ea96;--banana-green-500: #0dca7a;--banana-green-600: #0cb069;--banana-green-700: #098650;--banana-orange-50: #fff4e5;--banana-orange-100: #ffecd1;--banana-orange-200: #ffd9a3;--banana-orange-300: #ffc675;--banana-orange-400: #ffb347;--banana-orange-500: #ff9500;--banana-orange-600: #eb8900;--banana-orange-700: #bd6e00;--banana-red-50: #feecf0;--banana-red-100: #fcd9e1;--banana-red-200: #fab3c2;--banana-red-300: #f78da4;--banana-red-400: #f35376;--banana-red-500: #f24165;--banana-red-600: #f02450;--banana-red-700: #ac0c2f;--banana-gold-50: #fff8d6;--banana-gold-100: #fff1ad;--banana-gold-200: #ffeb85;--banana-gold-300: #ffe45c;--banana-gold-400: #ffdd33;--banana-gold-500: #ffd500;--banana-gold-600: #e0bb00;--banana-gold-700: #8c7503;--banana-blue-50: #e6f9ff;--banana-blue-100: #CCF0FC;--banana-blue-200: #82D3EE;--banana-blue-300: #5BC5E8;--banana-blue-400: #00ace5;--banana-blue-500: #019ace;--banana-blue-600: #006894;--banana-blue-700: #00334E;--banana-neutral-100: #f7f9fc;--banana-neutral-200: #e1e8f5;--banana-neutral-300: #bdcee3;--banana-neutral-400: #8d9db9;--banana-neutral-500: #5e739c;--banana-neutral-600: #3d506d;--banana-neutral-700: #002840;--banana-neutral-000: #ffffff;--banana-normal: 400;--banana-medium: 500;--banana-bold: 600;--banana-x-small: 12px;--banana-small: 14px;--banana-base: 16px;--banana-h5: 12px;--banana-h4: 16px;--banana-h3: 18px;--banana-h2: 20px;--banana-h1: 24px;--banana-x-large: 32px;--banana-line-base: 16px;--banana-line-increment: 4px;--banana-opacity-disabled: .6;--banana-opacity-hover: .1;--banana-font-primary: Inter, Arial, Helvetica, sans-serif;--banana-font-primary-fallback-1: Arial;--banana-font-primary-fallback-2: Helvetica;--banana-font-mono: "Roboto Mono";--banana-text-uppercase: uppercase;--banana-sans-serif: sans-serif;--banana-line-height-p: 20px;--banana-line-height-p-small: 16px;--banana-line-height-x-large: 40px;--banana-line-height-h1: 32px;--banana-line-height-h2: 28px;--banana-line-height-h3: 24px;--banana-line-height-mono: 24px;--banana-line-height-h4: 20px;--banana-line-height-h5: 18px;--banana-space-base: 8px}:root{--broccoli-font-family-primary: var(--banana-font-primary);--broccoli-font-family-mono: var(--banana-font-mono);--broccoli-font-weight-normal: var(--banana-normal);--broccoli-font-weight-medium: var(--banana-medium);--broccoli-font-weight-semibold: var(--banana-bold);--broccoli-font-size-xs: var(--banana-x-small);--broccoli-font-size-s: var(--banana-small);--broccoli-font-size-m: var(--banana-base);--broccoli-font-size-xl: var(--banana-x-large);--broccoli-font-base: var(--banana-p);--broccoli-font-heading-h4: var(--banana-heading-4);--broccoli-heading-h5: var(--banana-h5);--broccoli-heading-h4: var(--banana-h4);--broccoli-heading-h3: var(--banana-h3);--broccoli-heading-h2: var(--banana-h2);--broccoli-heading-h1: var(--banana-h1)}.br-tooltip{--broccoli-tooltip-box-shadow: 0 57px 16px 0 rgba(0, 40, 64, 0), 0 36px 15px 0 rgba(0, 40, 64, .01), 0 20px 12px 0 rgba(0, 40, 64, .03), 0 9px 9px 0 rgba(0, 40, 64, .05), 0 2px 5px 0 rgba(0, 40, 64, .06);min-width:24px;max-width:min(60%,256px);z-index:999999}.br-tooltip__inner{background:var(--banana-tooltip-background-default);color:var(--banana-tooltip-foreground-text);padding:var(--banana-space-1x);border-radius:4px;font:var(--banana-p-small);box-shadow:var(--broccoli-tooltip-box-shadow)}.br-tooltip__inner--open,.br-tooltip__inner--close{transition:var(--banana-transition-default)}.br-tooltip__inner--inital,.br-tooltip__inner--close{opacity:0}.br-tooltip__arrow path{fill:var(--banana-tooltip-background-default)}button,[type=button],[type=reset],[type=submit],.br-button{--broccoli-button-padding: var(--banana-space-1x) var(--banana-space-2x);outline:none;display:flex;align-items:center;justify-content:center;height:36px;padding:var(--broccoli-button-padding);gap:var(--banana-space-1x);border-radius:4px;border:1px solid var(--broccoli-button-border-color);font:var(--banana-button-label);background-color:var(--broccoli-button-background-color);color:var(--broccoli-button-color);transition:var(--banana-transition-default);cursor:pointer}.br-button--icon-only{--broccoli-button-padding: var(--banana-space-1x)}.br-button--icon-only.br-button-tertiary,.br-button--icon-only.br-button-tertiary-alternative,.br-button--icon-only.br-button-tertiary-danger{height:32px;width:32px}.br-button--loading{cursor:wait}button:focus-visible,.br-button--focus-visible,.br-button:focus-visible{outline:2px solid var(--banana-global-focus);outline-offset:1px}.br-button--disabled,.br-button:disabled{cursor:not-allowed}.br-button__start-icon,.br-button__end-icon{display:flex;align-items:center;justify-content:center}.br-button__loader{display:flex;align-items:center;justify-content:center;padding:0 var(--banana-space-2x)}.br-button__loader--short{padding:0}.br-button__spinner{animation:loading-spinner 1s linear infinite}@keyframes loading-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.br-button-primary{--broccoli-button-background-color: var(--banana-button-primary-background-default);--broccoli-button-color: var(--banana-button-primary-foreground-default);--broccoli-button-border-color: var(--broccoli-button-background-color)}.br-button-primary:hover:not(.br-button--disabled,.br-button--loading){--broccoli-button-background-color: var(--banana-button-primary-background-hover);--broccoli-button-color: var(--banana-button-primary-foreground-hover);--broccoli-button-border-color: var(--broccoli-button-background-color)}.br-button-primary--active:not(.br-button--disabled,.br-button--loading),.br-button-primary:active:not(.br-button--disabled,.br-button--loading){--broccoli-button-background-color: var(--banana-button-primary-background-pressed);--broccoli-button-color: var(--banana-button-primary-foreground-pressed);--broccoli-button-border-color: var(--broccoli-button-background-color)}.br-button-primary--loading,.br-button-primary--disabled,.br-button-primary:disabled{--broccoli-button-background-color: var(--banana-button-primary-background-disabled);--broccoli-button-color: var(--banana-button-primary-foreground-disabled);--broccoli-button-border-color: var(--broccoli-button-background-color)}.br-button-primary-danger{--broccoli-button-background-color: var(--banana-button-primary-danger-background-default);--broccoli-button-color: var(--banana-button-primary-danger-foreground-default);--broccoli-button-border-color: var(--broccoli-button-background-color)}.br-button-primary-danger:hover:not(.br-button--disabled,.br-button--loading){--broccoli-button-background-color: var(--banana-button-primary-danger-background-hover);--broccoli-button-color: var(--banana-button-primary-danger-foreground-hover);--broccoli-button-border-color: var(--broccoli-button-background-color)}.br-button-primary-danger--active:not(.br-button--disabled,.br-button--loading),.br-button-primary-danger:active:not(.br-button--disabled,.br-button--loading){--broccoli-button-background-color: var(--banana-button-primary-danger-background-pressed);--broccoli-button-color: var(--banana-button-primary-danger-foreground-pressed);--broccoli-button-border-color: var(--broccoli-button-background-color)}.br-button-primary-danger--loading,.br-button-primary-danger--disabled,.br-button-primary-danger:disabled{--broccoli-button-background-color: var(--banana-button-primary-danger-background-disabled);--broccoli-button-color: var(--banana-button-primary-danger-foreground-disabled);--broccoli-button-border-color: var(--broccoli-button-background-color)}button:not(.br-button),.br-button-secondary{--broccoli-button-background-color: var(--banana-button-secondary-background-default);--broccoli-button-color: var(--banana-button-secondary-foreground-default);--broccoli-button-border-color: var(--banana-button-secondary-border-default)}button:hover:not(.br-button),.br-button-secondary:hover:not(.br-button--disabled,.br-button--loading){--broccoli-button-background-color: var(--banana-button-secondary-background-hover);--broccoli-button-color: var(--banana-button-secondary-foreground-hover);--broccoli-button-border-color: var(--banana-button-secondary-border-hover)}button:active:not(.br-button),.br-button-secondary--active:not(.br-button--disabled,.br-button--loading),.br-button-secondary:active:not(.br-button--disabled,.br-button--loading){--broccoli-button-background-color: var(--banana-button-secondary-background-pressed);--broccoli-button-color: var(--banana-button-secondary-foreground-pressed);--broccoli-button-border-color: var(--banana-button-secondary-border-pressed)}button:disabled:not(.br-button),.br-button-secondary--loading,.br-button-secondary--disabled,.br-button-secondary:disabled{--broccoli-button-background-color: var(--banana-button-secondary-background-disabled);--broccoli-button-color: var(--banana-button-secondary-foreground-disabled);--broccoli-button-border-color: var(--banana-button-secondary-border-disabled)}.br-button-secondary-danger{--broccoli-button-background-color: var(--banana-button-secondary-danger-background-default);--broccoli-button-color: var(--banana-button-secondary-danger-foreground-default);--broccoli-button-border-color: var(--banana-button-secondary-danger-border-default)}.br-button-secondary-danger:hover:not(.br-button--disabled,.br-button--loading){--broccoli-button-background-color: var(--banana-button-secondary-danger-background-hover);--broccoli-button-color: var(--banana-button-secondary-danger-foreground-hover);--broccoli-button-border-color: var(--banana-button-secondary-danger-border-hover)}.br-button-secondary-danger--active:not(.br-button--disabled,.br-button--loading),.br-button-secondary-danger:active:not(.br-button--disabled,.br-button--loading){--broccoli-button-background-color: var(--banana-button-secondary-danger-background-pressed);--broccoli-button-color: var(--banana-button-secondary-danger-foreground-pressed);--broccoli-button-border-color: var(--banana-button-secondary-danger-border-pressed)}.br-button-secondary-danger--loading,.br-button-secondary-danger--disabled,.br-button-secondary-danger:disabled{--broccoli-button-background-color: var(--banana-button-secondary-danger-background-disabled);--broccoli-button-color: var(--banana-button-secondary-danger-foreground-disabled);--broccoli-button-border-color: var(--banana-button-secondary-danger-border-disabled)}.br-button-tertiary{--broccoli-button-background-color: transparent;--broccoli-button-color: var(--banana-button-tertiary-foreground-default);--broccoli-button-border-color: transparent}.br-button-tertiary--has-icons{--broccoli-button-padding: var(--banana-space-1x)}.br-button-tertiary--active:not(.br-button--disabled,.br-button--loading),.br-button-tertiary:active:not(.br-button--disabled,.br-button--loading),.br-button-tertiary:hover:not(.br-button--disabled,.br-button--loading){--broccoli-button-background-color: var(--banana-button-tertiary-background-hover);--broccoli-button-border-color: transparent}.br-button-tertiary--loading,.br-button-tertiary--disabled,.br-button-tertiary:disabled{--broccoli-button-color: var(--banana-button-tertiary-foreground-disabled)}.br-button-tertiary-danger{--broccoli-button-background-color: transparent;--broccoli-button-color: var(--banana-button-tertiary-danger-foreground-default);--broccoli-button-border-color: transparent}.br-button-tertiary-danger--has-icons{--broccoli-button-padding: var(--banana-space-1x)}.br-button-tertiary-danger--active:not(.br-button--disabled,.br-button--loading),.br-button-tertiary-danger:active:not(.br-button--disabled,.br-button--loading),.br-button-tertiary-danger:hover:not(.br-button--disabled,.br-button--loading){--broccoli-button-color: var(--banana-button-tertiary-danger-foreground-default);--broccoli-button-background-color: var(--banana-button-tertiary-danger-background-hover);--broccoli-button-border-color: transparent}.br-button-tertiary-danger--loading,.br-button-tertiary-danger--disabled,.br-button-tertiary-danger:disabled{--broccoli-button-color: var(--banana-button-tertiary-danger-foreground-disabled)}.br-button-tertiary-alternative{--broccoli-button-background-color: transparent;--broccoli-button-color: var(--banana-button-tertiary-alt-foreground-default);--broccoli-button-border-color: transparent}.br-button-tertiary-alternative--has-icons{--broccoli-button-padding: var(--banana-space-1x)}.br-button-tertiary-alternative--active:not(.br-button--disabled,.br-button--loading),.br-button-tertiary-alternative:active:not(.br-button--disabled,.br-button--loading),.br-button-tertiary-alternative:hover:not(.br-button--disabled,.br-button--loading){--broccoli-button-background-color: var(--banana-button-tertiary-alt-background-hover);--broccoli-button-color: var(--banana-button-tertiary-alt-foreground-hover);--broccoli-button-border-color: transparent}.br-button-tertiary-alternative--loading,.br-button-tertiary-alternative--disabled,.br-button-tertiary-alternative:disabled{--broccoli-button-color: var(--banana-button-tertiary-alt-foreground-disabled)}.br-button-group{display:flex;transition:var(--banana-transition-default)}.br-button-group--primary{--broccoli-button-group-border-split: var(--banana-button-primary-border-split);--broccoli-button-group-button-border-hover: var(--banana-button-primary-border-split)}.br-button-group--secondary{--broccoli-button-group-border-split: var(--banana-button-secondary-border-default);--broccoli-button-group-button-border-hover: var(--banana-button-secondary-border-hover)}.br-button-group--tertiary{--broccoli-button-group-border-split: var(--banana-button-secondary-border-default);--broccoli-button-group-button-border-hover: var(--banana-button-secondary-border-default)}.br-button-group__button{margin-left:-1px;z-index:0}.br-button-group__button:hover:not(:active,.br-button-group__button--disabled){z-index:1}.br-button-group__button--first{border-top-right-radius:0;border-bottom-right-radius:0}.br-button-group__button--first:hover:not(:active,.br-button-group__button--disabled){border-right-color:var(--broccoli-button-group-button-border-hover)}.br-button-group__button--middle{border-radius:0;border-left-color:var(--broccoli-button-group-border-split)}.br-button-group__button--middle:hover:not(:active,.br-button-group__button--disabled){border-left-color:var(--broccoli-button-group-button-border-hover);border-right-color:var(--broccoli-button-group-button-border-hover)}.br-button-group__button--last{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:var(--broccoli-button-group-border-split)}.br-button-group__button--last:hover:not(:active,.br-button-group__button--disabled){border-left-color:var(--broccoli-button-group-button-border-hover)}.br-toggle-button{transition:var(--banana-transition-default)}.br-toggle-button--selected{color:var(--banana-button-secondary-foreground-clicked);background-color:var(--banana-button-secondary-background-clicked)}.br-alert{--broccoli-alert-spacing-m: 16px;--broccoli-alert-padding: var(--broccoli-alert-spacing-m);display:flex;position:relative;gap:var(--broccoli-alert-padding);border-radius:8px;padding-block:var(--broccoli-alert-padding);padding-inline:var(--broccoli-alert-padding) calc(var(--broccoli-alert-padding) * 3);background-color:var(--broccoli-alert-background-color)}.br-alert--error{--broccoli-alert-background-color: var(--banana-alert-error-background)}.br-alert--info{--broccoli-alert-background-color: var(--banana-alert-info-background)}.br-alert--success{--broccoli-alert-background-color: var(--banana-alert-success-background)}.br-alert--warning{--broccoli-alert-background-color: var(--banana-alert-warning-background)}.br-alert__icon{width:16px;height:16px;padding-top:2px;color:var(--broccoli-alert-icon-color)}.br-alert__icon--error{--broccoli-alert-icon-color: var(--banana-alert-error-foreground)}.br-alert__icon--info{--broccoli-alert-icon-color: var(--banana-alert-info-foreground)}.br-alert__icon--success{--broccoli-alert-icon-color: var(--banana-alert-success-foreground)}.br-alert__icon--warning{--broccoli-alert-icon-color: var(--banana-alert-warning-foreground)}.br-alert__content{font:var(--broccoli-font-base)}.br-alert__actions{display:flex;gap:calc(var(--broccoli-alert-spacing-m) / 2);margin-top:var(--broccoli-alert-spacing-m)}.br-alert__close{position:absolute;top:8px;right:8px}.br-alert-title{font:var(--broccoli-font-heading-h4);font-weight:var(--broccoli-font-weight-semibold);font-size:var(--broccoli-heading-h4);color:var(--banana-heading-primary-foreground);margin-bottom:8px}.br-alert-title:last-child{margin-bottom:0}.br-modal{--broccoli-border-radius: 8px;--broccoli-elevation-3: 0 17px 17px 0 rgba(0, 40, 64, .07);display:flex;position:fixed;inset:var(--banana-space-2x);align-items:center;justify-content:center;z-index:1300}.br-modal__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--banana-global-overlay);z-index:-1}.br-modal__wrapper{--br-modal-width: 480px;display:flex;flex-flow:column;max-height:100%;width:var(--br-modal-width);border-radius:var(--broccoli-border-radius);background-color:var(--banana-modal-background-default);box-shadow:var(--broccoli-elevation-3)}.br-modal__wrapper--sm{--br-modal-width: 480px}.br-modal__wrapper--md{--br-modal-width: 768px}.br-modal__wrapper--lg{--br-modal-width: 1024px}.br-modal__wrapper--full{--br-modal-width: 100%}.br-modal__header-close{margin-right:calc(var(--banana-space-1x) * -1)}.br-modal__header{display:flex;justify-content:space-between;gap:var(--banana-space-1x);padding:var(--banana-space-2x) var(--banana-space-3x) 0}.br-modal__header-section{flex-grow:1}.br-modal__header-title{font:var(--banana-heading-1);color:var(--banana-heading-primary-foreground)}.br-modal__body{--broccoli-modal-body-padding: var(--banana-space-1x) var(--banana-space-3x) var(--banana-space-3x);font:var(--banana-p);color:var(--banana-text-body);padding:var(--broccoli-modal-body-padding);overflow-y:auto}.br-modal__body--none{--broccoli-modal-body-padding: 0}.br-modal__body--narrow{--broccoli-modal-body-padding: var(--banana-space-1x) var(--banana-space-3x) var(--banana-space-3x)}.br-modal__body--wide{--broccoli-modal-body-padding: var(--banana-space-3x)}.br-modal__footer{display:flex;align-items:center;justify-content:flex-start;gap:var(--banana-space-1x);border-bottom-left-radius:var(--broccoli-border-radius);border-bottom-right-radius:var(--broccoli-border-radius);padding:var(--banana-space-1x) var(--banana-space-2x);background-color:var(--banana-modal-background-footer)}.br-modal__footer--actions{display:flex;gap:var(--banana-space-1x);margin-left:auto}.br-base-field{--broccoli-base-field-helper-color: var(--banana-text-subtl);display:inline-flex;flex-direction:column;gap:var(--banana-space-0x)}.br-base-field--error{--broccoli-base-field-helper-color: var(--banana-states-error)}.br-base-field--full-width{width:100%}.br-base-field__label-row{display:flex;align-items:center}.br-base-field__label{display:flex;align-items:center;gap:var(--banana-space-0x);font:var(--banana-input-label);color:var(--banana-input-foreground-label)}.br-base-field__icon{fill:var(--banana-input-foreground-icon)}.br-base-field__metadata{display:flex;align-items:center;margin-left:auto}.br-base-field__helper{display:flex;align-items:center;font:var(--banana-input-helper);color:var(--broccoli-base-field-helper-color)}.br-base-input{--broccoli-input-border-color: var(--banana-input-border-default);--broccoli-input-border-width: 1px;--broccoli-input-background: var(--banana-input-background-default);--broccoli-input-placeholder-color: var(--banana-input-foreground-placeholder);--broccoli-input-element-color: var(--banana-input-foreground-icon);--broccoli-input-foreground-text: var(--banana-input-foreground-input-text);--broccoli-base-input-padding-horizontal: var(--banana-space-1x);--broccoli-base-input-padding-vertical: var(--banana-space-1x);display:inline-flex;align-items:center;flex:1;position:relative;height:36px;font:var(--banana-input-input-text);color:var(--broccoli-input-foreground-text);border-radius:4px;background:var(--broccoli-input-background)}.br-base-input:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;border:var(--broccoli-input-border-width) solid var(--broccoli-input-border-color);transition:var(--banana-transition-default);z-index:0}.br-base-input--hovered{--broccoli-input-border-color: var(--banana-input-border-hover);--broccoli-input-background: var(--banana-input-background-hover)}.br-base-input--readonly{--broccoli-input-border-color: var(--banana-input-border-read-only);--broccoli-input-background: var(--banana-input-background-read-only)}.br-base-input--disabled{--broccoli-input-border-color: var(--banana-input-border-disabled);--broccoli-input-background: var(--banana-input-background-disabled);--broccoli-input-placeholder-color: var(--banana-input-foreground-disabled);--broccoli-input-element-color: var(--banana-input-foreground-disabled);--broccoli-input-foreground-text: var(--banana-input-foreground-disabled)}.br-base-input:focus-visible,.br-base-input--focused{--broccoli-input-border-color: var(--banana-global-focus);--broccoli-input-border-width: 2px}.br-base-input--error{--broccoli-input-border-color: var(--banana-states-error)}.br-base-input__input{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;flex:1;font:inherit;color:inherit;background:inherit;min-width:0;width:100%;padding:var(--broccoli-base-input-padding-horizontal) var(--broccoli-base-input-padding-vertical);margin:0;border:none;outline:none}.br-base-input__input::placeholder{color:var(--broccoli-input-placeholder-color);opacity:1}.br-base-input__input--has-right{padding-right:0}.br-base-input__input--has-left{padding-left:0}.br-base-input__input--multiline{overflow:auto!important}.br-base-input__element{--broccoli-base-input-element-space: var(--banana-space-1x);display:flex;align-items:center;gap:var(--broccoli-base-input-element-space);padding-left:var(--broccoli-base-input-padding-horizontal);padding-right:var(--broccoli-base-input-padding-horizontal);color:var(--broccoli-input-element-color);z-index:1}.br-base-input__element>.br-button{color:inherit}.br-base-input__element>.br-button+.br-button{margin-left:calc(-1 * var(--broccoli-base-input-element-space))}.br-base-input__element>.br-button:last-child{margin-right:calc(-1 * var(--broccoli-base-input-padding-horizontal) + 2px)}.br-base-input__element>.br-button:first-child{margin-left:calc(-1 * var(--broccoli-base-input-padding-horizontal) + 2px)}.br-base-input__clear-button--hidden{visibility:hidden}.br-text-field__counter{font:var(--banana-p-small);color:var(--banana-text-subtl)}.br-text-field__textarea{resize:none}.br-text-field__textarea--resizable{resize:both}.Dropdown{position:absolute;font-size:var(--broccoli-font-size-s);line-height:17px;display:flex;flex-direction:column;flex:0 1 auto;box-sizing:border-box}.ScrollRegion{flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden;position:relative;overscroll-behavior-x:none}.ScrollRegion__Bar{cursor:pointer;transition:opacity .2s ease,background-color .2s ease;position:absolute;right:0;border-radius:3px;width:5px;background:rgba(0,0,0,.2);opacity:0;height:0}.ScrollRegion__Bar:hover{background:rgba(0,0,0,.5)}.ScrollRegion__Content{position:relative;overflow:hidden;width:100%;height:100%;overscroll-behavior-x:none}.ScrollRegion__Wrapper{position:absolute;top:0;left:0;flex:1 1 auto;display:flex;flex-direction:column}.ScrollRegion--horizontal{height:5px;right:inherit;overscroll-behavior-x:none}.ScrollRegion--horizontal-content{flex-direction:row}.ScrollView{flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden;position:relative}.ScrollView__Bar{cursor:pointer;transition:opacity .2s ease,background-color .2s ease;position:absolute;right:0;border-radius:3px;width:5px;background:rgba(0,0,0,.2);opacity:0;height:0}.ScrollView__Bar:hover{background:rgba(0,0,0,.5)}.ScrollView__Content{flex:1 1 auto;position:relative;display:flex;flex-direction:column}.ScrollView--horizontal{height:5px;right:inherit}.ScrollView--horizontal-content{flex-direction:row}.ScrollView--light .ScrollView__Bar{background:rgba(255,255,255,.2)}.ScrollView--light .ScrollView__Bar:hover{background:rgba(255,255,255,.5)}.ListView{display:flex;flex-direction:column;flex:1 1 auto;margin-bottom:0}.ListView__Empty{color:#1c1733;font-size:var(--broccoli-font-size-m)}.ListView__Row{transition:all .2s ease;display:flex}.ListView--empty{justify-content:center;align-items:center}.Loader--medium{width:40px;height:40px;border-radius:50%;position:relative;animation:loader10-u82q2tb .5s ease alternate infinite;animation-delay:.2s;top:50%;margin:-60px auto 0!important}.Loader--medium:after,.Loader--medium:before{content:"";position:absolute;width:40px;height:40px;border-radius:50%;animation:loader10-u82q2tb .5s ease alternate infinite}.Loader--medium:before{left:-48px;animation-delay:.1s}.Loader--medium:after{right:-48px;animation-delay:.3s}@keyframes loader10-u82q2tb{0%{box-shadow:0 40px 0 -40px #d7dfe7}to{box-shadow:0 40px #d7dfe7}}.Loader--small{width:20px;height:20px;border-radius:50%;position:relative;animation:loader10-u82q2u9 .5s ease alternate infinite;animation-delay:.2s;top:50%;margin:-30px auto 0!important}.Loader--small:after,.Loader--small:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;animation:loader10-u82q2u9 .5s ease alternate infinite}.Loader--small:before{left:-28px;animation-delay:.1s}.Loader--small:after{right:-28px;animation-delay:.3s}@keyframes loader10-u82q2u9{0%{box-shadow:0 20px 0 -20px #d7dfe7}to{box-shadow:0 20px #d7dfe7}}.Loader--tiny{width:10px;height:10px;border-radius:50%;position:relative;animation:loader10-u82q2v7 .5s ease alternate infinite;animation-delay:.2s;top:50%;margin:-15px auto 0!important}.Loader--tiny:after,.Loader--tiny:before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;animation:loader10-u82q2v7 .5s ease alternate infinite}.Loader--tiny:before{left:-16px;animation-delay:.1s}.Loader--tiny:after{right:-16px;animation-delay:.3s}@keyframes loader10-u82q2v7{0%{box-shadow:0 10px 0 -10px #d7dfe7}to{box-shadow:0 10px #d7dfe7}}.Selection{display:flex;flex-direction:column;margin:0;box-sizing:border-box}.Selection__Option{cursor:pointer;transition:all .2s ease;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 8px;min-height:36px;max-height:36px;box-sizing:border-box;white-space:nowrap;font-size:13px;line-height:16px;color:#147ac8;stroke:#147ac8;fill:#147ac8}.Selection__Option:hover{color:#147ac8;background:rgba(20,122,200,.1)}.Selection__Option>.Icon{display:none}.Selection__Content{cursor:pointer;transition:all .2s ease;border:1px solid #0099ff;border-radius:4px;padding:0 16px;flex:0 1 auto;display:flex;flex-direction:row;justify-content:space-between;align-items:center;box-sizing:border-box;overflow:hidden}.Selection__Left{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}.Selection__Decal{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;margin-right:10px}.Selection__DecalRight{transition:transform .2s ease;flex:0 1 auto;display:flex;flex-direction:row;align-items:center;transform:rotate(0)}.Selection__Value{display:flex;flex-direction:row;white-space:nowrap;margin-right:4px}.Selection__Value>b{color:#09f;margin-right:5px}.Selection__Panel{animation:ZapIn .17s ease;box-shadow:0 8px 12px #303d5026,0 0 1px #303d504f;border-radius:8px;padding:0;background:#ffffff}.Selection__Loader{animation:ZapIn .17s ease;box-shadow:0 8px 12px #303d5026,0 0 1px #303d504f;border-radius:8px;min-height:200px}.Selection__LoaderContainer{height:50%;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}.Selection__Search{flex:0 1 30px;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;background:#ffffff;margin:8px 8px 0;height:32px;border-radius:4px;border:none;justify-content:flex-start;padding:8px}.Selection__Search>input{width:100%;height:30px;line-height:16px;box-sizing:content-box;background:rgba(0,0,0,0);border:none;font-size:var(--broccoli-font-size-m);line-height:20px;letter-spacing:-.5px;color:#09f}.Selection__Search>input::selection{background:#0099ff;color:#fff;transition:all .2s ease}.Selection__Search>input:focus{border:none;color:#1c1733;outline:none;transition:all .2s ease}.Selection__Search>input::placeholder{color:#e1e2e5}.Selection__Search>input:placeholder-shown{color:#e1e2e5}.Selection__SearchIcon{color:#09f;fill:#09f;width:13px;margin-right:8px}.Selection__Label{margin:0 16px 0 0;padding:0 16px;height:36px;display:flex;flex-direction:row;justify-content:center;align-items:center;white-space:nowrap;font-weight:var(--broccoli-font-weight-semibold);font-size:var(--broccoli-font-size-s);line-height:20px;letter-spacing:-.5px}.Selection>select{position:absolute;transform:scale(0);max-width:0px;max-height:0px;opacity:0}.Selection--focus .Selection__DecalRight{transform:rotate(180deg)}.Selection--has-label{padding-left:0}.Selection--up{transform:scaleY(-1)}.Selection--selected{font-weight:var(--broccoli-font-weight-semibold);color:#147ac8}.Selection--selected>.Icon{display:flex}.Selection--divider{border-bottom:1px solid #e1e2e5}.Selection--field-inline.Selection__Content{background:#ffffff}.Selection--field-inline.Selection--empty{color:#09f;fill:#09f;stroke:#09f;border:1px solid #0099ff}.Selection--field-inline.Selection--empty input{border:none;transition:all .2s ease}.Selection--field-inline.Selection--focus{background:#147ac8;border:1px solid #147ac8!important;color:#fff!important;fill:#fff!important;stroke:#fff!important}.Selection--field-inline.Selection--hovered{border:1px solid rgba(0,153,255,.8);color:#09fc;fill:#09fc;stroke:#09fc}.Selection--field-inline.Selection--filled{border:1px solid #0099ff;color:#09f;fill:#09f;stroke:#09f}.Selection--field-inline.Selection--error{color:#f24165;fill:#f24165;stroke:#f24165;border-color:1px solid #f24165}.Selection--field-inline.Selection--single-row{min-height:36px}.Selection--field-inline.Selection--single-row input{padding:0}.Selection--field-inline.Selection--placeholder{color:#e1e2e5}.Selection--field-inline .Selection__Label{background:#e7f1f9;color:#147ac8;stroke:#147ac8;fill:#147ac8}.Selection--field-inline .Selection__Value{display:flex;flex-direction:row;align-items:center;width:100%;height:36px;padding:0;box-sizing:content-box;background:transparent;font-size:var(--broccoli-font-size-m);line-height:20px;letter-spacing:-.5px}.Selection--field-inline .Selection__Value::selection{background:#0099ff;color:#fff;fill:#fff;stroke:#fff;transition:all .2s ease}.Selection--field-inline .Selection__Value:focus{border:none;color:#fff;stroke:#fff;fill:#fff;outline:none;transition:all .2s ease}.Selection--field-inline .Selection__Value::placeholder{color:#e1e2e5;fill:#e1e2e5;stroke:#e1e2e5}.Selection--field-inline .Selection__Value:placeholder-shown{color:#e1e2e5;fill:#e1e2e5;stroke:#e1e2e5}.Selection--field-inline-subtle.Selection__Content{background:#ffffff}.Selection--field-inline-subtle.Selection--empty{color:#00284080;fill:#00284080;stroke:#00284080;border:1px solid rgba(0,40,64,.1)}.Selection--field-inline-subtle.Selection--empty input{border:none;transition:all .2s ease}.Selection--field-inline-subtle.Selection--focus{background:#147ac8;border:1px solid #147ac8!important;color:#fff!important;fill:#fff!important;stroke:#fff!important}.Selection--field-inline-subtle.Selection--hovered{border:1px solid rgba(0,153,255,.8);color:#09fc;fill:#09fc;stroke:#09fc}.Selection--field-inline-subtle.Selection--filled{border:1px solid rgba(0,40,64,.1);color:#002840;fill:#002840;stroke:#002840}.Selection--field-inline-subtle.Selection--error{color:#f24165;fill:#f24165;stroke:#f24165;border-color:1px solid #f24165}.Selection--field-inline-subtle.Selection--single-row{min-height:36px}.Selection--field-inline-subtle.Selection--single-row input{padding:0}.Selection--field-inline-subtle.Selection--placeholder{color:#e1e2e5}.Selection--field-inline-subtle .Selection__Label{background:#e7f1f9;color:#147ac8;stroke:#147ac8;fill:#147ac8}.Selection--field-inline-subtle .Selection__Value{display:flex;flex-direction:row;align-items:center;width:100%;height:36px;padding:0;box-sizing:content-box;background:transparent;font-size:var(--broccoli-font-size-m);line-height:20px;letter-spacing:-.5px}.Selection--field-inline-subtle .Selection__Value::selection{background:#0099ff;color:#fff;fill:#fff;stroke:#fff;transition:all .2s ease}.Selection--field-inline-subtle .Selection__Value:focus{border:none;color:#fff;stroke:#fff;fill:#fff;outline:none;transition:all .2s ease}.Selection--field-inline-subtle .Selection__Value::placeholder{color:#e1e2e5;fill:#e1e2e5;stroke:#e1e2e5}.Selection--field-inline-subtle .Selection__Value:placeholder-shown{color:#e1e2e5;fill:#e1e2e5;stroke:#e1e2e5}.Selection--filter-header.Selection__Content{background:#ffffff}.Selection--filter-header.Selection--empty{color:#09f;fill:#09f;stroke:#09f;border:1px solid #0099ff}.Selection--filter-header.Selection--empty input{border:none;transition:all .2s ease}.Selection--filter-header.Selection--focus{background:#147ac8;border:1px solid #147ac8!important;color:#fff!important;fill:#fff!important;stroke:#fff!important}.Selection--filter-header.Selection--hovered{border:1px solid rgba(0,153,255,.8);color:#09fc;fill:#09fc;stroke:#09fc}.Selection--filter-header.Selection--filled{border:1px solid #00b2db;color:#002840;fill:#002840;stroke:#002840}.Selection--filter-header.Selection--error{color:#f24165;fill:#f24165;stroke:#f24165;border-color:1px solid #f24165}.Selection--filter-header.Selection--single-row{min-height:36px}.Selection--filter-header.Selection--single-row input{padding:0}.Selection--filter-header.Selection--placeholder{color:#e1e2e5}.Selection--filter-header .Selection__Label{background:#e7f1f9;color:#147ac8;stroke:#147ac8;fill:#147ac8}.Selection--filter-header .Selection__Value{display:flex;flex-direction:row;align-items:center;width:100%;height:36px;padding:0;box-sizing:content-box;background:transparent;font-size:var(--broccoli-font-size-s);line-height:20px;letter-spacing:-.5px}.Selection--filter-header .Selection__Value::selection{background:#0099ff;color:#fff;fill:#fff;stroke:#fff;transition:all .2s ease}.Selection--filter-header .Selection__Value:focus{border:none;color:#fff;stroke:#fff;fill:#fff;outline:none;transition:all .2s ease}.Selection--filter-header .Selection__Value::placeholder{color:#e1e2e5;fill:#e1e2e5;stroke:#e1e2e5}.Selection--filter-header .Selection__Value:placeholder-shown{color:#e1e2e5;fill:#e1e2e5;stroke:#e1e2e5}.Selection--disabled{cursor:not-allowed}.Selection--disabled.Selection__Content{cursor:not-allowed;background:transparent}.Selection--disabled .Selection__Value::selection{background:transparent;color:#a8b5c8;fill:#a8b5c8;stroke:#a8b5c8}.Selection--disabled .Selection__Value:focus{border:none;color:#a8b5c8;stroke:#a8b5c8;fill:#a8b5c8;outline:none}.Selection--disabled .Selection__Value::placeholder{color:#a8b5c8;fill:#a8b5c8;stroke:#a8b5c8}.Selection--disabled .Selection__Value:placeholder-shown{color:#a8b5c8;fill:#a8b5c8;stroke:#a8b5c8}.Selection--disabled.Selection--empty{color:#a8b5c8;fill:#a8b5c8;stroke:#a8b5c8;border:1px solid #a8b5c8}.Selection--disabled.Selection--empty input{border:none}.Selection--disabled.Selection--focus{background:transparent;border:1px solid #a8b5c8!important;color:#a8b5c8!important;fill:#a8b5c8!important;stroke:#a8b5c8!important}.Selection--disabled.Selection--hovered,.Selection--disabled.Selection--filled{border:1px solid #a8b5c8;color:#a8b5c8;fill:#a8b5c8;stroke:#a8b5c8}.Selection--disabled.Selection--error{color:#a8b5c8;fill:#a8b5c8;stroke:#a8b5c8;border-color:1px solid #a8b5c8}.Selection--disabled.Selection--placeholder{color:#a8b5c8}.Selection--height-30{height:30px}.Selection--height-30 .Selection__Content{border-radius:4px;padding:0 16px;height:30px}.Selection--height-30 .Selection__Value{font-weight:var(--broccoli-font-weight-semibold);font-size:13px;line-height:20px;margin-right:10px}.Selection--height-30 .Selection--single-row{min-height:30px}.Selection--height-30 .Selection--single-row input{padding:0}.Selection--height-32{height:32px}.Selection--height-32 .Selection__Content{border-radius:4px;padding:0 8px;height:32px}.Selection--height-32 .Selection__Value{font-weight:var(--broccoli-font-weight-semibold);font-size:13px;line-height:170%;margin-right:10px}.Selection--height-32 .Selection--single-row{min-height:32px}.Selection--height-32 .Selection--single-row input{padding:0}.br-pagination{display:flex;gap:var(--banana-space-2x);align-items:center}.br-pagination .br-pagination__left{display:flex;gap:var(--banana-space-2x);align-items:center;flex-grow:1}.br-pagination .br-pagination__summary{font:var(--banana-p-small);color:var(--banana-text-subtl)}.br-pagination .br-pagination__navigation ul{display:flex;list-style:none;margin:0;padding:0}.br-pagination .br-pagination__navigation-item{font-weight:var(--banana-normal);--broccoli-button-color: var(--banana-pagination-foreground-default)}.br-pagination .br-pagination__navigation-item:hover{--broccoli-button-color: var(--banana-pagination-foreground-hover);--broccoli-button-background-color: var(--banana-pagination-background-hover)}.br-pagination .br-pagination__navigation-item__selected,.br-pagination .br-pagination__navigation-item__selected:hover{--broccoli-button-color: var(--banana-pagination-foreground-active);--broccoli-button-background-color: var(--banana-pagination-background-active)}

package/dist/utils/add-font.d.ts

@@ -0,0 +1,29 @@
+/**
+ * This method ensures the fonts required for this SPA are embedded into the
+ * page.
+ *
+ * @param context Provide a context id to identify the fonts embedded for the
+ *                sake of destroying them later.
+ * @param fontName The name of the font as is expected to be used from the font
+ *                 resource (such as "sans serif")
+ * @param fontResource Use require(<file path>) to provide for the param.
+ * @param fontType Set the type of font the file is providing
+ * @param weight The weight value associated with this font:
+ *                 - 100: thin
+ *                 - 200: extra-light
+ *                 - 300: light
+ *                 - 400: normal
+ *                 - 500: medium
+ *                 - 600: semi-bold
+ *                 - 700: bold
+ *                 - 800: extra-bold
+ *                 - 900: black
+ */
+export declare function addFont(context: string, fontName: string, fontResource: string, fontType: string, weight?: number, style?: string): void;
+/**
+ * Destroys the embedded fonts for this SPA. This ensures your component does
+ * not cause leaks
+ *
+ * @param context Provide the context id for the fonts that should be destroyed.
+ */
+export declare function destroyAllFonts(context: string): void;

package/dist/utils/after-render.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A dubious method to help with dubious times. Used to call for updates during
+ * specialized render callbacks like <Route render>.
+ */
+export declare function afterRender(fn?: () => void): Promise<void>;

package/dist/utils/async-dom-render.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * This method performs a ReactDOM render, but encapsulates the render with a
+ * Promise to make it easier to await the result.
+ */
+export declare function asyncDomRender(element: React.ReactNode, container: Element | DocumentFragment): Promise<void>;