@pantheon-systems/pds-toolkit-react 1.0.0-dev.233 → 1.0.0-dev.235
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_dist/components/Avatar/Avatar.d.ts +2 -3
- package/_dist/components/Modal/Modal.d.ts +5 -1
- package/_dist/components/Popover/Popover.d.ts +5 -1
- package/_dist/components/buttons/CloseButton/CloseButton.d.ts +27 -0
- package/_dist/components/buttons/SegmentedButton/SegmentedButton.d.ts +1 -0
- package/_dist/components/inputs/ComboboxMultiselect/ComboboxMultiselect.d.ts +83 -0
- package/_dist/components/navigation/ButtonNav/ButtonNav.d.ts +25 -0
- package/_dist/css/component-css/pds-avatar.css +1 -1
- package/_dist/css/component-css/pds-banner.css +1 -1
- package/_dist/css/component-css/pds-button-nav.css +1 -0
- package/_dist/css/component-css/pds-button.css +41 -41
- package/_dist/css/component-css/pds-callout.css +1 -1
- package/_dist/css/component-css/pds-checkbox.css +1 -1
- package/_dist/css/component-css/pds-close-button.css +1 -0
- package/_dist/css/component-css/pds-combobox-multiselect.css +2 -0
- package/_dist/css/component-css/pds-dashboard-nav.css +3 -3
- package/_dist/css/component-css/pds-index.css +69 -68
- package/_dist/css/component-css/pds-indicator-badge.css +19 -19
- package/_dist/css/component-css/pds-link-new-window.css +1 -1
- package/_dist/css/component-css/pds-modal.css +1 -1
- package/_dist/css/component-css/pds-popover.css +1 -1
- package/_dist/css/component-css/pds-pricing-card.css +1 -1
- package/_dist/css/component-css/pds-radio-group.css +1 -1
- package/_dist/css/component-css/pds-segmented-button.css +1 -1
- package/_dist/css/component-css/pds-spinner.css +1 -1
- package/_dist/css/component-css/pds-status-badge.css +1 -1
- package/_dist/css/component-css/pds-status-indicator.css +1 -1
- package/_dist/css/component-css/pds-stepper.css +1 -1
- package/_dist/css/component-css/pds-switch.css +2 -2
- package/_dist/css/component-css/pds-tab-menu.css +1 -1
- package/_dist/css/component-css/pds-tabs.css +1 -1
- package/_dist/css/component-css/pds-tag.css +1 -1
- package/_dist/css/component-css/pds-utility-button.css +1 -1
- package/_dist/css/design-tokens/pds-design-tokens-dark-mode.css +19 -19
- package/_dist/css/design-tokens/pds-design-tokens-light-mode.css +10 -10
- package/_dist/css/pds-components.css +69 -68
- package/_dist/css/pds-core.css +1 -1
- package/_dist/css/pds-layouts.css +2 -2
- package/_dist/index.css +1 -1
- package/_dist/index.d.ts +3 -0
- package/_dist/index.js +3806 -3472
- package/_dist/index.js.map +1 -1
- package/_dist/libs/components/utils.d.ts +1 -0
- package/_dist/mocks/data/navigation-items.d.ts +10 -0
- package/package.json +3 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
2
|
import './avatar.css';
|
|
3
|
-
interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
|
|
3
|
+
export interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
|
|
4
4
|
/**
|
|
5
5
|
* Aria label for the avatar when used as a link. This is required if using a link.
|
|
6
6
|
*/
|
|
@@ -20,7 +20,7 @@ interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
20
20
|
/**
|
|
21
21
|
* Avatar size.
|
|
22
22
|
*/
|
|
23
|
-
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
23
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
24
24
|
/**
|
|
25
25
|
* Unique ID associated with the avatar. Can be workspace ID, user ID, email, etc.
|
|
26
26
|
*/
|
|
@@ -34,4 +34,3 @@ interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
34
34
|
* Avatar UI component
|
|
35
35
|
*/
|
|
36
36
|
export declare const Avatar: ({ ariaLabel, hasUserFallback, imageSrc, linkContent, size, uniqueId, className, ...props }: AvatarProps) => React.JSX.Element;
|
|
37
|
-
export {};
|
|
@@ -9,6 +9,10 @@ export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
9
9
|
* Main content for modal.
|
|
10
10
|
*/
|
|
11
11
|
children?: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Text for close button aria-label attribute. Only used if hasCloseButton is true.
|
|
14
|
+
*/
|
|
15
|
+
closeButtonLabel?: string;
|
|
12
16
|
/**
|
|
13
17
|
* Indicates if the built-in close button will be shown.
|
|
14
18
|
*/
|
|
@@ -37,4 +41,4 @@ export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
37
41
|
/**
|
|
38
42
|
* Modal UI component
|
|
39
43
|
*/
|
|
40
|
-
export declare const Modal: ({ ariaLabel, children, hasCloseButton, modalIsOpen, setModalIsOpen, size, title, className, ...props }: ModalProps) => React.JSX.Element;
|
|
44
|
+
export declare const Modal: ({ ariaLabel, children, closeButtonLabel, hasCloseButton, modalIsOpen, setModalIsOpen, size, title, className, ...props }: ModalProps) => React.JSX.Element;
|
|
@@ -6,6 +6,10 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>
|
|
|
6
6
|
* Content to display in the popover.
|
|
7
7
|
*/
|
|
8
8
|
content?: ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Text for close button aria-label attribute. Only used if hasCloseButton is true.
|
|
11
|
+
*/
|
|
12
|
+
closeButtonLabel?: string;
|
|
9
13
|
/**
|
|
10
14
|
* 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.
|
|
11
15
|
*/
|
|
@@ -54,5 +58,5 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>
|
|
|
54
58
|
/**
|
|
55
59
|
* Popover UI component
|
|
56
60
|
*/
|
|
57
|
-
export declare const Popover: ({ content, customTrigger, hasCloseButton, offsetValue, onClose, placement, title, triggerIcon, triggerAccessibleText, popoverIsOpen, setPopoverIsOpen, className, ...props }: PopoverProps) => React.JSX.Element;
|
|
61
|
+
export declare const Popover: ({ content, closeButtonLabel, customTrigger, hasCloseButton, offsetValue, onClose, placement, title, triggerIcon, triggerAccessibleText, popoverIsOpen, setPopoverIsOpen, className, ...props }: PopoverProps) => React.JSX.Element;
|
|
58
62
|
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React, { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import './close-button.css';
|
|
3
|
+
/**
|
|
4
|
+
* Prop types for CloseButton
|
|
5
|
+
*/
|
|
6
|
+
export interface CloseButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
7
|
+
/**
|
|
8
|
+
* Aria-label attribute.
|
|
9
|
+
*/
|
|
10
|
+
ariaLabel?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Size of the icon.
|
|
13
|
+
*/
|
|
14
|
+
iconSize?: 'md' | 'lg' | 'xl';
|
|
15
|
+
/**
|
|
16
|
+
* Click event callback function.
|
|
17
|
+
*/
|
|
18
|
+
onClick?: () => void;
|
|
19
|
+
/**
|
|
20
|
+
* Additional class names.
|
|
21
|
+
*/
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* CloseButton UI component
|
|
26
|
+
*/
|
|
27
|
+
export declare const CloseButton: ({ ariaLabel, iconSize, onClick, className, ...props }: CloseButtonProps) => React.JSX.Element;
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import React, { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import './combobox-multiselect.css';
|
|
3
|
+
type LabelStrings = {
|
|
4
|
+
inputInstructions?: string;
|
|
5
|
+
triggerButton?: string;
|
|
6
|
+
};
|
|
7
|
+
interface OptionProps {
|
|
8
|
+
id: string;
|
|
9
|
+
label: string;
|
|
10
|
+
isAlreadySelected?: boolean;
|
|
11
|
+
}
|
|
12
|
+
type DivProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
|
|
13
|
+
/**
|
|
14
|
+
* Prop types for ComboboxMultiselect
|
|
15
|
+
*/
|
|
16
|
+
export interface ComboboxMultiselectProps extends DivProps {
|
|
17
|
+
/**
|
|
18
|
+
* Is the field disabled?
|
|
19
|
+
*/
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* ID of the combobox multiselect
|
|
23
|
+
*/
|
|
24
|
+
id: string;
|
|
25
|
+
/**
|
|
26
|
+
* Initially selected options
|
|
27
|
+
*/
|
|
28
|
+
initialSelectedItems?: OptionProps[];
|
|
29
|
+
/**
|
|
30
|
+
* Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
31
|
+
*/
|
|
32
|
+
inputWidth?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Are the options in the process of being loaded?
|
|
35
|
+
*/
|
|
36
|
+
isLoading?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Text to display when options are still loading.
|
|
39
|
+
*/
|
|
40
|
+
loadingText?: string;
|
|
41
|
+
/**
|
|
42
|
+
* Label for the combobox multiselect
|
|
43
|
+
*/
|
|
44
|
+
label?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Translation strings for various labels or other visually-hidden text.
|
|
47
|
+
*/
|
|
48
|
+
labelStrings?: LabelStrings;
|
|
49
|
+
/**
|
|
50
|
+
* Text to display when there are no results.
|
|
51
|
+
*/
|
|
52
|
+
noResultsText?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Callback function to run when the selected items change
|
|
55
|
+
*/
|
|
56
|
+
onChange?: (selectedItems: OptionProps[]) => void;
|
|
57
|
+
/**
|
|
58
|
+
* Array of all available options to select from
|
|
59
|
+
*/
|
|
60
|
+
options?: OptionProps[];
|
|
61
|
+
/**
|
|
62
|
+
* Placeholder text for the input
|
|
63
|
+
*/
|
|
64
|
+
placeholder?: string;
|
|
65
|
+
/**
|
|
66
|
+
* Is this field required?
|
|
67
|
+
*/
|
|
68
|
+
required?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Should the label be visible? If false, it will render for screen readers only.
|
|
71
|
+
*/
|
|
72
|
+
showLabel?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Additional class names
|
|
75
|
+
*/
|
|
76
|
+
className?: string;
|
|
77
|
+
}
|
|
78
|
+
export declare const getFilteredOptions: (options: OptionProps[], selectedItems: OptionProps[], inputValue: string) => OptionProps[];
|
|
79
|
+
/**
|
|
80
|
+
* ComboboxMultiselect UI component
|
|
81
|
+
*/
|
|
82
|
+
export declare const ComboboxMultiselect: ({ disabled, id, initialSelectedItems, inputWidth, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showLabel, className, ...props }: ComboboxMultiselectProps) => React.JSX.Element;
|
|
83
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React, { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { NavigationItem } from '@components/navigation/navigation-types';
|
|
3
|
+
import './button-nav.css';
|
|
4
|
+
export type ButtonNavItem = Omit<NavigationItem, 'links'>;
|
|
5
|
+
/**
|
|
6
|
+
* Prop types for ButtonNav
|
|
7
|
+
*/
|
|
8
|
+
export interface ButtonNavProps extends ComponentPropsWithoutRef<'nav'> {
|
|
9
|
+
/**
|
|
10
|
+
* Aria label for the navigation.
|
|
11
|
+
*/
|
|
12
|
+
ariaLabel: string;
|
|
13
|
+
/**
|
|
14
|
+
* Menu items to render.
|
|
15
|
+
*/
|
|
16
|
+
menuItems?: ButtonNavItem[];
|
|
17
|
+
/**
|
|
18
|
+
* Additional class names
|
|
19
|
+
*/
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* ButtonNav UI component
|
|
24
|
+
*/
|
|
25
|
+
export declare const ButtonNav: ({ ariaLabel, menuItems, className, ...props }: ButtonNavProps) => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-avatar{--
|
|
1
|
+
.pds-avatar{--avatar-size:1.953rem;--avatar-icon-size:1.125rem;align-items:center;border:1px solid transparent;border-radius:100%;display:inline-flex;justify-content:center}.pds-avatar__content{border-radius:100%;display:flex;height:var(--avatar-size);width:var(--avatar-size)}.pds-avatar__content--link:hover{cursor:pointer;outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:2px}.pds-avatar__content--link:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:2px}.pds-avatar--image{border-color:var(--pds-color-border-default)}.pds-avatar--image .pds-avatar__image{border-radius:100%;height:100%;margin:auto;object-fit:cover;width:100%}.pds-avatar__user-icon{color:var(--pds-color-foreground-reverse);height:var(--avatar-icon-size);width:var(--avatar-icon-size)}.pds-avatar--xs{--avatar-size:1rem;--avatar-icon-size:0.5625rem}.pds-avatar--sm{--avatar-size:1.563rem;--avatar-icon-size:0.875rem}.pds-avatar--md{--avatar-size:1.953rem;--avatar-icon-size:1.125rem}.pds-avatar--lg{--avatar-size:2.441rem;--avatar-icon-size:1.375rem}.pds-avatar--xl{--avatar-size:3.815rem;--avatar-icon-size:2.25rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-banner-group{--
|
|
1
|
+
.pds-banner-group{--banner-background:var(--pds-color-banner-info-background);--banner-foreground:var(--pds-color-banner-info-foreground);--banner-height:4.678rem;--nav-button-size:1.953rem;min-height:var(--banner-height);position:relative}@media (min-width:641px){.pds-banner-group{--banner-height:3.815rem}}.pds-banner--critical,.pds-banner-group--critical{--banner-background:var(--pds-color-banner-critical-background);--banner-foreground:var(--pds-color-banner-critical-foreground)}.pds-banner--info,.pds-banner-group--info{--banner-background:var(--pds-color-banner-info-background);--banner-foreground:var(--pds-color-banner-info-foreground)}.pds-banner--warning,.pds-banner-group--warning{--banner-background:var(--pds-color-banner-warning-background);--banner-foreground:var(--pds-color-banner-warning-foreground)}.pds-banner{background:var(--banner-background);box-sizing:border-box;color:var(--banner-foreground);font-size:.833rem;height:var(--banner-height);justify-content:space-between;padding-inline:1.953rem;position:absolute;width:100%}.pds-banner,.pds-banner__content{align-items:center;display:flex;gap:.8rem}.pds-banner__icon{flex-grow:0;flex-shrink:0}.pds-banner__message p{all:unset}.pds-banner__message a{color:var(--banner-foreground);padding:.125rem;text-decoration:underline}.pds-banner__message a:hover{background-color:hsla(0,0%,100%,.2);color:var(--banner-foreground);text-decoration:none;transition:all .2s ease-in-out 0s}.pds-banner__message a:focus-visible{outline:1px solid var(--banner-foreground);outline-offset:0}.pds-banner__dismiss-button{all:unset;border-radius:.1875rem;cursor:pointer;padding:.328rem .512rem;transition:all .2s ease-in-out 0s}.pds-banner__dismiss-button:hover{background-color:hsla(0,0%,100%,.2)}.pds-banner__dismiss-button:focus-visible{outline:1px solid var(--banner-foreground);outline-offset:0}.pds-banner-group--multiple .pds-banner{padding-inline:3.052rem}.pds-banner__navigation{display:flex;justify-content:space-between;width:100%}button.pds-banner__nav-button{color:var(--banner-foreground);height:var(--nav-button-size);margin-block:1.375rem;margin-inline:.512rem;min-width:unset;padding:0;transition:all .2s ease-in-out 0s;width:var(--nav-button-size);z-index:calc(var(--pds-z-index-notifications) + 10)}@media (min-width:641px){button.pds-banner__nav-button{margin-block:.9375rem}}button.pds-banner__nav-button:hover:enabled{background-color:hsla(0,0%,100%,.2)}button.pds-banner__nav-button:focus-visible{outline:1px solid var(--banner-foreground);outline-offset:0}.pds-banner--dismissing,.pds-banner--fading{animation:hideBannerAnimation .2s ease-in;animation-fill-mode:forwards}@keyframes hideBannerAnimation{to{opacity:0}0%{opacity:1}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pds-button-nav__menu{display:inline-flex;gap:0;list-style:none;margin:0;padding:0}.pds-button-nav__item a{align-items:center;background-color:transparent;border:1px solid var(--pds-color-border-input);box-sizing:border-box;color:var(--pds-color-segmented-button-foreground-default);column-gap:.41rem;cursor:pointer;display:flex;font-family:Poppins,sans-serif;font-size:1rem;font-weight:600;height:2.25rem;line-height:1;padding-inline:1.01563rem;text-decoration:none;transition:all .2s ease-in-out 0s;white-space:nowrap}.pds-button-nav__item a:hover{background-color:var(--pds-color-segmented-button-background-hover);color:var(--pds-color-segmented-button-foreground-hover)}.pds-button-nav__item a:focus-visible{outline-offset:.0625rem}.pds-button-nav__item:first-child a{border-bottom-left-radius:.1875rem;border-top-left-radius:.1875rem}.pds-button-nav__item:last-child a{border-bottom-right-radius:.1875rem;border-top-right-radius:.1875rem}.pds-button-nav__item:not(:first-child) a{margin-left:-1px}.pds-button-nav__item--active{z-index:1}.pds-button-nav__item--active a{background-color:var(--pds-color-segmented-button-background-active);border:1px solid var(--pds-color-segmented-button-border-active);color:var(--pds-color-segmented-button-foreground-active);transition:all .2s ease-in-out 0s}
|
|
@@ -1,81 +1,81 @@
|
|
|
1
|
-
a.pds-button,button.pds-button{--
|
|
1
|
+
a.pds-button,button.pds-button{--button-color-background:var(
|
|
2
2
|
--pds-color-button-primary-background-default
|
|
3
|
-
);--
|
|
3
|
+
);--button-color-foreground:var(
|
|
4
4
|
--pds-color-button-primary-foreground-default
|
|
5
|
-
);--
|
|
5
|
+
);--button-color-border:var(--pds-color-button-primary-border-default);align-items:center;background-color:var(--button-color-background);border:1px solid var(--button-color-border);border-radius:.1875rem;box-sizing:border-box;color:var(--button-color-foreground);cursor:pointer;display:inline-flex;font-family:Poppins,sans-serif;font-size:1rem;font-weight:600;gap:.64rem;height:2.25rem;justify-content:center;letter-spacing:.025em;line-height:1;max-height:2.25rem;padding:.625rem .8125rem;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{--spinner-size:1rem;--spinner-color-1:#fff;--spinner-color-2:#f1f1f1;--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{--button-color-background:var(
|
|
6
6
|
--pds-color-button-primary-background-hover
|
|
7
|
-
);--
|
|
7
|
+
);--button-color-border:var(--pds-color-button-primary-border-hover);--button-color-foreground:var(
|
|
8
8
|
--pds-color-button-primary-foreground-hover
|
|
9
|
-
)}a.pds-button:active,button.pds-button:active:enabled{--
|
|
9
|
+
)}a.pds-button:active,button.pds-button:active:enabled{--button-color-background:var(
|
|
10
10
|
--pds-color-button-primary-background-active
|
|
11
|
-
);--
|
|
11
|
+
);--button-color-border:var(--pds-color-button-primary-border-active);--button-color-foreground:var(
|
|
12
12
|
--pds-color-button-primary-foreground-active
|
|
13
|
-
)}a.pds-button:focus-visible,button.pds-button:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.0625rem}a.pds-button.pds-button--sm,button.pds-button.pds-button--sm{font-size:.833rem;gap:.41rem;height:2rem;max-height:2rem;padding:.5rem .625rem}a.pds-button.pds-button--sm .pds-button__loading-indicator,button.pds-button.pds-button--sm .pds-button__loading-indicator{--
|
|
13
|
+
)}a.pds-button:focus-visible,button.pds-button:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.0625rem}a.pds-button.pds-button--sm,button.pds-button.pds-button--sm{font-size:.833rem;gap:.41rem;height:2rem;max-height:2rem;padding:.5rem .625rem}a.pds-button.pds-button--sm .pds-button__loading-indicator,button.pds-button.pds-button--sm .pds-button__loading-indicator{--spinner-size:0.8rem}a.pds-button.pds-button--lg,button.pds-button.pds-button--lg{font-size:1.2rem;height:3rem;max-height:3rem;padding:.9375rem 1.25rem}a.pds-button.pds-button--lg .pds-button__loading-indicator,button.pds-button.pds-button--lg .pds-button__loading-indicator{--spinner-size:1.25rem}a.pds-button.pds-button--secondary,button.pds-button.pds-button--secondary{--button-color-background:var(
|
|
14
14
|
--pds-color-button-secondary-background-default
|
|
15
|
-
);--
|
|
15
|
+
);--button-color-border:var(--pds-color-button-secondary-border-default);--button-color-foreground:var(
|
|
16
16
|
--pds-color-button-secondary-foreground-default
|
|
17
|
-
)}a.pds-button.pds-button--secondary .pds-button__loading-indicator,button.pds-button.pds-button--secondary .pds-button__loading-indicator{--
|
|
17
|
+
)}a.pds-button.pds-button--secondary .pds-button__loading-indicator,button.pds-button.pds-button--secondary .pds-button__loading-indicator{--spinner-color-1:var(--pds-color-button-secondary-foreground-default);--spinner-color-2:#5f41e5;--spinner-color-3:#e5dbff}a.pds-button.pds-button--secondary:hover,button.pds-button.pds-button--secondary:hover:enabled{--button-color-background:var(
|
|
18
18
|
--pds-color-button-secondary-background-hover
|
|
19
|
-
);--
|
|
19
|
+
);--button-color-border:var(--pds-color-button-secondary-border-hover);--button-color-foreground:var(
|
|
20
20
|
--pds-color-button-secondary-foreground-hover
|
|
21
|
-
)}a.pds-button.pds-button--secondary:active,button.pds-button.pds-button--secondary:active:enabled{--
|
|
21
|
+
)}a.pds-button.pds-button--secondary:active,button.pds-button.pds-button--secondary:active:enabled{--button-color-background:var(
|
|
22
22
|
--pds-color-button-secondary-background-active
|
|
23
|
-
);--
|
|
23
|
+
);--button-color-border:var(--pds-color-button-secondary-border-active);--button-color-foreground:var(
|
|
24
24
|
--pds-color-button-secondary-foreground-active
|
|
25
|
-
)}a.pds-button.pds-button--subtle,button.pds-button.pds-button--subtle{--
|
|
25
|
+
)}a.pds-button.pds-button--subtle,button.pds-button.pds-button--subtle{--button-color-background:var(
|
|
26
26
|
--pds-color-button-subtle-background-default
|
|
27
|
-
);--
|
|
27
|
+
);--button-color-border:var(--pds-color-button-subtle-border-default);--button-color-foreground:var(
|
|
28
28
|
--pds-color-button-subtle-foreground-default
|
|
29
|
-
);font-weight:400;padding:.64rem .25rem}a.pds-button.pds-button--subtle .pds-button__loading-indicator,button.pds-button.pds-button--subtle .pds-button__loading-indicator{--
|
|
29
|
+
);font-weight:400;padding:.64rem .25rem}a.pds-button.pds-button--subtle .pds-button__loading-indicator,button.pds-button.pds-button--subtle .pds-button__loading-indicator{--spinner-color-1:var(--pds-color-button-secondary-foreground-default);--spinner-color-2:#5f41e5;--spinner-color-3:#e5dbff}a.pds-button.pds-button--subtle:hover,button.pds-button.pds-button--subtle:hover:enabled{--button-color-background:var(
|
|
30
30
|
--pds-color-button-subtle-background-default
|
|
31
|
-
);--
|
|
31
|
+
);--button-color-border:var(--pds-color-button-subtle-border-default);--button-color-foreground:var(
|
|
32
32
|
--pds-color-button-subtle-foreground-hover
|
|
33
|
-
)}a.pds-button.pds-button--subtle:active,button.pds-button.pds-button--subtle:active:enabled{--
|
|
33
|
+
)}a.pds-button.pds-button--subtle:active,button.pds-button.pds-button--subtle:active:enabled{--button-color-background:var(
|
|
34
34
|
--pds-color-button-subtle-background-default
|
|
35
|
-
);--
|
|
35
|
+
);--button-color-border:var(--pds-color-button-subtle-border-default);--button-color-foreground:var(
|
|
36
36
|
--pds-color-button-subtle-foreground-active
|
|
37
|
-
)}.pds-background--dark a.pds-button.pds-button--brand,.pds-background--dark button.pds-button.pds-button--brand,a.pds-button.pds-button--brand,button.pds-button.pds-button--brand{--
|
|
37
|
+
)}.pds-background--dark a.pds-button.pds-button--brand,.pds-background--dark button.pds-button.pds-button--brand,a.pds-button.pds-button--brand,button.pds-button.pds-button--brand{--button-color-background:var(
|
|
38
38
|
--pds-color-button-brand-background-default
|
|
39
|
-
);--
|
|
39
|
+
);--button-color-border:var(--pds-color-button-brand-border-default);--button-color-foreground:var(
|
|
40
40
|
--pds-color-button-brand-foreground-default
|
|
41
|
-
)}.pds-background--dark a.pds-button.pds-button--brand .pds-button__loading-indicator,.pds-background--dark button.pds-button.pds-button--brand .pds-button__loading-indicator,a.pds-button.pds-button--brand .pds-button__loading-indicator,button.pds-button.pds-button--brand .pds-button__loading-indicator{--
|
|
41
|
+
)}.pds-background--dark a.pds-button.pds-button--brand .pds-button__loading-indicator,.pds-background--dark button.pds-button.pds-button--brand .pds-button__loading-indicator,a.pds-button.pds-button--brand .pds-button__loading-indicator,button.pds-button.pds-button--brand .pds-button__loading-indicator{--spinner-color-1:#23232d;--spinner-color-2:#726009;--spinner-color-3:#d9b500}.pds-background--dark a.pds-button.pds-button--brand:hover,.pds-background--dark button.pds-button.pds-button--brand:hover:enabled,a.pds-button.pds-button--brand:hover,button.pds-button.pds-button--brand:hover:enabled{--button-color-background:var(--pds-color-button-brand-background-hover);--button-color-border:var(--pds-color-button-brand-border-hover);--button-color-foreground:var(--pds-color-button-brand-foreground-hover)}.pds-background--dark a.pds-button.pds-button--brand:active,.pds-background--dark button.pds-button.pds-button--brand:active:enabled,a.pds-button.pds-button--brand:active,button.pds-button.pds-button--brand:active:enabled{--button-color-background:var(
|
|
42
42
|
--pds-color-button-brand-background-active
|
|
43
|
-
);--
|
|
43
|
+
);--button-color-border:var(--pds-color-button-brand-border-active);--button-color-foreground:var(
|
|
44
44
|
--pds-color-button-brand-foreground-active
|
|
45
|
-
)}a.pds-button.pds-button--brand-secondary,button.pds-button.pds-button--brand-secondary{--
|
|
45
|
+
)}a.pds-button.pds-button--brand-secondary,button.pds-button.pds-button--brand-secondary{--button-color-background:var(
|
|
46
46
|
--pds-color-button-brand-secondary-background-default
|
|
47
|
-
);--
|
|
47
|
+
);--button-color-border:var(
|
|
48
48
|
--pds-color-button-brand-secondary-border-default
|
|
49
|
-
);--
|
|
49
|
+
);--button-color-foreground:var(
|
|
50
50
|
--pds-color-button-brand-secondary-foreground-default
|
|
51
|
-
)}a.pds-button.pds-button--brand-secondary .pds-button__loading-indicator,button.pds-button.pds-button--brand-secondary .pds-button__loading-indicator{--
|
|
51
|
+
)}a.pds-button.pds-button--brand-secondary .pds-button__loading-indicator,button.pds-button.pds-button--brand-secondary .pds-button__loading-indicator{--spinner-color-1:#23232d;--spinner-color-2:#6d6d78;--spinner-color-3:#cfcfd3}a.pds-button.pds-button--brand-secondary:hover,button.pds-button.pds-button--brand-secondary:hover:enabled{--button-color-background:var(
|
|
52
52
|
--pds-color-button-brand-secondary-background-hover
|
|
53
|
-
);--
|
|
53
|
+
);--button-color-border:var(
|
|
54
54
|
--pds-color-button-brand-secondary-border-hover
|
|
55
|
-
);--
|
|
55
|
+
);--button-color-foreground:var(
|
|
56
56
|
--pds-color-button-brand-secondary-foreground-hover
|
|
57
|
-
)}a.pds-button.pds-button--brand-secondary:active,button.pds-button.pds-button--brand-secondary:active:enabled{--
|
|
57
|
+
)}a.pds-button.pds-button--brand-secondary:active,button.pds-button.pds-button--brand-secondary:active:enabled{--button-color-background:var(
|
|
58
58
|
--pds-color-button-brand-secondary-background-active
|
|
59
|
-
);--
|
|
59
|
+
);--button-color-border:var(
|
|
60
60
|
--pds-color-button-brand-secondary-border-active
|
|
61
|
-
);--
|
|
61
|
+
);--button-color-foreground:var(
|
|
62
62
|
--pds-color-button-brand-secondary-foreground-active
|
|
63
|
-
)}a.pds-button.pds-button--critical,button.pds-button.pds-button--critical{--
|
|
63
|
+
)}a.pds-button.pds-button--critical,button.pds-button.pds-button--critical{--button-color-background:var(
|
|
64
64
|
--pds-color-button-critical-background-default
|
|
65
|
-
);--
|
|
65
|
+
);--button-color-border:var(--pds-color-button-critical-border-default);--button-color-foreground:var(
|
|
66
66
|
--pds-color-button-critical-foreground-default
|
|
67
|
-
)}a.pds-button.pds-button--critical .pds-button__loading-indicator,button.pds-button.pds-button--critical .pds-button__loading-indicator{--
|
|
67
|
+
)}a.pds-button.pds-button--critical .pds-button__loading-indicator,button.pds-button.pds-button--critical .pds-button__loading-indicator{--spinner-color-1:var(--pds-color-button-critical-foreground-default);--spinner-color-2:#d46961;--spinner-color-3:#f3c9c6}.pds-button--full-width{width:100%}a.pds-button.pds-button--critical:hover,button.pds-button.pds-button--critical:hover:enabled{--button-color-background:var(
|
|
68
68
|
--pds-color-button-critical-background-hover
|
|
69
|
-
);--
|
|
69
|
+
);--button-color-border:var(--pds-color-button-critical-border-hover);--button-color-foreground:var(
|
|
70
70
|
--pds-color-button-critical-foreground-hover
|
|
71
|
-
)}a.pds-button.pds-button--critical:active,button.pds-button.pds-button--critical:active:enabled{--
|
|
71
|
+
)}a.pds-button.pds-button--critical:active,button.pds-button.pds-button--critical:active:enabled{--button-color-background:var(
|
|
72
72
|
--pds-color-button-critical-background-active
|
|
73
|
-
);--
|
|
73
|
+
);--button-color-border:var(--pds-color-button-critical-border-active);--button-color-foreground:var(
|
|
74
74
|
--pds-color-button-critical-foreground-active
|
|
75
|
-
)}a.pds-button.pds-button--navbar,button.pds-button.pds-button--navbar{--
|
|
75
|
+
)}a.pds-button.pds-button--navbar,button.pds-button.pds-button--navbar{--button-color-background:transparent;--button-color-border:transparent;--button-color-foreground:var(
|
|
76
76
|
--pds-color-button-navbar-foreground-default
|
|
77
|
-
);font-weight:400}a.pds-button.pds-button--navbar .pds-button__loading-indicator,button.pds-button.pds-button--navbar .pds-button__loading-indicator{--
|
|
77
|
+
);font-weight:400}a.pds-button.pds-button--navbar .pds-button__loading-indicator,button.pds-button.pds-button--navbar .pds-button__loading-indicator{--spinner-color-1:#525560;--spinner-color-2:#6a6e7a;--spinner-color-3:#cfcfd3}a.pds-button.pds-button--navbar:hover,button.pds-button.pds-button--navbar:hover:enabled{--button-color-background:transparent;--button-color-border:transparent;--button-color-foreground:var(
|
|
78
78
|
--pds-color-button-navbar-foreground-hover
|
|
79
|
-
)}a.pds-button.pds-button--navbar:active,button.pds-button.pds-button--navbar:active:enabled{--
|
|
79
|
+
)}a.pds-button.pds-button--navbar:active,button.pds-button.pds-button--navbar:active:enabled{--button-color-background:transparent;--button-color-border:transparent;--button-color-foreground:var(
|
|
80
80
|
--pds-color-button-navbar-foreground-active
|
|
81
|
-
)}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{--
|
|
81
|
+
)}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{--spinner-color-1:#23232d;--spinner-color-2:#6d6d78;--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:1px 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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-callout{--
|
|
1
|
+
.pds-callout{--callout--color:var(--pds-color-foreground-default-secondary);border:1px solid var(--callout--color);border-radius:.375rem;display:flex;font-family:Poppins,sans-serif;gap:1rem;padding:1rem;position:relative}.pds-callout__inner{display:flex;gap:1rem;width:100%}.pds-callout__icon{color:var(--callout--color)}.pds-callout__text{width:100%}.pds-callout__main-content>:last-child{margin-block-end:0}.pds-callout__title{font-size:1.2rem;font-weight:700;margin-block-end:1rem}.pds-callout--info{--callout--color:var(--pds-color-status-info-foreground)}.pds-callout--earlyAccess,.pds-callout--success{--callout--color:var(--pds-color-status-success-foreground)}.pds-callout--warning{--callout--color:var(--pds-color-status-warning-foreground)}.pds-callout--critical{--callout--color:var(--pds-color-status-critical-foreground)}.pds-callout--discovery{--callout--color:var(--pds-color-status-discovery-foreground)}.pds-callout--code{--callout--color:var(--pds-color-brand-accent-default)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-checkbox{--
|
|
1
|
+
.pds-checkbox{--checkbox-font-size:1rem;--checkbox-input-size:1rem;--checkbox-input-gap:0.512rem;--checkbox-box-shift:0.09375rem;line-height:1.2}.pds-checkbox--sm{--checkbox-font-size:0.833rem;--checkbox-input-size:0.9rem;--checkbox-box-shift:0.025rem}.pds-checkbox__input-wrapper{display:flex}.pds-checkbox input[type=checkbox]{appearance:none}.pds-checkbox__label{align-items:start;column-gap:var(--checkbox-input-gap);display:grid;grid-template-columns:var(--checkbox-input-size) auto;margin-block-end:0}.pds-checkbox__label-text{color:var(--pds-color-foreground-default);font-size:var(--checkbox-font-size);font-weight:400}.pds-checkbox__label-text--s{font-size:.833rem}.pds-checkbox__box{align-items:center;background-color:var(--pds-color-input-background);border:2px solid var(--pds-color-border-input);border-radius:.1875rem;box-sizing:border-box;display:flex;height:var(--checkbox-input-size);padding:.0625rem;position:relative;top:var(--checkbox-box-shift);width:var(--checkbox-input-size)}.pds-checkbox__box--checked,.pds-checkbox__box--indeterminate{background-color:var(--pds-color-interactive-focus);border-color:var(--pds-color-interactive-focus)}.pds-checkbox__icon{color:var(--pds-color-input-checkbox-checked-foreground)}.pds-checkbox:hover .pds-checkbox__box{cursor:pointer}.pds-checkbox:focus-within .pds-checkbox__box{outline:1px 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(--checkbox-input-size)*2 - var(--checkbox-input-gap))}div.pds-checkbox-group .pds-checkbox--indent-2{margin-inline-start:calc(var(--checkbox-input-size)*4 - var(--checkbox-input-gap)*2)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pds-close-button{align-items:center;background-color:transparent;border:none;border-radius:.1875rem;color:var(--pds-color-foreground-default-secondary);cursor:pointer;display:flex}.pds-close-button:hover{color:var(--pds-color-interactive-link-hover)}.pds-close-button:focus-visible{outline:1px solid var(--pds-color-interactive-focus);transition:outline .2s ease-in-out 0s}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.pds-combobox-multi{position:relative}.pds-combobox-multi:disabled .pds-combobox-multi__input-wrapper{border-color:var(--pds-color-border-disabled)}.pds-combobox-multi__items-wrapper .pds-combobox-multi__selected-item:not(:last-child){display:none}.pds-combobox-multi__selected-item{align-items:center;background:var(--pds-color-neutral-200);border-radius:3px;color:var(--pds-color--neutral-500);display:inline-flex;font-size:.75rem;font-weight:400;gap:.41rem;justify-content:center;line-height:120%;padding:.25rem .512rem;text-wrap:nowrap}.pds-combobox-multi__selected-item:hover{background:var(--pds-color-neutral-300)}.pds-combobox-multi__selected-item:focus-visible{outline:none}.pds-combobox-multi__selected-item-text{margin-top:1px}.pds-combobox-multi__selected-item-remove{border-radius:.1875rem;color:var(--pds-color-foreground-default-secondary);cursor:pointer;display:flex;height:16px;justify-content:center;width:14px}.pds-combobox-multi__selected-item-remove:hover{color:var(--pds-color-foreground-default)}.pds-combobox-multi__selected-item--marked-for-deletion .pds-combobox-multi__selected-item-remove{outline:1px solid var(--pds-color-interactive-focus)}.pds-combobox-multi__input-wrapper{align-items:center;background-color:var(--pds-color-background-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;box-sizing:border-box;column-gap:.512rem;display:flex;gap:.512rem;height:var(--pds-spacing-input-height);justify-content:space-between;padding-inline:.64rem;position:relative;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:100%}.pds-combobox-multi__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:outline .2s ease-in-out 0s}.pds-combobox-multi__counter{display:inline-block;height:24px;position:relative}.pds-combobox-multi__counter-wrapper{display:flex;position:relative}.pds-combobox-multi__counter-layer{width:8px}.pds-combobox-multi__counter-item,.pds-combobox-multi__counter-layer{background:var(--pds-color-neutral-200);border-radius:3px;box-shadow:-3px 0 0 0 var(--pds-color-neutral-000);height:24px}.pds-combobox-multi__counter-item{align-items:center;color:var(--pds-color--neutral-500);display:flex;font-size:.75rem;font-weight:400;justify-content:center;width:20.5px}.pds-combobox-multi__trigger{align-items:center;background-color:transparent;border:none;border-radius:.1875rem;color:var(--pds-color-foreground-default);display:flex;flex-grow:1;height:1.563rem;justify-content:flex-end;margin-inline-start:auto}.pds-combobox-multi__trigger:disabled{cursor:not-allowed}.pds-combobox-multi__trigger:focus-visible{outline:none}.pds-combobox-multi__trigger-icon{color:var(--pds-color-foreground-default-secondary);pointer-events:none;transition:transform .2s ease-in-out 0s}.pds-combobox-multi__trigger[aria-expanded=true]
|
|
2
|
+
.pds-combobox-multi__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-combobox-multi__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);box-sizing:border-box;display:flex;flex-direction:column;margin-block-start:.512rem;max-height:18rem;overflow-x:hidden;overflow-y:auto;position:absolute;width:100%}.pds-combobox-multi__dropdown-list{flex:1;margin-block-start:0;overflow-y:auto;padding:0}.pds-combobox-multi__dropdown-input-wrapper{align-items:center;background-color:var(--pds-color-dropdown-background);border-bottom:1px solid var(--pds-color-border-default);column-gap:.512rem;display:flex;gap:.64rem;padding:.64rem 1rem;position:sticky;top:0;z-index:1}.pds-combobox-multi__dropdown-input{background-color:transparent;border:none;caret-color:var(--pds-color-foreground-default);color:var(--pds-color-foreground-default);flex-grow:1;line-height:1;padding-inline:0;width:100%}.pds-combobox-multi__dropdown-input:focus{outline:none}.pds-combobox-multi__dropdown-input::placeholder{color:var(--pds-color-foreground-default-secondary)}.pds-combobox-multi__dropdown-item{padding:.64rem 1rem}.pds-combobox-multi__dropdown-item-label{align-items:center;display:flex;gap:6px;justify-content:space-between;line-height:normal;width:100%}.pds-combobox-multi__dropdown-item-icon{color:var(--pds-color-status-success-foreground)}.pds-combobox-multi__loading,.pds-combobox-multi__no-results{color:var(--pds-color-foreground-default);font-size:1rem;padding:1rem}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.pds-dashboard-nav{--
|
|
1
|
+
.pds-dashboard-nav{--dashboard-nav-icon-width:1.563rem;--dashboard-nav-space-after-icon:0.64rem;--dashboard-nav-foreground-color:var(
|
|
2
2
|
--pds-color-dashboard-nav-item-foreground-default
|
|
3
|
-
);--
|
|
3
|
+
);--dashboard-nav-outline-color:var(--pds-color-interactive-focus);font-family:Poppins,sans-serif}.pds-dashboard-nav,.pds-dashboard-nav a{color:var(--dashboard-nav-foreground-color)}.pds-dashboard-nav a{text-decoration:none}.pds-dashboard-nav a:focus{box-shadow:none;outline:none}.pds-dashboard-nav a:hover{color:var(--dashboard-nav-foreground-color)}.pds-dashboard-nav a:focus-visible,.pds-dashboard-nav button:focus-visible{border-radius:.375rem;outline:1px solid var(--dashboard-nav-outline-color);outline-offset:-1px}.pds-dashboard-nav .pds-icon{pointer-events:none}.pds-dashboard-nav__logo{box-sizing:content-box;margin-block-end:1.563rem;margin-block-start:.125rem;padding-inline:calc(var(--pds-spacing-dashboard-nav-item-padding) + .1875rem)}.pds-dashboard-nav__menu{display:flex;flex-direction:column;list-style-type:none;margin:0;padding:0;row-gap:.64rem}.pds-dashboard-nav__menu.pds-dashboard-nav__menu--top-level{row-gap:1rem}.pds-dashboard-nav__item{list-style-type:none;margin-bottom:0}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-wrapper{align-items:center;border-radius:.375rem;display:flex;height:var(--pds-spacing-dashboard-nav-item-height);justify-content:space-between;width:100%}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-wrapper:hover{background-color:var(--pds-color-dashboard-nav-item-background-hover);transition:all .2s ease-in-out 0s}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-wrapper a{border-radius:.375rem;box-sizing:border-box;padding-inline:var(--pds-spacing-dashboard-nav-item-padding);width:100%}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-inner{align-items:center;display:flex}.pds-dashboard-nav__item--top-level.pds-dashboard-nav__item--active .pds-dashboard-nav__item-wrapper{--dashboard-nav-foreground-color:var(
|
|
4
4
|
--pds-color-dashboard-nav-item-foreground-active
|
|
5
|
-
);--
|
|
5
|
+
);--dashboard-nav-outline-color:var(--pds-color-brand-primary-default);background-color:var(--pds-color-dashboard-nav-item-background-active)}.pds-dashboard-nav__link-icon{align-items:center;display:flex;flex-grow:0;flex-shrink:0;height:var(--pds-spacing-dashboard-nav-item-height);justify-content:center;margin-inline-end:var(--dashboard-nav-space-after-icon);width:var(--dashboard-nav-icon-width)}.pds-dashboard-nav__link-icon .pds-icon--house,.pds-dashboard-nav__link-icon .pds-icon--robot{margin-block-start:-.125rem}.pds-dashboard-nav__menu--second-level{color:var(--pds-color-dashboard-nav-item-foreground-default);display:none;margin-block-start:.8rem;padding-inline-start:calc(var(--pds-spacing-dashboard-nav-item-padding) + var(--dashboard-nav-icon-width) + var(--dashboard-nav-space-after-icon))}.pds-dashboard-nav__menu--second-level.pds-dashboard-nav__menu--expanded{display:flex;row-gap:.64rem}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level{font-size:.833rem}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level a:hover{color:var(--pds-color-nav-item-default-foreground-hover)}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level.pds-dashboard-nav__item--active a{color:var(--pds-color-nav-item-default-foreground-hover);font-weight:600}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level a:focus-visible{border-radius:1px;outline:1px solid var(--pds-color-interactive-focus);outline-offset:4px;transition:outline .2s ease-in-out 0s}.pds-dashboard-nav__toggle{align-items:center;background-color:transparent;border:none;border-radius:.375rem;color:var(--dashboard-nav-foreground-color);cursor:pointer;display:flex;height:var(--pds-spacing-dashboard-nav-item-height);justify-content:flex-end;padding-inline:var(--pds-spacing-dashboard-nav-item-padding)}.pds-dashboard-nav__toggle .pds-icon{padding-inline:.125rem;transform:rotate(0deg);transition:all .2s ease-in-out 0s}.pds-dashboard-nav__toggle--expanded .pds-icon{transform:rotate(180deg);transition:all .2s ease-in-out 0s}.pds-dashboard-nav__link-label{opacity:1;transition:opacity .1s ease-in-out}.pds-dashboard-nav--collapsed .pds-dashboard-nav__logo svg{width:1.25rem}.pds-dashboard-nav--collapsed .pds-dashboard-nav__link-label{opacity:0;transition:opacity .1s ease-in-out}.pds-dashboard-nav--collapsed .pds-dashboard-nav__menu--second-level.pds-dashboard-nav__menu--expanded{display:none}.pds-dashboard-nav__item--top-level.pds-dashboard-nav__item--collapsed .pds-dashboard-nav__item-wrapper a{width:2.875rem}.pds-dashboard-nav__flyout{background-color:var(--pds-color-dropdown-background);border-radius:.375rem;box-shadow:var(--pds-elevation-overlay);max-width:30rem;padding:.64rem;width:max-content;z-index:200}.pds-dashboard-nav__flyout-heading{color:var(--pds-color-dropdown-heading);font-family:Poppins,sans-serif;font-size:.833rem;font-weight:400;line-height:120%;padding:.64rem .8rem}.pds-dashboard-nav__menu--second-level-flyout{row-gap:0}.pds-dashboard-nav__item--second-level-flyout{background-color:var(--pds-color-dropdown-background);color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:1rem;line-height:120%;margin:0;padding:.64rem .8rem}.pds-dashboard-nav__item--second-level-flyout:hover{background-color:var(--pds-color-dropdown-item-background-hover);border-radius:.375rem}.pds-dashboard-nav__item--second-level-flyout.pds-dashboard-nav__item--active a{color:var(--pds-color-nav-item-default-foreground-active);font-weight:600}.pds-dashboard-nav__item--second-level-flyout a:focus-visible{border-radius:1px;outline:1px solid var(--pds-color-interactive-focus);outline-offset:4px;transition:outline .2s ease-in-out 0s}.pds-dashboard-nav .pds-tooltip{padding-inline:0}.pds-dashboard-nav .pds-tooltip__container{padding:.25rem .512rem}.pds-dashboard-nav .pds-dropdown-menu .pds-dashboard-nav__item-inner{align-items:center;display:flex}.pds-dashboard-nav .pds-dropdown-menu__trigger{padding-inline:calc(var(--pds-spacing-dashboard-nav-item-padding) - .25rem)}.pds-dashboard-nav .pds-dropdown-menu__item a{padding-block:.41rem;padding-inline:var(--pds-spacing-dashboard-nav-item-padding);width:100%}.pds-dashboard-nav .pds-dropdown-menu__item--second-level{padding-block:.25rem;padding-inline-start:calc(var(--dashboard-nav-icon-width) + var(--dashboard-nav-space-after-icon) + .0625rem)}
|