@leabankab/component-library 8.0.0 → 8.1.0

package/dist/components/data-display/card.d.ts

@@ -1,14 +1,37 @@
 import { useRender } from '@base-ui/react/use-render';
 import { Ref } from 'react';
-export type CardProps = Omit<useRender.ComponentProps<"div">, "ref"> & {
+import { ColorRoles } from '../color-roles';
+export type CardColor = ColorRoles<"primary" | "tertiary" | "neutral" | "success" | "info" | "warning" | "error">;
+export type CardVariant = "outlined" | "filled";
+export type CardProps = Omit<useRender.ComponentProps<"div">, "ref" | "color"> & {
     /** The rendered element: the `<div>`, or the element passed to `render`. */
     ref?: Ref<HTMLElement>;
+    /**
+     * A tint for the card. Left out, the card is white.
+     * - A brand tint: `"primary"` (purple), `"tertiary"` (teal) or `"neutral"`
+     *   (grey).
+     * - A status: `"success"` (teal), `"info"` (blue), `"warning"` (amber) or
+     *   `"error"` (red).
+     */
+    color?: CardColor;
+    /**
+     * With a 1px border, or without one. The card keeps its size either way, so
+     * the two line up in a row.
+     * @default "outlined"
+     */
+    variant?: CardVariant;
 };
 /**
  * A flat surface that groups related content: white, with a 1px border and
  * rounded corners. It has no padding of its own, so an image or a divider can
  * run edge to edge; put text in `CardContent`.
  *
+ * Set `color` for a tint, and `variant="filled"` to drop the border:
+ *
+ * ```tsx
+ * <Card color="primary" variant="filled">…</Card>
+ * ```
+ *
  * ```tsx
  * <Card>
  *   <CardContent>
@@ -21,7 +44,7 @@ export type CardProps = Omit<useRender.ComponentProps<"div">, "ref"> & {
  * Renders a `div`; pass `render` for another element, e.g.
  * `render={<section />}` or `render={<li />}`.
  */
-export declare function Card({ render, ref, className, ...rest }: CardProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Card({ render, ref, className, color, variant, ...rest }: CardProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export type CardContentProps = Omit<useRender.ComponentProps<"div">, "ref"> & {
     /** The rendered element: the `<div>`, or the element passed to `render`. */
     ref?: Ref<HTMLElement>;

package/dist/components/form/combo-field.d.ts

@@ -7,6 +7,12 @@ export type ComboFieldBaseProps = {
     helperText?: ReactNode;
     /** Puts the control, its label and its helper text into the error state. */
     error?: boolean;
+    /**
+     * A message for a value that is allowed but unusual, such as an unusually
+     * high amount. Shown in amber in place of the helper text, without the
+     * error state: the field is not marked invalid. `error` wins when both are set.
+     */
+    warning?: ReactNode;
     /** Marks the control as required, with an asterisk after the label. */
     required?: boolean;
     disabled?: boolean;
@@ -55,6 +61,8 @@ type ComboFieldProps = Omit<ComboFieldBaseProps, "name"> & {
     selectTextOnClick?: boolean;
     /** The content of the popup: the list, and what stands in for it when empty. */
     children: ReactNode;
+    /** More below the helper text, inside the outermost element. */
+    afterHelperText?: ReactNode;
 };
-export declare function ComboField({ label, helperText, error, required, disabled, placeholder, onBlur, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ref, renderRoot, inputProps, chips, filled, clearable, trigger, selectTextOnClick, children, }: ComboFieldProps): import("react").JSX.Element;
+export declare function ComboField({ label, helperText, error, warning, required, disabled, placeholder, onBlur, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ref, renderRoot, inputProps, chips, filled, clearable, trigger, selectTextOnClick, children, afterHelperText, }: ComboFieldProps): import("react").JSX.Element;
 export {};

package/dist/components/form/email-input.d.ts

@@ -10,6 +10,14 @@ export type EmailInputProps = ComboFieldBaseProps & {
     domains?: readonly string[];
     /** Most suggestions shown at once. @default 6 */
     maxSuggestions?: number;
+    /**
+     * When focus leaves the field, offers a fix for a mistyped domain below it:
+     * "Mente du anna@gmail.com?" for `anna@gnail.con`, with the address as a
+     * button that puts it in the field. The value never changes by itself, and
+     * validation is not affected. See `suggestEmailCorrection`.
+     * @default true
+     */
+    suggestCorrection?: boolean;
     /**
      * What the browser may fill in. The default lets it offer the user's own
      * address; pass `"off"` when the address is somebody else's.
@@ -26,4 +34,4 @@ export type EmailInputProps = ComboFieldBaseProps & {
  * <EmailInput label="E-post" value={email} onValueChange={setEmail} />
  * ```
  */
-export declare function EmailInput({ value, defaultValue, onValueChange, domains, maxSuggestions, autoComplete, name, ...field }: EmailInputProps): import("react").JSX.Element;
+export declare function EmailInput({ value, defaultValue, onValueChange, domains, maxSuggestions, autoComplete, suggestCorrection, name, onBlur, ref, ...field }: EmailInputProps): import("react").JSX.Element;

package/dist/components/form/field-parts.d.ts

@@ -7,10 +7,24 @@ type FieldHelperTextProps = {
     /** Id the control points at with `aria-describedby`. */
     id: string;
     error: boolean;
+    /** The text is a warning: amber, and announced politely. */
+    warning?: boolean;
     children: ReactNode;
 };
-/** Helper text below a control. Announced as an alert while in error. */
-export declare function FieldHelperText({ id, error, children }: FieldHelperTextProps): import("react").JSX.Element;
+/**
+ * Helper text below a control. Announced as an alert while in error, and as a
+ * status while it is a warning.
+ */
+export declare function FieldHelperText({ id, error, warning, children, }: FieldHelperTextProps): import("react").JSX.Element;
+/**
+ * What the line below a control shows: the warning while there is one,
+ * otherwise the helper text. An error wins over a warning, so with `error`
+ * the line is the helper text (where a form puts its error message).
+ */
+export declare function fieldMessage(helperText: ReactNode, warning: ReactNode, error: boolean): {
+    content: ReactNode;
+    warning: boolean;
+};
 type FieldGroupLabelProps = {
     /** Id the group points at with `aria-labelledby`. It sits on the text alone. */
     id: string;

package/dist/components/form/input.d.ts

@@ -7,6 +7,12 @@ export type InputProps = NativeInputProps & {
     helperText?: ReactNode;
     /** Puts the input, its label and its helper text into the error state. */
     error?: boolean;
+    /**
+     * A message for a value that is allowed but unusual, such as an unusually
+     * high amount. Shown in amber in place of the helper text, without the
+     * error state: the field is not marked invalid. `error` wins when both are set.
+     */
+    warning?: ReactNode;
     /** The text (controlled). Pair with `onValueChange`. */
     value?: string;
     /** The text when first rendered, for uncontrolled use. */
@@ -53,5 +59,5 @@ export type InputProps = NativeInputProps & {
  * />
  * ```
  */
-export declare function Input({ label, helperText, error, value, defaultValue, onValueChange, startAdornment, endAdornment, multiline, rows, minRows, maxRows, className, style, ref, id, disabled, required, placeholder, "aria-describedby": ariaDescribedBy, ...inputAttributes }: InputProps): import("react").JSX.Element;
+export declare function Input({ label, helperText, error, warning, value, defaultValue, onValueChange, startAdornment, endAdornment, multiline, rows, minRows, maxRows, className, style, ref, id, disabled, required, placeholder, "aria-describedby": ariaDescribedBy, ...inputAttributes }: InputProps): import("react").JSX.Element;
 export {};

package/dist/components/form/number-input-unit.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { Currency } from '../../hooks/country/countries';
+import { Language } from '../../i18n';
+/**
+ * A unit the library writes for you, in the language of `LeaProvider`:
+ *
+ * - `{ type: "years" }`: "år", "vuotta", "años". The word follows the number
+ *   in the field, so Finnish and Spanish read "1 vuosi" and "2 vuotta",
+ *   "1 año" and "2 años".
+ * - `{ type: "currency" }`: the symbol of the currency, "kr" or "€". The
+ *   currency is the one of the language (`no` NOK, `se` SEK, `fi` and `es`
+ *   EUR); pass `currency` for another.
+ */
+export type NumberInputUnitSpec = {
+    type: "years";
+} | {
+    type: "currency";
+    currency?: Currency;
+};
+/** What `NumberInput` takes as `unit`: your own content, or a unit spec. */
+export type NumberInputUnit = ReactNode | NumberInputUnitSpec;
+/** A spec, as opposed to a string, a number or an element. */
+export declare function isUnitSpec(unit: NumberInputUnit): unit is NumberInputUnitSpec;
+/**
+ * The text of a unit spec for a language. `value` picks the plural of "years"
+ * and is ignored for a currency; an empty field counts as zero.
+ */
+export declare function formatUnit(unit: NumberInputUnitSpec, language: Language, value: number | null | undefined): string;

package/dist/components/form/number-input.d.ts

@@ -1,5 +1,7 @@
 import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
 import { CSSProperties, ReactNode, Ref } from 'react';
+import { NumberInputUnit } from './number-input-unit';
+export type { NumberInputUnit, NumberInputUnitSpec } from './number-input-unit';
 export type NumberInputProps = Omit<BaseNumberField.Root.Props, "ref" | "inputRef" | "render" | "className" | "style"> & {
     /** The visible `<input>`. */
     ref?: Ref<HTMLInputElement>;
@@ -16,6 +18,12 @@ export type NumberInputProps = Omit<BaseNumberField.Root.Props, "ref" | "inputRe
     helperText?: ReactNode;
     /** Renders the field in its error state (border, label and helper colour). */
     error?: boolean;
+    /**
+     * A message for a value that is allowed but unusual, such as an unusually
+     * high amount. Shown in amber in place of the helper text, without the
+     * error state: the field is not marked invalid. `error` wins when both are set.
+     */
+    warning?: ReactNode;
     /** Reflects `required` onto the control and the label asterisk. */
     required?: boolean;
     /** Disables the input and the stepper buttons. */
@@ -28,11 +36,17 @@ export type NumberInputProps = Omit<BaseNumberField.Root.Props, "ref" | "inputRe
      */
     startIcon?: ReactNode;
     /**
-     * Trailing unit shown inside the field (e.g. `kr`, `kr/mnd`). Rendered as real
-     * text linked to the input via `aria-describedby` — not a placeholder — so it
-     * is announced and survives typing.
+     * Trailing unit shown inside the field. Rendered as real text linked to the
+     * input via `aria-describedby` — not a placeholder — so it is announced and
+     * survives typing.
+     *
+     * - Your own content: `unit="kr/mnd"`. It is not translated.
+     * - `{ type: "years" }`: "år", "vuotta" or "años" in the language of
+     *   `LeaProvider`, in the plural that fits the number in the field.
+     * - `{ type: "currency" }`: "kr" or "€" for the language (`{ type:
+     *   "currency", currency: "EUR" }` for another currency).
      */
-    unit?: ReactNode;
+    unit?: NumberInputUnit;
     /**
      * Whether to render the increment / decrement stepper buttons.
      * @default true
@@ -54,5 +68,13 @@ export type NumberInputProps = Omit<BaseNumberField.Root.Props, "ref" | "inputRe
  * For money and other open-ended amounts, set `showSteppers={false}` and use a
  * `unit` (e.g. `kr`) instead — a stepper is only helpful for small bounded
  * counts.
+ *
+ * `unit` takes your own text, or a unit the library writes in the language of
+ * `LeaProvider`:
+ *
+ * ```tsx
+ * <NumberInput label="Lånebeløp" unit={{ type: "currency" }} showSteppers={false} />
+ * <NumberInput label="Nedbetalingstid" unit={{ type: "years" }} min={1} max={15} />
+ * ```
  */
-export declare function NumberInput({ label, labelPlacement, tooltip, helperText, error, required, disabled, id, placeholder, startIcon, unit, showSteppers, className, style, ref, ...rest }: NumberInputProps): import("react").JSX.Element;
+export declare function NumberInput({ label, labelPlacement, tooltip, helperText, error, warning, required, disabled, id, placeholder, startIcon, unit, showSteppers, className, style, ref, value, defaultValue, onValueChange, ...rest }: NumberInputProps): import("react").JSX.Element;

package/dist/components/form/phone-number-input/phone-number-input.d.ts

@@ -32,6 +32,25 @@ export type PhoneNumberInputProps = NativeInputProps & {
     defaultValue?: string;
     /** Fired on every keystroke with the formatted national number and validity meta. */
     onValueChange?: (value: string, meta: PhoneNumberMeta) => void;
+    /**
+     * The countries the number may be from. With one, there is no country
+     * list: its dial code stands fixed at the start of the field (`+46`). With
+     * several, the list holds these alone.
+     *
+     * Either way the value is the national number without the trunk `0`
+     * (`70 123 45 67`): a pasted `+46 70…`, `0046 70…` or `070…` is cleaned up to
+     * it, and when focus leaves the field. A number of another country is
+     * invalid. Left out, every country is in the list and the number is kept as
+     * typed, as before.
+     */
+    countries?: readonly CountryCode[];
+    /**
+     * Accept mobile numbers only: a landline is invalid, with a message of its
+     * own ("Skriv inn et mobilnummer"). Applies to Sweden, Finland, Norway and
+     * Spain, as `validateMobileNumber`; a number of another country is checked
+     * as any number. `meta.isValid` follows it.
+     */
+    mobileOnly?: boolean;
     /**
      * Show a built-in "invalid number" error once the field is blurred with a
      * non-empty, invalid value. Ignored when the consumer drives `error`.
@@ -60,5 +79,5 @@ export type PhoneNumberInputProps = NativeInputProps & {
  * `value` + `onValueChange`) or left **uncontrolled** (`defaultCountry` /
  * `defaultValue`).
  */
-export declare function PhoneNumberInput({ label, helperText, error, required, disabled, id, country, defaultCountry, onCountryChange, value, defaultValue, onValueChange, onBlur, validateOnBlur, className, style, ref, "aria-describedby": ariaDescribedBy, ...inputAttributes }: PhoneNumberInputProps): import("react").JSX.Element;
+export declare function PhoneNumberInput({ label, helperText, error, required, disabled, id, country, defaultCountry, onCountryChange, value, defaultValue, onValueChange, onBlur, countries, mobileOnly, validateOnBlur, className, style, ref, "aria-describedby": ariaDescribedBy, ...inputAttributes }: PhoneNumberInputProps): import("react").JSX.Element;
 export {};

package/dist/cookie-consent.css

@@ -1 +1 @@
-:root{--lea-spacing:.5rem;--lea-spacing-0-5:.25rem;--lea-spacing-1:.5rem;--lea-spacing-1-5:.75rem;--lea-spacing-2:1rem;--lea-spacing-2-5:1.25rem;--lea-spacing-3:1.5rem;--lea-spacing-4:2rem;--lea-spacing-5:2.5rem;--lea-spacing-6:3rem;--lea-spacing-8:4rem;--lea-palette-bg-base:#fff;--lea-palette-bg-subtle:#f7f7f6;--lea-palette-bg-muted:#f0e9e5;--lea-palette-bg-contrast:#0f1010;--lea-palette-bg-accent:#e2d8e4;--lea-palette-bg-overlay:#0f101080;--lea-palette-text-base:#0f1010;--lea-palette-text-subtle:#757575;--lea-palette-text-muted:#a2a2a2;--lea-palette-text-accent:#70427b;--lea-palette-text-contrast:#fff;--lea-palette-border-base:#dbdbdb;--lea-palette-border-subtle:#ebebeb;--lea-palette-border-strong:#0f1010;--lea-palette-border-accent:#70427b;--lea-palette-border-contrast:#fff;--lea-palette-primary-base:#70427b;--lea-palette-primary-hover:#5a3463;--lea-palette-primary-subtle:#e2d8e4;--lea-palette-primary-contrast:#fff;--lea-palette-secondary-base:#0f1010;--lea-palette-secondary-hover:#2e2e2e;--lea-palette-secondary-subtle:#ebebeb;--lea-palette-secondary-contrast:#fff;--lea-palette-tertiary-base:#08c2a7;--lea-palette-tertiary-hover:#46d1bd;--lea-palette-tertiary-subtle:#daf6f1;--lea-palette-tertiary-contrast:#fff;--lea-palette-status-error-base:#d32f2f;--lea-palette-status-error-subtle:#fcdcdc;--lea-palette-status-warning-base:#f7a800;--lea-palette-status-warning-subtle:#ffefc7;--lea-palette-status-info-base:#057ef2;--lea-palette-status-info-subtle:#cbe5fd;--lea-palette-status-success-base:#46d1bd;--lea-palette-status-success-subtle:#daf6f1;--lea-color-purple-50:#faf7fb;--lea-color-purple-100:#e2d8e4;--lea-color-purple-200:#c5b1ca;--lea-color-purple-300:#c29ac2;--lea-color-purple-400:#9e6da8;--lea-color-purple-500:#855888;--lea-color-purple-600:#70427b;--lea-color-purple-700:#5a3463;--lea-color-purple-800:#422349;--lea-color-purple-900:#2e1834;--lea-color-purple-950:#1a0e1e;--lea-color-teal-50:#f0fcfa;--lea-color-teal-100:#daf6f1;--lea-color-teal-200:#cef3ed;--lea-color-teal-300:#08c2a7;--lea-color-teal-400:#46d1bd;--lea-color-teal-500:#06a892;--lea-color-teal-600:#058f7d;--lea-color-teal-700:#047568;--lea-color-teal-800:#035c53;--lea-color-teal-900:#02433e;--lea-color-teal-950:#012a28;--lea-color-blue-50:#eff6ff;--lea-color-blue-100:#cbe5fd;--lea-color-blue-200:#93cbfc;--lea-color-blue-300:#4da8f7;--lea-color-blue-400:#057ef2;--lea-color-blue-500:#0468c9;--lea-color-blue-600:#0354a3;--lea-color-blue-700:#02417d;--lea-color-blue-800:#012e57;--lea-color-blue-900:#011b31;--lea-color-blue-950:#000e19;--lea-color-orange-50:#fff5f2;--lea-color-orange-100:#ffdfd7;--lea-color-orange-200:#ffc4b5;--lea-color-orange-300:#ff9e87;--lea-color-orange-400:#fe653e;--lea-color-orange-500:#e54e28;--lea-color-orange-600:#c43e1c;--lea-color-orange-700:#a33218;--lea-color-orange-800:#822814;--lea-color-orange-900:#611e0f;--lea-color-orange-950:#401408;--lea-color-amber-50:#fff9eb;--lea-color-amber-100:#ffefc7;--lea-color-amber-200:#ffe299;--lea-color-amber-300:#ffcf5c;--lea-color-amber-400:#f7a800;--lea-color-amber-500:#d98f00;--lea-color-amber-600:#b37400;--lea-color-amber-700:#8c5a00;--lea-color-amber-800:#6b4500;--lea-color-amber-900:#4a3000;--lea-color-amber-950:#2e1d00;--lea-color-red-50:#fef2f2;--lea-color-red-100:#fcdcdc;--lea-color-red-200:#f9bbbb;--lea-color-red-300:#f28888;--lea-color-red-400:#e85555;--lea-color-red-500:#d32f2f;--lea-color-red-600:#ad2121;--lea-color-red-700:#8a1919;--lea-color-red-800:#6f1313;--lea-color-red-900:#4d0e0e;--lea-color-red-950:#2e0808;--lea-color-beige-50:#faf7f5;--lea-color-beige-100:#f0e9e5;--lea-color-beige-200:#e0d4cd;--lea-color-beige-300:#c9b8ad;--lea-color-beige-400:#b09a8c;--lea-color-beige-500:#977c6b;--lea-color-beige-600:#7e6556;--lea-color-beige-700:#654f42;--lea-color-beige-800:#4c3a32;--lea-color-beige-900:#332722;--lea-color-beige-950:#1a1411;--lea-color-neutral-50:#f7f7f6;--lea-color-neutral-100:#ebebeb;--lea-color-neutral-200:#dbdbdb;--lea-color-neutral-300:#c4c4c4;--lea-color-neutral-400:#a2a2a2;--lea-color-neutral-500:#757575;--lea-color-neutral-600:#5e5e5e;--lea-color-neutral-700:#454545;--lea-color-neutral-800:#2e2e2e;--lea-color-neutral-900:#1a1a1a;--lea-color-neutral-950:#0f1010;--lea-color-white:#fff;--lea-color-black:#0f1010;--lea-radius-sm:4px;--lea-radius-md:5px;--lea-radius-lg:6px;--lea-radius-xl:8px;--lea-radius-2xl:10px;--lea-radius-3xl:12px;--lea-radius-4xl:16px;--lea-radius-5xl:32px;--lea-radius-huge:64px;--lea-radius-full:100px;--lea-shadow-xs:0 1px 2px 0 #0000000d;--lea-shadow-sm:0px 1px 3px 0px #0000001a, 0px 1px 2px -1px #0000001a;--lea-shadow-md:0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;--lea-shadow-lg:0px 10px 15px -3px #0000001a, 0px 4px 6px -4px #0000001a;--lea-shadow-xl:0px 20px 25px -5px #0000001a, 0px 8px 10px -6px #0000001a;--lea-shadow-2xl:0px 25px 50px -12px #00000040;--lea-shadow-inner:0px 2px 4px 0px #0000000d inset;--lea-font-family:"ClashGrotesk", "ClashGrotesk Fallback", sans-serif;--lea-font-size-xs:.75rem;--lea-font-size-sm:.875rem;--lea-font-size-md:1rem;--lea-font-size-lg:1.25rem;--lea-font-size-xl:1.5rem;--lea-font-size-2xl:2rem;--lea-font-size-3xl:2.5rem;--lea-font-size-4xl:3rem;--lea-font-size-5xl:3.5rem;--lea-font-size-6xl:4rem;--lea-font-weight-thin:200;--lea-font-weight-light:300;--lea-font-weight-regular:400;--lea-font-weight-medium:500;--lea-font-weight-semibold:600;--lea-font-weight-bold:700;--lea-font-weight-black:800;--lea-font-step-minus-2:.8125rem;--lea-font-step-minus-1:.875rem;--lea-font-step-0:1rem;--lea-font-step-1:1.125rem;--lea-font-step-2:1.25rem;--lea-font-step-3:1.4375rem;--lea-font-step-4:1.625rem;--lea-font-step-5:1.8125rem;--lea-font-step-6:2rem;--lea-font-step-7:2.25rem;--lea-font-step-8:2.5625rem;--lea-font-step-9:2.875rem;--lea-font-step-10:3.25rem;--lea-font-step-11:3.625rem;--lea-font-step-12:4.125rem;--lea-line-height-none:1;--lea-line-height-tight:1.25;--lea-line-height-snug:1.4;--lea-line-height-normal:1.5;--lea-text-display-sm-font-size:var(--lea-font-step-10);--lea-text-display-sm-font-weight:var(--lea-font-weight-semibold);--lea-text-display-sm-line-height:var(--lea-line-height-none);--lea-text-display-sm-letter-spacing:0;--lea-text-display-md-font-size:var(--lea-font-step-12);--lea-text-display-md-font-weight:var(--lea-font-weight-semibold);--lea-text-display-md-line-height:var(--lea-line-height-none);--lea-text-display-md-letter-spacing:0;--lea-text-heading-xs-font-size:var(--lea-font-step-0);--lea-text-heading-xs-font-weight:var(--lea-font-weight-semibold);--lea-text-heading-xs-line-height:var(--lea-line-height-snug);--lea-text-heading-xs-letter-spacing:0;--lea-text-heading-sm-font-size:var(--lea-font-step-2);--lea-text-heading-sm-font-weight:var(--lea-font-weight-semibold);--lea-text-heading-sm-line-height:var(--lea-line-height-snug);--lea-text-heading-sm-letter-spacing:0;--lea-text-heading-md-font-size:var(--lea-font-step-4);--lea-text-heading-md-font-weight:var(--lea-font-weight-semibold);--lea-text-heading-md-line-height:var(--lea-line-height-snug);--lea-text-heading-md-letter-spacing:0;--lea-text-heading-lg-font-size:var(--lea-font-step-6);--lea-text-heading-lg-font-weight:var(--lea-font-weight-semibold);--lea-text-heading-lg-line-height:var(--lea-line-height-tight);--lea-text-heading-lg-letter-spacing:0;--lea-text-heading-xl-font-size:var(--lea-font-step-8);--lea-text-heading-xl-font-weight:var(--lea-font-weight-semibold);--lea-text-heading-xl-line-height:var(--lea-line-height-tight);--lea-text-heading-xl-letter-spacing:0;--lea-text-body-xs-font-size:var(--lea-font-step-minus-2);--lea-text-body-xs-font-weight:var(--lea-font-weight-regular);--lea-text-body-xs-line-height:var(--lea-line-height-normal);--lea-text-body-xs-letter-spacing:0;--lea-text-body-sm-font-size:var(--lea-font-step-minus-1);--lea-text-body-sm-font-weight:var(--lea-font-weight-regular);--lea-text-body-sm-line-height:var(--lea-line-height-normal);--lea-text-body-sm-letter-spacing:0;--lea-text-body-md-font-size:var(--lea-font-step-0);--lea-text-body-md-font-weight:var(--lea-font-weight-regular);--lea-text-body-md-line-height:var(--lea-line-height-normal);--lea-text-body-md-letter-spacing:0;--lea-text-body-lg-font-size:var(--lea-font-step-1);--lea-text-body-lg-font-weight:var(--lea-font-weight-regular);--lea-text-body-lg-line-height:var(--lea-line-height-normal);--lea-text-body-lg-letter-spacing:0;--lea-text-label-sm-font-size:var(--lea-font-step-minus-2);--lea-text-label-sm-font-weight:var(--lea-font-weight-medium);--lea-text-label-sm-line-height:var(--lea-line-height-tight);--lea-text-label-sm-letter-spacing:0;--lea-text-label-md-font-size:var(--lea-font-step-minus-1);--lea-text-label-md-font-weight:var(--lea-font-weight-medium);--lea-text-label-md-line-height:var(--lea-line-height-tight);--lea-text-label-md-letter-spacing:0;--lea-text-label-lg-font-size:var(--lea-font-step-0);--lea-text-label-lg-font-weight:var(--lea-font-weight-medium);--lea-text-label-lg-line-height:var(--lea-line-height-tight);--lea-text-label-lg-letter-spacing:0;--lea-opacity-hover:.08;--lea-opacity-pressed:.12;--lea-opacity-highlight:.6;--lea-duration-fast:.15s;--lea-duration-normal:.2s;--lea-duration-emphasis:.3s;--lea-easing-standard:ease-in-out;--lea-easing-spring:cubic-bezier(.34, 1.56, .64, 1);--lea-breakpoint-xs:0px;--lea-breakpoint-sm:600px;--lea-breakpoint-md:900px;--lea-breakpoint-lg:1200px;--lea-breakpoint-xl:1536px}._Button_1d72q_1{--button-solid:var(--lea-palette-primary-base);--button-solid-hover:var(--lea-palette-primary-hover);--button-on-solid:var(--lea-palette-primary-contrast);--button-fg:var(--lea-palette-primary-base);--button-border:var(--lea-palette-primary-base);--button-tint:color-mix(in srgb, var(--button-fg) calc(var(--lea-opacity-hover) * 100%), color-mix(in srgb, var(--lea-color-white) calc(var(--lea-opacity-highlight) * 100%), transparent));--button-height:2.75rem;--button-icon-size:1.25rem;--button-padding-inline:calc(var(--lea-spacing) * 2.5);box-sizing:border-box;min-height:var(--button-height);justify-content:center;align-items:center;gap:var(--lea-spacing);padding-block:calc(var(--lea-spacing) * .5);padding-inline:var(--button-padding-inline);border-radius:var(--lea-radius-full);color:var(--button-fg);font-family:inherit;font-size:var(--lea-text-label-lg-font-size);font-weight:var(--lea-text-label-lg-font-weight);line-height:var(--lea-text-label-lg-line-height);letter-spacing:var(--lea-text-label-lg-letter-spacing);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--lea-duration-normal) var(--lea-easing-standard), border-color var(--lea-duration-normal) var(--lea-easing-standard), color var(--lea-duration-normal) var(--lea-easing-standard), opacity var(--lea-duration-normal) var(--lea-easing-standard);background-color:#0000;border:1px solid #0000;flex-shrink:0;margin:0;text-decoration:none;display:inline-flex}._Button_1d72q_1 svg{width:var(--button-icon-size);height:var(--button-icon-size);flex-shrink:0}._Button_1d72q_1:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Button_1d72q_1[data-color=secondary]{--button-solid:var(--lea-palette-secondary-base);--button-solid-hover:var(--lea-palette-secondary-hover);--button-on-solid:var(--lea-palette-secondary-contrast);--button-fg:var(--lea-palette-secondary-base);--button-border:var(--lea-palette-secondary-base)}._Button_1d72q_1[data-color=error]{--button-solid:var(--lea-color-red-600);--button-solid-hover:var(--lea-color-red-500);--button-on-solid:var(--lea-palette-text-contrast);--button-fg:var(--lea-color-red-600);--button-border:var(--lea-color-red-600)}._Button_1d72q_1[data-variant=solid]{background-color:var(--button-solid);color:var(--button-on-solid)}._Button_1d72q_1[data-variant=outline]{border-color:var(--button-border)}@media (hover:hover){._Button_1d72q_1[data-variant=solid]:not([data-disabled]):hover{background-color:var(--button-solid-hover)}._Button_1d72q_1[data-variant=outline]:not([data-disabled]):hover,._Button_1d72q_1[data-variant=ghost]:not([data-disabled]):hover{background-color:var(--button-tint)}}._Button_1d72q_1[data-size=sm]{--button-height:2.25rem;--button-icon-size:1rem;--button-padding-inline:calc(var(--lea-spacing) * 2)}._Button_1d72q_1[data-size=lg]{--button-height:3.25rem;--button-icon-size:1.5rem;--button-padding-inline:calc(var(--lea-spacing) * 2.5)}._Button_1d72q_1[data-start-icon]{padding-inline-start:calc(var(--button-padding-inline) - var(--lea-spacing))}._Button_1d72q_1[data-end-icon]{padding-inline-end:calc(var(--button-padding-inline) - var(--lea-spacing))}._Button_1d72q_1._IconButton_1d72q_125{width:var(--button-height);height:var(--button-height);padding:0}._Button_1d72q_1[data-disabled]:not([data-loading]){color:var(--lea-color-neutral-400);cursor:not-allowed}._Button_1d72q_1[data-variant=solid][data-disabled]:not([data-loading]){background-color:var(--lea-color-neutral-200);color:var(--lea-color-neutral-600)}._Button_1d72q_1[data-variant=outline][data-disabled]:not([data-loading]){border-color:var(--lea-palette-border-base)}._Button_1d72q_1[data-loading]{cursor:progress;opacity:.7}._Spinner_1d72q_150{box-sizing:border-box;width:var(--button-icon-size);height:var(--button-icon-size);border:2px solid;border-radius:var(--lea-radius-full);border-inline-end-color:#0000;flex-shrink:0;animation:.8s linear infinite _button-spin_1d72q_1;display:inline-block}@keyframes _button-spin_1d72q_1{to{rotate:360deg}}._SrOnly_1d72q_168{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){._Button_1d72q_1{transition-duration:.01ms}._Spinner_1d72q_150{animation:none}}._Backdrop_1mady_8{z-index:1300;background-color:var(--lea-palette-bg-overlay);opacity:1;transition:opacity var(--lea-duration-normal) var(--lea-easing-standard);position:fixed;inset:0}._Backdrop_1mady_8[data-starting-style],._Backdrop_1mady_8[data-ending-style]{opacity:0}._Viewport_1mady_22{z-index:1300;padding:calc(var(--lea-spacing) * 2);pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}._Popup_1mady_38{border-radius:var(--lea-radius-4xl);background-color:var(--lea-palette-bg-base);width:100%;max-height:100%;box-shadow:var(--lea-shadow-xl);color:var(--lea-palette-text-base);opacity:1;pointer-events:auto;transition:opacity var(--lea-duration-normal) var(--lea-easing-standard), transform var(--lea-duration-normal) var(--lea-easing-standard);flex-direction:column;display:flex;overflow:hidden;transform:scale(1)}._Popup_1mady_38[data-starting-style],._Popup_1mady_38[data-ending-style]{opacity:0;transform:scale(.95)}._Popup_1mady_38[data-size=xs]{max-width:27.75rem}._Popup_1mady_38[data-size=sm]{max-width:37.5rem}._Popup_1mady_38[data-size=md]{max-width:56.25rem}._Popup_1mady_38[data-size=lg]{max-width:75rem}._Header_1mady_78{justify-content:space-between;align-items:flex-start;gap:var(--lea-spacing);padding:calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 2);flex-shrink:0;display:flex}._Title_1mady_88{color:var(--lea-palette-text-base);font-size:var(--lea-text-heading-sm-font-size);font-weight:var(--lea-text-heading-sm-font-weight);line-height:var(--lea-text-heading-sm-line-height);letter-spacing:var(--lea-text-heading-sm-letter-spacing);margin:0}._Description_1mady_97{margin:0 0 calc(var(--lea-spacing) * 2);color:var(--lea-palette-text-subtle)}._Description_1mady_97[data-last]{margin-bottom:0}._Content_1mady_111{padding:0 calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 3);color:var(--lea-palette-text-base);flex:1;overflow-y:auto}._Content_1mady_111:has(+._Footer_1mady_119){padding-bottom:0}._Footer_1mady_119{justify-content:flex-end;align-items:center;gap:var(--lea-spacing);padding:calc(var(--lea-spacing) * 2) calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 2);background-color:var(--lea-palette-bg-base);flex-wrap:wrap;flex-shrink:0;display:flex}._CloseButton_1mady_135{border:2px solid var(--lea-palette-border-base);border-radius:var(--lea-radius-full);width:2.5rem;height:2.5rem;color:var(--lea-palette-text-base);cursor:pointer;transition:border-color var(--lea-duration-emphasis) var(--lea-easing-spring), background-color var(--lea-duration-emphasis) var(--lea-easing-spring), color var(--lea-duration-emphasis) var(--lea-easing-spring);background-color:#0000;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:calc(var(--lea-spacing) * -.5);padding:0;display:inline-flex}@media (hover:hover){._CloseButton_1mady_135:hover{border-color:var(--lea-palette-primary-base);background-color:var(--lea-palette-primary-base);color:var(--lea-palette-primary-contrast)}}._CloseButton_1mady_135:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}@media (width<=599.95px){._Viewport_1mady_22:has(._Popup_1mady_38[data-full-screen-on-mobile]){padding:0}._Popup_1mady_38[data-full-screen-on-mobile]{border-radius:0;width:100vw;max-width:none;height:100dvh;max-height:none}._Popup_1mady_38[data-full-screen-on-mobile] ._Content_1mady_111{padding-bottom:calc(var(--lea-spacing) * 3 + env(safe-area-inset-bottom))}._Popup_1mady_38[data-full-screen-on-mobile] ._Content_1mady_111:has(+._Footer_1mady_119){padding-bottom:0}._Popup_1mady_38[data-full-screen-on-mobile] ._Footer_1mady_119{padding-bottom:calc(var(--lea-spacing) * 3 + env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){._Backdrop_1mady_8,._Popup_1mady_38,._CloseButton_1mady_135{transition-duration:.01ms}}._Switch_9c9ji_7{border-radius:var(--lea-radius-full);background-color:var(--lea-color-neutral-200);cursor:pointer;width:2.5rem;height:1.5rem;transition:background-color var(--lea-duration-normal) var(--lea-easing-standard);border:none;flex-shrink:0;align-items:center;padding:.125rem;display:inline-flex}._Switch_9c9ji_7[data-checked]{background-color:var(--lea-palette-primary-base)}._Switch_9c9ji_7:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Switch_9c9ji_7[data-disabled]{cursor:not-allowed;opacity:.5}._Thumb_9c9ji_36{border-radius:var(--lea-radius-full);background-color:var(--lea-palette-bg-base);width:1.25rem;height:1.25rem;transition:translate var(--lea-duration-normal) var(--lea-easing-standard);display:block}._Thumb_9c9ji_36[data-checked]{translate:1rem}@media (prefers-reduced-motion:reduce){._Switch_9c9ji_7,._Thumb_9c9ji_36{transition-duration:.01ms}}._Root_18gqk_13{--accordion-gap:var(--lea-spacing);--accordion-item-bg:transparent;--accordion-item-border:var(--lea-palette-border-subtle);--accordion-item-radius:var(--lea-radius-2xl);--accordion-header-radius:var(--lea-radius-2xl);--accordion-hover-border:var(--lea-palette-border-strong);--accordion-hover-bg:transparent;--accordion-active-bg:var(--lea-color-purple-50);gap:var(--accordion-gap);flex-direction:column;width:100%;display:flex}._Root_18gqk_13[data-variant=solid]{--accordion-item-bg:var(--lea-palette-bg-subtle);--accordion-item-border:transparent;--accordion-hover-border:transparent;--accordion-hover-bg:var(--lea-color-neutral-100);--accordion-active-bg:var(--lea-color-neutral-200)}._Root_18gqk_13[data-variant=divided],._Root_18gqk_13[data-variant=ghost]{--accordion-highlight:color-mix(in srgb, var(--lea-color-white) calc(var(--lea-opacity-highlight) * 100%), transparent);--accordion-item-border:transparent;--accordion-header-radius:var(--lea-radius-sm);--accordion-hover-border:transparent;--accordion-hover-bg:color-mix(in srgb, var(--lea-palette-text-base) calc(var(--lea-opacity-hover) * 100%), var(--accordion-highlight));--accordion-active-bg:color-mix(in srgb, var(--lea-palette-text-base) calc(var(--lea-opacity-pressed) * 100%), var(--accordion-highlight))}._Root_18gqk_13[data-variant=divided]{--accordion-gap:0;--accordion-item-radius:0}._Item_18gqk_10{border:1px solid var(--accordion-item-border);border-radius:var(--accordion-item-radius);background-color:var(--accordion-item-bg)}._Root_18gqk_13[data-variant=divided]>._Item_18gqk_10:not(:last-child){border-block-end-color:var(--lea-palette-border-subtle)}._Header_18gqk_10{align-items:center;gap:calc(var(--lea-spacing) * 2);padding:calc(var(--lea-spacing) * 1.7) calc(var(--lea-spacing) * 2);border-radius:var(--accordion-header-radius);transition:border-color var(--lea-duration-emphasis) var(--lea-easing-standard), background-color var(--lea-duration-emphasis) var(--lea-easing-standard);border:1px solid #0000;margin:0;display:flex}@media (hover:hover){._Header_18gqk_10:has(._Trigger_18gqk_95:hover:not([data-disabled])){border-color:var(--accordion-hover-border);background-color:var(--accordion-hover-bg)}}._Header_18gqk_10:has(._Trigger_18gqk_95:active:not([data-disabled])){background-color:var(--accordion-active-bg)}._Trigger_18gqk_95{justify-content:space-between;align-items:center;gap:var(--lea-spacing);min-width:0;color:var(--lea-palette-text-base);cursor:pointer;font-family:inherit;font-size:var(--lea-font-step-0);font-weight:var(--lea-font-weight-medium);line-height:var(--lea-line-height-normal);text-align:left;background-color:#0000;border:none;flex:1;margin:0;padding:0;display:flex}._Trigger_18gqk_95:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Trigger_18gqk_95[data-disabled]{color:var(--lea-palette-text-muted);cursor:not-allowed}._Label_18gqk_136{min-width:0}._Icon_18gqk_140{transition:transform var(--lea-duration-emphasis) var(--lea-easing-standard);flex-shrink:0}._Trigger_18gqk_95[data-panel-open] ._Icon_18gqk_140{transform:rotate(180deg)}._Root_18gqk_13[data-icon-position=start] ._Trigger_18gqk_95{justify-content:flex-start}._Root_18gqk_13[data-icon-position=start] ._Icon_18gqk_140{order:-1}._Panel_18gqk_158{height:var(--accordion-panel-height);transition:height var(--lea-duration-emphasis) var(--lea-easing-standard);overflow:hidden}._Panel_18gqk_158[data-starting-style],._Panel_18gqk_158[data-ending-style]{height:0}._Content_18gqk_169{padding-inline:calc(var(--lea-spacing) * 2);padding-block:var(--lea-spacing);color:var(--lea-palette-text-base);font-size:var(--lea-text-body-md-font-size);font-weight:var(--lea-text-body-md-font-weight);line-height:var(--lea-text-body-md-line-height);letter-spacing:var(--lea-text-body-md-letter-spacing)}@media (prefers-reduced-motion:reduce){._Header_18gqk_10,._Icon_18gqk_140,._Panel_18gqk_158{transition-duration:.01ms}}._Intro_nxwj4_7{color:var(--lea-palette-text-base)}._Intro_nxwj4_7 p,._Intro_nxwj4_7 ul,._Intro_nxwj4_7 ol{margin:0}._Intro_nxwj4_7>*+*{margin-top:var(--lea-spacing)}._Intro_nxwj4_7 ul,._Intro_nxwj4_7 ol{padding-inline-start:calc(var(--lea-spacing) * 2.5)}._Intro_nxwj4_7 a{border-radius:var(--lea-radius-sm);color:var(--lea-palette-text-accent);font-weight:var(--lea-font-weight-semibold);text-underline-offset:.15em;text-decoration:underline}._Intro_nxwj4_7 a:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Categories_nxwj4_39{margin-top:calc(var(--lea-spacing) * 3)}._CategoryDescription_nxwj4_43{color:var(--lea-palette-text-base);font-size:var(--lea-text-body-md-font-size);font-weight:var(--lea-text-body-md-font-weight);line-height:var(--lea-text-body-md-line-height);letter-spacing:var(--lea-text-body-md-letter-spacing);margin:0}._Actions_nxwj4_52{margin-top:calc(var(--lea-spacing) * 3);gap:var(--lea-spacing);border-top:1px solid var(--lea-palette-border-subtle);flex-wrap:wrap;display:flex}._Actions_nxwj4_52 button{border-radius:var(--lea-radius-2xl)}._Save_nxwj4_63{margin-inline-start:auto}@media (width<=599.95px){._Actions_nxwj4_52{flex-direction:column;align-items:stretch}._Save_nxwj4_63{margin-inline-start:0}}
+:root{--lea-spacing:.5rem;--lea-spacing-0-5:.25rem;--lea-spacing-1:.5rem;--lea-spacing-1-5:.75rem;--lea-spacing-2:1rem;--lea-spacing-2-5:1.25rem;--lea-spacing-3:1.5rem;--lea-spacing-4:2rem;--lea-spacing-5:2.5rem;--lea-spacing-6:3rem;--lea-spacing-8:4rem;--lea-palette-bg-base:#fff;--lea-palette-bg-subtle:#f7f7f6;--lea-palette-bg-muted:#f0e9e5;--lea-palette-bg-contrast:#0f1010;--lea-palette-bg-accent:#e2d8e4;--lea-palette-bg-overlay:#0f101080;--lea-palette-text-base:#0f1010;--lea-palette-text-subtle:#757575;--lea-palette-text-muted:#a2a2a2;--lea-palette-text-accent:#70427b;--lea-palette-text-contrast:#fff;--lea-palette-border-base:#dbdbdb;--lea-palette-border-subtle:#ebebeb;--lea-palette-border-strong:#0f1010;--lea-palette-border-accent:#70427b;--lea-palette-border-contrast:#fff;--lea-palette-primary-base:#70427b;--lea-palette-primary-hover:#5a3463;--lea-palette-primary-subtle:#e2d8e4;--lea-palette-primary-contrast:#fff;--lea-palette-secondary-base:#0f1010;--lea-palette-secondary-hover:#2e2e2e;--lea-palette-secondary-subtle:#ebebeb;--lea-palette-secondary-contrast:#fff;--lea-palette-tertiary-base:#08c2a7;--lea-palette-tertiary-hover:#46d1bd;--lea-palette-tertiary-subtle:#daf6f1;--lea-palette-tertiary-contrast:#fff;--lea-palette-status-error-base:#d32f2f;--lea-palette-status-error-subtle:#fcdcdc;--lea-palette-status-warning-base:#f7a800;--lea-palette-status-warning-subtle:#ffefc7;--lea-palette-status-info-base:#057ef2;--lea-palette-status-info-subtle:#cbe5fd;--lea-palette-status-success-base:#46d1bd;--lea-palette-status-success-subtle:#daf6f1;--lea-color-purple-50:#faf7fb;--lea-color-purple-100:#e2d8e4;--lea-color-purple-200:#c5b1ca;--lea-color-purple-300:#c29ac2;--lea-color-purple-400:#9e6da8;--lea-color-purple-500:#855888;--lea-color-purple-600:#70427b;--lea-color-purple-700:#5a3463;--lea-color-purple-800:#422349;--lea-color-purple-900:#2e1834;--lea-color-purple-950:#1a0e1e;--lea-color-teal-50:#f0fcfa;--lea-color-teal-100:#daf6f1;--lea-color-teal-200:#cef3ed;--lea-color-teal-300:#08c2a7;--lea-color-teal-400:#46d1bd;--lea-color-teal-500:#06a892;--lea-color-teal-600:#058f7d;--lea-color-teal-700:#047568;--lea-color-teal-800:#035c53;--lea-color-teal-900:#02433e;--lea-color-teal-950:#012a28;--lea-color-blue-50:#eff6ff;--lea-color-blue-100:#cbe5fd;--lea-color-blue-200:#93cbfc;--lea-color-blue-300:#4da8f7;--lea-color-blue-400:#057ef2;--lea-color-blue-500:#0468c9;--lea-color-blue-600:#0354a3;--lea-color-blue-700:#02417d;--lea-color-blue-800:#012e57;--lea-color-blue-900:#011b31;--lea-color-blue-950:#000e19;--lea-color-orange-50:#fff5f2;--lea-color-orange-100:#ffdfd7;--lea-color-orange-200:#ffc4b5;--lea-color-orange-300:#ff9e87;--lea-color-orange-400:#fe653e;--lea-color-orange-500:#e54e28;--lea-color-orange-600:#c43e1c;--lea-color-orange-700:#a33218;--lea-color-orange-800:#822814;--lea-color-orange-900:#611e0f;--lea-color-orange-950:#401408;--lea-color-amber-50:#fff9eb;--lea-color-amber-100:#ffefc7;--lea-color-amber-200:#ffe299;--lea-color-amber-300:#ffcf5c;--lea-color-amber-400:#f7a800;--lea-color-amber-500:#d98f00;--lea-color-amber-600:#b37400;--lea-color-amber-700:#8c5a00;--lea-color-amber-800:#6b4500;--lea-color-amber-900:#4a3000;--lea-color-amber-950:#2e1d00;--lea-color-red-50:#fef2f2;--lea-color-red-100:#fcdcdc;--lea-color-red-200:#f9bbbb;--lea-color-red-300:#f28888;--lea-color-red-400:#e85555;--lea-color-red-500:#d32f2f;--lea-color-red-600:#ad2121;--lea-color-red-700:#8a1919;--lea-color-red-800:#6f1313;--lea-color-red-900:#4d0e0e;--lea-color-red-950:#2e0808;--lea-color-beige-50:#faf7f5;--lea-color-beige-100:#f0e9e5;--lea-color-beige-200:#e0d4cd;--lea-color-beige-300:#c9b8ad;--lea-color-beige-400:#b09a8c;--lea-color-beige-500:#977c6b;--lea-color-beige-600:#7e6556;--lea-color-beige-700:#654f42;--lea-color-beige-800:#4c3a32;--lea-color-beige-900:#332722;--lea-color-beige-950:#1a1411;--lea-color-neutral-50:#f7f7f6;--lea-color-neutral-100:#ebebeb;--lea-color-neutral-200:#dbdbdb;--lea-color-neutral-300:#c4c4c4;--lea-color-neutral-400:#a2a2a2;--lea-color-neutral-500:#757575;--lea-color-neutral-600:#5e5e5e;--lea-color-neutral-700:#454545;--lea-color-neutral-800:#2e2e2e;--lea-color-neutral-900:#1a1a1a;--lea-color-neutral-950:#0f1010;--lea-color-white:#fff;--lea-color-black:#0f1010;--lea-radius-sm:4px;--lea-radius-md:5px;--lea-radius-lg:6px;--lea-radius-xl:8px;--lea-radius-2xl:10px;--lea-radius-3xl:12px;--lea-radius-4xl:16px;--lea-radius-5xl:32px;--lea-radius-huge:64px;--lea-radius-full:100px;--lea-shadow-xs:0 1px 2px 0 #0000000d;--lea-shadow-sm:0px 1px 3px 0px #0000001a, 0px 1px 2px -1px #0000001a;--lea-shadow-md:0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;--lea-shadow-lg:0px 10px 15px -3px #0000001a, 0px 4px 6px -4px #0000001a;--lea-shadow-xl:0px 20px 25px -5px #0000001a, 0px 8px 10px -6px #0000001a;--lea-shadow-2xl:0px 25px 50px -12px #00000040;--lea-shadow-inner:0px 2px 4px 0px #0000000d inset;--lea-font-family:"ClashGrotesk", "ClashGrotesk Fallback", sans-serif;--lea-font-size-xs:.75rem;--lea-font-size-sm:.875rem;--lea-font-size-md:1rem;--lea-font-size-lg:1.25rem;--lea-font-size-xl:1.5rem;--lea-font-size-2xl:2rem;--lea-font-size-3xl:2.5rem;--lea-font-size-4xl:3rem;--lea-font-size-5xl:3.5rem;--lea-font-size-6xl:4rem;--lea-font-weight-thin:200;--lea-font-weight-light:300;--lea-font-weight-regular:400;--lea-font-weight-medium:500;--lea-font-weight-semibold:600;--lea-font-weight-bold:700;--lea-font-weight-black:800;--lea-font-step-minus-2:.8125rem;--lea-font-step-minus-1:.875rem;--lea-font-step-0:1rem;--lea-font-step-1:1.125rem;--lea-font-step-2:1.25rem;--lea-font-step-3:1.4375rem;--lea-font-step-4:1.625rem;--lea-font-step-5:1.8125rem;--lea-font-step-6:2rem;--lea-font-step-7:2.25rem;--lea-font-step-8:2.5625rem;--lea-font-step-9:2.875rem;--lea-font-step-10:3.25rem;--lea-font-step-11:3.625rem;--lea-font-step-12:4.125rem;--lea-line-height-none:1;--lea-line-height-tight:1.25;--lea-line-height-snug:1.4;--lea-line-height-normal:1.5;--lea-text-display-sm-font-size:var(--lea-font-step-10);--lea-text-display-sm-font-weight:var(--lea-font-weight-semibold);--lea-text-display-sm-line-height:var(--lea-line-height-none);--lea-text-display-sm-letter-spacing:0;--lea-text-display-md-font-size:var(--lea-font-step-12);--lea-text-display-md-font-weight:var(--lea-font-weight-semibold);--lea-text-display-md-line-height:var(--lea-line-height-none);--lea-text-display-md-letter-spacing:0;--lea-text-heading-xs-font-size:var(--lea-font-step-0);--lea-text-heading-xs-font-weight:var(--lea-font-weight-semibold);--lea-text-heading-xs-line-height:var(--lea-line-height-snug);--lea-text-heading-xs-letter-spacing:0;--lea-text-heading-sm-font-size:var(--lea-font-step-2);--lea-text-heading-sm-font-weight:var(--lea-font-weight-semibold);--lea-text-heading-sm-line-height:var(--lea-line-height-snug);--lea-text-heading-sm-letter-spacing:0;--lea-text-heading-md-font-size:var(--lea-font-step-4);--lea-text-heading-md-font-weight:var(--lea-font-weight-semibold);--lea-text-heading-md-line-height:var(--lea-line-height-snug);--lea-text-heading-md-letter-spacing:0;--lea-text-heading-lg-font-size:var(--lea-font-step-6);--lea-text-heading-lg-font-weight:var(--lea-font-weight-semibold);--lea-text-heading-lg-line-height:var(--lea-line-height-tight);--lea-text-heading-lg-letter-spacing:0;--lea-text-heading-xl-font-size:var(--lea-font-step-8);--lea-text-heading-xl-font-weight:var(--lea-font-weight-semibold);--lea-text-heading-xl-line-height:var(--lea-line-height-tight);--lea-text-heading-xl-letter-spacing:0;--lea-text-body-xs-font-size:var(--lea-font-step-minus-2);--lea-text-body-xs-font-weight:var(--lea-font-weight-regular);--lea-text-body-xs-line-height:var(--lea-line-height-normal);--lea-text-body-xs-letter-spacing:0;--lea-text-body-sm-font-size:var(--lea-font-step-minus-1);--lea-text-body-sm-font-weight:var(--lea-font-weight-regular);--lea-text-body-sm-line-height:var(--lea-line-height-normal);--lea-text-body-sm-letter-spacing:0;--lea-text-body-md-font-size:var(--lea-font-step-0);--lea-text-body-md-font-weight:var(--lea-font-weight-regular);--lea-text-body-md-line-height:var(--lea-line-height-normal);--lea-text-body-md-letter-spacing:0;--lea-text-body-lg-font-size:var(--lea-font-step-1);--lea-text-body-lg-font-weight:var(--lea-font-weight-regular);--lea-text-body-lg-line-height:var(--lea-line-height-normal);--lea-text-body-lg-letter-spacing:0;--lea-text-label-sm-font-size:var(--lea-font-step-minus-2);--lea-text-label-sm-font-weight:var(--lea-font-weight-medium);--lea-text-label-sm-line-height:var(--lea-line-height-tight);--lea-text-label-sm-letter-spacing:0;--lea-text-label-md-font-size:var(--lea-font-step-minus-1);--lea-text-label-md-font-weight:var(--lea-font-weight-medium);--lea-text-label-md-line-height:var(--lea-line-height-tight);--lea-text-label-md-letter-spacing:0;--lea-text-label-lg-font-size:var(--lea-font-step-0);--lea-text-label-lg-font-weight:var(--lea-font-weight-medium);--lea-text-label-lg-line-height:var(--lea-line-height-tight);--lea-text-label-lg-letter-spacing:0;--lea-opacity-hover:.08;--lea-opacity-pressed:.12;--lea-opacity-highlight:.6;--lea-duration-fast:.15s;--lea-duration-normal:.2s;--lea-duration-emphasis:.3s;--lea-easing-standard:ease-in-out;--lea-easing-spring:cubic-bezier(.34, 1.56, .64, 1);--lea-breakpoint-xs:0px;--lea-breakpoint-sm:600px;--lea-breakpoint-md:900px;--lea-breakpoint-lg:1200px;--lea-breakpoint-xl:1536px}@layer theme,base;@layer components{._Button_1d72q_1{--button-solid:var(--lea-palette-primary-base);--button-solid-hover:var(--lea-palette-primary-hover);--button-on-solid:var(--lea-palette-primary-contrast);--button-fg:var(--lea-palette-primary-base);--button-border:var(--lea-palette-primary-base);--button-tint:color-mix(in srgb, var(--button-fg) calc(var(--lea-opacity-hover) * 100%), color-mix(in srgb, var(--lea-color-white) calc(var(--lea-opacity-highlight) * 100%), transparent));--button-height:2.75rem;--button-icon-size:1.25rem;--button-padding-inline:calc(var(--lea-spacing) * 2.5);box-sizing:border-box;min-height:var(--button-height);justify-content:center;align-items:center;gap:var(--lea-spacing);padding-block:calc(var(--lea-spacing) * .5);padding-inline:var(--button-padding-inline);border-radius:var(--lea-radius-full);color:var(--button-fg);font-family:inherit;font-size:var(--lea-text-label-lg-font-size);font-weight:var(--lea-text-label-lg-font-weight);line-height:var(--lea-text-label-lg-line-height);letter-spacing:var(--lea-text-label-lg-letter-spacing);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--lea-duration-normal) var(--lea-easing-standard), border-color var(--lea-duration-normal) var(--lea-easing-standard), color var(--lea-duration-normal) var(--lea-easing-standard), opacity var(--lea-duration-normal) var(--lea-easing-standard);background-color:#0000;border:1px solid #0000;flex-shrink:0;margin:0;text-decoration:none;display:inline-flex}._Button_1d72q_1 svg{width:var(--button-icon-size);height:var(--button-icon-size);flex-shrink:0}._Button_1d72q_1:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Button_1d72q_1[data-color=secondary]{--button-solid:var(--lea-palette-secondary-base);--button-solid-hover:var(--lea-palette-secondary-hover);--button-on-solid:var(--lea-palette-secondary-contrast);--button-fg:var(--lea-palette-secondary-base);--button-border:var(--lea-palette-secondary-base)}._Button_1d72q_1[data-color=error]{--button-solid:var(--lea-color-red-600);--button-solid-hover:var(--lea-color-red-500);--button-on-solid:var(--lea-palette-text-contrast);--button-fg:var(--lea-color-red-600);--button-border:var(--lea-color-red-600)}._Button_1d72q_1[data-variant=solid]{background-color:var(--button-solid);color:var(--button-on-solid)}._Button_1d72q_1[data-variant=outline]{border-color:var(--button-border)}@media (hover:hover){._Button_1d72q_1[data-variant=solid]:not([data-disabled]):hover{background-color:var(--button-solid-hover)}._Button_1d72q_1[data-variant=outline]:not([data-disabled]):hover,._Button_1d72q_1[data-variant=ghost]:not([data-disabled]):hover{background-color:var(--button-tint)}}._Button_1d72q_1[data-size=sm]{--button-height:2.25rem;--button-icon-size:1rem;--button-padding-inline:calc(var(--lea-spacing) * 2)}._Button_1d72q_1[data-size=lg]{--button-height:3.25rem;--button-icon-size:1.5rem;--button-padding-inline:calc(var(--lea-spacing) * 2.5)}._Button_1d72q_1[data-start-icon]{padding-inline-start:calc(var(--button-padding-inline) - var(--lea-spacing))}._Button_1d72q_1[data-end-icon]{padding-inline-end:calc(var(--button-padding-inline) - var(--lea-spacing))}._Button_1d72q_1._IconButton_1d72q_125{width:var(--button-height);height:var(--button-height);padding:0}._Button_1d72q_1[data-disabled]:not([data-loading]){color:var(--lea-color-neutral-400);cursor:not-allowed}._Button_1d72q_1[data-variant=solid][data-disabled]:not([data-loading]){background-color:var(--lea-color-neutral-200);color:var(--lea-color-neutral-600)}._Button_1d72q_1[data-variant=outline][data-disabled]:not([data-loading]){border-color:var(--lea-palette-border-base)}._Button_1d72q_1[data-loading]{cursor:progress;opacity:.7}._Spinner_1d72q_150{box-sizing:border-box;width:var(--button-icon-size);height:var(--button-icon-size);border:2px solid;border-radius:var(--lea-radius-full);border-inline-end-color:#0000;flex-shrink:0;animation:.8s linear infinite _button-spin_1d72q_1;display:inline-block}@keyframes _button-spin_1d72q_1{to{rotate:360deg}}._SrOnly_1d72q_168{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){._Button_1d72q_1{transition-duration:.01ms}._Spinner_1d72q_150{animation:none}}._Backdrop_1mady_8{z-index:1300;background-color:var(--lea-palette-bg-overlay);opacity:1;transition:opacity var(--lea-duration-normal) var(--lea-easing-standard);position:fixed;inset:0}._Backdrop_1mady_8[data-starting-style],._Backdrop_1mady_8[data-ending-style]{opacity:0}._Viewport_1mady_22{z-index:1300;padding:calc(var(--lea-spacing) * 2);pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}._Popup_1mady_38{border-radius:var(--lea-radius-4xl);background-color:var(--lea-palette-bg-base);width:100%;max-height:100%;box-shadow:var(--lea-shadow-xl);color:var(--lea-palette-text-base);opacity:1;pointer-events:auto;transition:opacity var(--lea-duration-normal) var(--lea-easing-standard), transform var(--lea-duration-normal) var(--lea-easing-standard);flex-direction:column;display:flex;overflow:hidden;transform:scale(1)}._Popup_1mady_38[data-starting-style],._Popup_1mady_38[data-ending-style]{opacity:0;transform:scale(.95)}._Popup_1mady_38[data-size=xs]{max-width:27.75rem}._Popup_1mady_38[data-size=sm]{max-width:37.5rem}._Popup_1mady_38[data-size=md]{max-width:56.25rem}._Popup_1mady_38[data-size=lg]{max-width:75rem}._Header_1mady_78{justify-content:space-between;align-items:flex-start;gap:var(--lea-spacing);padding:calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 2);flex-shrink:0;display:flex}._Title_1mady_88{color:var(--lea-palette-text-base);font-size:var(--lea-text-heading-sm-font-size);font-weight:var(--lea-text-heading-sm-font-weight);line-height:var(--lea-text-heading-sm-line-height);letter-spacing:var(--lea-text-heading-sm-letter-spacing);margin:0}._Description_1mady_97{margin:0 0 calc(var(--lea-spacing) * 2);color:var(--lea-palette-text-subtle)}._Description_1mady_97[data-last]{margin-bottom:0}._Content_1mady_111{padding:0 calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 3);color:var(--lea-palette-text-base);flex:1;overflow-y:auto}._Content_1mady_111:has(+._Footer_1mady_119){padding-bottom:0}._Footer_1mady_119{justify-content:flex-end;align-items:center;gap:var(--lea-spacing);padding:calc(var(--lea-spacing) * 2) calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 2);background-color:var(--lea-palette-bg-base);flex-wrap:wrap;flex-shrink:0;display:flex}._CloseButton_1mady_135{border:2px solid var(--lea-palette-border-base);border-radius:var(--lea-radius-full);width:2.5rem;height:2.5rem;color:var(--lea-palette-text-base);cursor:pointer;transition:border-color var(--lea-duration-emphasis) var(--lea-easing-spring), background-color var(--lea-duration-emphasis) var(--lea-easing-spring), color var(--lea-duration-emphasis) var(--lea-easing-spring);background-color:#0000;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:calc(var(--lea-spacing) * -.5);padding:0;display:inline-flex}@media (hover:hover){._CloseButton_1mady_135:hover{border-color:var(--lea-palette-primary-base);background-color:var(--lea-palette-primary-base);color:var(--lea-palette-primary-contrast)}}._CloseButton_1mady_135:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}@media (width<=599.95px){._Viewport_1mady_22:has(._Popup_1mady_38[data-full-screen-on-mobile]){padding:0}._Popup_1mady_38[data-full-screen-on-mobile]{border-radius:0;width:100vw;max-width:none;height:100dvh;max-height:none}._Popup_1mady_38[data-full-screen-on-mobile] ._Content_1mady_111{padding-bottom:calc(var(--lea-spacing) * 3 + env(safe-area-inset-bottom))}._Popup_1mady_38[data-full-screen-on-mobile] ._Content_1mady_111:has(+._Footer_1mady_119){padding-bottom:0}._Popup_1mady_38[data-full-screen-on-mobile] ._Footer_1mady_119{padding-bottom:calc(var(--lea-spacing) * 3 + env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){._Backdrop_1mady_8,._Popup_1mady_38,._CloseButton_1mady_135{transition-duration:.01ms}}._Switch_9c9ji_7{border-radius:var(--lea-radius-full);background-color:var(--lea-color-neutral-200);cursor:pointer;width:2.5rem;height:1.5rem;transition:background-color var(--lea-duration-normal) var(--lea-easing-standard);border:none;flex-shrink:0;align-items:center;padding:.125rem;display:inline-flex}._Switch_9c9ji_7[data-checked]{background-color:var(--lea-palette-primary-base)}._Switch_9c9ji_7:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Switch_9c9ji_7[data-disabled]{cursor:not-allowed;opacity:.5}._Thumb_9c9ji_36{border-radius:var(--lea-radius-full);background-color:var(--lea-palette-bg-base);width:1.25rem;height:1.25rem;transition:translate var(--lea-duration-normal) var(--lea-easing-standard);display:block}._Thumb_9c9ji_36[data-checked]{translate:1rem}@media (prefers-reduced-motion:reduce){._Switch_9c9ji_7,._Thumb_9c9ji_36{transition-duration:.01ms}}._Root_18gqk_13{--accordion-gap:var(--lea-spacing);--accordion-item-bg:transparent;--accordion-item-border:var(--lea-palette-border-subtle);--accordion-item-radius:var(--lea-radius-2xl);--accordion-header-radius:var(--lea-radius-2xl);--accordion-hover-border:var(--lea-palette-border-strong);--accordion-hover-bg:transparent;--accordion-active-bg:var(--lea-color-purple-50);gap:var(--accordion-gap);flex-direction:column;width:100%;display:flex}._Root_18gqk_13[data-variant=solid]{--accordion-item-bg:var(--lea-palette-bg-subtle);--accordion-item-border:transparent;--accordion-hover-border:transparent;--accordion-hover-bg:var(--lea-color-neutral-100);--accordion-active-bg:var(--lea-color-neutral-200)}._Root_18gqk_13[data-variant=divided],._Root_18gqk_13[data-variant=ghost]{--accordion-highlight:color-mix(in srgb, var(--lea-color-white) calc(var(--lea-opacity-highlight) * 100%), transparent);--accordion-item-border:transparent;--accordion-header-radius:var(--lea-radius-sm);--accordion-hover-border:transparent;--accordion-hover-bg:color-mix(in srgb, var(--lea-palette-text-base) calc(var(--lea-opacity-hover) * 100%), var(--accordion-highlight));--accordion-active-bg:color-mix(in srgb, var(--lea-palette-text-base) calc(var(--lea-opacity-pressed) * 100%), var(--accordion-highlight))}._Root_18gqk_13[data-variant=divided]{--accordion-gap:0;--accordion-item-radius:0}._Item_18gqk_10{border:1px solid var(--accordion-item-border);border-radius:var(--accordion-item-radius);background-color:var(--accordion-item-bg)}._Root_18gqk_13[data-variant=divided]>._Item_18gqk_10:not(:last-child){border-block-end-color:var(--lea-palette-border-subtle)}._Header_18gqk_10{align-items:center;gap:calc(var(--lea-spacing) * 2);padding:calc(var(--lea-spacing) * 1.7) calc(var(--lea-spacing) * 2);border-radius:var(--accordion-header-radius);transition:border-color var(--lea-duration-emphasis) var(--lea-easing-standard), background-color var(--lea-duration-emphasis) var(--lea-easing-standard);border:1px solid #0000;margin:0;display:flex}@media (hover:hover){._Header_18gqk_10:has(._Trigger_18gqk_95:hover:not([data-disabled])){border-color:var(--accordion-hover-border);background-color:var(--accordion-hover-bg)}}._Header_18gqk_10:has(._Trigger_18gqk_95:active:not([data-disabled])){background-color:var(--accordion-active-bg)}._Trigger_18gqk_95{justify-content:space-between;align-items:center;gap:var(--lea-spacing);min-width:0;color:var(--lea-palette-text-base);cursor:pointer;font-family:inherit;font-size:var(--lea-font-step-0);font-weight:var(--lea-font-weight-medium);line-height:var(--lea-line-height-normal);text-align:left;background-color:#0000;border:none;flex:1;margin:0;padding:0;display:flex}._Trigger_18gqk_95:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Trigger_18gqk_95[data-disabled]{color:var(--lea-palette-text-muted);cursor:not-allowed}._Label_18gqk_136{min-width:0}._Icon_18gqk_140{transition:transform var(--lea-duration-emphasis) var(--lea-easing-standard);flex-shrink:0}._Trigger_18gqk_95[data-panel-open] ._Icon_18gqk_140{transform:rotate(180deg)}._Root_18gqk_13[data-icon-position=start] ._Trigger_18gqk_95{justify-content:flex-start}._Root_18gqk_13[data-icon-position=start] ._Icon_18gqk_140{order:-1}._Panel_18gqk_158{height:var(--accordion-panel-height);transition:height var(--lea-duration-emphasis) var(--lea-easing-standard);overflow:hidden}._Panel_18gqk_158[data-starting-style],._Panel_18gqk_158[data-ending-style]{height:0}._Content_18gqk_169{padding-inline:calc(var(--lea-spacing) * 2);padding-block:var(--lea-spacing);color:var(--lea-palette-text-base);font-size:var(--lea-text-body-md-font-size);font-weight:var(--lea-text-body-md-font-weight);line-height:var(--lea-text-body-md-line-height);letter-spacing:var(--lea-text-body-md-letter-spacing)}@media (prefers-reduced-motion:reduce){._Header_18gqk_10,._Icon_18gqk_140,._Panel_18gqk_158{transition-duration:.01ms}}._Intro_nxwj4_7{color:var(--lea-palette-text-base)}._Intro_nxwj4_7 p,._Intro_nxwj4_7 ul,._Intro_nxwj4_7 ol{margin:0}._Intro_nxwj4_7>*+*{margin-top:var(--lea-spacing)}._Intro_nxwj4_7 ul,._Intro_nxwj4_7 ol{padding-inline-start:calc(var(--lea-spacing) * 2.5)}._Intro_nxwj4_7 a{border-radius:var(--lea-radius-sm);color:var(--lea-palette-text-accent);font-weight:var(--lea-font-weight-semibold);text-underline-offset:.15em;text-decoration:underline}._Intro_nxwj4_7 a:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Categories_nxwj4_39{margin-top:calc(var(--lea-spacing) * 3)}._CategoryDescription_nxwj4_43{color:var(--lea-palette-text-base);font-size:var(--lea-text-body-md-font-size);font-weight:var(--lea-text-body-md-font-weight);line-height:var(--lea-text-body-md-line-height);letter-spacing:var(--lea-text-body-md-letter-spacing);margin:0}._Actions_nxwj4_52{margin-top:calc(var(--lea-spacing) * 3);gap:var(--lea-spacing);border-top:1px solid var(--lea-palette-border-subtle);flex-wrap:wrap;display:flex}._Actions_nxwj4_52 button{border-radius:var(--lea-radius-2xl)}._Save_nxwj4_63{margin-inline-start:auto}@media (width<=599.95px){._Actions_nxwj4_52{flex-direction:column;align-items:stretch}._Save_nxwj4_63{margin-inline-start:0}}}@layer utilities;

package/dist/dev-panel/dev-panel.d.ts

@@ -1,6 +1,12 @@
 import { CSSProperties, ReactNode } from 'react';
 /** Reads the enclosing `DevPanel.Section` heading id, if any. */
 export declare function useDevPanelSectionLabelId(): string | undefined;
+/**
+ * Whether a key press is the shortcut, written as `"Mod+Shift+D"`: the key
+ * last, after any of `Mod` (⌘ on a Mac, Ctrl elsewhere), `Ctrl`, `Meta`,
+ * `Alt` and `Shift`. A modifier not named must not be held.
+ */
+export declare function matchesShortcut(event: KeyboardEvent, shortcut: string): boolean;
 export type DevPanelProps = {
     /** Panel title shown in the header. Defaults to `"Dev controls"`. */
     title?: ReactNode;
@@ -20,6 +26,30 @@ export type DevPanelProps = {
     minimiseLabel?: string;
     /** Accessible name for the restore button. Defaults to a translated label. */
     expandLabel?: string;
+    /**
+     * Lets the panel be hidden completely: a hide button joins the minimise
+     * button, `shortcut` toggles it, and while it is hidden `handle` (a small
+     * tab at the edge of the window) brings it back. On a narrow screen the
+     * panel also starts minimised, drawn as a small round button. Defaults to
+     * `true` when `hidden` or `defaultHidden` is passed.
+     */
+    hideable?: boolean;
+    /** Controlled hidden state. Omit for uncontrolled. */
+    hidden?: boolean;
+    /** Initial hidden state when uncontrolled. Defaults to `false`. */
+    defaultHidden?: boolean;
+    /** Called whenever the hidden state changes. Store it to keep it across reloads. */
+    onHiddenChange?: (hidden: boolean) => void;
+    /**
+     * The keys that hide and show the panel, anywhere on the page. `Mod` is ⌘
+     * on a Mac and Ctrl elsewhere. `false` turns it off.
+     * @default "Mod+Shift+D"
+     */
+    shortcut?: string | false;
+    /** What shows while the panel is hidden. Defaults to `<DevPanel.Handle />`. */
+    handle?: ReactNode;
+    /** Accessible name for the hide button. Defaults to a translated label. */
+    hideLabel?: string;
     /** Section content: compose the `DevPanel.*` sub-components here. */
     children?: ReactNode;
     /** Class on the outermost element, for placing the panel. */
@@ -45,7 +75,7 @@ export type DevPanelProps = {
  * </DevPanel.Root>
  * ```
  */
-export declare function DevPanel({ title, badge, showStatusDot, minimisable, minimised, defaultMinimised, onMinimisedChange, minimiseLabel, expandLabel, children, className, style, }: DevPanelProps): import("react").JSX.Element;
+export declare function DevPanel({ title, badge, showStatusDot, minimisable, minimised, defaultMinimised, onMinimisedChange, minimiseLabel, expandLabel, hidden, defaultHidden, onHiddenChange, hideable, shortcut, handle, hideLabel, children, className, style, }: DevPanelProps): import("react").JSX.Element;
 export type DevPanelSectionProps = {
     /** The uppercase section heading (e.g. `"Country"`). */
     label: ReactNode;
@@ -65,3 +95,24 @@ export type DevPanelSectionProps = {
  * wiring.
  */
 export declare function DevPanelSection({ label, meta, children, className, style, }: DevPanelSectionProps): import("react").JSX.Element;
+export type DevPanelHandleProps = {
+    /** The edge of the window the tab sits on. Defaults to `"right"`. */
+    side?: "left" | "right";
+    /** The text on the tab. Defaults to the panel's `title`. */
+    label?: ReactNode;
+    /** Class on the button, for placing it differently. */
+    className?: string;
+    /** Inline style on the button, for placing it differently. */
+    style?: CSSProperties;
+};
+/**
+ * The tab that stands in for a hidden `DevPanel.Root` and brings it back: a
+ * small button fixed to the bottom of the right (or left) edge of the window.
+ * The panel renders it while hidden, so it is only used as the panel's
+ * `handle`, to change its side or text:
+ *
+ * ```tsx
+ * <DevPanel.Root hideable handle={<DevPanel.Handle side="left" />}>
+ * ```
+ */
+export declare function DevPanelHandle({ side, label, className, style, }: DevPanelHandleProps): import("react").JSX.Element | null;

package/dist/dev-panel/parts.d.ts

@@ -1,4 +1,4 @@
-export { DevPanel as Root, DevPanelSection as Section, useDevPanelSectionLabelId as useSectionLabelId, type DevPanelProps as RootProps, type DevPanelSectionProps as SectionProps, } from './dev-panel';
+export { DevPanel as Root, DevPanelHandle as Handle, DevPanelSection as Section, useDevPanelSectionLabelId as useSectionLabelId, type DevPanelHandleProps as HandleProps, type DevPanelProps as RootProps, type DevPanelSectionProps as SectionProps, } from './dev-panel';
 export { DevPanelCountry as Country, type DevPanelCountryOption as CountryOption, type DevPanelCountryProps as CountryProps, } from './dev-panel-country';
 export { DevPanelVariant as Variant, type DevPanelVariantOption as VariantOption, type DevPanelVariantProps as VariantProps, } from './dev-panel-variant';
 export { DevPanelStepState as StepState, type DevPanelStepStateOption as StepStateOption, type DevPanelStepStateProps as StepStateProps, } from './dev-panel-step-state';

package/dist/dev-panel/use-dev-panel-labels.d.ts

@@ -4,4 +4,4 @@
  * announced to assistive tech). Every string is overridable per-instance via a
  * matching prop, so consumers can localise or reword without forking.
  */
-export declare const useDevPanelLabels: () => Record<"step" | "copy" | "close" | "expand" | "copied" | "copyJson" | "minimise" | "statusCompleted" | "statusCurrent" | "statusUpcoming" | "needsAttention", string>;
+export declare const useDevPanelLabels: () => Record<"step" | "show" | "hide" | "copy" | "close" | "expand" | "copied" | "copyJson" | "minimise" | "statusCompleted" | "statusCurrent" | "statusUpcoming" | "needsAttention", string>;

package/dist/dev-panel.cjs

@@ -1,3 +1,3 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});require('./dev-panel.css');var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};let n=require("lucide-react"),r=require("react"),i=require("./component-library.umd.js"),a=require("react/jsx-runtime"),o=require("react-dom");var s={Badge:`_Badge_1o2qd_23`,SectionLabel:`_SectionLabel_1o2qd_24`,SectionMeta:`_SectionMeta_1o2qd_25`,FlowLabel:`_FlowLabel_1o2qd_26`,CountryCode:`_CountryCode_1o2qd_27`,StepLabel:`_StepLabel_1o2qd_28`,PayloadCode:`_PayloadCode_1o2qd_29`,DevPanel:`_DevPanel_1o2qd_38`,Header:`_Header_1o2qd_53`,HeaderTitle:`_HeaderTitle_1o2qd_65`,HeaderDot:`_HeaderDot_1o2qd_75`,Body:`_Body_1o2qd_105`,Section:`_Section_1o2qd_24`,SectionHeaderRow:`_SectionHeaderRow_1o2qd_123`,Flow:`_Flow_1o2qd_26`,FlowText:`_FlowText_1o2qd_165`,FlowSeparator:`_FlowSeparator_1o2qd_190`,SegmentedGroup:`_SegmentedGroup_1o2qd_203`,SegmentedOption:`_SegmentedOption_1o2qd_224`,ChipGroup:`_ChipGroup_1o2qd_276`,Chip:`_Chip_1o2qd_276`,ChipDot:`_ChipDot_1o2qd_315`,StepGrid:`_StepGrid_1o2qd_339`,StepButton:`_StepButton_1o2qd_345`,StepCircle:`_StepCircle_1o2qd_369`,StepFlagDot:`_StepFlagDot_1o2qd_411`,StepStateName:`_StepStateName_1o2qd_442`,StatusGrid:`_StatusGrid_1o2qd_451`,StatusCard:`_StatusCard_1o2qd_458`,StatusDot:`_StatusDot_1o2qd_517`,PayloadToggle:`_PayloadToggle_1o2qd_529`,PayloadToggleLabel:`_PayloadToggleLabel_1o2qd_549`,PayloadChevron:`_PayloadChevron_1o2qd_556`,PayloadPanel:`_PayloadPanel_1o2qd_580`,PayloadHeader:`_PayloadHeader_1o2qd_588`,Token:`_Token_1o2qd_623`,Flyout:`_Flyout_1o2qd_657`,FlyoutTitle:`_FlyoutTitle_1o2qd_671`,FlyoutFooter:`_FlyoutFooter_1o2qd_685`,FlyoutCopyButton:`_FlyoutCopyButton_1o2qd_692`,Footer:`_Footer_1o2qd_732`,OnDark:`_OnDark_1o2qd_760`,VisuallyHidden:`_VisuallyHidden_1o2qd_771`},c=(0,i.createTranslation)({copy:{no:`Kopier`,se:`Kopiera`,fi:`Kopioi`,es:`Copiar`},copied:{no:`Kopiert`,se:`Kopierad`,fi:`Kopioitu`,es:`Copiado`},copyJson:{no:`Kopier JSON`,se:`Kopiera JSON`,fi:`Kopioi JSON`,es:`Copiar JSON`},close:{no:`Lukk`,se:`Stäng`,fi:`Sulje`,es:`Cerrar`},minimise:{no:`Minimer`,se:`Minimera`,fi:`Pienennä`,es:`Minimizar`},expand:{no:`Utvid`,se:`Expandera`,fi:`Laajenna`,es:`Expandir`},step:{no:`Steg`,se:`Steg`,fi:`Vaihe`,es:`Paso`},statusCompleted:{no:`fullført`,se:`slutförd`,fi:`valmis`,es:`completado`},statusCurrent:{no:`gjeldende`,se:`aktuell`,fi:`nykyinen`,es:`actual`},statusUpcoming:{no:`ikke startet`,se:`inte påbörjad`,fi:`aloittamatta`,es:`no iniciado`},needsAttention:{no:`krever oppmerksomhet`,se:`kräver uppmärksamhet`,fi:`vaatii huomiota`,es:`requiere atención`}}),l=(...e)=>e.filter(Boolean).join(` `),u=(0,r.createContext)(void 0);function d(){return(0,r.useContext)(u)}function f({title:e=`Dev controls`,badge:t,showStatusDot:o=!0,minimisable:u=!0,minimised:d,defaultMinimised:f=!1,onMinimisedChange:p,minimiseLabel:m,expandLabel:h,children:g,className:_,style:v}){let y=c(),b=d!==void 0,[x,S]=(0,r.useState)(f),C=b?d:x,w=()=>{let e=!C;b||S(e),p?.(e)},T=(0,r.useId)();return(0,a.jsxs)(`div`,{"data-dev-panel-root":``,className:l(s.DevPanel,_),style:v,children:[(0,a.jsxs)(`header`,{className:s.Header,children:[(0,a.jsxs)(`span`,{className:s.HeaderTitle,children:[o&&(0,a.jsx)(`span`,{className:s.HeaderDot,"aria-hidden":!0}),(0,a.jsx)(`span`,{children:e}),t!=null&&(0,a.jsx)(`span`,{className:s.Badge,children:t})]}),u&&(0,a.jsx)(i.IconButton,{"aria-label":C?h??y.expand:m??y.minimise,"aria-expanded":!C,"aria-controls":T,onClick:w,variant:`outline`,color:`secondary`,size:`sm`,children:C?(0,a.jsx)(n.Plus,{size:18,"aria-hidden":!0}):(0,a.jsx)(n.Minus,{size:18,"aria-hidden":!0})})]}),!C&&(0,a.jsx)(`div`,{id:T,className:s.Body,children:g})]})}function p({label:e,meta:t,children:n,className:i,style:o}){let c=(0,r.useId)();return(0,a.jsxs)(`section`,{"aria-labelledby":c,className:l(s.Section,i),style:o,children:[(0,a.jsxs)(`div`,{className:s.SectionHeaderRow,children:[(0,a.jsx)(`span`,{id:c,className:s.SectionLabel,children:e}),t!=null&&(0,a.jsx)(`span`,{className:s.SectionMeta,children:t})]}),(0,a.jsx)(u.Provider,{value:c,children:n})]})}function m({values:e,selected:t,onSelect:n,isDisabled:i}){let a=(0,r.useRef)([]),o=(0,r.useCallback)(t=>i?.(e[t],t)??!1,[i,e]),s=e.findIndex(e=>e===t),c=e.findIndex((e,t)=>!o(t)),l=s>=0&&!o(s)?s:c,u=(0,r.useCallback)(t=>{a.current[t]?.focus(),n(e[t])},[n,e]),d=(0,r.useCallback)((t,n)=>{let r=e.length;for(let e=1;e<=r;e+=1){let i=(t+n*e+r*e)%r;if(!o(i))return i}return t},[o,e.length]);return{getItemProps:(0,r.useCallback)(r=>{let i=e[r],s=o(r);return{ref:e=>{a.current[r]=e},role:`radio`,"aria-checked":i===t,"aria-disabled":s||void 0,tabIndex:r===l?0:-1,onClick:()=>{s||n(i)},onKeyDown:e=>{switch(e.key){case`ArrowRight`:case`ArrowDown`:e.preventDefault(),u(d(r,1));break;case`ArrowLeft`:case`ArrowUp`:e.preventDefault(),u(d(r,-1));break;case`Home`:e.preventDefault(),u(d(-1,1));break;case`End`:e.preventDefault(),u(d(0,-1));break;case` `:case`Enter`:e.preventDefault(),s||n(i)}}}},[o,u,d,n,t,l,e])}}function h({value:e,onChange:t,options:n,variant:r=`pill`,"aria-label":i,"aria-labelledby":o}){let c=d(),l=o??(i?void 0:c),{getItemProps:u}=m({values:n.map(e=>e.value),selected:e,onSelect:t,isDisabled:(e,t)=>n[t]?.disabled??!1}),f=r===`chip`;return(0,a.jsx)(`div`,{role:`radiogroup`,"aria-label":i,"aria-labelledby":l,className:f?s.ChipGroup:s.SegmentedGroup,children:n.map((e,t)=>{let{onKeyDown:n,...r}=u(t);return(0,a.jsxs)(`button`,{type:`button`,"data-disabled":e.disabled?``:void 0,onKeyDown:n,...r,className:f?s.Chip:s.SegmentedOption,children:[f?(0,a.jsx)(`span`,{className:s.ChipDot,"aria-hidden":!0}):e.icon,(0,a.jsx)(`span`,{children:e.label})]},e.value)})})}function g({value:e,onChange:t,options:n,label:r=`Country`}){let i=n.map(e=>({value:e.value,disabled:e.disabled,label:e.label,icon:e.code==null?void 0:(0,a.jsx)(`span`,{className:s.CountryCode,children:e.code})}));return(0,a.jsx)(p,{label:r,children:(0,a.jsx)(h,{value:e,onChange:t,options:i})})}function _({value:e,onChange:t,options:n,label:r=`Variant`}){let i=n.map(e=>({value:e.value,label:e.label,disabled:e.disabled}));return(0,a.jsx)(p,{label:r,children:(0,a.jsx)(h,{value:e,onChange:t,options:i})})}function v({value:e,onChange:t,options:n,label:r=`Step state`,stepLabel:o,variationsLabel:c=`Variations for`}){let l=n.map(e=>({value:e.value,label:e.label,disabled:e.disabled}));return(0,a.jsxs)(p,{label:r,children:[o!=null&&(0,a.jsxs)(i.Text,{textStyle:`body-sm`,style:{color:`var(--lea-color-neutral-600)`,marginBlockEnd:`var(--lea-spacing-0-5)`},children:[c,` `,(0,a.jsx)(`span`,{className:s.StepStateName,children:o})]}),(0,a.jsx)(h,{value:e,onChange:t,options:l,variant:`chip`})]})}var y=(e,t)=>{switch(e){case`complete`:return t.statusCompleted;case`current`:return t.statusCurrent;default:return t.statusUpcoming}};function b({steps:e,currentStep:t,onStepSelect:n,label:r=`Jump to step`,showCount:i=!0,columns:o=4}){let s=c(),l=e.length,u=i&&t!=null?`${t} / ${l}`:void 0;return(0,a.jsx)(p,{label:r,meta:u,children:(0,a.jsx)(x,{steps:e,currentStep:t,onStepSelect:n,columns:o,t:s})})}function x({steps:e,currentStep:t,onStepSelect:r,columns:i,t:o}){let c=d();return(0,a.jsx)(`div`,{role:`group`,"aria-labelledby":c,className:s.StepGrid,style:{"--_columns":i},children:e.map((e,i)=>{let c=i+1,l=e.status??(t==null?`upcoming`:c<t?`complete`:c===t?`current`:`upcoming`),u=l===`current`,d=l===`complete`;return(0,a.jsxs)(`button`,{type:`button`,"aria-current":u?`step`:void 0,"data-state":l,"data-disabled":e.disabled?``:void 0,disabled:e.disabled,onClick:()=>r?.(c,e),className:s.StepButton,children:[(0,a.jsxs)(`span`,{className:s.StepCircle,children:[(0,a.jsx)(`span`,{className:s.VisuallyHidden,children:d?`${o.step} ${c}`:`${o.step} `}),d?(0,a.jsx)(n.Check,{size:18,"aria-hidden":!0}):c,e.flagged&&(0,a.jsx)(`span`,{className:s.StepFlagDot,"aria-hidden":!0})]}),` `,(0,a.jsx)(`span`,{className:s.StepLabel,children:e.label}),(0,a.jsx)(`span`,{className:s.VisuallyHidden,children:`(${y(l,o)}${e.flagged?`, ${o.needsAttention}`:``})`})]},c)})})}function S({value:e,onChange:t,options:n,label:r=`Application status`}){return(0,a.jsx)(p,{label:r,children:(0,a.jsx)(C,{value:e,onChange:t,options:n})})}function C({value:e,onChange:t,options:n}){let r=d(),{getItemProps:i}=m({values:n.map(e=>e.value),selected:e,onSelect:t,isDisabled:(e,t)=>n[t]?.disabled??!1});return(0,a.jsx)(`div`,{role:`radiogroup`,"aria-labelledby":r,className:s.StatusGrid,children:n.map((e,t)=>{let{onKeyDown:n,...r}=i(t);return(0,a.jsxs)(`button`,{type:`button`,"data-color":e.color??`neutral`,"data-disabled":e.disabled?``:void 0,onKeyDown:n,...r,className:s.StatusCard,children:[(0,a.jsx)(`span`,{className:s.StatusDot,"aria-hidden":!0}),(0,a.jsx)(`span`,{children:e.label})]},e.value)})})}function w(){let[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(void 0),i=(0,r.useCallback)(async e=>{try{await navigator.clipboard?.writeText(e)}catch{}t(!0),clearTimeout(n.current),n.current=setTimeout(()=>t(!1),2e3)},[]);return(0,r.useEffect)(()=>()=>clearTimeout(n.current),[]),{copied:e,copy:i}}var T=e=>typeof e==`string`||typeof e==`number`?String(e):null;function E({flowId:e,process:t,variant:o,label:l=`Flow`,showCopy:u=!0,copyValue:d,copyLabel:f,onCopy:p}){let m=c(),{copied:h,copy:g}=w(),_=[e,t,o].filter(e=>e!=null),v=_.map(T).filter(e=>e!=null).join(` · `),y=d??v;return(0,a.jsxs)(`div`,{className:s.Flow,children:[(0,a.jsxs)(`div`,{className:s.FlowText,children:[(0,a.jsx)(`span`,{className:s.FlowLabel,children:l}),(0,a.jsx)(`span`,{children:_.map((e,t)=>(0,a.jsxs)(r.Fragment,{children:[t>0&&(0,a.jsx)(`span`,{"aria-hidden":!0,className:s.FlowSeparator,children:`·`}),e]},t))})]}),u&&(0,a.jsx)(i.IconButton,{"aria-label":f??m.copy,onClick:async()=>{await g(y),p?.()},variant:`outline`,color:`secondary`,size:`sm`,children:h?(0,a.jsx)(n.Check,{size:16,"aria-hidden":!0}):(0,a.jsx)(n.Copy,{size:16,"aria-hidden":!0})}),(0,a.jsx)(`span`,{role:`status`,"aria-live":`polite`,className:s.VisuallyHidden,children:h?m.copied:``})]})}var D=/"(?:\\.|[^"\\])*"|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\b(?:true|false|null)\b/g,O=e=>e===` `||e===`	`||e===`
-`||e===`\r`;function k(e,t,n){if(e[0]===`"`){let e=n;for(;e<t.length&&O(t[e]);)e+=1;return t[e]===`:`?`key`:`string`}return e===`true`||e===`false`?`boolean`:e===`null`?`null`:`number`}function A(e){let t=[],n=0;for(let r of e.matchAll(D)){let i=r.index??0;i>n&&t.push({type:`punctuation`,value:e.slice(n,i)});let a=r[0];t.push({type:k(a,e,i+a.length),value:a}),n=i+a.length}return n<e.length&&t.push({type:`punctuation`,value:e.slice(n)}),t}function j(e){if(typeof e!=`string`)return e!=null;let t=e.trim();if(!t)return!1;try{return JSON.parse(t),!0}catch{return!1}}function M({code:e}){let t=(0,r.useMemo)(()=>A(e),[e]);return(0,a.jsx)(a.Fragment,{children:t.map((e,t)=>(0,a.jsx)(`span`,{className:s.Token,"data-token":e.type,children:e.value},t))})}var N={"--button-fg":`var(--lea-palette-text-contrast)`,"--button-border":`var(--lea-palette-border-contrast)`,"--button-tint":`var(--lea-color-neutral-800)`},P=e=>{if(typeof e==`string`)return e;try{return JSON.stringify(e,null,2)}catch{return String(e)}},F=typeof window<`u`?r.useLayoutEffect:r.useEffect,I=12,L=420,R=280;function z({value:e,label:t=`Payload preview`,title:l,placement:u=`inline`,badge:d,open:f,defaultOpen:p=!1,onOpenChange:m,copyLabel:h,copyJsonLabel:g,closeLabel:_,highlight:v=!0}){let y=c(),{copied:b,copy:x}=w(),S=f!==void 0,[C,T]=(0,r.useState)(p),E=S?f:C,D=(0,r.useId)(),O=(0,r.useId)(),k=u===`side`,A=(0,r.useRef)(null),z=(0,r.useRef)(null),[B,V]=(0,r.useState)(null),[H,U]=(0,r.useState)(null);(0,r.useEffect)(()=>U(document.body),[]);let W=(0,r.useCallback)(e=>{S||T(e),m?.(e)},[S,m]),G=P(e),K=v&&j(e)?(0,a.jsx)(M,{code:G}):G,q=(0,r.useCallback)(()=>{let e=A.current?.closest(`[data-dev-panel-root]`)??A.current;if(!e)return;let t=e.getBoundingClientRect(),n=Math.min(L,Math.max(R,t.width)),r=t.left-n-I;r<I&&(r=Math.min(t.right+I,window.innerWidth-n-I));let i=Math.min(t.height,window.innerHeight-24),a=Math.min(Math.max(I,t.top),window.innerHeight-I-i);V({top:a,left:r,width:n,height:i})},[]);F(()=>{if(!k||!E)return;q();let e=()=>q();return window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[k,E,q]);let J=B!==null;(0,r.useEffect)(()=>{if(!k||!E||!H||!J)return;let e=z.current,t=A.current,n=()=>Array.from(e?.querySelectorAll(`button, [href], input, textarea, select, [tabindex]:not([tabindex="-1"])`)??[]).filter(e=>!e.hasAttribute(`disabled`));(n()[0]??e)?.focus();let r=t=>{if(t.key===`Escape`){t.stopPropagation(),W(!1);return}if(t.key!==`Tab`)return;let r=n();if(r.length===0){t.preventDefault(),e?.focus();return}let i=r[0],a=r[r.length-1],o=document.activeElement;t.shiftKey&&(o===i||o===e)?(t.preventDefault(),a.focus()):!t.shiftKey&&o===a&&(t.preventDefault(),i.focus())},i=n=>{let r=n.target;e?.contains(r)||t?.contains(r)||W(!1)};return document.addEventListener(`keydown`,r,!0),document.addEventListener(`pointerdown`,i,!0),()=>{document.removeEventListener(`keydown`,r,!0),document.removeEventListener(`pointerdown`,i,!0),t?.focus()}},[k,E,H,J,W]);let Y=(0,a.jsx)(i.IconButton,{"aria-label":h??y.copy,onClick:()=>x(G),variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:N,children:b?(0,a.jsx)(n.Check,{size:16,"aria-hidden":!0}):(0,a.jsx)(n.Copy,{size:16,"aria-hidden":!0})});return(0,a.jsxs)(`div`,{children:[(0,a.jsxs)(`button`,{ref:A,type:`button`,"aria-expanded":E,"aria-controls":D,"data-placement":u,onClick:()=>W(!E),className:s.PayloadToggle,children:[(0,a.jsxs)(`span`,{className:s.PayloadToggleLabel,children:[(0,a.jsx)(n.Braces,{size:16,"aria-hidden":!0}),t]}),(0,a.jsx)(`span`,{className:s.PayloadChevron,children:(0,a.jsx)(n.ChevronRight,{size:16,"aria-hidden":!0})})]}),!k&&E&&(0,a.jsxs)(`div`,{id:D,className:s.PayloadPanel,children:[(0,a.jsxs)(`div`,{className:s.PayloadHeader,children:[(0,a.jsx)(`span`,{children:l??t}),Y]}),(0,a.jsx)(`pre`,{tabIndex:0,className:s.PayloadCode,children:K})]}),k&&E&&H&&(0,o.createPortal)((0,a.jsxs)(`div`,{ref:z,id:D,role:`dialog`,"aria-labelledby":O,tabIndex:-1,className:s.Flyout,style:B?{top:B.top,left:B.left,width:B.width,height:B.height}:{visibility:`hidden`},children:[(0,a.jsxs)(`div`,{className:s.PayloadHeader,children:[(0,a.jsxs)(`span`,{className:s.FlyoutTitle,children:[(0,a.jsx)(`span`,{id:O,children:l??t}),d!=null&&(0,a.jsx)(`span`,{className:s.Badge,"data-on-dark":``,children:d})]}),(0,a.jsx)(i.IconButton,{"aria-label":_??y.close,onClick:()=>W(!1),variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:N,children:(0,a.jsx)(n.X,{size:16,"aria-hidden":!0})})]}),(0,a.jsx)(`pre`,{tabIndex:0,className:s.PayloadCode,children:K}),(0,a.jsx)(`div`,{className:s.FlyoutFooter,children:(0,a.jsxs)(`button`,{type:`button`,onClick:()=>x(G),className:s.FlyoutCopyButton,children:[b?(0,a.jsx)(n.Check,{size:16,"aria-hidden":!0}):(0,a.jsx)(n.Copy,{size:16,"aria-hidden":!0}),b?y.copied:g??y.copyJson]})})]}),H),(0,a.jsx)(`span`,{role:`status`,"aria-live":`polite`,className:s.VisuallyHidden,children:b?y.copied:``})]})}function B({onReseed:e,reseedLabel:t=`Reseed`,onCopyUrl:r,url:o,copyUrlLabel:c=`Copy URL`,onConsole:l,consoleLabel:u=`Console`,children:d}){let{copy:f}=w();return(0,a.jsxs)(`div`,{className:s.Footer,children:[e&&(0,a.jsx)(i.Button,{variant:`outline`,color:`secondary`,size:`sm`,startIcon:(0,a.jsx)(n.RotateCcw,{"aria-hidden":!0}),onClick:e,children:t}),r&&(0,a.jsx)(i.Button,{variant:`outline`,color:`secondary`,size:`sm`,startIcon:(0,a.jsx)(n.Upload,{"aria-hidden":!0}),onClick:async()=>{o!=null&&await f(o),r?.()},children:c}),l&&(0,a.jsx)(i.Button,{variant:`solid`,size:`sm`,endIcon:(0,a.jsx)(n.ChevronRight,{"aria-hidden":!0}),onClick:l,style:{marginInlineStart:`auto`},children:u}),d]})}var V=t({Country:()=>g,Flow:()=>E,Footer:()=>B,Payload:()=>z,Root:()=>f,Section:()=>p,Status:()=>S,StepState:()=>v,Steps:()=>b,Variant:()=>_,useSectionLabelId:()=>d});Object.defineProperty(exports,"DevPanel",{enumerable:!0,get:function(){return V}});
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});require('./dev-panel.css');var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};let n=require("lucide-react"),r=require("react"),i=require("./component-library.umd.js"),a=require("react/jsx-runtime"),o=require("react-dom");var s={Badge:`_Badge_1xkno_23`,SectionLabel:`_SectionLabel_1xkno_24`,SectionMeta:`_SectionMeta_1xkno_25`,FlowLabel:`_FlowLabel_1xkno_26`,CountryCode:`_CountryCode_1xkno_27`,StepLabel:`_StepLabel_1xkno_28`,PayloadCode:`_PayloadCode_1xkno_29`,DevPanel:`_DevPanel_1xkno_38`,Header:`_Header_1xkno_53`,HeaderTitle:`_HeaderTitle_1xkno_65`,HeaderActions:`_HeaderActions_1xkno_75`,HeaderDot:`_HeaderDot_1xkno_82`,Handle:`_Handle_1xkno_112`,HideButton:`_HideButton_1xkno_191`,Body:`_Body_1xkno_197`,Section:`_Section_1xkno_24`,SectionHeaderRow:`_SectionHeaderRow_1xkno_215`,Flow:`_Flow_1xkno_26`,FlowText:`_FlowText_1xkno_257`,FlowSeparator:`_FlowSeparator_1xkno_282`,SegmentedGroup:`_SegmentedGroup_1xkno_295`,SegmentedOption:`_SegmentedOption_1xkno_316`,ChipGroup:`_ChipGroup_1xkno_368`,Chip:`_Chip_1xkno_368`,ChipDot:`_ChipDot_1xkno_407`,StepGrid:`_StepGrid_1xkno_431`,StepButton:`_StepButton_1xkno_437`,StepCircle:`_StepCircle_1xkno_461`,StepFlagDot:`_StepFlagDot_1xkno_503`,StepStateName:`_StepStateName_1xkno_534`,StatusGrid:`_StatusGrid_1xkno_543`,StatusCard:`_StatusCard_1xkno_550`,StatusDot:`_StatusDot_1xkno_609`,PayloadToggle:`_PayloadToggle_1xkno_621`,PayloadToggleLabel:`_PayloadToggleLabel_1xkno_641`,PayloadChevron:`_PayloadChevron_1xkno_648`,PayloadPanel:`_PayloadPanel_1xkno_672`,PayloadHeader:`_PayloadHeader_1xkno_680`,Token:`_Token_1xkno_715`,Flyout:`_Flyout_1xkno_749`,FlyoutTitle:`_FlyoutTitle_1xkno_763`,FlyoutFooter:`_FlyoutFooter_1xkno_777`,FlyoutCopyButton:`_FlyoutCopyButton_1xkno_784`,Footer:`_Footer_1xkno_824`,OnDark:`_OnDark_1xkno_852`,VisuallyHidden:`_VisuallyHidden_1xkno_863`},c=(0,i.createTranslation)({copy:{no:`Kopier`,se:`Kopiera`,fi:`Kopioi`,es:`Copiar`},copied:{no:`Kopiert`,se:`Kopierad`,fi:`Kopioitu`,es:`Copiado`},copyJson:{no:`Kopier JSON`,se:`Kopiera JSON`,fi:`Kopioi JSON`,es:`Copiar JSON`},close:{no:`Lukk`,se:`Stäng`,fi:`Sulje`,es:`Cerrar`},minimise:{no:`Minimer`,se:`Minimera`,fi:`Pienennä`,es:`Minimizar`},expand:{no:`Utvid`,se:`Expandera`,fi:`Laajenna`,es:`Expandir`},hide:{no:`Skjul`,se:`Dölj`,fi:`Piilota`,es:`Ocultar`},show:{no:`Vis`,se:`Visa`,fi:`Näytä`,es:`Mostrar`},step:{no:`Steg`,se:`Steg`,fi:`Vaihe`,es:`Paso`},statusCompleted:{no:`fullført`,se:`slutförd`,fi:`valmis`,es:`completado`},statusCurrent:{no:`gjeldende`,se:`aktuell`,fi:`nykyinen`,es:`actual`},statusUpcoming:{no:`ikke startet`,se:`inte påbörjad`,fi:`aloittamatta`,es:`no iniciado`},needsAttention:{no:`krever oppmerksomhet`,se:`kräver uppmärksamhet`,fi:`vaatii huomiota`,es:`requiere atención`}}),l=(...e)=>e.filter(Boolean).join(` `),u=(0,r.createContext)(void 0);function d(){return(0,r.useContext)(u)}var f=(0,r.createContext)(null),p=`(max-width: 599.95px)`,m=()=>typeof navigator<`u`&&/mac|iphone|ipad/i.test(navigator.platform||navigator.userAgent);function h(e,t){let n=t.split(`+`).map(e=>e.trim().toLowerCase()),r=n.pop();if(!r)return!1;let i=n.includes(`mod`),a={ctrl:n.includes(`ctrl`)||i&&!m(),meta:n.includes(`meta`)||i&&m(),alt:n.includes(`alt`),shift:n.includes(`shift`)};return e.ctrlKey!==a.ctrl||e.metaKey!==a.meta||e.altKey!==a.alt||e.shiftKey!==a.shift?!1:e.key.toLowerCase()===r||e.code.toLowerCase()===`key${r}`||e.code.toLowerCase()===`digit${r}`}function g({title:e=`Dev controls`,badge:t,showStatusDot:o=!0,minimisable:u=!0,minimised:d,defaultMinimised:m,onMinimisedChange:g,minimiseLabel:_,expandLabel:y,hidden:b,defaultHidden:x,onHiddenChange:S,hideable:C=b!==void 0||x!==void 0,shortcut:w=`Mod+Shift+D`,handle:T,hideLabel:E,children:D,className:O,style:k}){let A=c(),j=d!==void 0,[M,N]=(0,r.useState)(m??!1),P=j?d:M,[F,I]=(0,r.useState)(x??!1),L=C&&(b??F),R=(0,r.useRef)(null),z=(0,r.useRef)(null),B=(0,r.useRef)(null),V=(0,r.useRef)(null),H=()=>{let e=!P;j||N(e),g?.(e)},U=e=>{b===void 0&&I(e),S?.(e)};(0,r.useEffect)(()=>{C&&!j&&m===void 0&&typeof window<`u`&&window.matchMedia?.(p).matches&&N(!0)},[]),(0,r.useEffect)(()=>{let e=V.current;V.current=null,e===`handle`&&z.current?.focus(),e===`panel`&&B.current?.focus()});let W=(0,r.useRef)({isHidden:L,setHiddenState:U});W.current={isHidden:L,setHiddenState:U},(0,r.useEffect)(()=>{if(!C||w===!1)return;let e=e=>{if(e.repeat||!h(e,w))return;e.preventDefault();let{isHidden:t,setHiddenState:n}=W.current,r=document.activeElement;!t&&R.current?.contains(r)&&(V.current=`handle`),t&&r!=null&&r===z.current&&(V.current=`panel`),n(!t)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[C,w]);let G=(0,r.useId)();return L?(0,a.jsx)(f.Provider,{value:{show:()=>{V.current=`panel`,U(!1)},title:e,handleRef:z},children:T??(0,a.jsx)(v,{})}):(0,a.jsxs)(`div`,{ref:R,"data-dev-panel-root":``,"data-hideable":C?``:void 0,"data-minimised":P?``:void 0,className:l(s.DevPanel,O),style:k,children:[(0,a.jsxs)(`header`,{className:s.Header,children:[(0,a.jsxs)(`span`,{className:s.HeaderTitle,children:[o&&(0,a.jsx)(`span`,{className:s.HeaderDot,"aria-hidden":!0}),(0,a.jsx)(`span`,{children:e}),t!=null&&(0,a.jsx)(`span`,{className:s.Badge,children:t})]}),(0,a.jsxs)(`span`,{className:s.HeaderActions,children:[C&&(0,a.jsx)(i.IconButton,{ref:B,className:s.HideButton,"aria-label":E??A.hide,onClick:()=>{V.current=`handle`,U(!0)},variant:`outline`,color:`secondary`,size:`sm`,children:(0,a.jsx)(n.EyeOff,{size:18,"aria-hidden":!0})}),u&&(0,a.jsx)(i.IconButton,{"aria-label":P?y??A.expand:_??A.minimise,"aria-expanded":!P,"aria-controls":G,onClick:H,variant:`outline`,color:`secondary`,size:`sm`,children:P?(0,a.jsx)(n.Plus,{size:18,"aria-hidden":!0}):(0,a.jsx)(n.Minus,{size:18,"aria-hidden":!0})})]})]}),!P&&(0,a.jsx)(`div`,{id:G,className:s.Body,children:D})]})}function _({label:e,meta:t,children:n,className:i,style:o}){let c=(0,r.useId)();return(0,a.jsxs)(`section`,{"aria-labelledby":c,className:l(s.Section,i),style:o,children:[(0,a.jsxs)(`div`,{className:s.SectionHeaderRow,children:[(0,a.jsx)(`span`,{id:c,className:s.SectionLabel,children:e}),t!=null&&(0,a.jsx)(`span`,{className:s.SectionMeta,children:t})]}),(0,a.jsx)(u.Provider,{value:c,children:n})]})}function v({side:e=`right`,label:t,className:n,style:i}){let o=c(),u=(0,r.useContext)(f);if(!u)return null;let d=t??u.title;return(0,a.jsxs)(`button`,{ref:u.handleRef,type:`button`,className:l(s.Handle,n),style:i,"data-side":e,"aria-label":typeof d==`string`?`${o.show} ${d}`:void 0,onClick:u.show,children:[(0,a.jsx)(`span`,{className:s.HeaderDot,"aria-hidden":!0}),(0,a.jsx)(`span`,{children:d})]})}function y({values:e,selected:t,onSelect:n,isDisabled:i}){let a=(0,r.useRef)([]),o=(0,r.useCallback)(t=>i?.(e[t],t)??!1,[i,e]),s=e.findIndex(e=>e===t),c=e.findIndex((e,t)=>!o(t)),l=s>=0&&!o(s)?s:c,u=(0,r.useCallback)(t=>{a.current[t]?.focus(),n(e[t])},[n,e]),d=(0,r.useCallback)((t,n)=>{let r=e.length;for(let e=1;e<=r;e+=1){let i=(t+n*e+r*e)%r;if(!o(i))return i}return t},[o,e.length]);return{getItemProps:(0,r.useCallback)(r=>{let i=e[r],s=o(r);return{ref:e=>{a.current[r]=e},role:`radio`,"aria-checked":i===t,"aria-disabled":s||void 0,tabIndex:r===l?0:-1,onClick:()=>{s||n(i)},onKeyDown:e=>{switch(e.key){case`ArrowRight`:case`ArrowDown`:e.preventDefault(),u(d(r,1));break;case`ArrowLeft`:case`ArrowUp`:e.preventDefault(),u(d(r,-1));break;case`Home`:e.preventDefault(),u(d(-1,1));break;case`End`:e.preventDefault(),u(d(0,-1));break;case` `:case`Enter`:e.preventDefault(),s||n(i)}}}},[o,u,d,n,t,l,e])}}function b({value:e,onChange:t,options:n,variant:r=`pill`,"aria-label":i,"aria-labelledby":o}){let c=d(),l=o??(i?void 0:c),{getItemProps:u}=y({values:n.map(e=>e.value),selected:e,onSelect:t,isDisabled:(e,t)=>n[t]?.disabled??!1}),f=r===`chip`;return(0,a.jsx)(`div`,{role:`radiogroup`,"aria-label":i,"aria-labelledby":l,className:f?s.ChipGroup:s.SegmentedGroup,children:n.map((e,t)=>{let{onKeyDown:n,...r}=u(t);return(0,a.jsxs)(`button`,{type:`button`,"data-disabled":e.disabled?``:void 0,onKeyDown:n,...r,className:f?s.Chip:s.SegmentedOption,children:[f?(0,a.jsx)(`span`,{className:s.ChipDot,"aria-hidden":!0}):e.icon,(0,a.jsx)(`span`,{children:e.label})]},e.value)})})}function x({value:e,onChange:t,options:n,label:r=`Country`}){let i=n.map(e=>({value:e.value,disabled:e.disabled,label:e.label,icon:e.code==null?void 0:(0,a.jsx)(`span`,{className:s.CountryCode,children:e.code})}));return(0,a.jsx)(_,{label:r,children:(0,a.jsx)(b,{value:e,onChange:t,options:i})})}function S({value:e,onChange:t,options:n,label:r=`Variant`}){let i=n.map(e=>({value:e.value,label:e.label,disabled:e.disabled}));return(0,a.jsx)(_,{label:r,children:(0,a.jsx)(b,{value:e,onChange:t,options:i})})}function C({value:e,onChange:t,options:n,label:r=`Step state`,stepLabel:o,variationsLabel:c=`Variations for`}){let l=n.map(e=>({value:e.value,label:e.label,disabled:e.disabled}));return(0,a.jsxs)(_,{label:r,children:[o!=null&&(0,a.jsxs)(i.Text,{textStyle:`body-sm`,style:{color:`var(--lea-color-neutral-600)`,marginBlockEnd:`var(--lea-spacing-0-5)`},children:[c,` `,(0,a.jsx)(`span`,{className:s.StepStateName,children:o})]}),(0,a.jsx)(b,{value:e,onChange:t,options:l,variant:`chip`})]})}var w=(e,t)=>{switch(e){case`complete`:return t.statusCompleted;case`current`:return t.statusCurrent;default:return t.statusUpcoming}};function T({steps:e,currentStep:t,onStepSelect:n,label:r=`Jump to step`,showCount:i=!0,columns:o=4}){let s=c(),l=e.length,u=i&&t!=null?`${t} / ${l}`:void 0;return(0,a.jsx)(_,{label:r,meta:u,children:(0,a.jsx)(E,{steps:e,currentStep:t,onStepSelect:n,columns:o,t:s})})}function E({steps:e,currentStep:t,onStepSelect:r,columns:i,t:o}){let c=d();return(0,a.jsx)(`div`,{role:`group`,"aria-labelledby":c,className:s.StepGrid,style:{"--_columns":i},children:e.map((e,i)=>{let c=i+1,l=e.status??(t==null?`upcoming`:c<t?`complete`:c===t?`current`:`upcoming`),u=l===`current`,d=l===`complete`;return(0,a.jsxs)(`button`,{type:`button`,"aria-current":u?`step`:void 0,"data-state":l,"data-disabled":e.disabled?``:void 0,disabled:e.disabled,onClick:()=>r?.(c,e),className:s.StepButton,children:[(0,a.jsxs)(`span`,{className:s.StepCircle,children:[(0,a.jsx)(`span`,{className:s.VisuallyHidden,children:d?`${o.step} ${c}`:`${o.step} `}),d?(0,a.jsx)(n.Check,{size:18,"aria-hidden":!0}):c,e.flagged&&(0,a.jsx)(`span`,{className:s.StepFlagDot,"aria-hidden":!0})]}),` `,(0,a.jsx)(`span`,{className:s.StepLabel,children:e.label}),(0,a.jsx)(`span`,{className:s.VisuallyHidden,children:`(${w(l,o)}${e.flagged?`, ${o.needsAttention}`:``})`})]},c)})})}function D({value:e,onChange:t,options:n,label:r=`Application status`}){return(0,a.jsx)(_,{label:r,children:(0,a.jsx)(O,{value:e,onChange:t,options:n})})}function O({value:e,onChange:t,options:n}){let r=d(),{getItemProps:i}=y({values:n.map(e=>e.value),selected:e,onSelect:t,isDisabled:(e,t)=>n[t]?.disabled??!1});return(0,a.jsx)(`div`,{role:`radiogroup`,"aria-labelledby":r,className:s.StatusGrid,children:n.map((e,t)=>{let{onKeyDown:n,...r}=i(t);return(0,a.jsxs)(`button`,{type:`button`,"data-color":e.color??`neutral`,"data-disabled":e.disabled?``:void 0,onKeyDown:n,...r,className:s.StatusCard,children:[(0,a.jsx)(`span`,{className:s.StatusDot,"aria-hidden":!0}),(0,a.jsx)(`span`,{children:e.label})]},e.value)})})}function k(){let[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(void 0),i=(0,r.useCallback)(async e=>{try{await navigator.clipboard?.writeText(e)}catch{}t(!0),clearTimeout(n.current),n.current=setTimeout(()=>t(!1),2e3)},[]);return(0,r.useEffect)(()=>()=>clearTimeout(n.current),[]),{copied:e,copy:i}}var A=e=>typeof e==`string`||typeof e==`number`?String(e):null;function j({flowId:e,process:t,variant:o,label:l=`Flow`,showCopy:u=!0,copyValue:d,copyLabel:f,onCopy:p}){let m=c(),{copied:h,copy:g}=k(),_=[e,t,o].filter(e=>e!=null),v=_.map(A).filter(e=>e!=null).join(` · `),y=d??v;return(0,a.jsxs)(`div`,{className:s.Flow,children:[(0,a.jsxs)(`div`,{className:s.FlowText,children:[(0,a.jsx)(`span`,{className:s.FlowLabel,children:l}),(0,a.jsx)(`span`,{children:_.map((e,t)=>(0,a.jsxs)(r.Fragment,{children:[t>0&&(0,a.jsx)(`span`,{"aria-hidden":!0,className:s.FlowSeparator,children:`·`}),e]},t))})]}),u&&(0,a.jsx)(i.IconButton,{"aria-label":f??m.copy,onClick:async()=>{await g(y),p?.()},variant:`outline`,color:`secondary`,size:`sm`,children:h?(0,a.jsx)(n.Check,{size:16,"aria-hidden":!0}):(0,a.jsx)(n.Copy,{size:16,"aria-hidden":!0})}),(0,a.jsx)(`span`,{role:`status`,"aria-live":`polite`,className:s.VisuallyHidden,children:h?m.copied:``})]})}var M=/"(?:\\.|[^"\\])*"|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\b(?:true|false|null)\b/g,N=e=>e===` `||e===`	`||e===`
+`||e===`\r`;function P(e,t,n){if(e[0]===`"`){let e=n;for(;e<t.length&&N(t[e]);)e+=1;return t[e]===`:`?`key`:`string`}return e===`true`||e===`false`?`boolean`:e===`null`?`null`:`number`}function F(e){let t=[],n=0;for(let r of e.matchAll(M)){let i=r.index??0;i>n&&t.push({type:`punctuation`,value:e.slice(n,i)});let a=r[0];t.push({type:P(a,e,i+a.length),value:a}),n=i+a.length}return n<e.length&&t.push({type:`punctuation`,value:e.slice(n)}),t}function I(e){if(typeof e!=`string`)return e!=null;let t=e.trim();if(!t)return!1;try{return JSON.parse(t),!0}catch{return!1}}function L({code:e}){let t=(0,r.useMemo)(()=>F(e),[e]);return(0,a.jsx)(a.Fragment,{children:t.map((e,t)=>(0,a.jsx)(`span`,{className:s.Token,"data-token":e.type,children:e.value},t))})}var R={"--button-fg":`var(--lea-palette-text-contrast)`,"--button-border":`var(--lea-palette-border-contrast)`,"--button-tint":`var(--lea-color-neutral-800)`},z=e=>{if(typeof e==`string`)return e;try{return JSON.stringify(e,null,2)}catch{return String(e)}},B=typeof window<`u`?r.useLayoutEffect:r.useEffect,V=12,H=420,U=280;function W({value:e,label:t=`Payload preview`,title:l,placement:u=`inline`,badge:d,open:f,defaultOpen:p=!1,onOpenChange:m,copyLabel:h,copyJsonLabel:g,closeLabel:_,highlight:v=!0}){let y=c(),{copied:b,copy:x}=k(),S=f!==void 0,[C,w]=(0,r.useState)(p),T=S?f:C,E=(0,r.useId)(),D=(0,r.useId)(),O=u===`side`,A=(0,r.useRef)(null),j=(0,r.useRef)(null),[M,N]=(0,r.useState)(null),[P,F]=(0,r.useState)(null);(0,r.useEffect)(()=>F(document.body),[]);let W=(0,r.useCallback)(e=>{S||w(e),m?.(e)},[S,m]),G=z(e),K=v&&I(e)?(0,a.jsx)(L,{code:G}):G,q=(0,r.useCallback)(()=>{let e=A.current?.closest(`[data-dev-panel-root]`)??A.current;if(!e)return;let t=e.getBoundingClientRect(),n=Math.min(H,Math.max(U,t.width)),r=t.left-n-V;r<V&&(r=Math.min(t.right+V,window.innerWidth-n-V));let i=Math.min(t.height,window.innerHeight-24),a=Math.min(Math.max(V,t.top),window.innerHeight-V-i);N({top:a,left:r,width:n,height:i})},[]);B(()=>{if(!O||!T)return;q();let e=()=>q();return window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[O,T,q]);let J=M!==null;(0,r.useEffect)(()=>{if(!O||!T||!P||!J)return;let e=j.current,t=A.current,n=()=>Array.from(e?.querySelectorAll(`button, [href], input, textarea, select, [tabindex]:not([tabindex="-1"])`)??[]).filter(e=>!e.hasAttribute(`disabled`));(n()[0]??e)?.focus();let r=t=>{if(t.key===`Escape`){t.stopPropagation(),W(!1);return}if(t.key!==`Tab`)return;let r=n();if(r.length===0){t.preventDefault(),e?.focus();return}let i=r[0],a=r[r.length-1],o=document.activeElement;t.shiftKey&&(o===i||o===e)?(t.preventDefault(),a.focus()):!t.shiftKey&&o===a&&(t.preventDefault(),i.focus())},i=n=>{let r=n.target;e?.contains(r)||t?.contains(r)||W(!1)};return document.addEventListener(`keydown`,r,!0),document.addEventListener(`pointerdown`,i,!0),()=>{document.removeEventListener(`keydown`,r,!0),document.removeEventListener(`pointerdown`,i,!0),t?.focus()}},[O,T,P,J,W]);let Y=(0,a.jsx)(i.IconButton,{"aria-label":h??y.copy,onClick:()=>x(G),variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:R,children:b?(0,a.jsx)(n.Check,{size:16,"aria-hidden":!0}):(0,a.jsx)(n.Copy,{size:16,"aria-hidden":!0})});return(0,a.jsxs)(`div`,{children:[(0,a.jsxs)(`button`,{ref:A,type:`button`,"aria-expanded":T,"aria-controls":E,"data-placement":u,onClick:()=>W(!T),className:s.PayloadToggle,children:[(0,a.jsxs)(`span`,{className:s.PayloadToggleLabel,children:[(0,a.jsx)(n.Braces,{size:16,"aria-hidden":!0}),t]}),(0,a.jsx)(`span`,{className:s.PayloadChevron,children:(0,a.jsx)(n.ChevronRight,{size:16,"aria-hidden":!0})})]}),!O&&T&&(0,a.jsxs)(`div`,{id:E,className:s.PayloadPanel,children:[(0,a.jsxs)(`div`,{className:s.PayloadHeader,children:[(0,a.jsx)(`span`,{children:l??t}),Y]}),(0,a.jsx)(`pre`,{tabIndex:0,className:s.PayloadCode,children:K})]}),O&&T&&P&&(0,o.createPortal)((0,a.jsxs)(`div`,{ref:j,id:E,role:`dialog`,"aria-labelledby":D,tabIndex:-1,className:s.Flyout,style:M?{top:M.top,left:M.left,width:M.width,height:M.height}:{visibility:`hidden`},children:[(0,a.jsxs)(`div`,{className:s.PayloadHeader,children:[(0,a.jsxs)(`span`,{className:s.FlyoutTitle,children:[(0,a.jsx)(`span`,{id:D,children:l??t}),d!=null&&(0,a.jsx)(`span`,{className:s.Badge,"data-on-dark":``,children:d})]}),(0,a.jsx)(i.IconButton,{"aria-label":_??y.close,onClick:()=>W(!1),variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:R,children:(0,a.jsx)(n.X,{size:16,"aria-hidden":!0})})]}),(0,a.jsx)(`pre`,{tabIndex:0,className:s.PayloadCode,children:K}),(0,a.jsx)(`div`,{className:s.FlyoutFooter,children:(0,a.jsxs)(`button`,{type:`button`,onClick:()=>x(G),className:s.FlyoutCopyButton,children:[b?(0,a.jsx)(n.Check,{size:16,"aria-hidden":!0}):(0,a.jsx)(n.Copy,{size:16,"aria-hidden":!0}),b?y.copied:g??y.copyJson]})})]}),P),(0,a.jsx)(`span`,{role:`status`,"aria-live":`polite`,className:s.VisuallyHidden,children:b?y.copied:``})]})}function G({onReseed:e,reseedLabel:t=`Reseed`,onCopyUrl:r,url:o,copyUrlLabel:c=`Copy URL`,onConsole:l,consoleLabel:u=`Console`,children:d}){let{copy:f}=k();return(0,a.jsxs)(`div`,{className:s.Footer,children:[e&&(0,a.jsx)(i.Button,{variant:`outline`,color:`secondary`,size:`sm`,startIcon:(0,a.jsx)(n.RotateCcw,{"aria-hidden":!0}),onClick:e,children:t}),r&&(0,a.jsx)(i.Button,{variant:`outline`,color:`secondary`,size:`sm`,startIcon:(0,a.jsx)(n.Upload,{"aria-hidden":!0}),onClick:async()=>{o!=null&&await f(o),r?.()},children:c}),l&&(0,a.jsx)(i.Button,{variant:`solid`,size:`sm`,endIcon:(0,a.jsx)(n.ChevronRight,{"aria-hidden":!0}),onClick:l,style:{marginInlineStart:`auto`},children:u}),d]})}var K=t({Country:()=>x,Flow:()=>j,Footer:()=>G,Handle:()=>v,Payload:()=>W,Root:()=>g,Section:()=>_,Status:()=>D,StepState:()=>C,Steps:()=>T,Variant:()=>S,useSectionLabelId:()=>d});Object.defineProperty(exports,"DevPanel",{enumerable:!0,get:function(){return K}});
 //# sourceMappingURL=dev-panel.cjs.map