@pantheon-systems/pds-toolkit-react 1.0.0-dev.19 → 1.0.0-dev.190

package/_dist/components/navigation/UserMenu/UserMenu.d.ts

@@ -0,0 +1,69 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '@components/Icon/Icon';
+import './user-menu.css';
+/**
+ * Prop types for UserMenuItem
+ */
+export type UserMenuItem = {
+    /**
+     * Use if the menu item should perform an action. This should be a function to be called when the menu item is clicked. Do not use if `linkContent` is provided.
+     */
+    callback?: () => void;
+    /**
+     * Is the menu item disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Icon name for the menu item.
+     */
+    iconName?: PDSIcon;
+    /**
+     * Unique ID for the menu item. Optional.
+     */
+    id?: string;
+    /**
+     * The text to be displayed as the menu item label if a `callback` is provided.
+     */
+    label?: string;
+    /**
+     * Use if the menu item should navigate to another location. This should be a fully-formed link using the router of your choice. Should be used in place of `callback` and `label`.
+     */
+    linkContent?: ReactNode;
+};
+/**
+ * Prop types for UserMenu
+ */
+export interface UserMenuProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Aria label for the user menu.
+     */
+    ariaLabel?: string;
+    /**
+     * Array of menu items.
+     */
+    menuItems?: UserMenuItem[];
+    /**
+     * User email address.
+     */
+    userEmail?: string;
+    /**
+     * Image source for the user avatar.
+     */
+    userImageSrc?: string;
+    /**
+     * User display name.
+     */
+    userName?: string;
+    /**
+     * If true, the workspace selector will be styled and rendered to work with the mobile version of the navbar menu. Defaults to true.
+     */
+    withinNavbar?: boolean;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * UserMenu UI component
+ */
+export declare const UserMenu: ({ ariaLabel, menuItems, userEmail, userImageSrc, userName, withinNavbar, className, ...props }: UserMenuProps) => React.JSX.Element;

package/_dist/components/navigation/UserMenu/user-menu-sample-content.d.ts

@@ -0,0 +1,2 @@
+import { UserMenuItem } from './UserMenu';
+export declare const userMenuItems: UserMenuItem[];

package/_dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts

@@ -0,0 +1,58 @@
+export function WorkspaceSelector({ ariaLabel, createWorkspaceLink, filterPlaceholder, filterLabel, menuHeading, minFilterItems, noResultsText, withinNavbar, workspaceList, className, ...props }: {
+    [x: string]: any;
+    ariaLabel?: string;
+    createWorkspaceLink: any;
+    filterPlaceholder?: string;
+    filterLabel?: string;
+    menuHeading?: string;
+    minFilterItems?: number;
+    noResultsText?: string;
+    withinNavbar?: boolean;
+    workspaceList: any;
+    className: any;
+}): React.JSX.Element;
+export namespace WorkspaceSelector {
+    namespace propTypes {
+        let ariaLabel: PropTypes.Requireable<string>;
+        let createWorkspaceLink: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let filterPlaceholder: PropTypes.Requireable<string>;
+        let filterLabel: PropTypes.Requireable<string>;
+        let menuHeading: PropTypes.Requireable<string>;
+        let minFilterItems: PropTypes.Requireable<number>;
+        let noResultsText: PropTypes.Requireable<string>;
+        let withinNavbar: PropTypes.Requireable<boolean>;
+        let workspaceList: PropTypes.Requireable<PropTypes.InferProps<{
+            /**
+             * Name of the workspace.
+             */
+            displayName: PropTypes.Requireable<string>;
+            /**
+             * Image src for the workspace.
+             */
+            imageSrc: PropTypes.Requireable<string>;
+            /**
+             * Is this the currently selected workspace?
+             */
+            isActive: PropTypes.Requireable<boolean>;
+            /**
+             * This user does not have access to this workspace.
+             */
+            isUnprivileged: PropTypes.Requireable<boolean>;
+            /**
+             * Account plan tier.
+             */
+            planTier: PropTypes.Requireable<string>;
+            /**
+             * Id of the workspace.
+             */
+            workspaceId: PropTypes.Requireable<string>;
+            /**
+             * Link to the workspace. A link element via the router of your choice.
+             */
+            workspaceLink: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        }>[]>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,29 @@
+/// <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[];
+};
+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';
+};

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,13 @@
+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, options?: ToastOptions) => string | number,
+    typeof toastApi,
+    ReturnType<typeof cssTransition>
+];

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,33 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './spinner.css';
+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;
+export {};

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

@@ -0,0 +1,22 @@
+export function AvatarTileList({ darkBackground, listItems, className, ...props }: {
+    [x: string]: any;
+    darkBackground: any;
+    listItems: any;
+    className: any;
+}): React.JSX.Element;
+export namespace AvatarTileList {
+    namespace propTypes {
+        let darkBackground: PropTypes.Requireable<boolean>;
+        let listItems: PropTypes.Requireable<PropTypes.InferProps<{
+            image: PropTypes.Requireable<string>;
+            alt: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<string>;
+            org: PropTypes.Requireable<string>;
+            link: PropTypes.Requireable<string>;
+            linkContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        }>[]>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,26 @@
+export function StatsTileList({ listItems, className, ...props }: {
+    [x: string]: any;
+    listItems: any;
+    className: any;
+}): React.JSX.Element;
+export namespace StatsTileList {
+    namespace propTypes {
+        let listItems: PropTypes.Requireable<PropTypes.InferProps<{
+            /**
+             * Image source
+             */
+            imageSrc: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            /**
+             * Statistic value
+             */
+            stat: PropTypes.Requireable<string>;
+            /**
+             * Statistic description
+             */
+            description: PropTypes.Requireable<string>;
+        }>[]>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,42 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { HeadingLevel } 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?: HeadingLevel;
+    /**
+     * 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 { HeadingLevel } 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?: HeadingLevel;
+    /**
+     * 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--avatar img{border-radius:50%;height:auto;width:11.625rem}@media (--breakpoint-m ){.pds-tile-list__image--avatar img{width:9.75rem}}@media (--breakpoint-l ){.pds-tile-list__image--avatar img{width:11.625rem}}.pds-tile-list__name{color:var(--pds-color-text-default);font-size:1.728rem;font-weight:700}@media (--breakpoint-m ){.pds-tile-list__name{font-size:1.44rem}}@media (--breakpoint-l ){.pds-tile-list__name{font-size:1.728rem}}.pds-tile-list__title{color:var(--pds-color-text-default-secondary);font-size:1.2rem;font-weight:600;margin-block-start:.512rem}@media (--breakpoint-m ){.pds-tile-list__title{font-size:1rem}}@media (--breakpoint-l ){.pds-tile-list__title{font-size:1.2rem}}.pds-tile-list__org{color:var(--pds-color-text-default-secondary);font-family:var(--pds-typography-font-secondary);font-size:1rem;font-weight:400;margin-block-start:.41rem}.pds-tile-list__item:focus-visible{outline-width:2px}

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

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

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

@@ -0,0 +1 @@
+.pds-banner-group{--pds-banner-background:var(--pds-color-banner-info-background);--pds-banner-foreground:var(--pds-color-banner-info-foreground);--pds-banner-height:4.678rem;--pds-nav-button-size:1.953rem;min-height:var(--pds-banner-height);position:relative}@media (min-width:641px){.pds-banner-group{--pds-banner-height:3.815rem}}.pds-banner--critical,.pds-banner-group--critical{--pds-banner-background:var(--pds-color-banner-critical-background);--pds-banner-foreground:var(--pds-color-banner-critical-foreground)}.pds-banner--info,.pds-banner-group--info{--pds-banner-background:var(--pds-color-banner-info-background);--pds-banner-foreground:var(--pds-color-banner-info-foreground)}.pds-banner--warning,.pds-banner-group--warning{--pds-banner-background:var(--pds-color-banner-warning-background);--pds-banner-foreground:var(--pds-color-banner-warning-foreground)}.pds-banner{background:var(--pds-banner-background);box-sizing:border-box;color:var(--pds-banner-foreground);font-size:.833rem;height:var(--pds-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(--pds-banner-foreground);padding:.125rem;text-decoration:underline}.pds-banner__message a:hover{background-color:hsla(0,0%,100%,.2);color:var(--pds-banner-foreground);text-decoration:none;transition:all .2s ease-in-out 0s}.pds-banner__message a:focus-visible{outline:.0625rem solid var(--pds-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:.0625rem solid var(--pds-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(--pds-banner-foreground);height:var(--pds-nav-button-size);margin-block:1.375rem;margin-inline:.512rem;min-width:unset;padding:0;transition:all .2s ease-in-out 0s;width:var(--pds-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:.0625rem solid var(--pds-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-breadcrumbs.css

@@ -0,0 +1 @@
+.pds-breadcrumbs .pds-breadcrumbs__item{display:flex;list-style-type:none}.pds-breadcrumbs .pds-breadcrumbs__item a{text-decoration:none}.pds-breadcrumbs .pds-breadcrumbs__item a:hover{text-decoration:underline}.pds-breadcrumbs .pds-breadcrumbs__item li:not(:last-child):after{bottom:.0625rem;color:var(--pds-color-breadcrumb-separator);content:"/";font-size:.75rem;margin-inline:.8rem;position:relative}.pds-breadcrumbs .pds-breadcrumbs__item li:last-child a{text-decoration:none}.pds-breadcrumbs .pds-breadcrumbs__item li .pds-breadcrumbs__disabled{color:var(--pds-color-breadcrumb-text);cursor:default}.pds-breadcrumbs .pds-breadcrumbs__item li .pds-breadcrumbs__disabled:hover{color:var(--pds-color-breadcrumb-text);text-decoration:none}.pds-breadcrumbs .pds-breadcrumbs__item li .pds-breadcrumbs__disabled .pds-tooltip button{color:var(--pds-color-breadcrumb-text)}.pds-breadcrumbs .pds-breadcrumbs__item .pds-breadcrumbs__expand-button{background:none;border:none;cursor:pointer;display:inline-block;gap:.512rem;outline:inherit;padding:0}@media (max-width:640px){.pds-breadcrumbs .pds-breadcrumbs__item{display:none}}.pds-breadcrumbs .pds-breadcrumbs__hidden,.pds-breadcrumbs__mobileCrumbs{display:none}@media (max-width:640px){.pds-breadcrumbs__mobileCrumbs{align-items:center;display:flex}.pds-breadcrumbs__mobileCrumbs svg{margin-inline-end:.328rem}}