@worldresources/wri-design-systems 2.194.6 → 2.195.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/README.md +13 -0
- package/agents/skills/a11y-checker/SKILL.md +117 -0
- package/agents/skills/ds-ui-creator/SKILL.md +156 -0
- package/agents/skills/pr-description/SKILL.md +24 -0
- package/dist/index.cjs.js +59 -49
- package/dist/index.d.ts +7 -3
- package/dist/index.esm.js +60 -50
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -70,6 +70,19 @@ Optional: run it against a specific path:
|
|
|
70
70
|
ds setup-ai /path/to/your/project
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
+
### Available Skills
|
|
74
|
+
|
|
75
|
+
Copy the `SKILL.md` file you want into the matching skills folder in your own project:
|
|
76
|
+
|
|
77
|
+
- Skills repo path: `agents/skills/<skill-name>/SKILL.md`
|
|
78
|
+
- Copy the folder into the agent-specific skills directory your project uses.
|
|
79
|
+
|
|
80
|
+
| Skill | What it does |
|
|
81
|
+
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
|
|
82
|
+
| [`a11y-checker`](agents/skills/a11y-checker/SKILL.md) | Reviews components, stories, and docs for accessibility issues and suggests or applies fixes. |
|
|
83
|
+
| [`ds-ui-creator`](agents/skills/ds-ui-creator/SKILL.md) | Guides UI creation with the WRI Design System first, Chakra UI second, and custom code last. |
|
|
84
|
+
| [`pr-description`](agents/skills/pr-description/SKILL.md) | Generates a PR description from the branch diff in a consistent markdown format. |
|
|
85
|
+
|
|
73
86
|
### Create the Project Theme
|
|
74
87
|
|
|
75
88
|
With this custom theme you can change the color scheme according to your Project Theme
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: a11y-checker
|
|
3
|
+
description: Reviews UI code (HTML, JSX, TSX, Vue, etc.) for accessibility (a11y) compliance across both library development (WRI Design System) and generic web applications, providing concrete guidelines and code-level fixes.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
When running the accessibility checker on any codebase, follow this multi-tiered guide to ensure compliance with universal WCAG standards as well as library-specific rules.
|
|
7
|
+
|
|
8
|
+
## 1. Universal Accessibility Standards (Any Web Project)
|
|
9
|
+
|
|
10
|
+
Apply these rules to any kind of project (plain HTML, native React, Vue, Angular, or other UI libraries):
|
|
11
|
+
|
|
12
|
+
### Accessible Names & Interactive Elements
|
|
13
|
+
|
|
14
|
+
- **Discernible Text**: Every clickable control (buttons, links, inputs) must have a discernible text label.
|
|
15
|
+
- **Icon-Only Actions**: If a button contains only an icon or image, it must receive an `aria-label` or `aria-labelledby` attribute (e.g., `<button aria-label="Close dialog">` or `<IconButton aria-label="Delete item" />`).
|
|
16
|
+
- **Images and SVGs**:
|
|
17
|
+
- Standalone SVGs used as controls must have `role="img"` and an `aria-label`.
|
|
18
|
+
- Decorative icons or illustrations must have `aria-hidden="true"` or `alt=""` so they are ignored by screen readers.
|
|
19
|
+
|
|
20
|
+
### Forms & Input Controls
|
|
21
|
+
|
|
22
|
+
- **Explicit Associations**: Native HTML form controls must have a `<label>` explicitly linked using the `for` (or `htmlFor` in React) and `id` attributes.
|
|
23
|
+
- **Accessible Placeholders**: A `placeholder` is not an accessible label. A proper visible label or `aria-label` must always be provided.
|
|
24
|
+
- **Validation Signals**: Error states must never rely on color changes alone. Set `aria-invalid="true"` and programmatically link the input to its validation error message using `aria-describedby="error-message-id"`.
|
|
25
|
+
|
|
26
|
+
### Layout & Landmark Structures
|
|
27
|
+
|
|
28
|
+
- **Semantic HTML**: Use correct semantic tags (`<header>`, `<nav>`, `<main>`, `<footer>`, `<aside>`, `<section>`) instead of generic `<div>` wrappers.
|
|
29
|
+
- **Multiple Landmarks**: If a page has multiple navigation regions, distinguish them using unique `aria-label` attributes (e.g., `<nav aria-label="Main navigation">` and `<nav aria-label="Footer navigation">`).
|
|
30
|
+
|
|
31
|
+
### Keyboard Navigation & Focus Management
|
|
32
|
+
|
|
33
|
+
- **Focus Path**: Every interactive element must be reachable using the `Tab` key. Custom non-interactive elements that trigger actions (e.g., a clickable `div`) must have `tabindex="0"`.
|
|
34
|
+
- **Keyboard Triggers**: Custom interactive elements must handle `Enter` and `Space` key presses using keydown/keyup event handlers.
|
|
35
|
+
- **Visible Focus**: Never suppress the browser's default focus outlines (`outline: none` or `outline: 0`) unless you are explicitly defining custom, highly-visible CSS focus indicator styles (e.g. using `:focus-visible`).
|
|
36
|
+
- **Overlay Focus Traps**: Modals, slide-out panels, and dropdown menus must trap keyboard focus inside them while open, and must restore focus to the triggering element upon closure.
|
|
37
|
+
|
|
38
|
+
### Data & Tabular Layouts
|
|
39
|
+
|
|
40
|
+
- **Tables**: HTML tables must use correct semantic markup (`<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`). Headers should use `scope="col"` or `scope="row"`. Provide a `<caption>` or an `aria-label` to summarize the table structure.
|
|
41
|
+
- **Sortable Columns**: Header cells representing sortable columns must declare the current sort order via `aria-sort` (e.g. `aria-sort="ascending"` or `aria-sort="descending"`).
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## 2. Project-Specific Rules
|
|
46
|
+
|
|
47
|
+
### Context A: WRI Design System Library Contributor (`src/components/**`)
|
|
48
|
+
|
|
49
|
+
When writing or updating components inside the `@worldresources/wri-design-systems` library:
|
|
50
|
+
|
|
51
|
+
- **Expose ARIA Props**: Ensure TypeScript interfaces in `types.ts` explicitly declare standard `aria-*` props, and forward them directly to the underlying elements.
|
|
52
|
+
- **Defaults**: Check the component documentation guidelines in `contributor-ai/a11y.instructions.md`.
|
|
53
|
+
- **Test with Axe**: Write stories (`*.stories.tsx`) that demonstrate accessible configurations and include testing using `jest-axe` or Storybook's built-in a11y tools.
|
|
54
|
+
|
|
55
|
+
### Context B: Consumer Apps using WRI Design System
|
|
56
|
+
|
|
57
|
+
When consuming WRI DS components in external applications:
|
|
58
|
+
|
|
59
|
+
- **Use Wrapper API**: Prefer built-in design system properties (e.g., `label` and `error` props on `TextInput` or `Select`) which automatically wire up proper markup, instead of manually writing custom ARIA glue.
|
|
60
|
+
- **No Overrides**: Never add `tabIndex={-1}` or visual overrides that hide focus rings on standard DS buttons or inputs.
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## 3. Auditing Process
|
|
65
|
+
|
|
66
|
+
When checking a file, follow this flow:
|
|
67
|
+
|
|
68
|
+
1. **Interactive Control Scan**: Locate all interactive controls (buttons, links, custom clickable elements). Verify that each has a discernible name (text, `aria-label`, or linked label).
|
|
69
|
+
2. **Keyboard Path Audit**: Trace where focus moves. Ensure overlays/modals have trap-and-release focus management, and focus indicators are visible.
|
|
70
|
+
3. **Form Wiring Verification**: Check that all input fields have valid labels, required states (`aria-required`), and connected error messages.
|
|
71
|
+
4. **Markup Semantics Check**: Ensure landmarks exist and no inline SVG or icon lack proper `aria-hidden` or label states.
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## 4. Code Examples (Common Fixes)
|
|
76
|
+
|
|
77
|
+
### Custom Icon Buttons
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
// ❌ HTML / Generic React Error (No accessible name, icon read as raw text or ignored)
|
|
81
|
+
<button onClick={onClose}><CloseIcon /></button>
|
|
82
|
+
|
|
83
|
+
// ✅ HTML / Generic React Fix
|
|
84
|
+
<button aria-label="Close dialog" onClick={onClose}>
|
|
85
|
+
<CloseIcon aria-hidden="true" />
|
|
86
|
+
</button>
|
|
87
|
+
|
|
88
|
+
// ✅ WRI DS Fix
|
|
89
|
+
<IconButton aria-label="Close dialog" icon={<CloseIcon aria-hidden="true" />} onClick={onClose} />
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Form Fields with Error States
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
// ❌ Generic HTML Error (Color only, screen reader cannot read validation error connection)
|
|
96
|
+
<input type="email" style={{ borderColor: 'red' }} />
|
|
97
|
+
<span className="error">Invalid email address</span>
|
|
98
|
+
|
|
99
|
+
// ✅ Generic HTML Fix
|
|
100
|
+
<label htmlFor="email-input">Email Address</label>
|
|
101
|
+
<input
|
|
102
|
+
id="email-input"
|
|
103
|
+
type="email"
|
|
104
|
+
aria-invalid="true"
|
|
105
|
+
aria-describedby="email-error-msg"
|
|
106
|
+
/>
|
|
107
|
+
<span id="email-error-msg" className="error">Invalid email address</span>
|
|
108
|
+
|
|
109
|
+
// ✅ WRI DS Fix
|
|
110
|
+
<TextInput
|
|
111
|
+
label="Email Address"
|
|
112
|
+
error="Invalid email address"
|
|
113
|
+
aria-invalid={true}
|
|
114
|
+
aria-describedby="email-error-msg"
|
|
115
|
+
id="email-input"
|
|
116
|
+
/>
|
|
117
|
+
```
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ds-ui-creator
|
|
3
|
+
description: Guidelines for building user interfaces and components in applications consuming the WRI Design System, incorporating Level 1 (WRI DS), Level 2 (Chakra UI v3), and Level 3 (Custom CSS/HTML).
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
When building components and user interfaces in an application consuming the WRI Design System, developers and AI coding agents must follow these guidelines:
|
|
7
|
+
|
|
8
|
+
## 1. Component Hierarchy (Golden Rule)
|
|
9
|
+
|
|
10
|
+
Always evaluate and build UI elements using the following hierarchy. Never skip a level:
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
1. @worldresources/wri-design-systems (WRI DS) ← Always check first
|
|
14
|
+
2. @chakra-ui/react (Chakra UI v3) ← Fallback if no WRI DS equivalent
|
|
15
|
+
3. Custom HTML + CSS / Styled Primitives ← Last resort (requires reasoning tag)
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### Level 1: WRI Design System (`@worldresources/wri-design-systems`)
|
|
19
|
+
|
|
20
|
+
- **First Choice**: Check Storybook, Zeroheight style guide, or README files to verify if a component exists in the design system.
|
|
21
|
+
- **Do Not Rebuild**: Never use raw elements (e.g. `<button>`, `<input>`, `<select>`) or raw Chakra equivalents when a WRI DS wrapper exists (e.g. `Button`, `IconButton`, `Select`, `TextInput`).
|
|
22
|
+
- **No Style Overrides**: Do NOT use `sx`, `css`, `style`, or `className` to override design system component styles. Use them exactly as-is to preserve visual consistency.
|
|
23
|
+
- **Query MCP**: Use the Storybook MCP server to check component listings (`mcp_wri-storybook_getComponentList`) and verify exact prop signatures (`mcp_wri-storybook_getComponentsProps`).
|
|
24
|
+
|
|
25
|
+
### Level 2: Chakra UI v3 (`@chakra-ui/react`)
|
|
26
|
+
|
|
27
|
+
- **Use as Fallback**: If there is no corresponding WRI DS component, use standard Chakra UI v3 primitives (e.g., `<Box>`, `<Flex>`, `<Grid>`).
|
|
28
|
+
- **Chakra v3 API Only**: Do not use legacy Chakra v2 properties (like `colorScheme`, `isDisabled`, or `leftIcon`). Verify all props using the Chakra MCP server (`mcp_chakra-ui_get_component_props`).
|
|
29
|
+
- **Theme Integration**: Apply styling using the themed token functions rather than passing raw non-token values.
|
|
30
|
+
|
|
31
|
+
### Level 3: Custom Code (Last Resort)
|
|
32
|
+
|
|
33
|
+
- **Required Marker**: If custom CSS or custom HTML is absolutely necessary because neither WRI DS nor Chakra v3 has the capabilities needed, comment it clearly with:
|
|
34
|
+
`// [CUSTOM COMPONENT] — <detailed reason explaining why Level 1 & 2 were bypassed>`
|
|
35
|
+
- **No Hardcoding**: Custom components must still use design token functions for sizes, colors, margins, and borders. Never write raw hex colors, px, or rem.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## 2. Design Tokens & Theme API (Strict Token Enforcement)
|
|
40
|
+
|
|
41
|
+
All values (colors, spacing, typography, borders, radii) must resolve through the design system token functions. Never hardcode literal values like `#2C7D6E`, `1rem`, `16px`, etc.
|
|
42
|
+
|
|
43
|
+
### Token Helper Imports
|
|
44
|
+
|
|
45
|
+
Import the themed helpers directly from the `@worldresources/wri-design-systems` package:
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
import {
|
|
49
|
+
getThemedColor,
|
|
50
|
+
getThemedSpacing,
|
|
51
|
+
getThemedRadius,
|
|
52
|
+
getThemedBorderWidth,
|
|
53
|
+
getThemedFontSize,
|
|
54
|
+
getThemedLineHeight,
|
|
55
|
+
} from '@worldresources/wri-design-systems'
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Reference Tables
|
|
59
|
+
|
|
60
|
+
| Category | Function | Valid Values / Steps / Tokens | Example |
|
|
61
|
+
| :--------------- | :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------- |
|
|
62
|
+
| **Colors** | `getThemedColor(variant, step)` | **Variants**: `neutral`, `primary`, `secondary`, `success`, `warning`, `error`, `accessible`<br>**Steps**: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` | `getThemedColor('primary', 500)` |
|
|
63
|
+
| **Spacing** | `getThemedSpacing(token)` | `0`, `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `1000`, `1100`, `1200`, `1400`, `1600`, `2000`, `2400`, `2800` | `getThemedSpacing(400)` (1rem) |
|
|
64
|
+
| **Radius** | `getThemedRadius(token)` | `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` | `getThemedRadius(500)` (0.5rem) |
|
|
65
|
+
| **Border Width** | `getThemedBorderWidth(token)` | `100`, `200`, `300`, `400` | `getThemedBorderWidth(100)` (0.0625rem) |
|
|
66
|
+
| **Font Size** | `getThemedFontSize(token)` | `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `1000`, `1100` | `getThemedFontSize(700)` (1.5rem) |
|
|
67
|
+
| **Line Height** | `getThemedLineHeight(token)` | `300`, `400`, `500`, `600`, `700`, `800`, `900`, `1000`, `1100`, `1200` | `getThemedLineHeight(400)` (1rem) |
|
|
68
|
+
|
|
69
|
+
### Code Examples
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
// ❌ INCORRECT (Hardcoded visual values & bypassed tokens)
|
|
73
|
+
<Box
|
|
74
|
+
p="1rem"
|
|
75
|
+
bg="#2C7D6E"
|
|
76
|
+
borderRadius="8px"
|
|
77
|
+
fontSize="16px"
|
|
78
|
+
border="1px solid #E2E8F0"
|
|
79
|
+
/>
|
|
80
|
+
|
|
81
|
+
// ✅ CORRECT (Tokens mapped using design system theme helper functions)
|
|
82
|
+
<Box
|
|
83
|
+
p={getThemedSpacing(400)}
|
|
84
|
+
bg={getThemedColor('primary', 500)}
|
|
85
|
+
borderRadius={getThemedRadius(500)}
|
|
86
|
+
fontSize={getThemedFontSize(400)}
|
|
87
|
+
border={`${getThemedBorderWidth(100)} solid ${getThemedColor('neutral', 200)}`}
|
|
88
|
+
/>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## 3. Accessibility (A11y) Requirements
|
|
94
|
+
|
|
95
|
+
Accessibility must be verified at every call site. Components provide internally sound accessible states, but they require proper configurations from developers:
|
|
96
|
+
|
|
97
|
+
1. **Accessible Control Names**:
|
|
98
|
+
- Icon-only actions (like `IconButton`, `CloseButton`, or a text-free `Button`) must receive a localized, descriptive `aria-label`.
|
|
99
|
+
- Form fields must have labels. Prefer the built-in `label` prop. If no visible label is shown, provide `aria-label` or `aria-labelledby`.
|
|
100
|
+
2. **Interactive States**:
|
|
101
|
+
- Toggle buttons must reflect state with `aria-pressed={isPressed}`.
|
|
102
|
+
- Elements that trigger collapsible panels or menus must use `aria-expanded={isOpen}` and `aria-controls="panel-id"`.
|
|
103
|
+
3. **Form Validation & Error States**:
|
|
104
|
+
- When a field has validation errors, set `aria-invalid={true}` and use `aria-describedby` pointing to the error message container. Never signal an error state through color changes alone.
|
|
105
|
+
4. **Layout Navigation Landmarks**:
|
|
106
|
+
- Multiple navigation regions must be distinguished with distinct labels (e.g. `<nav aria-label="Main navigation">` and `<nav aria-label="Footer">`).
|
|
107
|
+
5. **Tabular Information**:
|
|
108
|
+
- Tables must have an `aria-label` or a `<caption>` child, and sortable headers must announce sorting state via `aria-sort` or its equivalent.
|
|
109
|
+
6. **Focus Management**:
|
|
110
|
+
- Never suppress focus outlines (e.g., do not add `outline: none` or set `tabIndex={-1}` on interactive controls unless deliberately building focus-trap cycles).
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## 4. Internationalization (i18n)
|
|
115
|
+
|
|
116
|
+
All WRI DS components ship with English defaults. To localize UI strings for other languages, follow one of these patterns:
|
|
117
|
+
|
|
118
|
+
- **Global/Provider Context**: Wrap the application with `DesignSystemLocaleProvider` to pass common translations (e.g., optional field suffixes, required markers, list expand/hide actions).
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
import { DesignSystemLocaleProvider, type DesignSystemLabels } from '@worldresources/wri-design-systems'
|
|
122
|
+
|
|
123
|
+
const labels: DesignSystemLabels = {
|
|
124
|
+
TextInput: {
|
|
125
|
+
optionalSuffix: t('common.optional'),
|
|
126
|
+
requiredSymbolLabel: t('common.required'),
|
|
127
|
+
},
|
|
128
|
+
CheckboxList: {
|
|
129
|
+
expandLabel: t('ds.expand'),
|
|
130
|
+
hideLabel: t('ds.hide'),
|
|
131
|
+
},
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
<DesignSystemLocaleProvider labels={labels}>
|
|
135
|
+
<App />
|
|
136
|
+
</DesignSystemLocaleProvider>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
- **Component-Level Override**: Pass translated values directly to the component using its `labels` prop. Never hardcode English literals in the `labels` prop; always route strings through the translation framework.
|
|
140
|
+
```tsx
|
|
141
|
+
<Password
|
|
142
|
+
labels={{
|
|
143
|
+
showLabel: t('password.show'),
|
|
144
|
+
hideLabel: t('password.hide'),
|
|
145
|
+
}}
|
|
146
|
+
/>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
## 5. Forbidden Patterns
|
|
152
|
+
|
|
153
|
+
- **Importing Raw Chakra Primitives when WRI DS Wrappers Exist**: Do not do `import { Button } from '@chakra-ui/react'` when WRI DS has `Button`.
|
|
154
|
+
- **Applying Style Overrides on WRI DS Components**: Bypassing design consistency with `sx={{...}}`, `style={{...}}`, or inline style blocks is forbidden.
|
|
155
|
+
- **Passing Raw Strings for Tokens**: Do not use `<Box bg="primary.500" />`. Use the exact helper call instead: `<Box bg={getThemedColor('primary', 500)} />`.
|
|
156
|
+
- **Placeholder Labels**: Do not use `placeholder` in place of a proper visible label or `aria-label` attribute.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: pr-description
|
|
3
|
+
description: Guidelines for writing PR description. Covers required content, formatting, and examples. Use when the user asks to summarize changes for a PR or create a PR description.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
When writing a PR description:
|
|
7
|
+
|
|
8
|
+
1. Run `git diff main...HEAD` to see all changes on this branch
|
|
9
|
+
2. Write a description following this format, in markdown:
|
|
10
|
+
|
|
11
|
+
## What
|
|
12
|
+
|
|
13
|
+
One sentence explaining what this PR does.
|
|
14
|
+
|
|
15
|
+
## Why
|
|
16
|
+
|
|
17
|
+
Brief context on why this change is needed
|
|
18
|
+
|
|
19
|
+
## Changes
|
|
20
|
+
|
|
21
|
+
- Bullet points of specific changes made
|
|
22
|
+
- Group related changes together
|
|
23
|
+
- Mention any files deleted or renamed
|
|
24
|
+
- Add some examples of before/after code where helpful
|
package/dist/index.cjs.js
CHANGED
|
@@ -735,47 +735,6 @@
|
|
|
735
735
|
cursor: not-allowed;
|
|
736
736
|
}
|
|
737
737
|
`,Og=i.css`
|
|
738
|
-
width: 15.0625rem;
|
|
739
|
-
min-height: 4.375rem;
|
|
740
|
-
padding: ${k(300)};
|
|
741
|
-
background-color: ${w("neutral",100)};
|
|
742
|
-
border: ${j(100)} solid ${w("neutral",300)};
|
|
743
|
-
border-radius: ${$(300)};
|
|
744
|
-
cursor: pointer;
|
|
745
|
-
box-shadow: 0 0.0625rem 0.125rem 0 #0000000d;
|
|
746
|
-
flex: none;
|
|
747
|
-
|
|
748
|
-
&:hover {
|
|
749
|
-
box-shadow: 0 0.125rem 0.25rem -0.125rem #0000001a;
|
|
750
|
-
box-shadow: 0 0.25rem 0.375rem -0.0625rem #0000001a;
|
|
751
|
-
}
|
|
752
|
-
|
|
753
|
-
&:focus-visible,
|
|
754
|
-
&[data-focus-visible] {
|
|
755
|
-
outline: ${j(200)} solid
|
|
756
|
-
${w("primary",700)};
|
|
757
|
-
outline-offset: ${k(50)};
|
|
758
|
-
box-shadow: 0 0.125rem 0.25rem -0.125rem #0000001a;
|
|
759
|
-
box-shadow: 0 0.25rem 0.375rem -0.0625rem #0000001a;
|
|
760
|
-
box-shadow:
|
|
761
|
-
0 0 0 0.125rem ${w("neutral",100)},
|
|
762
|
-
rgba(0, 0, 0, 0.05) 0 0.125rem 0.125rem 0.25rem;
|
|
763
|
-
}
|
|
764
|
-
|
|
765
|
-
&[data-state='checked'] {
|
|
766
|
-
background-color: ${w("primary",100)};
|
|
767
|
-
border: ${j(100)} solid ${w("primary",700)};
|
|
768
|
-
}
|
|
769
|
-
|
|
770
|
-
&[data-disabled] {
|
|
771
|
-
outline: none;
|
|
772
|
-
box-shadow: none;
|
|
773
|
-
border: ${j(100)} solid ${w("neutral",300)};
|
|
774
|
-
background-color: ${w("neutral",100)};
|
|
775
|
-
color: ${w("neutral",600)};
|
|
776
|
-
cursor: not-allowed;
|
|
777
|
-
}
|
|
778
|
-
`,Lg=i.css`
|
|
779
738
|
width: 100%;
|
|
780
739
|
padding: 0;
|
|
781
740
|
display: flex;
|
|
@@ -785,10 +744,17 @@
|
|
|
785
744
|
&[data-disabled] {
|
|
786
745
|
background-color: ${w("neutral",100)};
|
|
787
746
|
}
|
|
747
|
+
`,Lg=e=>i.css`
|
|
748
|
+
width: 100%;
|
|
749
|
+
display: flex;
|
|
750
|
+
flex-direction: ${"centered"===e?"column":"row"};
|
|
751
|
+
align-items: center;
|
|
752
|
+
gap: ${k(300)};
|
|
788
753
|
`,Ag=i.css`
|
|
789
754
|
svg {
|
|
790
755
|
height: 2rem;
|
|
791
756
|
width: 2rem;
|
|
757
|
+
color: ${w("neutral",400)};
|
|
792
758
|
}
|
|
793
759
|
`,Rg=(e,t)=>i.css`
|
|
794
760
|
font-size: ${C(400)};
|
|
@@ -3898,13 +3864,57 @@ function _E(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
|
|
|
3898
3864
|
padding: 0;
|
|
3899
3865
|
padding-top: ${k(200)};
|
|
3900
3866
|
color: ${o?w("neutral",500):"inherit"};
|
|
3901
|
-
`),children:n.children}):null]},`${n.label}-${n.value}`);var o,s}))})}),exports.CloseButton=sg,exports.ClusterPoint=({onClick:e,triggerRef:n,showFocusState:r,count:o,mode:i,variant:s="cluster"})=>t.jsx(vb,{count:o,mode:i,onClick:e,ref:n,showFocusState:r,variant:s}),exports.Combobox=({label:t,required:o,caption:i,errorMessage:s,size:a,disabled:l,placeholder:c,labels:d,noMarginBottom:u,initialItems:h=[],multiple:p=!1,showSelectedItems:f=!1})=>{const[m,g]=n.useState([]),v=Ef("TextInput",d),{contains:b}=e.useFilter({sensitivity:"base"}),{collection:y,filter:x}=e.useListCollection({initialItems:h,filter:b});return r.jsxs("div",{css:Um(a,u),className:"ds-text-input-container",children:[s?r.jsx("div",{css:Km}):null,r.jsxs(e.Field.Root,{required:o,invalid:!!s,gap:"0",style:{marginLeft:s?"1.1875rem":"0px"},children:[t?r.jsxs(e.Field.Label,{css:Gm(a,l),"aria-label":t,children:[r.jsx(e.Field.RequiredIndicator,{"aria-label":v.requiredSymbolLabel}),t,o?"":r.jsx("span",{children:v.optionalSuffix})]}):null,i?r.jsx(e.Field.HelperText,{css:Zm(a,l),"aria-label":i,children:i}):null,s?r.jsx(e.Field.ErrorText,{css:Jm(a),"aria-label":s,children:s}):null,r.jsxs(e.Combobox.Root,{multiple:p,onValueChange:e=>{g(e.items.map((e=>({label:e.label,value:e.value}))))},value:m.map((e=>e.value)),collection:y,onInputValueChange:e=>x(e.inputValue),width:"20rem",size:"small"===a?"sm":"md",children:[r.jsxs(e.Combobox.Control,{children:[r.jsx(e.Combobox.Input,{placeholder:c,css:Xm(a),disabled:l,"aria-label":t||c||"Combobox input"}),r.jsxs(e.Combobox.IndicatorGroup,{children:[r.jsx(e.Combobox.ClearTrigger,{"aria-label":"Clear selection"}),r.jsx(e.Combobox.Trigger,{"aria-label":"Toggle options"})]})]}),r.jsx(e.Portal,{children:r.jsx(e.Combobox.Positioner,{children:r.jsxs(e.Combobox.Content,{children:[r.jsx(e.Combobox.Empty,{children:"No items found"}),y.items.map((t=>r.jsxs(e.Combobox.Item,{item:t,children:[t.label,r.jsx(e.Combobox.ItemIndicator,{})]},t.value)))]})})}),r.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start",gap:"0.25rem",paddingTop:"0.5rem"},children:f&&m.map((e=>r.jsx(Nv,{label:e.label,variant:"info-white",onClose:()=>g((t=>t.filter((t=>t.value!==e.value)))),closable:!0},e.value)))})]})]})]})},exports.DesignSystemLocaleProvider=({labels:e,children:r})=>{const o=n.useMemo((()=>({labels:e})),[e]);return t.jsx(E.Provider,{value:o,children:r})},exports.ExtendableCard=({children:t,header:n,footer:o})=>r.jsx(e.Box,{css:Xw,children:r.jsx(e.Accordion.Root,{multiple:!0,children:r.jsxs(e.Accordion.Item,{value:"extendable-card-item",children:[r.jsxs(e.Accordion.ItemTrigger,{css:Yw,alignItems:"center",children:[r.jsx(e.Flex,{gap:3,flex:"1",overflow:"hidden",alignItems:"center",children:n}),r.jsx(e.Accordion.ItemIndicator,{children:r.jsx(If,{color:"var(--chakra-colors-neutral-700)",height:"1rem",width:"1rem"})})]}),r.jsxs(e.Accordion.ItemContent,{children:[t,o]})]})})}),exports.Footer=({children:e,label:t="© World Resources Institute",fixed:n,filled:o,maxWidth:i,additionalLogos:s})=>{const a=(new Date).getFullYear();return r.jsx("footer",{css:$T(n,o),children:r.jsxs("div",{css:jT(i),children:[r.jsxs("div",{css:TT,children:[r.jsx(Wf,{height:"2rem",width:"5.6875rem"}),s&&s.map(((e,t)=>r.jsx("div",{children:e},t)))]}),r.jsx("div",{css:ET,children:e}),r.jsx("div",{children:r.jsxs("p",{css:MT,children:[t," ",a]})})]})})},exports.FormContainer=({label:e,error:t,children:o})=>{const i=n.useId(),s=e?`${i}-label`:void 0,a=t?`${i}-error`:void 0;return r.jsxs("div",{css:bg,role:"group","aria-labelledby":s,"aria-describedby":a,children:[t?r.jsx("div",{css:xg}):null,r.jsxs("div",{children:[e?r.jsx("p",{id:s,css:yg,children:e}):null,t?r.jsx("p",{id:a,css:wg,children:t}):null,o]})]})},exports.IconButton=Of,exports.InlineMessage=({label:e,caption:t,variant:n,size:o="large",icon:i=r.jsx(Df,{height:"1rem",width:"1rem"}),onActionClick:s,actionLabel:a,isButtonRight:l,buttonLeftIcon:c,buttonRightIcon:d,labels:u})=>{const h=Ef("InlineMessage",u);let p=IO;"info-grey"===n?p=PO:"success"===n?p=zO:"warning"===n?p=VO:"error"===n&&(p=HO);const f="error"===n||"warning"===n?"alert":"status",m="alert"===f?"assertive":"polite";return r.jsxs("div",{css:[LO(o,l),p],role:f,"aria-live":m,"aria-roledescription":h.roleDescription,children:[r.jsxs("div",{children:[r.jsxs("div",{css:AO,children:[i,r.jsx("p",{css:RO(o),children:e})]}),t&&"string"==typeof t?r.jsx("p",{css:NO(o,!!i),children:t}):t?r.jsx("div",{css:DO(o,!!i),children:t}):null]}),a?r.jsx(Mf,{label:a,variant:"info-white"===n||"info-grey"===n?"primary":"secondary",size:"large"===o?"default":"small",onClick:s,leftIcon:c,rightIcon:d}):null]})},exports.InputWithUnits=({label:t,caption:o,errorMessage:i,units:s,unitsPosition:a="end",defaultUnit:l="",defaultValue:c="",onChange:d,required:u,disabled:h})=>{const[p,f]=n.useState(c),[m,g]=n.useState(l?[l]:[s[0].value]),v=(e,t)=>{d&&d("end"===a?""+(t?`${p} ${e}`:`${e} ${m}`):""+(t?`${e} ${p}`:`${m} ${e}`))};return r.jsxs("div",{css:sv,children:[i?r.jsx("div",{css:cv}):null,r.jsxs("div",{style:{marginLeft:i?"1.1875rem":"0px"},children:[r.jsxs("p",{css:av(h),"aria-label":t,children:[u?r.jsx("span",{children:"*"}):null,t]}),r.jsx("p",{css:lv(h),"aria-label":o,children:o}),i?r.jsx("p",{css:dv,"aria-label":i,children:i}):null,r.jsxs(e.Group,{css:uv(!!i,a),attached:!0,children:["start"===a?r.jsx(Pv,{placeholder:"","aria-label":`${t} unit`,value:m,items:s,disabled:h,onChange:e=>{g(e),v(e?.[0],!0)}}):null,r.jsx(Ym,{type:"number","aria-label":`${t} value`,value:p,disabled:h,onChange:e=>{f(e.target.value),v(e.target.value)}}),"end"===a?r.jsx(Pv,{placeholder:"","aria-label":`${t} unit`,value:m,items:s,disabled:h,onChange:e=>{g(e),v(e?.[0],!0)}}):null]})]})]})},exports.ItemCount=ww,exports.LayerGroup=({label:t,caption:o,value:i,layerItems:s,onChangeForRadioVariant:a,labels:l})=>{const c=Ef("LayerGroup",l),[d,u]=n.useState({}),[h]=n.useState((e=>{const t=e.find((e=>"radio"===e.variant&&e.isDefaultSelected));return t?.name})(s));n.useEffect((()=>{let e={...d};s.forEach((n=>{n.isDefaultSelected&&(e={...e,["radio"===n.variant?t:n.name]:n.isDefaultSelected})})),u(e)}),[]);const p=(e,t,n,r)=>{const o={...d,[e]:t};u(o),n&&n(e,t,r)},f=Object.values(d).filter((e=>!0===e)).length,m=c.groupAriaLabel(t,f,o);return r.jsxs(e.Accordion.Item,{value:i,width:"100%",children:[r.jsxs(e.Accordion.ItemTrigger,{css:Nx,alignItems:"flex-start","aria-label":m,children:[r.jsxs(e.Box,{width:"full",display:"flex",flexDirection:"column",alignItems:"flex-start",children:[r.jsxs("span",{css:Dx,children:[t,r.jsx(Nv,{label:c.activeTagLabel(f),size:"small",variant:f>0?"success":"info-grey"})]}),r.jsx("div",{css:Ix,children:o})]}),r.jsx(e.Accordion.ItemIndicator,{display:"flex",children:r.jsx(If,{color:"var(--chakra-colors-neutral-700)",height:"1rem",width:"1rem"})})]}),r.jsx(e.Accordion.ItemContent,{paddingLeft:"1rem",paddingRight:"1rem",children:r.jsx(Hg,{name:t,value:h,customGap:"0",onChange:(e,t)=>p(e,!!t,a,t),children:s.map((e=>r.jsx(_x,{...e,onChange:(t,n)=>p(t,n,e.onChange)},e.label)))})})]})},exports.LayerGroupContainer=({children:t,defaultValue:n,...o})=>r.jsx("div",{css:Rx,style:{width:"100%"},children:r.jsx(e.Accordion.Root,{css:{},defaultValue:n,multiple:!0,...o,children:t})}),exports.LayerItem=_x,exports.LayerParameters=({label:t,children:o,openedByDefault:i})=>r.jsx("div",{children:r.jsx(e.Accordion.Root,{defaultValue:i?[t]:[],multiple:!0,children:r.jsxs(e.Accordion.Item,{css:Fx,value:t,children:[r.jsxs(e.Accordion.ItemTrigger,{css:qx,children:[r.jsx(e.Box,{width:"full",display:"flex",flexDirection:"column",alignItems:"flex-start",children:r.jsx("p",{css:Wx,children:t})}),r.jsx(e.Accordion.ItemIndicator,{display:"flex",children:r.jsx(If,{color:"var(--chakra-colors-neutral-700)",height:"1rem",width:"1rem"})})]}),r.jsx(e.Accordion.ItemContent,{css:Ux,children:n.Children.map(o,(e=>r.jsx("div",{className:"ds-layer-parameters-item-child",children:e})))})]})})}),exports.LegendItem=({layerName:e,dataUnit:t,onDrag:n,onUpClick:o,onDownClick:i,onRemoveClick:s,children:a,onInfoClick:l,onOpacityChanged:c,labels:d})=>{const u=Ef("LegendItem",d);return r.jsxs("div",{css:Kx,children:[r.jsx("div",{css:Gx,children:r.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"0.75rem"},children:[r.jsx(Of,{icon:r.jsx(If,{rotate:"180"}),"aria-label":u.upLabel,onClick:o}),r.jsx(Of,{icon:r.jsx(If,{}),"aria-label":u.downLabel,onClick:i})]})}),r.jsxs("div",{style:{width:"100%"},children:[r.jsxs("div",{css:Zx,children:[r.jsxs("div",{children:[r.jsx("h3",{css:Jx,children:e}),r.jsx("p",{css:Xx,children:t})]}),r.jsx(Mf,{label:u.removeLabel,size:"small",variant:"secondary",rightIcon:r.jsx(zf,{}),onClick:s})]}),a,r.jsxs("div",{css:Yx,children:[r.jsx(Mf,{label:u.aboutDataLabel,size:"small",variant:"secondary",leftIcon:r.jsx(Df,{}),onClick:l}),r.jsx(rw,{defaultValue:80,onOpacityChanged:c})]})]})]})},exports.List=Ow,exports.MapControlsToolbar=({onZoomInClick:e,onZoomOutClick:n,onExpandClick:r,onShareClick:o,onPrintClick:i,onSettingsClick:s,onQuestionClick:a,vertical:l,expanded:c,showExpandedToggle:d,ariaLabel:u,labels:h})=>{const p=Ef("MapControlsToolbar",h),f=[{icon:t.jsx(Kf,{}),label:p.zoomInLabel,ariaLabel:p.zoomInAriaLabel,onClick:e},{icon:t.jsx(Gf,{}),label:p.zoomOutLabel,ariaLabel:p.zoomOutAriaLabel,onClick:n,gap:!0},{icon:t.jsx(Zf,{}),label:p.expandLabel,ariaLabel:p.expandAriaLabel,onClick:r,gap:!0},{icon:t.jsx(Jf,{}),label:p.shareLabel,ariaLabel:p.shareAriaLabel,onClick:o,gap:!0},{icon:t.jsx(Xf,{}),label:p.printLabel,ariaLabel:p.printAriaLabel,onClick:i,gap:!0},{icon:t.jsx(Yf,{}),label:p.settingsLabel,ariaLabel:p.settingsAriaLabel,onClick:s,gap:!0},{icon:t.jsx(Qf,{}),label:p.helpLabel,ariaLabel:p.helpAriaLabel,onClick:a}];return t.jsx(ug,{items:f,vertical:l,expanded:c,showExpandedToggle:d,ariaLabel:u||p.toolbarAriaLabel})},exports.MapMarker=vb,exports.MapMarkers=bb,exports.MapPopUp=({open:e,onOpenChange:t,anchorRef:o,header:i,content:s,footer:a,placement:c="bottom",offset:d=30,closeOnEscape:u=!0,closeOnOutsideClick:h=!1,labels:p})=>{const f=Ef("MapPopUp",p),m=n.useRef(null),{refs:g,floatingStyles:v,context:b,middlewareData:y,placement:x}=Sx({open:e,onOpenChange:t,placement:c,whileElementsMounted:Uy,middleware:[ox(d),(w={fallbackAxisSideDirection:"start"},{...Zy(w),options:[w,C]}),ix({padding:8}),sx({element:m})]});var w,C;n.useEffect((()=>{o?.current&&g.setReference(o.current)}),[o,g]);const k=function(e,t){void 0===t&&(t={});const{open:n,onOpenChange:r,elements:o,dataRef:i}=e,{enabled:s=!0,escapeKey:a=!0,outsidePress:c=!0,outsidePressEvent:d="pointerdown",referencePress:u=!1,referencePressEvent:h="pointerdown",ancestorScroll:p=!1,bubbles:f,capture:m}=t,g=yx(),v=$y("function"==typeof c?c:()=>!1),b="function"==typeof c?v:c,y=l.useRef(!1),{escapeKey:x,outsidePress:w}=Cx(f),{escapeKey:C,outsidePress:k}=Cx(m),S=l.useRef(!1),$=$y((e=>{var t;if(!n||!s||!a||"Escape"!==e.key)return;if(S.current)return;const o=null==(t=i.current.floatingContext)?void 0:t.nodeId,l=g?Cy(g.nodesRef.current,o):[];if(!x&&(e.stopPropagation(),l.length>0)){let e=!0;if(l.forEach((t=>{var n;null==(n=t.context)||!n.open||t.context.dataRef.current.__escapeKeyBubbles||(e=!1)})),!e)return}r(!1,function(e){return"nativeEvent"in e}(e)?e.nativeEvent:e,"escape-key")})),j=$y((e=>{var t;const n=()=>{var t;$(e),null==(t=yy(e))||t.removeEventListener("keydown",n)};null==(t=yy(e))||t.addEventListener("keydown",n)})),E=$y((e=>{var t;const n=i.current.insideReactTree;i.current.insideReactTree=!1;const s=y.current;if(y.current=!1,"click"===d&&s)return;if(n)return;if("function"==typeof b&&!b(e))return;const a=yy(e),l="[data-floating-ui-inert]",c=wy(o.floating).querySelectorAll(l);let u=Sb(a)?a:null;for(;u&&!Vb(u);){const e=_b(u);if(Vb(e)||!Sb(e))break;u=e}if(c.length&&Sb(a)&&!a.matches("html,body")&&!by(a,o.floating)&&Array.from(c).every((e=>!by(u,e))))return;if($b(a)&&O){const t=Vb(a),n=Hb(a),r=/auto|scroll/,o=t||r.test(n.overflowX),i=t||r.test(n.overflowY),s=o&&a.clientWidth>0&&a.scrollWidth>a.clientWidth,l=i&&a.clientHeight>0&&a.scrollHeight>a.clientHeight,c="rtl"===n.direction,d=l&&(c?e.offsetX<=a.offsetWidth-a.clientWidth:e.offsetX>a.clientWidth),u=s&&e.offsetY>a.clientHeight;if(d||u)return}const h=null==(t=i.current.floatingContext)?void 0:t.nodeId,p=g&&Cy(g.nodesRef.current,h).some((t=>{var n;return xy(e,null==(n=t.context)?void 0:n.elements.floating)}));if(xy(e,o.floating)||xy(e,o.domReference)||p)return;const f=g?Cy(g.nodesRef.current,h):[];if(f.length>0){let e=!0;if(f.forEach((t=>{var n;null==(n=t.context)||!n.open||t.context.dataRef.current.__outsidePressBubbles||(e=!1)})),!e)return}r(!1,e,"outside-press")})),M=$y((e=>{var t;const n=()=>{var t;E(e),null==(t=yy(e))||t.removeEventListener(d,n)};null==(t=yy(e))||t.addEventListener(d,n)}));l.useEffect((()=>{if(!n||!s)return;i.current.__escapeKeyBubbles=x,i.current.__outsidePressBubbles=w;let e=-1;function t(e){r(!1,e,"ancestor-scroll")}function l(){window.clearTimeout(e),S.current=!0}function c(){e=window.setTimeout((()=>{S.current=!1}),Pb()?5:0)}const u=wy(o.floating);a&&(u.addEventListener("keydown",C?j:$,C),u.addEventListener("compositionstart",l),u.addEventListener("compositionend",c)),b&&u.addEventListener(d,k?M:E,k);let h=[];return p&&(Sb(o.domReference)&&(h=qb(o.domReference)),Sb(o.floating)&&(h=h.concat(qb(o.floating))),!Sb(o.reference)&&o.reference&&o.reference.contextElement&&(h=h.concat(qb(o.reference.contextElement)))),h=h.filter((e=>{var t;return e!==(null==(t=u.defaultView)?void 0:t.visualViewport)})),h.forEach((e=>{e.addEventListener("scroll",t,{passive:!0})})),()=>{a&&(u.removeEventListener("keydown",C?j:$,C),u.removeEventListener("compositionstart",l),u.removeEventListener("compositionend",c)),b&&u.removeEventListener(d,k?M:E,k),h.forEach((e=>{e.removeEventListener("scroll",t)})),window.clearTimeout(e)}}),[i,o,a,b,d,n,r,p,s,x,w,$,C,j,E,k,M]),l.useEffect((()=>{i.current.insideReactTree=!1}),[i,b,d]);const T=l.useMemo((()=>({onKeyDown:$,...u&&{[xx[h]]:e=>{r(!1,e.nativeEvent,"reference-press")},..."click"!==h&&{onClick(e){r(!1,e.nativeEvent,"reference-press")}}}})),[$,r,u,h]),O=l.useMemo((()=>({onKeyDown:$,onMouseDown(){y.current=!0},onMouseUp(){y.current=!0},[wx[d]]:()=>{i.current.insideReactTree=!0}})),[$,d,i]);return l.useMemo((()=>s?{reference:T,floating:O}:{}),[s,T,O])}(b,{escapeKey:u,outsidePress:h}),S=Ex(b,{role:"dialog"}),{getFloatingProps:$}=function(e){void 0===e&&(e=[]);const t=e.map((e=>null==e?void 0:e.reference)),n=e.map((e=>null==e?void 0:e.floating)),r=e.map((e=>null==e?void 0:e.item)),o=l.useCallback((t=>$x(t,e,"reference")),t),i=l.useCallback((t=>$x(t,e,"floating")),n),s=l.useCallback((t=>$x(t,e,"item")),r);return l.useMemo((()=>({getReferenceProps:o,getFloatingProps:i,getItemProps:s})),[o,i,s])}([k,S]),{x:j,y:E}=y.arrow??{x:null,y:null},M={top:"bottom",right:"left",bottom:"top",left:"right"}[x.split("-")[0]];if(!e)return null;let T=d-1,O=4;return"left"!==M&&"right"!==M||(T=4,O=d-1),r.jsxs(r.Fragment,{children:[r.jsxs("div",{ref:g.setFloating,style:v,"aria-label":"Map popup dialog","aria-modal":!0,...$(),css:Mx,children:[r.jsxs("div",{css:Tx,children:[i,r.jsx(sg,{onClick:()=>t(!1),className:"ds-map-pop-up-close-button","aria-label":f.closeLabel})]}),r.jsx("div",{css:Ox,children:s}),a?r.jsx("div",{css:Lx,children:a}):null,r.jsx("div",{ref:m,css:Ax(T,O,j,E,M,d)})]}),r.jsx("div",{className:"fixed inset-0 z-[999] bg-black/20 backdrop-blur-[1px]",onClick:()=>h&&t(!1)})]})},exports.Menu=jm,exports.MobileTabBar=({defaultValue:t,tabs:o,onTabClick:i,hideLabels:s,activationMode:a="manual"})=>{const l=o.length,[c,d]=n.useState((()=>NT(o,t)));return r.jsx("div",{css:OT,children:r.jsx(e.Tabs.Root,{width:"full",defaultValue:t||o?.[0]?.value,onValueChange:({value:e})=>(e=>{const t=NT(o,e);d(t),i&&i(e)})(e),activationMode:a,children:r.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:o.map(((t,n)=>{const{label:o,icon:i,bagdeCount:a,"aria-label":d,"aria-describedby":u,disabled:h,...p}=t,f=`${t.value}-str-status`,m=[`tab ${n+1} of ${l}`,c===n?"selected":"not selected"];h&&m.push("disabled");const g=[u,f].filter(Boolean).join(" ")||void 0;return r.jsxs(e.Tabs.Trigger,{css:LT,"aria-label":d||o,"aria-disabled":!!h||void 0,"aria-describedby":g,disabled:h,...p,children:[r.jsxs("div",{css:AT,children:[i,a?r.jsx("div",{css:RT,className:"ds-badge-count",children:a}):null]}),s?null:r.jsx("p",{children:o}),r.jsx(e.VisuallyHidden,{id:f,children:m.join(", ")})]},t.value)}))})})})},exports.Modal=({header:t,content:o,footer:i,size:s="medium",width:a,height:l,maxHeight:c,draggable:d,blocking:u,open:h,onClose:p})=>{const f=n.useRef(null);return h?r.jsx(e.Dialog.Root,{open:h,onOpenChange:p,placement:"center",scrollBehavior:"inside",closeOnInteractOutside:!d&&!u,preventScroll:!d&&!u,closeOnEscape:!u,defaultOpen:!0,children:r.jsxs(e.Portal,{children:[d?null:r.jsx(e.Dialog.Backdrop,{css:{background:"rgba(0, 0, 0, 0.64)"}}),r.jsx(XC,{disabled:!d,nodeRef:f,children:r.jsx(e.Dialog.Positioner,{ref:f,children:r.jsxs(e.Dialog.Content,{"aria-label":"Modal dialog",css:YC(s,a,l,c),children:[r.jsxs(e.Dialog.Header,{css:QC,children:[t,u?null:r.jsx(e.Dialog.CloseTrigger,{css:ek,asChild:!0,children:r.jsx(sg,{})})]}),r.jsx(e.Dialog.Body,{css:tk,children:o}),i?r.jsx(e.Dialog.Footer,{padding:"0.75rem",children:i}):null]})})})]})}):null},exports.MultiActionButton=({variant:t="primary",size:o="default",mainActionLabel:i,mainActionOnClick:s=()=>{},otherActions:a=[],disabled:l,mainActionLeftIcon:c,mainActionRightIcon:d,...u})=>{const[h,p]=n.useState(!1),f=l?`${i} action button with menu, disabled`:void 0;return r.jsxs(e.Group,{css:mg,attached:!0,tabIndex:l?0:void 0,"aria-disabled":l,"aria-label":f,role:"group",children:[r.jsx(Mf,{css:{},label:i,variant:t,size:o,onClick:s,disabled:l,leftIcon:c,rightIcon:d,...u}),r.jsxs(e.Menu.Root,{onOpenChange:({open:e})=>p(e),positioning:{placement:"bottom-end"},children:[r.jsx(e.Menu.Trigger,{css:pg(t),"data-group-item":!0,"data-last":!0,asChild:!0,children:r.jsx(Mf,{style:gg,"aria-label":`Open ${i} options`,"aria-haspopup":"menu","aria-expanded":h,variant:t,size:o,leftIcon:r.jsx(If,{"aria-hidden":"true",rotate:h?"180":"0",color:w("accessible","text-on-primary-mids")||w("primary",900)}),disabled:l})}),r.jsx(vg,{children:a.map((({label:t,value:n,onClick:i})=>r.jsx(e.Menu.Item,{css:fg(o),onClick:i,value:n,children:t},n)))})]})]})},exports.Navbar=({variant:e="default",theme:t="light",logo:o,linkRouter:i,pathname:s,navigationSection:a,utilitySection:l,actionsSection:c,maxWidth:d,fixed:u,onNavbarHeightChange:h,backgroundColor:p,labels:f})=>{const m=Ef("Navbar",f),g=n.useRef(null),v=n.useRef(null),b=n.useRef(null),[y,x]=n.useState(!1),[w,C]=n.useState(-1),[k,S]=n.useState("undefined"!=typeof window&&window?.innerWidth<=rO),[$,j]=n.useState(!1),E=i,M=n.useCallback((()=>{if(v.current&&g.current&&b.current){const e=g.current.getBoundingClientRect(),t=v.current.getBoundingClientRect(),n=b.current.getBoundingClientRect();t.width,e.width,window.innerWidth<=rO||window.innerWidth<=w?(h?.(96),x(!0)):window.innerWidth>rO&&window.innerWidth<=1440?e.right>=t.left?(h?.(96),x(!0),C(window.innerWidth)):window.innerWidth>w&&(h?.(48),x(!1),C(-1)):(h?.(48),x(!1),C(-1)),y&&(window.innerWidth<=rO||n.right>=t.left?(S(!0),h?.(48)):(S(!1),h?.(96)))}}),[w,y]);n.useEffect((()=>(M(),window.addEventListener("resize",M),()=>{window.removeEventListener("resize",M)})),[M]);const T="condensed"===e;return r.jsxs("nav",{css:DT(y&&!k,u,p,t,T),children:[r.jsxs("div",{css:PT(y&&!k,d,T),children:[r.jsxs("div",{css:zT(y&&!k||"dark"===t,T),ref:g,children:[o?r.jsx("div",{ref:b,css:VT,children:o}):null,r.jsx("div",{css:HT(y),children:a?.map((e=>e.link?r.jsx(E,{to:e.link,href:e.link,css:BT(s===e.link,t,T),children:e.label},e.label):r.jsx(jm,{theme:t,label:e.label,fontSize:T?"0.875rem":"1rem",items:e.items||[]},e.label)))})]}),r.jsx("div",{css:_T(T),ref:v,children:k?r.jsxs("button",{type:"button",onClick:()=>j(!$),"aria-label":m.openMenuLabel,css:WT(t),children:[$?m.closeLabel:m.menuLabel,$?r.jsx(zf,{height:T?"0.75rem":"1rem",width:T?"0.75rem":"1rem"}):r.jsx(lm,{height:T?"0.75rem":"1rem",width:T?"0.75rem":"1rem"})]}):r.jsxs(r.Fragment,{children:[r.jsx("div",{css:_T(T),children:l?.map(((e,t)=>r.jsx("div",{css:FT(y),children:e},t)))}),c?.length?r.jsx("div",{css:qT(y),children:c.map((e=>r.jsx(Mf,{...e},e.ariaLabel)))}):null]})})]}),y&&!k?r.jsx("div",{css:IT(t,T),children:a?.map((e=>e.link?r.jsx(E,{to:e.link,href:e.link,css:BT(s===e.link,t,T),children:e.label},e.label):r.jsx(jm,{theme:t,label:e.label,fontSize:T?"0.875rem":"1rem",items:e.items||[]},e.label)))}):null,k?r.jsx(nO,{theme:t,variant:e,navigationSection:a,utilitySection:l,actionsSection:c,linkRouter:i,isOpen:$,setIsOpen:j,pathname:s,resolvedLabels:m}):null]})},exports.NavigationRail=({tabs:t=[],defaultValue:o,onTabClick:i,children:s,onOpenChange:a,labels:l})=>{const c=Ef("NavigationRail",l),[d,u]=n.useState(!1),[h,p]=n.useState(o||t?.[0]?.value),f=e=>{p(e),i&&i(e)},[m]=e.useMediaQuery(["(max-width: 48rem)"]);return m?r.jsxs(e.Tabs.Root,{defaultValue:h,onValueChange:({value:e})=>f(e),children:[r.jsx(e.Tabs.List,{style:{display:"flex",overflowX:"auto",whiteSpace:"nowrap",padding:"0.5rem",gap:"0.5rem"},children:t.map((t=>r.jsx(e.Tabs.Trigger,{value:t.value,css:{"--indicator-color":w("primary",500),flexShrink:0,padding:"0.625rem 1rem",color:w("neutral",600),"&[data-selected]":{color:w("neutral",800),fontWeight:600}},children:t.label},t.value)))}),t.map((t=>r.jsx(e.Tabs.Content,{value:t.value,children:s},t.value)))]}):r.jsxs("div",{style:{height:"calc(100vh - 3rem - 3.5rem)",position:"fixed",top:"3rem",left:0,display:"flex"},children:[r.jsxs("div",{css:oO,children:[r.jsx(e.Tabs.Root,{defaultValue:o||t?.[0]?.value,orientation:"horizontal",width:"full",onValueChange:({value:e})=>{f(e)},children:r.jsx(e.Tabs.List,{alignItems:"center",border:"none",style:{flexDirection:"column"},children:t.map((t=>r.jsx(e.Tabs.Trigger,{css:iO,"aria-label":t["aria-label"]||t.label,...t,children:r.jsxs(e.Box,{display:"flex",alignItems:"center",flexDirection:"column",gap:"0.3125rem",className:"ds-tab-label",children:[t.icon?r.jsx("div",{css:sO,children:t.icon}):null,r.jsx("p",{children:t.label})]})},t.label)))})}),s?r.jsx(e.Collapsible.Root,{onOpenChange:({open:e})=>{u(e),a&&a(!e)},children:r.jsxs(e.Collapsible.Trigger,{css:aO,children:[r.jsx("div",{css:sO,children:d?r.jsx(Af,{}):r.jsx(Lf,{})}),r.jsxs("div",{className:"ds-tab-label",children:[r.jsx("p",{children:d?c.showLabel:c.hideLabel}),r.jsx("p",{children:c.sidebarLabel})]})]})}):null]}),s?r.jsx(e.Collapsible.Root,{defaultOpen:!0,open:!d,children:r.jsx(e.Collapsible.Content,{height:"100%",children:r.jsx("div",{css:lO,role:"tabpanel","aria-labelledby":h,children:s})})}):null]})},exports.OptionCard=({defaultValue:t,items:n,onValueChange:o})=>r.jsx(e.RadioCard.Root,{defaultValue:t,onValueChange:o,children:r.jsx(e.HStack,{alignItems:"flex-start",flexWrap:"wrap",gap:"0.75rem",children:n.map((t=>{return r.jsxs(e.RadioCard.Item,{css:Og,value:t.value,disabled:t.disabled,children:[r.jsx(e.RadioCard.ItemHiddenInput,{}),r.jsxs(e.RadioCard.ItemControl,{css:Lg,children:[r.jsxs("div",{css:(o=t.variant,i.css`
|
|
3902
|
-
width:
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
|
|
3867
|
+
`),children:n.children}):null]},`${n.label}-${n.value}`);var o,s}))})}),exports.CloseButton=sg,exports.ClusterPoint=({onClick:e,triggerRef:n,showFocusState:r,count:o,mode:i,variant:s="cluster"})=>t.jsx(vb,{count:o,mode:i,onClick:e,ref:n,showFocusState:r,variant:s}),exports.Combobox=({label:t,required:o,caption:i,errorMessage:s,size:a,disabled:l,placeholder:c,labels:d,noMarginBottom:u,initialItems:h=[],multiple:p=!1,showSelectedItems:f=!1})=>{const[m,g]=n.useState([]),v=Ef("TextInput",d),{contains:b}=e.useFilter({sensitivity:"base"}),{collection:y,filter:x}=e.useListCollection({initialItems:h,filter:b});return r.jsxs("div",{css:Um(a,u),className:"ds-text-input-container",children:[s?r.jsx("div",{css:Km}):null,r.jsxs(e.Field.Root,{required:o,invalid:!!s,gap:"0",style:{marginLeft:s?"1.1875rem":"0px"},children:[t?r.jsxs(e.Field.Label,{css:Gm(a,l),"aria-label":t,children:[r.jsx(e.Field.RequiredIndicator,{"aria-label":v.requiredSymbolLabel}),t,o?"":r.jsx("span",{children:v.optionalSuffix})]}):null,i?r.jsx(e.Field.HelperText,{css:Zm(a,l),"aria-label":i,children:i}):null,s?r.jsx(e.Field.ErrorText,{css:Jm(a),"aria-label":s,children:s}):null,r.jsxs(e.Combobox.Root,{multiple:p,onValueChange:e=>{g(e.items.map((e=>({label:e.label,value:e.value}))))},value:m.map((e=>e.value)),collection:y,onInputValueChange:e=>x(e.inputValue),width:"20rem",size:"small"===a?"sm":"md",children:[r.jsxs(e.Combobox.Control,{children:[r.jsx(e.Combobox.Input,{placeholder:c,css:Xm(a),disabled:l,"aria-label":t||c||"Combobox input"}),r.jsxs(e.Combobox.IndicatorGroup,{children:[r.jsx(e.Combobox.ClearTrigger,{"aria-label":"Clear selection"}),r.jsx(e.Combobox.Trigger,{"aria-label":"Toggle options"})]})]}),r.jsx(e.Portal,{children:r.jsx(e.Combobox.Positioner,{children:r.jsxs(e.Combobox.Content,{children:[r.jsx(e.Combobox.Empty,{children:"No items found"}),y.items.map((t=>r.jsxs(e.Combobox.Item,{item:t,children:[t.label,r.jsx(e.Combobox.ItemIndicator,{})]},t.value)))]})})}),r.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start",gap:"0.25rem",paddingTop:"0.5rem"},children:f&&m.map((e=>r.jsx(Nv,{label:e.label,variant:"info-white",onClose:()=>g((t=>t.filter((t=>t.value!==e.value)))),closable:!0},e.value)))})]})]})]})},exports.DesignSystemLocaleProvider=({labels:e,children:r})=>{const o=n.useMemo((()=>({labels:e})),[e]);return t.jsx(E.Provider,{value:o,children:r})},exports.ExtendableCard=({children:t,header:n,footer:o})=>r.jsx(e.Box,{css:Xw,children:r.jsx(e.Accordion.Root,{multiple:!0,children:r.jsxs(e.Accordion.Item,{value:"extendable-card-item",children:[r.jsxs(e.Accordion.ItemTrigger,{css:Yw,alignItems:"center",children:[r.jsx(e.Flex,{gap:3,flex:"1",overflow:"hidden",alignItems:"center",children:n}),r.jsx(e.Accordion.ItemIndicator,{children:r.jsx(If,{color:"var(--chakra-colors-neutral-700)",height:"1rem",width:"1rem"})})]}),r.jsxs(e.Accordion.ItemContent,{children:[t,o]})]})})}),exports.Footer=({children:e,label:t="© World Resources Institute",fixed:n,filled:o,maxWidth:i,additionalLogos:s})=>{const a=(new Date).getFullYear();return r.jsx("footer",{css:$T(n,o),children:r.jsxs("div",{css:jT(i),children:[r.jsxs("div",{css:TT,children:[r.jsx(Wf,{height:"2rem",width:"5.6875rem"}),s&&s.map(((e,t)=>r.jsx("div",{children:e},t)))]}),r.jsx("div",{css:ET,children:e}),r.jsx("div",{children:r.jsxs("p",{css:MT,children:[t," ",a]})})]})})},exports.FormContainer=({label:e,error:t,children:o})=>{const i=n.useId(),s=e?`${i}-label`:void 0,a=t?`${i}-error`:void 0;return r.jsxs("div",{css:bg,role:"group","aria-labelledby":s,"aria-describedby":a,children:[t?r.jsx("div",{css:xg}):null,r.jsxs("div",{children:[e?r.jsx("p",{id:s,css:yg,children:e}):null,t?r.jsx("p",{id:a,css:wg,children:t}):null,o]})]})},exports.IconButton=Of,exports.InlineMessage=({label:e,caption:t,variant:n,size:o="large",icon:i=r.jsx(Df,{height:"1rem",width:"1rem"}),onActionClick:s,actionLabel:a,isButtonRight:l,buttonLeftIcon:c,buttonRightIcon:d,labels:u})=>{const h=Ef("InlineMessage",u);let p=IO;"info-grey"===n?p=PO:"success"===n?p=zO:"warning"===n?p=VO:"error"===n&&(p=HO);const f="error"===n||"warning"===n?"alert":"status",m="alert"===f?"assertive":"polite";return r.jsxs("div",{css:[LO(o,l),p],role:f,"aria-live":m,"aria-roledescription":h.roleDescription,children:[r.jsxs("div",{children:[r.jsxs("div",{css:AO,children:[i,r.jsx("p",{css:RO(o),children:e})]}),t&&"string"==typeof t?r.jsx("p",{css:NO(o,!!i),children:t}):t?r.jsx("div",{css:DO(o,!!i),children:t}):null]}),a?r.jsx(Mf,{label:a,variant:"info-white"===n||"info-grey"===n?"primary":"secondary",size:"large"===o?"default":"small",onClick:s,leftIcon:c,rightIcon:d}):null]})},exports.InputWithUnits=({label:t,caption:o,errorMessage:i,units:s,unitsPosition:a="end",defaultUnit:l="",defaultValue:c="",onChange:d,required:u,disabled:h})=>{const[p,f]=n.useState(c),[m,g]=n.useState(l?[l]:[s[0].value]),v=(e,t)=>{d&&d("end"===a?""+(t?`${p} ${e}`:`${e} ${m}`):""+(t?`${e} ${p}`:`${m} ${e}`))};return r.jsxs("div",{css:sv,children:[i?r.jsx("div",{css:cv}):null,r.jsxs("div",{style:{marginLeft:i?"1.1875rem":"0px"},children:[r.jsxs("p",{css:av(h),"aria-label":t,children:[u?r.jsx("span",{children:"*"}):null,t]}),r.jsx("p",{css:lv(h),"aria-label":o,children:o}),i?r.jsx("p",{css:dv,"aria-label":i,children:i}):null,r.jsxs(e.Group,{css:uv(!!i,a),attached:!0,children:["start"===a?r.jsx(Pv,{placeholder:"","aria-label":`${t} unit`,value:m,items:s,disabled:h,onChange:e=>{g(e),v(e?.[0],!0)}}):null,r.jsx(Ym,{type:"number","aria-label":`${t} value`,value:p,disabled:h,onChange:e=>{f(e.target.value),v(e.target.value)}}),"end"===a?r.jsx(Pv,{placeholder:"","aria-label":`${t} unit`,value:m,items:s,disabled:h,onChange:e=>{g(e),v(e?.[0],!0)}}):null]})]})]})},exports.ItemCount=ww,exports.LayerGroup=({label:t,caption:o,value:i,layerItems:s,onChangeForRadioVariant:a,labels:l})=>{const c=Ef("LayerGroup",l),[d,u]=n.useState({}),[h]=n.useState((e=>{const t=e.find((e=>"radio"===e.variant&&e.isDefaultSelected));return t?.name})(s));n.useEffect((()=>{let e={...d};s.forEach((n=>{n.isDefaultSelected&&(e={...e,["radio"===n.variant?t:n.name]:n.isDefaultSelected})})),u(e)}),[]);const p=(e,t,n,r)=>{const o={...d,[e]:t};u(o),n&&n(e,t,r)},f=Object.values(d).filter((e=>!0===e)).length,m=c.groupAriaLabel(t,f,o);return r.jsxs(e.Accordion.Item,{value:i,width:"100%",children:[r.jsxs(e.Accordion.ItemTrigger,{css:Nx,alignItems:"flex-start","aria-label":m,children:[r.jsxs(e.Box,{width:"full",display:"flex",flexDirection:"column",alignItems:"flex-start",children:[r.jsxs("span",{css:Dx,children:[t,r.jsx(Nv,{label:c.activeTagLabel(f),size:"small",variant:f>0?"success":"info-grey"})]}),r.jsx("div",{css:Ix,children:o})]}),r.jsx(e.Accordion.ItemIndicator,{display:"flex",children:r.jsx(If,{color:"var(--chakra-colors-neutral-700)",height:"1rem",width:"1rem"})})]}),r.jsx(e.Accordion.ItemContent,{paddingLeft:"1rem",paddingRight:"1rem",children:r.jsx(Hg,{name:t,value:h,customGap:"0",onChange:(e,t)=>p(e,!!t,a,t),children:s.map((e=>r.jsx(_x,{...e,onChange:(t,n)=>p(t,n,e.onChange)},e.label)))})})]})},exports.LayerGroupContainer=({children:t,defaultValue:n,...o})=>r.jsx("div",{css:Rx,style:{width:"100%"},children:r.jsx(e.Accordion.Root,{css:{},defaultValue:n,multiple:!0,...o,children:t})}),exports.LayerItem=_x,exports.LayerParameters=({label:t,children:o,openedByDefault:i})=>r.jsx("div",{children:r.jsx(e.Accordion.Root,{defaultValue:i?[t]:[],multiple:!0,children:r.jsxs(e.Accordion.Item,{css:Fx,value:t,children:[r.jsxs(e.Accordion.ItemTrigger,{css:qx,children:[r.jsx(e.Box,{width:"full",display:"flex",flexDirection:"column",alignItems:"flex-start",children:r.jsx("p",{css:Wx,children:t})}),r.jsx(e.Accordion.ItemIndicator,{display:"flex",children:r.jsx(If,{color:"var(--chakra-colors-neutral-700)",height:"1rem",width:"1rem"})})]}),r.jsx(e.Accordion.ItemContent,{css:Ux,children:n.Children.map(o,(e=>r.jsx("div",{className:"ds-layer-parameters-item-child",children:e})))})]})})}),exports.LegendItem=({layerName:e,dataUnit:t,onDrag:n,onUpClick:o,onDownClick:i,onRemoveClick:s,children:a,onInfoClick:l,onOpacityChanged:c,labels:d})=>{const u=Ef("LegendItem",d);return r.jsxs("div",{css:Kx,children:[r.jsx("div",{css:Gx,children:r.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"0.75rem"},children:[r.jsx(Of,{icon:r.jsx(If,{rotate:"180"}),"aria-label":u.upLabel,onClick:o}),r.jsx(Of,{icon:r.jsx(If,{}),"aria-label":u.downLabel,onClick:i})]})}),r.jsxs("div",{style:{width:"100%"},children:[r.jsxs("div",{css:Zx,children:[r.jsxs("div",{children:[r.jsx("h3",{css:Jx,children:e}),r.jsx("p",{css:Xx,children:t})]}),r.jsx(Mf,{label:u.removeLabel,size:"small",variant:"secondary",rightIcon:r.jsx(zf,{}),onClick:s})]}),a,r.jsxs("div",{css:Yx,children:[r.jsx(Mf,{label:u.aboutDataLabel,size:"small",variant:"secondary",leftIcon:r.jsx(Df,{}),onClick:l}),r.jsx(rw,{defaultValue:80,onOpacityChanged:c})]})]})]})},exports.List=Ow,exports.MapControlsToolbar=({onZoomInClick:e,onZoomOutClick:n,onExpandClick:r,onShareClick:o,onPrintClick:i,onSettingsClick:s,onQuestionClick:a,vertical:l,expanded:c,showExpandedToggle:d,ariaLabel:u,labels:h})=>{const p=Ef("MapControlsToolbar",h),f=[{icon:t.jsx(Kf,{}),label:p.zoomInLabel,ariaLabel:p.zoomInAriaLabel,onClick:e},{icon:t.jsx(Gf,{}),label:p.zoomOutLabel,ariaLabel:p.zoomOutAriaLabel,onClick:n,gap:!0},{icon:t.jsx(Zf,{}),label:p.expandLabel,ariaLabel:p.expandAriaLabel,onClick:r,gap:!0},{icon:t.jsx(Jf,{}),label:p.shareLabel,ariaLabel:p.shareAriaLabel,onClick:o,gap:!0},{icon:t.jsx(Xf,{}),label:p.printLabel,ariaLabel:p.printAriaLabel,onClick:i,gap:!0},{icon:t.jsx(Yf,{}),label:p.settingsLabel,ariaLabel:p.settingsAriaLabel,onClick:s,gap:!0},{icon:t.jsx(Qf,{}),label:p.helpLabel,ariaLabel:p.helpAriaLabel,onClick:a}];return t.jsx(ug,{items:f,vertical:l,expanded:c,showExpandedToggle:d,ariaLabel:u||p.toolbarAriaLabel})},exports.MapMarker=vb,exports.MapMarkers=bb,exports.MapPopUp=({open:e,onOpenChange:t,anchorRef:o,header:i,content:s,footer:a,placement:c="bottom",offset:d=30,closeOnEscape:u=!0,closeOnOutsideClick:h=!1,labels:p})=>{const f=Ef("MapPopUp",p),m=n.useRef(null),{refs:g,floatingStyles:v,context:b,middlewareData:y,placement:x}=Sx({open:e,onOpenChange:t,placement:c,whileElementsMounted:Uy,middleware:[ox(d),(w={fallbackAxisSideDirection:"start"},{...Zy(w),options:[w,C]}),ix({padding:8}),sx({element:m})]});var w,C;n.useEffect((()=>{o?.current&&g.setReference(o.current)}),[o,g]);const k=function(e,t){void 0===t&&(t={});const{open:n,onOpenChange:r,elements:o,dataRef:i}=e,{enabled:s=!0,escapeKey:a=!0,outsidePress:c=!0,outsidePressEvent:d="pointerdown",referencePress:u=!1,referencePressEvent:h="pointerdown",ancestorScroll:p=!1,bubbles:f,capture:m}=t,g=yx(),v=$y("function"==typeof c?c:()=>!1),b="function"==typeof c?v:c,y=l.useRef(!1),{escapeKey:x,outsidePress:w}=Cx(f),{escapeKey:C,outsidePress:k}=Cx(m),S=l.useRef(!1),$=$y((e=>{var t;if(!n||!s||!a||"Escape"!==e.key)return;if(S.current)return;const o=null==(t=i.current.floatingContext)?void 0:t.nodeId,l=g?Cy(g.nodesRef.current,o):[];if(!x&&(e.stopPropagation(),l.length>0)){let e=!0;if(l.forEach((t=>{var n;null==(n=t.context)||!n.open||t.context.dataRef.current.__escapeKeyBubbles||(e=!1)})),!e)return}r(!1,function(e){return"nativeEvent"in e}(e)?e.nativeEvent:e,"escape-key")})),j=$y((e=>{var t;const n=()=>{var t;$(e),null==(t=yy(e))||t.removeEventListener("keydown",n)};null==(t=yy(e))||t.addEventListener("keydown",n)})),E=$y((e=>{var t;const n=i.current.insideReactTree;i.current.insideReactTree=!1;const s=y.current;if(y.current=!1,"click"===d&&s)return;if(n)return;if("function"==typeof b&&!b(e))return;const a=yy(e),l="[data-floating-ui-inert]",c=wy(o.floating).querySelectorAll(l);let u=Sb(a)?a:null;for(;u&&!Vb(u);){const e=_b(u);if(Vb(e)||!Sb(e))break;u=e}if(c.length&&Sb(a)&&!a.matches("html,body")&&!by(a,o.floating)&&Array.from(c).every((e=>!by(u,e))))return;if($b(a)&&O){const t=Vb(a),n=Hb(a),r=/auto|scroll/,o=t||r.test(n.overflowX),i=t||r.test(n.overflowY),s=o&&a.clientWidth>0&&a.scrollWidth>a.clientWidth,l=i&&a.clientHeight>0&&a.scrollHeight>a.clientHeight,c="rtl"===n.direction,d=l&&(c?e.offsetX<=a.offsetWidth-a.clientWidth:e.offsetX>a.clientWidth),u=s&&e.offsetY>a.clientHeight;if(d||u)return}const h=null==(t=i.current.floatingContext)?void 0:t.nodeId,p=g&&Cy(g.nodesRef.current,h).some((t=>{var n;return xy(e,null==(n=t.context)?void 0:n.elements.floating)}));if(xy(e,o.floating)||xy(e,o.domReference)||p)return;const f=g?Cy(g.nodesRef.current,h):[];if(f.length>0){let e=!0;if(f.forEach((t=>{var n;null==(n=t.context)||!n.open||t.context.dataRef.current.__outsidePressBubbles||(e=!1)})),!e)return}r(!1,e,"outside-press")})),M=$y((e=>{var t;const n=()=>{var t;E(e),null==(t=yy(e))||t.removeEventListener(d,n)};null==(t=yy(e))||t.addEventListener(d,n)}));l.useEffect((()=>{if(!n||!s)return;i.current.__escapeKeyBubbles=x,i.current.__outsidePressBubbles=w;let e=-1;function t(e){r(!1,e,"ancestor-scroll")}function l(){window.clearTimeout(e),S.current=!0}function c(){e=window.setTimeout((()=>{S.current=!1}),Pb()?5:0)}const u=wy(o.floating);a&&(u.addEventListener("keydown",C?j:$,C),u.addEventListener("compositionstart",l),u.addEventListener("compositionend",c)),b&&u.addEventListener(d,k?M:E,k);let h=[];return p&&(Sb(o.domReference)&&(h=qb(o.domReference)),Sb(o.floating)&&(h=h.concat(qb(o.floating))),!Sb(o.reference)&&o.reference&&o.reference.contextElement&&(h=h.concat(qb(o.reference.contextElement)))),h=h.filter((e=>{var t;return e!==(null==(t=u.defaultView)?void 0:t.visualViewport)})),h.forEach((e=>{e.addEventListener("scroll",t,{passive:!0})})),()=>{a&&(u.removeEventListener("keydown",C?j:$,C),u.removeEventListener("compositionstart",l),u.removeEventListener("compositionend",c)),b&&u.removeEventListener(d,k?M:E,k),h.forEach((e=>{e.removeEventListener("scroll",t)})),window.clearTimeout(e)}}),[i,o,a,b,d,n,r,p,s,x,w,$,C,j,E,k,M]),l.useEffect((()=>{i.current.insideReactTree=!1}),[i,b,d]);const T=l.useMemo((()=>({onKeyDown:$,...u&&{[xx[h]]:e=>{r(!1,e.nativeEvent,"reference-press")},..."click"!==h&&{onClick(e){r(!1,e.nativeEvent,"reference-press")}}}})),[$,r,u,h]),O=l.useMemo((()=>({onKeyDown:$,onMouseDown(){y.current=!0},onMouseUp(){y.current=!0},[wx[d]]:()=>{i.current.insideReactTree=!0}})),[$,d,i]);return l.useMemo((()=>s?{reference:T,floating:O}:{}),[s,T,O])}(b,{escapeKey:u,outsidePress:h}),S=Ex(b,{role:"dialog"}),{getFloatingProps:$}=function(e){void 0===e&&(e=[]);const t=e.map((e=>null==e?void 0:e.reference)),n=e.map((e=>null==e?void 0:e.floating)),r=e.map((e=>null==e?void 0:e.item)),o=l.useCallback((t=>$x(t,e,"reference")),t),i=l.useCallback((t=>$x(t,e,"floating")),n),s=l.useCallback((t=>$x(t,e,"item")),r);return l.useMemo((()=>({getReferenceProps:o,getFloatingProps:i,getItemProps:s})),[o,i,s])}([k,S]),{x:j,y:E}=y.arrow??{x:null,y:null},M={top:"bottom",right:"left",bottom:"top",left:"right"}[x.split("-")[0]];if(!e)return null;let T=d-1,O=4;return"left"!==M&&"right"!==M||(T=4,O=d-1),r.jsxs(r.Fragment,{children:[r.jsxs("div",{ref:g.setFloating,style:v,"aria-label":"Map popup dialog","aria-modal":!0,...$(),css:Mx,children:[r.jsxs("div",{css:Tx,children:[i,r.jsx(sg,{onClick:()=>t(!1),className:"ds-map-pop-up-close-button","aria-label":f.closeLabel})]}),r.jsx("div",{css:Ox,children:s}),a?r.jsx("div",{css:Lx,children:a}):null,r.jsx("div",{ref:m,css:Ax(T,O,j,E,M,d)})]}),r.jsx("div",{className:"fixed inset-0 z-[999] bg-black/20 backdrop-blur-[1px]",onClick:()=>h&&t(!1)})]})},exports.Menu=jm,exports.MobileTabBar=({defaultValue:t,tabs:o,onTabClick:i,hideLabels:s,activationMode:a="manual"})=>{const l=o.length,[c,d]=n.useState((()=>NT(o,t)));return r.jsx("div",{css:OT,children:r.jsx(e.Tabs.Root,{width:"full",defaultValue:t||o?.[0]?.value,onValueChange:({value:e})=>(e=>{const t=NT(o,e);d(t),i&&i(e)})(e),activationMode:a,children:r.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:o.map(((t,n)=>{const{label:o,icon:i,bagdeCount:a,"aria-label":d,"aria-describedby":u,disabled:h,...p}=t,f=`${t.value}-str-status`,m=[`tab ${n+1} of ${l}`,c===n?"selected":"not selected"];h&&m.push("disabled");const g=[u,f].filter(Boolean).join(" ")||void 0;return r.jsxs(e.Tabs.Trigger,{css:LT,"aria-label":d||o,"aria-disabled":!!h||void 0,"aria-describedby":g,disabled:h,...p,children:[r.jsxs("div",{css:AT,children:[i,a?r.jsx("div",{css:RT,className:"ds-badge-count",children:a}):null]}),s?null:r.jsx("p",{children:o}),r.jsx(e.VisuallyHidden,{id:f,children:m.join(", ")})]},t.value)}))})})})},exports.Modal=({header:t,content:o,footer:i,size:s="medium",width:a,height:l,maxHeight:c,draggable:d,blocking:u,open:h,onClose:p})=>{const f=n.useRef(null);return h?r.jsx(e.Dialog.Root,{open:h,onOpenChange:p,placement:"center",scrollBehavior:"inside",closeOnInteractOutside:!d&&!u,preventScroll:!d&&!u,closeOnEscape:!u,defaultOpen:!0,children:r.jsxs(e.Portal,{children:[d?null:r.jsx(e.Dialog.Backdrop,{css:{background:"rgba(0, 0, 0, 0.64)"}}),r.jsx(XC,{disabled:!d,nodeRef:f,children:r.jsx(e.Dialog.Positioner,{ref:f,children:r.jsxs(e.Dialog.Content,{"aria-label":"Modal dialog",css:YC(s,a,l,c),children:[r.jsxs(e.Dialog.Header,{css:QC,children:[t,u?null:r.jsx(e.Dialog.CloseTrigger,{css:ek,asChild:!0,children:r.jsx(sg,{})})]}),r.jsx(e.Dialog.Body,{css:tk,children:o}),i?r.jsx(e.Dialog.Footer,{padding:"0.75rem",children:i}):null]})})})]})}):null},exports.MultiActionButton=({variant:t="primary",size:o="default",mainActionLabel:i,mainActionOnClick:s=()=>{},otherActions:a=[],disabled:l,mainActionLeftIcon:c,mainActionRightIcon:d,...u})=>{const[h,p]=n.useState(!1),f=l?`${i} action button with menu, disabled`:void 0;return r.jsxs(e.Group,{css:mg,attached:!0,tabIndex:l?0:void 0,"aria-disabled":l,"aria-label":f,role:"group",children:[r.jsx(Mf,{css:{},label:i,variant:t,size:o,onClick:s,disabled:l,leftIcon:c,rightIcon:d,...u}),r.jsxs(e.Menu.Root,{onOpenChange:({open:e})=>p(e),positioning:{placement:"bottom-end"},children:[r.jsx(e.Menu.Trigger,{css:pg(t),"data-group-item":!0,"data-last":!0,asChild:!0,children:r.jsx(Mf,{style:gg,"aria-label":`Open ${i} options`,"aria-haspopup":"menu","aria-expanded":h,variant:t,size:o,leftIcon:r.jsx(If,{"aria-hidden":"true",rotate:h?"180":"0",color:w("accessible","text-on-primary-mids")||w("primary",900)}),disabled:l})}),r.jsx(vg,{children:a.map((({label:t,value:n,onClick:i})=>r.jsx(e.Menu.Item,{css:fg(o),onClick:i,value:n,children:t},n)))})]})]})},exports.Navbar=({variant:e="default",theme:t="light",logo:o,linkRouter:i,pathname:s,navigationSection:a,utilitySection:l,actionsSection:c,maxWidth:d,fixed:u,onNavbarHeightChange:h,backgroundColor:p,labels:f})=>{const m=Ef("Navbar",f),g=n.useRef(null),v=n.useRef(null),b=n.useRef(null),[y,x]=n.useState(!1),[w,C]=n.useState(-1),[k,S]=n.useState("undefined"!=typeof window&&window?.innerWidth<=rO),[$,j]=n.useState(!1),E=i,M=n.useCallback((()=>{if(v.current&&g.current&&b.current){const e=g.current.getBoundingClientRect(),t=v.current.getBoundingClientRect(),n=b.current.getBoundingClientRect();t.width,e.width,window.innerWidth<=rO||window.innerWidth<=w?(h?.(96),x(!0)):window.innerWidth>rO&&window.innerWidth<=1440?e.right>=t.left?(h?.(96),x(!0),C(window.innerWidth)):window.innerWidth>w&&(h?.(48),x(!1),C(-1)):(h?.(48),x(!1),C(-1)),y&&(window.innerWidth<=rO||n.right>=t.left?(S(!0),h?.(48)):(S(!1),h?.(96)))}}),[w,y]);n.useEffect((()=>(M(),window.addEventListener("resize",M),()=>{window.removeEventListener("resize",M)})),[M]);const T="condensed"===e;return r.jsxs("nav",{css:DT(y&&!k,u,p,t,T),children:[r.jsxs("div",{css:PT(y&&!k,d,T),children:[r.jsxs("div",{css:zT(y&&!k||"dark"===t,T),ref:g,children:[o?r.jsx("div",{ref:b,css:VT,children:o}):null,r.jsx("div",{css:HT(y),children:a?.map((e=>e.link?r.jsx(E,{to:e.link,href:e.link,css:BT(s===e.link,t,T),children:e.label},e.label):r.jsx(jm,{theme:t,label:e.label,fontSize:T?"0.875rem":"1rem",items:e.items||[]},e.label)))})]}),r.jsx("div",{css:_T(T),ref:v,children:k?r.jsxs("button",{type:"button",onClick:()=>j(!$),"aria-label":$?m.closeMenuLabel:m.openMenuLabel,"aria-expanded":$,css:WT(t),children:[$?m.closeLabel:m.menuLabel,$?r.jsx(zf,{height:T?"0.75rem":"1rem",width:T?"0.75rem":"1rem"}):r.jsx(lm,{height:T?"0.75rem":"1rem",width:T?"0.75rem":"1rem"})]}):r.jsxs(r.Fragment,{children:[r.jsx("div",{css:_T(T),children:l?.map(((e,t)=>r.jsx("div",{css:FT(y),children:e},t)))}),c?.length?r.jsx("div",{css:qT(y),children:c.map((e=>r.jsx(Mf,{...e},e.ariaLabel)))}):null]})})]}),y&&!k?r.jsx("div",{css:IT(t,T),children:a?.map((e=>e.link?r.jsx(E,{to:e.link,href:e.link,css:BT(s===e.link,t,T),children:e.label},e.label):r.jsx(jm,{theme:t,label:e.label,fontSize:T?"0.875rem":"1rem",items:e.items||[]},e.label)))}):null,k?r.jsx(nO,{theme:t,variant:e,navigationSection:a,utilitySection:l,actionsSection:c,linkRouter:i,isOpen:$,setIsOpen:j,pathname:s,resolvedLabels:m}):null]})},exports.NavigationRail=({tabs:t=[],defaultValue:o,onTabClick:i,children:s,onOpenChange:a,labels:l})=>{const c=Ef("NavigationRail",l),[d,u]=n.useState(!1),[h,p]=n.useState(o||t?.[0]?.value),f=e=>{p(e),i&&i(e)},[m]=e.useMediaQuery(["(max-width: 48rem)"]);return m?r.jsxs(e.Tabs.Root,{defaultValue:h,onValueChange:({value:e})=>f(e),children:[r.jsx(e.Tabs.List,{style:{display:"flex",overflowX:"auto",whiteSpace:"nowrap",padding:"0.5rem",gap:"0.5rem"},children:t.map((t=>r.jsx(e.Tabs.Trigger,{value:t.value,css:{"--indicator-color":w("primary",500),flexShrink:0,padding:"0.625rem 1rem",color:w("neutral",600),"&[data-selected]":{color:w("neutral",800),fontWeight:600}},children:t.label},t.value)))}),t.map((t=>r.jsx(e.Tabs.Content,{value:t.value,children:s},t.value)))]}):r.jsxs("div",{style:{height:"calc(100vh - 3rem - 3.5rem)",position:"fixed",top:"3rem",left:0,display:"flex"},children:[r.jsxs("div",{css:oO,children:[r.jsx(e.Tabs.Root,{defaultValue:o||t?.[0]?.value,orientation:"horizontal",width:"full",onValueChange:({value:e})=>{f(e)},children:r.jsx(e.Tabs.List,{alignItems:"center",border:"none",style:{flexDirection:"column"},children:t.map((t=>r.jsx(e.Tabs.Trigger,{css:iO,"aria-label":t["aria-label"]||t.label,...t,children:r.jsxs(e.Box,{display:"flex",alignItems:"center",flexDirection:"column",gap:"0.3125rem",className:"ds-tab-label",children:[t.icon?r.jsx("div",{css:sO,children:t.icon}):null,r.jsx("p",{children:t.label})]})},t.label)))})}),s?r.jsx(e.Collapsible.Root,{onOpenChange:({open:e})=>{u(e),a&&a(!e)},children:r.jsxs(e.Collapsible.Trigger,{css:aO,children:[r.jsx("div",{css:sO,children:d?r.jsx(Af,{}):r.jsx(Lf,{})}),r.jsxs("div",{className:"ds-tab-label",children:[r.jsx("p",{children:d?c.showLabel:c.hideLabel}),r.jsx("p",{children:c.sidebarLabel})]})]})}):null]}),s?r.jsx(e.Collapsible.Root,{defaultOpen:!0,open:!d,children:r.jsx(e.Collapsible.Content,{height:"100%",children:r.jsx("div",{css:lO,role:"tabpanel","aria-labelledby":h,children:s})})}):null]})},exports.OptionCard=({defaultValue:t,items:n,onValueChange:o,variant:s,itemWidth:a,hideControl:l})=>r.jsx(e.RadioCard.Root,{defaultValue:t,onValueChange:o,children:r.jsx(e.HStack,{alignItems:"flex-start",flexWrap:"wrap",gap:"0.75rem",children:n?.map((t=>{return r.jsxs(e.RadioCard.Item,{css:(o=a,c=t.selectedColor,d=t.selectedBackgroundColor,i.css`
|
|
3868
|
+
width: ${o||"15.0625rem"};
|
|
3869
|
+
min-height: 4.375rem;
|
|
3870
|
+
padding: ${k(300)};
|
|
3871
|
+
background-color: ${w("neutral",100)};
|
|
3872
|
+
border: ${j(100)} solid ${w("neutral",300)};
|
|
3873
|
+
border-radius: ${$(300)};
|
|
3874
|
+
cursor: pointer;
|
|
3875
|
+
box-shadow: 0 0.0625rem 0.125rem 0 #0000000d;
|
|
3876
|
+
flex: none;
|
|
3877
|
+
|
|
3878
|
+
&:hover {
|
|
3879
|
+
box-shadow: 0 0.125rem 0.25rem -0.125rem #0000001a;
|
|
3880
|
+
box-shadow: 0 0.25rem 0.375rem -0.0625rem #0000001a;
|
|
3881
|
+
}
|
|
3882
|
+
|
|
3883
|
+
&:focus-visible,
|
|
3884
|
+
&[data-focus-visible] {
|
|
3885
|
+
outline: ${j(200)} solid
|
|
3886
|
+
${w("primary",700)};
|
|
3887
|
+
outline-offset: ${k(50)};
|
|
3888
|
+
box-shadow: 0 0.125rem 0.25rem -0.125rem #0000001a;
|
|
3889
|
+
box-shadow: 0 0.25rem 0.375rem -0.0625rem #0000001a;
|
|
3890
|
+
box-shadow:
|
|
3891
|
+
0 0 0 0.125rem ${w("neutral",100)},
|
|
3892
|
+
rgba(0, 0, 0, 0.05) 0 0.125rem 0.125rem 0.25rem;
|
|
3893
|
+
}
|
|
3894
|
+
|
|
3895
|
+
&[data-state='checked'] {
|
|
3896
|
+
background-color: ${d||w("primary",100)};
|
|
3897
|
+
border: ${j(100)} solid
|
|
3898
|
+
${c||w("primary",700)};
|
|
3899
|
+
|
|
3900
|
+
.option-card-icon-container svg {
|
|
3901
|
+
color: ${c||w("neutral",900)};
|
|
3902
|
+
}
|
|
3903
|
+
}
|
|
3904
|
+
|
|
3905
|
+
&[data-disabled] {
|
|
3906
|
+
outline: none;
|
|
3907
|
+
box-shadow: none;
|
|
3908
|
+
border: ${j(100)} solid ${w("neutral",300)};
|
|
3909
|
+
background-color: ${w("neutral",100)};
|
|
3910
|
+
color: ${w("neutral",600)};
|
|
3911
|
+
cursor: not-allowed;
|
|
3912
|
+
|
|
3913
|
+
.option-card-icon-container svg {
|
|
3914
|
+
color: ${w("neutral",400)};
|
|
3915
|
+
}
|
|
3916
|
+
}
|
|
3917
|
+
`),value:t.value,disabled:t.disabled,children:[r.jsx(e.RadioCard.ItemHiddenInput,{}),r.jsxs(e.RadioCard.ItemControl,{css:Og,children:[r.jsxs("div",{css:Lg(s),children:[r.jsx("div",{css:Ag,className:"option-card-icon-container",children:t.icon}),r.jsxs("div",{style:{width:"100%"},children:[r.jsx("p",{css:Rg(s,t.disabled),"aria-label":t.label,"aria-disabled":t.disabled,children:t.label}),r.jsx("p",{css:Ng(s,t.disabled),"aria-label":t.caption,"aria-disabled":t.disabled,children:t.caption})]})]}),l?null:r.jsx(e.RadioCard.ItemIndicator,{css:Dg(s)})]}),t.children&&"expanded"===s?r.jsx(e.RadioCard.ItemAddon,{css:(n=t.disabled,i.css`
|
|
3908
3918
|
width: 100%;
|
|
3909
3919
|
border-top: ${j(100)} solid
|
|
3910
3920
|
${w("neutral",300)};
|
|
@@ -3912,7 +3922,7 @@ function _E(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
|
|
|
3912
3922
|
padding: 0;
|
|
3913
3923
|
padding-top: ${k(200)};
|
|
3914
3924
|
color: ${n?w("neutral",500):"inherit"};
|
|
3915
|
-
`),children:t.children}):null]},`${t.label}-${t.value}`);var n,o}))})}),exports.Pagination=Dw,exports.Panel=({header:e,content:t,footer:o,variant:i="fixed",width:s})=>{const a=n.useId(),[l,c]=n.useState(void 0),[d,u]=n.useState(void 0),h=n.useRef(null),p=n.useRef(null);n.useEffect((()=>{c(h?.current?.getBoundingClientRect()?.height),u(p?.current?.getBoundingClientRect()?.height)}),[e,o]);return r.jsxs("div",{role:"region","aria-labelledby":e?a:void 0,css:[nk(s),"fixed"===i?rk:ok],children:[e?r.jsx("div",{id:a,css:ik,ref:h,children:e}):null,r.jsx("div",{css:sk(l,d),children:t}),o?r.jsx("div",{css:ak,ref:p,children:o}):null]})},exports.Password=({label:e,caption:t,required:o,disabledRules:s,onChange:a,minLength:l=8,hideValidations:c,labels:d})=>{const u=Ef("Password",d),[h,p]=n.useState(!1),[f,m]=n.useState(""),[g,v]=n.useState({strength:"very-weak",length:!1,uppercase:!1,lowercase:!1,numbers:!1,specialCharacters:!1}),b={"very-weak":u.strengthVeryWeak,weak:u.strengthWeak,medium:u.strengthMedium,strong:u.strengthStrong,"very-strong":u.strengthVeryStrong};return r.jsxs("div",{css:zv,children:[r.jsxs("p",{css:Vv,"aria-label":e,children:[o?r.jsx("span",{children:"*"}):null,e]}),r.jsx("p",{css:Hv,"aria-label":t,children:t}),r.jsxs("div",{css:Bv,children:[r.jsx(Ym,{type:h?"text":"password","aria-label":e,value:f,"aria-describedby":"password-guidelines",onChange:e=>(e=>{const t={...g};let n=0,r=!1;t.length=e.length>=l,n+=e.length>=l?1:0,r=/[A-Z]/.test(e),n+=r?1:0,t.uppercase=r,r=/[a-z]/.test(e),n+=r?1:0,t.lowercase=r,r=/[0-9]/.test(e),n+=r?1:0,t.numbers=r,r=/[-'/`~!¡#*$@_%+=.,^&(){}[\]|;:“‘"<>?\\]/.test(e),n+=r?1:0,t.specialCharacters=r,t.strength="very-weak",e.length>=4&&n>=2&&(t.strength="weak"),e.length>=6&&n>=3&&(t.strength="medium"),e.length>=l&&n>=4&&(t.strength="strong"),e.length>=l+2&&n>=5&&(t.strength="very-strong"),m(e),v(t),a&&a({...t,password:e})})(e.target.value)}),r.jsx(Mf,{label:h?u.hideLabel:u.showLabel,variant:"secondary",leftIcon:h?r.jsx(Bf,{}):r.jsx(Hf,{}),"aria-label":h?u.hidePasswordLabel:u.showPasswordLabel,onClick:()=>p(!h),type:"button"})]}),f&&!c?r.jsxs("div",{id:"password-guidelines",css:_v,"aria-live":"polite",children:[r.jsxs("p",{css:(y=g.strength,i.css`
|
|
3925
|
+
`),children:t.children}):null]},`${t.label}-${t.value}`);var n,o,c,d}))})}),exports.Pagination=Dw,exports.Panel=({header:e,content:t,footer:o,variant:i="fixed",width:s})=>{const a=n.useId(),[l,c]=n.useState(void 0),[d,u]=n.useState(void 0),h=n.useRef(null),p=n.useRef(null);n.useEffect((()=>{c(h?.current?.getBoundingClientRect()?.height),u(p?.current?.getBoundingClientRect()?.height)}),[e,o]);return r.jsxs("div",{role:"region","aria-labelledby":e?a:void 0,css:[nk(s),"fixed"===i?rk:ok],children:[e?r.jsx("div",{id:a,css:ik,ref:h,children:e}):null,r.jsx("div",{css:sk(l,d),children:t}),o?r.jsx("div",{css:ak,ref:p,children:o}):null]})},exports.Password=({label:e,caption:t,required:o,disabledRules:s,onChange:a,minLength:l=8,hideValidations:c,labels:d})=>{const u=Ef("Password",d),[h,p]=n.useState(!1),[f,m]=n.useState(""),[g,v]=n.useState({strength:"very-weak",length:!1,uppercase:!1,lowercase:!1,numbers:!1,specialCharacters:!1}),b={"very-weak":u.strengthVeryWeak,weak:u.strengthWeak,medium:u.strengthMedium,strong:u.strengthStrong,"very-strong":u.strengthVeryStrong};return r.jsxs("div",{css:zv,children:[r.jsxs("p",{css:Vv,"aria-label":e,children:[o?r.jsx("span",{children:"*"}):null,e]}),r.jsx("p",{css:Hv,"aria-label":t,children:t}),r.jsxs("div",{css:Bv,children:[r.jsx(Ym,{type:h?"text":"password","aria-label":e,value:f,"aria-describedby":"password-guidelines",onChange:e=>(e=>{const t={...g};let n=0,r=!1;t.length=e.length>=l,n+=e.length>=l?1:0,r=/[A-Z]/.test(e),n+=r?1:0,t.uppercase=r,r=/[a-z]/.test(e),n+=r?1:0,t.lowercase=r,r=/[0-9]/.test(e),n+=r?1:0,t.numbers=r,r=/[-'/`~!¡#*$@_%+=.,^&(){}[\]|;:“‘"<>?\\]/.test(e),n+=r?1:0,t.specialCharacters=r,t.strength="very-weak",e.length>=4&&n>=2&&(t.strength="weak"),e.length>=6&&n>=3&&(t.strength="medium"),e.length>=l&&n>=4&&(t.strength="strong"),e.length>=l+2&&n>=5&&(t.strength="very-strong"),m(e),v(t),a&&a({...t,password:e})})(e.target.value)}),r.jsx(Mf,{label:h?u.hideLabel:u.showLabel,variant:"secondary",leftIcon:h?r.jsx(Bf,{}):r.jsx(Hf,{}),"aria-label":h?u.hidePasswordLabel:u.showPasswordLabel,onClick:()=>p(!h),type:"button"})]}),f&&!c?r.jsxs("div",{id:"password-guidelines",css:_v,"aria-live":"polite",children:[r.jsxs("p",{css:(y=g.strength,i.css`
|
|
3916
3926
|
font-size: ${C(400)};
|
|
3917
3927
|
line-height: ${S(600)};
|
|
3918
3928
|
font-weight: 400;
|
package/dist/index.d.ts
CHANGED
|
@@ -765,13 +765,14 @@ type CheckboxOptionCardProps = {
|
|
|
765
765
|
declare const CheckboxOptionCard: ({ defaultValue, items, onValueChange, }: CheckboxOptionCardProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
766
766
|
|
|
767
767
|
type OptionCardItemProps = {
|
|
768
|
-
label
|
|
768
|
+
label?: string;
|
|
769
769
|
caption?: string;
|
|
770
770
|
icon?: React.ReactNode;
|
|
771
|
-
variant?: 'default' | 'centered' | 'expanded';
|
|
772
771
|
disabled?: boolean;
|
|
773
772
|
children?: React.ReactNode;
|
|
774
773
|
value: string;
|
|
774
|
+
selectedColor?: string;
|
|
775
|
+
selectedBackgroundColor?: string;
|
|
775
776
|
};
|
|
776
777
|
type OptionCardProps = Omit<RadioCardRootProps, 'colorPalette' | 'size' | 'variant' | 'as' | 'asChild' | 'unstyled' | 'defaultChecked'> & {
|
|
777
778
|
defaultValue?: string;
|
|
@@ -779,9 +780,12 @@ type OptionCardProps = Omit<RadioCardRootProps, 'colorPalette' | 'size' | 'varia
|
|
|
779
780
|
onValueChange?: ({ value }: {
|
|
780
781
|
value: string;
|
|
781
782
|
}) => void;
|
|
783
|
+
variant?: 'default' | 'centered' | 'expanded';
|
|
784
|
+
itemWidth?: string;
|
|
785
|
+
hideControl?: boolean;
|
|
782
786
|
};
|
|
783
787
|
|
|
784
|
-
declare const OptionCard: ({ defaultValue, items, onValueChange, }: OptionCardProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
788
|
+
declare const OptionCard: ({ defaultValue, items, onValueChange, variant, itemWidth, hideControl, }: OptionCardProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
785
789
|
|
|
786
790
|
type RadioProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'name' | 'defaultChecked' | 'onChange'> & {
|
|
787
791
|
value: string;
|
package/dist/index.esm.js
CHANGED
|
@@ -748,47 +748,6 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
|
|
|
748
748
|
padding-top: ${He(200)};
|
|
749
749
|
color: ${n?ze("neutral",500):"inherit"};
|
|
750
750
|
`),children:t.children}):null]},`${t.label}-${t.value}`);var n,r}))})}),Qv=$e`
|
|
751
|
-
width: 15.0625rem;
|
|
752
|
-
min-height: 4.375rem;
|
|
753
|
-
padding: ${He(300)};
|
|
754
|
-
background-color: ${ze("neutral",100)};
|
|
755
|
-
border: ${Be(100)} solid ${ze("neutral",300)};
|
|
756
|
-
border-radius: ${je(300)};
|
|
757
|
-
cursor: pointer;
|
|
758
|
-
box-shadow: 0 0.0625rem 0.125rem 0 #0000000d;
|
|
759
|
-
flex: none;
|
|
760
|
-
|
|
761
|
-
&:hover {
|
|
762
|
-
box-shadow: 0 0.125rem 0.25rem -0.125rem #0000001a;
|
|
763
|
-
box-shadow: 0 0.25rem 0.375rem -0.0625rem #0000001a;
|
|
764
|
-
}
|
|
765
|
-
|
|
766
|
-
&:focus-visible,
|
|
767
|
-
&[data-focus-visible] {
|
|
768
|
-
outline: ${Be(200)} solid
|
|
769
|
-
${ze("primary",700)};
|
|
770
|
-
outline-offset: ${He(50)};
|
|
771
|
-
box-shadow: 0 0.125rem 0.25rem -0.125rem #0000001a;
|
|
772
|
-
box-shadow: 0 0.25rem 0.375rem -0.0625rem #0000001a;
|
|
773
|
-
box-shadow:
|
|
774
|
-
0 0 0 0.125rem ${ze("neutral",100)},
|
|
775
|
-
rgba(0, 0, 0, 0.05) 0 0.125rem 0.125rem 0.25rem;
|
|
776
|
-
}
|
|
777
|
-
|
|
778
|
-
&[data-state='checked'] {
|
|
779
|
-
background-color: ${ze("primary",100)};
|
|
780
|
-
border: ${Be(100)} solid ${ze("primary",700)};
|
|
781
|
-
}
|
|
782
|
-
|
|
783
|
-
&[data-disabled] {
|
|
784
|
-
outline: none;
|
|
785
|
-
box-shadow: none;
|
|
786
|
-
border: ${Be(100)} solid ${ze("neutral",300)};
|
|
787
|
-
background-color: ${ze("neutral",100)};
|
|
788
|
-
color: ${ze("neutral",600)};
|
|
789
|
-
cursor: not-allowed;
|
|
790
|
-
}
|
|
791
|
-
`,eb=$e`
|
|
792
751
|
width: 100%;
|
|
793
752
|
padding: 0;
|
|
794
753
|
display: flex;
|
|
@@ -798,10 +757,17 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
|
|
|
798
757
|
&[data-disabled] {
|
|
799
758
|
background-color: ${ze("neutral",100)};
|
|
800
759
|
}
|
|
760
|
+
`,eb=e=>$e`
|
|
761
|
+
width: 100%;
|
|
762
|
+
display: flex;
|
|
763
|
+
flex-direction: ${"centered"===e?"column":"row"};
|
|
764
|
+
align-items: center;
|
|
765
|
+
gap: ${He(300)};
|
|
801
766
|
`,tb=$e`
|
|
802
767
|
svg {
|
|
803
768
|
height: 2rem;
|
|
804
769
|
width: 2rem;
|
|
770
|
+
color: ${ze("neutral",400)};
|
|
805
771
|
}
|
|
806
772
|
`,nb=(e,t)=>$e`
|
|
807
773
|
font-size: ${Ve(400)};
|
|
@@ -846,13 +812,57 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
|
|
|
846
812
|
border: ${Be(100)} solid ${ze("neutral",400)};
|
|
847
813
|
cursor: not-allowed;
|
|
848
814
|
}
|
|
849
|
-
`,ib=({defaultValue:e,items:t,onValueChange:n})=>ye(y.Root,{defaultValue:e,onValueChange:n,children:ye(p,{alignItems:"flex-start",flexWrap:"wrap",gap:"0.75rem",children:t
|
|
850
|
-
width:
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
815
|
+
`,ib=({defaultValue:e,items:t,onValueChange:n,variant:r,itemWidth:o,hideControl:i})=>ye(y.Root,{defaultValue:e,onValueChange:n,children:ye(p,{alignItems:"flex-start",flexWrap:"wrap",gap:"0.75rem",children:t?.map((e=>{return be(y.Item,{css:(n=o,s=e.selectedColor,a=e.selectedBackgroundColor,$e`
|
|
816
|
+
width: ${n||"15.0625rem"};
|
|
817
|
+
min-height: 4.375rem;
|
|
818
|
+
padding: ${He(300)};
|
|
819
|
+
background-color: ${ze("neutral",100)};
|
|
820
|
+
border: ${Be(100)} solid ${ze("neutral",300)};
|
|
821
|
+
border-radius: ${je(300)};
|
|
822
|
+
cursor: pointer;
|
|
823
|
+
box-shadow: 0 0.0625rem 0.125rem 0 #0000000d;
|
|
824
|
+
flex: none;
|
|
825
|
+
|
|
826
|
+
&:hover {
|
|
827
|
+
box-shadow: 0 0.125rem 0.25rem -0.125rem #0000001a;
|
|
828
|
+
box-shadow: 0 0.25rem 0.375rem -0.0625rem #0000001a;
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
&:focus-visible,
|
|
832
|
+
&[data-focus-visible] {
|
|
833
|
+
outline: ${Be(200)} solid
|
|
834
|
+
${ze("primary",700)};
|
|
835
|
+
outline-offset: ${He(50)};
|
|
836
|
+
box-shadow: 0 0.125rem 0.25rem -0.125rem #0000001a;
|
|
837
|
+
box-shadow: 0 0.25rem 0.375rem -0.0625rem #0000001a;
|
|
838
|
+
box-shadow:
|
|
839
|
+
0 0 0 0.125rem ${ze("neutral",100)},
|
|
840
|
+
rgba(0, 0, 0, 0.05) 0 0.125rem 0.125rem 0.25rem;
|
|
841
|
+
}
|
|
842
|
+
|
|
843
|
+
&[data-state='checked'] {
|
|
844
|
+
background-color: ${a||ze("primary",100)};
|
|
845
|
+
border: ${Be(100)} solid
|
|
846
|
+
${s||ze("primary",700)};
|
|
847
|
+
|
|
848
|
+
.option-card-icon-container svg {
|
|
849
|
+
color: ${s||ze("neutral",900)};
|
|
850
|
+
}
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
&[data-disabled] {
|
|
854
|
+
outline: none;
|
|
855
|
+
box-shadow: none;
|
|
856
|
+
border: ${Be(100)} solid ${ze("neutral",300)};
|
|
857
|
+
background-color: ${ze("neutral",100)};
|
|
858
|
+
color: ${ze("neutral",600)};
|
|
859
|
+
cursor: not-allowed;
|
|
860
|
+
|
|
861
|
+
.option-card-icon-container svg {
|
|
862
|
+
color: ${ze("neutral",400)};
|
|
863
|
+
}
|
|
864
|
+
}
|
|
865
|
+
`),value:e.value,disabled:e.disabled,children:[ye(y.ItemHiddenInput,{}),be(y.ItemControl,{css:Qv,children:[be("div",{css:eb(r),children:[ye("div",{css:tb,className:"option-card-icon-container",children:e.icon}),be("div",{style:{width:"100%"},children:[ye("p",{css:nb(r,e.disabled),"aria-label":e.label,"aria-disabled":e.disabled,children:e.label}),ye("p",{css:rb(r,e.disabled),"aria-label":e.caption,"aria-disabled":e.disabled,children:e.caption})]})]}),i?null:ye(y.ItemIndicator,{css:ob(r)})]}),e.children&&"expanded"===r?ye(y.ItemAddon,{css:(t=e.disabled,$e`
|
|
856
866
|
width: 100%;
|
|
857
867
|
border-top: ${Be(100)} solid
|
|
858
868
|
${ze("neutral",300)};
|
|
@@ -860,7 +870,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
|
|
|
860
870
|
padding: 0;
|
|
861
871
|
padding-top: ${He(200)};
|
|
862
872
|
color: ${t?ze("neutral",500):"inherit"};
|
|
863
|
-
`),children:e.children}):null]},`${e.label}-${e.value}`);var t,n}))})}),sb=$e`
|
|
873
|
+
`),children:e.children}):null]},`${e.label}-${e.value}`);var t,n,s,a}))})}),sb=$e`
|
|
864
874
|
.ds-radio-item-indicator {
|
|
865
875
|
width: ${He(500)};
|
|
866
876
|
height: ${He(500)};
|
|
@@ -3208,7 +3218,7 @@ function DO(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
|
|
|
3208
3218
|
button {
|
|
3209
3219
|
width: calc(48% - 1.5rem);
|
|
3210
3220
|
}
|
|
3211
|
-
`,YA=({theme:e="light",variant:t,navigationSection:n,utilitySection:r,actionsSection:o,linkRouter:i,isOpen:s,setIsOpen:a,pathname:l,resolvedLabels:c})=>{const d="condensed"===t,[u,h]=le(void 0),[p,f]=le(-1),m=ae(null),g=ae([]),v=i;return be(we,{children:[ye("div",{css:BA(s,d),children:s&&be("div",{css:FA,children:[be("div",{style:{overflowY:"scroll",width:"100%",height:"100%",paddingBottom:"4.5rem"},children:[r?ye("div",{css:qA(e),children:r?.map((e=>ye("div",{className:"ds-utility-item",children:e})))}):null,n?ye("div",{css:WA,children:n.map(((e,t)=>e.link?ye(v,{to:e.link,href:e.link,onClick:()=>{h(void 0),f(-1),a(!1)},css:KA(l===e.link),children:e.label},e.label):be("button",{css:ZA,type:"button",ref:e=>{g.current[t]=e},onClick:()=>{e.items&&(h(e),f(t),setTimeout((()=>{m.current?.focus()}),100))},children:[e.label,e.items?ye(Qm,{rotate:"270",color:"var(--chakra-colors-neutral-700)"}):null]},e.label)))}):null]}),o?ye("div",{css:XA,children:o.map((e=>ye(Wm,{...e,onClick:t=>{e?.onClick?.(t),h(void 0),f(-1),a(!1)}},e.ariaLabel)))}):null]})}),ye("div",{css:GA(!!u?.items),children:u?.items?be(we,{children:[be("div",{css:JA,children:[be("button",{type:"button",onClick:()=>{h(void 0),f(-1),g.current[p]?.focus()},"aria-label":c.goBackLabel,css:jA(e),ref:m,children:[ye(Qm,{rotate:"90",color:"var(--chakra-colors-neutral-700)"}),u?.label]}),be("button",{type:"button",onClick:()=>{h(void 0),f(-1),a(!1)},"aria-label":c.closeMenuLabel,css:jA(e),children:[c.closeButtonText,ye(tg,{height:"1rem",width:"1rem"})]})]}),ye("div",{css:UA,children:u?.items?.map((e=>ye(v,{to:e.link,href:e.link,css:KA(),onClick:()=>{h(void 0),f(-1),a(!1)},children:e.label},e.label)))})]}):null})]})},QA=1023,eN=({variant:e="default",theme:t="light",logo:n,linkRouter:r,pathname:o,navigationSection:i,utilitySection:s,actionsSection:a,maxWidth:l,fixed:c,onNavbarHeightChange:d,backgroundColor:u,labels:h})=>{const p=qm("Navbar",h),f=ae(null),m=ae(null),g=ae(null),[v,b]=le(!1),[y,w]=le(-1),[C,x]=le("undefined"!=typeof window&&window?.innerWidth<=QA),[k,$]=le(!1),S=r,E=fe((()=>{if(m.current&&f.current&&g.current){const e=f.current.getBoundingClientRect(),t=m.current.getBoundingClientRect(),n=g.current.getBoundingClientRect();t.width,e.width,window.innerWidth<=QA||window.innerWidth<=y?(d?.(96),b(!0)):window.innerWidth>QA&&window.innerWidth<=1440?e.right>=t.left?(d?.(96),b(!0),w(window.innerWidth)):window.innerWidth>y&&(d?.(48),b(!1),w(-1)):(d?.(48),b(!1),w(-1)),v&&(window.innerWidth<=QA||n.right>=t.left?(x(!0),d?.(48)):(x(!1),d?.(96)))}}),[y,v]);de((()=>(E(),window.addEventListener("resize",E),()=>{window.removeEventListener("resize",E)})),[E]);const M="condensed"===e;return be("nav",{css:AA(v&&!C,c,u,t,M),children:[be("div",{css:RA(v&&!C,l,M),children:[be("div",{css:DA(v&&!C||"dark"===t,M),ref:f,children:[n?ye("div",{ref:g,css:PA,children:n}):null,ye("div",{css:IA(v),children:i?.map((e=>e.link?ye(S,{to:e.link,href:e.link,css:zA(o===e.link,t,M),children:e.label},e.label):ye(Fg,{theme:t,label:e.label,fontSize:M?"0.875rem":"1rem",items:e.items||[]},e.label)))})]}),ye("div",{css:VA(M),ref:m,children:C?be("button",{type:"button",onClick:()=>$(!k),"aria-label":p.openMenuLabel,css:jA(t),children:[k?p.closeLabel:p.menuLabel,ye(k?tg:Sg,{height:M?"0.75rem":"1rem",width:M?"0.75rem":"1rem"})]}):be(we,{children:[ye("div",{css:VA(M),children:s?.map(((e,t)=>ye("div",{css:HA(v),children:e},t)))}),a?.length?ye("div",{css:_A(v),children:a.map((e=>ye(Wm,{...e},e.ariaLabel)))}):null]})})]}),v&&!C?ye("div",{css:NA(t,M),children:i?.map((e=>e.link?ye(S,{to:e.link,href:e.link,css:zA(o===e.link,t,M),children:e.label},e.label):ye(Fg,{theme:t,label:e.label,fontSize:M?"0.875rem":"1rem",items:e.items||[]},e.label)))}):null,C?ye(YA,{theme:t,variant:e,navigationSection:i,utilitySection:s,actionsSection:a,linkRouter:r,isOpen:k,setIsOpen:$,pathname:o,resolvedLabels:p}):null]})},tN=$e`
|
|
3221
|
+
`,YA=({theme:e="light",variant:t,navigationSection:n,utilitySection:r,actionsSection:o,linkRouter:i,isOpen:s,setIsOpen:a,pathname:l,resolvedLabels:c})=>{const d="condensed"===t,[u,h]=le(void 0),[p,f]=le(-1),m=ae(null),g=ae([]),v=i;return be(we,{children:[ye("div",{css:BA(s,d),children:s&&be("div",{css:FA,children:[be("div",{style:{overflowY:"scroll",width:"100%",height:"100%",paddingBottom:"4.5rem"},children:[r?ye("div",{css:qA(e),children:r?.map((e=>ye("div",{className:"ds-utility-item",children:e})))}):null,n?ye("div",{css:WA,children:n.map(((e,t)=>e.link?ye(v,{to:e.link,href:e.link,onClick:()=>{h(void 0),f(-1),a(!1)},css:KA(l===e.link),children:e.label},e.label):be("button",{css:ZA,type:"button",ref:e=>{g.current[t]=e},onClick:()=>{e.items&&(h(e),f(t),setTimeout((()=>{m.current?.focus()}),100))},children:[e.label,e.items?ye(Qm,{rotate:"270",color:"var(--chakra-colors-neutral-700)"}):null]},e.label)))}):null]}),o?ye("div",{css:XA,children:o.map((e=>ye(Wm,{...e,onClick:t=>{e?.onClick?.(t),h(void 0),f(-1),a(!1)}},e.ariaLabel)))}):null]})}),ye("div",{css:GA(!!u?.items),children:u?.items?be(we,{children:[be("div",{css:JA,children:[be("button",{type:"button",onClick:()=>{h(void 0),f(-1),g.current[p]?.focus()},"aria-label":c.goBackLabel,css:jA(e),ref:m,children:[ye(Qm,{rotate:"90",color:"var(--chakra-colors-neutral-700)"}),u?.label]}),be("button",{type:"button",onClick:()=>{h(void 0),f(-1),a(!1)},"aria-label":c.closeMenuLabel,css:jA(e),children:[c.closeButtonText,ye(tg,{height:"1rem",width:"1rem"})]})]}),ye("div",{css:UA,children:u?.items?.map((e=>ye(v,{to:e.link,href:e.link,css:KA(),onClick:()=>{h(void 0),f(-1),a(!1)},children:e.label},e.label)))})]}):null})]})},QA=1023,eN=({variant:e="default",theme:t="light",logo:n,linkRouter:r,pathname:o,navigationSection:i,utilitySection:s,actionsSection:a,maxWidth:l,fixed:c,onNavbarHeightChange:d,backgroundColor:u,labels:h})=>{const p=qm("Navbar",h),f=ae(null),m=ae(null),g=ae(null),[v,b]=le(!1),[y,w]=le(-1),[C,x]=le("undefined"!=typeof window&&window?.innerWidth<=QA),[k,$]=le(!1),S=r,E=fe((()=>{if(m.current&&f.current&&g.current){const e=f.current.getBoundingClientRect(),t=m.current.getBoundingClientRect(),n=g.current.getBoundingClientRect();t.width,e.width,window.innerWidth<=QA||window.innerWidth<=y?(d?.(96),b(!0)):window.innerWidth>QA&&window.innerWidth<=1440?e.right>=t.left?(d?.(96),b(!0),w(window.innerWidth)):window.innerWidth>y&&(d?.(48),b(!1),w(-1)):(d?.(48),b(!1),w(-1)),v&&(window.innerWidth<=QA||n.right>=t.left?(x(!0),d?.(48)):(x(!1),d?.(96)))}}),[y,v]);de((()=>(E(),window.addEventListener("resize",E),()=>{window.removeEventListener("resize",E)})),[E]);const M="condensed"===e;return be("nav",{css:AA(v&&!C,c,u,t,M),children:[be("div",{css:RA(v&&!C,l,M),children:[be("div",{css:DA(v&&!C||"dark"===t,M),ref:f,children:[n?ye("div",{ref:g,css:PA,children:n}):null,ye("div",{css:IA(v),children:i?.map((e=>e.link?ye(S,{to:e.link,href:e.link,css:zA(o===e.link,t,M),children:e.label},e.label):ye(Fg,{theme:t,label:e.label,fontSize:M?"0.875rem":"1rem",items:e.items||[]},e.label)))})]}),ye("div",{css:VA(M),ref:m,children:C?be("button",{type:"button",onClick:()=>$(!k),"aria-label":k?p.closeMenuLabel:p.openMenuLabel,"aria-expanded":k,css:jA(t),children:[k?p.closeLabel:p.menuLabel,ye(k?tg:Sg,{height:M?"0.75rem":"1rem",width:M?"0.75rem":"1rem"})]}):be(we,{children:[ye("div",{css:VA(M),children:s?.map(((e,t)=>ye("div",{css:HA(v),children:e},t)))}),a?.length?ye("div",{css:_A(v),children:a.map((e=>ye(Wm,{...e},e.ariaLabel)))}):null]})})]}),v&&!C?ye("div",{css:NA(t,M),children:i?.map((e=>e.link?ye(S,{to:e.link,href:e.link,css:zA(o===e.link,t,M),children:e.label},e.label):ye(Fg,{theme:t,label:e.label,fontSize:M?"0.875rem":"1rem",items:e.items||[]},e.label)))}):null,C?ye(YA,{theme:t,variant:e,navigationSection:i,utilitySection:s,actionsSection:a,linkRouter:r,isOpen:k,setIsOpen:$,pathname:o,resolvedLabels:p}):null]})},tN=$e`
|
|
3212
3222
|
width: ${He(1600)};
|
|
3213
3223
|
height: 100%;
|
|
3214
3224
|
z-index: 100;
|