@code-sherpas/pharos-react 0.20.1 → 0.20.3
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 +8 -1
- package/RULES.md +1 -1
- package/dist/components/Combobox.module.js +19 -19
- package/dist/components/Combobox.module.js.map +1 -1
- package/dist/components/Dialog.d.ts +3 -3
- package/dist/components/Dialog.js.map +1 -1
- package/dist/components/Dialog.module.js +6 -6
- package/dist/components/Dialog.module.js.map +1 -1
- package/dist/components/DropdownMenu.module.js +6 -6
- package/dist/components/DropdownMenu.module.js.map +1 -1
- package/dist/components/Popover.module.js +4 -4
- package/dist/components/Popover.module.js.map +1 -1
- package/dist/components/Select.module.js +13 -13
- package/dist/components/Select.module.js.map +1 -1
- package/dist/components/Sheet.d.ts +3 -2
- package/dist/components/Sheet.d.ts.map +1 -1
- package/dist/components/Sheet.js.map +1 -1
- package/dist/components/Sheet.module.js +10 -10
- package/dist/components/Sheet.module.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,14 @@ React component library for Code Sherpas. Consumes
|
|
|
4
4
|
[`@code-sherpas/pharos-tokens`](https://github.com/code-sherpas/pharos-tokens)
|
|
5
5
|
as a peer dependency. Built with Vite library mode, React 19 and CSS Modules.
|
|
6
6
|
The published bundle ships zero Tailwind, zero PostCSS preflight and zero
|
|
7
|
-
global resets — see Decision D9 in
|
|
7
|
+
global resets — see Decision D9 in [the master plan](https://app.notion.com/p/38c1751eee108174b5b0ea1633c773ed) (Notion).
|
|
8
|
+
|
|
9
|
+
Part of **Pharos**, Code Sherpas' design system: its visual direction and the
|
|
10
|
+
values of every token are decided in the
|
|
11
|
+
[Pharos design system artifact](https://claude.ai/artifact/AzsXQ2SHXhPJ9BhRSoGTbV),
|
|
12
|
+
the components here and the tokens in [`pharos-tokens`](https://github.com/code-sherpas/pharos-tokens), and the program's documentation (decisions, roadmap,
|
|
13
|
+
[quality standard](https://app.notion.com/p/3fa1751eee1081debcc6db3ac657e3ac))
|
|
14
|
+
lives in Notion → [Programa Pharos](https://app.notion.com/p/38c1751eee1081a3834ff68c3485c03c).
|
|
8
15
|
|
|
9
16
|
## What's in this package
|
|
10
17
|
|
package/RULES.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Rules for consumers of `@code-sherpas/pharos-react`
|
|
2
2
|
|
|
3
3
|
This file ships with the package (`files` includes `RULES.md`). Every
|
|
4
|
-
consumer — `alexandria-web-application
|
|
4
|
+
consumer — `alexandria-web-application` and any future
|
|
5
5
|
app — must follow these rules.
|
|
6
6
|
|
|
7
7
|
## 1. Only Pharos components for UI
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
var e = {
|
|
2
|
-
control: "
|
|
3
|
-
chips: "
|
|
4
|
-
input: "
|
|
5
|
-
inputSizeSm: "
|
|
6
|
-
inputSizeMd: "
|
|
7
|
-
inputSizeLg: "
|
|
8
|
-
chipsInput: "
|
|
9
|
-
trigger: "
|
|
10
|
-
clear: "
|
|
11
|
-
chip: "
|
|
12
|
-
chipRemove: "
|
|
13
|
-
positioner: "
|
|
14
|
-
content: "
|
|
15
|
-
item: "
|
|
16
|
-
itemText: "
|
|
17
|
-
itemIndicator: "
|
|
18
|
-
empty: "
|
|
19
|
-
label: "
|
|
20
|
-
separator: "
|
|
2
|
+
control: "_control_1owey_5",
|
|
3
|
+
chips: "_chips_1owey_61",
|
|
4
|
+
input: "_input_1owey_70",
|
|
5
|
+
inputSizeSm: "_inputSizeSm_1owey_99",
|
|
6
|
+
inputSizeMd: "_inputSizeMd_1owey_104",
|
|
7
|
+
inputSizeLg: "_inputSizeLg_1owey_109",
|
|
8
|
+
chipsInput: "_chipsInput_1owey_117",
|
|
9
|
+
trigger: "_trigger_1owey_124",
|
|
10
|
+
clear: "_clear_1owey_125",
|
|
11
|
+
chip: "_chip_1owey_61",
|
|
12
|
+
chipRemove: "_chipRemove_1owey_169",
|
|
13
|
+
positioner: "_positioner_1owey_204",
|
|
14
|
+
content: "_content_1owey_193",
|
|
15
|
+
item: "_item_1owey_14",
|
|
16
|
+
itemText: "_itemText_1owey_14",
|
|
17
|
+
itemIndicator: "_itemIndicator_1owey_275",
|
|
18
|
+
empty: "_empty_1owey_299",
|
|
19
|
+
label: "_label_1owey_309",
|
|
20
|
+
separator: "_separator_1owey_316"
|
|
21
21
|
};
|
|
22
22
|
//#endregion
|
|
23
23
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.module.js","names":[],"sources":["../../src/components/Combobox.module.css"],"sourcesContent":["/* Combobox.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles the bordered control (single-select input group\n * and multi-select chips container share the `.control` chrome), the chips,\n * the floating listbox surface, and the option rows.\n *\n * The control border tone is `neutral-500` for the same WCAG 1.4.11 reason\n * Input and Select use it (D10). The popup surface chrome and the option /\n * group / separator styling mirror Select exactly — Select and Combobox are\n * the two halves of the selection family and read as one system.\n *\n * Anchor-width: the popup takes `width: var(--anchor-width)` so the listbox\n * matches the control exactly — long options truncate (see `.itemText`)\n * rather than ballooning wider than the field (the Ant / Mantine / MUI /\n * shadcn-combobox default). `max-height: var(--available-height)` clamps it\n * to the viewport. Both vars come from Base UI's Positioner. Consumers\n * needing a wider panel override `width` via `className`. */\n\n/* === Control (Combobox.InputGroup, single) and chips box (Combobox.Chips,\n * multiple) — same bordered chrome === */\n.control {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--pharos-spacing-2);\n width: 100%;\n\n border: 1px solid var(--pharos-color-neutral-500);\n border-radius: var(--pharos-radius-md);\n background-color: var(--pharos-color-base-white);\n\n /* Set the Pharos sans stack on the box so everything inside it — chips,\n * the input — shares one typography. Without this the chips fall back to\n * the user-agent serif/system font (the bundle ships no global font), so\n * they read in a different typeface than the input. Same reason Input sets\n * font-family explicitly. */\n font-family: var(--pharos-font-family-sans);\n\n transition-property: border-color, box-shadow;\n transition-duration: var(--pharos-duration-normal);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n/* Lift the focus ring to the control when the inner input is focused, so the\n * whole bordered box reads as the focused control (the input itself carries\n * no border). */\n.control:focus-within {\n border-color: var(--pharos-color-primary-600);\n box-shadow:\n 0 0 0 2px var(--pharos-color-base-white),\n 0 0 0 4px var(--pharos-color-primary-600);\n}\n\n.control[aria-invalid='true'],\n.control:has([aria-invalid='true']) {\n border-color: var(--pharos-color-semantic-error-fg);\n}\n\n/* The multi-select chips box wraps its chips and grows vertically. */\n.chips {\n flex-wrap: wrap;\n gap: var(--pharos-spacing-1);\n padding: var(--pharos-spacing-1) var(--pharos-spacing-2);\n}\n\n/* === Bare input (Combobox.Input) ===\n * Carries no border of its own — the surrounding `.control` / `.chips` box\n * owns the chrome. Grows to fill the row. */\n.input {\n appearance: none;\n -webkit-appearance: none;\n\n flex: 1 1 auto;\n min-width: 0;\n margin: 0;\n border: none;\n outline: none;\n background: transparent;\n color: var(--pharos-color-neutral-900);\n\n font-family: var(--pharos-font-family-sans);\n font-size: var(--pharos-font-size-sm);\n font-weight: var(--pharos-font-weight-regular);\n line-height: 1.25;\n}\n\n.input::placeholder {\n color: var(--pharos-color-neutral-500);\n opacity: 1;\n}\n\n.input:disabled {\n cursor: not-allowed;\n}\n\n/* Standalone single-select input gets the same padding/height grid as Input\n * so it sits flush with other fields. */\n.inputSizeSm {\n height: var(--pharos-spacing-8);\n padding: 0 var(--pharos-spacing-3);\n}\n\n.inputSizeMd {\n height: var(--pharos-spacing-10);\n padding: 0 var(--pharos-spacing-4);\n}\n\n.inputSizeLg {\n height: var(--pharos-spacing-12);\n padding: 0 var(--pharos-spacing-6);\n font-size: var(--pharos-font-size-base);\n}\n\n/* Inside the chips box the input is a flexible filler — no fixed height, it\n * shares the row with the chips. */\n.chipsInput {\n height: var(--pharos-spacing-7);\n padding: 0 var(--pharos-spacing-1);\n flex: 1 1 4rem;\n}\n\n/* === Trigger (chevron) and clear button === */\n.trigger,\n.clear {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--pharos-spacing-6);\n height: var(--pharos-spacing-6);\n margin-inline-end: var(--pharos-spacing-1);\n padding: 0;\n border: none;\n background: transparent;\n color: var(--pharos-color-neutral-500);\n cursor: default;\n}\n\n.trigger svg,\n.clear svg {\n width: 1rem;\n height: 1rem;\n}\n\n.trigger[data-popup-open] svg {\n transform: rotate(180deg);\n transition: transform var(--pharos-duration-fast) var(--pharos-easing-out);\n}\n\n/* === Chip (Combobox.Chip) === */\n.chip {\n display: inline-flex;\n align-items: center;\n gap: var(--pharos-spacing-1);\n padding: 0 var(--pharos-spacing-1) 0 var(--pharos-spacing-2);\n height: var(--pharos-spacing-6);\n\n border-radius: var(--pharos-radius-sm);\n background-color: var(--pharos-color-neutral-100);\n color: var(--pharos-color-neutral-900);\n font-size: var(--pharos-font-size-xs);\n}\n\n.chip[data-highlighted] {\n background-color: var(--pharos-color-neutral-200);\n}\n\n.chipRemove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--pharos-spacing-4);\n height: var(--pharos-spacing-4);\n padding: 0;\n border: none;\n border-radius: var(--pharos-radius-sm);\n background: transparent;\n color: var(--pharos-color-neutral-500);\n cursor: default;\n}\n\n.chipRemove:hover {\n color: var(--pharos-color-neutral-900);\n}\n\n.chipRemove svg {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n/* === Positioner (Combobox.Positioner) ===\n * z-index lives here, not on `.content` (the Popup). Base UI's Positioner\n * anchors with `transform`, which creates a stacking context — so a z-index\n * on the inner Popup is trapped inside it and cannot rise above a host-app\n * overlay (e.g. a drawer with its own z-index). The z-index must sit on the\n * Positioner itself.\n *\n * Sourced from `--pharos-z-index-popover` (no hardcoded value — NON-NEGOTIABLE\n * rule 1). The fallback suits apps with no high z-index scale; an app whose\n * own overlays sit higher (drawers, modals) raises every Pharos popup at once\n * by overriding `--pharos-z-index-popover` in `:root`. */\n.positioner {\n z-index: var(--pharos-z-index-popover, 1000);\n}\n\n/* === Floating surface (Combobox.Popup) — mirrors Select === */\n.content {\n box-sizing: border-box;\n width: var(--anchor-width);\n max-height: var(--available-height);\n overflow-y: auto;\n padding: var(--pharos-spacing-1);\n\n background-color: var(--pharos-color-base-white);\n border: 1px solid var(--pharos-color-neutral-200);\n border-radius: var(--pharos-radius-md);\n box-shadow: var(--pharos-shadow-lg);\n\n font-family: var(--pharos-font-family-sans);\n font-size: var(--pharos-font-size-sm);\n color: var(--pharos-color-neutral-900);\n\n outline: none;\n\n transform-origin: var(--transform-origin);\n transition-property: opacity, transform;\n transition-duration: var(--pharos-duration-fast);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n.content[data-starting-style],\n.content[data-ending-style] {\n opacity: 0;\n transform: scale(0.96);\n}\n\n/* === Option (Combobox.Item) === */\n.item {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--pharos-spacing-2);\n\n padding: var(--pharos-spacing-2) var(--pharos-spacing-3);\n border-radius: var(--pharos-radius-sm);\n\n color: var(--pharos-color-neutral-900);\n cursor: default;\n user-select: none;\n outline: none;\n scroll-margin: var(--pharos-spacing-1);\n}\n\n.item[data-highlighted] {\n background-color: var(--pharos-color-neutral-100);\n}\n\n.item[data-disabled] {\n color: var(--pharos-color-neutral-400);\n pointer-events: none;\n}\n\n.itemText {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.itemIndicator {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n color: var(--pharos-color-primary-600);\n}\n\n.itemIndicator svg {\n width: 1rem;\n height: 1rem;\n}\n\n/* === Empty state (Combobox.Empty) ===\n * Base UI keeps this element mounted even when there ARE results (it is a\n * `role=\"status\"` live region and must not be removed / `display:none`-d, or\n * screen readers miss the \"no results\" announcement) — it only nulls its\n * children. So when results exist the element is present but childless;\n * `:not(:empty)` applies the padding only when a message is actually shown,\n * collapsing the box to zero height otherwise. Without this the empty live\n * region adds a block of padding above the list and the popup looks\n * top-heavy / asymmetric against its bottom edge. */\n.empty {\n color: var(--pharos-color-neutral-500);\n text-align: center;\n}\n\n.empty:not(:empty) {\n padding: var(--pharos-spacing-3);\n}\n\n/* === Group + label + separator (mirror Select) === */\n.label {\n padding: var(--pharos-spacing-2) var(--pharos-spacing-3) var(--pharos-spacing-1);\n font-size: var(--pharos-font-size-xs);\n font-weight: var(--pharos-font-weight-semibold);\n color: var(--pharos-color-neutral-600);\n}\n\n.separator {\n height: 1px;\n margin: var(--pharos-spacing-1) 0;\n background-color: var(--pharos-color-neutral-200);\n}\n\n/* === Touch screens ===\n * iOS Safari zooms the whole page into any text field whose font is smaller\n * than 16px the moment it is focused, and apps used to stop it by forbidding\n * zoom altogether (`maximum-scale=1`), which breaks WCAG 1.4.4. On a coarse\n * pointer every size types at `base` (16px), so the page can stay zoomable. */\n@media (pointer: coarse) {\n .input {\n font-size: var(--pharos-font-size-base);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Combobox.module.js","names":[],"sources":["../../src/components/Combobox.module.css"],"sourcesContent":["/* Combobox.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles the bordered control (single-select input group\n * and multi-select chips container share the `.control` chrome), the chips,\n * the floating listbox surface, and the option rows.\n *\n * The control border tone is `neutral-500` for the same WCAG 1.4.11 reason\n * Input and Select use it (D10). The popup surface chrome and the option /\n * group / separator styling mirror Select exactly — Select and Combobox are\n * the two halves of the selection family and read as one system.\n *\n * Anchor-width: the popup takes `width: var(--anchor-width)` so the listbox\n * matches the control exactly — long options truncate (see `.itemText`)\n * rather than ballooning wider than the field (the Ant / Mantine / MUI /\n * shadcn-combobox default). `max-height: var(--available-height)` clamps it\n * to the viewport. Both vars come from Base UI's Positioner. Consumers\n * needing a wider panel override `width` via `className`. */\n\n/* === Control (Combobox.InputGroup, single) and chips box (Combobox.Chips,\n * multiple) — same bordered chrome === */\n.control {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--pharos-spacing-2);\n width: 100%;\n\n border: 1px solid var(--pharos-color-neutral-500);\n border-radius: var(--pharos-radius-md);\n background-color: var(--pharos-color-base-white);\n\n /* Set the Pharos sans stack on the box so everything inside it — chips,\n * the input — shares one typography. Without this the chips fall back to\n * the user-agent serif/system font (the bundle ships no global font), so\n * they read in a different typeface than the input. Same reason Input sets\n * font-family explicitly. */\n font-family: var(--pharos-font-family-sans);\n\n transition-property: border-color, box-shadow;\n transition-duration: var(--pharos-duration-normal);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n/* Lift the focus ring to the control when the inner input is focused, so the\n * whole bordered box reads as the focused control (the input itself carries\n * no border). */\n.control:focus-within {\n border-color: var(--pharos-color-primary-600);\n box-shadow:\n 0 0 0 2px var(--pharos-color-base-white),\n 0 0 0 4px var(--pharos-color-primary-600);\n}\n\n.control[aria-invalid='true'],\n.control:has([aria-invalid='true']) {\n border-color: var(--pharos-color-semantic-error-fg);\n}\n\n/* The multi-select chips box wraps its chips and grows vertically. */\n.chips {\n flex-wrap: wrap;\n gap: var(--pharos-spacing-1);\n padding: var(--pharos-spacing-1) var(--pharos-spacing-2);\n}\n\n/* === Bare input (Combobox.Input) ===\n * Carries no border of its own — the surrounding `.control` / `.chips` box\n * owns the chrome. Grows to fill the row. */\n.input {\n appearance: none;\n -webkit-appearance: none;\n\n flex: 1 1 auto;\n min-width: 0;\n margin: 0;\n border: none;\n outline: none;\n background: transparent;\n color: var(--pharos-color-neutral-900);\n\n font-family: var(--pharos-font-family-sans);\n font-size: var(--pharos-font-size-sm);\n font-weight: var(--pharos-font-weight-regular);\n line-height: 1.25;\n}\n\n.input::placeholder {\n color: var(--pharos-color-neutral-500);\n opacity: 1;\n}\n\n.input:disabled {\n cursor: not-allowed;\n}\n\n/* Standalone single-select input gets the same padding/height grid as Input\n * so it sits flush with other fields. */\n.inputSizeSm {\n height: var(--pharos-spacing-8);\n padding: 0 var(--pharos-spacing-3);\n}\n\n.inputSizeMd {\n height: var(--pharos-spacing-10);\n padding: 0 var(--pharos-spacing-4);\n}\n\n.inputSizeLg {\n height: var(--pharos-spacing-12);\n padding: 0 var(--pharos-spacing-6);\n font-size: var(--pharos-font-size-base);\n}\n\n/* Inside the chips box the input is a flexible filler — no fixed height, it\n * shares the row with the chips. */\n.chipsInput {\n height: var(--pharos-spacing-7);\n padding: 0 var(--pharos-spacing-1);\n flex: 1 1 4rem;\n}\n\n/* === Trigger (chevron) and clear button === */\n.trigger,\n.clear {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--pharos-spacing-6);\n height: var(--pharos-spacing-6);\n margin-inline-end: var(--pharos-spacing-1);\n padding: 0;\n border: none;\n background: transparent;\n color: var(--pharos-color-neutral-500);\n cursor: default;\n}\n\n.trigger svg,\n.clear svg {\n width: 1rem;\n height: 1rem;\n}\n\n.trigger[data-popup-open] svg {\n transform: rotate(180deg);\n transition: transform var(--pharos-duration-fast) var(--pharos-easing-out);\n}\n\n/* === Chip (Combobox.Chip) === */\n.chip {\n display: inline-flex;\n align-items: center;\n gap: var(--pharos-spacing-1);\n padding: 0 var(--pharos-spacing-1) 0 var(--pharos-spacing-2);\n height: var(--pharos-spacing-6);\n\n border-radius: var(--pharos-radius-sm);\n background-color: var(--pharos-color-neutral-100);\n color: var(--pharos-color-neutral-900);\n font-size: var(--pharos-font-size-xs);\n}\n\n.chip[data-highlighted] {\n background-color: var(--pharos-color-neutral-200);\n}\n\n.chipRemove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--pharos-spacing-4);\n height: var(--pharos-spacing-4);\n padding: 0;\n border: none;\n border-radius: var(--pharos-radius-sm);\n background: transparent;\n color: var(--pharos-color-neutral-500);\n cursor: default;\n}\n\n.chipRemove:hover {\n color: var(--pharos-color-neutral-900);\n}\n\n.chipRemove svg {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n/* === Positioner (Combobox.Positioner) ===\n * z-index lives here, not on `.content` (the Popup). Base UI's Positioner\n * anchors with `transform`, which creates a stacking context — so a z-index\n * on the inner Popup is trapped inside it and cannot rise above a host-app\n * overlay (e.g. a drawer with its own z-index). The z-index must sit on the\n * Positioner itself.\n *\n * Sourced from `--pharos-z-index-popover` (no hardcoded value — NON-NEGOTIABLE\n * rule 1). The fallback is D29's popover layer (1500, above modal 1400), for\n * an app whose pharos-tokens predates it; an app whose own overlays sit higher\n * (drawers, modals) raises every Pharos popup at once by overriding\n * `--pharos-z-index-popover` in `:root`. */\n.positioner {\n z-index: var(--pharos-z-index-popover, 1500);\n}\n\n/* === Floating surface (Combobox.Popup) — mirrors Select === */\n.content {\n box-sizing: border-box;\n width: var(--anchor-width);\n max-height: var(--available-height);\n overflow-y: auto;\n padding: var(--pharos-spacing-1);\n\n background-color: var(--pharos-color-base-white);\n border: 1px solid var(--pharos-color-neutral-200);\n border-radius: var(--pharos-radius-md);\n box-shadow: var(--pharos-shadow-lg);\n\n font-family: var(--pharos-font-family-sans);\n font-size: var(--pharos-font-size-sm);\n color: var(--pharos-color-neutral-900);\n\n outline: none;\n\n transform-origin: var(--transform-origin);\n transition-property: opacity, transform;\n transition-duration: var(--pharos-duration-fast);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n.content[data-starting-style],\n.content[data-ending-style] {\n opacity: 0;\n transform: scale(0.96);\n}\n\n/* === Option (Combobox.Item) === */\n.item {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: var(--pharos-spacing-2);\n\n padding: var(--pharos-spacing-2) var(--pharos-spacing-3);\n border-radius: var(--pharos-radius-sm);\n\n color: var(--pharos-color-neutral-900);\n cursor: default;\n user-select: none;\n outline: none;\n scroll-margin: var(--pharos-spacing-1);\n}\n\n.item[data-highlighted] {\n background-color: var(--pharos-color-neutral-100);\n}\n\n.item[data-disabled] {\n color: var(--pharos-color-neutral-400);\n pointer-events: none;\n}\n\n/* Long options wrap onto as many lines as they need. Cutting them with an\n * ellipsis hides exactly the end that tells similar options apart (a list of\n * timezones: «(GMT-06:00) America/Mexico_City — Central Standard…»). */\n.itemText {\n flex: 1 1 auto;\n min-width: 0;\n overflow-wrap: anywhere;\n white-space: normal;\n}\n\n.itemIndicator {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n /* One line tall, so the check sits on the first line of a wrapped option. */\n block-size: 1lh;\n color: var(--pharos-color-primary-600);\n}\n\n.itemIndicator svg {\n width: 1rem;\n height: 1rem;\n}\n\n/* === Empty state (Combobox.Empty) ===\n * Base UI keeps this element mounted even when there ARE results (it is a\n * `role=\"status\"` live region and must not be removed / `display:none`-d, or\n * screen readers miss the \"no results\" announcement) — it only nulls its\n * children. So when results exist the element is present but childless;\n * `:not(:empty)` applies the padding only when a message is actually shown,\n * collapsing the box to zero height otherwise. Without this the empty live\n * region adds a block of padding above the list and the popup looks\n * top-heavy / asymmetric against its bottom edge. */\n.empty {\n color: var(--pharos-color-neutral-500);\n text-align: center;\n}\n\n.empty:not(:empty) {\n padding: var(--pharos-spacing-3);\n}\n\n/* === Group + label + separator (mirror Select) === */\n.label {\n padding: var(--pharos-spacing-2) var(--pharos-spacing-3) var(--pharos-spacing-1);\n font-size: var(--pharos-font-size-xs);\n font-weight: var(--pharos-font-weight-semibold);\n color: var(--pharos-color-neutral-600);\n}\n\n.separator {\n height: 1px;\n margin: var(--pharos-spacing-1) 0;\n background-color: var(--pharos-color-neutral-200);\n}\n\n/* === Touch screens ===\n * iOS Safari zooms the whole page into any text field whose font is smaller\n * than 16px the moment it is focused, and apps used to stop it by forbidding\n * zoom altogether (`maximum-scale=1`), which breaks WCAG 1.4.4. On a coarse\n * pointer every size types at `base` (16px), so the page can stay zoomable. */\n@media (pointer: coarse) {\n .input {\n font-size: var(--pharos-font-size-base);\n }\n}\n"],"mappings":""}
|
|
@@ -45,9 +45,9 @@ export declare namespace DialogTrigger {
|
|
|
45
45
|
}
|
|
46
46
|
/**
|
|
47
47
|
* The centered panel. Collapses Base UI's `Portal` + `Backdrop` + `Popup`. The
|
|
48
|
-
* backdrop and panel share the `--pharos-z-index-
|
|
49
|
-
*
|
|
50
|
-
*
|
|
48
|
+
* backdrop and panel share the `--pharos-z-index-modal` layer (D29): a modal
|
|
49
|
+
* opened over the dialog paints above it by portal order, and a Select /
|
|
50
|
+
* Popover opened from inside it sits on the higher popover layer.
|
|
51
51
|
*/
|
|
52
52
|
export interface DialogContentProps extends ComponentProps<typeof BaseDialog.Popup> {
|
|
53
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","names":[],"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { cn } from '../lib/cn';\nimport styles from './Dialog.module.css';\n\n/**\n * Centered modal panel (the shadcn **Dialog** contract). Wraps Base UI's\n * `Dialog.*`, which implements the ARIA **dialog** pattern as a **modal**\n * disclosure: `role=\"dialog\"` + `aria-modal`, focus trapped inside the panel,\n * scroll locked, Escape and backdrop-click dismiss, focus returns to the\n * trigger on close.\n *\n * Sibling of `Sheet` (D18): both wrap the same Base UI `Dialog` primitive.\n * Dialog is the **centered** modal (confirmations, short forms, focused\n * tasks); Sheet is the **edge-docked** panel. Distinct from `Popover` (D16,\n * non-modal, anchored) and `DropdownMenu` (D15, menu-button). Naming follows\n * shadcn (`Dialog*`); `DialogContent` collapses Base UI's `Portal` +\n * `Backdrop` + `Popup` into one part, mirroring the other Pharos overlays.\n *\n * @example\n * <Dialog>\n * <DialogTrigger render={<Button intent=\"destructive\">Delete</Button>} />\n * <DialogContent>\n * <DialogHeader>\n * <DialogTitle>Delete project?</DialogTitle>\n * <DialogDescription>This cannot be undone.</DialogDescription>\n * </DialogHeader>\n * <DialogFooter>\n * <DialogClose render={<Button intent=\"ghost\">Cancel</Button>} />\n * <Button intent=\"destructive\" onClick={onDelete}>Delete</Button>\n * </DialogFooter>\n * </DialogContent>\n * </Dialog>\n */\nexport type DialogProps = ComponentProps<typeof BaseDialog.Root>;\n\nexport function Dialog(props: DialogProps) {\n return <BaseDialog.Root {...props} />;\n}\n\nDialog.displayName = 'Dialog';\n\n/**\n * The element that opens the dialog. Renders a native `<button>` by default;\n * pass `render` to compose any control (`render={<Button…/>}`).\n */\nexport type DialogTriggerProps = ComponentProps<typeof BaseDialog.Trigger>;\n\nexport function DialogTrigger(props: DialogTriggerProps) {\n return <BaseDialog.Trigger {...props} />;\n}\n\nDialogTrigger.displayName = 'DialogTrigger';\n\n/**\n * The centered panel. Collapses Base UI's `Portal` + `Backdrop` + `Popup`. The\n * backdrop and panel share the `--pharos-z-index-
|
|
1
|
+
{"version":3,"file":"Dialog.js","names":[],"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { cn } from '../lib/cn';\nimport styles from './Dialog.module.css';\n\n/**\n * Centered modal panel (the shadcn **Dialog** contract). Wraps Base UI's\n * `Dialog.*`, which implements the ARIA **dialog** pattern as a **modal**\n * disclosure: `role=\"dialog\"` + `aria-modal`, focus trapped inside the panel,\n * scroll locked, Escape and backdrop-click dismiss, focus returns to the\n * trigger on close.\n *\n * Sibling of `Sheet` (D18): both wrap the same Base UI `Dialog` primitive.\n * Dialog is the **centered** modal (confirmations, short forms, focused\n * tasks); Sheet is the **edge-docked** panel. Distinct from `Popover` (D16,\n * non-modal, anchored) and `DropdownMenu` (D15, menu-button). Naming follows\n * shadcn (`Dialog*`); `DialogContent` collapses Base UI's `Portal` +\n * `Backdrop` + `Popup` into one part, mirroring the other Pharos overlays.\n *\n * @example\n * <Dialog>\n * <DialogTrigger render={<Button intent=\"destructive\">Delete</Button>} />\n * <DialogContent>\n * <DialogHeader>\n * <DialogTitle>Delete project?</DialogTitle>\n * <DialogDescription>This cannot be undone.</DialogDescription>\n * </DialogHeader>\n * <DialogFooter>\n * <DialogClose render={<Button intent=\"ghost\">Cancel</Button>} />\n * <Button intent=\"destructive\" onClick={onDelete}>Delete</Button>\n * </DialogFooter>\n * </DialogContent>\n * </Dialog>\n */\nexport type DialogProps = ComponentProps<typeof BaseDialog.Root>;\n\nexport function Dialog(props: DialogProps) {\n return <BaseDialog.Root {...props} />;\n}\n\nDialog.displayName = 'Dialog';\n\n/**\n * The element that opens the dialog. Renders a native `<button>` by default;\n * pass `render` to compose any control (`render={<Button…/>}`).\n */\nexport type DialogTriggerProps = ComponentProps<typeof BaseDialog.Trigger>;\n\nexport function DialogTrigger(props: DialogTriggerProps) {\n return <BaseDialog.Trigger {...props} />;\n}\n\nDialogTrigger.displayName = 'DialogTrigger';\n\n/**\n * The centered panel. Collapses Base UI's `Portal` + `Backdrop` + `Popup`. The\n * backdrop and panel share the `--pharos-z-index-modal` layer (D29): a modal\n * opened over the dialog paints above it by portal order, and a Select /\n * Popover opened from inside it sits on the higher popover layer.\n */\nexport interface DialogContentProps extends ComponentProps<typeof BaseDialog.Popup> {}\n\nexport function DialogContent({ className, children, ...rest }: DialogContentProps) {\n return (\n <BaseDialog.Portal>\n <BaseDialog.Backdrop className={styles.backdrop} />\n <BaseDialog.Popup\n data-pharos-slot=\"dialog-content\"\n className={cn(styles.content, className)}\n {...rest}\n >\n {children}\n </BaseDialog.Popup>\n </BaseDialog.Portal>\n );\n}\n\nDialogContent.displayName = 'DialogContent';\n\n/** Groups the title + description at the top of the panel. */\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<'div'> {}\n\nexport function DialogHeader({ className, ...rest }: DialogHeaderProps) {\n return (\n <div data-pharos-slot=\"dialog-header\" className={cn(styles.header, className)} {...rest} />\n );\n}\n\nDialogHeader.displayName = 'DialogHeader';\n\n/**\n * The dialog's accessible name. Renders Base UI's `Dialog.Title`, which wires\n * `aria-labelledby` on the popup — required for the dialog to be announced.\n * Renders as an `<h2>` by default.\n */\nexport type DialogTitleProps = ComponentProps<typeof BaseDialog.Title>;\n\nexport function DialogTitle({ className, ...rest }: DialogTitleProps) {\n return (\n <BaseDialog.Title\n data-pharos-slot=\"dialog-title\"\n className={cn(styles.title, className)}\n {...rest}\n />\n );\n}\n\nDialogTitle.displayName = 'DialogTitle';\n\n/**\n * Supporting copy under the title. Renders Base UI's `Dialog.Description`,\n * which wires `aria-describedby` on the popup. Renders as a `<p>` by default.\n */\nexport type DialogDescriptionProps = ComponentProps<typeof BaseDialog.Description>;\n\nexport function DialogDescription({ className, ...rest }: DialogDescriptionProps) {\n return (\n <BaseDialog.Description\n data-pharos-slot=\"dialog-description\"\n className={cn(styles.description, className)}\n {...rest}\n />\n );\n}\n\nDialogDescription.displayName = 'DialogDescription';\n\n/** Bottom action row, pushed to the panel's end. */\nexport interface DialogFooterProps extends ComponentPropsWithoutRef<'div'> {}\n\nexport function DialogFooter({ className, ...rest }: DialogFooterProps) {\n return (\n <div data-pharos-slot=\"dialog-footer\" className={cn(styles.footer, className)} {...rest} />\n );\n}\n\nDialogFooter.displayName = 'DialogFooter';\n\n/**\n * A button that closes the dialog. Renders Base UI's `Dialog.Close` (a native\n * `<button>`); compose any control via `render`.\n */\nexport type DialogCloseProps = ComponentProps<typeof BaseDialog.Close>;\n\nexport function DialogClose(props: DialogCloseProps) {\n return <BaseDialog.Close data-pharos-slot=\"dialog-close\" {...props} />;\n}\n\nDialogClose.displayName = 'DialogClose';\n"],"mappings":";;;;;;AAsCA,SAAgB,EAAO,GAAoB;CACzC,OAAO,kBAAC,EAAW,MAAZ,EAAiB,GAAI,EAAQ,CAAA;AACtC;AAEA,EAAO,cAAc;AAQrB,SAAgB,EAAc,GAA2B;CACvD,OAAO,kBAAC,EAAW,SAAZ,EAAoB,GAAI,EAAQ,CAAA;AACzC;AAEA,EAAc,cAAc;AAU5B,SAAgB,EAAc,EAAE,cAAW,aAAU,GAAG,KAA4B;CAClF,OACE,kBAAC,EAAW,QAAZ,EAAA,UAAA,CACE,kBAAC,EAAW,UAAZ,EAAqB,WAAW,EAAO,SAAW,CAAA,GAClD,kBAAC,EAAW,OAAZ;EACE,oBAAiB;EACjB,WAAW,EAAG,EAAO,SAAS,CAAS;EACvC,GAAI;EAEH;CACe,CAAA,CACD,EAAA,CAAA;AAEvB;AAEA,EAAc,cAAc;AAK5B,SAAgB,EAAa,EAAE,cAAW,GAAG,KAA2B;CACtE,OACE,kBAAC,OAAD;EAAK,oBAAiB;EAAgB,WAAW,EAAG,EAAO,QAAQ,CAAS;EAAG,GAAI;CAAO,CAAA;AAE9F;AAEA,EAAa,cAAc;AAS3B,SAAgB,EAAY,EAAE,cAAW,GAAG,KAA0B;CACpE,OACE,kBAAC,EAAW,OAAZ;EACE,oBAAiB;EACjB,WAAW,EAAG,EAAO,OAAO,CAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAEA,EAAY,cAAc;AAQ1B,SAAgB,EAAkB,EAAE,cAAW,GAAG,KAAgC;CAChF,OACE,kBAAC,EAAW,aAAZ;EACE,oBAAiB;EACjB,WAAW,EAAG,EAAO,aAAa,CAAS;EAC3C,GAAI;CACL,CAAA;AAEL;AAEA,EAAkB,cAAc;AAKhC,SAAgB,EAAa,EAAE,cAAW,GAAG,KAA2B;CACtE,OACE,kBAAC,OAAD;EAAK,oBAAiB;EAAgB,WAAW,EAAG,EAAO,QAAQ,CAAS;EAAG,GAAI;CAAO,CAAA;AAE9F;AAEA,EAAa,cAAc;AAQ3B,SAAgB,EAAY,GAAyB;CACnD,OAAO,kBAAC,EAAW,OAAZ;EAAkB,oBAAiB;EAAe,GAAI;CAAQ,CAAA;AACvE;AAEA,EAAY,cAAc"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var e = {
|
|
2
|
-
backdrop: "
|
|
3
|
-
content: "
|
|
4
|
-
header: "
|
|
5
|
-
title: "
|
|
6
|
-
description: "
|
|
7
|
-
footer: "
|
|
2
|
+
backdrop: "_backdrop_1gqfj_20",
|
|
3
|
+
content: "_content_1gqfj_34",
|
|
4
|
+
header: "_header_1gqfj_77",
|
|
5
|
+
title: "_title_1gqfj_83",
|
|
6
|
+
description: "_description_1gqfj_91",
|
|
7
|
+
footer: "_footer_1gqfj_98"
|
|
8
8
|
};
|
|
9
9
|
//#endregion
|
|
10
10
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.module.js","names":[],"sources":["../../src/components/Dialog.module.css"],"sourcesContent":["/* Dialog.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles a centered modal panel — the shadcn \"Dialog\"\n * contract over Base UI's `Dialog` (modal: focus trap, scroll lock, backdrop).\n * Sibling of Sheet (D18): same Base UI primitive, but centered with a\n * fade-and-scale transition instead of an edge slide. Motion is driven by Base\n * UI's `data-starting-style` / `data-ending-style` state attributes.\n *\n * z-index: backdrop and panel share `--pharos-z-index-
|
|
1
|
+
{"version":3,"file":"Dialog.module.js","names":[],"sources":["../../src/components/Dialog.module.css"],"sourcesContent":["/* Dialog.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles a centered modal panel — the shadcn \"Dialog\"\n * contract over Base UI's `Dialog` (modal: focus trap, scroll lock, backdrop).\n * Sibling of Sheet (D18): same Base UI primitive, but centered with a\n * fade-and-scale transition instead of an edge slide. Motion is driven by Base\n * UI's `data-starting-style` / `data-ending-style` state attributes.\n *\n * z-index: backdrop and panel share `--pharos-z-index-modal` (decision D29,\n * modal 1400). Sharing one layer is what makes a modal opened over another\n * work: the one opened later is later in the DOM and paints above, backdrop\n * included. A backdrop on a lower layer (overlay 1300) would sit under the\n * first modal's panel and leave it undimmed. A Select, Popover or menu opened\n * from inside the dialog sits on the popover layer (1500), above it.\n * The fallback is D29's value, for a consumer whose pharos-tokens predates it.\n */\n\n/* === Backdrop (Dialog.Backdrop) === */\n.backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--pharos-z-index-modal, 1400);\n background-color: color-mix(in srgb, var(--pharos-color-base-black) 50%, transparent);\n transition: opacity var(--pharos-duration-normal) var(--pharos-easing-out);\n}\n\n.backdrop[data-starting-style],\n.backdrop[data-ending-style] {\n opacity: 0;\n}\n\n/* === Panel (Dialog.Popup) === */\n.content {\n position: fixed;\n top: 50%;\n left: 50%;\n /* Centering lives in the transform; the scale for the open/close motion is\n * composed on top of the same translate (see starting/ending styles). */\n transform: translate(-50%, -50%);\n transform-origin: center;\n z-index: var(--pharos-z-index-modal, 1400);\n\n box-sizing: border-box;\n width: calc(100% - 2 * var(--pharos-spacing-4));\n max-width: 32rem;\n max-height: calc(100dvh - 2 * var(--pharos-spacing-6));\n overflow-y: auto;\n\n display: flex;\n flex-direction: column;\n gap: var(--pharos-spacing-4);\n padding: var(--pharos-spacing-6);\n\n background-color: var(--pharos-color-base-white);\n border-radius: var(--pharos-radius-lg);\n box-shadow: var(--pharos-shadow-xl);\n\n font-family: var(--pharos-font-family-sans);\n font-size: var(--pharos-font-size-sm);\n color: var(--pharos-color-neutral-900);\n\n outline: none;\n\n transition-property: opacity, transform;\n transition-duration: var(--pharos-duration-fast);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n.content[data-starting-style],\n.content[data-ending-style] {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.96);\n}\n\n/* === Slots === */\n.header {\n display: flex;\n flex-direction: column;\n gap: var(--pharos-spacing-1);\n}\n\n.title {\n margin: 0;\n font-size: var(--pharos-font-size-lg);\n font-weight: var(--pharos-font-weight-semibold);\n line-height: 1.4;\n color: var(--pharos-color-neutral-900);\n}\n\n.description {\n margin: 0;\n font-size: var(--pharos-font-size-sm);\n line-height: 1.5;\n color: var(--pharos-color-neutral-600);\n}\n\n.footer {\n display: flex;\n gap: var(--pharos-spacing-2);\n justify-content: flex-end;\n margin-top: auto;\n}\n"],"mappings":""}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var e = {
|
|
2
|
-
positioner: "
|
|
3
|
-
content: "
|
|
4
|
-
item: "
|
|
5
|
-
itemDestructive: "
|
|
6
|
-
separator: "
|
|
7
|
-
label: "
|
|
2
|
+
positioner: "_positioner_yfokk_9",
|
|
3
|
+
content: "_content_yfokk_4",
|
|
4
|
+
item: "_item_yfokk_5",
|
|
5
|
+
itemDestructive: "_itemDestructive_yfokk_114",
|
|
6
|
+
separator: "_separator_yfokk_6",
|
|
7
|
+
label: "_label_yfokk_6"
|
|
8
8
|
};
|
|
9
9
|
//#endregion
|
|
10
10
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.module.js","names":[],"sources":["../../src/components/DropdownMenu.module.css"],"sourcesContent":["/* DropdownMenu.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles the floating surface (`.content`), the\n * action rows (`.item`, with a `destructive` tone), the structural\n * parts (`.separator`, `.label`, `.group`), and the open/close\n * transition driven by Base UI's `data-*` state attributes.\n *\n * z-index lives on `.positioner` (see below). Base UI portals the menu to the\n * end of `<body>`; that floats it above in-flow content, but not above a\n * host-app overlay (drawer/modal) with its own z-index — and a z-index on the\n * Popup is trapped by the Positioner's transform stacking context. The\n * Positioner therefore carries `z-index: var(--pharos-z-index-popover, …)`,\n * the shared scale Combobox / Select / Popover all use now. */\n\n/* === Positioner (Menu.Positioner) ===\n * z-index lives here, not on `.content` (the Popup). Base UI's Positioner\n * anchors with `transform`, which creates a stacking context — so a z-index\n * on the inner Popup is trapped inside it and cannot rise above a host-app\n * overlay (e.g. a drawer with its own z-index). The z-index must sit on the\n * Positioner itself.\n *\n * Sourced from `--pharos-z-index-popover` (no hardcoded value — NON-NEGOTIABLE\n * rule 1). The fallback
|
|
1
|
+
{"version":3,"file":"DropdownMenu.module.js","names":[],"sources":["../../src/components/DropdownMenu.module.css"],"sourcesContent":["/* DropdownMenu.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles the floating surface (`.content`), the\n * action rows (`.item`, with a `destructive` tone), the structural\n * parts (`.separator`, `.label`, `.group`), and the open/close\n * transition driven by Base UI's `data-*` state attributes.\n *\n * z-index lives on `.positioner` (see below). Base UI portals the menu to the\n * end of `<body>`; that floats it above in-flow content, but not above a\n * host-app overlay (drawer/modal) with its own z-index — and a z-index on the\n * Popup is trapped by the Positioner's transform stacking context. The\n * Positioner therefore carries `z-index: var(--pharos-z-index-popover, …)`,\n * the shared scale Combobox / Select / Popover all use now. */\n\n/* === Positioner (Menu.Positioner) ===\n * z-index lives here, not on `.content` (the Popup). Base UI's Positioner\n * anchors with `transform`, which creates a stacking context — so a z-index\n * on the inner Popup is trapped inside it and cannot rise above a host-app\n * overlay (e.g. a drawer with its own z-index). The z-index must sit on the\n * Positioner itself.\n *\n * Sourced from `--pharos-z-index-popover` (no hardcoded value — NON-NEGOTIABLE\n * rule 1). The fallback is D29's popover layer (1500, above modal 1400), for\n * an app whose pharos-tokens predates it; an app whose own overlays sit higher\n * (drawers, modals) raises every Pharos popup at once by overriding\n * `--pharos-z-index-popover` in `:root`. */\n.positioner {\n z-index: var(--pharos-z-index-popover, 1500);\n}\n\n/* === Floating surface (Menu.Popup) === */\n.content {\n box-sizing: border-box;\n min-width: 12rem;\n padding: var(--pharos-spacing-1);\n\n background-color: var(--pharos-color-base-white);\n border: 1px solid var(--pharos-color-neutral-200);\n border-radius: var(--pharos-radius-md);\n box-shadow: var(--pharos-shadow-lg);\n\n font-family: var(--pharos-font-family-sans);\n color: var(--pharos-color-neutral-900);\n\n /* Open/close transition keyed off Base UI's `data-starting-style` /\n * `data-ending-style`. The popup fades and lifts a few pixels from\n * the anchored side — the same motion shadcn / Radix ship. */\n transform-origin: var(--transform-origin);\n transition-property: opacity, transform;\n transition-duration: var(--pharos-duration-fast);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n.content[data-starting-style],\n.content[data-ending-style] {\n opacity: 0;\n transform: scale(0.96);\n}\n\n/* === Action row (Menu.Item) === */\n.item {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--pharos-spacing-2);\n width: 100%;\n padding: var(--pharos-spacing-1-5) var(--pharos-spacing-2);\n\n border-radius: var(--pharos-radius-sm);\n font-size: var(--pharos-font-size-sm);\n font-weight: var(--pharos-font-weight-medium);\n line-height: 1.25;\n color: var(--pharos-color-neutral-700);\n\n cursor: default;\n user-select: none;\n outline: none;\n scroll-margin: var(--pharos-spacing-1);\n\n transition-property: background-color, color;\n transition-duration: var(--pharos-duration-fast);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n/* Base UI marks the active row (keyboard navigation or pointer, when\n * `highlightItemOnHover` is on) with `data-highlighted`. A single\n * highlight state covers both pointer hover and arrow-key focus, so\n * the menu reads identically whichever input drives it. */\n.item[data-highlighted] {\n background-color: var(--pharos-color-neutral-100);\n color: var(--pharos-color-neutral-900);\n}\n\n.item[data-disabled] {\n color: var(--pharos-color-neutral-500);\n opacity: 0.6;\n pointer-events: none;\n}\n\n/* Icons composed inside the row inherit the row colour and size to the\n * text cap height, matching the IconButton `> svg` convention. */\n.item > svg {\n width: 1rem;\n height: 1rem;\n flex-shrink: 0;\n}\n\n/* === Destructive tone ===\n * shadcn ships a `destructive` variant on DropdownMenuItem; Alexandria\n * has several delete / remove actions (career-ladder delete, lesson\n * delete, RemoveBox) that map onto it. The error foreground darkens on\n * highlight the same way the destructive Button does. */\n.itemDestructive {\n color: var(--pharos-color-semantic-error-fg);\n}\n\n.itemDestructive[data-highlighted] {\n background-color: var(--pharos-color-semantic-error-bg);\n color: var(--pharos-color-semantic-error-fg-hover);\n}\n\n/* === Separator (Menu.Separator) === */\n.separator {\n height: 1px;\n margin: var(--pharos-spacing-1) calc(var(--pharos-spacing-1) * -1);\n background-color: var(--pharos-color-neutral-200);\n}\n\n/* === Group label (Menu.GroupLabel) === */\n.label {\n padding: var(--pharos-spacing-1-5) var(--pharos-spacing-2);\n font-size: var(--pharos-font-size-sm);\n font-weight: var(--pharos-font-weight-semibold);\n color: var(--pharos-color-neutral-500);\n}\n"],"mappings":""}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
var e = {
|
|
2
|
-
positioner: "
|
|
3
|
-
content: "
|
|
4
|
-
title: "
|
|
5
|
-
description: "
|
|
2
|
+
positioner: "_positioner_1mqln_15",
|
|
3
|
+
content: "_content_1mqln_4",
|
|
4
|
+
title: "_title_1mqln_5",
|
|
5
|
+
description: "_description_1mqln_5"
|
|
6
6
|
};
|
|
7
7
|
//#endregion
|
|
8
8
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.module.js","names":[],"sources":["../../src/components/Popover.module.css"],"sourcesContent":["/* Popover.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles the floating surface (`.content`), the dialog\n * labelling parts (`.title`, `.description`), and the open/close transition\n * driven by Base UI's `data-*` state attributes.\n *\n * Unlike DropdownMenu, a Popover carries arbitrary content rather than a\n * list of rows, so the surface uses a more generous block padding and a\n * `max-width` to keep prose readable. The `.content` chrome (white surface,\n * subtle border, large shadow, fade-and-scale motion) is intentionally\n * identical to DropdownMenu — both are anchored overlays and should read as\n * the same surface family.\n *\n * z-index lives on `.positioner` (see below). Base UI portals the popover to\n * the end of `<body>`; that floats it above in-flow content, but not above a\n * host-app overlay (drawer/modal) with its own z-index — and a z-index on the\n * Popup is trapped by the Positioner's transform stacking context. The\n * Positioner therefore carries `z-index: var(--pharos-z-index-popover, …)`,\n * the shared scale Combobox / Select / DropdownMenu all use now. */\n\n/* === Positioner (Popover.Positioner) ===\n * z-index lives here, not on `.content` (the Popup). Base UI's Positioner\n * anchors with `transform`, which creates a stacking context — so a z-index\n * on the inner Popup is trapped inside it and cannot rise above a host-app\n * overlay (e.g. a drawer with its own z-index). The z-index must sit on the\n * Positioner itself.\n *\n * Sourced from `--pharos-z-index-popover` (no hardcoded value — NON-NEGOTIABLE\n * rule 1). The fallback
|
|
1
|
+
{"version":3,"file":"Popover.module.js","names":[],"sources":["../../src/components/Popover.module.css"],"sourcesContent":["/* Popover.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles the floating surface (`.content`), the dialog\n * labelling parts (`.title`, `.description`), and the open/close transition\n * driven by Base UI's `data-*` state attributes.\n *\n * Unlike DropdownMenu, a Popover carries arbitrary content rather than a\n * list of rows, so the surface uses a more generous block padding and a\n * `max-width` to keep prose readable. The `.content` chrome (white surface,\n * subtle border, large shadow, fade-and-scale motion) is intentionally\n * identical to DropdownMenu — both are anchored overlays and should read as\n * the same surface family.\n *\n * z-index lives on `.positioner` (see below). Base UI portals the popover to\n * the end of `<body>`; that floats it above in-flow content, but not above a\n * host-app overlay (drawer/modal) with its own z-index — and a z-index on the\n * Popup is trapped by the Positioner's transform stacking context. The\n * Positioner therefore carries `z-index: var(--pharos-z-index-popover, …)`,\n * the shared scale Combobox / Select / DropdownMenu all use now. */\n\n/* === Positioner (Popover.Positioner) ===\n * z-index lives here, not on `.content` (the Popup). Base UI's Positioner\n * anchors with `transform`, which creates a stacking context — so a z-index\n * on the inner Popup is trapped inside it and cannot rise above a host-app\n * overlay (e.g. a drawer with its own z-index). The z-index must sit on the\n * Positioner itself.\n *\n * Sourced from `--pharos-z-index-popover` (no hardcoded value — NON-NEGOTIABLE\n * rule 1). The fallback is D29's popover layer (1500, above modal 1400), for\n * an app whose pharos-tokens predates it; an app whose own overlays sit higher\n * (drawers, modals) raises every Pharos popup at once by overriding\n * `--pharos-z-index-popover` in `:root`. */\n.positioner {\n z-index: var(--pharos-z-index-popover, 1500);\n}\n\n/* === Floating surface (Popover.Popup) === */\n.content {\n box-sizing: border-box;\n max-width: 20rem;\n padding: var(--pharos-spacing-4);\n\n background-color: var(--pharos-color-base-white);\n border: 1px solid var(--pharos-color-neutral-200);\n border-radius: var(--pharos-radius-md);\n box-shadow: var(--pharos-shadow-lg);\n\n font-family: var(--pharos-font-family-sans);\n font-size: var(--pharos-font-size-sm);\n color: var(--pharos-color-neutral-900);\n\n outline: none;\n\n /* Open/close transition keyed off Base UI's `data-starting-style` /\n * `data-ending-style`. The popup fades and lifts a few pixels from the\n * anchored side — the same motion DropdownMenu / shadcn / Radix ship. */\n transform-origin: var(--transform-origin);\n transition-property: opacity, transform;\n transition-duration: var(--pharos-duration-fast);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n.content[data-starting-style],\n.content[data-ending-style] {\n opacity: 0;\n transform: scale(0.96);\n}\n\n/* === Title (Popover.Title) ===\n * The accessible name. Renders as <h2> but is sized as body-strong, not as\n * a document heading — a popover title is a label, not page structure. */\n.title {\n margin: 0;\n font-size: var(--pharos-font-size-base);\n font-weight: var(--pharos-font-weight-semibold);\n line-height: 1.4;\n color: var(--pharos-color-neutral-900);\n}\n\n/* === Description (Popover.Description) ===\n * Supporting copy under the title. Sits a hair below the title with the\n * muted foreground used for secondary text across the system. */\n.description {\n margin: var(--pharos-spacing-1) 0 0;\n font-size: var(--pharos-font-size-sm);\n line-height: 1.5;\n color: var(--pharos-color-neutral-600);\n}\n"],"mappings":""}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
var e = {
|
|
2
|
-
trigger: "
|
|
3
|
-
sizeSm: "
|
|
4
|
-
sizeMd: "
|
|
5
|
-
sizeLg: "
|
|
6
|
-
value: "
|
|
7
|
-
icon: "
|
|
8
|
-
positioner: "
|
|
9
|
-
content: "
|
|
10
|
-
item: "
|
|
11
|
-
itemText: "
|
|
12
|
-
itemIndicator: "
|
|
13
|
-
label: "
|
|
14
|
-
separator: "
|
|
2
|
+
trigger: "_trigger_1qe34_35",
|
|
3
|
+
sizeSm: "_sizeSm_1qe34_92",
|
|
4
|
+
sizeMd: "_sizeMd_1qe34_98",
|
|
5
|
+
sizeLg: "_sizeLg_1qe34_104",
|
|
6
|
+
value: "_value_1qe34_113",
|
|
7
|
+
icon: "_icon_1qe34_127",
|
|
8
|
+
positioner: "_positioner_1qe34_24",
|
|
9
|
+
content: "_content_1qe34_146",
|
|
10
|
+
item: "_item_1qe34_17",
|
|
11
|
+
itemText: "_itemText_1qe34_17",
|
|
12
|
+
itemIndicator: "_itemIndicator_1qe34_231",
|
|
13
|
+
label: "_label_1qe34_247",
|
|
14
|
+
separator: "_separator_1qe34_255"
|
|
15
15
|
};
|
|
16
16
|
//#endregion
|
|
17
17
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.module.js","names":[],"sources":["../../src/components/Select.module.css"],"sourcesContent":["/* Select.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles the trigger (which shares the Input chrome so a\n * Select sits flush next to an Input on the same form row), the floating\n * listbox surface, and the option rows.\n *\n * The trigger border tone is `neutral-500` for the same WCAG 1.4.11 reason\n * Input uses it (D10): a Select trigger is an interactive control boundary,\n * so it must clear the 3:1 non-text contrast bar. The popup surface chrome\n * (white, subtle `neutral-200` border, large shadow, fade-and-scale motion)\n * is deliberately identical to DropdownMenu and Popover — every anchored\n * overlay reads as the same surface family.\n *\n * Anchor-width: the popup takes `width: var(--anchor-width)` so the listbox\n * matches the trigger that opened it exactly — long options truncate (see\n * `.itemText`) rather than ballooning the panel wider than the field, the\n * Ant / Mantine / MUI / shadcn-combobox default. Base UI sets `--anchor-width`\n * on the Positioner; it cascades to the Popup. This is the affordance that\n * was missing from Popover v1 and forced the picker call-sites to be deferred\n * to this atom. Consumers needing a wider panel override `width` via\n * `className` per call-site.\n *\n * z-index lives on `.positioner` (see below). Base UI portals the popup to\n * the end of `<body>`; that floats it above in-flow content, but not above a\n * host-app overlay (drawer/modal) with its own z-index — and a z-index on the\n * Popup is trapped by the Positioner's transform stacking context. The\n * Positioner therefore carries `z-index: var(--pharos-z-index-popover, …)`,\n * the shared scale Combobox / DropdownMenu / Popover all use now. */\n\n/* === Trigger (Select.Trigger) ===\n * Same chrome as Input: white fill, `neutral-500` resting border, brand\n * focus ring. Laid out as a row so the value grows and the chevron pins to\n * the trailing edge. */\n.trigger {\n appearance: none;\n -webkit-appearance: none;\n\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--pharos-spacing-2);\n width: 100%;\n margin: 0;\n\n border: 1px solid var(--pharos-color-neutral-500);\n border-radius: var(--pharos-radius-md);\n background-color: var(--pharos-color-base-white);\n color: var(--pharos-color-neutral-900);\n\n font-family: var(--pharos-font-family-sans);\n font-size: var(--pharos-font-size-sm);\n font-weight: var(--pharos-font-weight-regular);\n line-height: 1.25;\n text-align: start;\n cursor: default;\n\n transition-property: border-color, box-shadow;\n transition-duration: var(--pharos-duration-normal);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n.trigger:focus-visible {\n outline: none;\n border-color: var(--pharos-color-primary-600);\n box-shadow:\n 0 0 0 2px var(--pharos-color-base-white),\n 0 0 0 4px var(--pharos-color-primary-600);\n}\n\n.trigger:disabled,\n.trigger[data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.trigger[aria-invalid='true'] {\n border-color: var(--pharos-color-semantic-error-fg);\n}\n\n.trigger[aria-invalid='true']:focus-visible {\n border-color: var(--pharos-color-semantic-error-fg);\n box-shadow:\n 0 0 0 2px var(--pharos-color-base-white),\n 0 0 0 4px var(--pharos-color-semantic-error-fg);\n}\n\n/* === Sizes ===\n * Heights match the Input/Button grid exactly so a Select aligns with the\n * other controls on a row. */\n.sizeSm {\n height: var(--pharos-spacing-8);\n padding: 0 var(--pharos-spacing-3);\n font-size: var(--pharos-font-size-sm);\n}\n\n.sizeMd {\n height: var(--pharos-spacing-10);\n padding: 0 var(--pharos-spacing-4);\n font-size: var(--pharos-font-size-sm);\n}\n\n.sizeLg {\n height: var(--pharos-spacing-12);\n padding: 0 var(--pharos-spacing-6);\n font-size: var(--pharos-font-size-base);\n}\n\n/* === Value (Select.Value) ===\n * Grows to fill the trigger and truncates rather than wrapping. The\n * placeholder state is tinted with the same muted tone as Input's. */\n.value {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.value[data-placeholder] {\n color: var(--pharos-color-neutral-500);\n}\n\n/* === Chevron (Select.Icon) ===\n * Inline SVG sized to the control. Rotates when the popup is open. */\n.icon {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n color: var(--pharos-color-neutral-500);\n transition: transform var(--pharos-duration-fast) var(--pharos-easing-out);\n}\n\n.icon svg {\n width: 1rem;\n height: 1rem;\n}\n\n.icon[data-popup-open] {\n transform: rotate(180deg);\n}\n\n/* === Positioner (Select.Positioner) ===\n * z-index lives here, not on `.content` (the Popup). Base UI's Positioner\n * anchors with `transform`, which creates a stacking context — so a z-index\n * on the inner Popup is trapped inside it and cannot rise above a host-app\n * overlay (e.g. a drawer with its own z-index). The z-index must sit on the\n * Positioner itself.\n *\n * Sourced from `--pharos-z-index-popover` (no hardcoded value — NON-NEGOTIABLE\n * rule 1). The fallback
|
|
1
|
+
{"version":3,"file":"Select.module.js","names":[],"sources":["../../src/components/Select.module.css"],"sourcesContent":["/* Select.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles the trigger (which shares the Input chrome so a\n * Select sits flush next to an Input on the same form row), the floating\n * listbox surface, and the option rows.\n *\n * The trigger border tone is `neutral-500` for the same WCAG 1.4.11 reason\n * Input uses it (D10): a Select trigger is an interactive control boundary,\n * so it must clear the 3:1 non-text contrast bar. The popup surface chrome\n * (white, subtle `neutral-200` border, large shadow, fade-and-scale motion)\n * is deliberately identical to DropdownMenu and Popover — every anchored\n * overlay reads as the same surface family.\n *\n * Anchor-width: the popup takes `width: var(--anchor-width)` so the listbox\n * matches the trigger that opened it exactly — long options truncate (see\n * `.itemText`) rather than ballooning the panel wider than the field, the\n * Ant / Mantine / MUI / shadcn-combobox default. Base UI sets `--anchor-width`\n * on the Positioner; it cascades to the Popup. This is the affordance that\n * was missing from Popover v1 and forced the picker call-sites to be deferred\n * to this atom. Consumers needing a wider panel override `width` via\n * `className` per call-site.\n *\n * z-index lives on `.positioner` (see below). Base UI portals the popup to\n * the end of `<body>`; that floats it above in-flow content, but not above a\n * host-app overlay (drawer/modal) with its own z-index — and a z-index on the\n * Popup is trapped by the Positioner's transform stacking context. The\n * Positioner therefore carries `z-index: var(--pharos-z-index-popover, …)`,\n * the shared scale Combobox / DropdownMenu / Popover all use now. */\n\n/* === Trigger (Select.Trigger) ===\n * Same chrome as Input: white fill, `neutral-500` resting border, brand\n * focus ring. Laid out as a row so the value grows and the chevron pins to\n * the trailing edge. */\n.trigger {\n appearance: none;\n -webkit-appearance: none;\n\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--pharos-spacing-2);\n width: 100%;\n margin: 0;\n\n border: 1px solid var(--pharos-color-neutral-500);\n border-radius: var(--pharos-radius-md);\n background-color: var(--pharos-color-base-white);\n color: var(--pharos-color-neutral-900);\n\n font-family: var(--pharos-font-family-sans);\n font-size: var(--pharos-font-size-sm);\n font-weight: var(--pharos-font-weight-regular);\n line-height: 1.25;\n text-align: start;\n cursor: default;\n\n transition-property: border-color, box-shadow;\n transition-duration: var(--pharos-duration-normal);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n.trigger:focus-visible {\n outline: none;\n border-color: var(--pharos-color-primary-600);\n box-shadow:\n 0 0 0 2px var(--pharos-color-base-white),\n 0 0 0 4px var(--pharos-color-primary-600);\n}\n\n.trigger:disabled,\n.trigger[data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.trigger[aria-invalid='true'] {\n border-color: var(--pharos-color-semantic-error-fg);\n}\n\n.trigger[aria-invalid='true']:focus-visible {\n border-color: var(--pharos-color-semantic-error-fg);\n box-shadow:\n 0 0 0 2px var(--pharos-color-base-white),\n 0 0 0 4px var(--pharos-color-semantic-error-fg);\n}\n\n/* === Sizes ===\n * Heights match the Input/Button grid exactly so a Select aligns with the\n * other controls on a row. */\n.sizeSm {\n height: var(--pharos-spacing-8);\n padding: 0 var(--pharos-spacing-3);\n font-size: var(--pharos-font-size-sm);\n}\n\n.sizeMd {\n height: var(--pharos-spacing-10);\n padding: 0 var(--pharos-spacing-4);\n font-size: var(--pharos-font-size-sm);\n}\n\n.sizeLg {\n height: var(--pharos-spacing-12);\n padding: 0 var(--pharos-spacing-6);\n font-size: var(--pharos-font-size-base);\n}\n\n/* === Value (Select.Value) ===\n * Grows to fill the trigger and truncates rather than wrapping. The\n * placeholder state is tinted with the same muted tone as Input's. */\n.value {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.value[data-placeholder] {\n color: var(--pharos-color-neutral-500);\n}\n\n/* === Chevron (Select.Icon) ===\n * Inline SVG sized to the control. Rotates when the popup is open. */\n.icon {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n color: var(--pharos-color-neutral-500);\n transition: transform var(--pharos-duration-fast) var(--pharos-easing-out);\n}\n\n.icon svg {\n width: 1rem;\n height: 1rem;\n}\n\n.icon[data-popup-open] {\n transform: rotate(180deg);\n}\n\n/* === Positioner (Select.Positioner) ===\n * z-index lives here, not on `.content` (the Popup). Base UI's Positioner\n * anchors with `transform`, which creates a stacking context — so a z-index\n * on the inner Popup is trapped inside it and cannot rise above a host-app\n * overlay (e.g. a drawer with its own z-index). The z-index must sit on the\n * Positioner itself.\n *\n * Sourced from `--pharos-z-index-popover` (no hardcoded value — NON-NEGOTIABLE\n * rule 1). The fallback is D29's popover layer (1500, above modal 1400), for\n * an app whose pharos-tokens predates it; an app whose own overlays sit higher\n * (drawers, modals) raises every Pharos popup at once by overriding\n * `--pharos-z-index-popover` in `:root`. */\n.positioner {\n z-index: var(--pharos-z-index-popover, 1500);\n}\n\n/* === Floating surface (Select.Popup) === */\n.content {\n box-sizing: border-box;\n width: var(--anchor-width);\n max-height: var(--available-height);\n overflow-y: auto;\n padding: var(--pharos-spacing-1);\n\n background-color: var(--pharos-color-base-white);\n border: 1px solid var(--pharos-color-neutral-200);\n border-radius: var(--pharos-radius-md);\n box-shadow: var(--pharos-shadow-lg);\n\n font-family: var(--pharos-font-family-sans);\n font-size: var(--pharos-font-size-sm);\n color: var(--pharos-color-neutral-900);\n\n outline: none;\n\n transform-origin: var(--transform-origin);\n transition-property: opacity, transform;\n transition-duration: var(--pharos-duration-fast);\n transition-timing-function: var(--pharos-easing-out);\n}\n\n.content[data-starting-style],\n.content[data-ending-style] {\n opacity: 0;\n transform: scale(0.96);\n}\n\n/* === Option (Select.Item) ===\n * Row layout with the label growing and the selected-state check pinned to\n * the trailing edge. Highlight tracks Base UI's `data-highlighted` (keyboard\n * / pointer) the same way DropdownMenu items do. */\n.item {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: var(--pharos-spacing-2);\n\n padding: var(--pharos-spacing-2) var(--pharos-spacing-3);\n border-radius: var(--pharos-radius-sm);\n\n color: var(--pharos-color-neutral-900);\n cursor: default;\n user-select: none;\n outline: none;\n scroll-margin: var(--pharos-spacing-1);\n}\n\n.item[data-highlighted] {\n background-color: var(--pharos-color-neutral-100);\n}\n\n.item[data-disabled] {\n color: var(--pharos-color-neutral-400);\n pointer-events: none;\n}\n\n/* Long options wrap onto as many lines as they need. Cutting them with an\n * ellipsis hides exactly the end that tells similar options apart (a list of\n * timezones: «(GMT-06:00) America/Mexico_City — Central Standard…»). */\n.itemText {\n flex: 1 1 auto;\n min-width: 0;\n overflow-wrap: anywhere;\n white-space: normal;\n}\n\n.itemIndicator {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n /* One line tall, so the check sits on the first line of a wrapped option. */\n block-size: 1lh;\n color: var(--pharos-color-primary-600);\n}\n\n.itemIndicator svg {\n width: 1rem;\n height: 1rem;\n}\n\n/* === Group + label (Select.Group / Select.GroupLabel) === */\n.label {\n padding: var(--pharos-spacing-2) var(--pharos-spacing-3) var(--pharos-spacing-1);\n font-size: var(--pharos-font-size-xs);\n font-weight: var(--pharos-font-weight-semibold);\n color: var(--pharos-color-neutral-600);\n}\n\n/* === Separator (Select.Separator) === */\n.separator {\n height: 1px;\n margin: var(--pharos-spacing-1) 0;\n background-color: var(--pharos-color-neutral-200);\n}\n"],"mappings":""}
|
|
@@ -57,8 +57,9 @@ type SheetVariantProps = VariantProps<typeof sheetVariants>;
|
|
|
57
57
|
* The panel surface. Collapses Base UI's `Portal` + `Backdrop` + `Popup`. The
|
|
58
58
|
* `side` prop docks it to one of the four viewport edges (default `right`)
|
|
59
59
|
* and picks the matching slide-in transition. The backdrop and panel share
|
|
60
|
-
* the `--pharos-z-index-
|
|
61
|
-
*
|
|
60
|
+
* the `--pharos-z-index-modal` layer (D29): a modal opened over the sheet
|
|
61
|
+
* paints above it by portal order, and a Select / Popover opened from inside
|
|
62
|
+
* it sits on the higher popover layer.
|
|
62
63
|
*/
|
|
63
64
|
export interface SheetContentProps extends ComponentProps<typeof Dialog.Popup>, SheetVariantProps {
|
|
64
65
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../src/components/Sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAE5D,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAEtC;yBAFe,KAAK;;;AAMrB;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC;AAEtE,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAEpD;yBAFe,YAAY;;;AAM5B,QAAA,MAAM,aAAa;;8EAYjB,CAAC;AAEH,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5D
|
|
1
|
+
{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../src/components/Sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAE5D,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAEtC;yBAFe,KAAK;;;AAMrB;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC;AAEtE,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAEpD;yBAFe,YAAY;;;AAM5B,QAAA,MAAM,aAAa;;8EAYjB,CAAC;AAEH,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5D;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,EAAE,iBAAiB;CAAG;AAEpG,wBAAgB,YAAY,CAAC,EAAE,IAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BAc/F;yBAde,YAAY;;;AAkB5B,8DAA8D;AAC9D,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;CAAG;AAE5E,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAEnE;yBAFe,WAAW;;;AAM3B;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AAElE,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAQjE;yBARe,UAAU;;;AAY1B;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,WAAW,CAAC,CAAC;AAE9E,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,+BAQ7E;yBARe,gBAAgB;;;AAYhC,oDAAoD;AACpD,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;CAAG;AAE5E,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAEnE;yBAFe,WAAW;;;AAM3B;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AAElE,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAEhD;yBAFe,UAAU;;;AAM1B,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.js","names":[],"sources":["../../src/components/Sheet.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { Dialog } from '@base-ui/react/dialog';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../lib/cn';\nimport styles from './Sheet.module.css';\n\n/**\n * Modal panel that docks to a viewport edge and slides in (the shadcn\n * **Sheet** contract). Wraps Base UI's `Dialog.*`, which implements the ARIA\n * **dialog** pattern as a **modal** disclosure: `role=\"dialog\"` +\n * `aria-modal`, focus trapped inside the panel, scroll locked, Escape and\n * backdrop-click dismiss, focus returns to the trigger on close.\n *\n * Distinct from `Popover` (D16, non-modal, anchored to its trigger) and\n * `DropdownMenu` (D15, menu-button). A Sheet is for a task surface that\n * should command the screen — mobile navigation, a filters panel, a\n * create/edit form. Naming follows shadcn (`Sheet*`); the compound surface\n * collapses Base UI's `Portal` + `Backdrop` + `Popup` into a single\n * `SheetContent` with a `side` prop, mirroring the ergonomics of the other\n * Pharos overlays.\n *\n * v1 ships the parts the known consumers need (the LanguageSelector /\n * MobileDrawer): Trigger, Content, Header, Footer, Title, Description, Close.\n *\n * @example\n * <Sheet>\n * <SheetTrigger render={<Button intent=\"secondary\">Menu</Button>} />\n * <SheetContent side=\"left\">\n * <SheetHeader>\n * <SheetTitle>Navigation</SheetTitle>\n * <SheetDescription>Jump to a section.</SheetDescription>\n * </SheetHeader>\n * <nav>…</nav>\n * <SheetFooter>\n * <SheetClose render={<Button intent=\"ghost\">Close</Button>} />\n * </SheetFooter>\n * </SheetContent>\n * </Sheet>\n */\nexport type SheetProps = ComponentProps<typeof Dialog.Root>;\n\nexport function Sheet(props: SheetProps) {\n return <Dialog.Root {...props} />;\n}\n\nSheet.displayName = 'Sheet';\n\n/**\n * The element that opens the sheet. Renders a native `<button>` by default;\n * pass `render` to compose any control (`render={<Button…/>}`,\n * `render={<IconButton…/>}`).\n */\nexport type SheetTriggerProps = ComponentProps<typeof Dialog.Trigger>;\n\nexport function SheetTrigger(props: SheetTriggerProps) {\n return <Dialog.Trigger {...props} />;\n}\n\nSheetTrigger.displayName = 'SheetTrigger';\n\nconst sheetVariants = cva(styles.content, {\n variants: {\n side: {\n top: styles.sideTop,\n right: styles.sideRight,\n bottom: styles.sideBottom,\n left: styles.sideLeft,\n },\n },\n defaultVariants: {\n side: 'right',\n },\n});\n\ntype SheetVariantProps = VariantProps<typeof sheetVariants>;\n\n/**\n * The panel surface. Collapses Base UI's `Portal` + `Backdrop` + `Popup`. The\n * `side` prop docks it to one of the four viewport edges (default `right`)\n * and picks the matching slide-in transition. The backdrop and panel share\n * the `--pharos-z-index-
|
|
1
|
+
{"version":3,"file":"Sheet.js","names":[],"sources":["../../src/components/Sheet.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { Dialog } from '@base-ui/react/dialog';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../lib/cn';\nimport styles from './Sheet.module.css';\n\n/**\n * Modal panel that docks to a viewport edge and slides in (the shadcn\n * **Sheet** contract). Wraps Base UI's `Dialog.*`, which implements the ARIA\n * **dialog** pattern as a **modal** disclosure: `role=\"dialog\"` +\n * `aria-modal`, focus trapped inside the panel, scroll locked, Escape and\n * backdrop-click dismiss, focus returns to the trigger on close.\n *\n * Distinct from `Popover` (D16, non-modal, anchored to its trigger) and\n * `DropdownMenu` (D15, menu-button). A Sheet is for a task surface that\n * should command the screen — mobile navigation, a filters panel, a\n * create/edit form. Naming follows shadcn (`Sheet*`); the compound surface\n * collapses Base UI's `Portal` + `Backdrop` + `Popup` into a single\n * `SheetContent` with a `side` prop, mirroring the ergonomics of the other\n * Pharos overlays.\n *\n * v1 ships the parts the known consumers need (the LanguageSelector /\n * MobileDrawer): Trigger, Content, Header, Footer, Title, Description, Close.\n *\n * @example\n * <Sheet>\n * <SheetTrigger render={<Button intent=\"secondary\">Menu</Button>} />\n * <SheetContent side=\"left\">\n * <SheetHeader>\n * <SheetTitle>Navigation</SheetTitle>\n * <SheetDescription>Jump to a section.</SheetDescription>\n * </SheetHeader>\n * <nav>…</nav>\n * <SheetFooter>\n * <SheetClose render={<Button intent=\"ghost\">Close</Button>} />\n * </SheetFooter>\n * </SheetContent>\n * </Sheet>\n */\nexport type SheetProps = ComponentProps<typeof Dialog.Root>;\n\nexport function Sheet(props: SheetProps) {\n return <Dialog.Root {...props} />;\n}\n\nSheet.displayName = 'Sheet';\n\n/**\n * The element that opens the sheet. Renders a native `<button>` by default;\n * pass `render` to compose any control (`render={<Button…/>}`,\n * `render={<IconButton…/>}`).\n */\nexport type SheetTriggerProps = ComponentProps<typeof Dialog.Trigger>;\n\nexport function SheetTrigger(props: SheetTriggerProps) {\n return <Dialog.Trigger {...props} />;\n}\n\nSheetTrigger.displayName = 'SheetTrigger';\n\nconst sheetVariants = cva(styles.content, {\n variants: {\n side: {\n top: styles.sideTop,\n right: styles.sideRight,\n bottom: styles.sideBottom,\n left: styles.sideLeft,\n },\n },\n defaultVariants: {\n side: 'right',\n },\n});\n\ntype SheetVariantProps = VariantProps<typeof sheetVariants>;\n\n/**\n * The panel surface. Collapses Base UI's `Portal` + `Backdrop` + `Popup`. The\n * `side` prop docks it to one of the four viewport edges (default `right`)\n * and picks the matching slide-in transition. The backdrop and panel share\n * the `--pharos-z-index-modal` layer (D29): a modal opened over the sheet\n * paints above it by portal order, and a Select / Popover opened from inside\n * it sits on the higher popover layer.\n */\nexport interface SheetContentProps extends ComponentProps<typeof Dialog.Popup>, SheetVariantProps {}\n\nexport function SheetContent({ side = 'right', className, children, ...rest }: SheetContentProps) {\n return (\n <Dialog.Portal>\n <Dialog.Backdrop className={styles.backdrop} />\n <Dialog.Popup\n data-pharos-slot=\"sheet-content\"\n data-pharos-side={side ?? 'right'}\n className={cn(sheetVariants({ side }), className)}\n {...rest}\n >\n {children}\n </Dialog.Popup>\n </Dialog.Portal>\n );\n}\n\nSheetContent.displayName = 'SheetContent';\n\n/** Groups the title + description at the top of the panel. */\nexport interface SheetHeaderProps extends ComponentPropsWithoutRef<'div'> {}\n\nexport function SheetHeader({ className, ...rest }: SheetHeaderProps) {\n return <div data-pharos-slot=\"sheet-header\" className={cn(styles.header, className)} {...rest} />;\n}\n\nSheetHeader.displayName = 'SheetHeader';\n\n/**\n * The panel's accessible name. Renders Base UI's `Dialog.Title`, which wires\n * `aria-labelledby` on the popup — required for the dialog to be announced.\n * Renders as an `<h2>` by default.\n */\nexport type SheetTitleProps = ComponentProps<typeof Dialog.Title>;\n\nexport function SheetTitle({ className, ...rest }: SheetTitleProps) {\n return (\n <Dialog.Title\n data-pharos-slot=\"sheet-title\"\n className={cn(styles.title, className)}\n {...rest}\n />\n );\n}\n\nSheetTitle.displayName = 'SheetTitle';\n\n/**\n * Supporting copy under the title. Renders Base UI's `Dialog.Description`,\n * which wires `aria-describedby` on the popup. Renders as a `<p>` by default.\n */\nexport type SheetDescriptionProps = ComponentProps<typeof Dialog.Description>;\n\nexport function SheetDescription({ className, ...rest }: SheetDescriptionProps) {\n return (\n <Dialog.Description\n data-pharos-slot=\"sheet-description\"\n className={cn(styles.description, className)}\n {...rest}\n />\n );\n}\n\nSheetDescription.displayName = 'SheetDescription';\n\n/** Bottom action row, pushed to the panel's end. */\nexport interface SheetFooterProps extends ComponentPropsWithoutRef<'div'> {}\n\nexport function SheetFooter({ className, ...rest }: SheetFooterProps) {\n return <div data-pharos-slot=\"sheet-footer\" className={cn(styles.footer, className)} {...rest} />;\n}\n\nSheetFooter.displayName = 'SheetFooter';\n\n/**\n * A button that closes the sheet. Renders Base UI's `Dialog.Close` (a native\n * `<button>`); compose any control via `render`.\n */\nexport type SheetCloseProps = ComponentProps<typeof Dialog.Close>;\n\nexport function SheetClose(props: SheetCloseProps) {\n return <Dialog.Close data-pharos-slot=\"sheet-close\" {...props} />;\n}\n\nSheetClose.displayName = 'SheetClose';\n\nexport { sheetVariants };\n"],"mappings":";;;;;;;AA2CA,SAAgB,EAAM,GAAmB;CACvC,OAAO,kBAAC,EAAO,MAAR,EAAa,GAAI,EAAQ,CAAA;AAClC;AAEA,EAAM,cAAc;AASpB,SAAgB,EAAa,GAA0B;CACrD,OAAO,kBAAC,EAAO,SAAR,EAAgB,GAAI,EAAQ,CAAA;AACrC;AAEA,EAAa,cAAc;AAE3B,IAAM,IAAgB,EAAI,EAAO,SAAS;CACxC,UAAU,EACR,MAAM;EACJ,KAAK,EAAO;EACZ,OAAO,EAAO;EACd,QAAQ,EAAO;EACf,MAAM,EAAO;CACf,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CAAC;AAcD,SAAgB,EAAa,EAAE,UAAO,SAAS,cAAW,aAAU,GAAG,KAA2B;CAChG,OACE,kBAAC,EAAO,QAAR,EAAA,UAAA,CACE,kBAAC,EAAO,UAAR,EAAiB,WAAW,EAAO,SAAW,CAAA,GAC9C,kBAAC,EAAO,OAAR;EACE,oBAAiB;EACjB,oBAAkB,KAAQ;EAC1B,WAAW,EAAG,EAAc,EAAE,QAAK,CAAC,GAAG,CAAS;EAChD,GAAI;EAEH;CACW,CAAA,CACD,EAAA,CAAA;AAEnB;AAEA,EAAa,cAAc;AAK3B,SAAgB,EAAY,EAAE,cAAW,GAAG,KAA0B;CACpE,OAAO,kBAAC,OAAD;EAAK,oBAAiB;EAAe,WAAW,EAAG,EAAO,QAAQ,CAAS;EAAG,GAAI;CAAO,CAAA;AAClG;AAEA,EAAY,cAAc;AAS1B,SAAgB,EAAW,EAAE,cAAW,GAAG,KAAyB;CAClE,OACE,kBAAC,EAAO,OAAR;EACE,oBAAiB;EACjB,WAAW,EAAG,EAAO,OAAO,CAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAEA,EAAW,cAAc;AAQzB,SAAgB,EAAiB,EAAE,cAAW,GAAG,KAA+B;CAC9E,OACE,kBAAC,EAAO,aAAR;EACE,oBAAiB;EACjB,WAAW,EAAG,EAAO,aAAa,CAAS;EAC3C,GAAI;CACL,CAAA;AAEL;AAEA,EAAiB,cAAc;AAK/B,SAAgB,EAAY,EAAE,cAAW,GAAG,KAA0B;CACpE,OAAO,kBAAC,OAAD;EAAK,oBAAiB;EAAe,WAAW,EAAG,EAAO,QAAQ,CAAS;EAAG,GAAI;CAAO,CAAA;AAClG;AAEA,EAAY,cAAc;AAQ1B,SAAgB,EAAW,GAAwB;CACjD,OAAO,kBAAC,EAAO,OAAR;EAAc,oBAAiB;EAAc,GAAI;CAAQ,CAAA;AAClE;AAEA,EAAW,cAAc"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
var e = {
|
|
2
|
-
backdrop: "
|
|
3
|
-
content: "
|
|
4
|
-
sideRight: "
|
|
5
|
-
sideLeft: "
|
|
6
|
-
sideTop: "
|
|
7
|
-
sideBottom: "
|
|
8
|
-
header: "
|
|
9
|
-
title: "
|
|
10
|
-
description: "
|
|
11
|
-
footer: "
|
|
2
|
+
backdrop: "_backdrop_titsa_18",
|
|
3
|
+
content: "_content_titsa_34",
|
|
4
|
+
sideRight: "_sideRight_titsa_57",
|
|
5
|
+
sideLeft: "_sideLeft_titsa_70",
|
|
6
|
+
sideTop: "_sideTop_titsa_83",
|
|
7
|
+
sideBottom: "_sideBottom_titsa_96",
|
|
8
|
+
header: "_header_titsa_110",
|
|
9
|
+
title: "_title_titsa_116",
|
|
10
|
+
description: "_description_titsa_124",
|
|
11
|
+
footer: "_footer_titsa_131"
|
|
12
12
|
};
|
|
13
13
|
//#endregion
|
|
14
14
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.module.js","names":[],"sources":["../../src/components/Sheet.module.css"],"sourcesContent":["/* Sheet.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles a modal panel that docks to a viewport edge and\n * slides in — the shadcn \"Sheet\" contract over Base UI's `Dialog` (modal:\n * focus trap, scroll lock, backdrop). Motion is driven by Base UI's\n * `data-starting-style` / `data-ending-style` state attributes.\n *\n * z-index: the backdrop and the panel share `--pharos-z-index-
|
|
1
|
+
{"version":3,"file":"Sheet.module.js","names":[],"sources":["../../src/components/Sheet.module.css"],"sourcesContent":["/* Sheet.module.css\n *\n * Per-component CSS Modules definition (Decision D9). Hashed into\n * `dist/styles.css`. Styles a modal panel that docks to a viewport edge and\n * slides in — the shadcn \"Sheet\" contract over Base UI's `Dialog` (modal:\n * focus trap, scroll lock, backdrop). Motion is driven by Base UI's\n * `data-starting-style` / `data-ending-style` state attributes.\n *\n * z-index: the backdrop and the panel share `--pharos-z-index-modal`\n * (decision D29, modal 1400), like Dialog: one layer for both, so a modal\n * opened over the Sheet paints above it by DOM order, backdrop included. A\n * Select or Popover opened from inside the Sheet (a LanguageSelector in a\n * mobile drawer) sits on the popover layer (1500), above it. The fallback is\n * D29's value, for a consumer whose pharos-tokens predates it.\n */\n\n/* === Backdrop (Dialog.Backdrop) === */\n.backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--pharos-z-index-modal, 1400);\n /* Scrim from the base-black token at 50% via color-mix — no hardcoded\n * rgba (NON-NEGOTIABLE rule 1). */\n background-color: color-mix(in srgb, var(--pharos-color-base-black) 50%, transparent);\n transition: opacity var(--pharos-duration-normal) var(--pharos-easing-out);\n}\n\n.backdrop[data-starting-style],\n.backdrop[data-ending-style] {\n opacity: 0;\n}\n\n/* === Panel (Dialog.Popup) === */\n.content {\n position: fixed;\n z-index: var(--pharos-z-index-modal, 1400);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--pharos-spacing-4);\n padding: var(--pharos-spacing-6);\n\n background-color: var(--pharos-color-base-white);\n box-shadow: var(--pharos-shadow-xl);\n\n font-family: var(--pharos-font-family-sans);\n font-size: var(--pharos-font-size-sm);\n color: var(--pharos-color-neutral-900);\n\n outline: none;\n overflow-y: auto;\n\n transition: transform var(--pharos-duration-normal) var(--pharos-easing-out);\n}\n\n/* === Sides === */\n.sideRight {\n top: 0;\n bottom: 0;\n right: 0;\n height: 100dvh;\n width: min(24rem, 100vw);\n border-left: 1px solid var(--pharos-color-neutral-200);\n}\n.sideRight[data-starting-style],\n.sideRight[data-ending-style] {\n transform: translateX(100%);\n}\n\n.sideLeft {\n top: 0;\n bottom: 0;\n left: 0;\n height: 100dvh;\n width: min(24rem, 100vw);\n border-right: 1px solid var(--pharos-color-neutral-200);\n}\n.sideLeft[data-starting-style],\n.sideLeft[data-ending-style] {\n transform: translateX(-100%);\n}\n\n.sideTop {\n top: 0;\n left: 0;\n right: 0;\n width: 100vw;\n max-height: 100dvh;\n border-bottom: 1px solid var(--pharos-color-neutral-200);\n}\n.sideTop[data-starting-style],\n.sideTop[data-ending-style] {\n transform: translateY(-100%);\n}\n\n.sideBottom {\n bottom: 0;\n left: 0;\n right: 0;\n width: 100vw;\n max-height: 100dvh;\n border-top: 1px solid var(--pharos-color-neutral-200);\n}\n.sideBottom[data-starting-style],\n.sideBottom[data-ending-style] {\n transform: translateY(100%);\n}\n\n/* === Slots === */\n.header {\n display: flex;\n flex-direction: column;\n gap: var(--pharos-spacing-1);\n}\n\n.title {\n margin: 0;\n font-size: var(--pharos-font-size-lg);\n font-weight: var(--pharos-font-weight-semibold);\n line-height: 1.4;\n color: var(--pharos-color-neutral-900);\n}\n\n.description {\n margin: 0;\n font-size: var(--pharos-font-size-sm);\n line-height: 1.5;\n color: var(--pharos-color-neutral-600);\n}\n\n.footer {\n display: flex;\n gap: var(--pharos-spacing-2);\n justify-content: flex-end;\n margin-top: auto;\n}\n"],"mappings":""}
|
package/dist/styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
._root_1xx27_21{box-sizing:border-box;background-color:var(--pharos-color-neutral-100);color:var(--pharos-color-neutral-700);font-family:var(--pharos-font-family-sans);-webkit-user-select:none;user-select:none;--pharos-avatar-overlap:calc(var(--pharos-spacing-2) * -1);flex-shrink:0;justify-content:center;align-items:center;font-weight:500;line-height:1;display:inline-flex;position:relative;overflow:hidden}._shapeCircle_1xx27_63{border-radius:var(--pharos-radius-full)}._shapeSquare_1xx27_67{border-radius:var(--pharos-radius-md)}._sizeSm_1xx27_86{width:var(--pharos-spacing-8);height:var(--pharos-spacing-8);--pharos-avatar-overlap:calc(var(--pharos-spacing-2) * -.75);font-size:.75rem}._sizeMd_1xx27_93{width:var(--pharos-spacing-10);height:var(--pharos-spacing-10);--pharos-avatar-overlap:calc(var(--pharos-spacing-2) * -1);font-size:.875rem}._sizeLg_1xx27_100{width:var(--pharos-spacing-12);height:var(--pharos-spacing-12);--pharos-avatar-overlap:calc(var(--pharos-spacing-2) * -1.25);font-size:1rem}._image_1xx27_118{object-fit:cover;border-radius:inherit;width:100%;height:100%;display:block;position:absolute;inset:0}._fallback_1xx27_134{text-align:center;width:100%;height:100%;font:inherit;color:inherit;justify-content:center;align-items:center;display:inline-flex}._sizeSm_1xx27_86 ._fallback_1xx27_134>svg{width:var(--pharos-spacing-5);height:var(--pharos-spacing-5)}._sizeMd_1xx27_93 ._fallback_1xx27_134>svg{width:var(--pharos-spacing-6);height:var(--pharos-spacing-6)}._sizeLg_1xx27_100 ._fallback_1xx27_134>svg{width:var(--pharos-spacing-7);height:var(--pharos-spacing-7)}._group_1xx27_175{align-items:center;display:inline-flex}._group_1xx27_175>._root_1xx27_21{box-shadow:0 0 0 2px var(--pharos-avatar-group-ring,var(--pharos-color-base-white));position:relative}._group_1xx27_175>._root_1xx27_21+._root_1xx27_21{margin-left:var(--pharos-avatar-overlap)}._badge_zrawy_5{align-items:center;gap:var(--pharos-spacing-1);padding:0 var(--pharos-spacing-2);height:var(--pharos-spacing-5);border-radius:var(--pharos-radius-full);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-xs);font-weight:var(--pharos-font-weight-medium);white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic;border:1px solid #0000;width:fit-content;line-height:1;display:inline-flex}._badge_zrawy_5>svg{pointer-events:none;flex:none;width:.75em;height:.75em}._default_zrawy_30{background:var(--pharos-color-neutral-900);color:var(--pharos-color-base-white)}._secondary_zrawy_35{background:var(--pharos-color-neutral-100);color:var(--pharos-color-neutral-900)}._destructive_zrawy_40{background:var(--pharos-color-semantic-error-fg);color:var(--pharos-color-semantic-error-on)}._outline_zrawy_45{color:var(--pharos-color-neutral-900);border-color:var(--pharos-color-neutral-500);background:0 0}._success_zrawy_55{background:var(--pharos-color-semantic-success-fg);color:var(--pharos-color-semantic-success-on)}._warning_zrawy_60{background:var(--pharos-color-semantic-warning-fg);color:var(--pharos-color-semantic-warning-on)}._info_zrawy_65{background:var(--pharos-color-semantic-info-fg);color:var(--pharos-color-semantic-info-on)}._button_iu0wg_18{appearance:none;box-sizing:border-box;border-radius:var(--pharos-radius-full);white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic;font-family:var(--pharos-font-family-sans);font-style:normal;font-weight:var(--pharos-font-weight-medium);font-variant:normal;font-kerning:auto;font-optical-sizing:auto;font-size-adjust:none;font-feature-settings:normal;font-variation-settings:normal;letter-spacing:normal;text-transform:none;font-stretch:100%;font-size:var(--pharos-font-size-sm);-webkit-user-select:none;user-select:none;cursor:pointer;color:inherit;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);background-color:#0000;border:0 solid #0000;justify-content:center;align-items:center;margin:0;padding-top:0;padding-bottom:0;line-height:1.5;text-decoration:none;display:inline-flex}._button_iu0wg_18:focus-visible{box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--button-focus-ring,var(--pharos-color-primary-600));outline:none}._button_iu0wg_18:disabled{pointer-events:none;cursor:not-allowed;opacity:.5}._primary_iu0wg_127{background-color:var(--pharos-color-neutral-900);color:var(--pharos-color-base-white);--button-focus-ring:var(--pharos-color-primary-600)}._primary_iu0wg_127:hover{background-color:var(--pharos-color-neutral-700)}._primary_iu0wg_127:active{background-color:var(--pharos-color-neutral-950)}._secondary_iu0wg_141{background-color:var(--pharos-color-base-white);color:var(--pharos-color-neutral-900);border:1px solid var(--pharos-color-neutral-500);--button-focus-ring:var(--pharos-color-primary-600)}._secondary_iu0wg_141:hover{background-color:var(--pharos-color-neutral-50)}._secondary_iu0wg_141:active{background-color:var(--pharos-color-neutral-100)}._ghost_iu0wg_161{color:var(--pharos-color-neutral-900);--button-focus-ring:var(--pharos-color-primary-600);background-color:#0000}._ghost_iu0wg_161:hover{background-color:var(--pharos-color-neutral-100)}._ghost_iu0wg_161:active{background-color:var(--pharos-color-neutral-200)}._destructive_iu0wg_175{background-color:var(--pharos-color-semantic-error-fg);color:var(--pharos-color-semantic-error-on);--button-focus-ring:var(--pharos-color-semantic-error-fg)}._destructive_iu0wg_175:hover{background-color:var(--pharos-color-semantic-error-fg-hover)}._destructive_iu0wg_175:active{background-color:var(--pharos-color-semantic-error-fg-active)}._sizeSm_iu0wg_197{height:var(--pharos-spacing-8);gap:var(--pharos-spacing-1-5);padding:0 var(--pharos-spacing-3);font-size:var(--pharos-font-size-sm);line-height:1.42857}._sizeMd_iu0wg_205{height:var(--pharos-spacing-10);gap:var(--pharos-spacing-2);padding:0 var(--pharos-spacing-4);font-size:var(--pharos-font-size-sm);line-height:1.42857}._sizeLg_iu0wg_213{height:var(--pharos-spacing-12);gap:var(--pharos-spacing-2);padding:0 var(--pharos-spacing-6);font-size:var(--pharos-font-size-base);line-height:1.5}._card_yxgwa_10{background-color:var(--pharos-color-base-white);border-radius:var(--pharos-radius-2xl);gap:var(--pharos-spacing-6);font-family:var(--pharos-font-family-sans);color:var(--pharos-color-neutral-900);transition-property:border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);border:0 solid #0000;flex-direction:column;display:flex}._default_yxgwa_42{border:1px solid var(--pharos-color-neutral-200)}._elevated_yxgwa_46{box-shadow:var(--pharos-shadow-md);border:0 solid #0000}._outlined_yxgwa_51{border:1px solid var(--pharos-color-neutral-300)}._header_yxgwa_62{gap:var(--pharos-spacing-1-5);padding:var(--pharos-spacing-6) var(--pharos-spacing-6) 0;flex-direction:column;display:flex}._title_yxgwa_69{font-size:var(--pharos-font-size-base);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-900);margin:0;line-height:1.25}._description_yxgwa_77{font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-regular);color:var(--pharos-color-neutral-500);margin:0;line-height:1.5}._content_yxgwa_85{padding:0 var(--pharos-spacing-6)}._footer_yxgwa_95{align-items:center;gap:var(--pharos-spacing-3);padding:0 var(--pharos-spacing-6) var(--pharos-spacing-6);display:flex}._root_1v9tz_14{box-sizing:border-box;width:var(--pharos-spacing-5);height:var(--pharos-spacing-5);border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-sm);background-color:var(--pharos-color-base-white);color:var(--pharos-color-base-white);cursor:pointer;transition-property:background-color,border-color,box-shadow;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}._root_1v9tz_14:hover:not([data-disabled]):not([data-checked]):not([data-indeterminate]){border-color:var(--pharos-color-neutral-700)}._root_1v9tz_14[data-checked],._root_1v9tz_14[data-indeterminate]{background-color:var(--pharos-color-neutral-900);border-color:var(--pharos-color-neutral-900)}._root_1v9tz_14[aria-invalid=true]{border-color:var(--pharos-color-semantic-error-fg)}._root_1v9tz_14:focus-visible{box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._root_1v9tz_14[data-disabled]{cursor:not-allowed;opacity:.5}._indicator_1v9tz_65{color:var(--pharos-color-base-white);justify-content:center;align-items:center;display:inline-flex}._icon_1v9tz_72{width:var(--pharos-spacing-3);height:var(--pharos-spacing-3)}._iconIndeterminate_1v9tz_79,._indicator_1v9tz_65[data-indeterminate] ._iconCheck_1v9tz_83{display:none}._indicator_1v9tz_65[data-indeterminate] ._iconIndeterminate_1v9tz_79{display:block}._control_1toh3_5{box-sizing:border-box;align-items:center;gap:var(--pharos-spacing-2);border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-md);background-color:var(--pharos-color-base-white);width:100%;font-family:var(--pharos-font-family-sans);transition-property:border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);display:flex}._control_1toh3_5:focus-within{border-color:var(--pharos-color-primary-600);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600)}._control_1toh3_5[aria-invalid=true]{border-color:var(--pharos-color-semantic-error-fg)}._control_1toh3_5:has([aria-invalid=true]){border-color:var(--pharos-color-semantic-error-fg)}._chips_1toh3_61{gap:var(--pharos-spacing-1);padding:var(--pharos-spacing-1) var(--pharos-spacing-2);flex-wrap:wrap}._input_1toh3_70{appearance:none;min-width:0;color:var(--pharos-color-neutral-900);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-regular);background:0 0;border:none;outline:none;flex:auto;margin:0;line-height:1.25}._input_1toh3_70::placeholder{color:var(--pharos-color-neutral-500);opacity:1}._input_1toh3_70:disabled{cursor:not-allowed}._inputSizeSm_1toh3_99{height:var(--pharos-spacing-8);padding:0 var(--pharos-spacing-3)}._inputSizeMd_1toh3_104{height:var(--pharos-spacing-10);padding:0 var(--pharos-spacing-4)}._inputSizeLg_1toh3_109{height:var(--pharos-spacing-12);padding:0 var(--pharos-spacing-6);font-size:var(--pharos-font-size-base)}._chipsInput_1toh3_117{height:var(--pharos-spacing-7);padding:0 var(--pharos-spacing-1);flex:4rem}._trigger_1toh3_124,._clear_1toh3_125{width:var(--pharos-spacing-6);height:var(--pharos-spacing-6);color:var(--pharos-color-neutral-500);cursor:default;background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-inline-end:var(--pharos-spacing-1);padding:0;display:inline-flex}._trigger_1toh3_124 svg,._clear_1toh3_125 svg{width:1rem;height:1rem}._trigger_1toh3_124[data-popup-open] svg{transition:transform var(--pharos-duration-fast) var(--pharos-easing-out);transform:rotate(180deg)}._chip_1toh3_61{align-items:center;gap:var(--pharos-spacing-1);padding:0 var(--pharos-spacing-1) 0 var(--pharos-spacing-2);height:var(--pharos-spacing-6);border-radius:var(--pharos-radius-sm);background-color:var(--pharos-color-neutral-100);color:var(--pharos-color-neutral-900);font-size:var(--pharos-font-size-xs);display:inline-flex}._chip_1toh3_61[data-highlighted]{background-color:var(--pharos-color-neutral-200)}._chipRemove_1toh3_169{width:var(--pharos-spacing-4);height:var(--pharos-spacing-4);border-radius:var(--pharos-radius-sm);color:var(--pharos-color-neutral-500);cursor:default;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._chipRemove_1toh3_169:hover{color:var(--pharos-color-neutral-900)}._chipRemove_1toh3_169 svg{width:.875rem;height:.875rem}._positioner_1toh3_203{z-index:var(--pharos-z-index-popover,1000)}._content_1toh3_193{box-sizing:border-box;width:var(--anchor-width);max-height:var(--available-height);padding:var(--pharos-spacing-1);background-color:var(--pharos-color-base-white);border:1px solid var(--pharos-color-neutral-200);border-radius:var(--pharos-radius-md);box-shadow:var(--pharos-shadow-lg);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-900);transform-origin:var(--transform-origin);transition-property:opacity,transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);outline:none;overflow-y:auto}._content_1toh3_193[data-starting-style],._content_1toh3_193[data-ending-style]{opacity:0;transform:scale(.96)}._item_1toh3_14{align-items:center;gap:var(--pharos-spacing-2);padding:var(--pharos-spacing-2) var(--pharos-spacing-3);border-radius:var(--pharos-radius-sm);color:var(--pharos-color-neutral-900);cursor:default;-webkit-user-select:none;user-select:none;scroll-margin:var(--pharos-spacing-1);outline:none;display:flex;position:relative}._item_1toh3_14[data-highlighted]{background-color:var(--pharos-color-neutral-100)}._item_1toh3_14[data-disabled]{color:var(--pharos-color-neutral-400);pointer-events:none}._itemText_1toh3_14{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._itemIndicator_1toh3_272{color:var(--pharos-color-primary-600);flex:none;justify-content:center;align-items:center;display:inline-flex}._itemIndicator_1toh3_272 svg{width:1rem;height:1rem}._empty_1toh3_294{color:var(--pharos-color-neutral-500);text-align:center}._empty_1toh3_294:not(:empty){padding:var(--pharos-spacing-3)}._label_1toh3_304{padding:var(--pharos-spacing-2) var(--pharos-spacing-3) var(--pharos-spacing-1);font-size:var(--pharos-font-size-xs);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-600)}._separator_1toh3_311{height:1px;margin:var(--pharos-spacing-1) 0;background-color:var(--pharos-color-neutral-200)}@media (pointer:coarse){._input_1toh3_70{font-size:var(--pharos-font-size-base)}}._backdrop_mozml_18{z-index:var(--pharos-z-index-popover,1000);background-color:color-mix(in srgb, var(--pharos-color-base-black) 50%, transparent);transition:opacity var(--pharos-duration-normal) var(--pharos-easing-out);position:fixed;inset:0}._backdrop_mozml_18[data-starting-style],._backdrop_mozml_18[data-ending-style]{opacity:0}._content_mozml_32{transform-origin:50%;z-index:var(--pharos-z-index-popover,1000);box-sizing:border-box;width:calc(100% - 2 * var(--pharos-spacing-4));max-width:32rem;max-height:calc(100dvh - 2 * var(--pharos-spacing-6));gap:var(--pharos-spacing-4);padding:var(--pharos-spacing-6);background-color:var(--pharos-color-base-white);border-radius:var(--pharos-radius-lg);box-shadow:var(--pharos-shadow-xl);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-900);transition-property:opacity,transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);outline:none;flex-direction:column;display:flex;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}._content_mozml_32[data-starting-style],._content_mozml_32[data-ending-style]{opacity:0;transform:translate(-50%,-50%)scale(.96)}._header_mozml_75{gap:var(--pharos-spacing-1);flex-direction:column;display:flex}._title_mozml_81{font-size:var(--pharos-font-size-lg);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-900);margin:0;line-height:1.4}._description_mozml_89{font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-600);margin:0;line-height:1.5}._footer_mozml_96{gap:var(--pharos-spacing-2);justify-content:flex-end;margin-top:auto;display:flex}._positioner_ua6x3_9{z-index:var(--pharos-z-index-popover,1000)}._content_ua6x3_4{box-sizing:border-box;min-width:12rem;padding:var(--pharos-spacing-1);background-color:var(--pharos-color-base-white);border:1px solid var(--pharos-color-neutral-200);border-radius:var(--pharos-radius-md);box-shadow:var(--pharos-shadow-lg);font-family:var(--pharos-font-family-sans);color:var(--pharos-color-neutral-900);transform-origin:var(--transform-origin);transition-property:opacity,transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out)}._content_ua6x3_4[data-starting-style],._content_ua6x3_4[data-ending-style]{opacity:0;transform:scale(.96)}._item_ua6x3_5{box-sizing:border-box;align-items:center;gap:var(--pharos-spacing-2);width:100%;padding:var(--pharos-spacing-1-5) var(--pharos-spacing-2);border-radius:var(--pharos-radius-sm);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-medium);color:var(--pharos-color-neutral-700);cursor:default;-webkit-user-select:none;user-select:none;scroll-margin:var(--pharos-spacing-1);transition-property:background-color,color;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);outline:none;line-height:1.25;display:flex}._item_ua6x3_5[data-highlighted]{background-color:var(--pharos-color-neutral-100);color:var(--pharos-color-neutral-900)}._item_ua6x3_5[data-disabled]{color:var(--pharos-color-neutral-500);opacity:.6;pointer-events:none}._item_ua6x3_5>svg{flex-shrink:0;width:1rem;height:1rem}._itemDestructive_ua6x3_113{color:var(--pharos-color-semantic-error-fg)}._itemDestructive_ua6x3_113[data-highlighted]{background-color:var(--pharos-color-semantic-error-bg);color:var(--pharos-color-semantic-error-fg-hover)}._separator_ua6x3_6{height:1px;margin:var(--pharos-spacing-1) calc(var(--pharos-spacing-1) * -1);background-color:var(--pharos-color-neutral-200)}._label_ua6x3_6{padding:var(--pharos-spacing-1-5) var(--pharos-spacing-2);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-500)}._button_ltuh2_14{appearance:none;box-sizing:border-box;border-radius:var(--pharos-radius-full);-webkit-user-select:none;user-select:none;cursor:pointer;color:inherit;font-family:var(--pharos-font-family-sans);transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);background-color:#0000;border:0 solid #0000;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}._button_ltuh2_14:focus-visible{box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--icon-button-focus-ring,var(--pharos-color-primary-600));outline:none}._button_ltuh2_14:disabled{pointer-events:none;cursor:not-allowed;opacity:.5}._primary_ltuh2_74{background-color:var(--pharos-color-neutral-900);color:var(--pharos-color-base-white);--icon-button-focus-ring:var(--pharos-color-primary-600)}._primary_ltuh2_74:hover{background-color:var(--pharos-color-neutral-700)}._primary_ltuh2_74:active{background-color:var(--pharos-color-neutral-950)}._secondary_ltuh2_88{background-color:var(--pharos-color-base-white);color:var(--pharos-color-neutral-900);border:1px solid var(--pharos-color-neutral-500);--icon-button-focus-ring:var(--pharos-color-primary-600)}._secondary_ltuh2_88:hover{background-color:var(--pharos-color-neutral-50)}._secondary_ltuh2_88:active{background-color:var(--pharos-color-neutral-100)}._ghost_ltuh2_107{color:var(--pharos-color-neutral-900);--icon-button-focus-ring:var(--pharos-color-primary-600);background-color:#0000}._ghost_ltuh2_107:hover{background-color:var(--pharos-color-neutral-100)}._ghost_ltuh2_107:active{background-color:var(--pharos-color-neutral-200)}._destructive_ltuh2_121{background-color:var(--pharos-color-semantic-error-fg);color:var(--pharos-color-semantic-error-on);--icon-button-focus-ring:var(--pharos-color-semantic-error-fg)}._destructive_ltuh2_121:hover{background-color:var(--pharos-color-semantic-error-fg-hover)}._destructive_ltuh2_121:active{background-color:var(--pharos-color-semantic-error-fg-active)}._sizeSm_ltuh2_150{width:var(--pharos-spacing-8);height:var(--pharos-spacing-8)}._sizeSm_ltuh2_150>svg{width:var(--pharos-spacing-4);height:var(--pharos-spacing-4)}._sizeMd_ltuh2_160{width:var(--pharos-spacing-10);height:var(--pharos-spacing-10)}._sizeMd_ltuh2_160>svg{width:var(--pharos-spacing-5);height:var(--pharos-spacing-5)}._sizeLg_ltuh2_170{width:var(--pharos-spacing-12);height:var(--pharos-spacing-12)}._sizeLg_ltuh2_170>svg{width:var(--pharos-spacing-6);height:var(--pharos-spacing-6)}@keyframes _pharos-spinner-spin_gg970_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._spinner_gg970_28{color:currentColor;vertical-align:middle;justify-content:center;align-items:center;display:inline-flex}._icon_gg970_46{width:100%;height:100%;animation:_pharos-spinner-spin_gg970_1 var(--pharos-duration-slow,1s) linear infinite}@media (prefers-reduced-motion:reduce){._icon_gg970_46{animation-duration:4s}}._sizeSm_gg970_69{width:var(--pharos-spacing-4);height:var(--pharos-spacing-4)}._sizeMd_gg970_74{width:var(--pharos-spacing-5);height:var(--pharos-spacing-5)}._sizeLg_gg970_79{width:var(--pharos-spacing-6);height:var(--pharos-spacing-6)}._srOnly_gg970_87{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._input_1ueoc_14{appearance:none;box-sizing:border-box;border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-md);background-color:var(--pharos-color-base-white);width:100%;color:var(--pharos-color-neutral-900);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-regular);transition-property:border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);margin:0;line-height:1.25}._input_1ueoc_14::placeholder{color:var(--pharos-color-neutral-500);opacity:1}._input_1ueoc_14:focus-visible{border-color:var(--pharos-color-primary-600);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._input_1ueoc_14:disabled{cursor:not-allowed;opacity:.5}._input_1ueoc_14[aria-invalid=true]{border-color:var(--pharos-color-semantic-error-fg)}._input_1ueoc_14[aria-invalid=true]:focus-visible{border-color:var(--pharos-color-semantic-error-fg);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-semantic-error-fg)}._sizeSm_1ueoc_97{height:var(--pharos-spacing-8);padding:0 var(--pharos-spacing-3);font-size:var(--pharos-font-size-sm)}._sizeMd_1ueoc_103{height:var(--pharos-spacing-10);padding:0 var(--pharos-spacing-4);font-size:var(--pharos-font-size-sm)}._sizeLg_1ueoc_109{height:var(--pharos-spacing-12);padding:0 var(--pharos-spacing-6);font-size:var(--pharos-font-size-base)}@media (pointer:coarse){._input_1ueoc_14,._sizeSm_1ueoc_97,._sizeMd_1ueoc_103{font-size:var(--pharos-font-size-base)}}._positioner_ga28p_15{z-index:var(--pharos-z-index-popover,1000)}._content_ga28p_4{box-sizing:border-box;max-width:20rem;padding:var(--pharos-spacing-4);background-color:var(--pharos-color-base-white);border:1px solid var(--pharos-color-neutral-200);border-radius:var(--pharos-radius-md);box-shadow:var(--pharos-shadow-lg);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-900);transform-origin:var(--transform-origin);transition-property:opacity,transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);outline:none}._content_ga28p_4[data-starting-style],._content_ga28p_4[data-ending-style]{opacity:0;transform:scale(.96)}._title_ga28p_5{font-size:var(--pharos-font-size-base);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-900);margin:0;line-height:1.4}._description_ga28p_5{margin:var(--pharos-spacing-1) 0 0;font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-600);line-height:1.5}._group_rsllu_18{gap:var(--pharos-spacing-2);flex-direction:column;display:flex}._item_rsllu_24{box-sizing:border-box;width:var(--pharos-spacing-5);height:var(--pharos-spacing-5);border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-full);background-color:var(--pharos-color-base-white);cursor:pointer;transition-property:background-color,border-color,box-shadow;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}._item_rsllu_24:hover:not([data-disabled]):not([data-checked]){border-color:var(--pharos-color-neutral-700)}._item_rsllu_24[data-checked]{border-color:var(--pharos-color-neutral-900)}._group_rsllu_18[aria-invalid=true] ._item_rsllu_24{border-color:var(--pharos-color-semantic-error-fg)}._item_rsllu_24:focus-visible{box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._item_rsllu_24[data-disabled]{cursor:not-allowed;opacity:.5}._indicator_rsllu_75{width:var(--pharos-spacing-2);height:var(--pharos-spacing-2);border-radius:var(--pharos-radius-full);background-color:var(--pharos-color-neutral-900);display:inline-flex}._trigger_1w6j6_35{appearance:none;box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--pharos-spacing-2);border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-md);background-color:var(--pharos-color-base-white);width:100%;color:var(--pharos-color-neutral-900);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-regular);text-align:start;cursor:default;transition-property:border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);margin:0;line-height:1.25;display:inline-flex}._trigger_1w6j6_35:focus-visible{border-color:var(--pharos-color-primary-600);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._trigger_1w6j6_35:disabled,._trigger_1w6j6_35[data-disabled]{cursor:not-allowed;opacity:.5}._trigger_1w6j6_35[aria-invalid=true]{border-color:var(--pharos-color-semantic-error-fg)}._trigger_1w6j6_35[aria-invalid=true]:focus-visible{border-color:var(--pharos-color-semantic-error-fg);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-semantic-error-fg)}._sizeSm_1w6j6_92{height:var(--pharos-spacing-8);padding:0 var(--pharos-spacing-3);font-size:var(--pharos-font-size-sm)}._sizeMd_1w6j6_98{height:var(--pharos-spacing-10);padding:0 var(--pharos-spacing-4);font-size:var(--pharos-font-size-sm)}._sizeLg_1w6j6_104{height:var(--pharos-spacing-12);padding:0 var(--pharos-spacing-6);font-size:var(--pharos-font-size-base)}._value_1w6j6_113{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._value_1w6j6_113[data-placeholder]{color:var(--pharos-color-neutral-500)}._icon_1w6j6_127{color:var(--pharos-color-neutral-500);transition:transform var(--pharos-duration-fast) var(--pharos-easing-out);flex:none;justify-content:center;align-items:center;display:inline-flex}._icon_1w6j6_127 svg{width:1rem;height:1rem}._icon_1w6j6_127[data-popup-open]{transform:rotate(180deg)}._positioner_1w6j6_24{z-index:var(--pharos-z-index-popover,1000)}._content_1w6j6_146{box-sizing:border-box;width:var(--anchor-width);max-height:var(--available-height);padding:var(--pharos-spacing-1);background-color:var(--pharos-color-base-white);border:1px solid var(--pharos-color-neutral-200);border-radius:var(--pharos-radius-md);box-shadow:var(--pharos-shadow-lg);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-900);transform-origin:var(--transform-origin);transition-property:opacity,transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);outline:none;overflow-y:auto}._content_1w6j6_146[data-starting-style],._content_1w6j6_146[data-ending-style]{opacity:0;transform:scale(.96)}._item_1w6j6_17{align-items:center;gap:var(--pharos-spacing-2);padding:var(--pharos-spacing-2) var(--pharos-spacing-3);border-radius:var(--pharos-radius-sm);color:var(--pharos-color-neutral-900);cursor:default;-webkit-user-select:none;user-select:none;scroll-margin:var(--pharos-spacing-1);outline:none;display:flex;position:relative}._item_1w6j6_17[data-highlighted]{background-color:var(--pharos-color-neutral-100)}._item_1w6j6_17[data-disabled]{color:var(--pharos-color-neutral-400);pointer-events:none}._itemText_1w6j6_17{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._itemIndicator_1w6j6_228{color:var(--pharos-color-primary-600);flex:none;justify-content:center;align-items:center;display:inline-flex}._itemIndicator_1w6j6_228 svg{width:1rem;height:1rem}._label_1w6j6_242{padding:var(--pharos-spacing-2) var(--pharos-spacing-3) var(--pharos-spacing-1);font-size:var(--pharos-font-size-xs);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-600)}._separator_1w6j6_250{height:1px;margin:var(--pharos-spacing-1) 0;background-color:var(--pharos-color-neutral-200)}._separator_da90p_13{background-color:var(--pharos-color-neutral-200);border:0;flex-shrink:0;margin:0}._horizontal_da90p_29{width:100%;height:1px}._vertical_da90p_34{width:1px;height:100%}._backdrop_1pbfd_21{z-index:var(--pharos-z-index-popover,1000);background-color:color-mix(in srgb, var(--pharos-color-base-black) 50%, transparent);transition:opacity var(--pharos-duration-normal) var(--pharos-easing-out);position:fixed;inset:0}._backdrop_1pbfd_21[data-starting-style],._backdrop_1pbfd_21[data-ending-style]{opacity:0}._content_1pbfd_37{z-index:var(--pharos-z-index-popover,1000);box-sizing:border-box;gap:var(--pharos-spacing-4);padding:var(--pharos-spacing-6);background-color:var(--pharos-color-base-white);box-shadow:var(--pharos-shadow-xl);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-900);transition:transform var(--pharos-duration-normal) var(--pharos-easing-out);outline:none;flex-direction:column;display:flex;position:fixed;overflow-y:auto}._sideRight_1pbfd_60{border-left:1px solid var(--pharos-color-neutral-200);width:min(24rem,100vw);height:100dvh;top:0;bottom:0;right:0}._sideRight_1pbfd_60[data-starting-style],._sideRight_1pbfd_60[data-ending-style]{transform:translate(100%)}._sideLeft_1pbfd_73{border-right:1px solid var(--pharos-color-neutral-200);width:min(24rem,100vw);height:100dvh;top:0;bottom:0;left:0}._sideLeft_1pbfd_73[data-starting-style],._sideLeft_1pbfd_73[data-ending-style]{transform:translate(-100%)}._sideTop_1pbfd_86{border-bottom:1px solid var(--pharos-color-neutral-200);width:100vw;max-height:100dvh;top:0;left:0;right:0}._sideTop_1pbfd_86[data-starting-style],._sideTop_1pbfd_86[data-ending-style]{transform:translateY(-100%)}._sideBottom_1pbfd_99{border-top:1px solid var(--pharos-color-neutral-200);width:100vw;max-height:100dvh;bottom:0;left:0;right:0}._sideBottom_1pbfd_99[data-starting-style],._sideBottom_1pbfd_99[data-ending-style]{transform:translateY(100%)}._header_1pbfd_113{gap:var(--pharos-spacing-1);flex-direction:column;display:flex}._title_1pbfd_119{font-size:var(--pharos-font-size-lg);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-900);margin:0;line-height:1.4}._description_1pbfd_127{font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-600);margin:0;line-height:1.5}._footer_1pbfd_134{gap:var(--pharos-spacing-2);justify-content:flex-end;margin-top:auto;display:flex}._root_5v2er_17{box-sizing:border-box;width:var(--pharos-spacing-10);height:var(--pharos-spacing-6);padding:var(--pharos-spacing-1);border-radius:var(--pharos-radius-full);background-color:var(--pharos-color-neutral-300);cursor:pointer;transition-property:background-color,box-shadow;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);border:none;flex-shrink:0;align-items:center;display:inline-flex}._root_5v2er_17:hover:not([data-disabled]):not([data-checked]){background-color:var(--pharos-color-neutral-400)}._root_5v2er_17[data-checked]{background-color:var(--pharos-color-neutral-900)}._root_5v2er_17[data-checked]:hover:not([data-disabled]){background-color:var(--pharos-color-neutral-700)}._root_5v2er_17[aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--pharos-color-semantic-error-fg)}._root_5v2er_17:focus-visible{box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._root_5v2er_17[data-disabled]{cursor:not-allowed;opacity:.5}._thumb_5v2er_72{box-sizing:border-box;width:var(--pharos-spacing-4);height:var(--pharos-spacing-4);border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-full);background-color:var(--pharos-color-base-white);transition-property:transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out)}._root_5v2er_17[data-checked] ._thumb_5v2er_72{transform:translateX(var(--pharos-spacing-4))}._textarea_145hb_21{appearance:none;box-sizing:border-box;border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-md);background-color:var(--pharos-color-base-white);width:100%;color:var(--pharos-color-neutral-900);resize:vertical;font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-regular);transition-property:border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);margin:0;line-height:1.5}._textarea_145hb_21::placeholder{color:var(--pharos-color-neutral-500);opacity:1}._textarea_145hb_21:focus-visible{border-color:var(--pharos-color-primary-600);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._textarea_145hb_21:disabled{cursor:not-allowed;opacity:.5;resize:none}._textarea_145hb_21[aria-invalid=true]{border-color:var(--pharos-color-semantic-error-fg)}._textarea_145hb_21[aria-invalid=true]:focus-visible{border-color:var(--pharos-color-semantic-error-fg);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-semantic-error-fg)}._sizeSm_145hb_113{min-height:var(--pharos-spacing-16);padding:var(--pharos-spacing-2) var(--pharos-spacing-3);font-size:var(--pharos-font-size-sm)}._sizeMd_145hb_119{min-height:var(--pharos-spacing-20);padding:var(--pharos-spacing-2-5) var(--pharos-spacing-4);font-size:var(--pharos-font-size-sm)}._sizeLg_145hb_125{min-height:var(--pharos-spacing-24);padding:var(--pharos-spacing-3) var(--pharos-spacing-6);font-size:var(--pharos-font-size-base)}@media (pointer:coarse){._textarea_145hb_21,._sizeSm_145hb_113,._sizeMd_145hb_119{font-size:var(--pharos-font-size-base)}}
|
|
1
|
+
._root_1xx27_21{box-sizing:border-box;background-color:var(--pharos-color-neutral-100);color:var(--pharos-color-neutral-700);font-family:var(--pharos-font-family-sans);-webkit-user-select:none;user-select:none;--pharos-avatar-overlap:calc(var(--pharos-spacing-2) * -1);flex-shrink:0;justify-content:center;align-items:center;font-weight:500;line-height:1;display:inline-flex;position:relative;overflow:hidden}._shapeCircle_1xx27_63{border-radius:var(--pharos-radius-full)}._shapeSquare_1xx27_67{border-radius:var(--pharos-radius-md)}._sizeSm_1xx27_86{width:var(--pharos-spacing-8);height:var(--pharos-spacing-8);--pharos-avatar-overlap:calc(var(--pharos-spacing-2) * -.75);font-size:.75rem}._sizeMd_1xx27_93{width:var(--pharos-spacing-10);height:var(--pharos-spacing-10);--pharos-avatar-overlap:calc(var(--pharos-spacing-2) * -1);font-size:.875rem}._sizeLg_1xx27_100{width:var(--pharos-spacing-12);height:var(--pharos-spacing-12);--pharos-avatar-overlap:calc(var(--pharos-spacing-2) * -1.25);font-size:1rem}._image_1xx27_118{object-fit:cover;border-radius:inherit;width:100%;height:100%;display:block;position:absolute;inset:0}._fallback_1xx27_134{text-align:center;width:100%;height:100%;font:inherit;color:inherit;justify-content:center;align-items:center;display:inline-flex}._sizeSm_1xx27_86 ._fallback_1xx27_134>svg{width:var(--pharos-spacing-5);height:var(--pharos-spacing-5)}._sizeMd_1xx27_93 ._fallback_1xx27_134>svg{width:var(--pharos-spacing-6);height:var(--pharos-spacing-6)}._sizeLg_1xx27_100 ._fallback_1xx27_134>svg{width:var(--pharos-spacing-7);height:var(--pharos-spacing-7)}._group_1xx27_175{align-items:center;display:inline-flex}._group_1xx27_175>._root_1xx27_21{box-shadow:0 0 0 2px var(--pharos-avatar-group-ring,var(--pharos-color-base-white));position:relative}._group_1xx27_175>._root_1xx27_21+._root_1xx27_21{margin-left:var(--pharos-avatar-overlap)}._badge_zrawy_5{align-items:center;gap:var(--pharos-spacing-1);padding:0 var(--pharos-spacing-2);height:var(--pharos-spacing-5);border-radius:var(--pharos-radius-full);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-xs);font-weight:var(--pharos-font-weight-medium);white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic;border:1px solid #0000;width:fit-content;line-height:1;display:inline-flex}._badge_zrawy_5>svg{pointer-events:none;flex:none;width:.75em;height:.75em}._default_zrawy_30{background:var(--pharos-color-neutral-900);color:var(--pharos-color-base-white)}._secondary_zrawy_35{background:var(--pharos-color-neutral-100);color:var(--pharos-color-neutral-900)}._destructive_zrawy_40{background:var(--pharos-color-semantic-error-fg);color:var(--pharos-color-semantic-error-on)}._outline_zrawy_45{color:var(--pharos-color-neutral-900);border-color:var(--pharos-color-neutral-500);background:0 0}._success_zrawy_55{background:var(--pharos-color-semantic-success-fg);color:var(--pharos-color-semantic-success-on)}._warning_zrawy_60{background:var(--pharos-color-semantic-warning-fg);color:var(--pharos-color-semantic-warning-on)}._info_zrawy_65{background:var(--pharos-color-semantic-info-fg);color:var(--pharos-color-semantic-info-on)}._button_iu0wg_18{appearance:none;box-sizing:border-box;border-radius:var(--pharos-radius-full);white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic;font-family:var(--pharos-font-family-sans);font-style:normal;font-weight:var(--pharos-font-weight-medium);font-variant:normal;font-kerning:auto;font-optical-sizing:auto;font-size-adjust:none;font-feature-settings:normal;font-variation-settings:normal;letter-spacing:normal;text-transform:none;font-stretch:100%;font-size:var(--pharos-font-size-sm);-webkit-user-select:none;user-select:none;cursor:pointer;color:inherit;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);background-color:#0000;border:0 solid #0000;justify-content:center;align-items:center;margin:0;padding-top:0;padding-bottom:0;line-height:1.5;text-decoration:none;display:inline-flex}._button_iu0wg_18:focus-visible{box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--button-focus-ring,var(--pharos-color-primary-600));outline:none}._button_iu0wg_18:disabled{pointer-events:none;cursor:not-allowed;opacity:.5}._primary_iu0wg_127{background-color:var(--pharos-color-neutral-900);color:var(--pharos-color-base-white);--button-focus-ring:var(--pharos-color-primary-600)}._primary_iu0wg_127:hover{background-color:var(--pharos-color-neutral-700)}._primary_iu0wg_127:active{background-color:var(--pharos-color-neutral-950)}._secondary_iu0wg_141{background-color:var(--pharos-color-base-white);color:var(--pharos-color-neutral-900);border:1px solid var(--pharos-color-neutral-500);--button-focus-ring:var(--pharos-color-primary-600)}._secondary_iu0wg_141:hover{background-color:var(--pharos-color-neutral-50)}._secondary_iu0wg_141:active{background-color:var(--pharos-color-neutral-100)}._ghost_iu0wg_161{color:var(--pharos-color-neutral-900);--button-focus-ring:var(--pharos-color-primary-600);background-color:#0000}._ghost_iu0wg_161:hover{background-color:var(--pharos-color-neutral-100)}._ghost_iu0wg_161:active{background-color:var(--pharos-color-neutral-200)}._destructive_iu0wg_175{background-color:var(--pharos-color-semantic-error-fg);color:var(--pharos-color-semantic-error-on);--button-focus-ring:var(--pharos-color-semantic-error-fg)}._destructive_iu0wg_175:hover{background-color:var(--pharos-color-semantic-error-fg-hover)}._destructive_iu0wg_175:active{background-color:var(--pharos-color-semantic-error-fg-active)}._sizeSm_iu0wg_197{height:var(--pharos-spacing-8);gap:var(--pharos-spacing-1-5);padding:0 var(--pharos-spacing-3);font-size:var(--pharos-font-size-sm);line-height:1.42857}._sizeMd_iu0wg_205{height:var(--pharos-spacing-10);gap:var(--pharos-spacing-2);padding:0 var(--pharos-spacing-4);font-size:var(--pharos-font-size-sm);line-height:1.42857}._sizeLg_iu0wg_213{height:var(--pharos-spacing-12);gap:var(--pharos-spacing-2);padding:0 var(--pharos-spacing-6);font-size:var(--pharos-font-size-base);line-height:1.5}._card_yxgwa_10{background-color:var(--pharos-color-base-white);border-radius:var(--pharos-radius-2xl);gap:var(--pharos-spacing-6);font-family:var(--pharos-font-family-sans);color:var(--pharos-color-neutral-900);transition-property:border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);border:0 solid #0000;flex-direction:column;display:flex}._default_yxgwa_42{border:1px solid var(--pharos-color-neutral-200)}._elevated_yxgwa_46{box-shadow:var(--pharos-shadow-md);border:0 solid #0000}._outlined_yxgwa_51{border:1px solid var(--pharos-color-neutral-300)}._header_yxgwa_62{gap:var(--pharos-spacing-1-5);padding:var(--pharos-spacing-6) var(--pharos-spacing-6) 0;flex-direction:column;display:flex}._title_yxgwa_69{font-size:var(--pharos-font-size-base);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-900);margin:0;line-height:1.25}._description_yxgwa_77{font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-regular);color:var(--pharos-color-neutral-500);margin:0;line-height:1.5}._content_yxgwa_85{padding:0 var(--pharos-spacing-6)}._footer_yxgwa_95{align-items:center;gap:var(--pharos-spacing-3);padding:0 var(--pharos-spacing-6) var(--pharos-spacing-6);display:flex}._root_1v9tz_14{box-sizing:border-box;width:var(--pharos-spacing-5);height:var(--pharos-spacing-5);border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-sm);background-color:var(--pharos-color-base-white);color:var(--pharos-color-base-white);cursor:pointer;transition-property:background-color,border-color,box-shadow;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}._root_1v9tz_14:hover:not([data-disabled]):not([data-checked]):not([data-indeterminate]){border-color:var(--pharos-color-neutral-700)}._root_1v9tz_14[data-checked],._root_1v9tz_14[data-indeterminate]{background-color:var(--pharos-color-neutral-900);border-color:var(--pharos-color-neutral-900)}._root_1v9tz_14[aria-invalid=true]{border-color:var(--pharos-color-semantic-error-fg)}._root_1v9tz_14:focus-visible{box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._root_1v9tz_14[data-disabled]{cursor:not-allowed;opacity:.5}._indicator_1v9tz_65{color:var(--pharos-color-base-white);justify-content:center;align-items:center;display:inline-flex}._icon_1v9tz_72{width:var(--pharos-spacing-3);height:var(--pharos-spacing-3)}._iconIndeterminate_1v9tz_79,._indicator_1v9tz_65[data-indeterminate] ._iconCheck_1v9tz_83{display:none}._indicator_1v9tz_65[data-indeterminate] ._iconIndeterminate_1v9tz_79{display:block}._control_1owey_5{box-sizing:border-box;align-items:center;gap:var(--pharos-spacing-2);border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-md);background-color:var(--pharos-color-base-white);width:100%;font-family:var(--pharos-font-family-sans);transition-property:border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);display:flex}._control_1owey_5:focus-within{border-color:var(--pharos-color-primary-600);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600)}._control_1owey_5[aria-invalid=true]{border-color:var(--pharos-color-semantic-error-fg)}._control_1owey_5:has([aria-invalid=true]){border-color:var(--pharos-color-semantic-error-fg)}._chips_1owey_61{gap:var(--pharos-spacing-1);padding:var(--pharos-spacing-1) var(--pharos-spacing-2);flex-wrap:wrap}._input_1owey_70{appearance:none;min-width:0;color:var(--pharos-color-neutral-900);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-regular);background:0 0;border:none;outline:none;flex:auto;margin:0;line-height:1.25}._input_1owey_70::placeholder{color:var(--pharos-color-neutral-500);opacity:1}._input_1owey_70:disabled{cursor:not-allowed}._inputSizeSm_1owey_99{height:var(--pharos-spacing-8);padding:0 var(--pharos-spacing-3)}._inputSizeMd_1owey_104{height:var(--pharos-spacing-10);padding:0 var(--pharos-spacing-4)}._inputSizeLg_1owey_109{height:var(--pharos-spacing-12);padding:0 var(--pharos-spacing-6);font-size:var(--pharos-font-size-base)}._chipsInput_1owey_117{height:var(--pharos-spacing-7);padding:0 var(--pharos-spacing-1);flex:4rem}._trigger_1owey_124,._clear_1owey_125{width:var(--pharos-spacing-6);height:var(--pharos-spacing-6);color:var(--pharos-color-neutral-500);cursor:default;background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-inline-end:var(--pharos-spacing-1);padding:0;display:inline-flex}._trigger_1owey_124 svg,._clear_1owey_125 svg{width:1rem;height:1rem}._trigger_1owey_124[data-popup-open] svg{transition:transform var(--pharos-duration-fast) var(--pharos-easing-out);transform:rotate(180deg)}._chip_1owey_61{align-items:center;gap:var(--pharos-spacing-1);padding:0 var(--pharos-spacing-1) 0 var(--pharos-spacing-2);height:var(--pharos-spacing-6);border-radius:var(--pharos-radius-sm);background-color:var(--pharos-color-neutral-100);color:var(--pharos-color-neutral-900);font-size:var(--pharos-font-size-xs);display:inline-flex}._chip_1owey_61[data-highlighted]{background-color:var(--pharos-color-neutral-200)}._chipRemove_1owey_169{width:var(--pharos-spacing-4);height:var(--pharos-spacing-4);border-radius:var(--pharos-radius-sm);color:var(--pharos-color-neutral-500);cursor:default;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._chipRemove_1owey_169:hover{color:var(--pharos-color-neutral-900)}._chipRemove_1owey_169 svg{width:.875rem;height:.875rem}._positioner_1owey_204{z-index:var(--pharos-z-index-popover,1500)}._content_1owey_193{box-sizing:border-box;width:var(--anchor-width);max-height:var(--available-height);padding:var(--pharos-spacing-1);background-color:var(--pharos-color-base-white);border:1px solid var(--pharos-color-neutral-200);border-radius:var(--pharos-radius-md);box-shadow:var(--pharos-shadow-lg);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-900);transform-origin:var(--transform-origin);transition-property:opacity,transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);outline:none;overflow-y:auto}._content_1owey_193[data-starting-style],._content_1owey_193[data-ending-style]{opacity:0;transform:scale(.96)}._item_1owey_14{align-items:flex-start;gap:var(--pharos-spacing-2);padding:var(--pharos-spacing-2) var(--pharos-spacing-3);border-radius:var(--pharos-radius-sm);color:var(--pharos-color-neutral-900);cursor:default;-webkit-user-select:none;user-select:none;scroll-margin:var(--pharos-spacing-1);outline:none;display:flex;position:relative}._item_1owey_14[data-highlighted]{background-color:var(--pharos-color-neutral-100)}._item_1owey_14[data-disabled]{color:var(--pharos-color-neutral-400);pointer-events:none}._itemText_1owey_14{overflow-wrap:anywhere;white-space:normal;flex:auto;min-width:0}._itemIndicator_1owey_275{block-size:1lh;color:var(--pharos-color-primary-600);flex:none;justify-content:center;align-items:center;display:inline-flex}._itemIndicator_1owey_275 svg{width:1rem;height:1rem}._empty_1owey_299{color:var(--pharos-color-neutral-500);text-align:center}._empty_1owey_299:not(:empty){padding:var(--pharos-spacing-3)}._label_1owey_309{padding:var(--pharos-spacing-2) var(--pharos-spacing-3) var(--pharos-spacing-1);font-size:var(--pharos-font-size-xs);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-600)}._separator_1owey_316{height:1px;margin:var(--pharos-spacing-1) 0;background-color:var(--pharos-color-neutral-200)}@media (pointer:coarse){._input_1owey_70{font-size:var(--pharos-font-size-base)}}._backdrop_1gqfj_20{z-index:var(--pharos-z-index-modal,1400);background-color:color-mix(in srgb, var(--pharos-color-base-black) 50%, transparent);transition:opacity var(--pharos-duration-normal) var(--pharos-easing-out);position:fixed;inset:0}._backdrop_1gqfj_20[data-starting-style],._backdrop_1gqfj_20[data-ending-style]{opacity:0}._content_1gqfj_34{transform-origin:50%;z-index:var(--pharos-z-index-modal,1400);box-sizing:border-box;width:calc(100% - 2 * var(--pharos-spacing-4));max-width:32rem;max-height:calc(100dvh - 2 * var(--pharos-spacing-6));gap:var(--pharos-spacing-4);padding:var(--pharos-spacing-6);background-color:var(--pharos-color-base-white);border-radius:var(--pharos-radius-lg);box-shadow:var(--pharos-shadow-xl);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-900);transition-property:opacity,transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);outline:none;flex-direction:column;display:flex;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}._content_1gqfj_34[data-starting-style],._content_1gqfj_34[data-ending-style]{opacity:0;transform:translate(-50%,-50%)scale(.96)}._header_1gqfj_77{gap:var(--pharos-spacing-1);flex-direction:column;display:flex}._title_1gqfj_83{font-size:var(--pharos-font-size-lg);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-900);margin:0;line-height:1.4}._description_1gqfj_91{font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-600);margin:0;line-height:1.5}._footer_1gqfj_98{gap:var(--pharos-spacing-2);justify-content:flex-end;margin-top:auto;display:flex}._positioner_yfokk_9{z-index:var(--pharos-z-index-popover,1500)}._content_yfokk_4{box-sizing:border-box;min-width:12rem;padding:var(--pharos-spacing-1);background-color:var(--pharos-color-base-white);border:1px solid var(--pharos-color-neutral-200);border-radius:var(--pharos-radius-md);box-shadow:var(--pharos-shadow-lg);font-family:var(--pharos-font-family-sans);color:var(--pharos-color-neutral-900);transform-origin:var(--transform-origin);transition-property:opacity,transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out)}._content_yfokk_4[data-starting-style],._content_yfokk_4[data-ending-style]{opacity:0;transform:scale(.96)}._item_yfokk_5{box-sizing:border-box;align-items:center;gap:var(--pharos-spacing-2);width:100%;padding:var(--pharos-spacing-1-5) var(--pharos-spacing-2);border-radius:var(--pharos-radius-sm);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-medium);color:var(--pharos-color-neutral-700);cursor:default;-webkit-user-select:none;user-select:none;scroll-margin:var(--pharos-spacing-1);transition-property:background-color,color;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);outline:none;line-height:1.25;display:flex}._item_yfokk_5[data-highlighted]{background-color:var(--pharos-color-neutral-100);color:var(--pharos-color-neutral-900)}._item_yfokk_5[data-disabled]{color:var(--pharos-color-neutral-500);opacity:.6;pointer-events:none}._item_yfokk_5>svg{flex-shrink:0;width:1rem;height:1rem}._itemDestructive_yfokk_114{color:var(--pharos-color-semantic-error-fg)}._itemDestructive_yfokk_114[data-highlighted]{background-color:var(--pharos-color-semantic-error-bg);color:var(--pharos-color-semantic-error-fg-hover)}._separator_yfokk_6{height:1px;margin:var(--pharos-spacing-1) calc(var(--pharos-spacing-1) * -1);background-color:var(--pharos-color-neutral-200)}._label_yfokk_6{padding:var(--pharos-spacing-1-5) var(--pharos-spacing-2);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-500)}._button_ltuh2_14{appearance:none;box-sizing:border-box;border-radius:var(--pharos-radius-full);-webkit-user-select:none;user-select:none;cursor:pointer;color:inherit;font-family:var(--pharos-font-family-sans);transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);background-color:#0000;border:0 solid #0000;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}._button_ltuh2_14:focus-visible{box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--icon-button-focus-ring,var(--pharos-color-primary-600));outline:none}._button_ltuh2_14:disabled{pointer-events:none;cursor:not-allowed;opacity:.5}._primary_ltuh2_74{background-color:var(--pharos-color-neutral-900);color:var(--pharos-color-base-white);--icon-button-focus-ring:var(--pharos-color-primary-600)}._primary_ltuh2_74:hover{background-color:var(--pharos-color-neutral-700)}._primary_ltuh2_74:active{background-color:var(--pharos-color-neutral-950)}._secondary_ltuh2_88{background-color:var(--pharos-color-base-white);color:var(--pharos-color-neutral-900);border:1px solid var(--pharos-color-neutral-500);--icon-button-focus-ring:var(--pharos-color-primary-600)}._secondary_ltuh2_88:hover{background-color:var(--pharos-color-neutral-50)}._secondary_ltuh2_88:active{background-color:var(--pharos-color-neutral-100)}._ghost_ltuh2_107{color:var(--pharos-color-neutral-900);--icon-button-focus-ring:var(--pharos-color-primary-600);background-color:#0000}._ghost_ltuh2_107:hover{background-color:var(--pharos-color-neutral-100)}._ghost_ltuh2_107:active{background-color:var(--pharos-color-neutral-200)}._destructive_ltuh2_121{background-color:var(--pharos-color-semantic-error-fg);color:var(--pharos-color-semantic-error-on);--icon-button-focus-ring:var(--pharos-color-semantic-error-fg)}._destructive_ltuh2_121:hover{background-color:var(--pharos-color-semantic-error-fg-hover)}._destructive_ltuh2_121:active{background-color:var(--pharos-color-semantic-error-fg-active)}._sizeSm_ltuh2_150{width:var(--pharos-spacing-8);height:var(--pharos-spacing-8)}._sizeSm_ltuh2_150>svg{width:var(--pharos-spacing-4);height:var(--pharos-spacing-4)}._sizeMd_ltuh2_160{width:var(--pharos-spacing-10);height:var(--pharos-spacing-10)}._sizeMd_ltuh2_160>svg{width:var(--pharos-spacing-5);height:var(--pharos-spacing-5)}._sizeLg_ltuh2_170{width:var(--pharos-spacing-12);height:var(--pharos-spacing-12)}._sizeLg_ltuh2_170>svg{width:var(--pharos-spacing-6);height:var(--pharos-spacing-6)}@keyframes _pharos-spinner-spin_gg970_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._spinner_gg970_28{color:currentColor;vertical-align:middle;justify-content:center;align-items:center;display:inline-flex}._icon_gg970_46{width:100%;height:100%;animation:_pharos-spinner-spin_gg970_1 var(--pharos-duration-slow,1s) linear infinite}@media (prefers-reduced-motion:reduce){._icon_gg970_46{animation-duration:4s}}._sizeSm_gg970_69{width:var(--pharos-spacing-4);height:var(--pharos-spacing-4)}._sizeMd_gg970_74{width:var(--pharos-spacing-5);height:var(--pharos-spacing-5)}._sizeLg_gg970_79{width:var(--pharos-spacing-6);height:var(--pharos-spacing-6)}._srOnly_gg970_87{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._input_1ueoc_14{appearance:none;box-sizing:border-box;border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-md);background-color:var(--pharos-color-base-white);width:100%;color:var(--pharos-color-neutral-900);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-regular);transition-property:border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);margin:0;line-height:1.25}._input_1ueoc_14::placeholder{color:var(--pharos-color-neutral-500);opacity:1}._input_1ueoc_14:focus-visible{border-color:var(--pharos-color-primary-600);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._input_1ueoc_14:disabled{cursor:not-allowed;opacity:.5}._input_1ueoc_14[aria-invalid=true]{border-color:var(--pharos-color-semantic-error-fg)}._input_1ueoc_14[aria-invalid=true]:focus-visible{border-color:var(--pharos-color-semantic-error-fg);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-semantic-error-fg)}._sizeSm_1ueoc_97{height:var(--pharos-spacing-8);padding:0 var(--pharos-spacing-3);font-size:var(--pharos-font-size-sm)}._sizeMd_1ueoc_103{height:var(--pharos-spacing-10);padding:0 var(--pharos-spacing-4);font-size:var(--pharos-font-size-sm)}._sizeLg_1ueoc_109{height:var(--pharos-spacing-12);padding:0 var(--pharos-spacing-6);font-size:var(--pharos-font-size-base)}@media (pointer:coarse){._input_1ueoc_14,._sizeSm_1ueoc_97,._sizeMd_1ueoc_103{font-size:var(--pharos-font-size-base)}}._positioner_1mqln_15{z-index:var(--pharos-z-index-popover,1500)}._content_1mqln_4{box-sizing:border-box;max-width:20rem;padding:var(--pharos-spacing-4);background-color:var(--pharos-color-base-white);border:1px solid var(--pharos-color-neutral-200);border-radius:var(--pharos-radius-md);box-shadow:var(--pharos-shadow-lg);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-900);transform-origin:var(--transform-origin);transition-property:opacity,transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);outline:none}._content_1mqln_4[data-starting-style],._content_1mqln_4[data-ending-style]{opacity:0;transform:scale(.96)}._title_1mqln_5{font-size:var(--pharos-font-size-base);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-900);margin:0;line-height:1.4}._description_1mqln_5{margin:var(--pharos-spacing-1) 0 0;font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-600);line-height:1.5}._group_rsllu_18{gap:var(--pharos-spacing-2);flex-direction:column;display:flex}._item_rsllu_24{box-sizing:border-box;width:var(--pharos-spacing-5);height:var(--pharos-spacing-5);border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-full);background-color:var(--pharos-color-base-white);cursor:pointer;transition-property:background-color,border-color,box-shadow;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}._item_rsllu_24:hover:not([data-disabled]):not([data-checked]){border-color:var(--pharos-color-neutral-700)}._item_rsllu_24[data-checked]{border-color:var(--pharos-color-neutral-900)}._group_rsllu_18[aria-invalid=true] ._item_rsllu_24{border-color:var(--pharos-color-semantic-error-fg)}._item_rsllu_24:focus-visible{box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._item_rsllu_24[data-disabled]{cursor:not-allowed;opacity:.5}._indicator_rsllu_75{width:var(--pharos-spacing-2);height:var(--pharos-spacing-2);border-radius:var(--pharos-radius-full);background-color:var(--pharos-color-neutral-900);display:inline-flex}._trigger_1qe34_35{appearance:none;box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--pharos-spacing-2);border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-md);background-color:var(--pharos-color-base-white);width:100%;color:var(--pharos-color-neutral-900);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-regular);text-align:start;cursor:default;transition-property:border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);margin:0;line-height:1.25;display:inline-flex}._trigger_1qe34_35:focus-visible{border-color:var(--pharos-color-primary-600);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._trigger_1qe34_35:disabled,._trigger_1qe34_35[data-disabled]{cursor:not-allowed;opacity:.5}._trigger_1qe34_35[aria-invalid=true]{border-color:var(--pharos-color-semantic-error-fg)}._trigger_1qe34_35[aria-invalid=true]:focus-visible{border-color:var(--pharos-color-semantic-error-fg);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-semantic-error-fg)}._sizeSm_1qe34_92{height:var(--pharos-spacing-8);padding:0 var(--pharos-spacing-3);font-size:var(--pharos-font-size-sm)}._sizeMd_1qe34_98{height:var(--pharos-spacing-10);padding:0 var(--pharos-spacing-4);font-size:var(--pharos-font-size-sm)}._sizeLg_1qe34_104{height:var(--pharos-spacing-12);padding:0 var(--pharos-spacing-6);font-size:var(--pharos-font-size-base)}._value_1qe34_113{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._value_1qe34_113[data-placeholder]{color:var(--pharos-color-neutral-500)}._icon_1qe34_127{color:var(--pharos-color-neutral-500);transition:transform var(--pharos-duration-fast) var(--pharos-easing-out);flex:none;justify-content:center;align-items:center;display:inline-flex}._icon_1qe34_127 svg{width:1rem;height:1rem}._icon_1qe34_127[data-popup-open]{transform:rotate(180deg)}._positioner_1qe34_24{z-index:var(--pharos-z-index-popover,1500)}._content_1qe34_146{box-sizing:border-box;width:var(--anchor-width);max-height:var(--available-height);padding:var(--pharos-spacing-1);background-color:var(--pharos-color-base-white);border:1px solid var(--pharos-color-neutral-200);border-radius:var(--pharos-radius-md);box-shadow:var(--pharos-shadow-lg);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-900);transform-origin:var(--transform-origin);transition-property:opacity,transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);outline:none;overflow-y:auto}._content_1qe34_146[data-starting-style],._content_1qe34_146[data-ending-style]{opacity:0;transform:scale(.96)}._item_1qe34_17{align-items:flex-start;gap:var(--pharos-spacing-2);padding:var(--pharos-spacing-2) var(--pharos-spacing-3);border-radius:var(--pharos-radius-sm);color:var(--pharos-color-neutral-900);cursor:default;-webkit-user-select:none;user-select:none;scroll-margin:var(--pharos-spacing-1);outline:none;display:flex;position:relative}._item_1qe34_17[data-highlighted]{background-color:var(--pharos-color-neutral-100)}._item_1qe34_17[data-disabled]{color:var(--pharos-color-neutral-400);pointer-events:none}._itemText_1qe34_17{overflow-wrap:anywhere;white-space:normal;flex:auto;min-width:0}._itemIndicator_1qe34_231{block-size:1lh;color:var(--pharos-color-primary-600);flex:none;justify-content:center;align-items:center;display:inline-flex}._itemIndicator_1qe34_231 svg{width:1rem;height:1rem}._label_1qe34_247{padding:var(--pharos-spacing-2) var(--pharos-spacing-3) var(--pharos-spacing-1);font-size:var(--pharos-font-size-xs);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-600)}._separator_1qe34_255{height:1px;margin:var(--pharos-spacing-1) 0;background-color:var(--pharos-color-neutral-200)}._separator_da90p_13{background-color:var(--pharos-color-neutral-200);border:0;flex-shrink:0;margin:0}._horizontal_da90p_29{width:100%;height:1px}._vertical_da90p_34{width:1px;height:100%}._backdrop_titsa_18{z-index:var(--pharos-z-index-modal,1400);background-color:color-mix(in srgb, var(--pharos-color-base-black) 50%, transparent);transition:opacity var(--pharos-duration-normal) var(--pharos-easing-out);position:fixed;inset:0}._backdrop_titsa_18[data-starting-style],._backdrop_titsa_18[data-ending-style]{opacity:0}._content_titsa_34{z-index:var(--pharos-z-index-modal,1400);box-sizing:border-box;gap:var(--pharos-spacing-4);padding:var(--pharos-spacing-6);background-color:var(--pharos-color-base-white);box-shadow:var(--pharos-shadow-xl);font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-900);transition:transform var(--pharos-duration-normal) var(--pharos-easing-out);outline:none;flex-direction:column;display:flex;position:fixed;overflow-y:auto}._sideRight_titsa_57{border-left:1px solid var(--pharos-color-neutral-200);width:min(24rem,100vw);height:100dvh;top:0;bottom:0;right:0}._sideRight_titsa_57[data-starting-style],._sideRight_titsa_57[data-ending-style]{transform:translate(100%)}._sideLeft_titsa_70{border-right:1px solid var(--pharos-color-neutral-200);width:min(24rem,100vw);height:100dvh;top:0;bottom:0;left:0}._sideLeft_titsa_70[data-starting-style],._sideLeft_titsa_70[data-ending-style]{transform:translate(-100%)}._sideTop_titsa_83{border-bottom:1px solid var(--pharos-color-neutral-200);width:100vw;max-height:100dvh;top:0;left:0;right:0}._sideTop_titsa_83[data-starting-style],._sideTop_titsa_83[data-ending-style]{transform:translateY(-100%)}._sideBottom_titsa_96{border-top:1px solid var(--pharos-color-neutral-200);width:100vw;max-height:100dvh;bottom:0;left:0;right:0}._sideBottom_titsa_96[data-starting-style],._sideBottom_titsa_96[data-ending-style]{transform:translateY(100%)}._header_titsa_110{gap:var(--pharos-spacing-1);flex-direction:column;display:flex}._title_titsa_116{font-size:var(--pharos-font-size-lg);font-weight:var(--pharos-font-weight-semibold);color:var(--pharos-color-neutral-900);margin:0;line-height:1.4}._description_titsa_124{font-size:var(--pharos-font-size-sm);color:var(--pharos-color-neutral-600);margin:0;line-height:1.5}._footer_titsa_131{gap:var(--pharos-spacing-2);justify-content:flex-end;margin-top:auto;display:flex}._root_5v2er_17{box-sizing:border-box;width:var(--pharos-spacing-10);height:var(--pharos-spacing-6);padding:var(--pharos-spacing-1);border-radius:var(--pharos-radius-full);background-color:var(--pharos-color-neutral-300);cursor:pointer;transition-property:background-color,box-shadow;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out);border:none;flex-shrink:0;align-items:center;display:inline-flex}._root_5v2er_17:hover:not([data-disabled]):not([data-checked]){background-color:var(--pharos-color-neutral-400)}._root_5v2er_17[data-checked]{background-color:var(--pharos-color-neutral-900)}._root_5v2er_17[data-checked]:hover:not([data-disabled]){background-color:var(--pharos-color-neutral-700)}._root_5v2er_17[aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--pharos-color-semantic-error-fg)}._root_5v2er_17:focus-visible{box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._root_5v2er_17[data-disabled]{cursor:not-allowed;opacity:.5}._thumb_5v2er_72{box-sizing:border-box;width:var(--pharos-spacing-4);height:var(--pharos-spacing-4);border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-full);background-color:var(--pharos-color-base-white);transition-property:transform;transition-duration:var(--pharos-duration-fast);transition-timing-function:var(--pharos-easing-out)}._root_5v2er_17[data-checked] ._thumb_5v2er_72{transform:translateX(var(--pharos-spacing-4))}._textarea_145hb_21{appearance:none;box-sizing:border-box;border:1px solid var(--pharos-color-neutral-500);border-radius:var(--pharos-radius-md);background-color:var(--pharos-color-base-white);width:100%;color:var(--pharos-color-neutral-900);resize:vertical;font-family:var(--pharos-font-family-sans);font-size:var(--pharos-font-size-sm);font-weight:var(--pharos-font-weight-regular);transition-property:border-color,box-shadow;transition-duration:var(--pharos-duration-normal);transition-timing-function:var(--pharos-easing-out);margin:0;line-height:1.5}._textarea_145hb_21::placeholder{color:var(--pharos-color-neutral-500);opacity:1}._textarea_145hb_21:focus-visible{border-color:var(--pharos-color-primary-600);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-primary-600);outline:none}._textarea_145hb_21:disabled{cursor:not-allowed;opacity:.5;resize:none}._textarea_145hb_21[aria-invalid=true]{border-color:var(--pharos-color-semantic-error-fg)}._textarea_145hb_21[aria-invalid=true]:focus-visible{border-color:var(--pharos-color-semantic-error-fg);box-shadow:0 0 0 2px var(--pharos-color-base-white), 0 0 0 4px var(--pharos-color-semantic-error-fg)}._sizeSm_145hb_113{min-height:var(--pharos-spacing-16);padding:var(--pharos-spacing-2) var(--pharos-spacing-3);font-size:var(--pharos-font-size-sm)}._sizeMd_145hb_119{min-height:var(--pharos-spacing-20);padding:var(--pharos-spacing-2-5) var(--pharos-spacing-4);font-size:var(--pharos-font-size-sm)}._sizeLg_145hb_125{min-height:var(--pharos-spacing-24);padding:var(--pharos-spacing-3) var(--pharos-spacing-6);font-size:var(--pharos-font-size-base)}@media (pointer:coarse){._textarea_145hb_21,._sizeSm_145hb_113,._sizeMd_145hb_119{font-size:var(--pharos-font-size-base)}}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@code-sherpas/pharos-react",
|
|
3
|
-
"version": "0.20.
|
|
3
|
+
"version": "0.20.3",
|
|
4
4
|
"description": "React component library for Code Sherpas. Consumes @code-sherpas/pharos-tokens. Vite library mode + CSS Modules — no Tailwind, no CSS framework required at the consumer.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|