@worldresources/wri-design-systems 2.194.6 → 2.195.1
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 +60 -50
- package/dist/index.d.ts +7 -3
- package/dist/index.esm.js +61 -51
- 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;
|
|
@@ -3932,4 +3942,4 @@ function _E(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
|
|
|
3932
3942
|
border: ${j(100)} solid ${w("neutral",300)};
|
|
3933
3943
|
border-radius: ${$(300)};
|
|
3934
3944
|
${s?`background: ${s};`:""}
|
|
3935
|
-
`)}):r.jsx("div",{css:pw,children:e?.map(((e,n)=>r.jsx("div",{"data-test":`${e}-${t?.[n]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${t?.[n]}`)))}),r.jsx("div",{css:fw,children:t?.map((e=>r.jsx("div",{style:{width:o?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:mw,children:e})},e)))}),n&&n.length?r.jsx("div",{css:fw,children:n.map((e=>r.jsx("div",{style:{width:o?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:gw,style:{width:"100%"},children:e})},e)))}):null]});var s},exports.Search=({placeholder:t,disabled:o,size:i="default",options:s=[],resultsMaxHeight:a=50,isLoading:l=!1,displayResults:c="text",onSelect:d,onQueryChange:h,onClear:p,renderResults:f,labels:m})=>{const g=Ef("Search",m),[v,b]=n.useState(""),{open:y,onOpen:x,onClose:C}=e.useDisclosure(),[k,S]=n.useState(s),[$,j]=n.useState(-1),[E,M]=n.useState(!1),T=n.useRef(null),O=`search-results-${n.useId()}`,L=e=>{const t=s.find((t=>t.id===e||t.label===e));t&&(d?.(t),b(""),C())};n.useEffect((()=>{if(h?.(v),!v)return void S(s);const e=s.filter((e=>e.id?.toLowerCase().includes(v.toLowerCase())||e.label.toLowerCase().includes(v.toLowerCase())||e.caption?.toLowerCase().includes(v.toLowerCase()))).map((e=>({id:e.id,label:e.label,caption:e.caption,variant:"select",icon:e.icon,onItemClick:()=>L(e.id||e.label)})));S(e),x()}),[v]),n.useEffect((()=>{function e(e){y&&T.current&&!T.current.contains(e.target)&&C()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[y]);const A=v.length?r.jsx(sg,{onClick:()=>{b(""),p?.()}}):null,R="none"!==c&&!!v.length&&k.length>0&&y;let N=w("neutral",500);o?N=w("neutral",500):E&&(N=w("primary",700));const D="small"===i?"1rem":"1.25rem",I=u(a);return r.jsxs("div",{ref:T,style:{position:"relative",width:"100%"},children:[r.jsx(e.InputGroup,{startElement:r.jsx(hm,{width:D,height:D,fill:N}),endElement:A,children:r.jsx(Ym,{autoComplete:"off",placeholder:t||g.filterPlaceholder,onChange:e=>{const{value:t}=e.target;b(t)},onFocus:()=>M(!0),onBlur:()=>M(!1),value:v,label:"",style:{paddingLeft:"2.5rem"},type:"search","aria-label":t||g.filterAriaLabel,"aria-expanded":R,"aria-controls":O,role:"combobox","aria-autocomplete":"list",disabled:o,size:i,noMarginBottom:!0,onKeyDown:e=>{if(R){if("ArrowDown"===e.key&&(e.preventDefault(),j((e=>Math.min(e+1,k.length-1)))),"ArrowUp"===e.key&&(e.preventDefault(),j((e=>Math.max(e-1,0)))),"Enter"===e.key&&(e.preventDefault(),$>=0)){const e=k[$];L(e.id||e.label)}"Escape"===e.key&&C()}}})}),(R||l&&!!v.length)&&"custom"===c&&f&&!l&&f({items:k,highlightedIndex:$,query:v,onSelect:L}),(R||l&&!!v.length)&&r.jsx(e.Portal,{container:T,children:r.jsxs(e.Box,{position:"absolute",width:"100%",backgroundColor:"white",border:"custom"===c?"none":"0.0625rem solid",borderColor:"gray.200",borderRadius:"md",zIndex:1e3,overflowY:"auto",maxHeight:I,children:[l&&r.jsx(e.Box,{padding:"1rem",children:r.jsx(e.Spinner,{})}),"text"===c&&!l&&r.jsx(bO,{highlightedIndex:$,items:k,query:v,onSelect:L}),"list"===c&&!l&&r.jsx(Ow,{items:k,highlightedIndex:$})]})})]})},exports.Select=Pv,exports.Sheet=({header:e,content:t,footer:o,open:i=!1,onClose:s,minimizedHeight:a,midHeight:l=200,maxFullHeight:c,defaultSnap:d="minimized",className:u,blocking:h,zIndex:p=1e3})=>{const f=n.useRef(null),m=n.useRef([]),[g,v]=n.useState(null),b=window.innerWidth>768,y=m.current;let x="Expand sheet";if(null!=g){const e=wT(g,y);e>0&&e<y.length-1?x="Make full screen":e===y.length-1&&(x="Expanded sheet")}const w=!(null==g||!y.length||wT(g,y)!==y.length-1);return r.jsx(bT,{ref:f,css:xT(!!e,p),className:u,open:i,onDismiss:s,header:r.jsxs("div",{children:[r.jsx("button",{type:"button",disabled:w,"aria-label":x,css:yT,onKeyDown:e=>{if("Enter"!==e.key&&" "!==e.key)return;e.preventDefault();const t=y[y.length-1];if(b)return void f.current?.snapTo?.((()=>t));const n=g??y[0];let r=y.findIndex((e=>e>n));-1===r&&(r=y.length-1);const o=y[r];f.current?.snapTo?.((()=>o))},children:r.jsx("div",{})}),r.jsx("span",{"aria-live":"polite",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)"},children:x}),e]}),footer:o,snapPoints:({headerHeight:e,maxHeight:t,footerHeight:n})=>{const r=[20,a||e,l+(o?n:0),c||t-t/6];return m.current=r,r},onSpringEnd:()=>{const e=f.current?.height;e&&v(e)},defaultSnap:({headerHeight:e,maxHeight:t,footerHeight:n})=>{let r=20;return"minimized"===d?r=a||e:"mid"===d?r=l+(o?n:0):"full"===d&&(r=c||t-t/6),r},blocking:h,children:i?t:null})},exports.SimpleMapPin=({onClick:e,triggerRef:n,showFocusState:r,count:o,mode:i,variant:s="simple-pin"})=>t.jsx(vb,{count:o,mode:i,onClick:e,ref:n,showFocusState:r,variant:s}),exports.Slider=Zg,exports.SliderInput=({label:e,caption:t,size:o="default",sliderItem:i,required:s,onChange:a})=>{const[l,c]=n.useState(i.value||[]),d=(e,t)=>{const n=e.target.value,r=[...l];let o=n?parseInt(n,10):n;const s=i.min||0,a=i.max||100;o=Number.isNaN(o)?s:o,o=o<s?s:o,o=o>a?a:o,r[t]=o,c(r)},u=(e,t)=>{const n=e.target.value||"0",r=[...l];let o=parseInt(n,10);const s=i.min||0,d=i.max||100;if(o=Number.isNaN(o)?s:o,o=o<s?s:o,o=o>d?d:o,2===l?.length){o=Number.isNaN(o)?s:o;const e=l[0],n=l[1];0===t?(o=o<s?s:o,o=o>n?n:o):1===t&&(o=o<e?e:o,o=o>d?d:o)}r[t]=o,c(r),a&&a(r)};return r.jsxs("div",{children:[r.jsxs("p",{css:Yv(o),"aria-label":e,children:[s?r.jsx("span",{children:"*"}):null,e]}),t?r.jsx("p",{css:Qv(o),"aria-label":t,children:t}):null,r.jsxs("div",{css:eb,children:[i.step&&i.marks?r.jsx(Pv,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"5.625rem"},value:[`${l?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),a&&a(t)}}):r.jsx(Ym,{"aria-label":e,min:i.min,max:i.max,value:l?.[0],type:"number",onChange:e=>d(e,0),onBlur:e=>u(e,0),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}),r.jsx(Zg,{css:{},...i,value:l,"aria-label":2===l?.length?[`${e} minimum`,`${e} maximum`]:[e],onValueChangeEnd:e=>{c(e.value),a&&a(e.value)}}),2===l?.length?r.jsx(Ym,{"aria-label":e,min:i.min,max:i.max,value:l?.[1],type:"number",onChange:e=>d(e,1),onBlur:e=>u(e,1),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:t,labels:n})=>{const o=Ef("StepProgressIndicator",n);return r.jsxs("div",{css:WO,children:[e.map(((e,n)=>r.jsxs("div",{css:UO,children:[r.jsx("button",{css:KO(t>=n+1,t<n+1),type:"button",onClick:e.onClick,"aria-current":t===n+1,"aria-disabled":t<n+1,disabled:t<n+1,"aria-label":o.currentStepLabel(n+1,e.label||"",t>n+1),"data-active":t>=n+1,children:t>n+1?r.jsx(Rf,{height:"1rem",width:"1rem"}):n+1}),e.label?r.jsx("p",{css:GO(t===n+1),children:e.label}):null]},`${e.label}-${n}`))),r.jsx("div",{css:ZO,children:r.jsx("div",{css:JO})})]})},exports.Switch=Xg,exports.TabBar=({variant:t="panel",defaultValue:o,tabs:i,onTabClick:s,activationMode:a="manual"})=>{const[l,c]=n.useState(mO(i,o)||0);return r.jsx("div",{css:cO(t),children:r.jsx(e.Tabs.Root,{width:"full",defaultValue:o||i?.[0]?.value,onValueChange:({value:e})=>{return c(mO(i,t=e)),void(s&&s(t));var t},activationMode:a,children:r.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((o,i)=>r.jsxs(n.Fragment,{children:["view"===t&&1===i&&"left"===gO(l)?r.jsx("div",{css:hO}):null,r.jsx(e.Tabs.Trigger,{css:[dO,"view"===t&&pO,"panel"===t&&uO,"transparent"===t&&fO],"aria-label":o["aria-label"]||o.label,...o,children:r.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"0.3125rem",children:[o.icon,o.label]})},o.label),"view"===t&&1===i&&"right"===gO(l)?r.jsx("div",{css:hO}):null]},o.label)))})})})},exports.Table=({columns:o,data:i=[],renderRow:s,striped:a,stickyHeader:l,pagination:c,selectable:d,selectedRows:u,variant:h="default",onSortColumn:p,onPageSizeChange:f,onPageChange:m,onAllItemsSelected:g,onRowSelected:v,loading:b,height:y,labels:x})=>{const C=Ef("Table",x),[k,S]=n.useState({key:"",order:""}),$=n.useRef({}),[j,E]=n.useState({}),[M,T]=n.useState([]),{totalItems:O=i.length,currentPage:L=1,pageSize:A=10,showItemCount:R,showItemCountText:N}=c||{},D=Boolean(p),I=n.useMemo((()=>Gw(i,k,D)),[i,D,k]),P=(e,t)=>{S({key:e,order:t}),p&&p({key:e,order:t})},z=u??M,V=I.length>0&&z.length===I.length,H=z.length>0&&z.length<I.length,B=n.useMemo((()=>(e=>e.reduce(((e,t)=>(e[t.key]=t,e)),{}))(o)),[o]),_=n.useMemo((()=>(e=>e.filter((e=>e.sticky)).map((e=>e.key)))(o)),[o]),F=(e=>e.length>0?e[e.length-1]:void 0)(_),q=n.useCallback((()=>{const e=((e,t)=>{const n={};let r=0;return e.filter((e=>e.sticky)).forEach((e=>{n[e.key]=r,r+=t[e.key]?.offsetWidth||0})),n})(o,$.current);E(e)}),[o]);n.useEffect((()=>{q()}),[q,i.length]),n.useEffect((()=>{const e=()=>{q()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[q]),n.useEffect((()=>{void 0===u&&T((e=>((e,t)=>e.filter((e=>t.some((t=>t.id===e.id)))))(e,i)))}),[i,u]);const W=e=>Kw(j,e.key,F),U=e=>((e,t,n,r)=>({...Uw(e,n),...Kw(t,n,r)}))(B,j,e,F),K=e=>((e,t)=>e.some((e=>e.id===t.id)))(z,e),G=(({columns:n,selectable:r,isRowSelected:o,onRowSelected:i})=>(s,a)=>{const{id:l,name:c}=s;return t.jsxs(e.Table.Row,{className:a?.className,children:[r?t.jsx(e.Table.Cell,{children:t.jsx(kg,{name:`checkbox-${l}`,"aria-label":`Select row ${c||l}`,checked:o(s),onCheckedChange:({checked:e})=>{i(s,e)}})}):null,n.map((n=>t.jsx(e.Table.Cell,{...a?.getCellProps(n.key),children:n.cell?n.cell(s):s?.[n.key]},n.key)))]})})({columns:o,selectable:d,isRowSelected:K,onRowSelected:(e,t)=>{void 0===u&&T((n=>((e,t,n)=>n?e.some((e=>e.id===t.id))?e:[...e,t]:e.filter((e=>e.id!==t.id)))(n,e,t))),v&&v(e,t)}}),Z=s||G;return r.jsxs("div",{children:[r.jsx("div",{css:y?qw(y):void 0,children:r.jsxs(e.Table.Root,{css:Iw(h,l),striped:a,stickyHeader:l,interactive:!0,children:[r.jsx(e.Table.Header,{css:Pw(h),children:r.jsxs(e.Table.Row,{children:[d?r.jsx(e.Table.ColumnHeader,{children:r.jsx(kg,{name:"header-checkbox","aria-label":"Select all rows",checked:V,indeterminate:H,onCheckedChange:({checked:e})=>{void 0===u&&T(e?I:[]),g&&g(e)}})}):null,o.map((t=>{return r.jsx(e.Table.ColumnHeader,{ref:e=>{$.current[t.key]=e},...(n=t.key,Uw(B,n)),role:t.sortable?"columnheader":void 0,"aria-sort":t.sortable&&"asc"===k.order?"ascending":t.sortable&&"desc"===k.order?"descending":void 0,...W(t),children:r.jsxs("div",{css:zw,children:[t.label,t.sortable?r.jsxs("div",{css:Vw,children:[r.jsx(Of,{css:Hw(k.key===t.key&&"asc"===k.order),icon:r.jsx(If,{style:{transform:"rotate(180deg)"}}),onClick:()=>P(t.key,"asc"),"aria-label":C.ascendingLabel}),r.jsx(Of,{css:Hw(k.key===t.key&&"desc"===k.order),icon:r.jsx(If,{}),onClick:()=>P(t.key,"desc"),"aria-label":C.descendingLabel})]}):null]})},t.key);var n}))]})}),r.jsx(e.Table.Body,{css:Fw,children:I.map((e=>r.jsx(n.Fragment,{children:Z(e,{className:K(e)?"selected":void 0,getCellProps:U})},e.id)))})]})}),b?r.jsx("div",{css:Ww,children:r.jsx(e.Spinner,{size:"lg",color:w("primary",500)})}):null,r.jsxs("div",{css:Bw,children:[r.jsx("div",{children:R?r.jsx(ww,{pageSize:A,currentPage:L,totalItems:O,onPageSizeChange:f,showItemCountText:N}):null}),c?r.jsx("div",{css:_w,children:r.jsx(Dw,{totalItems:O,pageSize:A,currentPage:L,onPageChange:m})}):null]})]})},exports.TableCell=Jw,exports.TableRow=Zw,exports.Tag=Nv,exports.TextInput=Ym,exports.Textarea=({label:t,caption:o,placeholder:i,errorMessage:s,required:a,disabled:l,size:c="default",defaultValue:d="",onChange:u,minLength:h,maxLength:p,labels:f,...m})=>{const g=Ef("Textarea",f),[v,b]=n.useState(d),[y,x]=n.useState(!1),[w,C]=n.useState(!1),[k,S]=n.useState(""),$=n.useId(),j=n.useId(),E=n.useId();n.useEffect((()=>{const{length:e}=d;h&&e<h&&e>0?(x(e<h),C(!1),S(g.enterAtLeastChars(h-e))):h&&0===e&&S(g.minChars(h)),p&&e>0?(x(!1),C(e>p),S(g.charsRemaining(p-e))):p&&0===e&&S(g.maxChars(p))}),[]);const M=!!s||y||w,T=[o?$:null,M?j:null,k?E:null].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{css:tb(c),children:[M?r.jsx("div",{css:nb}):null,r.jsxs(e.Field.Root,{required:a,invalid:M,gap:"0",style:{marginLeft:M?"1.1875rem":"0px"},children:[t?r.jsxs(e.Field.Label,{css:rb(c,l),"aria-label":t,children:[r.jsx(e.Field.RequiredIndicator,{"aria-label":g.requiredSymbolLabel}),t,a?"":r.jsx("span",{children:g.optionalSuffix})]}):null,o?r.jsx(e.Field.HelperText,{id:$,css:ob(c,l),children:o}):null,s?r.jsx(e.Field.ErrorText,{id:j,css:sb,"aria-label":`${g.errorPrefix} ${s}`,"aria-live":"polite",children:s}):null,r.jsx(e.Textarea,{placeholder:i,disabled:l,css:ab(c,v,d),onChange:e=>{b(e.target.value);const{length:t}=e.target.value;h&&p?(x(t<h),C(t>p),S(g.charsRemaining(p-t))):h?(x(t<h),C(!1),S(t<h?g.enterAtLeastChars(h-t):"")):p&&(C(t>p),x(!1),S(g.charsRemaining(p-t))),u&&u(e)},value:v,"aria-label":t||i,"aria-describedby":T,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...m}),y&&h?r.jsx(e.Field.ErrorText,{id:j,css:sb,style:{marginTop:"0.5rem",fontSize:"0.75rem",lineHeight:"1rem"},"aria-live":"polite",children:g.needMoreChars(h-v.length)}):null,w&&p?r.jsx(e.Field.ErrorText,{id:j,css:sb,style:{marginTop:"0.5rem",fontSize:"0.75rem",lineHeight:"1rem"},"aria-live":"polite",children:g.tooManyChars(v.length-p)}):null,!k||w||y?null:r.jsx(e.Field.HelperText,{id:E,css:ib,"aria-live":"polite",children:k})]})]})},exports.Toast=({labels:t})=>{const n=Ef("Toast",t);return Object.keys(rL).map((t=>r.jsx(e.Portal,{children:r.jsx(e.Toaster,{toaster:rL[t],insetInline:{mdDown:"4"},children:o=>r.jsxs(e.Toast.Root,{css:XO,width:{md:"sm"},children:[r.jsxs(e.Stack,{flexDirection:"row",className:"ds-toast-icon-container",children:["info"===o.type?o.meta?.icon?o.meta.icon:r.jsx(Df,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===o.type?r.jsx(e.Spinner,{size:"lg",borderWidth:"0.1875rem",color:"var(--chakra-colors-primary-500)"}):null,"success"===o.type?o.meta?.icon?o.meta.icon:r.jsx(_f,{color:"var(--chakra-colors-success-500)"}):null,"warning"===o.type?o.meta?.icon?o.meta.icon:r.jsx(Ff,{color:"var(--chakra-colors-warning-500)"}):null,"error"===o.type?o.meta?.icon?o.meta.icon:r.jsx(qf,{color:"var(--chakra-colors-error-500)"}):null,r.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[r.jsx(e.Toast.Title,{css:YO,"aria-label":`${o.title}`,children:o.title}),o.description?r.jsx(e.Toast.Title,{css:QO,"aria-label":`${o.description}`,children:o.description}):null]})]}),o.action||o.meta?.closable?r.jsxs(e.Stack,{flexDirection:"row",children:[o.action?r.jsx(Mf,{css:eL,label:o.action.label,size:"small",variant:"info"===o.type?"primary":"secondary",onClick:()=>{o?.action?.onClick&&o.action.onClick(),rL[t].dismiss()}}):null,o.meta?.closable?r.jsx(Mf,{css:tL,label:o.meta.closableLabel,"aria-label":o.meta?.closableLabel||n.dismissLabel,leftIcon:r.jsx(zf,{height:"0.625rem!",width:"0.625rem!"}),size:"small",variant:"secondary",onClick:()=>{o.meta?.onClose&&o.meta.onClose(),rL[t].dismiss()}}):null]}):null]})})},t)))},exports.Toolbar=ug,exports.Tooltip=Tm,exports.designSystemStyles=x,exports.designSystemStylesForTailwind=y,exports.getThemedBorderWidth=j,exports.getThemedColor=w,exports.getThemedFontSize=C,exports.getThemedLineHeight=S,exports.getThemedRadius=$,exports.getThemedSpacing=k,exports.showToast=e=>{rL[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel,onClose:e.onClose},...e})};
|
|
3945
|
+
`)}):r.jsx("div",{css:pw,children:e?.map(((e,n)=>r.jsx("div",{"data-test":`${e}-${t?.[n]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${t?.[n]}`)))}),r.jsx("div",{css:fw,children:t?.map((e=>r.jsx("div",{style:{width:o?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:mw,children:e})},e)))}),n&&n.length?r.jsx("div",{css:fw,children:n.map((e=>r.jsx("div",{style:{width:o?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:gw,style:{width:"100%"},children:e})},e)))}):null]});var s},exports.Search=({placeholder:t,disabled:o,size:i="default",options:s=[],resultsMaxHeight:a=50,isLoading:l=!1,displayResults:c="text",onSelect:d,onQueryChange:h,onClear:p,renderResults:f,labels:m})=>{const g=Ef("Search",m),[v,b]=n.useState(""),{open:y,onOpen:x,onClose:C}=e.useDisclosure(),[k,S]=n.useState(s),[$,j]=n.useState(-1),[E,M]=n.useState(!1),T=n.useRef(null),O=`search-results-${n.useId()}`,L=e=>{const t=s.find((t=>t.id===e||t.label===e));t&&(d?.(t),b(""),C())};n.useEffect((()=>{if(h?.(v),!v)return void S(s);const e=s.filter((e=>e.id?.toLowerCase().includes(v.toLowerCase())||e.label.toLowerCase().includes(v.toLowerCase())||e.caption?.toLowerCase().includes(v.toLowerCase()))).map((e=>({id:e.id,label:e.label,caption:e.caption,variant:"select",icon:e.icon,onItemClick:()=>L(e.id||e.label)})));S(e),x()}),[v]),n.useEffect((()=>{function e(e){y&&T.current&&!T.current.contains(e.target)&&C()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[y]);const A=v.length?r.jsx(sg,{onClick:()=>{b(""),p?.()}}):null,R="none"!==c&&!!v.length&&k.length>0&&y;let N=w("neutral",500);o?N=w("neutral",500):E&&(N=w("primary",700));const D="small"===i?"1rem":"1.25rem",I=u(a);return r.jsxs("div",{ref:T,style:{position:"relative",width:"100%"},children:[r.jsx(e.InputGroup,{startElement:r.jsx(hm,{width:D,height:D,fill:N}),endElement:A,children:r.jsx(Ym,{autoComplete:"off",placeholder:t||g.filterPlaceholder,onChange:e=>{const{value:t}=e.target;b(t)},onFocus:()=>M(!0),onBlur:()=>M(!1),value:v,label:"",style:{paddingLeft:"2.5rem"},type:"search","aria-label":t||g.filterAriaLabel,"aria-expanded":R,"aria-controls":O,role:"combobox","aria-autocomplete":"list",disabled:o,size:i,noMarginBottom:!0,onKeyDown:e=>{if(R){if("ArrowDown"===e.key&&(e.preventDefault(),j((e=>Math.min(e+1,k.length-1)))),"ArrowUp"===e.key&&(e.preventDefault(),j((e=>Math.max(e-1,0)))),"Enter"===e.key&&(e.preventDefault(),$>=0)){const e=k[$];L(e.id||e.label)}"Escape"===e.key&&C()}}})}),(R||l&&!!v.length)&&"custom"===c&&f&&!l&&f({items:k,highlightedIndex:$,query:v,onSelect:L}),(R||l&&!!v.length)&&r.jsx(e.Portal,{container:T,children:r.jsxs(e.Box,{position:"absolute",width:"100%",backgroundColor:"white",border:"custom"===c?"none":"0.0625rem solid",borderColor:"gray.200",borderRadius:"md",zIndex:1e3,overflowY:"auto",maxHeight:I,children:[l&&r.jsx(e.Box,{padding:"1rem",children:r.jsx(e.Spinner,{})}),"text"===c&&!l&&r.jsx(bO,{highlightedIndex:$,items:k,query:v,onSelect:L}),"list"===c&&!l&&r.jsx(Ow,{items:k,highlightedIndex:$})]})})]})},exports.Select=Pv,exports.Sheet=({header:e,content:t,footer:o,open:i=!1,onClose:s,minimizedHeight:a,midHeight:l=200,maxFullHeight:c,defaultSnap:d="minimized",className:u,blocking:h,zIndex:p=1e3})=>{const f=n.useRef(null),m=n.useRef([]),[g,v]=n.useState(null),b=window.innerWidth>768,y=m.current;let x="Expand sheet";if(null!=g){const e=wT(g,y);e>0&&e<y.length-1?x="Make full screen":e===y.length-1&&(x="Expanded sheet")}const w=!(null==g||!y.length||wT(g,y)!==y.length-1);return r.jsx(bT,{ref:f,css:xT(!!e,p),className:u,open:i,onDismiss:s,header:r.jsxs("div",{children:[r.jsx("button",{type:"button",disabled:w,"aria-label":x,css:yT,onKeyDown:e=>{if("Enter"!==e.key&&" "!==e.key)return;e.preventDefault();const t=y[y.length-1];if(b)return void f.current?.snapTo?.((()=>t));const n=g??y[0];let r=y.findIndex((e=>e>n));-1===r&&(r=y.length-1);const o=y[r];f.current?.snapTo?.((()=>o))},children:r.jsx("div",{})}),r.jsx("span",{"aria-live":"polite",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)"},children:x}),e]}),footer:o,snapPoints:({headerHeight:e,maxHeight:t,footerHeight:n})=>{const r=[20,a||e,l+(o?n:0),c||t-t/6];return m.current=r,r},onSpringEnd:()=>{const e=f.current?.height;e&&v(e)},defaultSnap:({headerHeight:e,maxHeight:t,footerHeight:n})=>{let r=20;return"minimized"===d?r=a||e:"mid"===d?r=l+(o?n:0):"full"===d&&(r=c||t-t/6),r},blocking:h,children:i?t:null})},exports.SimpleMapPin=({onClick:e,triggerRef:n,showFocusState:r,count:o,mode:i,variant:s="simple-pin"})=>t.jsx(vb,{count:o,mode:i,onClick:e,ref:n,showFocusState:r,variant:s}),exports.Slider=Zg,exports.SliderInput=({label:e,caption:t,size:o="default",sliderItem:i,required:s,onChange:a})=>{const[l,c]=n.useState(i.value||[]),d=(e,t)=>{const n=e.target.value,r=[...l];let o=n?parseInt(n,10):n;const s=i.min||0,a=i.max||100;o=Number.isNaN(o)?s:o,o=o<s?s:o,o=o>a?a:o,r[t]=o,c(r)},u=(e,t)=>{const n=e.target.value||"0",r=[...l];let o=parseInt(n,10);const s=i.min||0,d=i.max||100;if(o=Number.isNaN(o)?s:o,o=o<s?s:o,o=o>d?d:o,2===l?.length){o=Number.isNaN(o)?s:o;const e=l[0],n=l[1];0===t?(o=o<s?s:o,o=o>n?n:o):1===t&&(o=o<e?e:o,o=o>d?d:o)}r[t]=o,c(r),a&&a(r)};return r.jsxs("div",{children:[r.jsxs("p",{css:Yv(o),"aria-label":e,children:[s?r.jsx("span",{children:"*"}):null,e]}),t?r.jsx("p",{css:Qv(o),"aria-label":t,children:t}):null,r.jsxs("div",{css:eb,children:[i.step&&i.marks?r.jsx(Pv,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"5.625rem"},value:[`${l?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),a&&a(t)}}):r.jsx(Ym,{"aria-label":e,min:i.min,max:i.max,value:l?.[0],type:"number",onChange:e=>d(e,0),onBlur:e=>u(e,0),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}),r.jsx(Zg,{css:{},...i,value:l,"aria-label":2===l?.length?[`${e} minimum`,`${e} maximum`]:[e],onValueChangeEnd:e=>{c(e.value),a&&a(e.value)}}),2===l?.length?r.jsx(Ym,{"aria-label":e,min:i.min,max:i.max,value:l?.[1],type:"number",onChange:e=>d(e,1),onBlur:e=>u(e,1),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:t,labels:n})=>{const o=Ef("StepProgressIndicator",n);return r.jsxs("div",{css:WO,children:[e.map(((e,n)=>r.jsxs("div",{css:UO,children:[r.jsx("button",{css:KO(t>=n+1,t<n+1),type:"button",onClick:e.onClick,"aria-current":t===n+1,"aria-disabled":t<n+1,disabled:t<n+1,"aria-label":o.currentStepLabel(n+1,e.label||"",t>n+1),"data-active":t>=n+1,children:t>n+1?r.jsx(Rf,{height:"1rem",width:"1rem"}):n+1}),e.label?r.jsx("p",{css:GO(t===n+1),children:e.label}):null]},`${e.label}-${n}`))),r.jsx("div",{css:ZO,children:r.jsx("div",{css:JO})})]})},exports.Switch=Xg,exports.TabBar=({variant:t="panel",defaultValue:o,tabs:i,onTabClick:s,activationMode:a="manual"})=>{const[l,c]=n.useState(mO(i,o)||0);return r.jsx("div",{css:cO(t),children:r.jsx(e.Tabs.Root,{width:"full",defaultValue:o||i?.[0]?.value,onValueChange:({value:e})=>{return c(mO(i,t=e)),void(s&&s(t));var t},activationMode:a,children:r.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((o,i)=>r.jsxs(n.Fragment,{children:["view"===t&&1===i&&"left"===gO(l)?r.jsx("div",{css:hO}):null,r.jsx(e.Tabs.Trigger,{css:[dO,"view"===t&&pO,"panel"===t&&uO,"transparent"===t&&fO],"aria-label":o["aria-label"]||o.label,...o,children:r.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"0.3125rem",children:[o.icon,o.label]})},o.label),"view"===t&&1===i&&"right"===gO(l)?r.jsx("div",{css:hO}):null]},o.label)))})})})},exports.Table=({columns:o,data:i=[],renderRow:s,striped:a,stickyHeader:l,pagination:c,selectable:d,selectedRows:u,variant:h="default",onSortColumn:p,onPageSizeChange:f,onPageChange:m,onAllItemsSelected:g,onRowSelected:v,loading:b,height:y,labels:x})=>{const C=Ef("Table",x),[k,S]=n.useState({key:"",order:""}),$=n.useRef({}),[j,E]=n.useState({}),[M,T]=n.useState([]),{totalItems:O=i.length,currentPage:L=1,pageSize:A=10,showItemCount:R,showItemCountText:N}=c||{},D=Boolean(p),I=n.useMemo((()=>Gw(i,k,D)),[i,D,k]),P=(e,t)=>{S({key:e,order:t}),p&&p({key:e,order:t})},z=u??M,V=I.length>0&&z.length===I.length,H=z.length>0&&z.length<I.length,B=n.useMemo((()=>(e=>e.reduce(((e,t)=>(e[t.key]=t,e)),{}))(o)),[o]),_=n.useMemo((()=>(e=>e.filter((e=>e.sticky)).map((e=>e.key)))(o)),[o]),F=(e=>e.length>0?e[e.length-1]:void 0)(_),q=n.useCallback((()=>{const e=((e,t)=>{const n={};let r=0;return e.filter((e=>e.sticky)).forEach((e=>{n[e.key]=r,r+=t[e.key]?.offsetWidth||0})),n})(o,$.current);E(e)}),[o]);n.useEffect((()=>{q()}),[q,i.length]),n.useEffect((()=>{const e=()=>{q()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[q]),n.useEffect((()=>{void 0===u&&T((e=>((e,t)=>{const n=e.filter((e=>t.some((t=>t.id===e.id)))),r=n.length===e.length&&n.every(((t,n)=>t.id===e[n]?.id));return r?e:n})(e,i)))}),[i,u]);const W=e=>Kw(j,e.key,F),U=e=>((e,t,n,r)=>({...Uw(e,n),...Kw(t,n,r)}))(B,j,e,F),K=e=>((e,t)=>e.some((e=>e.id===t.id)))(z,e),G=(({columns:n,selectable:r,isRowSelected:o,onRowSelected:i})=>(s,a)=>{const{id:l,name:c}=s;return t.jsxs(e.Table.Row,{className:a?.className,children:[r?t.jsx(e.Table.Cell,{children:t.jsx(kg,{name:`checkbox-${l}`,"aria-label":`Select row ${c||l}`,checked:o(s),onCheckedChange:({checked:e})=>{i(s,e)}})}):null,n.map((n=>t.jsx(e.Table.Cell,{...a?.getCellProps(n.key),children:n.cell?n.cell(s):s?.[n.key]},n.key)))]})})({columns:o,selectable:d,isRowSelected:K,onRowSelected:(e,t)=>{void 0===u&&T((n=>((e,t,n)=>n?e.some((e=>e.id===t.id))?e:[...e,t]:e.filter((e=>e.id!==t.id)))(n,e,t))),v&&v(e,t)}}),Z=s||G;return r.jsxs("div",{children:[r.jsx("div",{css:y?qw(y):void 0,children:r.jsxs(e.Table.Root,{css:Iw(h,l),striped:a,stickyHeader:l,interactive:!0,children:[r.jsx(e.Table.Header,{css:Pw(h),children:r.jsxs(e.Table.Row,{children:[d?r.jsx(e.Table.ColumnHeader,{children:r.jsx(kg,{name:"header-checkbox","aria-label":"Select all rows",checked:V,indeterminate:H,onCheckedChange:({checked:e})=>{void 0===u&&T(e?I:[]),g&&g(e)}})}):null,o.map((t=>{return r.jsx(e.Table.ColumnHeader,{ref:e=>{$.current[t.key]=e},...(n=t.key,Uw(B,n)),role:t.sortable?"columnheader":void 0,"aria-sort":t.sortable&&"asc"===k.order?"ascending":t.sortable&&"desc"===k.order?"descending":void 0,...W(t),children:r.jsxs("div",{css:zw,children:[t.label,t.sortable?r.jsxs("div",{css:Vw,children:[r.jsx(Of,{css:Hw(k.key===t.key&&"asc"===k.order),icon:r.jsx(If,{style:{transform:"rotate(180deg)"}}),onClick:()=>P(t.key,"asc"),"aria-label":C.ascendingLabel}),r.jsx(Of,{css:Hw(k.key===t.key&&"desc"===k.order),icon:r.jsx(If,{}),onClick:()=>P(t.key,"desc"),"aria-label":C.descendingLabel})]}):null]})},t.key);var n}))]})}),r.jsx(e.Table.Body,{css:Fw,children:I.map((e=>r.jsx(n.Fragment,{children:Z(e,{className:K(e)?"selected":void 0,getCellProps:U})},e.id)))})]})}),b?r.jsx("div",{css:Ww,children:r.jsx(e.Spinner,{size:"lg",color:w("primary",500)})}):null,r.jsxs("div",{css:Bw,children:[r.jsx("div",{children:R?r.jsx(ww,{pageSize:A,currentPage:L,totalItems:O,onPageSizeChange:f,showItemCountText:N}):null}),c?r.jsx("div",{css:_w,children:r.jsx(Dw,{totalItems:O,pageSize:A,currentPage:L,onPageChange:m})}):null]})]})},exports.TableCell=Jw,exports.TableRow=Zw,exports.Tag=Nv,exports.TextInput=Ym,exports.Textarea=({label:t,caption:o,placeholder:i,errorMessage:s,required:a,disabled:l,size:c="default",defaultValue:d="",onChange:u,minLength:h,maxLength:p,labels:f,...m})=>{const g=Ef("Textarea",f),[v,b]=n.useState(d),[y,x]=n.useState(!1),[w,C]=n.useState(!1),[k,S]=n.useState(""),$=n.useId(),j=n.useId(),E=n.useId();n.useEffect((()=>{const{length:e}=d;h&&e<h&&e>0?(x(e<h),C(!1),S(g.enterAtLeastChars(h-e))):h&&0===e&&S(g.minChars(h)),p&&e>0?(x(!1),C(e>p),S(g.charsRemaining(p-e))):p&&0===e&&S(g.maxChars(p))}),[]);const M=!!s||y||w,T=[o?$:null,M?j:null,k?E:null].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{css:tb(c),children:[M?r.jsx("div",{css:nb}):null,r.jsxs(e.Field.Root,{required:a,invalid:M,gap:"0",style:{marginLeft:M?"1.1875rem":"0px"},children:[t?r.jsxs(e.Field.Label,{css:rb(c,l),"aria-label":t,children:[r.jsx(e.Field.RequiredIndicator,{"aria-label":g.requiredSymbolLabel}),t,a?"":r.jsx("span",{children:g.optionalSuffix})]}):null,o?r.jsx(e.Field.HelperText,{id:$,css:ob(c,l),children:o}):null,s?r.jsx(e.Field.ErrorText,{id:j,css:sb,"aria-label":`${g.errorPrefix} ${s}`,"aria-live":"polite",children:s}):null,r.jsx(e.Textarea,{placeholder:i,disabled:l,css:ab(c,v,d),onChange:e=>{b(e.target.value);const{length:t}=e.target.value;h&&p?(x(t<h),C(t>p),S(g.charsRemaining(p-t))):h?(x(t<h),C(!1),S(t<h?g.enterAtLeastChars(h-t):"")):p&&(C(t>p),x(!1),S(g.charsRemaining(p-t))),u&&u(e)},value:v,"aria-label":t||i,"aria-describedby":T,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...m}),y&&h?r.jsx(e.Field.ErrorText,{id:j,css:sb,style:{marginTop:"0.5rem",fontSize:"0.75rem",lineHeight:"1rem"},"aria-live":"polite",children:g.needMoreChars(h-v.length)}):null,w&&p?r.jsx(e.Field.ErrorText,{id:j,css:sb,style:{marginTop:"0.5rem",fontSize:"0.75rem",lineHeight:"1rem"},"aria-live":"polite",children:g.tooManyChars(v.length-p)}):null,!k||w||y?null:r.jsx(e.Field.HelperText,{id:E,css:ib,"aria-live":"polite",children:k})]})]})},exports.Toast=({labels:t})=>{const n=Ef("Toast",t);return Object.keys(rL).map((t=>r.jsx(e.Portal,{children:r.jsx(e.Toaster,{toaster:rL[t],insetInline:{mdDown:"4"},children:o=>r.jsxs(e.Toast.Root,{css:XO,width:{md:"sm"},children:[r.jsxs(e.Stack,{flexDirection:"row",className:"ds-toast-icon-container",children:["info"===o.type?o.meta?.icon?o.meta.icon:r.jsx(Df,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===o.type?r.jsx(e.Spinner,{size:"lg",borderWidth:"0.1875rem",color:"var(--chakra-colors-primary-500)"}):null,"success"===o.type?o.meta?.icon?o.meta.icon:r.jsx(_f,{color:"var(--chakra-colors-success-500)"}):null,"warning"===o.type?o.meta?.icon?o.meta.icon:r.jsx(Ff,{color:"var(--chakra-colors-warning-500)"}):null,"error"===o.type?o.meta?.icon?o.meta.icon:r.jsx(qf,{color:"var(--chakra-colors-error-500)"}):null,r.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[r.jsx(e.Toast.Title,{css:YO,"aria-label":`${o.title}`,children:o.title}),o.description?r.jsx(e.Toast.Title,{css:QO,"aria-label":`${o.description}`,children:o.description}):null]})]}),o.action||o.meta?.closable?r.jsxs(e.Stack,{flexDirection:"row",children:[o.action?r.jsx(Mf,{css:eL,label:o.action.label,size:"small",variant:"info"===o.type?"primary":"secondary",onClick:()=>{o?.action?.onClick&&o.action.onClick(),rL[t].dismiss()}}):null,o.meta?.closable?r.jsx(Mf,{css:tL,label:o.meta.closableLabel,"aria-label":o.meta?.closableLabel||n.dismissLabel,leftIcon:r.jsx(zf,{height:"0.625rem!",width:"0.625rem!"}),size:"small",variant:"secondary",onClick:()=>{o.meta?.onClose&&o.meta.onClose(),rL[t].dismiss()}}):null]}):null]})})},t)))},exports.Toolbar=ug,exports.Tooltip=Tm,exports.designSystemStyles=x,exports.designSystemStylesForTailwind=y,exports.getThemedBorderWidth=j,exports.getThemedColor=w,exports.getThemedFontSize=C,exports.getThemedLineHeight=S,exports.getThemedRadius=$,exports.getThemedSpacing=k,exports.showToast=e=>{rL[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel,onClose:e.onClose},...e})};
|
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)};
|
|
@@ -2519,7 +2529,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
|
|
|
2519
2529
|
display: flex;
|
|
2520
2530
|
align-items: center;
|
|
2521
2531
|
justify-content: center;
|
|
2522
|
-
`,Rk=(e,t)=>{const n=e[t]?.width;return n?{width:n,minWidth:n}:{}},Dk=(e,t,n)=>{const r=e[t];return void 0===r?{}:{"data-sticky":"start","data-sticky-last":t===n?"true":void 0,left:`${r}px`}},Pk=(e,t,n)=>{if(n||!t.key)return e;const{key:r,order:o}=t,i="asc"===o;return[...e].sort(((e,t)=>((e,t,n)=>{if(null==e&&null==t)return 0;if(null==e)return 1;if(null==t)return-1;if("string"==typeof e&&"string"==typeof t)return n?e.localeCompare(t):t.localeCompare(e);if("number"==typeof e&&"number"==typeof t)return n?e-t:t-e;const r=String(e),o=String(t);return n?r.localeCompare(o):o.localeCompare(r)})(e?.[r],t?.[r],i)))},Ik=({columns:e,data:t=[],renderRow:n,striped:r,stickyHeader:i,pagination:s,selectable:a,selectedRows:l,variant:c="default",onSortColumn:d,onPageSizeChange:u,onPageChange:h,onAllItemsSelected:p,onRowSelected:f,loading:m,height:g,labels:v})=>{const b=qm("Table",v),[y,w]=le({key:"",order:""}),C=ae({}),[x,k]=le({}),[$,S]=le([]),{totalItems:E=t.length,currentPage:M=1,pageSize:T=10,showItemCount:O,showItemCountText:L}=s||{},A=Boolean(d),N=ie((()=>Pk(t,y,A)),[t,A,y]),R=(e,t)=>{w({key:e,order:t}),d&&d({key:e,order:t})},D=l??$,P=N.length>0&&D.length===N.length,z=D.length>0&&D.length<N.length,V=ie((()=>(e=>e.reduce(((e,t)=>(e[t.key]=t,e)),{}))(e)),[e]),H=ie((()=>(e=>e.filter((e=>e.sticky)).map((e=>e.key)))(e)),[e]),_=(e=>e.length>0?e[e.length-1]:void 0)(H),j=fe((()=>{const t=((e,t)=>{const n={};let r=0;return e.filter((e=>e.sticky)).forEach((e=>{n[e.key]=r,r+=t[e.key]?.offsetWidth||0})),n})(e,C.current);k(t)}),[e]);de((()=>{j()}),[j,t.length]),de((()=>{const e=()=>{j()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[j]),de((()=>{void 0===l&&S((e=>((e,t)=>e.filter((e=>t.some((t=>t.id===e.id)))))(e,t)))}),[t,l]);const B=e=>Dk(x,e.key,_),F=e=>((e,t,n,r)=>({...Rk(e,n),...Dk(t,n,r)}))(V,x,e,_),q=e=>((e,t)=>e.some((e=>e.id===t.id)))(D,e),W=(({columns:e,selectable:t,isRowSelected:n,onRowSelected:r})=>(o,i)=>{const{id:s,name:a}=o;return Q(I.Row,{className:i?.className,children:[t?Y(I.Cell,{children:Y(Wv,{name:`checkbox-${s}`,"aria-label":`Select row ${a||s}`,checked:n(o),onCheckedChange:({checked:e})=>{r(o,e)}})}):null,e.map((e=>Y(I.Cell,{...i?.getCellProps(e.key),children:e.cell?e.cell(o):o?.[e.key]},e.key)))]})})({columns:e,selectable:a,isRowSelected:q,onRowSelected:(e,t)=>{void 0===l&&S((n=>((e,t,n)=>n?e.some((e=>e.id===t.id))?e:[...e,t]:e.filter((e=>e.id!==t.id)))(n,e,t))),f&&f(e,t)}}),U=n||W;return be("div",{children:[ye("div",{css:g?Ak(g):void 0,children:be(I.Root,{css:kk(c,i),striped:r,stickyHeader:i,interactive:!0,children:[ye(I.Header,{css:$k(c),children:be(I.Row,{children:[a?ye(I.ColumnHeader,{children:ye(Wv,{name:"header-checkbox","aria-label":"Select all rows",checked:P,indeterminate:z,onCheckedChange:({checked:e})=>{void 0===l&&S(e?N:[]),p&&p(e)}})}):null,e.map((e=>{return ye(I.ColumnHeader,{ref:t=>{C.current[e.key]=t},...(t=e.key,Rk(V,t)),role:e.sortable?"columnheader":void 0,"aria-sort":e.sortable&&"asc"===y.order?"ascending":e.sortable&&"desc"===y.order?"descending":void 0,...B(e),children:be("div",{css:Sk,children:[e.label,e.sortable?be("div",{css:Ek,children:[ye(Km,{css:Mk(y.key===e.key&&"asc"===y.order),icon:ye(Qm,{style:{transform:"rotate(180deg)"}}),onClick:()=>R(e.key,"asc"),"aria-label":b.ascendingLabel}),ye(Km,{css:Mk(y.key===e.key&&"desc"===y.order),icon:ye(Qm,{}),onClick:()=>R(e.key,"desc"),"aria-label":b.descendingLabel})]}):null]})},e.key);var t}))]})}),ye(I.Body,{css:Lk,children:N.map((e=>ye(ne.Fragment,{children:U(e,{className:q(e)?"selected":void 0,getCellProps:F})},e.id)))})]})}),m?ye("div",{css:Nk,children:ye(o,{size:"lg",color:ze("primary",500)})}):null,be("div",{css:Tk,children:[ye("div",{children:O?ye(lk,{pageSize:T,currentPage:M,totalItems:E,onPageSizeChange:u,showItemCountText:L}):null}),s?ye("div",{css:Ok,children:ye(xk,{totalItems:E,pageSize:T,currentPage:M,onPageChange:h})}):null]})]})},zk=I.Row,Vk=I.Cell,Hk=$e`
|
|
2532
|
+
`,Rk=(e,t)=>{const n=e[t]?.width;return n?{width:n,minWidth:n}:{}},Dk=(e,t,n)=>{const r=e[t];return void 0===r?{}:{"data-sticky":"start","data-sticky-last":t===n?"true":void 0,left:`${r}px`}},Pk=(e,t,n)=>{if(n||!t.key)return e;const{key:r,order:o}=t,i="asc"===o;return[...e].sort(((e,t)=>((e,t,n)=>{if(null==e&&null==t)return 0;if(null==e)return 1;if(null==t)return-1;if("string"==typeof e&&"string"==typeof t)return n?e.localeCompare(t):t.localeCompare(e);if("number"==typeof e&&"number"==typeof t)return n?e-t:t-e;const r=String(e),o=String(t);return n?r.localeCompare(o):o.localeCompare(r)})(e?.[r],t?.[r],i)))},Ik=({columns:e,data:t=[],renderRow:n,striped:r,stickyHeader:i,pagination:s,selectable:a,selectedRows:l,variant:c="default",onSortColumn:d,onPageSizeChange:u,onPageChange:h,onAllItemsSelected:p,onRowSelected:f,loading:m,height:g,labels:v})=>{const b=qm("Table",v),[y,w]=le({key:"",order:""}),C=ae({}),[x,k]=le({}),[$,S]=le([]),{totalItems:E=t.length,currentPage:M=1,pageSize:T=10,showItemCount:O,showItemCountText:L}=s||{},A=Boolean(d),N=ie((()=>Pk(t,y,A)),[t,A,y]),R=(e,t)=>{w({key:e,order:t}),d&&d({key:e,order:t})},D=l??$,P=N.length>0&&D.length===N.length,z=D.length>0&&D.length<N.length,V=ie((()=>(e=>e.reduce(((e,t)=>(e[t.key]=t,e)),{}))(e)),[e]),H=ie((()=>(e=>e.filter((e=>e.sticky)).map((e=>e.key)))(e)),[e]),_=(e=>e.length>0?e[e.length-1]:void 0)(H),j=fe((()=>{const t=((e,t)=>{const n={};let r=0;return e.filter((e=>e.sticky)).forEach((e=>{n[e.key]=r,r+=t[e.key]?.offsetWidth||0})),n})(e,C.current);k(t)}),[e]);de((()=>{j()}),[j,t.length]),de((()=>{const e=()=>{j()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[j]),de((()=>{void 0===l&&S((e=>((e,t)=>{const n=e.filter((e=>t.some((t=>t.id===e.id)))),r=n.length===e.length&&n.every(((t,n)=>t.id===e[n]?.id));return r?e:n})(e,t)))}),[t,l]);const B=e=>Dk(x,e.key,_),F=e=>((e,t,n,r)=>({...Rk(e,n),...Dk(t,n,r)}))(V,x,e,_),q=e=>((e,t)=>e.some((e=>e.id===t.id)))(D,e),W=(({columns:e,selectable:t,isRowSelected:n,onRowSelected:r})=>(o,i)=>{const{id:s,name:a}=o;return Q(I.Row,{className:i?.className,children:[t?Y(I.Cell,{children:Y(Wv,{name:`checkbox-${s}`,"aria-label":`Select row ${a||s}`,checked:n(o),onCheckedChange:({checked:e})=>{r(o,e)}})}):null,e.map((e=>Y(I.Cell,{...i?.getCellProps(e.key),children:e.cell?e.cell(o):o?.[e.key]},e.key)))]})})({columns:e,selectable:a,isRowSelected:q,onRowSelected:(e,t)=>{void 0===l&&S((n=>((e,t,n)=>n?e.some((e=>e.id===t.id))?e:[...e,t]:e.filter((e=>e.id!==t.id)))(n,e,t))),f&&f(e,t)}}),U=n||W;return be("div",{children:[ye("div",{css:g?Ak(g):void 0,children:be(I.Root,{css:kk(c,i),striped:r,stickyHeader:i,interactive:!0,children:[ye(I.Header,{css:$k(c),children:be(I.Row,{children:[a?ye(I.ColumnHeader,{children:ye(Wv,{name:"header-checkbox","aria-label":"Select all rows",checked:P,indeterminate:z,onCheckedChange:({checked:e})=>{void 0===l&&S(e?N:[]),p&&p(e)}})}):null,e.map((e=>{return ye(I.ColumnHeader,{ref:t=>{C.current[e.key]=t},...(t=e.key,Rk(V,t)),role:e.sortable?"columnheader":void 0,"aria-sort":e.sortable&&"asc"===y.order?"ascending":e.sortable&&"desc"===y.order?"descending":void 0,...B(e),children:be("div",{css:Sk,children:[e.label,e.sortable?be("div",{css:Ek,children:[ye(Km,{css:Mk(y.key===e.key&&"asc"===y.order),icon:ye(Qm,{style:{transform:"rotate(180deg)"}}),onClick:()=>R(e.key,"asc"),"aria-label":b.ascendingLabel}),ye(Km,{css:Mk(y.key===e.key&&"desc"===y.order),icon:ye(Qm,{}),onClick:()=>R(e.key,"desc"),"aria-label":b.descendingLabel})]}):null]})},e.key);var t}))]})}),ye(I.Body,{css:Lk,children:N.map((e=>ye(ne.Fragment,{children:U(e,{className:q(e)?"selected":void 0,getCellProps:F})},e.id)))})]})}),m?ye("div",{css:Nk,children:ye(o,{size:"lg",color:ze("primary",500)})}):null,be("div",{css:Tk,children:[ye("div",{children:O?ye(lk,{pageSize:T,currentPage:M,totalItems:E,onPageSizeChange:u,showItemCountText:L}):null}),s?ye("div",{css:Ok,children:ye(xk,{totalItems:E,pageSize:T,currentPage:M,onPageChange:h})}):null]})]})},zk=I.Row,Vk=I.Cell,Hk=$e`
|
|
2523
2533
|
border: ${Be(100)} solid ${ze("neutral",300)};
|
|
2524
2534
|
`,_k=$e`
|
|
2525
2535
|
padding: ${He(400)};
|
|
@@ -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;
|