@pantheon-systems/pds-toolkit-react 1.16.0 → 1.17.0
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/Drawer/Drawer.d.ts +58 -0
- package/_dist/components/charts/BarChart/BarChart.d.ts +1 -1
- package/_dist/components/charts/LineChart/LineChart.d.ts +1 -1
- package/_dist/components/charts/shared/chart-colors.d.ts +1 -1
- package/_dist/components/charts/shared/types.d.ts +28 -1
- package/_dist/components/navigation/DashboardNav/DashboardNav.d.ts +9 -1
- package/_dist/css/component-css/pds-chart-tokens.css +1 -1
- package/_dist/css/component-css/pds-chart-wrapper.css +1 -1
- package/_dist/css/component-css/pds-dashboard-nav.css +1 -1
- package/_dist/css/component-css/pds-drawer.css +1 -0
- package/_dist/css/component-css/pds-dropdown-menu.css +1 -1
- package/_dist/css/component-css/pds-index.css +3 -3
- package/_dist/css/pds-components.css +3 -3
- package/_dist/index.css +1 -1
- package/_dist/index.d.ts +1 -0
- package/_dist/index.js +2650 -2471
- package/_dist/index.js.map +1 -1
- package/_dist/libs/types/navigation-types.d.ts +8 -0
- package/_dist/mocks/data/navigation-items.d.ts +1 -0
- package/package.json +36 -30
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import './drawer.css';
|
|
3
|
+
export type DrawerPlacement = 'left' | 'right';
|
|
4
|
+
export type DrawerSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
export interface DrawerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
|
|
6
|
+
/**
|
|
7
|
+
* Aria label that describes the drawer. Will default to the title if not provided.
|
|
8
|
+
*/
|
|
9
|
+
ariaLabel?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Main content for the drawer.
|
|
12
|
+
*/
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Additional class names.
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Text for close button aria-label attribute.
|
|
20
|
+
*/
|
|
21
|
+
closeButtonLabel?: string;
|
|
22
|
+
/**
|
|
23
|
+
* If true, clicking outside the drawer will not close it.
|
|
24
|
+
*/
|
|
25
|
+
disableOutsideClick?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Indicates if the built-in close button will be shown.
|
|
28
|
+
*/
|
|
29
|
+
hasCloseButton?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Is the drawer open?
|
|
32
|
+
*/
|
|
33
|
+
isOpen?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Which edge of the screen the drawer slides in from.
|
|
36
|
+
*/
|
|
37
|
+
placement?: DrawerPlacement;
|
|
38
|
+
/**
|
|
39
|
+
* Function to set the drawer open state.
|
|
40
|
+
*/
|
|
41
|
+
setIsOpen?: (isOpen: boolean) => void;
|
|
42
|
+
/**
|
|
43
|
+
* Preset width of the drawer. Overridden by the `width` prop if provided.
|
|
44
|
+
*/
|
|
45
|
+
size?: DrawerSize;
|
|
46
|
+
/**
|
|
47
|
+
* Title for the drawer. Accepts a string or ReactNode (e.g., a logo). Leave empty for no title.
|
|
48
|
+
*/
|
|
49
|
+
title?: ReactNode;
|
|
50
|
+
/**
|
|
51
|
+
* Custom width for the drawer. Accepts any valid CSS value (e.g. '50vw', '800px', '40rem'). Overrides the `size` prop.
|
|
52
|
+
*/
|
|
53
|
+
width?: string;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Drawer UI component
|
|
57
|
+
*/
|
|
58
|
+
export declare const Drawer: ({ ariaLabel, children, className, closeButtonLabel, disableOutsideClick, hasCloseButton, isOpen: isOpenProp, placement, setIsOpen: setIsOpenProp, size, title, width, ...props }: DrawerProps) => any;
|
|
@@ -18,4 +18,4 @@ export interface BarChartProps extends BaseChartProps, Omit<ComponentPropsWithou
|
|
|
18
18
|
* Renders a responsive bar chart with support for stacked or grouped layouts,
|
|
19
19
|
* multiple series, tooltips, and an accessible data table.
|
|
20
20
|
*/
|
|
21
|
-
export declare const BarChart: ({ barRadius, chartHeight, chartWidth, className, colorPalette, data, isLoading, isThumbnail, labelStrings, layout, legendVariant, onTimePeriodChange, selectedTimePeriod, series, showAccessibleTable, showAxisLines, showGrid, showLegend, showTooltip, timePeriodOptions, variant, xAxisLabel, yAxisFormatter, yAxisLabel, ...props }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const BarChart: ({ barRadius, chartHeight, chartWidth, className, colorPalette, data, isLoading, isThumbnail, labelStrings, layout, legendVariant, onTimePeriodChange, selectedTimePeriod, series, showAccessibleTable, showAxisLines, showGrid, showLegend, showTooltip, timePeriodOptions, tooltipContent, variant, xAxisLabel, xAxisTickInterval, yAxisDomain, yAxisFormatter, yAxisLabel, yAxisTickInterval, ...props }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -19,4 +19,4 @@ export interface LineChartProps extends BaseChartProps, Omit<ComponentPropsWitho
|
|
|
19
19
|
* Renders a responsive line chart with support for multiple series,
|
|
20
20
|
* reference lines, annotations, tooltips, and an accessible data table.
|
|
21
21
|
*/
|
|
22
|
-
export declare const LineChart: ({ annotations, chartHeight, chartWidth, className, colorPalette, data, isLoading, isThumbnail, labelStrings, legendVariant, lineStyle, onTimePeriodChange, referenceLines, selectedTimePeriod, series, showAccessibleTable, showAxisLines, showDataPoints, showGrid, showLegend, showTooltip, timePeriodOptions, xAxisLabel, yAxisFormatter, yAxisLabel, ...props }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const LineChart: ({ annotations, chartHeight, chartWidth, className, colorPalette, data, isLoading, isThumbnail, labelStrings, legendVariant, lineStyle, onTimePeriodChange, referenceLines, selectedTimePeriod, series, showAccessibleTable, showAxisLines, showDataPoints, showGrid, showLegend, showTooltip, timePeriodOptions, tooltipContent, xAxisLabel, xAxisTickInterval, yAxisDomain, yAxisFormatter, yAxisLabel, yAxisTickInterval, ...props }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -7,7 +7,7 @@ import type { ColorPalette } from './types';
|
|
|
7
7
|
export declare const toStandaloneColors: (palette: ColorPalette, colors: string[]) => string[];
|
|
8
8
|
/**
|
|
9
9
|
* Normalizes a paletteIndex for palettes that have fill-only steps.
|
|
10
|
-
* Clamps fill-only step numbers (e.g. 1–
|
|
10
|
+
* Clamps fill-only step numbers (e.g. 1–2 on sequential-iris/multi) to the first safe step,
|
|
11
11
|
* then adjusts for the slice offset so the number still maps correctly into the sliced array.
|
|
12
12
|
* Non-restricted palettes pass through unchanged.
|
|
13
13
|
*/
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
1
2
|
export interface ChartDataPoint {
|
|
2
3
|
/** One or more numeric series values, keyed by series name */
|
|
3
4
|
[key: string]: number | string;
|
|
@@ -43,8 +44,26 @@ export interface TimePeriodOption {
|
|
|
43
44
|
/** Value identifier */
|
|
44
45
|
value: string;
|
|
45
46
|
}
|
|
46
|
-
export type ColorPalette = 'categorical' | 'diverging' | 'sequential-gray' | 'sequential-iris' | 'sequential-multi' | 'single' | 'status';
|
|
47
|
+
export type ColorPalette = 'categorical' | 'diverging-a' | 'diverging-b' | 'sequential-gray' | 'sequential-iris' | 'sequential-multi' | 'single' | 'status';
|
|
47
48
|
export type LegendVariant = 'inline' | 'table';
|
|
49
|
+
export interface TooltipEntry {
|
|
50
|
+
/** Series bar/line color */
|
|
51
|
+
color: string;
|
|
52
|
+
/** Series data key */
|
|
53
|
+
dataKey: string;
|
|
54
|
+
/** Series display name */
|
|
55
|
+
name: string;
|
|
56
|
+
/** Data value */
|
|
57
|
+
value: number;
|
|
58
|
+
}
|
|
59
|
+
export interface TooltipPayload {
|
|
60
|
+
/** All series entries for this x-axis position */
|
|
61
|
+
entries: TooltipEntry[];
|
|
62
|
+
/** X-axis label */
|
|
63
|
+
label: string;
|
|
64
|
+
}
|
|
65
|
+
export type YAxisDomainItem = number | string | ((dataMax: number) => number);
|
|
66
|
+
export type YAxisDomain = [YAxisDomainItem, YAxisDomainItem];
|
|
48
67
|
export interface ChartLabelStrings {
|
|
49
68
|
/** Accessible description for the hidden data table. */
|
|
50
69
|
accessibleTableDescription?: string;
|
|
@@ -92,10 +111,18 @@ export interface BaseChartProps {
|
|
|
92
111
|
showTooltip?: boolean;
|
|
93
112
|
/** Time period options for built-in selector */
|
|
94
113
|
timePeriodOptions?: TimePeriodOption[];
|
|
114
|
+
/** Custom tooltip renderer. Receives normalized payload and replaces the built-in tooltip. */
|
|
115
|
+
tooltipContent?: (payload: TooltipPayload) => ReactNode;
|
|
95
116
|
/** X-axis label */
|
|
96
117
|
xAxisLabel?: string;
|
|
118
|
+
/** How often to show x-axis ticks. A number n shows every nth tick (e.g. 1 = every other). Defaults to auto. */
|
|
119
|
+
xAxisTickInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
|
|
120
|
+
/** Override the Y-axis scale bounds. Accepts a tuple of [min, max] where each can be a number, 'auto', 'dataMin', 'dataMax', or a function receiving the data max. */
|
|
121
|
+
yAxisDomain?: YAxisDomain;
|
|
97
122
|
/** Custom Y-axis tick formatter */
|
|
98
123
|
yAxisFormatter?: (value: number) => string;
|
|
99
124
|
/** Y-axis label */
|
|
100
125
|
yAxisLabel?: string;
|
|
126
|
+
/** How often to show y-axis ticks. A number n shows every nth tick (e.g. 1 = every other). Defaults to auto. */
|
|
127
|
+
yAxisTickInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
|
|
101
128
|
}
|
|
@@ -28,8 +28,16 @@ export interface DashboardNavProps extends ComponentPropsWithoutRef<'nav'> {
|
|
|
28
28
|
* Text to display in the mobile menu trigger button when no active link is found.
|
|
29
29
|
*/
|
|
30
30
|
mobileMenuSelectTextFallback?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Optional secondary section of navigation items, displayed below a divider.
|
|
33
|
+
*/
|
|
34
|
+
secondaryMenuItems?: DashboardNavItemProps[];
|
|
35
|
+
/**
|
|
36
|
+
* Overline label for the secondary navigation section. Hidden when the sidebar is collapsed.
|
|
37
|
+
*/
|
|
38
|
+
secondaryMenuLabel?: string;
|
|
31
39
|
}
|
|
32
40
|
/**
|
|
33
41
|
* DashboardNav UI component
|
|
34
42
|
*/
|
|
35
|
-
export declare const DashboardNav: ({ ariaLabel, className, labels, menuItems, mobileMenuSelectTextFallback, ...props }: DashboardNavProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export declare const DashboardNav: ({ ariaLabel, className, labels, menuItems, mobileMenuSelectTextFallback, secondaryMenuItems, secondaryMenuLabel, ...props }: DashboardNavProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-theme=light]{--pds-color-datavis-single-active:#
|
|
1
|
+
:root,[data-theme=light]{--pds-color-datavis-single-active:#3a5dfb;--pds-color-datavis-single-muted:#d9d9d9;--pds-color-datavis-sequential-iris-1:#eaf0ff;--pds-color-datavis-sequential-iris-2:#c6d6ff;--pds-color-datavis-sequential-iris-3:#9db9ff;--pds-color-datavis-sequential-iris-4:#749cff;--pds-color-datavis-sequential-iris-5:#3a5dfb;--pds-color-datavis-sequential-iris-6:#2e4bd9;--pds-color-datavis-sequential-iris-7:#1d38b2;--pds-color-datavis-sequential-iris-8:#0e2177;--pds-color-datavis-sequential-neutral-1:#ebebeb;--pds-color-datavis-sequential-neutral-2:#ccc;--pds-color-datavis-sequential-neutral-3:#adadad;--pds-color-datavis-sequential-neutral-4:#939393;--pds-color-datavis-sequential-neutral-5:#797979;--pds-color-datavis-sequential-neutral-6:#606060;--pds-color-datavis-sequential-neutral-7:#454545;--pds-color-datavis-sequential-neutral-8:#2c2c2c;--pds-color-datavis-sequential-multi-1:#eaf0ff;--pds-color-datavis-sequential-multi-2:#c6d6ff;--pds-color-datavis-sequential-multi-3:#9db9ff;--pds-color-datavis-sequential-multi-4:#5ab3d4;--pds-color-datavis-sequential-multi-5:#2b9ebb;--pds-color-datavis-sequential-multi-6:#1a8fa0;--pds-color-datavis-sequential-multi-7:#0a7a85;--pds-color-datavis-sequential-multi-8:#00896e;--pds-color-datavis-diverging-a-1:#00a793;--pds-color-datavis-diverging-a-2:#65ccbc;--pds-color-datavis-diverging-a-3:#b2ece2;--pds-color-datavis-diverging-a-4:#e0e0e0;--pds-color-datavis-diverging-a-5:#c0d8f8;--pds-color-datavis-diverging-a-6:#8fb8f0;--pds-color-datavis-diverging-a-7:#5294f6;--pds-color-datavis-diverging-b-1:#7a2ca3;--pds-color-datavis-diverging-b-2:#a56fbd;--pds-color-datavis-diverging-b-3:#ccafd7;--pds-color-datavis-diverging-b-4:#e0e0e0;--pds-color-datavis-diverging-b-5:#f9c2af;--pds-color-datavis-diverging-b-6:#f59371;--pds-color-datavis-diverging-b-7:#ea6134;--pds-color-datavis-categorical-1:#00b29e;--pds-color-datavis-categorical-2:#3778d7;--pds-color-datavis-categorical-3:#8854bb;--pds-color-datavis-categorical-4:#ea6134;--pds-color-datavis-status-success:#217a37;--pds-color-datavis-status-critical:#bc1c11;--pds-color-datavis-status-info:#006dda;--pds-color-datavis-status-warning:#ab6000;--pds-color-datavis-status-discovery:#6f20a5;--pds-color-datavis-status-neutral:#6a6e7a}[data-theme=dark]{--pds-color-datavis-single-active:#749cff;--pds-color-datavis-single-muted:#404040;--pds-color-datavis-sequential-iris-1:#eaf0ff;--pds-color-datavis-sequential-iris-2:#c6d6ff;--pds-color-datavis-sequential-iris-3:#9db9ff;--pds-color-datavis-sequential-iris-4:#749cff;--pds-color-datavis-sequential-iris-5:#5a7fff;--pds-color-datavis-sequential-iris-6:#4a6aee;--pds-color-datavis-sequential-iris-7:#6070d0;--pds-color-datavis-sequential-iris-8:#6878c8;--pds-color-datavis-sequential-neutral-1:#f5f5f5;--pds-color-datavis-sequential-neutral-2:#e0e0e0;--pds-color-datavis-sequential-neutral-3:#c8c8c8;--pds-color-datavis-sequential-neutral-4:#adadad;--pds-color-datavis-sequential-neutral-5:#979797;--pds-color-datavis-sequential-neutral-6:#838383;--pds-color-datavis-sequential-neutral-7:#737373;--pds-color-datavis-sequential-neutral-8:#6b6b6b;--pds-color-datavis-sequential-multi-1:#eaf0ff;--pds-color-datavis-sequential-multi-2:#c6d6ff;--pds-color-datavis-sequential-multi-3:#7bbcee;--pds-color-datavis-sequential-multi-4:#4aaec8;--pds-color-datavis-sequential-multi-5:#2a9eaa;--pds-color-datavis-sequential-multi-6:#1a9090;--pds-color-datavis-sequential-multi-7:#0e8080;--pds-color-datavis-sequential-multi-8:#0e7872;--pds-color-datavis-diverging-a-1:#008f7d;--pds-color-datavis-diverging-a-2:#3aada0;--pds-color-datavis-diverging-a-3:#72c4bb;--pds-color-datavis-diverging-a-4:#555;--pds-color-datavis-diverging-a-5:#728fc4;--pds-color-datavis-diverging-a-6:#6080b8;--pds-color-datavis-diverging-a-7:#5878b0;--pds-color-datavis-diverging-b-1:#a850c8;--pds-color-datavis-diverging-b-2:#b868d0;--pds-color-datavis-diverging-b-3:#c090d8;--pds-color-datavis-diverging-b-4:#555;--pds-color-datavis-diverging-b-5:#d49080;--pds-color-datavis-diverging-b-6:#c87050;--pds-color-datavis-diverging-b-7:#b85030;--pds-color-datavis-categorical-1:#00d4be;--pds-color-datavis-categorical-2:#5fa7ff;--pds-color-datavis-categorical-3:#b77ff2;--pds-color-datavis-categorical-4:#ff8e5f;--pds-color-datavis-status-success:#43c463;--pds-color-datavis-status-critical:#de2e21;--pds-color-datavis-status-info:#4ba2ff;--pds-color-datavis-status-warning:#b06300;--pds-color-datavis-status-discovery:#6f3fa6;--pds-color-datavis-status-neutral:#b0b0b6}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-chart{font-family:var(--pds-typography-ff-default);position:relative;width:100%}.pds-chart__header{align-items:center;display:flex;justify-content:flex-end;margin-block-end:var(--pds-spacing-m)}.pds-chart--loading{display:block}.pds-chart__skeleton{display:flex;flex-direction:column;gap:var(--pds-spacing-m);height:100%;width:100%}.pds-chart__skeleton-area{flex-shrink:0}.pds-chart__skeleton-legend{align-items:center;display:flex;gap:var(--pds-spacing-s)}.pds-chart__skeleton-legend--inline{justify-content:center}.pds-chart__skeleton-legend--table{width:100%}.pds-chart--empty{align-items:center;display:flex;justify-content:center}.recharts-default-tooltip{background-color:var(--pds-color-bg-default)!important;border:var(--pds-border-width-default) solid var(--pds-color-border-default)!important;border-radius:var(--pds-border-radius-container)!important;box-shadow:var(--pds-elevation-overlay)!important;font-family:var(--pds-typography-ff-default)!important;font-size:var(--pds-typography-size-xs)!important;padding:var(--pds-spacing-4xs) var(--pds-spacing-xs)!important}.recharts-tooltip-label{color:var(--pds-color-fg-default)!important;font-weight:var(--pds-typography-fw-semibold)!important;margin:0!important}.recharts-tooltip-item-list li
|
|
1
|
+
.pds-chart{font-family:var(--pds-typography-ff-default);position:relative;width:100%}.pds-chart__header{align-items:center;display:flex;justify-content:flex-end;margin-block-end:var(--pds-spacing-m)}.pds-chart--loading{display:block}.pds-chart__skeleton{display:flex;flex-direction:column;gap:var(--pds-spacing-m);height:100%;width:100%}.pds-chart__skeleton-area{flex-shrink:0}.pds-chart__skeleton-legend{align-items:center;display:flex;gap:var(--pds-spacing-s)}.pds-chart__skeleton-legend--inline{justify-content:center}.pds-chart__skeleton-legend--table{width:100%}.pds-chart--empty{align-items:center;display:flex;justify-content:center}.recharts-default-tooltip{background-color:var(--pds-color-bg-default)!important;border:var(--pds-border-width-default) solid var(--pds-color-border-default)!important;border-radius:var(--pds-border-radius-container)!important;box-shadow:var(--pds-elevation-overlay)!important;font-family:var(--pds-typography-ff-default)!important;font-size:var(--pds-typography-size-xs)!important;padding:var(--pds-spacing-4xs) var(--pds-spacing-xs)!important}.recharts-tooltip-label{color:var(--pds-color-fg-default)!important;font-weight:var(--pds-typography-fw-semibold)!important;margin:0!important}.recharts-tooltip-item-list li{padding-block:0!important}.recharts-tooltip-item-list{padding:0!important}.recharts-tooltip-item{align-items:center;color:var(--pds-color-fg-default)!important;display:flex;font-size:var(--pds-typography-size-xs)!important;gap:var(--pds-spacing-3xs);margin:0!important;padding:var(--pds-spacing-6xs) 0!important}.recharts-tooltip-item__color{border-radius:2px;display:inline-block;flex-shrink:0;height:8px;width:8px}.pds-bar-chart [aria-hidden=true]:focus,.pds-line-chart [aria-hidden=true]:focus,.recharts-surface:focus,.recharts-wrapper :focus,.recharts-wrapper:focus{outline:none}
|
|
@@ -2,4 +2,4 @@
|
|
|
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--active .pds-dashboard-nav__item-wrapper{--dashboard-nav-foreground-color:var(
|
|
4
4
|
--pds-color-dashboard-nav-item-foreground-active
|
|
5
|
-
);--dashboard-nav-outline-color:var(--pds-color-brand-primary-default);background-color:var(--pds-color-dashboard-nav-item-background-active)}.pds-dashboard-nav__item--top-level.pds-dashboard-nav__item--active .pds-dashboard-nav__item-wrapper:hover{background-color:var(--pds-color-dashboard-nav-item-background-active)}.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 cubic-bezier(.2,0,0,1) 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,.pds-dashboard-nav__link-icon{align-items:center;display:flex}.pds-dashboard-nav__link-icon{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.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:hover{color:var(--pds-color-nav-item-default-foreground-hover)}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level a:focus-visible{border-radius:.375rem;outline:1px solid var(--pds-color-interactive-focus);transition:outline .2s cubic-bezier(.2,0,0,1) 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 cubic-bezier(.2,0,0,1) 0s}.pds-dashboard-nav__toggle--expanded .pds-icon{transform:rotate(180deg);transition:all .2s cubic-bezier(.2,0,0,1) 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:300}.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);font-size:1rem;line-height:120%;margin:0}.pds-dashboard-nav__item--second-level-flyout a{border-radius:.375rem;cursor:pointer;display:block;padding:.64rem .8rem}.pds-dashboard-nav__item--second-level-flyout a:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.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:.375rem;outline:1px solid var(--pds-color-interactive-focus);transition:outline .2s cubic-bezier(.2,0,0,1) 0s}.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)}
|
|
5
|
+
);--dashboard-nav-outline-color:var(--pds-color-brand-primary-default);background-color:var(--pds-color-dashboard-nav-item-background-active)}.pds-dashboard-nav__item--top-level.pds-dashboard-nav__item--active .pds-dashboard-nav__item-wrapper:hover{background-color:var(--pds-color-dashboard-nav-item-background-active)}.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 cubic-bezier(.2,0,0,1) 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,.pds-dashboard-nav__link-icon{align-items:center;display:flex}.pds-dashboard-nav__link-icon{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.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:hover{color:var(--pds-color-nav-item-default-foreground-hover)}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level a:focus-visible{border-radius:.375rem;outline:1px solid var(--pds-color-interactive-focus);transition:outline .2s cubic-bezier(.2,0,0,1) 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 cubic-bezier(.2,0,0,1) 0s}.pds-dashboard-nav__toggle--expanded .pds-icon{transform:rotate(180deg);transition:all .2s cubic-bezier(.2,0,0,1) 0s}.pds-dashboard-nav__divider{background-color:var(--pds-color-border-default);block-size:1px;margin-block:1.563rem}.pds-dashboard-nav__section-label{color:var(--pds-color-text-default-secondary);font-family:Poppins,sans-serif;font-size:.833rem;font-weight:700;letter-spacing:.04em;line-height:120%;margin-block-end:1.25rem;margin-block-start:1.953rem;padding-inline:var(--pds-spacing-dashboard-nav-item-padding);text-transform:uppercase}.pds-dashboard-nav__link-label{opacity:1;transition:opacity .1s ease-in-out}.pds-dashboard-nav--collapsed .pds-dashboard-nav__section-label{display:none}.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:300}.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);font-size:1rem;line-height:120%;margin:0}.pds-dashboard-nav__item--second-level-flyout a{border-radius:.375rem;cursor:pointer;display:block;padding:.64rem .8rem}.pds-dashboard-nav__item--second-level-flyout a:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.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:.375rem;outline:1px solid var(--pds-color-interactive-focus);transition:outline .2s cubic-bezier(.2,0,0,1) 0s}.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)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pds-drawer__wrapper{inset:0;position:fixed;z-index:var(--pds-z-index-modal)}.pds-drawer__overlay{background-color:var(--pds-color-overlay);inset:0;opacity:0;position:fixed;transition:opacity .3s ease}.pds-drawer__overlay--visible{opacity:1}.pds-drawer{background-color:var(--pds-color-bg-default);display:flex;flex-direction:column;height:100vh;max-width:90vw;overflow:hidden;position:fixed;top:0;transition:transform .3s cubic-bezier(.2,0,0,1);width:25rem}.pds-drawer--right{right:0;transform:translateX(100%)}.pds-drawer--left,.pds-drawer--right{box-shadow:var(--pds-elevation-overlay)}.pds-drawer--left{left:0;transform:translateX(-100%)}.pds-drawer--open{transform:translateX(0)}.pds-drawer--sm{width:20rem}.pds-drawer--md{width:25rem}.pds-drawer--lg{width:37.5rem}.pds-drawer__header{align-items:center;display:flex;justify-content:space-between;padding:var(--pds-spacing-l) var(--pds-spacing-xl)}.pds-drawer__header .pds-close-button{margin-inline-start:auto}.pds-drawer__title{font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-xl);font-weight:var(--pds-typography-fw-semibold);line-height:var(--pds-typography-lh-s)}.pds-drawer__content{flex:1;overflow-y:auto;padding:0 var(--pds-spacing-xl) var(--pds-spacing-xl)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
.pds-dropdown-menu{position:relative}.pds-dropdown-menu__heading{font-weight:600;margin-block-end:.64rem}.pds-dropdown-menu__heading a{color:var(--pds-color-fg-default);text-decoration:none}.pds-dropdown-menu__heading a:hover{color:var(--pds-color-interactive-link-hover)}.pds-dropdown-menu__trigger{align-items:center;background-color:var(--pds-color-bg-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;color:var(--pds-color-fg-default);cursor:pointer;display:flex;height:var(--pds-spacing-input-height);justify-content:space-between;padding:0 .64rem;text-align:left;width:100%}.pds-dropdown-menu__trigger:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{color:var(--pds-color-nav-item-default-foreground-trigger);transition:transform .2s cubic-bezier(.2,0,0,1) 0s}.pds-dropdown-menu__trigger[aria-expanded=true]
|
|
2
|
-
.pds-dropdown-menu__trigger-icon{transform:rotate(180deg);transition:transform .2s cubic-bezier(.2,0,0,1) 0s}.pds-dropdown-menu__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);list-style-type:none;margin-block-start:.64rem;max-height:30rem;overflow-y:scroll;padding:0;position:absolute;width:100%;z-index:300}.pds-dropdown-menu__dropdown a{color:var(--pds-color-dropdown-foreground);display:flex;padding:.64rem 1rem;text-decoration:none}.pds-dropdown-menu__dropdown:focus{outline:none}.pds-dropdown-menu__item:focus,.pds-dropdown-menu__item:hover{background-color:var(--pds-color-dropdown-item-background-hover);outline:none}.pds-dropdown-menu__item:focus a:active,.pds-dropdown-menu__item:hover a:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown-menu__item--second-level a{padding-inline-start:2.441rem}.pds-dropdown-menu__item--third-level a{padding-inline-start:4.004rem}.pds-dropdown-menu__item--fourth-level a{padding-inline-start:5.567rem}.pds-dropdown-menu__active-label{display:flex;padding-inline-start:.25rem}.pds-dropdown-menu__item--active{align-items:center;background-color:var(--pds-color-dropdown-item-background-selected);color:var(--pds-color-fg-default);display:flex;justify-content:space-between}.pds-dropdown-menu__active-icon{color:var(--pds-color-status-success-foreground);flex-shrink:0;margin-inline:1rem}
|
|
2
|
+
.pds-dropdown-menu__trigger-icon{transform:rotate(180deg);transition:transform .2s cubic-bezier(.2,0,0,1) 0s}.pds-dropdown-menu__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);list-style-type:none;margin-block-start:.64rem;max-height:30rem;overflow-y:scroll;padding:0;position:absolute;width:100%;z-index:300}.pds-dropdown-menu__dropdown a{color:var(--pds-color-dropdown-foreground);display:flex;padding:.64rem 1rem;text-decoration:none}.pds-dropdown-menu__dropdown:focus{outline:none}.pds-dropdown-menu__item:focus,.pds-dropdown-menu__item:hover{background-color:var(--pds-color-dropdown-item-background-hover);outline:none}.pds-dropdown-menu__item:focus a:active,.pds-dropdown-menu__item:hover a:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown-menu__item--second-level a{padding-inline-start:2.441rem}.pds-dropdown-menu__item--third-level a{padding-inline-start:4.004rem}.pds-dropdown-menu__item--fourth-level a{padding-inline-start:5.567rem}.pds-dropdown-menu__active-label{display:flex;padding-inline-start:.25rem}.pds-dropdown-menu__item--active{align-items:center;background-color:var(--pds-color-dropdown-item-background-selected);color:var(--pds-color-fg-default);display:flex;justify-content:space-between}.pds-dropdown-menu__active-icon{color:var(--pds-color-status-success-foreground);flex-shrink:0;margin-inline:1rem}.pds-dropdown-menu__separator{background-color:var(--pds-color-border-default);block-size:1px;margin-block:.64rem;pointer-events:none}
|