@pantheon-systems/pds-toolkit-react 1.0.0-dev.147 → 1.0.0-dev.149

package/_dist/components/CTALink/CTALink.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './cta-link.css';
 export interface CTALinkProps extends ComponentPropsWithoutRef<'div'> {
     /**

package/_dist/components/Callout/Callout.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import './callout.css';
-interface CalloutProps {
+export interface CalloutProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Callout main content.
      */
@@ -22,4 +22,3 @@ interface CalloutProps {
  * Callout UI component
  */
 export declare const Callout: ({ children, title, type, className, ...props }: CalloutProps) => React.JSX.Element;
-export {};

package/_dist/components/ComparisonList/ComparisonList.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './comparison-list.css';
 interface TypeLabels {
     included: string;
@@ -33,7 +33,7 @@ export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Additional class names
      */
-    className: string;
+    className?: string;
 }
 /**
  * ComparisonList UI component

package/_dist/components/Modal/Modal.d.ts

@@ -1,25 +1,40 @@
-export function Modal({ ariaLabel, children, hasCloseButton, modalIsOpen, setModalIsOpen, size, title, className, ...props }: {
-    [x: string]: any;
-    ariaLabel: any;
-    children: any;
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './modal.css';
+export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Aria label that describes the modal. Will default to the title if not provided.
+     */
+    ariaLabel?: string;
+    /**
+     * Main content for modal.
+     */
+    children?: ReactNode;
+    /**
+     * Indicates if the built-in close button will be shown.
+     */
     hasCloseButton?: boolean;
+    /**
+     * Is the modal open?
+     */
     modalIsOpen?: boolean;
-    setModalIsOpen?: () => void;
-    size?: string;
-    title: any;
-    className: any;
-}): React.JSX.Element;
-export namespace Modal {
-    namespace propTypes {
-        let ariaLabel: PropTypes.Requireable<string>;
-        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let hasCloseButton: PropTypes.Requireable<boolean>;
-        let modalIsOpen: PropTypes.Requireable<boolean>;
-        let setModalIsOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        let size: PropTypes.Requireable<string>;
-        let title: PropTypes.Validator<string>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * Function to set the modal open state.
+     */
+    setModalIsOpen?: (isOpen: boolean) => void;
+    /**
+     * The width of the modal.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Text for modal title
+     */
+    title: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * Modal UI component
+ */
+export declare const Modal: ({ ariaLabel, children, hasCloseButton, modalIsOpen, setModalIsOpen, size, title, className, ...props }: ModalProps) => React.JSX.Element;

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

@@ -1,15 +1,30 @@
-export function Panel({ children, variant, className, ...props }: {
-    [x: string]: any;
-    children: any;
-    variant?: string;
-    className: any;
-}): React.JSX.Element;
-export namespace Panel {
-    namespace propTypes {
-        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        let variant: PropTypes.Requireable<string>;
-        let className: PropTypes.Requireable<string>;
-    }
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './panel.css';
+type StatusType = 'info' | 'success' | 'warning' | 'critical';
+export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Panel content.
+     */
+    children: ReactNode;
+    /**
+     * Should the panel show a status indicator.
+     */
+    hasStatusIndicator?: boolean;
+    /**
+     * 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;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * Panel UI component
+ */
+export declare const Panel: ({ children, hasStatusIndicator, statusType, variant, className, ...props }: PanelProps) => React.JSX.Element;
+export {};

package/_dist/components/Popover/Popover.d.ts

@@ -1,33 +1,57 @@
-export function Popover({ content, customTrigger, hasCloseButton, offsetValue, onClose, placement, title, triggerIcon, triggerAccessibleText, popoverIsOpen, setPopoverIsOpen, className, ...props }: {
-    [x: string]: any;
-    content: any;
-    customTrigger?: boolean;
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './popover.css';
+interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'> {
+    /**
+     * Content to display in the popover.
+     */
+    content?: ReactNode;
+    /**
+     * 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;
+    /**
+     * Indicates if close button will be shown.
+     */
     hasCloseButton?: boolean;
+    /**
+     * Additional spacing between the trigger and the popover. Only applies to popovers with a custom trigger. Icon triggers have a fixed spacing.
+     */
     offsetValue?: number;
+    /**
+     * Callback function that triggers when closing Popover.
+     */
     onClose?: () => void;
-    placement?: string;
-    title: any;
-    triggerIcon?: string;
+    /**
+     * Preferred placement of the popover in relation to the trigger. Will be modified if there is not enough space.
+     */
+    placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /**
+     * Text for popover title
+     */
+    title?: string;
+    /**
+     * The accessible text for the trigger. Only necessary when the trigger is an icon.
+     */
     triggerAccessibleText?: string;
+    /**
+     * Icon to trigger Popover.
+     */
+    triggerIcon?: 'circleInfo' | 'circleQuestion';
+    /**
+     * Is the Popover open?
+     */
     popoverIsOpen?: boolean;
-    setPopoverIsOpen?: () => void;
-    className: any;
-}): React.JSX.Element;
-export namespace Popover {
-    namespace propTypes {
-        let content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let customTrigger: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let hasCloseButton: PropTypes.Requireable<boolean>;
-        let offsetValue: PropTypes.Requireable<number>;
-        let onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        let placement: PropTypes.Requireable<string>;
-        let title: PropTypes.Requireable<string>;
-        let triggerAccessibleText: PropTypes.Requireable<string>;
-        let triggerIcon: PropTypes.Requireable<string>;
-        let popoverIsOpen: PropTypes.Requireable<boolean>;
-        let setPopoverIsOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * Function to set Popover open state
+     */
+    setPopoverIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Additional class names.
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * Popover UI component
+ */
+export declare const Popover: ({ content, customTrigger, hasCloseButton, offsetValue, onClose, placement, title, triggerIcon, triggerAccessibleText, popoverIsOpen, setPopoverIsOpen, className, ...props }: PopoverProps) => React.JSX.Element;
+export {};

package/_dist/components/Skiplink/Skiplink.d.ts

@@ -1,15 +1,21 @@
-export function Skiplink({ destination, text, className, ...props }: {
-    [x: string]: any;
-    destination?: string;
-    text?: string;
-    className: any;
-}): React.JSX.Element;
-export namespace Skiplink {
-    namespace propTypes {
-        let destination: PropTypes.Requireable<string>;
-        let text: PropTypes.Requireable<string>;
-        let className: PropTypes.Requireable<string>;
-    }
+import React, { ComponentPropsWithoutRef } from 'react';
+import './skiplink.css';
+interface SkiplinkProps extends ComponentPropsWithoutRef<'a'> {
+    /**
+     * The ID of the element to skip to.
+     */
+    destination: string;
+    /**
+     * The text of the skip link.
+     */
+    text: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * Skiplink UI component
+ */
+export declare const Skiplink: ({ destination, text, className, ...props }: SkiplinkProps) => React.JSX.Element;
+export {};

package/_dist/components/Tag/Tag.d.ts

@@ -1,23 +1,39 @@
-export function Tag({ linkContent, isRemovable, onRemove, removeLabel, tagColor, tagLabel, className, ...props }: {
-    [x: string]: any;
-    linkContent: any;
-    isRemovable: any;
-    onRemove: any;
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './tag.css';
+export declare let tagColors: string[];
+type TagColor = (typeof tagColors)[number];
+interface TagProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Should the tag be a link? If yes, provide a link element.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Should the tag be removable?
+     */
+    isRemovable?: boolean;
+    /**
+     * Function to execute when the tag is removed.
+     */
+    onRemove?: () => void;
+    /**
+     * Label for the remove button. Tag text will be appended to this label.
+     */
     removeLabel?: string;
-    tagColor: any;
-    tagLabel: any;
-    className: any;
-}): React.JSX.Element;
-export namespace Tag {
-    namespace propTypes {
-        let linkContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let isRemovable: PropTypes.Requireable<boolean>;
-        let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
-        let removeLabel: PropTypes.Requireable<string>;
-        let tagColor: PropTypes.Requireable<string>;
-        let tagLabel: PropTypes.Validator<string>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * Tag color. Will use random color if not selected.
+     */
+    tagColor?: TagColor;
+    /**
+     * Tag text
+     */
+    tagLabel: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * Tag UI component
+ */
+export declare const Tag: ({ linkContent, isRemovable, onRemove, removeLabel, tagColor, tagLabel, className, ...props }: TagProps) => React.JSX.Element;
+export {};

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import './indicator-badge.css';
 /**
  * IndicatorBadge component props
  */
-interface IndicatorBadgeProps {
+export interface IndicatorBadgeProps extends ComponentPropsWithoutRef<'span'> {
     /**
      * Badge color
      */
@@ -25,4 +25,3 @@ interface IndicatorBadgeProps {
  * IndicatorBadge UI component
  */
 export declare const IndicatorBadge: ({ label, size, color, className, ...props }: IndicatorBadgeProps) => React.JSX.Element;
-export {};

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import './status-badge.css';
 /**
  * StatusBadge component props
  */
-interface StatusBadgeProps {
+export interface StatusBadgeProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Background color for badge
      */
@@ -33,4 +33,3 @@ interface StatusBadgeProps {
  * StatusBadge UI component
  */
 export declare const StatusBadge: ({ color, hasStatusIndicator, label, statusIndicatorText, statusType, className, ...props }: StatusBadgeProps) => React.JSX.Element;
-export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import './tally.css';
 interface TypeLabels {
     info?: string;
@@ -10,7 +10,7 @@ interface TypeLabels {
 /**
  * Prop types for Tally
  */
-interface TallyProps {
+export interface TallyProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Label text
      */
@@ -25,7 +25,7 @@ interface TallyProps {
     typeLabels?: TypeLabels;
     /**
      * Additional class names
-    */
+     */
     className?: string;
 }
 /**

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

@@ -4,7 +4,7 @@ import './segmented-button.css';
 /**
  * Prop types for SegmentedButton
  */
-interface SegmentedButtonProps {
+export interface SegmentedButtonProps {
     /**
      * Is the ToggleButton disabled?
      */
@@ -43,4 +43,3 @@ interface SegmentedButtonProps {
  * SegmentedButton UI component
  */
 export declare const SegmentedButton: ({ disabled, id, initialSelection, label, onChange, options, className, ...props }: SegmentedButtonProps) => React.JSX.Element;
-export {};

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

@@ -0,0 +1,123 @@
+import React, { ComponentPropsWithoutRef, ChangeEvent, FocusEvent } from 'react';
+import './text-input.css';
+type TranslationStringProps = {
+    clearButton: string;
+    counterOverLimit?: string;
+    searchShortcut: string;
+    visibilityStatus: string;
+    visibilityToggleHide: string;
+    visibilityToggleShow: string;
+};
+type HtmlInputTypes = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
+type ValidationStatus = 'success' | 'error';
+/**
+ * Prop types for TextInput
+ */
+export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Auto complete attribute for the input field. The attribute value is either the keyword `off` or `on`, or an ordered list of space-separated tokens. Password fields are automatically off.
+     */
+    autoComplete?: string;
+    /**
+     * Maximum character count for the character counter. Leave blank for no counter. Not valid for type `password`.
+     */
+    counterMaxLength?: number;
+    /**
+     * Initial value for the input field. Only valid if the input is uncontrolled. Cannot be used in conjunction with the `value` prop.
+     */
+    defaultValue?: string;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Does the input contain a clear button?
+     */
+    hasClearButton?: boolean;
+    /**
+     * Does the input contain the search shortcut?
+     * Only valid if the input type is `search`.
+     */
+    hasSearchShortcut?: boolean;
+    /**
+     * Input ID.
+     */
+    id: string;
+    /**
+     * 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;
+    /**
+     * onBlur event handler.
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * 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;
+    /**
+     * Function to clear the input field. Only necessary if the input is controlled. This functionality is built-in for uncontrolled inputs.
+     */
+    onClear?: () => void;
+    /**
+     * onFocus event handler.
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Optional placeholder text to display when the input field is empty.
+     */
+    placeholder?: string;
+    /**
+     * Is the field read-only?
+     */
+    readonly?: boolean;
+    /**
+     * Is this field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Toggle visibility of the input value. Valid for type `password` only.
+     */
+    toggleVisibility?: boolean;
+    /**
+     * Translation strings for various labels or other visually-hidden text.
+     */
+    translationStrings?: TranslationStringProps;
+    /**
+     * Type of input field to use.
+     */
+    type: HtmlInputTypes;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Value of the input field. Used to set the value of the input field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     */
+    value?: string;
+    /**
+     * Additional class names for input.
+     */
+    className?: string;
+}
+/**
+ * TextInput UI component
+ */
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,44 @@
+import React, { MouseEventHandler } from 'react';
+import './input-utilities.css';
+export declare const inputCommonClasses: {
+    base: string;
+    disabled: string;
+    required: string;
+    error: string;
+    success: string;
+    readonly: string;
+};
+export declare const InputLabel: ({ id, label, showLabel, required, disabled, isLegend, }: {
+    id: string;
+    label: string;
+    showLabel: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    isLegend?: boolean;
+}) => React.JSX.Element;
+export declare const InputMessage: ({ id, message, hasValidationMessage, validationStatus, }: {
+    id: string;
+    message: string;
+    hasValidationMessage: boolean;
+    validationStatus: string;
+}) => React.JSX.Element;
+type DecoratorVariants = 'search' | 'error' | 'success';
+export declare const InputDecorator: ({ variant }: {
+    variant: DecoratorVariants;
+}) => React.JSX.Element;
+export declare const SearchShortcut: ({ inputId, shortcutLabel, }: {
+    inputId: string;
+    shortcutLabel: string;
+}) => React.JSX.Element;
+export declare const ClearButton: ({ id, clearLabel, handleClearInput, }: {
+    id: string;
+    clearLabel: string;
+    handleClearInput: MouseEventHandler<HTMLButtonElement>;
+}) => React.JSX.Element;
+export declare const CharacterCounter: ({ id, currentLength, maxLength, overLimitMessage, }: {
+    id: string;
+    currentLength: number;
+    maxLength: number;
+    overLimitMessage: string;
+}) => React.JSX.Element;
+export {};

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './inline-message.css';
 /**
  * The type of message to display.

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, MouseEvent, ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
 import './section-message.css';
 type MessageType = 'info' | 'success' | 'warning' | 'critical' | 'discovery';
 type TypeLabels = Record<MessageType, string>;
@@ -38,7 +38,7 @@ export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Additional class names.
      */
-    className: string;
+    className?: string;
 }
 /**
  * SectionMessage UI component

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

@@ -1,21 +1,33 @@
-export function Spinner({ colorType, isInline, label, showLabel, size, className, ...props }: {
-    [x: string]: any;
-    colorType?: string;
+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;
-    size?: string;
+    /**
+     * Spinner size
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+    /**
+     * Additional class names
+     */
     className?: string;
-}): React.JSX.Element;
-export namespace Spinner {
-    namespace propTypes {
-        let colorType: PropTypes.Requireable<string>;
-        let isInline: PropTypes.Requireable<boolean>;
-        let label: PropTypes.Validator<string>;
-        let showLabel: PropTypes.Requireable<boolean>;
-        let size: PropTypes.Requireable<string>;
-        let className: PropTypes.Requireable<string>;
-    }
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * Spinner UI component
+ */
+export declare const Spinner: ({ colorType, isInline, label, showLabel, size, className, ...props }: SpinnerProps) => React.JSX.Element;
+export {};

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

@@ -2,7 +2,7 @@ a.pds-button,button.pds-button{--pds-button-color-background:var(
 		--pds-color-button-primary-background-default
 	);--pds-button-color-foreground:var(
 		--pds-color-button-primary-foreground-default
-	);--pds-button-color-border:var(--pds-color-button-primary-border-default);align-items:center;background-color:var(--pds-button-color-background);border:.0625rem solid var(--pds-button-color-border);border-radius:.1875rem;box-sizing:border-box;color:var(--pds-button-color-foreground);cursor:pointer;display:inline-flex;font-family:Poppins,sans-serif;font-size:1rem;font-weight:600;gap:.64rem;height:2.441rem;justify-content:center;letter-spacing:0;line-height:1;max-height:2.441rem;padding:.64rem .8rem;text-decoration:none;transition:all .2s ease-in-out 0s;white-space:nowrap}.pds-button__icon--wrapper{align-items:center;display:flex}.pds-button__loading-indicator{--pds-spinner-size:1rem;--pds-spinner-color-1:#fff;--pds-spinner-color-2:#f1f1f1;--pds-spinner-color-3:#cfcfd3}a.pds-button:disabled,button.pds-button:disabled{cursor:not-allowed;opacity:50%}a.pds-button:hover,button.pds-button:hover:enabled{--pds-button-color-background:var(
+	);--pds-button-color-border:var(--pds-color-button-primary-border-default);align-items:center;background-color:var(--pds-button-color-background);border:.0625rem solid var(--pds-button-color-border);border-radius:.1875rem;box-sizing:border-box;color:var(--pds-button-color-foreground);cursor:pointer;display:inline-flex;font-family:Poppins,sans-serif;font-size:1rem;font-weight:600;gap:.64rem;height:2.441rem;justify-content:center;letter-spacing:0;line-height:1;max-height:2.441rem;padding:.64rem .8rem;text-decoration:none;transition:all .2s ease-in-out 0s;white-space:nowrap}.pds-button__icon--wrapper{align-items:center;display:flex}.pds-button__icon{flex-shrink:0}.pds-button__loading-indicator{--pds-spinner-size:1rem;--pds-spinner-color-1:#fff;--pds-spinner-color-2:#f1f1f1;--pds-spinner-color-3:#cfcfd3}a.pds-button:disabled,button.pds-button:disabled{cursor:not-allowed;opacity:50%}a.pds-button:hover,button.pds-button:hover:enabled{--pds-button-color-background:var(
 		--pds-color-button-primary-background-hover
 	);--pds-button-color-border:var(--pds-color-button-primary-border-hover);--pds-button-color-foreground:var(
 		--pds-color-button-primary-foreground-hover