@pantheon-systems/pds-toolkit-react 1.0.0-dev.196 → 1.0.0-dev.198

package/_dist/components/FileDiff/FileDiff.d.ts

@@ -0,0 +1,35 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './file-diff.css';
+/**
+ * Prop types for FileDiff
+ */
+export interface FileDiffProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     *  Number of added lines (green bar).
+     */
+    additions: number;
+    /**
+     * Number of removed lines (red bar).
+     */
+    deletions: number;
+    /**
+     * Object with strings for tooltips and screen reader labels.
+     */
+    labelStrings?: {
+        linesChanged?: string;
+        additions?: string;
+        deletions?: string;
+    };
+    /**
+     * Custom width in rems for the component. This will override the default.
+     */
+    componentWidth?: number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * FileDiff UI component
+ */
+export declare const FileDiff: ({ additions, deletions, labelStrings, className, componentWidth, ...props }: FileDiffProps) => React.JSX.Element;

package/_dist/components/Icon/Icon.d.ts

@@ -319,6 +319,10 @@ declare const svgData: {
         readonly path: "M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V304H176c-35.3 0-64 28.7-64 64V512H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM200 352h16c22.1 0 40 17.9 40 40v8c0 8.8-7.2 16-16 16s-16-7.2-16-16v-8c0-4.4-3.6-8-8-8H200c-4.4 0-8 3.6-8 8v80c0 4.4 3.6 8 8 8h16c4.4 0 8-3.6 8-8v-8c0-8.8 7.2-16 16-16s16 7.2 16 16v8c0 22.1-17.9 40-40 40H200c-22.1 0-40-17.9-40-40V392c0-22.1 17.9-40 40-40zm133.1 0H368c8.8 0 16 7.2 16 16s-7.2 16-16 16H333.1c-7.2 0-13.1 5.9-13.1 13.1c0 5.2 3 9.9 7.8 12l37.4 16.6c16.3 7.2 26.8 23.4 26.8 41.2c0 24.9-20.2 45.1-45.1 45.1H304c-8.8 0-16-7.2-16-16s7.2-16 16-16h42.9c7.2 0 13.1-5.9 13.1-13.1c0-5.2-3-9.9-7.8-12l-37.4-16.6c-16.3-7.2-26.8-23.4-26.8-41.2c0-24.9 20.2-45.1 45.1-45.1zm98.9 0c8.8 0 16 7.2 16 16v31.6c0 23 5.5 45.6 16 66c10.5-20.3 16-42.9 16-66V368c0-8.8 7.2-16 16-16s16 7.2 16 16v31.6c0 34.7-10.3 68.7-29.6 97.6l-5.1 7.7c-3 4.5-8 7.1-13.3 7.1s-10.3-2.7-13.3-7.1l-5.1-7.7c-19.3-28.9-29.6-62.9-29.6-97.6V368c0-8.8 7.2-16 16-16z";
         readonly width: "512";
     };
+    readonly fileDiff: {
+        readonly path: "M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zM208 208l0 48 48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l48 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16zM128 384l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z";
+        readonly width: "384";
+    };
     readonly fileExport: {
         readonly path: "M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V288H216c-13.3 0-24 10.7-24 24s10.7 24 24 24H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM384 336V288H494.1l-39-39c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l80 80c9.4 9.4 9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l39-39H384zm0-208H256V0L384 128z";
         readonly width: "576";
@@ -327,6 +331,10 @@ declare const svgData: {
         readonly path: "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z";
         readonly width: "512";
     };
+    readonly fileLines: {
+        readonly path: "M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zM112 256l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z";
+        readonly width: "384";
+    };
     readonly filePDF: {
         readonly path: "M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V304H176c-35.3 0-64 28.7-64 64V512H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM176 352h32c30.9 0 56 25.1 56 56s-25.1 56-56 56H192v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V448 368c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24H192v48h16zm96-80h32c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H304c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H320v96h16zm80-112c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V432 368z";
         readonly width: "512";
@@ -640,5 +648,5 @@ declare const svgData: {
         readonly width: "576";
     };
 };
-export declare const iconList: ("angleDown" | "angleLeft" | "angleRight" | "angleUp" | "anglesLeft" | "anglesRight" | "arrowDownToLine" | "arrowLeft" | "arrowRight" | "asterisk" | "banBug" | "bars" | "barsFilter" | "billboard" | "bitbucket" | "bolt" | "book" | "books" | "bracketRight" | "broomWide" | "building" | "buildings" | "calendarDays" | "ccAmex" | "ccDiscover" | "ccGeneric" | "ccMC" | "ccVisa" | "chartSimple" | "cloud" | "cloudArrowUp" | "cloudPlus" | "code" | "codeBranch" | "codeMerge" | "caretDown" | "caretLeft" | "caretRight" | "caretUp" | "chartLine" | "chartNetwork" | "check" | "circle" | "circleExclamation" | "circleCheck" | "circleInfo" | "circleMinus" | "circleMinusOutline" | "circleNotch" | "circlePlus" | "circlePlusOutline" | "circleQuestion" | "circleXmark" | "command" | "comment" | "copy" | "diamondExclamation" | "diamonds4" | "discourse" | "download" | "drupal" | "ellipsis" | "ellipsisVertical" | "emptySet" | "envelope" | "exclamation" | "externalLink" | "eye" | "eyeSlash" | "facebook" | "file" | "fileContract" | "fileCSV" | "fileExport" | "fileImport" | "filePDF" | "folder" | "gear" | "github" | "gitlab" | "globe" | "globeLine" | "graduationCap" | "grid" | "gripDots" | "gripDotsVertical" | "heart" | "house" | "idCard" | "instagram" | "keySkeleton" | "laptopCode" | "leaf" | "lifeRing" | "linkedin" | "linkSimple" | "linkSimpleSlash" | "magnifyingGlass" | "messages" | "minus" | "moon" | "paperclip" | "paperPlane" | "pen" | "phone" | "play" | "plus" | "quotesLeft" | "quotesRight" | "rectangleList" | "robot" | "rotate" | "rotateClock" | "rss" | "save" | "server" | "shield" | "shovel" | "siren" | "sitemap" | "slack" | "slashForward" | "slidersSimple" | "snowflake" | "sparkles" | "squareCheck" | "squareCode" | "squareMinus" | "squarePen" | "squareQuestion" | "squareTerminal" | "star" | "sun" | "table" | "terminal" | "threads" | "trash" | "triangleExclamation" | "twitter" | "upload" | "user" | "userGear" | "userPlus" | "users" | "video" | "wavePulse" | "windowRestore" | "wordpress" | "wrench" | "xmark" | "xmarkLarge" | "xTwitter" | "youtube")[];
+export declare const iconList: ("angleDown" | "angleLeft" | "angleRight" | "angleUp" | "anglesLeft" | "anglesRight" | "arrowDownToLine" | "arrowLeft" | "arrowRight" | "asterisk" | "banBug" | "bars" | "barsFilter" | "billboard" | "bitbucket" | "bolt" | "book" | "books" | "bracketRight" | "broomWide" | "building" | "buildings" | "calendarDays" | "ccAmex" | "ccDiscover" | "ccGeneric" | "ccMC" | "ccVisa" | "chartSimple" | "cloud" | "cloudArrowUp" | "cloudPlus" | "code" | "codeBranch" | "codeMerge" | "caretDown" | "caretLeft" | "caretRight" | "caretUp" | "chartLine" | "chartNetwork" | "check" | "circle" | "circleExclamation" | "circleCheck" | "circleInfo" | "circleMinus" | "circleMinusOutline" | "circleNotch" | "circlePlus" | "circlePlusOutline" | "circleQuestion" | "circleXmark" | "command" | "comment" | "copy" | "diamondExclamation" | "diamonds4" | "discourse" | "download" | "drupal" | "ellipsis" | "ellipsisVertical" | "emptySet" | "envelope" | "exclamation" | "externalLink" | "eye" | "eyeSlash" | "facebook" | "file" | "fileContract" | "fileCSV" | "fileDiff" | "fileExport" | "fileImport" | "fileLines" | "filePDF" | "folder" | "gear" | "github" | "gitlab" | "globe" | "globeLine" | "graduationCap" | "grid" | "gripDots" | "gripDotsVertical" | "heart" | "house" | "idCard" | "instagram" | "keySkeleton" | "laptopCode" | "leaf" | "lifeRing" | "linkedin" | "linkSimple" | "linkSimpleSlash" | "magnifyingGlass" | "messages" | "minus" | "moon" | "paperclip" | "paperPlane" | "pen" | "phone" | "play" | "plus" | "quotesLeft" | "quotesRight" | "rectangleList" | "robot" | "rotate" | "rotateClock" | "rss" | "save" | "server" | "shield" | "shovel" | "siren" | "sitemap" | "slack" | "slashForward" | "slidersSimple" | "snowflake" | "sparkles" | "squareCheck" | "squareCode" | "squareMinus" | "squarePen" | "squareQuestion" | "squareTerminal" | "star" | "sun" | "table" | "terminal" | "threads" | "trash" | "triangleExclamation" | "twitter" | "upload" | "user" | "userGear" | "userPlus" | "users" | "video" | "wavePulse" | "windowRestore" | "wordpress" | "wrench" | "xmark" | "xmarkLarge" | "xTwitter" | "youtube")[];
 export {};

package/_dist/components/RefreshChecker/RefreshChecker.d.ts

@@ -0,0 +1,46 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './refresh-checker.css';
+/**
+ * Enum for RefreshChecker states
+ */
+export declare enum RefreshCheckerState {
+    DEFAULT = "default",
+    WORKING = "working",
+    CHECKED = "checked"
+}
+/**
+ * Prop types for RefreshChecker
+ */
+interface RefreshCheckerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Custom width in rems for the component. This will override the default.
+     */
+    componentWidth?: number;
+    /**
+     * Internationalization props for labels
+     */
+    labelStrings?: {
+        checkForUpdates?: string;
+        checking?: string;
+        checked?: string;
+        tooltipContent?: string;
+        ariaLabel?: string;
+    };
+    /**
+     * Last checked timestamp
+     */
+    lastChecked?: Date;
+    /**
+     * Callback function when check is triggered
+     */
+    onCheck?: () => Promise<void>;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * RefreshChecker UI component
+ */
+export declare const RefreshChecker: ({ componentWidth, labelStrings, lastChecked, onCheck, className, ...props }: RefreshCheckerProps) => React.JSX.Element;
+export {};

package/_dist/components/badges/IndicatorBadge/IndicatorBadge.d.ts

@@ -15,7 +15,7 @@ export interface IndicatorBadgeProps extends ComponentPropsWithoutRef<'span'> {
     /**
      * Badge size
      */
-    size: 'sm' | 'md';
+    size?: 'sm' | 'md';
     /**
      * Additional class names
      */

package/_dist/components/buttons/IconButton/IconButton.d.ts

@@ -37,7 +37,7 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Which variant of button to render.
      */
-    variant?: 'standard' | 'critical';
+    variant?: 'standard' | 'critical' | 'critical-hover';
     /**
      * Additional class names.
      */

package/_dist/components/buttons/UtilityButton/UtilityButton.d.ts

@@ -0,0 +1,44 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { PDSIcon } from '@components/Icon/Icon';
+import './utility-button.css';
+/**
+ * Prop types for UtilityButton
+ */
+export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional props for the button element.
+     */
+    buttonProps?: ComponentPropsWithoutRef<'button'>;
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Which icon to render.
+     */
+    iconName?: PDSIcon;
+    /**
+     * Is the button critical? If true, the button will be styled as critical on hover and focus.
+     */
+    isCritical?: boolean;
+    /**
+     * The text of the button.
+     */
+    label: string;
+    /**
+     * Click event handler callback.
+     */
+    onClick?: () => void;
+    /**
+     * Tooltip text. Will only be displayed if the button is disabled.
+     */
+    tooltipText?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * UtilityButton UI component
+ */
+export declare const UtilityButton: ({ buttonProps, disabled, iconName, isCritical, label, onClick, tooltipText, className, ...props }: UtilityButtonProps) => React.JSX.Element;

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

@@ -1,19 +1,43 @@
-export function NavMenu({ ariaLabel, colorType, menuItems, mobileMenuMaxWidth, className, ...props }: {
-    [x: string]: any;
-    ariaLabel?: string;
-    colorType?: string;
-    menuItems: any;
+import React, { ComponentPropsWithoutRef } from 'react';
+import './nav-menu.css';
+/**
+ * Prop types for MenuItem
+ */
+export interface MenuItem {
+    id?: string;
+    label: string;
+    links?: MenuItem[];
+    linkContent?: React.ReactNode;
+    isActive?: boolean;
+    isSeparator?: boolean;
+}
+/**
+ * Prop types for NavMenu
+ */
+interface NavMenuProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for `nav` element.
+     */
+    ariaLabel: string;
+    /**
+     * Color scheme.
+     */
+    colorType?: 'default' | 'reverse';
+    /**
+     * Menu Items.
+     */
+    menuItems?: MenuItem[];
+    /**
+     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
     mobileMenuMaxWidth?: number;
-    className: any;
-}): React.JSX.Element;
-export namespace NavMenu {
-    namespace propTypes {
-        let ariaLabel: PropTypes.Validator<string>;
-        let colorType: PropTypes.Requireable<string>;
-        let menuItems: PropTypes.Requireable<any[]>;
-        let mobileMenuMaxWidth: PropTypes.Requireable<number>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * NavMenu UI component
+ */
+export declare const NavMenu: ({ ariaLabel, colorType, menuItems, mobileMenuMaxWidth, className, ...props }: NavMenuProps) => React.JSX.Element;
+export {};

package/_dist/components/navigation/NavMenu/NavMenuDropdown.d.ts

@@ -1,14 +1,24 @@
-export function NavMenuDropdown({ items, label, mobileMenuMaxWidth }: {
-    items: any;
-    label: any;
+import React, { ComponentPropsWithoutRef } from 'react';
+import { MenuItem } from './NavMenu';
+/**
+ * Prop types for NavMenuDropdown
+ */
+interface NavMenuDropdownProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Dropdown items.
+     */
+    items?: MenuItem[];
+    /**
+     * Dropdown label.
+     */
+    label?: string;
+    /**
+     * Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
     mobileMenuMaxWidth?: number;
-}): React.JSX.Element;
-export namespace NavMenuDropdown {
-    namespace propTypes {
-        let items: PropTypes.Requireable<any[]>;
-        let label: PropTypes.Requireable<string>;
-        let mobileMenuMaxWidth: PropTypes.Requireable<number>;
-    }
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * NavMenuDropdown UI component
+ */
+export declare const NavMenuDropdown: ({ items, label, mobileMenuMaxWidth, }: NavMenuDropdownProps) => React.JSX.Element;
+export {};

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

@@ -78,4 +78,4 @@ a.pds-button,button.pds-button{--pds-button-color-background:var(
 		--pds-color-button-navbar-foreground-hover
 	)}a.pds-button.pds-button--navbar:active,button.pds-button.pds-button--navbar:active:enabled{--pds-button-color-background:transparent;--pds-button-color-border:transparent;--pds-button-color-foreground:var(
 		--pds-color-button-navbar-foreground-active
-	)}button.pds-button.pds-button--inline{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);font-size:inherit;font-weight:400;height:unset;justify-content:unset;max-height:unset;padding:0;text-decoration:underline;transition:all .2s ease-in-out 0s}button.pds-button.pds-button--inline .pds-button__loading-indicator{--pds-spinner-color-1:#23232d;--pds-spinner-color-2:#6d6d78;--pds-spinner-color-3:#cfcfd3}button.pds-button.pds-button--inline:hover:enabled{color:var(--pds-color-interactive-link-hover);text-decoration:none}button.pds-button.pds-button--inline:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus);outline-offset:.125rem;text-decoration:none}.pds-button-group,.pds-button-group--lg{display:flex;flex-direction:column;row-gap:1rem;width:100%}.pds-button-group a.pds-button.pds-button--subtle,.pds-button-group button.pds-button.pds-button--subtle,.pds-button-group--lg a.pds-button.pds-button--subtle,.pds-button-group--lg button.pds-button.pds-button--subtle{margin-block:-.512rem}@media (min-width:641px){.pds-button-group a.pds-button.pds-button--subtle,.pds-button-group button.pds-button.pds-button--subtle,.pds-button-group--lg a.pds-button.pds-button--subtle,.pds-button-group--lg button.pds-button.pds-button--subtle{margin-block:unset;margin-inline:-.25rem}.pds-button-group{column-gap:1.25rem;flex-direction:row;width:unset}.pds-button-group--lg{column-gap:1.563rem}}
+	)}button.pds-button.pds-button--inline{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);font-size:inherit;font-weight:400;height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding:0;transition:all .2s ease-in-out 0s}button.pds-button.pds-button--inline .pds-button__loading-indicator{--pds-spinner-color-1:#23232d;--pds-spinner-color-2:#6d6d78;--pds-spinner-color-3:#cfcfd3}button.pds-button.pds-button--inline:hover:enabled{color:var(--pds-color-interactive-link-hover);text-decoration:underline}button.pds-button.pds-button--inline:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus);outline-offset:.125rem;text-decoration:none}.pds-button-group,.pds-button-group--lg{display:flex;flex-direction:column;row-gap:1rem;width:100%}.pds-button-group a.pds-button.pds-button--subtle,.pds-button-group button.pds-button.pds-button--subtle,.pds-button-group--lg a.pds-button.pds-button--subtle,.pds-button-group--lg button.pds-button.pds-button--subtle{margin-block:-.512rem}@media (min-width:641px){.pds-button-group a.pds-button.pds-button--subtle,.pds-button-group button.pds-button.pds-button--subtle,.pds-button-group--lg a.pds-button.pds-button--subtle,.pds-button-group--lg button.pds-button.pds-button--subtle{margin-block:unset;margin-inline:-.25rem}.pds-button-group{column-gap:1.25rem;flex-direction:row;width:unset}.pds-button-group--lg{column-gap:1.563rem}}

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

@@ -0,0 +1 @@
+.pds-file-diff{align-items:center;display:flex;gap:.25rem;height:1.0625rem;max-width:100%;width:100%}.pds-file-diff .pds-file-diff__total-changes{color:var(--pds-color-text-default-secondary);font-size:.694rem}.pds-file-diff .pds-file-diff__bars{align-items:center;display:flex;gap:.125rem;width:100%}.pds-file-diff .pds-file-diff__behind{position:relative}.pds-file-diff .pds-file-diff__behind .pds-file-diff__behind-bar{background-color:var(--pds-color-semantic-critical-foreground);border-bottom-left-radius:6.25rem;border-top-left-radius:6.25rem;height:8px;min-width:1px;right:0;transition:width .3s ease;width:100%}.pds-file-diff .pds-file-diff__ahead{position:relative}.pds-file-diff .pds-file-diff__ahead .pds-file-diff__ahead-bar{background-color:var(--pds-color-semantic-success-utility);border-bottom-right-radius:6.25rem;border-top-right-radius:6.25rem;height:8px;left:0;min-width:1px;transition:width .3s ease;width:100%}.pds-file-diff .pds-file-diff__tooltip{display:block;padding-inline:0}

package/_dist/css/component-css/pds-icon-button.css

@@ -14,4 +14,12 @@ button.pds-icon-button{--pds-button-size:2.25rem;--pds-button-color-foreground:v
 		--pds-color-icon-button-critical-background-active
 	);--pds-button-color-foreground:var(
 		--pds-color-icon-button-critical-foreground-default
+	)}button.pds-icon-button--critical-hover{--pds-button-color-background:var(
+		--pds-color-icon-button-standard-background-default
+	);--pds-button-color-background-hover:var(
+		--pds-color-icon-button-critical-background-hover
+	);--pds-button-color-background-active:var(
+		--pds-color-icon-button-critical-background-active
+	)}button.pds-icon-button--critical-hover:hover{--pds-button-color-foreground:var(
+		--pds-color-icon-button-critical-foreground-default
 	)}button.pds-icon-button--sm{--pds-button-size:2rem}button.pds-icon-button--lg{--pds-button-size:3rem}.pds-icon-button__tooltip .pds-tooltip__container{padding:.328rem .512rem}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}