@pantheon-systems/pds-toolkit-react 1.0.0-dev.138 → 1.0.0-dev.139
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/CTALink/CTALink.d.ts +19 -14
- package/_dist/components/ComparisonList/ComparisonList.d.ts +41 -31
- package/_dist/components/Icon/Icon.d.ts +1 -1
- package/_dist/components/notifications/InlineMessage/InlineMessage.d.ts +36 -30
- package/_dist/components/notifications/SectionMessage/SectionMessage.d.ts +45 -37
- package/_dist/components/progress-indicators/Spinner/Spinner.d.ts +1 -1
- package/_dist/css/pds-layouts.css +1 -1
- package/_dist/index.css +1 -1
- package/_dist/index.js +688 -809
- package/_dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,15 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import React, { ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import './cta-link.css';
|
|
3
|
+
export interface CTALinkProps extends ComponentPropsWithoutRef<'div'> {
|
|
4
|
+
/**
|
|
5
|
+
* A link element using the router of your choice.
|
|
6
|
+
*/
|
|
7
|
+
linkContent?: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Size of link
|
|
10
|
+
*/
|
|
11
|
+
size?: 'sm' | 'md';
|
|
12
|
+
/**
|
|
13
|
+
* Additional class names
|
|
14
|
+
*/
|
|
15
|
+
className?: string;
|
|
13
16
|
}
|
|
14
|
-
|
|
15
|
-
|
|
17
|
+
/**
|
|
18
|
+
* CTA Link UI component
|
|
19
|
+
*/
|
|
20
|
+
export declare const CTALink: ({ linkContent, size, className, ...props }: CTALinkProps) => React.JSX.Element;
|
|
@@ -1,32 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
typeLabels?: {
|
|
8
|
-
included: string;
|
|
9
|
-
notIncluded: string;
|
|
10
|
-
addon: string;
|
|
11
|
-
};
|
|
12
|
-
className: any;
|
|
13
|
-
}): React.JSX.Element;
|
|
14
|
-
export namespace ComparisonList {
|
|
15
|
-
namespace propTypes {
|
|
16
|
-
let typeLabels: PropTypes.Requireable<PropTypes.InferProps<{
|
|
17
|
-
included: PropTypes.Requireable<string>;
|
|
18
|
-
notIncluded: PropTypes.Requireable<string>;
|
|
19
|
-
addon: PropTypes.Requireable<string>;
|
|
20
|
-
}>>;
|
|
21
|
-
let listItems: PropTypes.Requireable<PropTypes.InferProps<{
|
|
22
|
-
text: PropTypes.Requireable<string>;
|
|
23
|
-
type: PropTypes.Requireable<string>;
|
|
24
|
-
}>[]>;
|
|
25
|
-
let listLabel: PropTypes.Requireable<string>;
|
|
26
|
-
let moreLink: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
27
|
-
let renderTypeLabels: PropTypes.Requireable<boolean>;
|
|
28
|
-
let className: PropTypes.Requireable<string>;
|
|
29
|
-
}
|
|
1
|
+
import React, { ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import './comparison-list.css';
|
|
3
|
+
interface TypeLabels {
|
|
4
|
+
included: string;
|
|
5
|
+
notIncluded: string;
|
|
6
|
+
addon: string;
|
|
30
7
|
}
|
|
31
|
-
|
|
32
|
-
|
|
8
|
+
interface ListItems {
|
|
9
|
+
text: string;
|
|
10
|
+
type: 'included' | 'notIncluded' | 'addon';
|
|
11
|
+
}
|
|
12
|
+
export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
|
|
13
|
+
/**
|
|
14
|
+
* Icon labels
|
|
15
|
+
*/
|
|
16
|
+
typeLabels?: TypeLabels;
|
|
17
|
+
/**
|
|
18
|
+
* List items
|
|
19
|
+
*/
|
|
20
|
+
listItems?: ListItems[];
|
|
21
|
+
/**
|
|
22
|
+
* Text preceding the list. Optional.
|
|
23
|
+
*/
|
|
24
|
+
listLabel: string;
|
|
25
|
+
/**
|
|
26
|
+
* A link element using the router of your choice. Will be displayed below the list. Optional.
|
|
27
|
+
*/
|
|
28
|
+
moreLink: ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Render the icon labels for screen readers.
|
|
31
|
+
*/
|
|
32
|
+
renderTypeLabels: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Additional class names
|
|
35
|
+
*/
|
|
36
|
+
className: string;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* ComparisonList UI component
|
|
40
|
+
*/
|
|
41
|
+
export declare const ComparisonList: ({ listItems, listLabel, moreLink, renderTypeLabels, typeLabels, className, ...props }: ComparisonListProps) => React.JSX.Element;
|
|
42
|
+
export {};
|
|
@@ -4,7 +4,7 @@ import React from 'react';
|
|
|
4
4
|
* when we refactor the dependent components to typescript.
|
|
5
5
|
* If we use this now, storybook won't compile.
|
|
6
6
|
*/
|
|
7
|
-
type PDSIcon = keyof typeof svgData;
|
|
7
|
+
export type PDSIcon = keyof typeof svgData;
|
|
8
8
|
/**
|
|
9
9
|
* Icon component prop types
|
|
10
10
|
*/
|
|
@@ -1,31 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
1
|
+
import React, { ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import './inline-message.css';
|
|
3
|
+
/**
|
|
4
|
+
* The type of message to display.
|
|
5
|
+
*/
|
|
6
|
+
type MessageType = 'info' | 'success' | 'warning' | 'critical' | 'working';
|
|
7
|
+
/**
|
|
8
|
+
* Labels for each message type.
|
|
9
|
+
*/
|
|
10
|
+
type TypeLabels = Record<MessageType, string>;
|
|
11
|
+
export interface InlineMessageProps extends ComponentPropsWithoutRef<'div'> {
|
|
12
|
+
/**
|
|
13
|
+
* Title text.
|
|
14
|
+
*/
|
|
15
|
+
title: string;
|
|
16
|
+
/**
|
|
17
|
+
* Secondary text.
|
|
18
|
+
*/
|
|
19
|
+
secondaryText?: ReactNode;
|
|
20
|
+
/**
|
|
21
|
+
* Message type.
|
|
22
|
+
*/
|
|
23
|
+
type: MessageType;
|
|
24
|
+
/**
|
|
25
|
+
* Message type labels. Provide translation strings if needed.
|
|
26
|
+
*/
|
|
27
|
+
typeLabels?: TypeLabels;
|
|
28
|
+
/**
|
|
29
|
+
* Additional class names
|
|
30
|
+
*/
|
|
31
|
+
className?: string;
|
|
29
32
|
}
|
|
30
|
-
|
|
31
|
-
|
|
33
|
+
/**
|
|
34
|
+
* InlineMessage UI component
|
|
35
|
+
*/
|
|
36
|
+
export declare const InlineMessage: ({ title, secondaryText, type, typeLabels, className, ...props }: InlineMessageProps) => React.JSX.Element;
|
|
37
|
+
export {};
|
|
@@ -1,39 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React, { ReactNode, MouseEvent, ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import './section-message.css';
|
|
3
|
+
type MessageType = 'info' | 'success' | 'warning' | 'critical' | 'discovery';
|
|
4
|
+
type TypeLabels = Record<MessageType, string>;
|
|
5
|
+
export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
|
|
6
|
+
/**
|
|
7
|
+
* Label for dismiss button. Provide a translation string if needed.
|
|
8
|
+
*/
|
|
3
9
|
dismissLabel?: string;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
10
|
+
/**
|
|
11
|
+
* Unique id of message.
|
|
12
|
+
*/
|
|
13
|
+
id?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Includes dismiss functionality.
|
|
16
|
+
*/
|
|
17
|
+
isDismissible?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Message text.
|
|
20
|
+
*/
|
|
21
|
+
message: ReactNode;
|
|
22
|
+
/**
|
|
23
|
+
* Callback function when message is dismissed.
|
|
24
|
+
*/
|
|
25
|
+
onDismiss?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;
|
|
26
|
+
/**
|
|
27
|
+
* Message title.
|
|
28
|
+
*/
|
|
29
|
+
title?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Message type.
|
|
32
|
+
*/
|
|
33
|
+
type: MessageType;
|
|
34
|
+
/**
|
|
35
|
+
* Message type labels. Provide translation strings if needed.
|
|
36
|
+
*/
|
|
37
|
+
typeLabels: TypeLabels;
|
|
38
|
+
/**
|
|
39
|
+
* Additional class names.
|
|
40
|
+
*/
|
|
41
|
+
className: string;
|
|
37
42
|
}
|
|
38
|
-
|
|
39
|
-
|
|
43
|
+
/**
|
|
44
|
+
* SectionMessage UI component
|
|
45
|
+
*/
|
|
46
|
+
export declare const SectionMessage: ({ dismissLabel, id, isDismissible, onDismiss, message, title, type, typeLabels, className, ...props }: SectionMessageProps) => React.JSX.Element;
|
|
47
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-dashboard{--pds-dashboard-sidebar-width-collapsed:2.0625rem;--pds-dashboard-sidebar-width-expanded:12.75rem;--pds-dashboard-toggle-button-size:1.5rem;--pds-dashboard-sidebar-width:var(--pds-dashboard-sidebar-width-expanded);display:flex;min-height:100vh;overflow:hidden;position:relative}@media (min-width:641px){.pds-dashboard .pds-workspace-selector{margin-inline-start:-1.25rem}}.pds-dashboard--sidebarExpanded{--pds-dashboard-sidebar-width:var(--pds-dashboard-sidebar-width-expanded)}.pds-dashboard--sidebarCollapsed{--pds-dashboard-sidebar-width:var(--pds-dashboard-sidebar-width-collapsed)}.pds-dashboard--notMobile .pds-dashboard__sidebar-divider{bottom:0;position:absolute;right:-1.5rem;top:0;width:3rem}.pds-dashboard--notMobile .pds-dashboard__sidebar-divider:hover+.pds-dashboard__sidebar-toggle{opacity:1;transition:opacity .1s ease-in-out;transition-delay:.1s}.pds-dashboard--notMobile .pds-dashboard__sidebar-toggle{align-items:center;background-color:var(--pds-color-dashboard-toggle-button-background);border:none;border-radius:50%;color:var(--pds-color-dashboard-toggle-button-foreground);display:flex;height:var(--pds-dashboard-toggle-button-size);justify-content:center;opacity:0;position:absolute;right:calc(var(--pds-dashboard-toggle-button-size)*-.5);top:7rem;width:var(--pds-dashboard-toggle-button-size);z-index:2}.pds-dashboard--notMobile .pds-dashboard__sidebar-toggle:hover{opacity:1}.pds-dashboard--notMobile .pds-dashboard__sidebar-toggle:focus-visible{opacity:1}.pds-dashboard--notMobile .pds-dashboard__sidebar{background-color:var(--pds-color-dashboard-nav-background);padding-block-end:1rem;padding-block-start:.75rem;padding-inline-end:1.563rem;padding-inline-start:calc(1.563rem + var(--pds-spacing-dashboard-nav-item-padding));position:relative;transition:width .2s ease-in-out;width:var(--pds-dashboard-sidebar-width);z-index:var(--pds-z-index-overlay)}.pds-dashboard--notMobile .pds-dashboard__sidebar-inner{height:100%;margin-inline-start:-.75rem;overflow-x:hidden}.pds-dashboard--notMobile .pds-dashboard__container{background-color:var(--pds-color-dashboard-nav-background);display:flex;flex-direction:column;transition:width .2s ease-in-out;width:calc(100% - var(--pds-dashboard-sidebar-width))}.pds-dashboard--notMobile .pds-dashboard__main{background-color:var(--pds-color-background-default);border-top-left-radius:1.25rem;box-shadow:inset 1px 1px 5px -2px rgba(0,0,0,.05),inset 1px 1px 0 0 var(--pds-color-dashboard-nav-background);display:flex;flex:1;flex-direction:column}.pds-dashboard--notMobile .pds-dashboard__main-inner{padding-block:2.441rem;padding-inline:2.441rem 2.691rem}.pds-dashboard--notMobile .pds-site-footer .pds-container{padding-inline:2.441rem}.pds-dashboard__sidebar--collapsed .pds-dashboard__sidebar-toggle{opacity:1}.pds-dashboard__sidebar-toggle[aria-expanded=false]{transform:rotate(180deg);transition:all .2s ease-in-out 0s}.pds-dashboard--isMobile{display:flex;flex-direction:column}.pds-dashboard--isMobile .pds-dashboard__sidebar{padding-block:1.953rem;padding-inline:1.563rem}.pds-dashboard--isMobile .pds-dashboard__main{padding-block:.64rem;padding-inline:1.563rem}.pds-dashboard--isMobile .pds-site-footer{padding-inline:.328rem}.pds-flex-container{display:flex}.pds-flex-container.pds-flex-gap--narrow{column-gap:1rem;row-gap:1rem}.pds-flex-container.pds-flex-gap--standard{column-gap:1.563rem;row-gap:1.563rem}.pds-flex-container.pds-flex-gap--wide{column-gap:2.441rem;row-gap:2.441rem}.pds-flex-direction--row{flex-direction:row}.pds-flex-direction--column{flex-direction:column}.pds-flex-direction--column-reverse{flex-direction:column-reverse}.pds-flex-direction--row-reverse{flex-direction:row-reverse}.pds-flex--nowrap{flex-wrap:nowrap}.pds-flex--wrap{flex-wrap:wrap}.pds-flex--wrap-reverse{flex-wrap:wrap-reverse}.pds-flex-justify--start{justify-content:flex-start}.pds-flex-justify--end{justify-content:flex-end}.pds-flex-justify--center{justify-content:center}.pds-flex-justify--between{justify-content:space-between}.pds-flex-align-items--start{align-items:flex-start}.pds-flex-align-items--end{align-items:flex-end}.pds-flex-align-items--center{align-items:center}.pds-flex-align-items--stretch{align-items:stretch}.pds-flex-align-items--baseline{align-items:baseline}.pds-flex-align-content--start{align-content:flex-start}.pds-flex-align-content--end{align-content:flex-end}.pds-flex-align-content--center{align-content:center}@media (max-width:640px){.pds-flex-mobile--none{display:unset}.pds-flex-direction--row.pds-flex-mobile--reverse,.pds-flex-mobile--reverse{flex-direction:column}.pds-flex-direction--row-reverse.pds-flex-mobile--reverse{flex-direction:column-reverse}.pds-flex-direction--column.pds-flex-mobile--reverse{flex-direction:row}.pds-flex-direction--column-reverse.pds-flex-mobile--reverse{flex-direction:row-reverse}}.pds-stepper-layout{padding-inline:0}.pds-stepper-layout__form-container{padding-block-start:1.953rem}@media (min-width:641px){.pds-stepper-layout__form-container{margin-inline:auto;padding-inline:14%}}@media (min-width:1025px){.pds-stepper-layout__form-container{padding-inline:16%}}.pds-stepper__button-group{column-gap:1.563rem;display:flex;justify-content:space-between;padding-block-start:3.052rem}@media (min-width:641px){.pds-stepper__button-group{box-sizing:border-box;margin-left:50%;max-width:var(--pds-stepper-layout-max-width);padding-inline:calc(var(--pds-stepper-indicator-size)*2);transform:translate3d(-50%,0,0);width:100vw}}
|
|
1
|
+
.pds-dashboard{--pds-dashboard-sidebar-width-collapsed:2.0625rem;--pds-dashboard-sidebar-width-expanded:12.75rem;--pds-dashboard-toggle-button-size:1.5rem;--pds-dashboard-sidebar-width:var(--pds-dashboard-sidebar-width-expanded);display:flex;min-height:100vh;overflow:hidden;position:relative}@media (min-width:641px){.pds-dashboard .pds-workspace-selector{margin-inline-start:-1.25rem}}.pds-dashboard--sidebarExpanded{--pds-dashboard-sidebar-width:var(--pds-dashboard-sidebar-width-expanded)}.pds-dashboard--sidebarCollapsed{--pds-dashboard-sidebar-width:var(--pds-dashboard-sidebar-width-collapsed)}.pds-dashboard--notMobile .pds-dashboard__sidebar-divider{bottom:0;position:absolute;right:-1.5rem;top:0;width:3rem}.pds-dashboard--notMobile .pds-dashboard__sidebar-divider:hover+.pds-dashboard__sidebar-toggle{opacity:1;transition:opacity .1s ease-in-out;transition-delay:.1s}.pds-dashboard--notMobile .pds-dashboard__sidebar-toggle{align-items:center;background-color:var(--pds-color-dashboard-toggle-button-background);border:none;border-radius:50%;color:var(--pds-color-dashboard-toggle-button-foreground);display:flex;height:var(--pds-dashboard-toggle-button-size);justify-content:center;opacity:0;position:absolute;right:calc(var(--pds-dashboard-toggle-button-size)*-.5);top:7rem;width:var(--pds-dashboard-toggle-button-size);z-index:2}.pds-dashboard--notMobile .pds-dashboard__sidebar-toggle:hover{opacity:1}.pds-dashboard--notMobile .pds-dashboard__sidebar-toggle:focus-visible{opacity:1}.pds-dashboard--notMobile .pds-dashboard__sidebar{background-color:var(--pds-color-dashboard-nav-background);padding-block-end:1rem;padding-block-start:.75rem;padding-inline-end:1.563rem;padding-inline-start:calc(1.563rem + var(--pds-spacing-dashboard-nav-item-padding));position:relative;transition:width .2s ease-in-out;width:var(--pds-dashboard-sidebar-width);z-index:var(--pds-z-index-overlay)}.pds-dashboard--notMobile .pds-dashboard__sidebar-inner{height:100%;margin-inline-start:-.75rem;overflow-x:hidden}.pds-dashboard--notMobile .pds-dashboard__container{background-color:var(--pds-color-dashboard-nav-background);display:flex;flex-direction:column;transition:width .2s ease-in-out;width:calc(100% - var(--pds-dashboard-sidebar-width))}.pds-dashboard--notMobile .pds-dashboard__main{background-color:var(--pds-color-background-default);border-top-left-radius:1.25rem;box-shadow:inset 1px 1px 5px -2px rgba(0,0,0,.05),inset 1px 1px 0 0 var(--pds-color-dashboard-nav-background);display:flex;flex:1;flex-direction:column}.pds-dashboard--notMobile .pds-dashboard__main-inner{flex:1;padding-block:2.441rem;padding-inline:2.441rem 2.691rem}.pds-dashboard--notMobile .pds-site-footer .pds-container{padding-inline:2.441rem}.pds-dashboard__sidebar--collapsed .pds-dashboard__sidebar-toggle{opacity:1}.pds-dashboard__sidebar-toggle[aria-expanded=false]{transform:rotate(180deg);transition:all .2s ease-in-out 0s}.pds-dashboard--isMobile{display:flex;flex-direction:column}.pds-dashboard--isMobile .pds-dashboard__sidebar{padding-block:1.953rem;padding-inline:1.563rem}.pds-dashboard--isMobile .pds-dashboard__main{padding-block:.64rem;padding-inline:1.563rem}.pds-dashboard--isMobile .pds-site-footer{padding-inline:.328rem}.pds-dashboard--isMobile .pds-site-footer .pds-container{padding-inline:0}.pds-flex-container{display:flex}.pds-flex-container.pds-flex-gap--narrow{column-gap:1rem;row-gap:1rem}.pds-flex-container.pds-flex-gap--standard{column-gap:1.563rem;row-gap:1.563rem}.pds-flex-container.pds-flex-gap--wide{column-gap:2.441rem;row-gap:2.441rem}.pds-flex-direction--row{flex-direction:row}.pds-flex-direction--column{flex-direction:column}.pds-flex-direction--column-reverse{flex-direction:column-reverse}.pds-flex-direction--row-reverse{flex-direction:row-reverse}.pds-flex--nowrap{flex-wrap:nowrap}.pds-flex--wrap{flex-wrap:wrap}.pds-flex--wrap-reverse{flex-wrap:wrap-reverse}.pds-flex-justify--start{justify-content:flex-start}.pds-flex-justify--end{justify-content:flex-end}.pds-flex-justify--center{justify-content:center}.pds-flex-justify--between{justify-content:space-between}.pds-flex-align-items--start{align-items:flex-start}.pds-flex-align-items--end{align-items:flex-end}.pds-flex-align-items--center{align-items:center}.pds-flex-align-items--stretch{align-items:stretch}.pds-flex-align-items--baseline{align-items:baseline}.pds-flex-align-content--start{align-content:flex-start}.pds-flex-align-content--end{align-content:flex-end}.pds-flex-align-content--center{align-content:center}@media (max-width:640px){.pds-flex-mobile--none{display:unset}.pds-flex-direction--row.pds-flex-mobile--reverse,.pds-flex-mobile--reverse{flex-direction:column}.pds-flex-direction--row-reverse.pds-flex-mobile--reverse{flex-direction:column-reverse}.pds-flex-direction--column.pds-flex-mobile--reverse{flex-direction:row}.pds-flex-direction--column-reverse.pds-flex-mobile--reverse{flex-direction:row-reverse}}.pds-stepper-layout{padding-inline:0}.pds-stepper-layout__form-container{padding-block-start:1.953rem}@media (min-width:641px){.pds-stepper-layout__form-container{margin-inline:auto;padding-inline:14%}}@media (min-width:1025px){.pds-stepper-layout__form-container{padding-inline:16%}}.pds-stepper__button-group{column-gap:1.563rem;display:flex;justify-content:space-between;padding-block-start:3.052rem}@media (min-width:641px){.pds-stepper__button-group{box-sizing:border-box;margin-left:50%;max-width:var(--pds-stepper-layout-max-width);padding-inline:calc(var(--pds-stepper-indicator-size)*2);transform:translate3d(-50%,0,0);width:100vw}}
|