@pantheon-systems/pds-toolkit-react 1.0.0-dev.25 → 1.0.0-dev.250

package/_dist/components/navigation/navigation-types.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export type NavigationItem = {
+    /**
+     * A boolean indicating whether the item is the active item.
+     */
+    isActive?: boolean;
+    /**
+     * Link content — a fully-formed link element using the router of your choice. If a string is provided instead, the item will be rendered as a link that navigates to the first child item.
+     */
+    linkContent: JSX.Element | string;
+    /**
+     * Submenu items.
+     */
+    links?: NavigationItem[];
+    /**
+     * A boolean indicating whether the item is a submenu.
+     */
+    path?: string;
+};
+export type FlattenedNavigationItem = {
+    /**
+     * A boolean indicating whether the item is the active item.
+     */
+    isActive?: boolean;
+    /**
+     * Link content — a fully-formed link element using the router of your choice.
+     */
+    linkContent: JSX.Element;
+    /**
+     * Nesting level of the item.
+     */
+    level: 'top-level' | 'second-level' | 'third-level' | 'fourth-level';
+};

package/_dist/components/navigation/navigation-utilities.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { NavigationItem } from '@components/navigation/navigation-types';
+export declare const isActiveItem: (item: NavigationItem) => boolean;
+export declare const isActiveTrail: (item: NavigationItem) => boolean;
+export declare const getActiveLink: (items: NavigationItem[]) => JSX.Element | null;
+export declare const getLinkContentString: (linkContent: JSX.Element | string) => string;
+export declare const processNavLinkContent: (linkContent: JSX.Element | string, links?: NavigationItem[]) => JSX.Element | string;

package/_dist/components/notifications/Banner/Banner.d.ts

@@ -0,0 +1,47 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './banner.css';
+type Banner = {
+    id: string;
+    isDismissible?: boolean;
+    message: string | React.ReactNode;
+    onDismiss?: () => void;
+    type?: 'info' | 'warning' | 'critical';
+};
+/**
+ * Prop types for Banner
+ */
+export interface BannerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Array of banner objects
+     */
+    banners: Banner[];
+    /**
+     * Label for the dismiss button
+     */
+    dismissLabel?: string;
+    /**
+     * Label for the next message button
+     */
+    labelNext?: string;
+    /**
+     * Label for the previous message button
+     */
+    labelPrevious?: string;
+    /**
+     * Type labels
+     */
+    typeLabels?: {
+        info: string;
+        warning: string;
+        critical: string;
+    };
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Banner UI component
+ */
+export declare const Banner: ({ banners, dismissLabel, labelNext, labelPrevious, typeLabels, className, ...props }: BannerProps) => React.JSX.Element;
+export {};

package/_dist/components/notifications/InlineMessage/InlineMessage.d.ts

@@ -0,0 +1,37 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './inline-message.css';
+/**
+ * The type of message to display.
+ */
+type MessageType = 'info' | 'success' | 'warning' | 'critical' | 'working';
+/**
+ * Labels for each message type.
+ */
+type TypeLabels = Record<MessageType, string>;
+export interface InlineMessageProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Title text.
+     */
+    title: string;
+    /**
+     * Secondary text.
+     */
+    secondaryText?: ReactNode;
+    /**
+     * Message type.
+     */
+    type: MessageType;
+    /**
+     * Message type labels. Provide translation strings if needed.
+     */
+    typeLabels?: TypeLabels;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * InlineMessage UI component
+ */
+export declare const InlineMessage: ({ title, secondaryText, type, typeLabels, className, ...props }: InlineMessageProps) => React.JSX.Element;
+export {};

package/_dist/components/notifications/SectionMessage/SectionMessage.d.ts

@@ -0,0 +1,47 @@
+import React, { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
+import './section-message.css';
+type MessageType = 'info' | 'success' | 'warning' | 'critical' | 'discovery';
+type TypeLabels = Record<MessageType, string>;
+export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Label for dismiss button. Provide a translation string if needed.
+     */
+    dismissLabel?: string;
+    /**
+     * Unique id of message.
+     */
+    id?: string;
+    /**
+     * Includes dismiss functionality.
+     */
+    isDismissible?: boolean;
+    /**
+     * Message text.
+     */
+    message: ReactNode;
+    /**
+     * Callback function when message is dismissed.
+     */
+    onDismiss?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;
+    /**
+     * Message title.
+     */
+    title?: string;
+    /**
+     * Message type.
+     */
+    type: MessageType;
+    /**
+     * Message type labels. Provide translation strings if needed.
+     */
+    typeLabels?: TypeLabels;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * SectionMessage UI component
+ */
+export declare const SectionMessage: ({ dismissLabel, id, isDismissible, onDismiss, message, title, type, typeLabels, className, ...props }: SectionMessageProps) => React.JSX.Element;
+export {};

package/_dist/components/notifications/Toaster/Toast.d.ts

@@ -0,0 +1,46 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './toaster.css';
+declare const iconTypes: {
+    readonly info: "circleInfo";
+    readonly success: "check";
+    readonly warning: "triangleExclamation";
+    readonly critical: "diamondExclamation";
+};
+type IconType = keyof typeof iconTypes;
+declare const defaultTypeLabels: {
+    readonly info: "Information";
+    readonly success: "Success";
+    readonly warning: "Warning";
+    readonly critical: "Critical";
+    readonly working: "Working...";
+};
+/**
+ * Prop types for Toast
+ */
+interface ToastProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Toast message content.
+     */
+    children?: ReactNode;
+    /**
+     * ID of individual toast.
+     */
+    id?: string;
+    /**
+     * Type of toast to show.
+     */
+    type?: IconType | 'working';
+    /**
+     * Toast type labels. Provide translation strings if needed.
+     */
+    typeLabels?: Partial<typeof defaultTypeLabels>;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Toast UI component
+ */
+export declare const Toast: ({ children, id, type, typeLabels, className, }: ToastProps) => React.JSX.Element;
+export {};

package/_dist/components/notifications/Toaster/Toaster.d.ts

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import 'react-toastify/dist/ReactToastify.css';
+import './toaster.css';
+/**
+ * Prop types for Toast
+ */
+interface ToasterProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Duration in milliseconds before the toast will auto-close.
+     */
+    autoCloseDuration?: number;
+    /**
+     * Maximum number of toasts that can be displayed at once.
+     */
+    limit?: number;
+    /**
+     * Location toast objects will show in the UI.
+     */
+    position?: 'bottom-right' | 'top-right';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Toaster UI component
+ */
+export declare const Toaster: ({ autoCloseDuration, limit, position, className, }: ToasterProps) => React.JSX.Element;
+export {};

package/_dist/components/notifications/Toaster/useToast.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { cssTransition, toast as toastApi, ToastOptions } from 'react-toastify';
+export declare enum ToastType {
+    Critical = "critical",
+    Warning = "warning",
+    Working = "working",
+    Success = "success",
+    Info = "info"
+}
+export declare const useToast: () => [
+    (type: ToastType, message: string | ReactElement, options?: ToastOptions) => string | number,
+    typeof toastApi,
+    ReturnType<typeof cssTransition>
+];

package/_dist/components/panels/ExpansionPanel/ExpansionPanel.d.ts

@@ -0,0 +1,32 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './expansion-panel.css';
+/**
+ * Prop types for ExpansionPanel
+ */
+interface ExpansionPanelProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The content of the expansion panel.
+     */
+    children?: ReactNode;
+    /**
+     * The ID of the expansion panel. If not provided, a unique ID will be generated.
+     */
+    id?: string;
+    /**
+     * Whether the expansion panel is open or not.
+     */
+    isOpen?: boolean;
+    /**
+     * The summary label of the expansion panel.
+     */
+    summary?: string | ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ExpansionPanel UI component
+ */
+export declare const ExpansionPanel: ({ children, id, isOpen, summary, className, ...props }: ExpansionPanelProps) => React.JSX.Element;
+export {};

package/_dist/components/panels/ExpansionPanelGroup/ExpansionPanelGroup.d.ts

@@ -0,0 +1,24 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './expansion-panel-group.css';
+/**
+ * Prop types for ExpansionPanelGroup
+ */
+interface ExpansionPanelGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The content of the expansion panel group. This should be a series of ExpansionPanel components.
+     */
+    children?: ReactNode;
+    /**
+     * The display type of the expansion panel group.
+     */
+    displayType?: 'standard' | 'no-border' | 'stacked';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ExpansionPanelGroup UI component
+ */
+export declare const ExpansionPanelGroup: ({ children, displayType, className, ...props }: ExpansionPanelGroupProps) => React.JSX.Element;
+export {};

package/_dist/components/panels/Panel/Panel.d.ts

@@ -0,0 +1,35 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './panel.css';
+import { GridGapOptions } from '@layouts/layout-types';
+type StatusType = 'info' | 'success' | 'warning' | 'critical' | 'neutral';
+export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Panel content.
+     */
+    children: ReactNode;
+    /**
+     * Should the panel show a status indicator.
+     */
+    hasStatusIndicator?: boolean;
+    /**
+     * Padding for the panel.
+     */
+    padding?: GridGapOptions;
+    /**
+     * Status type for panel. Only renders if `hasStatusIndicator` is true.
+     */
+    statusType?: StatusType;
+    /**
+     * Which variant of panel to render
+     */
+    variant?: 'default' | 'sunken' | 'raised' | 'overlay' | 'critical';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Panel UI component
+ */
+export declare const Panel: ({ children, hasStatusIndicator, padding, statusType, variant, className, ...props }: PanelProps) => React.JSX.Element;
+export {};

package/_dist/components/panels/PanelList/PanelList.d.ts

@@ -0,0 +1,28 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './panel-list.css';
+export type PanelListBackground = 'default' | 'secondary' | 'transparent';
+/**
+ * Prop types for PanelList
+ */
+export interface PanelListProps extends ComponentPropsWithoutRef<'ul'> {
+    /**
+     * Background color for the panel list.
+     */
+    background?: PanelListBackground;
+    /**
+     * Children components. These will only render if PanelRow components are used.
+     */
+    children?: ReactNode;
+    /**
+     * Whether to have an outside border. There will always be a border between rows.
+     */
+    hasBorder?: boolean;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * PanelList UI component
+ */
+export declare const PanelList: ({ background, children, hasBorder, className, ...props }: PanelListProps) => React.JSX.Element;

package/_dist/components/panels/PanelList/PanelRow.d.ts

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './panel-list.css';
+/**
+ * Prop types for PanelRow
+ */
+export interface PanelRowProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Child elements to be assigned to named slots.
+     */
+    children: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Whether the panel row is expandable.
+     */
+    isExpandable?: boolean;
+    /**
+     * Aria-label for the expand button.
+     */
+    expandButtonAriaLabel?: string;
+}
+/**
+ * PanelRow UI component
+ */
+export declare const PanelRow: ({ children, className, isExpandable, expandButtonAriaLabel, ...props }: PanelRowProps) => React.JSX.Element;

package/_dist/components/progress-indicators/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,53 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './progress-bar.css';
+interface ProgressBarBreakpoint {
+    colorType: 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+    percentage: number;
+}
+interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Array of color breakpoints. Each breakpoint should have a `colorType` and `percentage` value.
+     */
+    colorBreakpoints: ProgressBarBreakpoint[];
+    /**
+     * ID of the Progress Bar. If not provided, a unique ID will be generated.
+     */
+    id?: string;
+    /**
+     * Progress Bar label. Will be available to screen readers if `showLabel` is false.
+     */
+    label: string;
+    /**
+     * Message or description used to help clarify the usage of the progress bar.
+     */
+    message?: string;
+    /**
+     * Position of the message relative to the progress bar.
+     */
+    messagePosition?: 'above' | 'below';
+    /**
+     * Percent complete.
+     */
+    percentage: number;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Should the percentage label be visible?
+     */
+    showPercentage?: boolean;
+    /**
+     * Size of the progress bar.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ProgressBar UI component
+ */
+export declare const ProgressBar: ({ colorBreakpoints, id, label, message, messagePosition, percentage, showLabel, showPercentage, size, className, ...props }: ProgressBarProps) => React.JSX.Element;
+export {};

package/_dist/components/progress-indicators/ProgressRing/ProgressRing.d.ts

@@ -0,0 +1,41 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './progress-ring.css';
+interface ProgressRingProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * ID of the Progress Ring. If not provided, a unique ID will be generated.
+     */
+    id?: string;
+    /**
+     * Inner label for the Progress Ring. May be used for showing a percentage or a count of steps.
+     */
+    innerLabel?: ReactNode;
+    /**
+     * Label for the Progress Ring. Will be available to screen readers if `showLabel` is false.
+     */
+    label: string;
+    /**
+     * Percentage of progress.
+     */
+    percentage: number;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Should the percentage be visible? Will be overridden by `innerLabel` if one is provided.
+     */
+    showPercentage?: boolean;
+    /**
+     * Size of the progress ring.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ProgressRing UI component
+ */
+export declare const ProgressRing: ({ id, innerLabel, label, percentage, showLabel, showPercentage, size, className, ...props }: ProgressRingProps) => React.JSX.Element;
+export {};

package/_dist/components/progress-indicators/Spinner/Spinner.d.ts

@@ -0,0 +1,32 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './spinner.css';
+export interface SpinnerProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Spinner color
+     */
+    colorType?: 'full-color' | 'monochromatic' | 'monochromatic-reverse';
+    /**
+     * Should the spinner be an inline element? If true, it will be displayed inline-block without a visible label.
+     */
+    isInline?: boolean;
+    /**
+     * Spinner label. Will be displayed below the Spinner if `showLabel` is true.
+     */
+    label?: string;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Spinner size
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Spinner UI component
+ */
+export declare const Spinner: ({ colorType, isInline, label, showLabel, size, className, ...props }: SpinnerProps) => React.JSX.Element;

package/_dist/components/tiles/AvatarTileList/AvatarTileList.d.ts

@@ -0,0 +1,28 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import '../tiles-common.css';
+import './avatar-tile-list.css';
+export type AvatarTileListItem = {
+    image?: string;
+    alt?: string;
+    name?: string;
+    title?: string;
+    org?: string;
+    linkContent?: ReactNode;
+};
+/**
+ * Prop types for AvatarTileList
+ */
+export interface AvatarTileListProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * List of items for each tile.
+     */
+    listItems: AvatarTileListItem[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * AvatarTileList UI component
+ */
+export declare const AvatarTileList: ({ listItems, className, ...props }: AvatarTileListProps) => React.JSX.Element;

package/_dist/components/tiles/Tile/Tile.d.ts

@@ -0,0 +1,42 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { HeadingLevelCommon } from '@libs/types/custom-types';
+import './../tiles-common.css';
+import './tile.css';
+export type TileDisplayType = 'border' | 'clean' | 'clean-static';
+/**
+ * Prop types for Tile
+ */
+export interface TileProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Display type.
+     */
+    displayType?: TileDisplayType;
+    /**
+     *  Heading level or `span`.
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Heading text.
+     */
+    headingText?: string;
+    /**
+     * Image source.
+     */
+    imageSrc?: string;
+    /**
+     * A link element using the router of your choice.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Summary paragraph.
+     */
+    summary?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Tile UI component
+ */
+export declare const Tile: ({ displayType, headingLevel, headingText, imageSrc, linkContent, summary, className, ...props }: TileProps) => React.JSX.Element;

package/_dist/components/tiles/TileGrid/TileGrid.d.ts

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { TileDisplayType, TileProps } from '@components/tiles/Tile/Tile';
+import { HeadingLevelCommon } from '@libs/types/custom-types';
+import './../tiles-common.css';
+/**
+ * Prop types for TileGrid
+ */
+export interface TileGridProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Display type.
+     */
+    displayType?: TileDisplayType;
+    /**
+     *  Heading level or `span`. All tiles in the grid will use this heading level.
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Array of Tiles.
+     */
+    tiles: TileProps[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * TileGrid UI component
+ */
+export declare const TileGrid: ({ displayType, headingLevel, tiles, className, ...props }: TileGridProps) => React.JSX.Element;

package/_dist/css/component-css/pds-avatar-tile-list.css

@@ -0,0 +1 @@
+.pds-avatar-tile-list a{cursor:pointer;text-decoration:none}.pds-tile-list__image{margin-block-end:1rem}.pds-tile-list__image--avatar img{border-radius:50%;height:auto;width:11rem}.pds-tile-list__name{color:var(--pds-color-foreground-default);font-size:1.44rem;font-weight:700}.pds-tile-list__title{color:var(--pds-color-foreground-default-secondary);font-size:1rem;font-weight:600;margin-block-start:.41rem}.pds-tile-list__org{color:var(--pds-color-foreground-default);font-size:.833rem;font-weight:400;margin-block-start:.125rem}.pds-tile-list__item:focus-visible{outline-width:2px}

package/_dist/css/component-css/pds-avatar.css

@@ -0,0 +1 @@
+.pds-avatar{--avatar-size:1.953rem;--avatar-icon-size:1.125rem;align-items:center;border:1px solid transparent;border-radius:100%;display:inline-flex;justify-content:center}.pds-avatar__content{border-radius:100%;display:flex;height:var(--avatar-size);width:var(--avatar-size)}.pds-avatar__content--link:hover{cursor:pointer;outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:2px}.pds-avatar__content--link:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:2px}.pds-avatar--image{border-color:var(--pds-color-border-default)}.pds-avatar--image .pds-avatar__image{border-radius:100%;height:100%;margin:auto;object-fit:cover;width:100%}.pds-avatar__user-icon{color:var(--pds-color-foreground-reverse);height:var(--avatar-icon-size);width:var(--avatar-icon-size)}.pds-avatar--xs{--avatar-size:1rem;--avatar-icon-size:0.5625rem}.pds-avatar--sm{--avatar-size:1.563rem;--avatar-icon-size:0.875rem}.pds-avatar--md{--avatar-size:1.953rem;--avatar-icon-size:1.125rem}.pds-avatar--lg{--avatar-size:2.441rem;--avatar-icon-size:1.375rem}.pds-avatar--xl{--avatar-size:3.815rem;--avatar-icon-size:2.25rem}

package/_dist/css/component-css/pds-banner.css

@@ -0,0 +1 @@
+.pds-banner-group{--banner-background:var(--pds-color-banner-info-background);--banner-foreground:var(--pds-color-banner-info-foreground);--banner-height:4.678rem;--nav-button-size:1.953rem;min-height:var(--banner-height);position:relative}@media (min-width:641px){.pds-banner-group{--banner-height:3.815rem}}.pds-banner--critical,.pds-banner-group--critical{--banner-background:var(--pds-color-banner-critical-background);--banner-foreground:var(--pds-color-banner-critical-foreground)}.pds-banner--info,.pds-banner-group--info{--banner-background:var(--pds-color-banner-info-background);--banner-foreground:var(--pds-color-banner-info-foreground)}.pds-banner--warning,.pds-banner-group--warning{--banner-background:var(--pds-color-banner-warning-background);--banner-foreground:var(--pds-color-banner-warning-foreground)}.pds-banner{background:var(--banner-background);box-sizing:border-box;color:var(--banner-foreground);font-size:.833rem;height:var(--banner-height);justify-content:space-between;padding-inline:1.953rem;position:absolute;width:100%}.pds-banner,.pds-banner__content{align-items:center;display:flex;gap:.8rem}.pds-banner__icon{flex-grow:0;flex-shrink:0}.pds-banner__message p{all:unset}.pds-banner__message a{color:var(--banner-foreground);padding:.125rem;text-decoration:underline}.pds-banner__message a:hover{background-color:hsla(0,0%,100%,.2);color:var(--banner-foreground);text-decoration:none;transition:all .2s ease-in-out 0s}.pds-banner__message a:focus-visible{outline:1px solid var(--banner-foreground);outline-offset:0}.pds-banner__dismiss-button{all:unset;border-radius:.1875rem;cursor:pointer;padding:.328rem .512rem;transition:all .2s ease-in-out 0s}.pds-banner__dismiss-button:hover{background-color:hsla(0,0%,100%,.2)}.pds-banner__dismiss-button:focus-visible{outline:1px solid var(--banner-foreground);outline-offset:0}.pds-banner-group--multiple .pds-banner{padding-inline:3.052rem}.pds-banner__navigation{display:flex;justify-content:space-between;width:100%}button.pds-banner__nav-button{color:var(--banner-foreground);height:var(--nav-button-size);margin-block:1.375rem;margin-inline:.512rem;min-width:unset;padding:0;transition:all .2s ease-in-out 0s;width:var(--nav-button-size);z-index:calc(var(--pds-z-index-notifications) + 10)}@media (min-width:641px){button.pds-banner__nav-button{margin-block:.9375rem}}button.pds-banner__nav-button:hover:enabled{background-color:hsla(0,0%,100%,.2)}button.pds-banner__nav-button:focus-visible{outline:1px solid var(--banner-foreground);outline-offset:0}.pds-banner--dismissing,.pds-banner--fading{animation:hideBannerAnimation .2s ease-in;animation-fill-mode:forwards}@keyframes hideBannerAnimation{to{opacity:0}0%{opacity:1}}

package/_dist/css/component-css/pds-branch-diff.css

@@ -0,0 +1 @@
+.pds-branch-diff{display:flex;height:2rem;max-width:100%;width:100%}.pds-branch-diff .pds-branch-diff__behind{padding-bottom:4px;position:relative;text-align:right;width:50%}.pds-branch-diff .pds-branch-diff__behind .pds-branch-diff__behind-number{display:block;font-size:.833rem;font-weight:400;line-height:120%;padding-inline:.25rem;position:relative;top:-1px}.pds-branch-diff .pds-branch-diff__behind .pds-branch-diff__behind-line{background-color:var(--pds-color-neutral-300);border-bottom-left-radius:6.25rem;border-top-left-radius:6.25rem;height:8px;min-width:1px;position:absolute;right:0;transition:width .3s ease;width:41.95%}.pds-branch-diff .pds-branch-diff__ahead{border-color:var(--pds-color-neutral-400);border-left-style:solid;border-left-width:1px;padding-bottom:4px;position:relative;text-align:left;width:50%}.pds-branch-diff .pds-branch-diff__ahead .pds-branch-diff__ahead-number{display:block;font-size:.833rem;font-weight:400;line-height:120%;padding-inline:.25rem;position:relative;top:-1px}.pds-branch-diff .pds-branch-diff__ahead .pds-branch-diff__ahead-line{background-color:var(--pds-color-neutral-400);border-bottom-right-radius:6.25rem;border-top-right-radius:6.25rem;height:8px;left:0;min-width:1px;position:absolute;transition:width .3s ease;width:41.95%}.pds-branch-diff .pds-branch-diff__tooltip{padding-inline:0}