@pantheon-systems/pds-toolkit-react 2.0.0-alpha.14 → 2.0.0-alpha.16
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/ComparisonList/ComparisonList.d.ts +6 -1
- package/dist/components/Tabs/Tabs.d.ts +6 -1
- package/dist/components/icons/Icon/Icon.d.ts +2 -2
- package/dist/components/icons/PaymentIcon/PaymentIcon.d.ts +7 -3
- package/dist/components/icons/PlatformIcon/PlatformIcon.d.ts +6 -6
- package/dist/components/{CTALink → links/CTALink}/CTALink.d.ts +1 -1
- package/dist/components/{LinkNewWindow → links/LinkNewWindow}/LinkNewWindow.d.ts +1 -1
- package/dist/components/navigation/TabMenu/TabMenu.d.ts +6 -1
- package/dist/components/{Pagination → pagination/Pagination}/Pagination.d.ts +7 -2
- package/dist/components/pagination/PaginationCompact/PaginationCompact.d.ts +49 -0
- package/dist/components/pagination/PaginationMini/PaginationMini.d.ts +55 -0
- package/dist/components/panels/PanelList/PanelList.d.ts +1 -1
- package/dist/css/component-css/pds-callout.css +1 -1
- package/dist/css/component-css/pds-card-select-group.css +1 -1
- package/dist/css/component-css/pds-combobox.css +1 -1
- package/dist/css/component-css/pds-comparison-list.css +1 -1
- package/dist/css/component-css/pds-cta-link.css +1 -1
- package/dist/css/component-css/pds-icon.css +1 -1
- package/dist/css/component-css/pds-index.css +14 -12
- package/dist/css/component-css/pds-link-new-window.css +1 -1
- package/dist/css/component-css/pds-pagination-compact.css +1 -0
- package/dist/css/component-css/pds-pagination-mini.css +3 -0
- package/dist/css/component-css/pds-pagination.css +1 -1
- package/dist/css/component-css/pds-panel-list.css +1 -1
- package/dist/css/component-css/pds-payment-icon.css +1 -1
- package/dist/css/component-css/pds-platform-icon.css +1 -1
- package/dist/css/component-css/pds-radio-group.css +1 -1
- package/dist/css/component-css/pds-select.css +1 -1
- package/dist/css/component-css/pds-tab-menu.css +2 -2
- package/dist/css/component-css/pds-tabs.css +1 -1
- package/dist/css/pds-components.css +14 -12
- package/dist/css/pds-core.css +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +13 -0
- package/dist/index.js +4649 -3414
- package/dist/index.js.map +1 -1
- package/dist/index.source.d.ts +5 -3
- package/package.json +1 -1
- /package/dist/components/{Pagination → pagination/Pagination}/usePagination.d.ts +0 -0
|
@@ -9,6 +9,7 @@ export interface ListItems {
|
|
|
9
9
|
text: string;
|
|
10
10
|
type: 'included' | 'notIncluded' | 'addon';
|
|
11
11
|
}
|
|
12
|
+
export type ComparisonListSize = 's' | 'm';
|
|
12
13
|
export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
|
|
13
14
|
/**
|
|
14
15
|
* Additional class names
|
|
@@ -34,6 +35,10 @@ export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
34
35
|
* Whether to show the border on list items.
|
|
35
36
|
*/
|
|
36
37
|
showBorder?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Size variant.
|
|
40
|
+
*/
|
|
41
|
+
size?: ComparisonListSize;
|
|
37
42
|
/**
|
|
38
43
|
* Icon labels
|
|
39
44
|
*/
|
|
@@ -42,5 +47,5 @@ export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
42
47
|
/**
|
|
43
48
|
* ComparisonList UI component
|
|
44
49
|
*/
|
|
45
|
-
export declare const ComparisonList: ({ className, listItems, listLabel, moreLink, renderTypeLabels, showBorder, typeLabels, ...props }: ComparisonListProps) => import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
export declare const ComparisonList: ({ className, listItems, listLabel, moreLink, renderTypeLabels, showBorder, size, typeLabels, ...props }: ComparisonListProps) => import("react/jsx-runtime").JSX.Element;
|
|
46
51
|
export {};
|
|
@@ -30,6 +30,7 @@ interface Tabs {
|
|
|
30
30
|
type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
|
|
31
31
|
};
|
|
32
32
|
}
|
|
33
|
+
export type TabsSize = 's' | 'm';
|
|
33
34
|
interface TabsProps extends ComponentPropsWithoutRef<'div'> {
|
|
34
35
|
/**
|
|
35
36
|
* Sets tabset aria label
|
|
@@ -51,6 +52,10 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
51
52
|
* Sets currently selected tab using a zero-based index
|
|
52
53
|
*/
|
|
53
54
|
selectedTab?: number;
|
|
55
|
+
/**
|
|
56
|
+
* Size of the tabs.
|
|
57
|
+
*/
|
|
58
|
+
size?: TabsSize;
|
|
54
59
|
/**
|
|
55
60
|
* Array of objects for tab data
|
|
56
61
|
*/
|
|
@@ -59,5 +64,5 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
59
64
|
/**
|
|
60
65
|
* Tabs UI component
|
|
61
66
|
*/
|
|
62
|
-
export declare const Tabs: ({ ariaLabel, className, defaultSelected, onActiveTabChange, selectedTab, tabs, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
67
|
+
export declare const Tabs: ({ ariaLabel, className, defaultSelected, onActiveTabChange, selectedTab, size, tabs, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
63
68
|
export {};
|
|
@@ -22,7 +22,7 @@ export interface IconProps extends ComponentPropsWithoutRef<'svg'> {
|
|
|
22
22
|
/**
|
|
23
23
|
* Which size of icon to render
|
|
24
24
|
*/
|
|
25
|
-
|
|
25
|
+
size?: IconSize;
|
|
26
26
|
/**
|
|
27
27
|
* Vertical align value
|
|
28
28
|
*/
|
|
@@ -31,4 +31,4 @@ export interface IconProps extends ComponentPropsWithoutRef<'svg'> {
|
|
|
31
31
|
/**
|
|
32
32
|
* A component used to display an icon.
|
|
33
33
|
*/
|
|
34
|
-
export declare const Icon: ({ className, display, iconName,
|
|
34
|
+
export declare const Icon: ({ className, display, iconName, size, style, verticalAlign, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import './payment-icon.css';
|
|
3
|
-
type
|
|
3
|
+
export type PaymentSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
|
|
4
|
+
export type PaymentType = 'visa' | 'mastercard' | 'amex' | 'discover' | 'generic';
|
|
4
5
|
/**
|
|
5
6
|
* Prop types for PaymentIcon
|
|
6
7
|
*/
|
|
@@ -13,9 +14,12 @@ export interface PaymentIconProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
13
14
|
* The type of payment icon to display.
|
|
14
15
|
*/
|
|
15
16
|
paymentType: PaymentType;
|
|
17
|
+
/**
|
|
18
|
+
* Which size of icon to render
|
|
19
|
+
*/
|
|
20
|
+
size?: PaymentSize;
|
|
16
21
|
}
|
|
17
22
|
/**
|
|
18
23
|
* PaymentIcon UI component
|
|
19
24
|
*/
|
|
20
|
-
export declare const PaymentIcon: ({ className, paymentType, ...props }: PaymentIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
-
export {};
|
|
25
|
+
export declare const PaymentIcon: ({ className, paymentType, size, ...props }: PaymentIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import './platform-icon.css';
|
|
3
|
-
type
|
|
4
|
-
|
|
3
|
+
export type PlatformSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
|
|
4
|
+
export type PlatformType = 'drupal' | 'drupal7' | 'front-end-sites' | 'gatsby' | 'gatsby-wp' | 'google' | 'import-custom' | 'microsoft' | 'next' | 'next-drupal' | 'next-wp' | 'splunk' | 'sumo-logic' | 'wordpress';
|
|
5
|
+
export interface PlatformIconProps extends ComponentPropsWithoutRef<'div'> {
|
|
5
6
|
className?: string;
|
|
7
|
+
platformType: PlatformType;
|
|
6
8
|
/**
|
|
7
9
|
* Which size of icon to render
|
|
8
10
|
*/
|
|
9
|
-
|
|
10
|
-
platformType: PlatformType;
|
|
11
|
+
size?: PlatformSize;
|
|
11
12
|
}
|
|
12
13
|
/**
|
|
13
14
|
* PlatformIcon UI component
|
|
14
15
|
*/
|
|
15
|
-
export declare const PlatformIcon: ({ className,
|
|
16
|
-
export {};
|
|
16
|
+
export declare const PlatformIcon: ({ className, platformType, size, ...props }: PlatformIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -15,7 +15,7 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
|
|
|
15
15
|
/**
|
|
16
16
|
* Optional font size for the LinkNewWindow. If not provided, the font size will be inherited from the parent element.
|
|
17
17
|
*/
|
|
18
|
-
fontSize?: '
|
|
18
|
+
fontSize?: 's' | 'm' | 'l';
|
|
19
19
|
/**
|
|
20
20
|
* Is the link in the process of loading?
|
|
21
21
|
*/
|
|
@@ -19,6 +19,7 @@ export interface TabMenuItemProps extends NavigationItem {
|
|
|
19
19
|
*/
|
|
20
20
|
promoteActiveChildLink?: boolean;
|
|
21
21
|
}
|
|
22
|
+
export type TabMenuSize = 's' | 'm';
|
|
22
23
|
/**
|
|
23
24
|
* Prop types for TabMenu.
|
|
24
25
|
*/
|
|
@@ -35,9 +36,13 @@ export interface TabMenuProps extends ComponentPropsWithoutRef<'nav'> {
|
|
|
35
36
|
* Menu items to render.
|
|
36
37
|
*/
|
|
37
38
|
menuItems?: TabMenuItemProps[];
|
|
39
|
+
/**
|
|
40
|
+
* Size of the tab menu items.
|
|
41
|
+
*/
|
|
42
|
+
size?: TabMenuSize;
|
|
38
43
|
}
|
|
39
44
|
/**
|
|
40
45
|
* TabMenu UI component.
|
|
41
46
|
*/
|
|
42
|
-
export declare const TabMenu: ({ ariaLabel, className, menuItems, ...props }: TabMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
export declare const TabMenu: ({ ariaLabel, className, menuItems, size, ...props }: TabMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
48
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
import { HeadingLevelCommon } from '
|
|
2
|
+
import { HeadingLevelCommon } from '../../../libs/types/custom-types';
|
|
3
3
|
import './pagination.css';
|
|
4
|
+
export type PaginationSize = 's' | 'm';
|
|
4
5
|
/**
|
|
5
6
|
* Prop types for Pagination
|
|
6
7
|
*/
|
|
@@ -43,6 +44,10 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
|
|
|
43
44
|
* For example: `onPageChange={(page) => setCurrentPage(page)}`
|
|
44
45
|
*/
|
|
45
46
|
onPageChange?: (page: number) => void;
|
|
47
|
+
/**
|
|
48
|
+
* Size of the pagination items.
|
|
49
|
+
*/
|
|
50
|
+
size?: PaginationSize;
|
|
46
51
|
/**
|
|
47
52
|
* Total number of items to paginate.
|
|
48
53
|
*/
|
|
@@ -51,4 +56,4 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
|
|
|
51
56
|
/**
|
|
52
57
|
* Pagination UI component
|
|
53
58
|
*/
|
|
54
|
-
export declare const Pagination: ({ bufferCount, className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, totalItemCount, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
|
|
59
|
+
export declare const Pagination: ({ bufferCount, className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, size, totalItemCount, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { HeadingLevelCommon } from '../../../libs/types/custom-types';
|
|
3
|
+
import './pagination-compact.css';
|
|
4
|
+
/**
|
|
5
|
+
* Prop types for PaginationCompact
|
|
6
|
+
*/
|
|
7
|
+
export interface PaginationCompactProps extends ComponentPropsWithoutRef<'nav'> {
|
|
8
|
+
/**
|
|
9
|
+
* Additional class names.
|
|
10
|
+
*/
|
|
11
|
+
className?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Current page number.
|
|
14
|
+
*/
|
|
15
|
+
currentPage: number;
|
|
16
|
+
/**
|
|
17
|
+
* Heading level. Defaults to `h2`.
|
|
18
|
+
*/
|
|
19
|
+
headingLevel?: HeadingLevelCommon;
|
|
20
|
+
/**
|
|
21
|
+
* Heading text for the pagination component. Will only be accessible to screen readers.
|
|
22
|
+
*/
|
|
23
|
+
headingText?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Number of items per page.
|
|
26
|
+
*/
|
|
27
|
+
itemsPerPage?: number;
|
|
28
|
+
/**
|
|
29
|
+
* Translatable label strings.
|
|
30
|
+
*/
|
|
31
|
+
labelStrings?: {
|
|
32
|
+
next: string;
|
|
33
|
+
of: string;
|
|
34
|
+
pageSelect: string;
|
|
35
|
+
previous: string;
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* Callback to handle page change.
|
|
39
|
+
*/
|
|
40
|
+
onPageChange?: (page: number) => void;
|
|
41
|
+
/**
|
|
42
|
+
* Total number of items to paginate.
|
|
43
|
+
*/
|
|
44
|
+
totalItemCount: number;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* PaginationCompact UI component — page selector dropdown with previous/next controls.
|
|
48
|
+
*/
|
|
49
|
+
export declare const PaginationCompact: ({ className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, totalItemCount, ...props }: PaginationCompactProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { HeadingLevelCommon } from '../../../libs/types/custom-types';
|
|
3
|
+
import './pagination-mini.css';
|
|
4
|
+
/**
|
|
5
|
+
* Prop types for PaginationMini
|
|
6
|
+
*/
|
|
7
|
+
export interface PaginationMiniProps extends ComponentPropsWithoutRef<'nav'> {
|
|
8
|
+
/**
|
|
9
|
+
* Additional class names.
|
|
10
|
+
*/
|
|
11
|
+
className?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Current page number.
|
|
14
|
+
*/
|
|
15
|
+
currentPage: number;
|
|
16
|
+
/**
|
|
17
|
+
* Heading level. Defaults to `h2`.
|
|
18
|
+
*/
|
|
19
|
+
headingLevel?: HeadingLevelCommon;
|
|
20
|
+
/**
|
|
21
|
+
* Heading text for the pagination component. Will only be accessible to screen readers.
|
|
22
|
+
*/
|
|
23
|
+
headingText?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Number of items per page.
|
|
26
|
+
*/
|
|
27
|
+
itemsPerPage?: number;
|
|
28
|
+
/**
|
|
29
|
+
* Translatable label strings.
|
|
30
|
+
*/
|
|
31
|
+
labelStrings?: {
|
|
32
|
+
next: string;
|
|
33
|
+
previous: string;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* Title of the next page. Displayed as the clickable label on the next button.
|
|
37
|
+
*/
|
|
38
|
+
nextPage?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Callback to handle page change.
|
|
41
|
+
*/
|
|
42
|
+
onPageChange?: (page: number) => void;
|
|
43
|
+
/**
|
|
44
|
+
* Title of the previous page. Displayed as the clickable label on the previous button.
|
|
45
|
+
*/
|
|
46
|
+
previousPage?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Total number of items to paginate.
|
|
49
|
+
*/
|
|
50
|
+
totalItemCount: number;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* PaginationMini UI component — previous/next navigation with page labels.
|
|
54
|
+
*/
|
|
55
|
+
export declare const PaginationMini: ({ className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, nextPage, onPageChange, previousPage, totalItemCount, ...props }: PaginationMiniProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -24,7 +24,7 @@ export interface PanelListProps extends ComponentPropsWithoutRef<'ul'> {
|
|
|
24
24
|
/**
|
|
25
25
|
* Panel list size variants for block padding only.
|
|
26
26
|
*/
|
|
27
|
-
paddingSize?: '
|
|
27
|
+
paddingSize?: '2xs' | 'xs' | 's' | 'm' | 'l';
|
|
28
28
|
}
|
|
29
29
|
/**
|
|
30
30
|
* PanelList UI component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-callout{--callout--color:var(--pds-color-fg-default-secondary);border:var(--pds-border-width-default) solid var(--callout--color);border-radius:var(--pds-border-radius-container);font-family:var(--pds-typography-ff-default);padding:var(--pds-spacing-m);position:relative}.pds-callout,.pds-callout__inner{display:flex;gap:var(--pds-spacing-m)}.pds-callout__inner{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:var(--pds-typography-size-l);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-m)}.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-
|
|
1
|
+
.pds-callout{--callout--color:var(--pds-color-fg-default-secondary);border:var(--pds-border-width-default) solid var(--callout--color);border-radius:var(--pds-border-radius-container);font-family:var(--pds-typography-ff-default);padding:var(--pds-spacing-m);position:relative}.pds-callout,.pds-callout__inner{display:flex;gap:var(--pds-spacing-m)}.pds-callout__inner{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:var(--pds-typography-size-l);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-m)}.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-status-neutral-indicator)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-card-select-group{border:none;color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default);margin-inline:0;padding:0;padding-block-start:var(--pds-spacing-3xs)}.pds-card-select-group__legend{display:block;font-size:var(--pds-typography-size-
|
|
1
|
+
.pds-card-select-group{border:none;color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default);margin-inline:0;padding:0;padding-block-start:var(--pds-spacing-3xs)}.pds-card-select-group__legend{display:block;font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-semibold);margin-block-end:var(--pds-spacing-s);text-align:left}.pds-card-select-group__legend--center{text-align:center}.pds-card-select-group__option input[type=radio]{appearance:none}.pds-card-select-group__option-label{background-color:var(--pds-color-card-background);border-radius:var(--pds-border-radius-card);box-shadow:var(--pds-elevation-raised);column-gap:var(--pds-spacing-xs);display:inline-flex;font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-semibold);height:100%;margin-block-end:0;padding:var(--pds-spacing-m);width:100%}.pds-card-select-group__option-label--selected,.pds-card-select-group__option-label:hover{background-color:var(--pds-color-interactive-background-hover);cursor:pointer}.pds-card-select-group__option-icon{color:var(--pds-color-border-input)}.pds-card-select-group__option-icon--selected{color:var(--pds-color-status-success-foreground)}.pds-card-select-group__option-description{color:var(--pds-color-fg-default-secondary);font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-m);margin-block-start:var(--pds-spacing-3xs)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-combobox{position:relative}.pds-combobox__input-wrapper{align-items:center;background-color:var(--pds-color-bg-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);display:flex;gap:var(--pds-spacing-xs);height:var(--pds-spacing-input-height-s);padding-inline:var(--pds-spacing-xs);position:relative;transition:var(--pds-animation-transition-input);width:100%}.pds-combobox__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:var(--pds-animation-transition-focus)}.pds-combobox--m .pds-combobox__input-wrapper{gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-m);padding-inline:var(--pds-spacing-s)}.pds-combobox--l .pds-combobox__input-wrapper{gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-l);padding-inline:var(--pds-spacing-s)}.pds-combobox--l .pds-combobox__input,.pds-combobox--l .pds-dropdown__item{font-size:var(--pds-typography-size-m)}.pds-combobox--l .pds-dropdown__item{padding-block:var(--pds-spacing-s)}.pds-combobox--l .pds-input-label{font-size:var(--pds-typography-size-s);margin-block-end:var(--pds-spacing-xs)}.pds-combobox--l .pds-input-message{font-size:var(--pds-typography-size-s);margin-block-start:var(--pds-spacing-xs)}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-fg-default);color:var(--pds-color-fg-default);flex-grow:1;font-size:var(--pds-typography-size-s);line-height:1;padding-inline:0;width:100%}.pds-combobox__input:focus{outline:none}.pds-combobox__input::placeholder{color:var(--pds-color-input-placeholder)}.pds-combobox__trigger{align-items:center;background-color:transparent;border:none;border-radius:var(--pds-border-radius-input);display:flex;justify-content:center;padding:var(--pds-spacing-4xs)}.pds-combobox__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-combobox__trigger:focus-visible{background-color:var(--pds-color-interactive-background-hover);outline:var(--pds-border-width-default) solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-fg-default-secondary);pointer-events:none;transition:var(--pds-animation-transition-rotation)}.pds-combobox__trigger[aria-expanded=true] .pds-combobox__trigger-icon{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-combobox__trigger-icon.pds-icon--m{height:.8125rem;width:.8125rem}.pds-combobox--l .pds-combobox__trigger-icon.pds-icon--m,.pds-combobox--m .pds-combobox__trigger-icon.pds-icon--m{height:1rem;width:1rem}.pds-combobox__dropdown{margin-block-start:var(--pds-spacing-xs);max-height:18rem;overflow-x:hidden}.pds-combobox__dropdown:focus-visible{outline:none}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.pds-combobox__loading{color:var(--pds-color-fg-default);font-size:var(--pds-typography-size-m);padding:var(--pds-spacing-m)}
|
|
1
|
+
.pds-combobox{position:relative}.pds-combobox__input-wrapper{align-items:center;background-color:var(--pds-color-bg-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);display:flex;gap:var(--pds-spacing-xs);height:var(--pds-spacing-input-height-s);padding-inline:var(--pds-spacing-xs);position:relative;transition:var(--pds-animation-transition-input);width:100%}.pds-combobox__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:var(--pds-animation-transition-focus)}.pds-combobox--m .pds-combobox__input-wrapper{gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-m);padding-inline:var(--pds-spacing-s)}.pds-combobox--l .pds-combobox__input-wrapper{gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-l);padding-inline:var(--pds-spacing-s)}.pds-combobox--l .pds-combobox__input,.pds-combobox--l .pds-dropdown__item{font-size:var(--pds-typography-size-m)}.pds-combobox--l .pds-dropdown__item{padding-block:var(--pds-spacing-s)}.pds-combobox--l .pds-input-label{font-size:var(--pds-typography-size-s);margin-block-end:var(--pds-spacing-xs)}.pds-combobox--l .pds-input-message{font-size:var(--pds-typography-size-s);margin-block-start:var(--pds-spacing-xs)}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-fg-default);color:var(--pds-color-fg-default);flex-grow:1;font-size:var(--pds-typography-size-s);line-height:1;padding-inline:0;width:100%}.pds-combobox__input:focus{outline:none}.pds-combobox__input::placeholder{color:var(--pds-color-input-placeholder)}.pds-combobox__trigger{align-items:center;background-color:transparent;border:none;border-radius:var(--pds-border-radius-input);cursor:pointer;display:flex;justify-content:center;padding:var(--pds-spacing-4xs)}.pds-combobox__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-combobox__trigger:focus-visible{background-color:var(--pds-color-interactive-background-hover);outline:var(--pds-border-width-default) solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-fg-default-secondary);pointer-events:none;transition:var(--pds-animation-transition-rotation)}.pds-combobox__trigger[aria-expanded=true] .pds-combobox__trigger-icon{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-combobox__trigger-icon.pds-icon--m{height:.8125rem;width:.8125rem}.pds-combobox--l .pds-combobox__trigger-icon.pds-icon--m,.pds-combobox--m .pds-combobox__trigger-icon.pds-icon--m{height:1rem;width:1rem}.pds-combobox__dropdown{margin-block-start:var(--pds-spacing-xs);max-height:18rem;overflow-x:hidden}.pds-combobox__dropdown:focus-visible{outline:none}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.pds-combobox__loading{color:var(--pds-color-fg-default);font-size:var(--pds-typography-size-m);padding:var(--pds-spacing-m)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-comparison-list{color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default)}.pds-comparison-
|
|
1
|
+
.pds-comparison-list{--list-col-gap:var(--pds-spacing-xs);--list-font-size:var(--pds-typography-size-s);--list-icon-col-width:var(--pds-typography-size-s);--list-padding-block-end:var(--pds-spacing-xs);--list-row-gap:var(--pds-spacing-s);color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default)}.pds-comparison-list--m{--list-col-gap:var(--pds-spacing-s);--list-font-size:var(--pds-typography-size-m);--list-icon-col-width:var(--pds-typography-size-m);--list-padding-block-end:var(--pds-spacing-s);--list-row-gap:var(--pds-spacing-m)}.pds-comparison-list__intro{font-size:var(--list-font-size);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-xl)}.pds-comparison-list__list{all:unset;display:flex;flex-direction:column;list-style-type:none;row-gap:var(--list-row-gap)}.pds-comparison-list__list-item{border-bottom:var(--pds-border-width-default) solid var(--pds-color-border-default);column-gap:var(--list-col-gap);display:grid;font-family:var(--pds-typography-ff-default);font-size:var(--list-font-size);grid-template-columns:var(--list-icon-col-width) auto;padding-block-end:var(--list-padding-block-end)}.pds-comparison-list__list-item--notIncluded{color:var(--pds-color-fg-default-secondary)}.pds-comparison-list__item-icon-wrapper{position:relative}.pds-comparison-list__item-icon{position:absolute;top:1px}.pds-comparison-list__more-link{font-size:var(--list-font-size);margin-block-start:var(--pds-spacing-l)}.pds-comparison-list--no-border .pds-comparison-list__list-item{border-bottom:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-cta-link{--cta-link-size:var(--pds-typography-size-
|
|
1
|
+
.pds-cta-link{--cta-link-size:var(--pds-typography-size-m);--cta-link-color:var(--pds-color-interactive-link-default);--cta-link-gap:var(--pds-spacing-3xs);align-items:center;display:inline-flex;gap:var(--cta-link-gap);padding:.25rem 0}.pds-cta-link a,.pds-cta-link button{color:var(--cta-link-color);font-family:var(--pds-typography-ff-default);font-size:var(--cta-link-size);font-weight:var(--pds-typography-fw-bold);letter-spacing:var(--pds-typography-ls-s);line-height:var(--pds-typography-lh-s);text-decoration:none;transition:var(--pds-animation-transition-link)}.pds-cta-link a:focus-visible,.pds-cta-link button:focus-visible{border-radius:var(--pds-border-radius-default);outline:var(--pds-border-width-default) solid var(--pds-color-interactive-focus);outline-offset:.25rem;text-decoration:none}.pds-cta-link button{background:none;border:none;cursor:pointer;padding:0}.pds-cta-link .pds-cta-link__icon{color:var(--cta-link-color);transition:var(--pds-animation-transition-link)}.pds-cta-link:hover{--cta-link-color:var(--pds-color-interactive-link-hover)}.pds-cta-link:active{--cta-link-color:var(--pds-color-interactive-link-active);outline:none;text-decoration:none}.pds-cta-link--m{--cta-link-gap:var(--pds-spacing-2xs);--cta-link-size:var(--pds-typography-size-l)}.pds-link-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-icon{--icon-detail-color:var(--pds-color-bg-default);display:inline-
|
|
1
|
+
.pds-icon{--icon-detail-color:var(--pds-color-bg-default);display:inline-flex;flex-shrink:0;height:1.25rem;overflow:visible;vertical-align:middle;width:1.25rem}.pds-icon svg{height:100%;width:100%}.pds-icon--xs{height:.625rem;width:.625rem}.pds-icon--s{height:.75rem;width:.75rem}.pds-icon--m{height:1rem;width:1rem}.pds-icon--l{height:1.25rem;width:1.25rem}.pds-icon--xl{height:1.5rem;width:1.5rem}.pds-icon--2xl{height:2rem;width:2rem}.pds-icon--3xl{height:2.5rem;width:2.5rem}
|