@leabankab/component-library 8.4.0 → 8.5.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 8.5.0
+
+### Minor Changes
+
+- 0685d67: DevPanel: two panels, one on each side of the page, and an editable payload.
+
+  - `DevPanel.Root` takes `position` (`"bottom-left"` or `"bottom-right"`), which fixes it to that corner of the window. While hidden, its handle sits on the same side.
+  - `DevPanel.Payload` takes `placement="panel"`: no toggle, and the payload fills a panel of its own.
+  - `DevPanel.Payload` can be edited: with `onApply`, an edit button swaps the JSON for a text box, and Apply hands the parsed JSON to the app. Invalid JSON is not applied, and the error is shown and announced. `onReset` adds a reset button.
+  - The strip at the top of the panel is a `div` instead of a `header`, so the panel no longer adds a `banner` landmark to the page.
+
 ## 8.4.0
 
 ### Minor Changes

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

@@ -12,12 +12,13 @@ export type DevPanelPayloadProps = {
     /**
      * Where the payload opens. `"inline"` (default) expands a dark panel below the
      * toggle; `"side"` opens a floating panel beside the dev panel as a dialog
-     * (dismissed with Escape or a click outside).
+     * (dismissed with Escape or a click outside); `"panel"` has no toggle and
+     * shows the payload all the time, filling a `DevPanel.Root` of its own.
      */
-    placement?: "inline" | "side";
+    placement?: "inline" | "side" | "panel";
     /** Optional pill in the side flyout header, e.g. `"live"`. Ignored inline. */
     badge?: ReactNode;
-    /** Controlled open state. Omit for uncontrolled. */
+    /** Controlled open state. Omit for uncontrolled. Ignored by `"panel"`. */
     open?: boolean;
     /** Initial open state when uncontrolled. Defaults to `false`. */
     defaultOpen?: boolean;
@@ -34,6 +35,25 @@ export type DevPanelPayloadProps = {
      * render verbatim. Set `false` for the plain single-colour view.
      */
     highlight?: boolean;
+    /**
+     * Makes the payload editable: an edit button swaps the JSON for a text box,
+     * and Apply calls this with the parsed JSON. Text that is not valid JSON is
+     * not applied; the error is shown under the box. Closing the payload, or
+     * Escape in the side flyout, throws an unapplied edit away.
+     */
+    onApply?: (value: unknown) => void;
+    /** Called when Reset is pressed, e.g. to drop an applied edit. Omit to hide the button. */
+    onReset?: () => void;
+    /** Accessible name for the edit button. Defaults to a translated label. */
+    editLabel?: string;
+    /** Label for the apply button. Defaults to a translated label. */
+    applyLabel?: ReactNode;
+    /** Label for the cancel button. Defaults to a translated label. */
+    cancelLabel?: ReactNode;
+    /** Accessible name for the reset button. Defaults to a translated label. */
+    resetLabel?: string;
+    /** Start of the message for text that is not valid JSON. Defaults to a translated label. */
+    invalidJsonLabel?: string;
 };
 /**
  * A payload preview. The toggle is a disclosure (`aria-expanded`/`aria-controls`)
@@ -41,7 +61,11 @@ export type DevPanelPayloadProps = {
  * announced via a `role="status"` live region. With `placement="inline"`
  * (default) it expands a dark panel below the toggle; with `placement="side"` it
  * opens a floating dialog beside the panel (Escape / click-outside to close,
- * focus moves in and returns to the toggle on close). Uncontrolled by default;
- * drive it with `open`/`onOpenChange` when needed.
+ * focus moves in and returns to the toggle on close); with `placement="panel"`
+ * there is no toggle and it is always shown. Uncontrolled by default; drive it
+ * with `open`/`onOpenChange` when needed.
+ *
+ * With `onApply` it can be edited: the text box is labelled by the title, and
+ * an invalid edit is marked `aria-invalid` and described by an alert.
  */
-export declare function DevPanelPayload({ value, label, title, placement, badge, open, defaultOpen, onOpenChange, copyLabel, copyJsonLabel, closeLabel, highlight, }: DevPanelPayloadProps): import("react").JSX.Element;
+export declare function DevPanelPayload({ value, label, title, placement, badge, open, defaultOpen, onOpenChange, copyLabel, copyJsonLabel, closeLabel, highlight, onApply, onReset, editLabel, applyLabel, cancelLabel, resetLabel, invalidJsonLabel, }: DevPanelPayloadProps): import("react").JSX.Element;

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

@@ -7,6 +7,7 @@ export declare function useDevPanelSectionLabelId(): string | undefined;
  * `Alt` and `Shift`. A modifier not named must not be held.
  */
 export declare function matchesShortcut(event: KeyboardEvent, shortcut: string): boolean;
+export type DevPanelPosition = "bottom-left" | "bottom-right";
 export type DevPanelProps = {
     /** Panel title shown in the header. Defaults to `"Dev controls"`. */
     title?: ReactNode;
@@ -42,7 +43,8 @@ export type DevPanelProps = {
     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.
+     * on a Mac and Ctrl elsewhere. `false` turns it off. Panels that share a
+     * shortcut hide and show together; give one its own to toggle it alone.
      * @default "Mod+Shift+D"
      */
     shortcut?: string | false;
@@ -50,6 +52,12 @@ export type DevPanelProps = {
     handle?: ReactNode;
     /** Accessible name for the hide button. Defaults to a translated label. */
     hideLabel?: string;
+    /**
+     * Fixes the panel to a corner of the window, floating above the app, so two
+     * panels can sit on either side of the page. While hidden, its handle sits
+     * on the same side. Omit to place the panel yourself.
+     */
+    position?: DevPanelPosition;
     /** Section content: compose the `DevPanel.*` sub-components here. */
     children?: ReactNode;
     /** Class on the outermost element, for placing the panel. */
@@ -63,8 +71,9 @@ export type DevPanelProps = {
  * (title, optional badge, minimise control) and layout; every section is fully
  * controlled by the consumer via `value` + `onChange`/callback props.
  *
- * It renders only the panel — placement (fixed corner, drawer, …) is left to
- * the consuming app.
+ * It renders only the panel, and placement is left to the consuming app,
+ * unless `position` fixes it to a corner of the window. Two panels can then
+ * sit on either side of the page:
  *
  * ```tsx
  * <DevPanel.Root badge="MOCK">
@@ -73,9 +82,13 @@ export type DevPanelProps = {
  *   <DevPanel.Payload value={payload} />
  *   <DevPanel.Footer onReseed={reseed} onCopyUrl={() => {}} url={url} />
  * </DevPanel.Root>
+ *
+ * <DevPanel.Root title="Payload" position="bottom-left">
+ *   <DevPanel.Payload placement="panel" value={payload} onApply={setOverride} />
+ * </DevPanel.Root>
  * ```
  */
-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 declare function DevPanel({ title, badge, showStatusDot, minimisable, minimised, defaultMinimised, onMinimisedChange, minimiseLabel, expandLabel, hidden, defaultHidden, onHiddenChange, hideable, shortcut, handle, hideLabel, position, children, className, style, }: DevPanelProps): import("react").JSX.Element;
 export type DevPanelSectionProps = {
     /** The uppercase section heading (e.g. `"Country"`). */
     label: ReactNode;
@@ -96,7 +109,10 @@ export type DevPanelSectionProps = {
  */
 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"`. */
+    /**
+     * The edge of the window the tab sits on. Defaults to the side of the
+     * panel's `position`, or `"right"`.
+     */
     side?: "left" | "right";
     /** The text on the tab. Defaults to the panel's `title`. */
     label?: ReactNode;
@@ -115,4 +131,4 @@ export type DevPanelHandleProps = {
  * <DevPanel.Root hideable handle={<DevPanel.Handle side="left" />}>
  * ```
  */
-export declare function DevPanelHandle({ side, label, className, style, }: DevPanelHandleProps): import("react").JSX.Element | null;
+export declare function DevPanelHandle({ side: sideProp, label, className, style, }: DevPanelHandleProps): import("react").JSX.Element | null;

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

@@ -1,4 +1,4 @@
-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 { DevPanel as Root, DevPanelHandle as Handle, DevPanelSection as Section, useDevPanelSectionLabelId as useSectionLabelId, type DevPanelHandleProps as HandleProps, type DevPanelPosition as Position, 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" | "show" | "hide" | "copy" | "close" | "expand" | "copied" | "copyJson" | "minimise" | "statusCompleted" | "statusCurrent" | "statusUpcoming" | "needsAttention", string>;
+export declare const useDevPanelLabels: () => Record<"step" | "show" | "hide" | "copy" | "reset" | "close" | "expand" | "cancel" | "copied" | "copyJson" | "edit" | "apply" | "invalidJson" | "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_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}});
+"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_7j12b_23`,SectionLabel:`_SectionLabel_7j12b_24`,SectionMeta:`_SectionMeta_7j12b_25`,FlowLabel:`_FlowLabel_7j12b_26`,CountryCode:`_CountryCode_7j12b_27`,StepLabel:`_StepLabel_7j12b_28`,PayloadCode:`_PayloadCode_7j12b_29`,PayloadEditor:`_PayloadEditor_7j12b_30`,PayloadError:`_PayloadError_7j12b_31`,DevPanel:`_DevPanel_7j12b_40`,Body:`_Body_7j12b_77`,Header:`_Header_7j12b_82`,HeaderTitle:`_HeaderTitle_7j12b_94`,HeaderActions:`_HeaderActions_7j12b_104`,HeaderDot:`_HeaderDot_7j12b_111`,Handle:`_Handle_7j12b_141`,HideButton:`_HideButton_7j12b_220`,Section:`_Section_7j12b_24`,SectionHeaderRow:`_SectionHeaderRow_7j12b_244`,Flow:`_Flow_7j12b_26`,FlowText:`_FlowText_7j12b_286`,FlowSeparator:`_FlowSeparator_7j12b_311`,SegmentedGroup:`_SegmentedGroup_7j12b_324`,SegmentedOption:`_SegmentedOption_7j12b_345`,ChipGroup:`_ChipGroup_7j12b_397`,Chip:`_Chip_7j12b_397`,ChipDot:`_ChipDot_7j12b_436`,StepGrid:`_StepGrid_7j12b_460`,StepButton:`_StepButton_7j12b_466`,StepCircle:`_StepCircle_7j12b_490`,StepFlagDot:`_StepFlagDot_7j12b_532`,StepStateName:`_StepStateName_7j12b_563`,StatusGrid:`_StatusGrid_7j12b_572`,StatusCard:`_StatusCard_7j12b_579`,StatusDot:`_StatusDot_7j12b_638`,PayloadToggle:`_PayloadToggle_7j12b_650`,PayloadToggleLabel:`_PayloadToggleLabel_7j12b_670`,PayloadChevron:`_PayloadChevron_7j12b_677`,PayloadPanel:`_PayloadPanel_7j12b_701`,Payload:`_Payload_7j12b_29`,PayloadHeader:`_PayloadHeader_7j12b_734`,PayloadActions:`_PayloadActions_7j12b_808`,Flyout:`_Flyout_7j12b_820`,Token:`_Token_7j12b_831`,FlyoutTitle:`_FlyoutTitle_7j12b_879`,FlyoutFooter:`_FlyoutFooter_7j12b_893`,FlyoutCopyButton:`_FlyoutCopyButton_7j12b_900`,Footer:`_Footer_7j12b_940`,OnDark:`_OnDark_7j12b_968`,VisuallyHidden:`_VisuallyHidden_7j12b_979`},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`},edit:{no:`Rediger`,se:`Redigera`,fi:`Muokkaa`,es:`Editar`},apply:{no:`Bruk`,se:`Tillämpa`,fi:`Käytä`,es:`Aplicar`},cancel:{no:`Avbryt`,se:`Avbryt`,fi:`Peruuta`,es:`Cancelar`},reset:{no:`Tilbakestill`,se:`Återställ`,fi:`Palauta`,es:`Restablecer`},invalidJson:{no:`Ugyldig JSON`,se:`Ogiltig JSON`,fi:`Virheellinen JSON`,es:`JSON no válido`},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,position:D,children:O,className:k,style:A}){let j=c(),M=d!==void 0,[N,P]=(0,r.useState)(m??!1),F=M?d:N,[ee,te]=(0,r.useState)(x??!1),I=C&&(b??ee),ne=(0,r.useRef)(null),L=(0,r.useRef)(null),R=(0,r.useRef)(null),z=(0,r.useRef)(null),re=()=>{let e=!F;M||P(e),g?.(e)},B=e=>{b===void 0&&te(e),S?.(e)};(0,r.useEffect)(()=>{C&&!M&&m===void 0&&typeof window<`u`&&window.matchMedia?.(p).matches&&P(!0)},[]),(0,r.useEffect)(()=>{let e=z.current;z.current=null,e===`handle`&&L.current?.focus(),e===`panel`&&R.current?.focus()});let V=(0,r.useRef)({isHidden:I,setHiddenState:B});V.current={isHidden:I,setHiddenState:B},(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}=V.current,r=document.activeElement;!t&&ne.current?.contains(r)&&(z.current=`handle`),t&&r!=null&&r===L.current&&(z.current=`panel`),n(!t)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[C,w]);let H=(0,r.useId)(),U=D===void 0?void 0:D.endsWith(`left`)?`left`:`right`;return I?(0,a.jsx)(f.Provider,{value:{show:()=>{z.current=`panel`,B(!1)},title:e,handleRef:L,side:U},children:T??(0,a.jsx)(v,{})}):(0,a.jsxs)(`div`,{ref:ne,"data-dev-panel-root":``,"data-position":D,"data-hideable":C?``:void 0,"data-minimised":F?``:void 0,className:l(s.DevPanel,k),style:A,children:[(0,a.jsxs)(`div`,{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:R,className:s.HideButton,"aria-label":E??j.hide,onClick:()=>{z.current=`handle`,B(!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":F?y??j.expand:_??j.minimise,"aria-expanded":!F,"aria-controls":H,onClick:re,variant:`outline`,color:`secondary`,size:`sm`,children:F?(0,a.jsx)(n.Plus,{size:18,"aria-hidden":!0}):(0,a.jsx)(n.Minus,{size:18,"aria-hidden":!0})})]})]}),!F&&(0,a.jsx)(`div`,{id:H,className:s.Body,children:O})]})}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,label:t,className:n,style:i}){let o=c(),u=(0,r.useContext)(f);if(!u)return null;let d=t??u.title,p=e??u.side??`right`;return(0,a.jsxs)(`button`,{ref:u.handleRef,type:`button`,className:l(s.Handle,n),style:i,"data-side":p,"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 ee(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 te({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 I={"--button-fg":`var(--lea-palette-text-contrast)`,"--button-border":`var(--lea-palette-border-contrast)`,"--button-tint":`var(--lea-color-neutral-800)`},ne=e=>{if(typeof e==`string`)return e;try{return JSON.stringify(e,null,2)}catch{return String(e)}},L=typeof window<`u`?r.useLayoutEffect:r.useEffect,R=12,z=420,re=280;function B({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,onApply:y,onReset:b,editLabel:x,applyLabel:S,cancelLabel:C,resetLabel:w,invalidJsonLabel:T}){let E=c(),{copied:D,copy:O}=k(),A=f!==void 0,[j,M]=(0,r.useState)(p),N=u===`panel`,P=N||(A?f:j),F=(0,r.useId)(),B=(0,r.useId)(),V=(0,r.useId)(),H=u===`side`,[U,W]=(0,r.useState)(null),[G,K]=(0,r.useState)(null),q=U!==null,ie=(0,r.useRef)(null),ae=(0,r.useRef)(null),J=(0,r.useRef)(null),Y=(0,r.useRef)(null),oe=(0,r.useRef)(null),[X,se]=(0,r.useState)(null),[Z,ce]=(0,r.useState)(null);(0,r.useEffect)(()=>ce(document.body),[]);let Q=(0,r.useCallback)(e=>{A||M(e),m?.(e)},[A,m]),$=ne(e),le=v&&ee(e)?(0,a.jsx)(te,{code:$}):$;(0,r.useEffect)(()=>{let e=J.current;J.current=null,e===`editor`&&ae.current?.focus(),e===`edit`&&ie.current?.focus()}),(0,r.useEffect)(()=>{P||(W(null),K(null))},[P]);let ue=()=>{J.current=`editor`,W($),K(null)},de=()=>{J.current=`edit`,W(null),K(null)},fe=()=>{if(U===null)return;let e;try{e=JSON.parse(U)}catch(e){K(e instanceof Error?e.message:String(e));return}de(),y?.(e)},pe=(0,r.useCallback)(()=>{let e=Y.current?.closest(`[data-dev-panel-root]`)??Y.current;if(!e)return;let t=e.getBoundingClientRect(),n=Math.min(z,Math.max(re,t.width)),r=t.left-n-R;r<R&&(r=Math.min(t.right+R,window.innerWidth-n-R));let i=Math.min(t.height,window.innerHeight-24),a=Math.min(Math.max(R,t.top),window.innerHeight-R-i);se({top:a,left:r,width:n,height:i})},[]);L(()=>{if(!H||!P)return;pe();let e=()=>pe();return window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[H,P,pe]);let me=X!==null;(0,r.useEffect)(()=>{if(!H||!P||!Z||!me)return;let e=oe.current,t=Y.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(),Q(!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)||Q(!1)};return document.addEventListener(`keydown`,r,!0),document.addEventListener(`pointerdown`,i,!0),()=>{document.removeEventListener(`keydown`,r,!0),document.removeEventListener(`pointerdown`,i,!0),t?.focus()}},[H,P,Z,me,Q]);let he=U??$,ge=(0,a.jsx)(i.IconButton,{"aria-label":h??E.copy,onClick:()=>O(he),variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:I,children:D?(0,a.jsx)(n.Check,{size:16,"aria-hidden":!0}):(0,a.jsx)(n.Copy,{size:16,"aria-hidden":!0})}),_e=!q&&(0,a.jsxs)(a.Fragment,{children:[b&&(0,a.jsx)(i.IconButton,{"aria-label":w??E.reset,onClick:b,variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:I,children:(0,a.jsx)(n.Undo2,{size:16,"aria-hidden":!0})}),y&&(0,a.jsx)(i.IconButton,{ref:ie,"aria-label":x??E.edit,onClick:ue,variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:I,children:(0,a.jsx)(n.Pencil,{size:16,"aria-hidden":!0})})]}),ve=q?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`textarea`,{ref:ae,value:U,onChange:e=>{W(e.target.value),K(null)},"aria-labelledby":B,"aria-invalid":G!==null||void 0,"aria-describedby":G===null?void 0:V,spellCheck:!1,autoCapitalize:`off`,autoComplete:`off`,className:s.PayloadEditor}),G!==null&&(0,a.jsx)(`p`,{id:V,role:`alert`,className:s.PayloadError,children:`${T??E.invalidJson}: ${G}`}),(0,a.jsxs)(`div`,{className:s.PayloadActions,children:[(0,a.jsx)(i.Button,{onClick:de,variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:I,children:C??E.cancel}),(0,a.jsx)(i.Button,{onClick:fe,variant:`solid`,size:`sm`,children:S??E.apply})]})]}):(0,a.jsx)(`pre`,{tabIndex:0,className:s.PayloadCode,children:le});return(0,a.jsxs)(`div`,{className:s.Payload,"data-placement":u,children:[!N&&(0,a.jsxs)(`button`,{ref:Y,type:`button`,"aria-expanded":P,"aria-controls":F,"data-placement":u,onClick:()=>Q(!P),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})})]}),!H&&P&&(0,a.jsxs)(`div`,{id:F,className:s.PayloadPanel,"data-placement":u,children:[(0,a.jsxs)(`div`,{className:s.PayloadHeader,children:[(0,a.jsx)(`span`,{id:B,children:l??t}),(0,a.jsxs)(`span`,{className:s.HeaderActions,children:[_e,ge]})]}),ve]}),H&&P&&Z&&(0,o.createPortal)((0,a.jsxs)(`div`,{ref:oe,id:F,role:`dialog`,"aria-labelledby":B,tabIndex:-1,className:s.Flyout,style:X?{top:X.top,left:X.left,width:X.width,height:X.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:B,children:l??t}),d!=null&&(0,a.jsx)(`span`,{className:s.Badge,"data-on-dark":``,children:d})]}),(0,a.jsxs)(`span`,{className:s.HeaderActions,children:[_e,(0,a.jsx)(i.IconButton,{"aria-label":_??E.close,onClick:()=>Q(!1),variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:I,children:(0,a.jsx)(n.X,{size:16,"aria-hidden":!0})})]})]}),ve,!q&&(0,a.jsx)(`div`,{className:s.FlyoutFooter,children:(0,a.jsxs)(`button`,{type:`button`,onClick:()=>O($),className:s.FlyoutCopyButton,children:[D?(0,a.jsx)(n.Check,{size:16,"aria-hidden":!0}):(0,a.jsx)(n.Copy,{size:16,"aria-hidden":!0}),D?E.copied:g??E.copyJson]})})]}),Z),(0,a.jsx)(`span`,{role:`status`,"aria-live":`polite`,className:s.VisuallyHidden,children:D?E.copied:``})]})}function V({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 H=t({Country:()=>x,Flow:()=>j,Footer:()=>V,Handle:()=>v,Payload:()=>B,Root:()=>g,Section:()=>_,Status:()=>D,StepState:()=>C,Steps:()=>T,Variant:()=>S,useSectionLabelId:()=>d});Object.defineProperty(exports,"DevPanel",{enumerable:!0,get:function(){return H}});
 //# sourceMappingURL=dev-panel.cjs.map