@pantheon-systems/pds-toolkit-react 1.0.0-dev.152 → 1.0.0-dev.154

package/_dist/components/Tabs/Tabs.d.ts

@@ -1,40 +1,60 @@
-export function Tabs({ ariaLabel, defaultSelected, size, tabs, className, ...props }: {
-    [x: string]: any;
-    ariaLabel: any;
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '@components/Icon/Icon';
+import './tabs.css';
+interface Tabs {
+    /**
+     * Sets if tab disabled (optional)
+     */
+    disabled?: boolean;
+    /**
+     * Adds tab icon (optional)
+     */
+    icon?: PDSIcon;
+    /**
+     * Sets tab label
+     */
+    tabLabel: string;
+    /**
+     * Sets id for tab (optional)
+     */
+    tabId?: string;
+    /**
+     * Sets content inside tab
+     */
+    panelContent: ReactNode;
+}
+interface TabsProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Function to call when the active tab changes
+     */
+    onActiveTabChange?: (activeTabIndex: number) => void;
+    /**
+     * Sets tabset aria label
+     */
+    ariaLabel: string;
+    /**
+     * Sets default selected tab using a zero-based index, defaults to 0
+     */
     defaultSelected?: number;
-    size?: string;
-    tabs: any;
-    className: any;
-}): React.JSX.Element;
-export namespace Tabs {
-    namespace propTypes {
-        let ariaLabel: PropTypes.Validator<string>;
-        let defaultSelected: PropTypes.Requireable<number>;
-        let size: PropTypes.Requireable<string>;
-        let tabs: PropTypes.Requireable<PropTypes.InferProps<{
-            /**
-             * Sets if tab disabled (optional)
-             */
-            disabled: PropTypes.Requireable<boolean>;
-            /**
-             * Adds tab icon (optional)
-             */
-            icon: PropTypes.Requireable<string>;
-            /**
-             * Sets tab label
-             */
-            tabLabel: PropTypes.Validator<string>;
-            /**
-             * Sets id for tab (optional)
-             */
-            tabId: PropTypes.Requireable<string>;
-            /**
-             * Sets content inside tab
-             */
-            panelContent: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        }>[]>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * Sets currently selected tab using a zero-based index
+     */
+    selectedTab?: number;
+    /**
+     * Sets size of tab
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Array of objects for tab data
+     */
+    tabs: Tabs[];
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * Tabs UI component
+ */
+export declare const Tabs: ({ onActiveTabChange, ariaLabel, defaultSelected, selectedTab, size, tabs, className, ...props }: TabsProps) => React.JSX.Element;
+export {};

package/_dist/components/Tooltip/Tooltip.d.ts

@@ -9,6 +9,10 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
      * Text or HTML content to use as the trigger instead of an icon. Leave null to use the icon. This allows passing HTML content to customize the trigger appearance or functionality.
      */
     customTrigger?: ReactNode;
+    /**
+     * Number to provide custom z-index value for the tooltip container
+     */
+    customZIndex?: number;
     /**
      * The spacing between the trigger and the tooltip in pixels. Only applies to tooltips with a custom trigger. Icon triggers have a fixed spacing.
      */
@@ -29,5 +33,5 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Tooltip UI component
  */
-export declare const Tooltip: ({ content, customTrigger, offsetValue, triggerAccessibleText, triggerIcon, className, ...props }: TooltipProps) => React.JSX.Element;
+export declare const Tooltip: ({ content, customTrigger, customZIndex, offsetValue, triggerAccessibleText, triggerIcon, className, ...props }: TooltipProps) => React.JSX.Element;
 export {};

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

@@ -19,28 +19,32 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
      */
     hasTooltip?: boolean;
     /**
-     * Which icon to render
+     * Which icon to render.
      */
     iconName: PDSIcon;
     /**
-     * Click event handler callback
+     * Which icon to render second. If this is set, the button will be animated.
+     */
+    icon2Name?: PDSIcon;
+    /**
+     * Click event handler callback.
      */
     onClick?: () => void;
     /**
-     * Which size of button to render
+     * Which size of button to render.
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Which variant of button to render
+     * Which variant of button to render.
      */
     variant?: 'standard' | 'critical';
     /**
-     * Additional class names
+     * Additional class names.
      */
     className?: string;
 }
 /**
  * IconButton UI component
  */
-export declare const IconButton: ({ ariaLabel, buttonType, disabled, hasTooltip, iconName, onClick, size, variant, className, ...props }: IconButtonProps) => React.JSX.Element;
+export declare const IconButton: ({ ariaLabel, buttonType, disabled, hasTooltip, iconName, icon2Name, onClick, size, variant, className, ...props }: IconButtonProps) => React.JSX.Element;
 export {};

package/_dist/components/inputs/Checkbox/Checkbox.d.ts

@@ -1,5 +1,88 @@
+import React, { ComponentPropsWithoutRef, ChangeEvent, FocusEvent } from 'react';
+import { ValidationStatus } from '../input-types';
+import './checkbox.css';
+/**
+ * Prop types for Checkbox
+ */
+export interface CheckboxProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Checked state of the input. Used to set the checked status of the input field when controlled. Cannot be used in conjunction with the `defaultChecked` prop.
+     */
+    checked?: boolean;
+    /**
+     * Default checked state. Setting this prop automatically makes the input uncontrolled. Cannot be used with the checked prop.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the checkbox.
+     */
+    id: string;
+    /**
+     * Indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Additional props for the `<input>` element.
+     */
+    inputProps?: ComponentPropsWithoutRef<'input'>;
+    /**
+     * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Input label.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the input field.
+     */
+    message?: string;
+    /**
+     * Name attribute of the checkbox.
+     */
+    name?: string;
+    /**
+     * Indent level of the checkbox. Visual styles for creating nested checkboxes. Styles are only applied when the checkbox is an ancestor of a div with the class `pds-checkbox-group`.
+     */
+    nestingLevel?: 0 | 1 | 2;
+    /**
+     * onBlur event handler
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * onChange event handler
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * onFocus event handler
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Value attribute of the checkbox.
+     */
+    value?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
 /**
  * Checkbox UI component
  */
-export const Checkbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/_dist/components/inputs/CheckboxFieldset/CheckboxFieldset.d.ts

@@ -0,0 +1,60 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { ValidationStatus } from '../input-types';
+import '../CheckboxGroup/checkbox-group.css';
+/**
+ * Prop types for CheckboxFieldset
+ */
+export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Individual checkboxes to be rendered within the group.
+     */
+    children: React.ReactNode;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Additional props for the `<fieldset>` element.
+     */
+    fieldsetProps?: ComponentPropsWithoutRef<'fieldset'>;
+    /**
+     * The ID of the checkbox group.
+     */
+    id: string;
+    /**
+     * Width of the field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Field label. Will be rendered as the fieldset legend.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the field.
+     */
+    message?: string;
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label (legend) be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CheckboxFieldset UI component
+ */
+export declare const CheckboxFieldset: ({ children, disabled, fieldsetProps, id, inputWidth, label, message, required, showLabel, validationMessage, validationStatus, className, ...props }: CheckboxGroupWrapperProps) => React.JSX.Element;

package/_dist/components/inputs/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,44 +1,76 @@
-export function CheckboxGroup({ disabled, id, inputWidth, label, message, onChange, options, required, className, ...props }: {
-    [x: string]: any;
+import React, { ComponentPropsWithoutRef } from 'react';
+import { ValidationStatus } from '../input-types';
+import './checkbox-group.css';
+export type CheckboxOption = {
+    checked?: boolean;
     disabled?: boolean;
-    id: any;
-    inputWidth: any;
-    label: any;
-    message: any;
-    onChange: any;
-    options: any;
+    id?: string;
+    label: string;
+    name?: string;
+    value: string;
+};
+/**
+ * Prop types for CheckboxGroup
+ */
+export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Additional props for the `<fieldset>` element.
+     */
+    fieldsetProps?: ComponentPropsWithoutRef<'fieldset'>;
+    /**
+     * The ID of the checkbox group.
+     */
+    id: string;
+    /**
+     * Width of the field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Field label. Will be rendered as the fieldset legend.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the field.
+     */
+    message?: string;
+    /**
+     * onGroupBlur function. Called when all checkboxes have lost focus. Provides an array of checked values.
+     */
+    onGroupBlur?: (checkedOptions: string[]) => void;
+    /**
+     * onValueChange function. Called when the value of any checkbox changes. Provides an array of checked values.
+     */
+    onValueChange?: (updatedOptions: string[]) => void;
+    /**
+     * Array of checkbox options for group.
+     */
+    options: CheckboxOption[];
+    /**
+     * Is the field required?
+     */
     required?: boolean;
-    className: any;
-}): React.JSX.Element;
-export namespace CheckboxGroup {
-    namespace propTypes {
-        let disabled: PropTypes.Requireable<boolean>;
-        let id: PropTypes.Validator<string>;
-        let inputWidth: PropTypes.Requireable<number>;
-        let label: PropTypes.Validator<string>;
-        let message: PropTypes.Requireable<string>;
-        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let options: PropTypes.Requireable<PropTypes.InferProps<{
-            /**
-             * Label of the checkbox.
-             */
-            label: PropTypes.Validator<string>;
-            /**
-             * Value attribute of the checkbox.
-             */
-            value: PropTypes.Validator<string>;
-            /**
-             * Is the checkbox checked initially?
-             */
-            checked: PropTypes.Requireable<boolean>;
-            /**
-             * Is the checkbox disabled?
-             */
-            disabled: PropTypes.Requireable<boolean>;
-        }>[]>;
-        let required: PropTypes.Requireable<boolean>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * Should the label (legend) be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * CheckboxGroup UI component
+ */
+export declare const CheckboxGroup: ({ disabled, fieldsetProps, id, inputWidth, label, message, onGroupBlur, onValueChange, options, required, showLabel, validationMessage, validationStatus, className, ...props }: CheckboxGroupProps) => React.JSX.Element;

package/_dist/components/inputs/InputGroup/InputGroup.d.ts

@@ -1,13 +1,19 @@
-export function InputGroup({ children, className, ...props }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-}): React.JSX.Element;
-export namespace InputGroup {
-    namespace propTypes {
-        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        let className: PropTypes.Requireable<string>;
-    }
+import React, { ComponentPropsWithoutRef } from 'react';
+import './input-group.css';
+/**
+ * Prop types for InputGroup
+ */
+export interface InputGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Input and button elements
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * InputGroup UI component
+ */
+export declare const InputGroup: ({ children, className, ...props }: InputGroupProps) => React.JSX.Element;

package/_dist/components/inputs/Switch/Switch.d.ts

@@ -0,0 +1,74 @@
+import React, { ChangeEvent, ComponentPropsWithoutRef } from 'react';
+import './switch.css';
+type SwitchPlacement = 'right' | 'below';
+/**
+ * Prop types for Switch
+ */
+export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Is the field checked?
+     */
+    checked?: boolean;
+    /**
+     * Initial value for the input field. Only valid if the input is uncontrolled. Cannot be used in conjunction with the `checked` prop.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Input ID.
+     */
+    id: string;
+    /**
+     * Additional props for the `<input>` element.
+     */
+    inputProps?: ComponentPropsWithoutRef<'input'>;
+    /**
+     * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Label of the switch field.
+     */
+    label: string;
+    /**
+     * Message or description used to help clarify the usage of the input.
+     */
+    message?: string;
+    /**
+     * Status text for when switch is off.
+     */
+    offLabel?: string;
+    /**
+     * onChange event handler. Controlled inputs should use this to manage the input value. Uncontrolled inputs will manage their own state, but may still use this to access the event object.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Status text for when switch is on.
+     */
+    onLabel?: string;
+    /**
+     * Is this field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Show toggle status label next to switch. If false, icons will render and the text will still be available to screen readers.
+     */
+    showStatusLabel?: boolean;
+    /**
+     * Determines switch placement, default set to `right`.
+     */
+    switchPlacement?: SwitchPlacement;
+    /**
+     * Additional class names for input.
+     */
+    className?: string;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/_dist/components/inputs/TextInput/TextInput.d.ts

@@ -1,4 +1,5 @@
 import React, { ComponentPropsWithoutRef, ChangeEvent, FocusEvent } from 'react';
+import { ValidationStatus } from '../input-types';
 import './text-input.css';
 type TranslationStringProps = {
     clearButton: string;
@@ -9,7 +10,6 @@ type TranslationStringProps = {
     visibilityToggleShow: string;
 };
 type HtmlInputTypes = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
-type ValidationStatus = 'success' | 'error';
 /**
  * Prop types for TextInput
  */
@@ -23,7 +23,7 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
      */
     counterMaxLength?: number;
     /**
-     * Initial value for the input field. Only valid if the input is uncontrolled. Cannot be used in conjunction with the `value` prop.
+     * Initial value for the input field. Setting this prop automatically makes the input uncontrolled. Cannot be used in conjunction with the `value` prop.
      */
     defaultValue?: string;
     /**

package/_dist/components/inputs/input-types.d.ts

@@ -0,0 +1 @@
+export type ValidationStatus = 'success' | 'error';

package/_dist/components/inputs/input-utilities.d.ts

@@ -8,19 +8,23 @@ export declare const inputCommonClasses: {
     success: string;
     readonly: string;
 };
-export declare const InputLabel: ({ id, label, showLabel, required, disabled, isLegend, }: {
+export declare const RequiredIcon: () => React.JSX.Element;
+export declare const InputLabel: ({ id, label, showLabel, required, disabled, isLegend, className, }: {
     id: string;
     label: string;
     showLabel: boolean;
-    required?: boolean;
-    disabled?: boolean;
+    required: boolean;
+    disabled: boolean;
     isLegend?: boolean;
+    className?: string;
 }) => React.JSX.Element;
-export declare const InputMessage: ({ id, message, hasValidationMessage, validationStatus, }: {
+export declare const InputMessage: ({ id, message, hasValidationMessage, validationMessageHasDecorators, validationStatus, className, }: {
     id: string;
     message: string;
     hasValidationMessage: boolean;
+    validationMessageHasDecorators?: boolean;
     validationStatus: string;
+    className?: string;
 }) => React.JSX.Element;
 type DecoratorVariants = 'search' | 'error' | 'success';
 export declare const InputDecorator: ({ variant }: {
@@ -41,4 +45,11 @@ export declare const CharacterCounter: ({ id, currentLength, maxLength, overLimi
     maxLength: number;
     overLimitMessage: string;
 }) => React.JSX.Element;
+export declare const HiddenLabel: ({ label, ...props }: {
+    [x: string]: any;
+    label: any;
+}) => React.JSX.Element;
+export declare const getInputWidthStyle: (inputWidth: number) => {
+    width: string;
+};
 export {};

package/_dist/css/component-css/pds-checkbox-group.css

@@ -1 +1 @@
-.pds-checkbox-group__options{display:flex;flex-direction:column;list-style-type:none;margin-block:0;padding-inline-start:0;row-gap:.41rem}.pds-checkbox-group__checkbox{align-items:baseline;display:flex}
+.pds-checkbox-group__options{display:flex;flex-direction:column;margin-block-end:.512rem;margin-inline-start:.125rem;row-gap:.8rem}

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

@@ -1 +1 @@
-.pds-checkbox{--pds-checkbox-input-size:1rem;align-items:start;column-gap:.512rem;display:grid;grid-template-columns:var(--pds-checkbox-input-size) auto}.pds-checkbox input[type=checkbox]{appearance:none;background-color:transparent;background-position:50%;background-repeat:no-repeat;background-size:.64rem;border-color:var(--pds-color-input-border-default);border-radius:.1875rem;border-style:solid;border-width:.125rem;height:var(--pds-checkbox-input-size);position:relative;top:.0625rem;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:var(--pds-checkbox-input-size)}.pds-checkbox input[type=checkbox]:disabled{border-color:var(--pds-color-input-border-default);cursor:not-allowed;opacity:50%}.pds-checkbox input[type=checkbox]:focus-visible{border-color:var(--pds-color-interactive-focus);outline:none}.pds-checkbox>label{font-size:1rem;font-weight:400;margin-block-end:0}.pds-checkbox input[type=checkbox]:checked,.pds-checkbox input[type=checkbox]:indeterminate{background-color:var(--pds-color-interactive-focus);border-color:var(--pds-color-interactive-focus);transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s}.pds-checkbox input[type=checkbox]:checked{background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="%23fff"><path d="m46.219 12-2.157 2.156-24 24L18 40.313l-2.156-2.157-12-12L1.688 24 6 19.781l2.063 2.157L18 31.78 39.844 9.938 42 7.78z"/></svg>')}.pds-checkbox input[type=checkbox]:indeterminate{background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="%23fff"><path d="M40.5 27H8v-5h32.5z"/></svg>')}
+.pds-checkbox{--pds-checkbox-input-size:1rem;--pds-checkbox-input-gap:0.512rem}.pds-checkbox__input-wrapper{display:flex}.pds-checkbox input[type=checkbox]{appearance:none}.pds-checkbox__label{align-items:start;column-gap:var(--pds-checkbox-input-gap);display:grid;grid-template-columns:var(--pds-checkbox-input-size) auto}.pds-checkbox__label-text{color:var(--pds-color-text-default);font-size:1rem;font-weight:400;margin-block-end:0}.pds-checkbox__box{align-items:center;background-color:var(--pds-color-input-background);border:.125rem solid var(--pds-color-input-border-default);border-radius:.1875rem;box-sizing:border-box;display:flex;height:var(--pds-checkbox-input-size);padding:.0625rem;position:relative;top:.09375rem;width:var(--pds-checkbox-input-size)}.pds-checkbox__box--checked,.pds-checkbox__box--indeterminate{background-color:var(--pds-color-input-checked-background);border-color:var(--pds-color-input-checked-background)}.pds-checkbox__icon{color:var(--pds-color-input-checked-foreground)}.pds-checkbox:hover .pds-checkbox__box{cursor:pointer}.pds-checkbox:focus-within .pds-checkbox__box{outline:.0625rem solid var(--pds-color-interactive-focus);outline-offset:.0625rem}.pds-checkbox.pds-is-disabled .pds-checkbox__label{cursor:not-allowed;opacity:50%}.pds-checkbox .pds-input-label__required{margin-inline-start:.125rem}div.pds-checkbox-group .pds-checkbox--indent-1{margin-inline-start:calc(var(--pds-checkbox-input-size)*2 - var(--pds-checkbox-input-gap))}div.pds-checkbox-group .pds-checkbox--indent-2{margin-inline-start:calc(var(--pds-checkbox-input-size)*4 - var(--pds-checkbox-input-gap)*2)}

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

@@ -14,4 +14,4 @@ button.pds-icon-button{--pds-button-size:2.441rem;--pds-button-color-foreground:
 		--pds-color-icon-button-critical-background-active
 	);--pds-button-color-foreground:var(
 		--pds-color-icon-button-critical-foreground-default
-	)}button.pds-icon-button--sm{--pds-button-size:1.953rem}button.pds-icon-button--lg{--pds-button-size:3.052rem}.pds-icon-button__tooltip .pds-tooltip__container{padding:.328rem .512rem}
+	)}button.pds-icon-button--sm{--pds-button-size:1.953rem}button.pds-icon-button--lg{--pds-button-size:3.052rem}.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)}}