@leabankab/component-library 8.5.0 → 8.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 8.6.0
+
+### Minor Changes
+
+- 2a90ab1: `DevPanel.Root` can be pinned. `pinnable` adds a pin button to the header, and from 900px wide a pinned panel with a `position` docks to its side of the window at full height. It is controlled with `pinned` and `onPinnedChange` or uncontrolled with `defaultPinned`, and `pinLabel` renames the button. The panel stays fixed over the page, so the app makes room for it: the Pinned story shows the `body:has([data-pinned])` rule.
+
 ## 8.5.0
 
 ### Minor Changes

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

@@ -58,6 +58,21 @@ export type DevPanelProps = {
      * on the same side. Omit to place the panel yourself.
      */
     position?: DevPanelPosition;
+    /**
+     * Adds a pin button that docks a panel with a `position` to its side of the
+     * window, at full height, from 900px wide. The app makes room for it, as in
+     * the Pinned story. Defaults to `true` when `pinned` or `defaultPinned` is
+     * passed.
+     */
+    pinnable?: boolean;
+    /** Controlled pinned state. Omit for uncontrolled. */
+    pinned?: boolean;
+    /** Initial pinned state when uncontrolled. Defaults to `false`. */
+    defaultPinned?: boolean;
+    /** Called whenever the pinned state changes. Store it to keep it across reloads. */
+    onPinnedChange?: (pinned: boolean) => void;
+    /** Accessible name for the pin button. Defaults to a translated label. */
+    pinLabel?: string;
     /** Section content: compose the `DevPanel.*` sub-components here. */
     children?: ReactNode;
     /** Class on the outermost element, for placing the panel. */
@@ -88,7 +103,7 @@ export type DevPanelProps = {
  * </DevPanel.Root>
  * ```
  */
-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 declare function DevPanel({ title, badge, showStatusDot, minimisable, minimised, defaultMinimised, onMinimisedChange, minimiseLabel, expandLabel, hidden, defaultHidden, onHiddenChange, hideable, shortcut, handle, hideLabel, position, pinned, defaultPinned, onPinnedChange, pinnable, pinLabel, children, className, style, }: DevPanelProps): import("react").JSX.Element;
 export type DevPanelSectionProps = {
     /** The uppercase section heading (e.g. `"Country"`). */
     label: ReactNode;

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" | "reset" | "close" | "expand" | "cancel" | "copied" | "copyJson" | "edit" | "apply" | "invalidJson" | "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" | "pin" | "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_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}});
+"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_1wbg7_23`,SectionLabel:`_SectionLabel_1wbg7_24`,SectionMeta:`_SectionMeta_1wbg7_25`,FlowLabel:`_FlowLabel_1wbg7_26`,CountryCode:`_CountryCode_1wbg7_27`,StepLabel:`_StepLabel_1wbg7_28`,PayloadCode:`_PayloadCode_1wbg7_29`,PayloadEditor:`_PayloadEditor_1wbg7_30`,PayloadError:`_PayloadError_1wbg7_31`,DevPanel:`_DevPanel_1wbg7_40`,Body:`_Body_1wbg7_77`,PinButton:`_PinButton_1wbg7_107`,Header:`_Header_1wbg7_113`,HeaderTitle:`_HeaderTitle_1wbg7_125`,HeaderActions:`_HeaderActions_1wbg7_135`,HeaderDot:`_HeaderDot_1wbg7_142`,Handle:`_Handle_1wbg7_172`,HideButton:`_HideButton_1wbg7_251`,Section:`_Section_1wbg7_24`,SectionHeaderRow:`_SectionHeaderRow_1wbg7_275`,Flow:`_Flow_1wbg7_26`,FlowText:`_FlowText_1wbg7_317`,FlowSeparator:`_FlowSeparator_1wbg7_342`,SegmentedGroup:`_SegmentedGroup_1wbg7_355`,SegmentedOption:`_SegmentedOption_1wbg7_376`,ChipGroup:`_ChipGroup_1wbg7_428`,Chip:`_Chip_1wbg7_428`,ChipDot:`_ChipDot_1wbg7_467`,StepGrid:`_StepGrid_1wbg7_491`,StepButton:`_StepButton_1wbg7_497`,StepCircle:`_StepCircle_1wbg7_521`,StepFlagDot:`_StepFlagDot_1wbg7_563`,StepStateName:`_StepStateName_1wbg7_594`,StatusGrid:`_StatusGrid_1wbg7_603`,StatusCard:`_StatusCard_1wbg7_610`,StatusDot:`_StatusDot_1wbg7_669`,PayloadToggle:`_PayloadToggle_1wbg7_681`,PayloadToggleLabel:`_PayloadToggleLabel_1wbg7_701`,PayloadChevron:`_PayloadChevron_1wbg7_708`,PayloadPanel:`_PayloadPanel_1wbg7_732`,Payload:`_Payload_1wbg7_29`,PayloadHeader:`_PayloadHeader_1wbg7_765`,PayloadActions:`_PayloadActions_1wbg7_839`,Flyout:`_Flyout_1wbg7_851`,Token:`_Token_1wbg7_862`,FlyoutTitle:`_FlyoutTitle_1wbg7_910`,FlyoutFooter:`_FlyoutFooter_1wbg7_924`,FlyoutCopyButton:`_FlyoutCopyButton_1wbg7_931`,Footer:`_Footer_1wbg7_971`,OnDark:`_OnDark_1wbg7_999`,VisuallyHidden:`_VisuallyHidden_1wbg7_1010`},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`},pin:{no:`Fest`,se:`Fäst`,fi:`Kiinnitä`,es:`Fijar`},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:ee,hideLabel:T,position:E,pinned:D,defaultPinned:O,onPinnedChange:k,pinnable:te=D!==void 0||O!==void 0,pinLabel:ne,children:A,className:j,style:M}){let N=c(),P=d!==void 0,[F,re]=(0,r.useState)(m??!1),I=P?d:F,[L,ie]=(0,r.useState)(x??!1),R=C&&(b??L),[z,B]=(0,r.useState)(O??!1),V=D??z,H=te&&E!==void 0,U=(0,r.useRef)(null),W=(0,r.useRef)(null),G=(0,r.useRef)(null),K=(0,r.useRef)(null),ae=()=>{let e=!I;P||re(e),g?.(e)},oe=()=>{let e=!V;D===void 0&&B(e),k?.(e)},q=e=>{b===void 0&&ie(e),S?.(e)};(0,r.useEffect)(()=>{C&&!P&&m===void 0&&typeof window<`u`&&window.matchMedia?.(p).matches&&re(!0)},[]),(0,r.useEffect)(()=>{let e=K.current;K.current=null,e===`handle`&&W.current?.focus(),e===`panel`&&G.current?.focus()});let J=(0,r.useRef)({isHidden:R,setHiddenState:q});J.current={isHidden:R,setHiddenState:q},(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}=J.current,r=document.activeElement;!t&&U.current?.contains(r)&&(K.current=`handle`),t&&r!=null&&r===W.current&&(K.current=`panel`),n(!t)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[C,w]);let Y=(0,r.useId)(),X=E===void 0?void 0:E.endsWith(`left`)?`left`:`right`;return R?(0,a.jsx)(f.Provider,{value:{show:()=>{K.current=`panel`,q(!1)},title:e,handleRef:W,side:X},children:ee??(0,a.jsx)(v,{})}):(0,a.jsxs)(`div`,{ref:U,"data-dev-panel-root":``,"data-position":E,"data-hideable":C?``:void 0,"data-minimised":I?``:void 0,"data-pinned":H&&V&&!I?``:void 0,className:l(s.DevPanel,j),style:M,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:[H&&!I&&(0,a.jsx)(i.IconButton,{className:s.PinButton,"aria-label":ne??N.pin,"aria-pressed":V,onClick:oe,variant:V?`solid`:`outline`,color:`secondary`,size:`sm`,children:(0,a.jsx)(n.Pin,{size:18,"aria-hidden":!0})}),C&&(0,a.jsx)(i.IconButton,{ref:G,className:s.HideButton,"aria-label":T??N.hide,onClick:()=>{K.current=`handle`,q(!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":I?y??N.expand:_??N.minimise,"aria-expanded":!I,"aria-controls":Y,onClick:ae,variant:`outline`,color:`secondary`,size:`sm`,children:I?(0,a.jsx)(n.Plus,{size:18,"aria-hidden":!0}):(0,a.jsx)(n.Minus,{size:18,"aria-hidden":!0})})]})]}),!I&&(0,a.jsx)(`div`,{id:Y,className:s.Body,children:A})]})}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 ee({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)(T,{steps:e,currentStep:t,onStepSelect:n,columns:o,t:s})})}function T({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 E({value:e,onChange:t,options:n,label:r=`Application status`}){return(0,a.jsx)(_,{label:r,children:(0,a.jsx)(D,{value:e,onChange:t,options:n})})}function D({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 O(){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 k=e=>typeof e==`string`||typeof e==`number`?String(e):null;function te({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}=O(),_=[e,t,o].filter(e=>e!=null),v=_.map(k).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 ne=/"(?:\\.|[^"\\])*"|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\b(?:true|false|null)\b/g,A=e=>e===` `||e===`	`||e===`
+`||e===`\r`;function j(e,t,n){if(e[0]===`"`){let e=n;for(;e<t.length&&A(t[e]);)e+=1;return t[e]===`:`?`key`:`string`}return e===`true`||e===`false`?`boolean`:e===`null`?`null`:`number`}function M(e){let t=[],n=0;for(let r of e.matchAll(ne)){let i=r.index??0;i>n&&t.push({type:`punctuation`,value:e.slice(n,i)});let a=r[0];t.push({type:j(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 N(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 P({code:e}){let t=(0,r.useMemo)(()=>M(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 F={"--button-fg":`var(--lea-palette-text-contrast)`,"--button-border":`var(--lea-palette-border-contrast)`,"--button-tint":`var(--lea-color-neutral-800)`},re=e=>{if(typeof e==`string`)return e;try{return JSON.stringify(e,null,2)}catch{return String(e)}},I=typeof window<`u`?r.useLayoutEffect:r.useEffect,L=12,ie=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,onApply:y,onReset:b,editLabel:x,applyLabel:S,cancelLabel:C,resetLabel:w,invalidJsonLabel:ee}){let T=c(),{copied:E,copy:D}=O(),k=f!==void 0,[te,ne]=(0,r.useState)(p),A=u===`panel`,j=A||(k?f:te),M=(0,r.useId)(),z=(0,r.useId)(),B=(0,r.useId)(),V=u===`side`,[H,U]=(0,r.useState)(null),[W,G]=(0,r.useState)(null),K=H!==null,ae=(0,r.useRef)(null),oe=(0,r.useRef)(null),q=(0,r.useRef)(null),J=(0,r.useRef)(null),Y=(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=>{k||ne(e),m?.(e)},[k,m]),$=re(e),le=v&&N(e)?(0,a.jsx)(P,{code:$}):$;(0,r.useEffect)(()=>{let e=q.current;q.current=null,e===`editor`&&oe.current?.focus(),e===`edit`&&ae.current?.focus()}),(0,r.useEffect)(()=>{j||(U(null),G(null))},[j]);let ue=()=>{q.current=`editor`,U($),G(null)},de=()=>{q.current=`edit`,U(null),G(null)},fe=()=>{if(H===null)return;let e;try{e=JSON.parse(H)}catch(e){G(e instanceof Error?e.message:String(e));return}de(),y?.(e)},pe=(0,r.useCallback)(()=>{let e=J.current?.closest(`[data-dev-panel-root]`)??J.current;if(!e)return;let t=e.getBoundingClientRect(),n=Math.min(ie,Math.max(R,t.width)),r=t.left-n-L;r<L&&(r=Math.min(t.right+L,window.innerWidth-n-L));let i=Math.min(t.height,window.innerHeight-24),a=Math.min(Math.max(L,t.top),window.innerHeight-L-i);se({top:a,left:r,width:n,height:i})},[]);I(()=>{if(!V||!j)return;pe();let e=()=>pe();return window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[V,j,pe]);let me=X!==null;(0,r.useEffect)(()=>{if(!V||!j||!Z||!me)return;let e=Y.current,t=J.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()}},[V,j,Z,me,Q]);let he=H??$,ge=(0,a.jsx)(i.IconButton,{"aria-label":h??T.copy,onClick:()=>D(he),variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:F,children:E?(0,a.jsx)(n.Check,{size:16,"aria-hidden":!0}):(0,a.jsx)(n.Copy,{size:16,"aria-hidden":!0})}),_e=!K&&(0,a.jsxs)(a.Fragment,{children:[b&&(0,a.jsx)(i.IconButton,{"aria-label":w??T.reset,onClick:b,variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:F,children:(0,a.jsx)(n.Undo2,{size:16,"aria-hidden":!0})}),y&&(0,a.jsx)(i.IconButton,{ref:ae,"aria-label":x??T.edit,onClick:ue,variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:F,children:(0,a.jsx)(n.Pencil,{size:16,"aria-hidden":!0})})]}),ve=K?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`textarea`,{ref:oe,value:H,onChange:e=>{U(e.target.value),G(null)},"aria-labelledby":z,"aria-invalid":W!==null||void 0,"aria-describedby":W===null?void 0:B,spellCheck:!1,autoCapitalize:`off`,autoComplete:`off`,className:s.PayloadEditor}),W!==null&&(0,a.jsx)(`p`,{id:B,role:`alert`,className:s.PayloadError,children:`${ee??T.invalidJson}: ${W}`}),(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:F,children:C??T.cancel}),(0,a.jsx)(i.Button,{onClick:fe,variant:`solid`,size:`sm`,children:S??T.apply})]})]}):(0,a.jsx)(`pre`,{tabIndex:0,className:s.PayloadCode,children:le});return(0,a.jsxs)(`div`,{className:s.Payload,"data-placement":u,children:[!A&&(0,a.jsxs)(`button`,{ref:J,type:`button`,"aria-expanded":j,"aria-controls":M,"data-placement":u,onClick:()=>Q(!j),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})})]}),!V&&j&&(0,a.jsxs)(`div`,{id:M,className:s.PayloadPanel,"data-placement":u,children:[(0,a.jsxs)(`div`,{className:s.PayloadHeader,children:[(0,a.jsx)(`span`,{id:z,children:l??t}),(0,a.jsxs)(`span`,{className:s.HeaderActions,children:[_e,ge]})]}),ve]}),V&&j&&Z&&(0,o.createPortal)((0,a.jsxs)(`div`,{ref:Y,id:M,role:`dialog`,"aria-labelledby":z,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:z,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":_??T.close,onClick:()=>Q(!1),variant:`outline`,color:`secondary`,size:`sm`,className:s.OnDark,style:F,children:(0,a.jsx)(n.X,{size:16,"aria-hidden":!0})})]})]}),ve,!K&&(0,a.jsx)(`div`,{className:s.FlyoutFooter,children:(0,a.jsxs)(`button`,{type:`button`,onClick:()=>D($),className:s.FlyoutCopyButton,children:[E?(0,a.jsx)(n.Check,{size:16,"aria-hidden":!0}):(0,a.jsx)(n.Copy,{size:16,"aria-hidden":!0}),E?T.copied:g??T.copyJson]})})]}),Z),(0,a.jsx)(`span`,{role:`status`,"aria-live":`polite`,className:s.VisuallyHidden,children:E?T.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}=O();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:()=>x,Flow:()=>te,Footer:()=>B,Handle:()=>v,Payload:()=>z,Root:()=>g,Section:()=>_,Status:()=>E,StepState:()=>C,Steps:()=>ee,Variant:()=>S,useSectionLabelId:()=>d});Object.defineProperty(exports,"DevPanel",{enumerable:!0,get:function(){return V}});
 //# sourceMappingURL=dev-panel.cjs.map