@pantheon-systems/pds-toolkit-react 1.0.0-dev.236 → 1.0.0-dev.238

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.
Files changed (16) hide show
  1. package/_dist/components/buttons/Button/Button.d.ts +1 -1
  2. package/_dist/components/navigation/ButtonNav/ButtonNav.d.ts +5 -1
  3. package/_dist/components/panels/Panel/Panel.d.ts +1 -1
  4. package/_dist/css/component-css/pds-button-nav.css +1 -1
  5. package/_dist/css/component-css/pds-button.css +27 -63
  6. package/_dist/css/component-css/pds-index.css +29 -65
  7. package/_dist/css/component-css/pds-panel.css +1 -1
  8. package/_dist/css/design-tokens/pds-design-tokens-light-mode.css +9 -0
  9. package/_dist/css/pds-components.css +29 -65
  10. package/_dist/css/pds-core.css +1 -1
  11. package/_dist/index.css +1 -1
  12. package/_dist/index.d.ts +1 -0
  13. package/_dist/index.js +1163 -1133
  14. package/_dist/index.js.map +1 -1
  15. package/_dist/utilities/hooks/useKeyPress.d.ts +1 -0
  16. package/package.json +2 -2
package/_dist/components/buttons/Button/Button.d.ts CHANGED
@@ -49,7 +49,7 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
49
49
  /**
50
50
  * Which variant of button to render
51
51
  */
52
- variant?: 'primary' | 'secondary' | 'subtle' | 'brand' | 'brand-secondary' | 'critical' | 'navbar' | 'inline';
52
+ variant?: 'primary' | 'secondary' | 'subtle' | 'brand' | 'brand-secondary' | 'critical' | 'critical-secondary' | 'navbar' | 'inline';
53
53
  /**
54
54
  * Additional class names
55
55
  */
package/_dist/components/navigation/ButtonNav/ButtonNav.d.ts CHANGED
@@ -14,6 +14,10 @@ export interface ButtonNavProps extends ComponentPropsWithoutRef<'nav'> {
14
14
  * Menu items to render.
15
15
  */
16
16
  menuItems?: ButtonNavItem[];
17
+ /**
18
+ * Size of the Buttons.
19
+ */
20
+ size?: 'sm' | 'md';
17
21
  /**
18
22
  * Additional class names
19
23
  */
@@ -22,4 +26,4 @@ export interface ButtonNavProps extends ComponentPropsWithoutRef<'nav'> {
22
26
  /**
23
27
  * ButtonNav UI component
24
28
  */
25
- export declare const ButtonNav: ({ ariaLabel, menuItems, className, ...props }: ButtonNavProps) => React.JSX.Element;
29
+ export declare const ButtonNav: ({ ariaLabel, menuItems, size, className, ...props }: ButtonNavProps) => React.JSX.Element;
package/_dist/components/panels/Panel/Panel.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  import './panel.css';
3
3
  import { GridGapOptions } from '@layouts/layout-types';
4
- type StatusType = 'info' | 'success' | 'warning' | 'critical';
4
+ type StatusType = 'info' | 'success' | 'warning' | 'critical' | 'neutral';
5
5
  export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
6
6
  /**
7
7
  * Panel content.
package/_dist/css/component-css/pds-button-nav.css CHANGED
@@ -1 +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
+ .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}.pds-button-nav--sm .pds-button-nav__item a{font-size:.833rem;height:2rem;padding-inline:.8125rem}.pds-button-nav--sm .pds-button-nav__item .pds-tally__label{font-size:.5625rem}
package/_dist/css/component-css/pds-button.css CHANGED
@@ -1,81 +1,45 @@
1
- a.pds-button,button.pds-button{--button-color-background:var(
2
- --pds-color-button-primary-background-default
3
- );--button-color-foreground:var(
4
- --pds-color-button-primary-foreground-default
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
- --pds-color-button-primary-background-hover
7
- );--button-color-border:var(--pds-color-button-primary-border-hover);--button-color-foreground:var(
8
- --pds-color-button-primary-foreground-hover
9
- )}a.pds-button:active,button.pds-button:active:enabled{--button-color-background:var(
10
- --pds-color-button-primary-background-active
11
- );--button-color-border:var(--pds-color-button-primary-border-active);--button-color-foreground:var(
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{--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(
1
+ a.pds-button,button.pds-button{--button-color-background:var(--pds-color-button-primary-background-default);--button-color-foreground:var(--pds-color-button-primary-foreground-default);--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--full-width{width:100%}.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(--pds-color-button-primary-background-hover);--button-color-border:var(--pds-color-button-primary-border-hover);--button-color-foreground:var(--pds-color-button-primary-foreground-hover)}a.pds-button:active,button.pds-button:active:enabled{--button-color-background:var(--pds-color-button-primary-background-active);--button-color-border:var(--pds-color-button-primary-border-active);--button-color-foreground:var(--pds-color-button-primary-foreground-active)}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
2
  --pds-color-button-secondary-background-default
15
3
  );--button-color-border:var(--pds-color-button-secondary-border-default);--button-color-foreground:var(
16
4
  --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{--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
- --pds-color-button-secondary-background-hover
19
- );--button-color-border:var(--pds-color-button-secondary-border-hover);--button-color-foreground:var(
20
- --pds-color-button-secondary-foreground-hover
21
- )}a.pds-button.pds-button--secondary:active,button.pds-button.pds-button--secondary:active:enabled{--button-color-background:var(
5
+ )}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(--pds-color-button-secondary-background-hover);--button-color-border:var(--pds-color-button-secondary-border-hover);--button-color-foreground:var(--pds-color-button-secondary-foreground-hover)}a.pds-button.pds-button--secondary:active,button.pds-button.pds-button--secondary:active:enabled{--button-color-background:var(
22
6
  --pds-color-button-secondary-background-active
23
7
  );--button-color-border:var(--pds-color-button-secondary-border-active);--button-color-foreground:var(
24
8
  --pds-color-button-secondary-foreground-active
25
- )}a.pds-button.pds-button--subtle,button.pds-button.pds-button--subtle{--button-color-background:var(
26
- --pds-color-button-subtle-background-default
27
- );--button-color-border:var(--pds-color-button-subtle-border-default);--button-color-foreground:var(
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{--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
- --pds-color-button-subtle-background-default
31
- );--button-color-border:var(--pds-color-button-subtle-border-default);--button-color-foreground:var(
32
- --pds-color-button-subtle-foreground-hover
33
- )}a.pds-button.pds-button--subtle:active,button.pds-button.pds-button--subtle:active:enabled{--button-color-background:var(
34
- --pds-color-button-subtle-background-default
35
- );--button-color-border:var(--pds-color-button-subtle-border-default);--button-color-foreground:var(
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{--button-color-background:var(
38
- --pds-color-button-brand-background-default
39
- );--button-color-border:var(--pds-color-button-brand-border-default);--button-color-foreground:var(
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{--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
- --pds-color-button-brand-background-active
43
- );--button-color-border:var(--pds-color-button-brand-border-active);--button-color-foreground:var(
44
- --pds-color-button-brand-foreground-active
45
- )}a.pds-button.pds-button--brand-secondary,button.pds-button.pds-button--brand-secondary{--button-color-background:var(
9
+ )}a.pds-button.pds-button--subtle,button.pds-button.pds-button--subtle{--button-color-background:var(--pds-color-button-subtle-background-default);--button-color-border:var(--pds-color-button-subtle-border-default);--button-color-foreground:var(--pds-color-button-subtle-foreground-default);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(--pds-color-button-subtle-background-default);--button-color-border:var(--pds-color-button-subtle-border-default);--button-color-foreground:var(--pds-color-button-subtle-foreground-hover)}a.pds-button.pds-button--subtle:active,button.pds-button.pds-button--subtle:active:enabled{--button-color-background:var(--pds-color-button-subtle-background-default);--button-color-border:var(--pds-color-button-subtle-border-default);--button-color-foreground:var(--pds-color-button-subtle-foreground-active)}.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(--pds-color-button-brand-background-default);--button-color-border:var(--pds-color-button-brand-border-default);--button-color-foreground:var(--pds-color-button-brand-foreground-default)}.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(--pds-color-button-brand-background-active);--button-color-border:var(--pds-color-button-brand-border-active);--button-color-foreground:var(--pds-color-button-brand-foreground-active)}a.pds-button.pds-button--brand-secondary,button.pds-button.pds-button--brand-secondary{--button-color-background:var(
46
10
  --pds-color-button-brand-secondary-background-default
47
- );--button-color-border:var(
48
- --pds-color-button-brand-secondary-border-default
49
- );--button-color-foreground:var(
11
+ );--button-color-border:var(--pds-color-button-brand-secondary-border-default);--button-color-foreground:var(
50
12
  --pds-color-button-brand-secondary-foreground-default
51
13
  )}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
14
  --pds-color-button-brand-secondary-background-hover
53
- );--button-color-border:var(
54
- --pds-color-button-brand-secondary-border-hover
55
- );--button-color-foreground:var(
15
+ );--button-color-border:var(--pds-color-button-brand-secondary-border-hover);--button-color-foreground:var(
56
16
  --pds-color-button-brand-secondary-foreground-hover
57
17
  )}a.pds-button.pds-button--brand-secondary:active,button.pds-button.pds-button--brand-secondary:active:enabled{--button-color-background:var(
58
18
  --pds-color-button-brand-secondary-background-active
59
- );--button-color-border:var(
60
- --pds-color-button-brand-secondary-border-active
61
- );--button-color-foreground:var(
19
+ );--button-color-border:var(--pds-color-button-brand-secondary-border-active);--button-color-foreground:var(
62
20
  --pds-color-button-brand-secondary-foreground-active
63
21
  )}a.pds-button.pds-button--critical,button.pds-button.pds-button--critical{--button-color-background:var(
64
22
  --pds-color-button-critical-background-default
65
23
  );--button-color-border:var(--pds-color-button-critical-border-default);--button-color-foreground:var(
66
24
  --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{--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
- --pds-color-button-critical-background-hover
69
- );--button-color-border:var(--pds-color-button-critical-border-hover);--button-color-foreground:var(
70
- --pds-color-button-critical-foreground-hover
71
- )}a.pds-button.pds-button--critical:active,button.pds-button.pds-button--critical:active:enabled{--button-color-background:var(
72
- --pds-color-button-critical-background-active
73
- );--button-color-border:var(--pds-color-button-critical-border-active);--button-color-foreground:var(
74
- --pds-color-button-critical-foreground-active
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
- --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{--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
- --pds-color-button-navbar-foreground-hover
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
- --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{--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}}
25
+ )}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:#f3c9c6;--spinner-color-3:#d46961}a.pds-button.pds-button--critical:hover,button.pds-button.pds-button--critical:hover:enabled{--button-color-background:var(--pds-color-button-critical-background-hover);--button-color-border:var(--pds-color-button-critical-border-hover);--button-color-foreground:var(--pds-color-button-critical-foreground-hover)}a.pds-button.pds-button--critical:active,button.pds-button.pds-button--critical:active:enabled{--button-color-background:var(--pds-color-button-critical-background-active);--button-color-border:var(--pds-color-button-critical-border-active);--button-color-foreground:var(--pds-color-button-critical-foreground-active)}a.pds-button.pds-button--critical-secondary,button.pds-button.pds-button--critical-secondary{--button-color-background:var(
26
+ --pds-color-button-critical-secondary-background-default
27
+ );--button-color-border:var(
28
+ --pds-color-button-critical-secondary-border-default
29
+ );--button-color-foreground:var(
30
+ --pds-color-button-critical-secondary-foreground-default
31
+ )}a.pds-button.pds-button--critical-secondary .pds-button__loading-indicator,button.pds-button.pds-button--critical-secondary .pds-button__loading-indicator{--spinner-color-1:var(
32
+ --pds-color-button-critical-secondary-foreground-default
33
+ );--spinner-color-2:#d46961;--spinner-color-3:#f3c9c6}a.pds-button.pds-button--critical-secondary:hover,button.pds-button.pds-button--critical-secondary:hover:enabled{--button-color-background:var(
34
+ --pds-color-button-critical-secondary-background-hover
35
+ );--button-color-border:var(
36
+ --pds-color-button-critical-secondary-border-hover
37
+ );--button-color-foreground:var(
38
+ --pds-color-button-critical-secondary-foreground-hover
39
+ )}a.pds-button.pds-button--critical-secondary:active,button.pds-button.pds-button--critical-secondary:active:enabled{--button-color-background:var(
40
+ --pds-color-button-critical-secondary-background-active
41
+ );--button-color-border:var(
42
+ --pds-color-button-critical-secondary-border-active
43
+ );--button-color-foreground:var(
44
+ --pds-color-button-critical-secondary-foreground-active
45
+ )}a.pds-button.pds-button--navbar,button.pds-button.pds-button--navbar{--button-color-background:transparent;--button-color-border:transparent;--button-color-foreground:var(--pds-color-button-navbar-foreground-default);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(--pds-color-button-navbar-foreground-hover)}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(--pds-color-button-navbar-foreground-active)}button.pds-button.pds-button--inline{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);font-size:inherit;font-weight:400;height:unset;justify-content:unset;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}}