@omni-design/components 0.10.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/index.esm.js +3 -3
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +3 -3
  4. package/dist/index.js.map +1 -1
  5. package/dist/types/components/Avatar/AvatarGlyph.d.ts +5 -0
  6. package/dist/types/components/Avatar/index.d.ts +1 -0
  7. package/dist/types/components/Icon/Icon.d.ts +4 -0
  8. package/dist/types/components/Pagination/Pagination.d.ts +3 -1
  9. package/dist/types/components/Radio/Radio.d.ts +6 -2
  10. package/dist/types/components/Rating/Rating.d.ts +3 -1
  11. package/dist/types/components/Slider/Slider.d.ts +9 -3
  12. package/dist/types/components/Stepper/Stepper.d.ts +3 -1
  13. package/dist/types/components/Tabs/Tabs.d.ts +17 -1
  14. package/dist/types/components/ToggleButton/index.d.ts +1 -1
  15. package/dist/types/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +26 -42
  16. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import e,{useState as r,useId as t,useRef as a,useCallback as o,useEffect as i,useContext as n,createContext as l,useMemo as s,forwardRef as d,Children as c,isValidElement as u}from"react";import{Box as h,Badge as p,GlobalStyles as m,Button as f,Avatar as g,Checkbox as x,FormControlLabel as b,TextField as v,InputAdornment as y,FormHelperText as S,Stack as k,Tooltip as B,Typography as w,Grid as C,Alert as T,Switch as z,ToggleButton as A,ToggleButtonGroup as I,Radio as R,FormControl as W,FormLabel as D,RadioGroup as P,Slider as F,Chip as L,Container as H,Tabs as M,Tab as E,Paper as N,Dialog as O,DialogTitle as Q,DialogContent as V,DialogContentText as j,DialogActions as G,Zoom as U,Grow as X,Fade as Y,Slide as q,List as Z,ListItem as J,ListItemButton as K,ListItemIcon as $,ListItemText as _,Collapse as ee,Divider as re,Drawer as te,useTheme as ae,useMediaQuery as oe,AppBar as ie,Toolbar as ne}from"@mui/material";import{jsx as le,Fragment as se,jsxs as de}from"react/jsx-runtime";import ce from"@mui/icons-material/ContentCopy";import ue from"@mui/icons-material/Check";import he from"@mui/icons-material/Person";import pe from"@mui/icons-material/Remove";import me from"@mui/icons-material/CheckCircleOutline";import fe from"@mui/icons-material/WarningAmber";import ge from"@mui/icons-material/ErrorOutline";import xe from"@mui/icons-material/InfoOutlined";import be from"react-dom";import ve from"@mui/icons-material/ExpandMore";import ye from"@mui/icons-material/Favorite";import Se from"@mui/icons-material/Home";import ke from"@mui/icons-material/Delete";import Be from"@mui/icons-material/Settings";import we from"@mui/icons-material/Search";import Ce from"@mui/icons-material/Star";import Te from"@mui/icons-material/Notifications";import ze from"@mui/icons-material/Visibility";import Ae from"@mui/icons-material/ShoppingCart";import Ie from"@mui/icons-material/Lock";import Re from"@mui/icons-material/Info";import We from"@mui/icons-material/HomeOutlined";import De from"@mui/icons-material/FavoriteBorderOutlined";import Pe from"@mui/icons-material/DeleteOutlined";import Fe from"@mui/icons-material/SettingsOutlined";import Le from"@mui/icons-material/StarOutline";import He from"@mui/icons-material/PersonOutlined";import Me from"@mui/icons-material/NotificationsOutlined";import Ee from"@mui/icons-material/VisibilityOutlined";import Ne from"@mui/icons-material/ShoppingCartOutlined";import Oe from"@mui/icons-material/LockOutlined";import Qe from"@mui/icons-material/HomeRounded";import Ve from"@mui/icons-material/FavoriteRounded";import je from"@mui/icons-material/DeleteRounded";import Ge from"@mui/icons-material/SettingsRounded";import Ue from"@mui/icons-material/SearchRounded";import Xe from"@mui/icons-material/StarRounded";import Ye from"@mui/icons-material/PersonRounded";import qe from"@mui/icons-material/NotificationsRounded";import Ze from"@mui/icons-material/VisibilityRounded";import Je from"@mui/icons-material/ShoppingCartRounded";import Ke from"@mui/icons-material/LockRounded";import $e from"@mui/icons-material/InfoRounded";import _e from"@mui/icons-material/HomeTwoTone";import er from"@mui/icons-material/FavoriteTwoTone";import rr from"@mui/icons-material/DeleteTwoTone";import tr from"@mui/icons-material/SettingsTwoTone";import ar from"@mui/icons-material/SearchTwoTone";import or from"@mui/icons-material/StarTwoTone";import ir from"@mui/icons-material/PersonTwoTone";import nr from"@mui/icons-material/NotificationsTwoTone";import lr from"@mui/icons-material/VisibilityTwoTone";import sr from"@mui/icons-material/ShoppingCartTwoTone";import dr from"@mui/icons-material/LockTwoTone";import cr from"@mui/icons-material/InfoTwoTone";import ur from"@mui/icons-material/HomeSharp";import hr from"@mui/icons-material/FavoriteSharp";import pr from"@mui/icons-material/DeleteSharp";import mr from"@mui/icons-material/SettingsSharp";import fr from"@mui/icons-material/SearchSharp";import gr from"@mui/icons-material/StarSharp";import xr from"@mui/icons-material/PersonSharp";import br from"@mui/icons-material/NotificationsSharp";import vr from"@mui/icons-material/VisibilitySharp";import yr from"@mui/icons-material/ShoppingCartSharp";import Sr from"@mui/icons-material/LockSharp";import kr from"@mui/icons-material/InfoSharp";import Br from"@mui/icons-material/Code";import wr from"@mui/icons-material/GridView";import Cr from"@mui/icons-material/Computer";import Tr from"@mui/icons-material/Add";import*as zr from"@mui/icons-material";import{Settings as Ar,Close as Ir}from"@mui/icons-material";import Rr from"@mui/icons-material/Menu";import Wr from"@mui/icons-material/Close";import Dr from"@mui/icons-material/FormatBold";import Pr from"@mui/icons-material/FormatItalic";import Fr from"@mui/icons-material/FormatUnderlined";import Lr from"@mui/icons-material/FormatAlignLeft";import Hr from"@mui/icons-material/FormatAlignCenter";import Mr from"@mui/icons-material/KeyboardArrowUp";import Er from"@mui/icons-material/KeyboardArrowDown";import"@mui/icons-material/FormatAlignRight";import"@mui/icons-material/ViewList";import"@mui/icons-material/ViewModule";import Nr from"@mui/material/CircularProgress";import"@mui/icons-material/StarBorder";import Or from"@mui/icons-material/StarHalf";import Qr from"@mui/icons-material/Cancel";import Vr from"@mui/icons-material/ExpandLess";import jr from"@mui/icons-material/Image";import Gr from"@mui/icons-material/ChevronLeft";import Ur from"@mui/icons-material/ChevronRight";import Xr from"@mui/icons-material/FirstPage";import Yr from"@mui/icons-material/LastPage";import qr from"@mui/icons-material/Explore";import Zr from"@mui/icons-material/Radio";import Jr from"@mui/icons-material/LibraryMusic";import Kr from"@mui/icons-material/Bookmark";import $r from"@mui/icons-material/Edit";import _r from"@mui/icons-material/Share";import"@mui/icons-material/FavoriteBorder";import"@mui/icons-material/DeleteOutline";import et from"@mui/icons-material/CloudUpload";import rt from"@mui/icons-material/Mail";import"@mui/icons-material/Inbox";import tt from"@mui/icons-material/Folder";import"@mui/icons-material/MoreVert";import"@mui/icons-material/ImageOutlined";import at from"@mui/icons-material/ArrowBack";import ot from"@mui/icons-material/AccountCircle";import it from"@mui/icons-material/Twitter";import nt from"@mui/icons-material/GitHub";import lt from"@mui/icons-material/LinkedIn";import st from"@mui/icons-material/Help";import dt from"@mui/icons-material/FolderOpen";import ct from"@mui/icons-material/InsertDriveFile";import ut from"@mui/icons-material/PictureAsPdf";import ht from"@mui/icons-material/VideoLibrary";import pt from"@mui/icons-material/InboxOutlined";import mt from"@mui/icons-material/SearchOffOutlined";import ft from"@mui/icons-material/ErrorOutlineOutlined";const gt=e.createContext(null);function xt(){return e.useContext(gt)}function bt({radius:e="var(--Ghost-Radius, 4px)",animate:r=!0}={}){return{backgroundColor:"var(--Border-Variant)",borderRadius:e,color:"transparent",userSelect:"none",pointerEvents:"none",...r&&{backgroundImage:"linear-gradient(90deg, transparent 0%, var(--Background) 50%, transparent 100%)",backgroundSize:"200% 100%",backgroundRepeat:"no-repeat",animation:"omni-ghost-sweep 1.4s linear infinite","@media (prefers-reduced-motion: reduce)":{backgroundImage:"none",animation:"none"}}}}function vt({active:e=!0,animate:r=!0,label:t="Loading",children:a,...o}){return e?de(gt.Provider,{value:{animate:r},children:[le("style",{children:"\n@keyframes omni-ghost-sweep {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n"}),de("div",{"aria-busy":"true","data-ghost":"true",...o,children:[le("span",{style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)",whiteSpace:"nowrap"},children:t}),le("div",{"aria-hidden":"true",children:a})]})]}):le(se,{children:a})}const yt=e=>`var(--${e}-Font-Family)`,St="var(--Font-Family-Display, var(--Font-Family-Header, var(--Header-Font-Family)))",kt="var(--Font-Family-Eyebrow, var(--Decorative-Font-Family))",Bt=(e,r)=>`var(--${e}-Font-Family, ${r})`,wt="var(--Font-Variation-Header, normal)",Ct=(e,r)=>`var(--Eyebrow-${e}-${r}, var(--Overline-${e}-${r}))`,Tt=e=>Ct(e,"Font-Size"),zt=e=>Ct(e,"Font-Weight"),At=e=>Ct(e,"Line-Height"),It=e=>Ct(e,"Letter-Spacing"),Rt=e=>`var(--${e}-Font-Size)`,Wt=e=>`var(--${e}-Font-Weight)`,Dt=e=>`calc(var(--${e}-Line-Height) * var(--Cognitive-Multiplier, 1))`,Pt=e=>`var(--${e}-Line-Height)`,Ft=e=>`var(--${e}-Letter-Spacing)`,Lt={"display-large":{component:"h1",fontFamily:Bt("Display-Large",St),fontSize:Rt("Display-Large"),fontWeight:Wt("Display-Large"),lineHeight:Dt("Display-Large"),letterSpacing:Ft("Display-Large"),defaultColor:"header",defaultWidth:"fill"},"display-medium":{component:"h1",fontFamily:Bt("Display-Medium",St),fontSize:Rt("Display-Medium"),fontWeight:Wt("Display-Medium"),lineHeight:Dt("Display-Medium"),letterSpacing:Ft("Display-Medium"),defaultColor:"header",defaultWidth:"fill"},"display-small":{component:"h2",fontFamily:Bt("Display-Small",St),fontSize:Rt("Display-Small"),fontWeight:Wt("Display-Small"),lineHeight:Dt("Display-Small"),letterSpacing:Ft("Display-Small"),defaultColor:"header",defaultWidth:"fill"},h1:{component:"h1",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Rt("H1"),fontWeight:Wt("H1"),lineHeight:Dt("H1"),letterSpacing:Ft("H1"),defaultColor:"header",defaultWidth:"fill"},h2:{component:"h2",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Rt("H2"),fontWeight:Wt("H2"),lineHeight:Dt("H2"),letterSpacing:Ft("H2"),defaultColor:"header",defaultWidth:"fill"},h3:{component:"h3",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Rt("H3"),fontWeight:Wt("H3"),lineHeight:Dt("H3"),letterSpacing:Ft("H3"),defaultColor:"header",defaultWidth:"fill"},h4:{component:"h4",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Rt("H4"),fontWeight:Wt("H4"),lineHeight:Dt("H4"),letterSpacing:Ft("H4"),defaultColor:"standard",defaultWidth:"fill"},h5:{component:"h5",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Rt("H5"),fontWeight:Wt("H5"),lineHeight:Dt("H5"),letterSpacing:Ft("H5"),defaultColor:"standard",defaultWidth:"fill"},h6:{component:"h6",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Rt("H6"),fontWeight:Wt("H6"),lineHeight:Dt("H6"),letterSpacing:Ft("H6"),defaultColor:"standard",defaultWidth:"fill"},"subtitle-large":{component:"p",fontFamily:yt("Body"),fontSize:Rt("Subtitle-Large"),fontWeight:Wt("Subtitle-Large"),lineHeight:Dt("Subtitle-Large"),letterSpacing:Ft("Subtitle-Large"),defaultColor:"header",defaultWidth:"fill"},subtitle:{component:"p",fontFamily:yt("Body"),fontSize:Rt("Subtitle-Medium"),fontWeight:Wt("Subtitle-Medium"),lineHeight:Dt("Subtitle-Medium"),letterSpacing:Ft("Subtitle-Medium"),defaultColor:"header",defaultWidth:"fill"},"subtitle-small":{component:"p",fontFamily:yt("Body"),fontSize:Rt("Subtitle-Small"),fontWeight:Wt("Subtitle-Small"),lineHeight:Dt("Subtitle-Small"),letterSpacing:Ft("Subtitle-Small"),defaultColor:"header",defaultWidth:"fill"},"body-small":{component:"p",fontFamily:yt("Body"),fontSize:Rt("Body-Small"),fontWeight:Wt("Body-Small"),lineHeight:Dt("Body-Small"),letterSpacing:Ft("Body-Small"),defaultColor:"standard",defaultWidth:"fill"},"body-small-semibold":{component:"p",fontFamily:yt("Body"),fontSize:Rt("Body-Small"),fontWeight:Wt("Body-Small-Semibold"),lineHeight:Dt("Body-Small"),letterSpacing:Ft("Body-Small"),defaultColor:"standard",defaultWidth:"fill"},body:{component:"p",fontFamily:yt("Body"),fontSize:Rt("Body-Medium"),fontWeight:Wt("Body-Medium"),lineHeight:Dt("Body-Medium"),letterSpacing:Ft("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-medium":{component:"p",fontFamily:yt("Body"),fontSize:Rt("Body-Medium"),fontWeight:Wt("Body-Medium"),lineHeight:Dt("Body-Medium"),letterSpacing:Ft("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-semibold":{component:"p",fontFamily:yt("Body"),fontSize:Rt("Body-Medium"),fontWeight:Wt("Body-Medium-Semibold"),lineHeight:Dt("Body-Medium"),letterSpacing:Ft("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-medium-semibold":{component:"p",fontFamily:yt("Body"),fontSize:Rt("Body-Medium"),fontWeight:Wt("Body-Medium-Semibold"),lineHeight:Dt("Body-Medium"),letterSpacing:Ft("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-large":{component:"p",fontFamily:yt("Body"),fontSize:Rt("Body-Large"),fontWeight:Wt("Body-Large"),lineHeight:Dt("Body-Large"),letterSpacing:Ft("Body-Large"),defaultColor:"standard",defaultWidth:"fill"},"body-large-semibold":{component:"p",fontFamily:yt("Body"),fontSize:Rt("Body-Large"),fontWeight:Wt("Body-Large-Semibold"),lineHeight:Dt("Body-Large"),letterSpacing:Ft("Body-Large"),defaultColor:"standard",defaultWidth:"fill"},caption:{component:"span",fontFamily:yt("Body"),fontSize:Rt("Caption"),fontWeight:Wt("Caption"),lineHeight:Dt("Caption"),letterSpacing:Ft("Caption"),defaultColor:"quiet",defaultWidth:"hug"},"caption-bold":{component:"span",fontFamily:yt("Body"),fontSize:Rt("Caption"),fontWeight:Wt("Caption-Bold"),lineHeight:Dt("Caption"),letterSpacing:Ft("Caption"),defaultColor:"quiet",defaultWidth:"hug"},"label-extra-small":{component:"label",fontFamily:yt("Body"),fontSize:Rt("Label-ExtraSmall"),fontWeight:Wt("Label-ExtraSmall"),lineHeight:Pt("Label-ExtraSmall"),letterSpacing:Ft("Label-ExtraSmall"),defaultColor:"standard",defaultWidth:"hug"},"label-small":{component:"label",fontFamily:yt("Body"),fontSize:Rt("Label-Small"),fontWeight:Wt("Label-Small"),lineHeight:Pt("Label-Small"),letterSpacing:Ft("Label-Small"),defaultColor:"standard",defaultWidth:"hug"},label:{component:"label",fontFamily:yt("Body"),fontSize:Rt("Label-Medium"),fontWeight:Wt("Label-Medium"),lineHeight:Pt("Label-Medium"),letterSpacing:Ft("Label-Medium"),defaultColor:"standard",defaultWidth:"hug"},"label-medium":{component:"label",fontFamily:yt("Body"),fontSize:Rt("Label-Medium"),fontWeight:Wt("Label-Medium"),lineHeight:Pt("Label-Medium"),letterSpacing:Ft("Label-Medium"),defaultColor:"standard",defaultWidth:"hug"},"label-large":{component:"label",fontFamily:yt("Body"),fontSize:Rt("Label-Large"),fontWeight:Wt("Label-Large"),lineHeight:Pt("Label-Large"),letterSpacing:Ft("Label-Large"),defaultColor:"standard",defaultWidth:"hug"},legal:{component:"span",fontFamily:yt("Body"),fontSize:Rt("Legal"),fontWeight:Wt("Legal"),lineHeight:Dt("Legal"),letterSpacing:Ft("Legal"),defaultColor:"quiet",defaultWidth:"hug"},"legal-semibold":{component:"span",fontFamily:yt("Body"),fontSize:Rt("Legal"),fontWeight:Wt("Legal-Semibold"),lineHeight:Dt("Legal"),letterSpacing:Ft("Legal"),defaultColor:"quiet",defaultWidth:"hug"},"eyebrow-small":{component:"span",fontFamily:kt,fontSize:Tt("Small"),fontWeight:zt("Small"),lineHeight:At("Small"),letterSpacing:It("Small"),textTransform:"uppercase",defaultColor:"eyebrow",defaultWidth:"hug"},eyebrow:{component:"span",fontFamily:kt,fontSize:Tt("Medium"),fontWeight:zt("Medium"),lineHeight:At("Medium"),letterSpacing:It("Medium"),textTransform:"uppercase",defaultColor:"eyebrow",defaultWidth:"hug"},"eyebrow-large":{component:"span",fontFamily:kt,fontSize:Tt("Large"),fontWeight:zt("Large"),lineHeight:At("Large"),letterSpacing:It("Large"),textTransform:"uppercase",defaultColor:"eyebrow",defaultWidth:"hug"},"number-small":{component:"span",fontFamily:yt("Body"),fontSize:Rt("Number-Small"),fontWeight:Wt("Number-Small"),lineHeight:Pt("Number-Small"),letterSpacing:Ft("Number-Small"),fontVariantNumeric:"tabular-nums",defaultColor:"standard",defaultWidth:"hug"},"number-medium":{component:"span",fontFamily:yt("Body"),fontSize:Rt("Number-Medium"),fontWeight:Wt("Number-Medium"),lineHeight:Pt("Number-Medium"),letterSpacing:Ft("Number-Medium"),fontVariantNumeric:"tabular-nums",defaultColor:"standard",defaultWidth:"hug"},"number-large":{component:"span",fontFamily:yt("Body"),fontSize:Rt("Number-Large"),fontWeight:Wt("Number-Large"),lineHeight:Pt("Number-Large"),letterSpacing:Ft("Number-Large"),fontVariantNumeric:"tabular-nums",defaultColor:"standard",defaultWidth:"hug"},"button-extra-small":{component:"span",fontFamily:yt("Body"),fontSize:Rt("Button-ExtraSmall"),fontWeight:Wt("Button-ExtraSmall"),lineHeight:Pt("Button-ExtraSmall"),letterSpacing:Ft("Button-ExtraSmall"),defaultColor:"standard",defaultWidth:"hug"},"button-small":{component:"span",fontFamily:yt("Body"),fontSize:Rt("Button-Small"),fontWeight:Wt("Button-Small"),lineHeight:Pt("Button-Small"),letterSpacing:Ft("Button-Small"),defaultColor:"standard",defaultWidth:"hug"},button:{component:"span",fontFamily:yt("Body"),fontSize:"var(--Button-Standard-Font-Size, var(--Button-Font-Size))",fontWeight:"var(--Button-Standard-Font-Weight, var(--Body-Font-Weight))",lineHeight:Pt("Button-Standard"),letterSpacing:Ft("Button-Standard"),defaultColor:"standard",defaultWidth:"hug"},"button-standard":{component:"span",fontFamily:yt("Body"),fontSize:"var(--Button-Standard-Font-Size, var(--Button-Font-Size))",fontWeight:"var(--Button-Standard-Font-Weight, var(--Body-Font-Weight))",lineHeight:Pt("Button-Standard"),letterSpacing:Ft("Button-Standard"),defaultColor:"standard",defaultWidth:"hug"}},Ht={"overline-small":"eyebrow-small",overline:"eyebrow","overline-medium":"eyebrow","overline-large":"eyebrow-large","eyebrow-medium":"eyebrow","body-small-bold":"body-small-semibold","body-bold":"body-semibold","body-medium-bold":"body-semibold","body-large-bold":"body-large-semibold","subtitle-medium":"subtitle"},Mt={"eyebrow-small":"overline-small",eyebrow:"overline","eyebrow-large":"overline-large"},Et={header:"var(--Header)",default:"var(--Header)",primary:"var(--Header-Primary)",secondary:"var(--Header-Secondary)",tertiary:"var(--Header-Tertiary)",neutral:"var(--Header-Neutral)",info:"var(--Header-Info)",success:"var(--Header-Success)",warning:"var(--Header-Warning)",error:"var(--Header-Error)"},Nt={standard:"var(--Text)",default:"var(--Text)",quiet:"var(--Quiet)",eyebrow:"var(--Eyebrow, var(--Quiet))",primary:"var(--Text-Primary)",secondary:"var(--Text-Secondary)",tertiary:"var(--Text-Tertiary)",neutral:"var(--Text-Neutral)",info:"var(--Text-Info)",success:"var(--Text-Success)",warning:"var(--Text-Warning)",error:"var(--Text-Error)"},Ot=new Set(["h1","h2","h3","h4","h5","h6","display-large","display-medium","display-small","subtitle-large","subtitle","subtitle-small"]);function Qt({children:e,textStyle:r="body",color:t,width:a,component:o,noWrap:i=!1,gutterBottom:n=!1,className:l="",sx:s={},...d}){const c=Ht[r]||r,u=Lt[c]||Lt.body,p="string"==typeof u.fontSize?u.fontSize.match(/--([\w-]+)-Font-Size/):null,m=p?p[1]:null,f=m?"var(--"+m+"-Text-Decoration, "+(u.textDecoration||"none")+")":u.textDecoration||"none",g=m?"var(--"+m+"-Text-Transform, "+(u.textTransform||"none")+")":u.textTransform||"none",x=xt(),b=function(e,r,t){const a=Ot.has(e);return(a?Et:Nt)[r||t]||(a?Et.header:Nt.standard)}(c,t,u.defaultColor),v=a||u.defaultWidth,y="fill"===v,S=o||u.component,k=t||u.defaultColor;return le(h,{component:S,className:"typography typography-"+c+(Mt[c]?" typography-"+Mt[c]:"")+" typography-color-"+k+" typography-width-"+v+" "+l,sx:{fontFamily:u.fontFamily,fontVariationSettings:u.fontVariationSettings||"normal",fontSize:u.fontSize,fontWeight:u.fontWeight,lineHeight:u.lineHeight,letterSpacing:u.letterSpacing,textDecoration:f,textTransform:g,fontVariantNumeric:u.fontVariantNumeric||"normal",color:b,display:y?"block":"inline",width:y?"100%":"auto",margin:0,marginBottom:n?"0.5em":0,padding:0,...i&&{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},...x?bt({animate:x.animate}):{},...s},...d,children:e})}const Vt={"@supports (text-box-edge: cap alphabetic)":{textBoxTrim:"trim-both",textBoxEdge:"cap alphabetic",paddingTop:0,paddingBottom:0}},jt=e=>le(Qt,{textStyle:"display-large",...e}),Gt=e=>le(Qt,{textStyle:"display-medium",...e}),Ut=e=>le(Qt,{textStyle:"display-small",...e}),Xt=e=>le(Qt,{textStyle:"h1",...e}),Yt=e=>le(Qt,{textStyle:"h2",...e}),qt=e=>le(Qt,{textStyle:"h3",...e}),Zt=e=>le(Qt,{textStyle:"h4",...e}),Jt=e=>le(Qt,{textStyle:"h5",...e}),Kt=e=>le(Qt,{textStyle:"h6",...e}),$t=Zt,_t=e=>le(Qt,{textStyle:"subtitle-large",...e}),ea=e=>le(Qt,{textStyle:"subtitle",...e}),ra=e=>le(Qt,{textStyle:"subtitle-small",...e}),ta=e=>le(Qt,{textStyle:"subtitle",...e}),aa=_t,oa=ea,ia=e=>le(Qt,{textStyle:"body-small",...e}),na=e=>le(Qt,{textStyle:"body-small-semibold",...e}),la=e=>le(Qt,{textStyle:"body-small-bold",...e}),sa=e=>le(Qt,{textStyle:"body",...e}),da=e=>le(Qt,{textStyle:"body-semibold",...e}),ca=e=>le(Qt,{textStyle:"body-bold",...e}),ua=sa,ha=ia,pa=e=>le(Qt,{textStyle:"body-large",...e}),ma=e=>le(Qt,{textStyle:"body-large-semibold",...e}),fa=e=>le(Qt,{textStyle:"body-large-bold",...e}),ga=e=>le(Qt,{textStyle:"caption",...e}),xa=e=>le(Qt,{textStyle:"caption-bold",...e}),ba=e=>le(Qt,{textStyle:"label-extra-small",...e}),va=e=>le(Qt,{textStyle:"label-small",...e}),ya=e=>le(Qt,{textStyle:"label",...e}),Sa=e=>le(Qt,{textStyle:"label-large",...e}),ka=e=>le(Qt,{textStyle:"legal",...e}),Ba=e=>le(Qt,{textStyle:"legal-semibold",...e}),wa=e=>le(Qt,{textStyle:"eyebrow-small",...e}),Ca=e=>le(Qt,{textStyle:"eyebrow",...e}),Ta=e=>le(Qt,{textStyle:"eyebrow",...e}),za=e=>le(Qt,{textStyle:"eyebrow-large",...e}),Aa=wa,Ia=Ca,Ra=Ta,Wa=za,Da=e=>le(Qt,{textStyle:"number-small",...e}),Pa=e=>le(Qt,{textStyle:"number-medium",...e}),Fa=e=>le(Qt,{textStyle:"number-large",...e}),La=e=>le(Qt,{textStyle:"button-extra-small",...e}),Ha=e=>le(Qt,{textStyle:"button-small",...e}),Ma=e=>le(Qt,{textStyle:"button",...e}),Ea={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Na={small:"16px",medium:"24px",large:"32px"};function Oa({children:e,color:r="default",size:t="medium",fontSize:a,disabled:o=!1,twoTone:i=!1,className:n="",sx:l={},"aria-label":s,...d}){const c=xt(),u=Ea[r]||"Default",p="custom"===t&&a?"number"==typeof a?a+"px":a:Na[t]||Na.medium;return le(h,{component:"span",className:"icon icon-"+r+" icon-"+t+(o?" icon-disabled":"")+(i?" icon-twotone":"")+(n?" "+n:""),"aria-hidden":s?void 0:"true","aria-label":s||void 0,role:s?"img":void 0,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:p,color:"default"===r?"inherit":"var(--Icons-"+u+")",opacity:o?"var(--Disabled, 0.38)":1,cursor:o?"not-allowed":"inherit",lineHeight:1,flexShrink:0,...i&&{"--twotone-variant":"var(--Icons-Variant-"+u+")"},...c?{...bt({animate:c.animate}),width:p,height:p,"& .MuiSvgIcon-root":{visibility:"hidden"}}:{},"& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"},...l},...d,children:e})}const Qa="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QCSRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAACQAAAAAQAAAJAAAAABAAOShgAHAAAAEgAAAHigAgAEAAAAAQAAAKCgAwAEAAAAAQAAAKAAAAAAQVNDSUkAAABTY3JlZW5zaG90/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iAihJQ0NfUFJPRklMRQABAQAAAhhhcHBsBAAAAG1udHJSR0IgWFlaIAfmAAEAAQAAAAAAAGFjc3BBUFBMAAAAAEFQUEwAAAAAAAAAAAAAAAAAAAAAAAD21gABAAAAANMtYXBwbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmRlc2MAAAD8AAAAMGNwcnQAAAEsAAAAUHd0cHQAAAF8AAAAFHJYWVoAAAGQAAAAFGdYWVoAAAGkAAAAFGJYWVoAAAG4AAAAFHJUUkMAAAHMAAAAIGNoYWQAAAHsAAAALGJUUkMAAAHMAAAAIGdUUkMAAAHMAAAAIG1sdWMAAAAAAAAAAQAAAAxlblVTAAAAFAAAABwARABpAHMAcABsAGEAeQAgAFAAM21sdWMAAAAAAAAAAQAAAAxlblVTAAAANAAAABwAQwBvAHAAeQByAGkAZwBoAHQAIABBAHAAcABsAGUAIABJAG4AYwAuACwAIAAyADAAMgAyWFlaIAAAAAAAAPbVAAEAAAAA0yxYWVogAAAAAAAAg98AAD2/////u1hZWiAAAAAAAABKvwAAsTcAAAq5WFlaIAAAAAAAACg4AAARCwAAyLlwYXJhAAAAAAADAAAAAmZmAADypwAADVkAABPQAAAKW3NmMzIAAAAAAAEMQgAABd7///MmAAAHkwAA/ZD///ui///9owAAA9wAAMBu/8AAEQgAoACgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAAgICAgICAwICAwQDAwMEBQQEBAQFBgUFBQUFBggGBgYGBgYICAgICAgICAkJCQkJCQsLCwsLDAwMDAwMDAwMDP/bAEMBAgICAwMDBQMDBQwIBwgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDP/dAAQACv/aAAwDAQACEQMRAD8A8zt1v/D0/m2bbo85K9q664XRPGNl5N0iicc7W9R3FeO2vjF5FAmPB9eldRYvFfqJrWYJIOeDivntTvnRvqeleHfEupeA3EciBoYz8rgcjHr/AI/nXpdt+0p4sd1s7RozEw+V88/lXjlldedEbLVsOCMb+9XPCmk6f4S1yPWvs631uj+Z5bcjI54zU3a1izmlTVmpI+kbLxp8SdcjWVkuzHJ0ZIXCn6MRiultfD3i/UcPdgx57zSgfoMmufb9oZ9WgGl6dAqsw27OWZMf7IFT2XiDxJfKWbcPYkLn6dTXZSrJ/E2zza9Fp+6kj1bRPhjZXKeZr2sLCv8AcgAz/wB9Of6VrX/hL4M6NC39pOb9scieZnBx/sx7R+lebaXYatqlwEupRbx/xMSXP4ZIFehR+C/BUKBtRup7p2/g8zaCT22xgH9a7ou6uor5nJ5XPzw+LkHgGy+INld+AbH7MfPUXMSBlikywwVDd+xxX1HDe3Z8Norx2yIEzsz85z36Yr1SP4cfC6fVTqV1o0U7w4wsrLshDHZmUMeCfU89MDvU+peGPCWsWlxb+H4bG3iRWZhBOu2LaM7pmOQFC5/iABJr57MI1ZS5qTW/Q+lwFCPskqi6dT8o5LC78RfEqG32kRR3h83A6KG5Az7V+pfhHwl8MptKhgvIGhlVAN6yOjdO+Dj9K8W8KfDHTbXUrnWrh4BDCXnnkYjy1UOFwjcjAzksT9AOa9vtbLSJYhJHIsaFFZZEYeWQRwQR8pHoe9d2Fq3Wxw46hK99TtU+Evgu7XOm6tcRE9AWSQfqAf1rOufghqGC+maxBJ6eZGyH81J/lWF9ju4Rvs5xKuNwPXP5Uh1vX9PHyPIO3yOcV1upC2sTg9mZWqfDv4oaKrSWcomVeht7n/2V8Vwdj41+IXhzW44fEMV+0LkRwxNHnfIT03DjHvXp6+OvEtveRRyxzyLJwocDaD6sewFT+NfEVjDp/wBvuJ0a4WPk8dT2UfpXn1nztqDOyjTUFcf4h8TTHS/tWpzLG+zJTPyx8dPc+9fGHjTxve6o8lnp8jLbkkE92/wFWPFnja/1tjBJJ5cA/hHf3NeVahrVhZRNucZqU7LlR1KnzS5mMimitW3yH5qyNb8XW9vHtMn4Dk1w2qeKbaRyfOWJM9erH6CtXw5oN34iuo5Rp8ws2/5bSDG4+oBo6HZGkf/QwfiB+y3N4f8AEotfDV5P/Z8oJ8qRt+wjnhuuK8A1zS9b8AagYLhZvJzgSlG2ZHbdiv0u1v4m6Xd66BfW0tqckbZlIPT3roptF8MeLdKMN1bwvFOhIDBf0zXz9RLmbiz2I6o/MDT/ABdJcSJHc7lJ6HoDXsGhXk6qG3iSNux6V698RfgRZ3enqnhqNIZwBtYLnmvDh8OPiV4YuI4TD9pcuFAUAJ1xli3AHqTwO9Q3Zakzpp6I9M0ZLaC5+2aZARck44GdxPavYvDGqanqF2LGKDFwcfIFbHPfgGuG8AeDr7UZvMvNV0/yIZsTeTMZFjOSrI7KByCOzZz2HWvZF1/TtE8XQeFtE0+BnhgWSTU72VkTEoYL5UUfLuSrAAsT3GetEZq6S3OV4KUrtrQ9H0iPRZXuNPl1GKa7sYhPexwuZBARx5biLJDMx4GCeD71Q8MePvhh4i1K+tPDF6up3mmukUscKldsj7s4MhwdmDuP8ODmvz5+Ofjl/BvhrWdQ8KreafDreurCL1hMvmi2iLsVWQEBEclgqFgN3JB68d+zxJ8RNM8EeLvjHoTxARLKWminiVrydMzXBMZJEQXhdyozN0A446FJyjdM3hhIRkotH1j8fPF9kllq3g7whdBNUa3F5LOitJMktuXMUaPFl8bo2BJCjkEZya+dvhD8d7Pw14WiPjOS5thcM9qr2saTC4s5A8hZo2ILKkxkTgNgHuOvwp45+K/izxlq11rJ1W4im1SFxcMj7HXLncCqYxu2gEdx164Ot4s+IWh6p4I0e006eddSit4Ld5HVVmR7bAXBA5AYZUZzySevESwknbm6s3+tU4+7Doj7yv8A44aP4Ztv7XmS81WHTIv7LgW7uWSJDcPHIjFY2wzrGd0e8FMYBAJOOf8AEX7SenLYqLIRyWlhukkmIKzF5CGffGrbMYxhVJ6N2Ffnd4l8U3upaZJfapYPOLpk2XbthlKJ8v3RtAOe/PHUViXOvW1xp9o81x/pLoBNHsAiZFwFwoYkt0y20Z549dYYO0VF9zKpilJvTofo5pP7Sniy3TzNA2/2fIrNG/zMmBncNjA4Kngj8q9Z8B/tXQ3Rlg8Y+XmLHliFfLZnOQMh+AAQMkkAA5r8tfDfj3xB4dtTYaPIt7aEeY8arux3JAwD7EH0zmvR9a16x8XaLBFusE1WdoRO4QQzIgBzGuGAfsWcjIOBiieGlF6PQwUqc1qtT9d5fihpniLRRf6Msm6ZcASrg7lyCVI4Zc9COCOa8W1vVNQuyZdSdio6KTwK8K8EeKINAuNGsdNuXu7JbZ7a6gZyNlyER1YK3IO3J+XII7nFe66T4d1LxrK0sgMVucgHPII6+2PT2riUteXqU8PZ3Wx4zruvNJO1raQMcdTXKaVoOseKpLj7NalYoDh3kJJJPYV7zf8AgCPwnqMk05MkbDJZ+e3vXQ+Ar/Slgu7S3iJllkO3auR0PU1UV71mdEYKKufPPhz4bWk3iyyS+TcqkkoeQDmvvPUtA03SPD0DWsCJsTOAAD2r540T4d/EHW/HTGxT7PEWLJJt3fKT1xx/OvsvTPg/r0NvFca7eyXRC4KsQF/BRx+ta0acnfqTVrw0sf/R/Q3XfAeh61q8t1cWqM4zhiorirj4YvcPs02RoCgIRlzxXQzfEq1GoPGtvJyxHT+dddp3i7SoY1kkY72GTx09q82UISmzqi/d0PLn8J6/oNuqiRrx+24Z5/SvGfHeg+NZZXutZkkXS4Ip5VihkKyzufLJWQZXKqA+1RuP8q+yZfEVjdRl4sbirbN4IBIHH4V+dPxC+PE3/CRnwL8SC0D6deGOa7jgQQRGdd9uQN6yOAPuvsKk8MRXFjIx5LRuztwnNz7nKeLrzwjb2unQ6dqUumhJDqT6XZ3geSRIPmbzkuH2gyou3mPIHJU8g+M6P+0/4U0vxLcy6/oLMiGZkmQlbn7QS+RNvUhdhIjXyyAMkqQDXjVtHZa54k13xD4bsbmSSyYA3V1dC4uGmuDlmSzUIArqGUBWzlslj2+U9aW91XX7l55tl0JHEyMNpVBgAfgAAR1GMHnNTRwcG3FvU3qYycEpJHXeJ/iNqHijxTd3N8815pMt27w2k1w5jXzeApDPkjKjPPRRwM10ui/ErVNH8LyaPYzR2q299PcC1jbaGSVVyRnO3HIG3AINeD30yTXEv2oKs8TLtZMDKYIzxxnoSeppYLy08pVXAnAIQlSGZ2IyWY54AHAFet7OPLyW0PL9rPn529SzqkhglW6kO6Vi5bnlQcbVPJxgHIqCJ7htKMyyDBmO1CcnJ7gHgdvrVS6a4mm8hgGZgMkYJLeue+K7mfwwdO0uy1OaRJobmMMsUfytvZcnPGDt785HFVKrGKSfUzhRnNtxWxzlzr+oDTY9HS9lNqHVli3YCyAfewee5x+NczNEVl8xxtU9McfMOuB+NdTqWmtbi4tROsqQlcMY9hLNzt3dcj361z8jGaw3kFmQg5649eauEotXXUiaknyy6Fq01CS3xHbM2+UOH2k5KsMEfjXX6Fd3NhItxbgrcJkiUrvYLjJ2qxIyM4rzeKeaNy8R2kgKSOOK6jT2t5I+J/Ll+VlUA8PkYG4jGT+X0onEIaM+i/D3j6/XTLg5+ZrmO5WSUok0bx42vgEDAwM4zxnpzj78+D+s+N/HWmWl14VIsNNtIJklZCZpJriTJ+ZSCBswOBk7elfl3Zx2flpOsuJQC8kbIfmXBGM5/pivsn9nL4v3Xw+s5rW7kZ7e9bzPJ2hRvjG3b84G3C5JYHBXpzXlYmlFe8ejSqSasj9ErjwPqVzOq65+9Vo0DMeAWwM/L2r0DwJ8NdD0uOa6SBNzv1I7e1cL4b+JD+LdCW+UwTbxmOa1LNEY/wCEksASfU9Dxjiu+8N6l4imjkgEJCITlj0Yn0q6MYXuctST2Z6d4YXS7DVtoCq2MD869a1q+tU0/cGXha+SrHw9451HxGWs5Fjjbnc2fl59O9exXHg7xULZft995mRjaBgV1UpPlasZyldn/9L9DbTRdPkeSR4lDFj2rf0Dw/p5kZ3jBGT1ryOTxNrc8/8AoMGFzyT2Feg6LrOs3VssUMezAIY45zjk157cednRFpxR0t/o1iLrjai898fLjoPevy9/a3+IujW+vTWNvpdtNd6NLHGPNs4Z5PKZM5888xttKsi7WwRz6V9k+OvGGoaMIb6YyzJE2x54ULrEHwhfAHQElQTxuPoCR+JXx18earca441LdI96Z7p7iRm8y6EhCRNMdzbmRI1U5OQR6dfOlL21TkjpY9KnFUo88jz++8YavFJqFzpTrY2FzgSxWsmzeY+InfnJYMMjgHNeIXl/LLeS3gXMjPl5GYkvnk5/HrWjot6bnV3M5zHsfCnkHPt9RmsfVpBBeSxRgbW7V6tOmo6HDVqOauU5ZvtNz5qIF3YyoHHFem+DvAN9411Yi1hZI2YhSQSobHTgdMkYxXmkUS3V/aWsB5kZIzj1Y81+pXwn8EeLItJtx4I03TxHbJ+8vdTYhHl4+WJFILBe5PGeleXnGNnQhGnS+KXV9EetkeAp15yqVvhj0W7OD8B/seXmqXEF94lVBb4CTRRbl3YxhlOAeec8fSvojxf+zNoeu6Na6bZQrbS6euIcLgEYwN2wqeOo/kc16b4e8W/GjQtRisfEOlaHqVgdqvJprtFIgx94BmbcfbA+tfQKyfbbKC/EXkl1JdD1UgZIzXyOIxFeU1OVW7XbZH2mGw2GUHCNKye91qz8yvEv7JM7WNvMwBS0Dm4lLHc67SVAGCWO4ADOMAnrXxv4y+Gl54MWO6XesBn2TAjIVTkAkZHGcfSv1v8AiH4m+KV9ObPwzJpuiaah2yXF6qyyOc9QGyoXHtnPevnPXfhJ4w8SRXWfGel6lPcK6m0MMaDBHJUopw3oTxmurBZjWpSi3WTj1Tv/AJHDj8toVozUaLT6NW/zPy+v7KOK5KQ8q3I9OvOK0rW3jEqzXEyCFCCEQ5Yn/PU103xQ8JzeDNch06RHhLJ8yyfeDA85wSCPQivO5G3Dev314/CvuKNaNaCqQejPz+vQlRqOnPdHcx6qq3wufJbyy7CJRzgtnhfck/SvU/DNxp2oajYW2q3Vwbj7THCq7gCF2lSitwByRnLAHkcV45eRWcmjW0qExyptYgZKyZwMZ9R1H5V654E1CBNYs9K1WGJdO1VVtbmPJkVPMO1ZgGy0bq2GJHbpWdZJxNaUmnqfqZ8ENZ17V/Ar2tutlLBpg+xMsEbJcrJEo8l3y5BRkGBtGPlr68+F1zef2RG+p4ErDO0nkZr8yfCeq3vwr0DzrxdU0rUbK6iglWS1cWN2pnKxRvcqCjeYu9UPUHoOtfpL4Wae8it7iWB7M3caskZbLIxXOxxgbWHcc1y0GlLUVdNarY998O6hZR6kVJXcQK9J1OeFrcEEcjNfN2jeFNXu9Y8+K5ZFxz9favRtV03XbC2yLozbR90jFd8JPl2MG9T/0/0LtNNWwh/fqvua6XSoorGwa8kKkHLBCcZFed3Wq6prw8mAeVGeDtH9a6fw/p1zJD5V3LnZ8oyewrgk7z0OiL0Pj34meJm0/wAVa1o99dCWbULYtZWnmGJAturTKDjHLpuADHnaSvSvyG+LemWtzb3t8bc29zPdNcRvseOKZJixY7JDhWBwAF4wM85Jr9zfH/wD8B614ztfHWtRE3dtt3ESMqP5Cv5fnKpAdEDNnPQZxxxX4rftR6jpHiTx5J/wht3JNpaSfZIhIrogKudzRhudm4nDNztGTXmYfDuFa99z1J11Oi48uyPnPSrTT4ra3YtItxI75P8ACwCHAAwD1Gc59iOa5zVopjqOH4LEAFuBnjua7bxVZNoVxHp9pew3z2DG2ae3O+GR4mwzxt3UnODxkc9CK47WLv7ZiaTaspP3UG0AdOnTrXsxbep5k0krGj4Nt/P8aaRFKOHu0GMDHX8q/Wu98GeNfESaRa6dqA0rQbZN06wny5ZTtx8rlXReefmRs+3Wvyj+HsAl8beH/LdTK95ENmTnJOMnsP51/Rj8PtBs20O386NXXy16+hFfJcQJvGUrdE99Vv2PsuGUvqlXm79NHt3Pz9+HPw5+KWmeKftup6098kNwv+rEpiNsAQ6Odg3OeNuCFUjpzx98adNqd54enjZCskY+Xd97kHA/Suu1G40nTX+yW6orMMYUDJ/xo0W3kurC7kKlUchACMEdQTXkVf3lXdX1vZWPoaMFTpW1tpa7bf4nwz8RPCviDxrb/ZopLmBbVpWY25YSFnTETqykEeWecY+bp615f4a+CHi23sre8k8Q3L6ta3huTc7bgFoyADCY5maMDqSwyxPGcV9sC5Tw5qU41RCsQPlmRgApOeOenI5Fei6fa6Pf27T2aIGZeWGOa4sPiKkaToKS+5HTicLTlVVdxbfq7fdc/E/9rXSLiz1LSL29O6ZjJC8g/i2jIP19a+QQWjYNjgg/Lmv0V/b3tI7ZtFCBQRcycA5GNpx/Svzul3SToQv+sVcKenNfc8PN/UYJ9Lr8WfnXEkUsfO3W35HbaS9rPo8sNw2FOSpZgAhzlRt69e4p1hcxRXSTwyMNx4DA/Lt6+uRXORYitpreRmEn3QM/KwBz0retbQXVlBPAXEtuWzwCu3r6j/8AVmvWaR5EW3Y+8PCnijWPH3wiuNJtlN1baJqVm95cSSsXt48s4LR7TiMYYB84DkE4FfqF8L/EV34i0q11/V7GSzmDOiRs25GRflSZcAZVhyrEZwa/Mn9hjxTeaX44n0drC1kstUj8i8uXbbMmFbywqkgMmR8/Bxkc84r9jPDtjpMFkbWyiihijyqRxKERR6Ko4A+lclOPvtGldvY67wp4isF1Aws65xXa6zeRzshjYbSOea8Ts/C8bag90jlcHscZ5roru21WxgM4cuiDgHriuqMnynM276n/1P05fw3eabpRv5IREoXds4BA+naquneIPD1vpJLMryuCztnkHsPbFc9498W+Pp/DUktroz28Ey4LyMA6of4tg/rWt8MtG0VPAtut8iST3iu8zOAWJLEdfYdK4HK87R7HXGOiPmz4rWfi74jeFb3Q/DOsNod1JIDFdEZRoslXhkGDlJFOGxX5hfFr9mHWfhZLp+p39/Nq+iwqZL0wRkSvIsW9hAzmRUVmzgMM4HTPNfq5r2v6To8lzHd4jihkbaCcZCnivkj9pHSvFXxKOkaL4V1JbffbzSCBLhViYeW0nmGWMOSxUbBGQevOOTXn1ZWXM5WOug/e5Ern443iWl9qBS0LRWylm8uRs4QcYyByegzgc1zWpoUcKRtAyPY46EGvWvih4Zg8DRado6zTnUpYxd6isiBGjknUMkWfvcJjOcZJJxzXlF2oa1hk37mOeCecegGM/nXp0ZqSUlsclZWbT3GaJqsuh61Ya1B9+xuYbhffynDY/HGK/oi8LfEO2h8F2uqWzb4ZbZJoSOjI67lOfoa/nKIPfvX6i/sifFex8U+CT8M9cmUanoan7KHPM9iTxjPUxE7SP7u014PE+GnOlHEU943T9H/k/wAz6ThXFwhWlQqbS1Xqv+B+R90+EtV1DWbh/Ed/CSWIaFDzsQ/Mu4ZwCeCRWZrfxU8SaTdTxXzh1ckxpBHtRAPu8gnJ9c/pXI2fgrS08Q6f4iup7qW2tmMN1YrdTR2lzE3AMkaMBvXPyuMEcZyOK9dTT/gBFEP7Q8Paktx50eUieWcYX5nIYS/dOec4PHFfLYbB89FONS3e/wDwx91LENT5nSlL/Ck/1v8AgePx+ONS1mznh1q9hlhmO9UuvKiZRznLZ5HpnmuO8NfEDW9K12PStNuU1HS597RyRkSeXtO3yy4OGXnIZfTGa9O8eWXw18Q+Hr/wx4X8Mw2lpqaSW8tzdYku5I3LZWL5mMe5W25zkD0xmuE1K18P+CtOW7kENhp+lWhBOAkcUMa849gBXJjMMqdnGXNI3VSSV5x5F2dr/NbL77+h8N/tseIbrWtb8PWUyhJZUmuCnopYRr/I18XSRus0eBsKIjADqSRkfp1ruvit8Qbv4neP7zxNGpjtgRb2ERH+rtos7Mj1bJZvc1wSSKQ2QAy4IY+nXGK/SMsw0sPhadKe+79W7n5Lm+KjiMXUqx26eiVi0sr3Mwyg3RbmZgOcgd+36V7j8MtI8NeKZ7vTvFkxt5JLQm2mgBEjTj/VJhSAQxOCANxPTpXielRpLI8pJyPvLycqRyT7Z4/GvX/DOnWuq3linhmSaXVrYxMlvHG6tJeNKuI0HXbGoJaRsDnr0z0V37rRx0d7n1z+zf8ADr4geGfG0euTQPbQC8NtLDcRiSWKzKmXewJz8+1cMPuk5OeRX6l+G/EkSM9sPm2knNec/DjTrz4hxaLrDWqWEraFHFdGSZGmSaCU/u1jU/KpLEhm6kAZ5ruLb4e+L9DmuLyW0+02Zdm8xOGC+6+1cNKc2+YVVxb16HpWheJIbu/+zq2cHkV6vfywSWYUY5FfCl/4huvDWsm5hyV3ZI/GvY9F+KUOqw+VIcFFGc11wrx+FmfLJavY/9X9afiJq+nWPh27jbaSYWVQfUivheL4xWnhOx+y3c+1hkAZ6Z9KpfFD4u/6PJH55nkYcKDxXxlewah4pvmubtyATwOwrza9RJprc6YSctFsek+M/G8Xi+7kWFyImY8g9a1vBlwbeS3S5mkn+zktalySIHYBHZQeAWXgk9v15rQfB8KbQx4r2jRPD1lCF6ZGK4pU/aO7LVT2atFn5v8Ax7+FOo3/AMYdcnt7Wa7sI7Q6zdT3JEcRSIKLkxS5wyCVgvHzgHgHivlDxjZWMOraja6YIDaxTtJCIHZkjjb59gZxuO37ue+K/bL4veAl1/QpLTRdFW+OpSxrdSSSF3jKMWWSSJE3Tx7ifMQYbBBByAR8RXX7DfxBn1u3ksrm3bSpLgGRLjKzeU0mSPlU4bbjIdsjpu9OmhNr4h1KkWtD885EYwxRtxgEjPX5uRWj4X1jVvDfiTTda0Sd7W+tbhHikQ4I5wVI7qwyCDwQcGvs34v/ALLXi7wZoM/ia+RYYBqMFlBa2yCbebhtvmKV5VBtA+fozKuTya+ufhj+x/8AB/4W+FYPFfxTuFvPF8+mvPDp19PGojuHRiqxWo+ZnXIBJLAEGt5VlyO66MyjpOPI9bqx638O9ZtvFujRNc7Y7low0sR4BBHJUHt/k1T1z4aTPcmWHWJLeNjkRg5x9MnNcb4fsTpsaLbyFTGF27TgjHpV3XLnxC4LQ3bOuM5PUe1fltaskmtmfs2FnOm7xbOs0DwlYaMjXlxePcSjd88zD5dvoOgHevi/9qvxbc674YvdH0xythEu5mU489kcEn/cHb1PNezXF3rV2sltcXDurnDKMgHHX/JrzLx54Vs9X0uW2uukg25B6A8VWAxcYV4SlrZpmOZ0Z1qNTXVpo/L+3cI+WU9OoOKt+V5is8YOwYGeTyegzivpPwh8H/DSeNrnw74lvmt5jFv06S5hH2BpHbEf2qRXDBc8HC45yTivorw7+xh408SeOdOt9W8mHwfFIWu59P8ALgDbf3hECb5TIjMTGkjMTjkYGBX6jHERqRVSOz2fc/H61P2U3TqaNbo+H/Cuh65qMsj6Fbbj5MkU2SMtlGZgEOM/KMjg4xmvo74I/Bjxlr/hu/8AiV4Pkn0z+xbm3S4luIWZXilbEk9tMuQPLIIlVlZVX5icZx7N8KfBQ8e/tNatJp+kweFk8Nx3cjW8lu4WdI5fssDNEWAbd95mBXPUA9a/S/4f+F9K+Hdjf2dhHCBqs5ubtIIhFbvIVCHbDkqoKjBHfvWVSTlpbQlzUUrPU7v4P+F9Y0Twdp6axa2lrcKmAtoWZTAp/dBmcZY4ycjjnj1r6Ut9RtZbD7JgAsuCK8f0iS91S3WC0YQxooVVHACgYAUdgOwrTTw9q0b+Z9qYH0zU0/cXuoi99T51+J/wZ1+61KW+8NzNOJXZzbso+XJz8pHb61x2neF9W0lTHqtlJaS9ywIViPQ19y+H4Xs5M30hkPqx6VV+JSWF9oE8FtEstwyZjC4zuHSh0k1zItVJKPK3of/W4WGzm1NhJcyFifU12eleHUyuys3S7cnHBr0bSYnBXC14drnZJ2WhraZ4f2gZrvNP0kIAB2qtp8cgUZWvX/BfgrU/Ege5V47WzhO155emeuFUcsf85reFNyfLFHLOaW5zlrYEDg12+ieEfEGtOF02zkdSeZGG2MfV2wK9csNM8FeFIBO8QvJY8brm4AZQfZPuqPzrRHxR0l38hZ44lXgFvkXA9Pwr06WWVGrtHDPGUouzkcNrHhTwr4M8NX2v+N1j1YWUJufsoUNBlOmd3Lc+wH1r8ktMuJvGHxa8X+M9emNxe6jcRrZmQ5EFkY12QxDoqBlccd6/Qv8AaR8Yyx+Cb660i50+8S7hNuY42drhVYjcRn5eOOMV+YtpcXFrcw6lpZzeW4IMLjaZIyQWRh+AII6EA+orqx+QTxGW1IYfSe687dPn+Zllmf08LmdOddXgtH5X6/L8rn0lDEsEW2UfIpBXHHI6VV1G4gcPGZChIPBHIwKz7Xxt4av4oluLpIJ3Cjy5MoQxGeM8cdDg4Bpt1bwXypMkiyRsMqyMDkE+1fhePo1adR06kWn2aP33A1qVWmqlOSa7pmOIowpMS7tx+83b8KxtVsoEt5JrogRLlnJ4AAGa6TV9U8O6CIop7je5PMcYLt07hen44rx7xd4nXVJBHGGtrFMbYmOWduu9wucew5A9fT18g4Yx+YVVyQah1k1ovTu/JfhueFxDxXgcupNTmpT6RT1fr2XmzyPxNMJ7t7oJh7hlSJT1WIEgZ9zkn8favdv2ffjTqvwwfWbbVY21fQIrqMvaMxDRK/ytJC3Yg4JHQivDmgl1DUxMykKhG0ew79a6nwxZFTq8GwSJPC52n+LackE/T0r99wmUUaOHjhoL3Yq39efU/nrHZzWr154mcvek7/8AA/Q/QNfH/wAF/DXimHUNPgTSYPGCi9XU0JlgmuHwskdw+A0cgI6MCuDkGvb7nTl2q275XUOjD7rKRkMp7g9iK/LbTLH7VoM+gXh8y0fDwZ6wuOm3PftX1t+z/wDFy8i0VPhr4uZZ5tNJ/s+Wck+ZDknySTyMfwkHjpXJjOG0481DR9jTB8QtS5MQrrufUOjatcaNIFSTKk969KTWPtVv5r3Ww46DFeURW9p4kSSfQsJLHnfbOfmyDzsJJz9K5i4ku4i0LSum0kFTkEEdjXymJw1XDzcKisfU4bFU60Oem7o9M1bxBHakt9sbj3rmbL4i6TaXbfbp9/HAZ64l9BfUx80rt9Oa569+HNhM2Z2m/WuKTad0dJ//187TYpMjBr0PTFlUDFZ9lDaKBgV1tqsGBt614kYnROXQ7Hw1p9xql/DZmTy1c5kc9EReWb8BXdeMvixFpEC6R4dUR2NvCyK2cEleCSPUnqa4eyujp+g6rfxnDLEsQPoHOW/QV4Ncap9qtry3lf5iLjac90VZFH4gGvt+HMDB03Xmr3Pjc/x1RT9hTdjt4Pibrd5dOsVyzgjlSxII7jGe9RX+vXN9cB3k8tgPurwufXj2rwjwXqMlzO8q4LBsEentXrYiOFYKAfavrHSitUj5ZVG9zE8X3L3kMVtK7Og7Z4x9K8tl0SEEugwSeK9N135ihYZOD26VzLqGUENnOefpSS0NE7nK3fh+HUolgnRJDkAMQC/oRnr6Vw2vaNrelTTzz6gWt72SC0srZSf3ZyC7AEcHYrcivZ7GNPtiBuhPHfJzXK/E2EnUfDTpkILqfd9fJO3+uK4q+CoTalOCbv8A8A7KWNr0ouMJtKxjDScxq79cDBBP9c1nXWhJKcu2fXj8K6+MnIwu7jGeuMU+SINwO3YV1W6HFdvU4e08PW0cudpIxnNbMFpFZTM8a4J57elavlBA29SfQ8VWniBjLKCPx6UEPzHNpv7v7TYMSMAsnUjvxUSu6yR3qny7iE7lYcEEVWF3LZSbuSQB064BplzqEE5MqnacYI6VtGSMZQ7H0b4A+I9zZ7JJpWWUSH5snHQcD+de+/8ACbeHvEMSxapGIZ26XUOBID6kdGH1r84xq5tFljQkHBkB64K49PUVt6Z4/u4tqSSMdpHP0HX+VcOLw1GuuWornbhK9ak+anKx+jmjO+jzpMZVu7KQgLPH0Gezr1U/ofWvXo9MsNRgFxGAcjtX58eCvilNZzKrSbo3O1kblWHoe1fWXhjxxa29vHdxvm0kwME52MRnafb0NfEZrkzw37ynrH8j7LK82Vf93UVpfmf/0PQbTS4yOR+ZrorawjXGP51x8GoS4Azx9K3rW/c8Bv0rx00as3PEzC28HXdpEcSXSzYx1zHGCP1NfJcWsm8tkuY2OX+YrxnJQxsPXv2r6D8carLZ6dpMhPyyz3EWTxklAVz+K4r4vn1ZdA8Q3WnSFhBKxurUHPMZb94nHUqeor9LyNKOCh5/5s/O87beMnb+tEexfCaCE+C11fAZ7i7mVjjJ+RsBa9WWTdGA3yrzxjvXzp8ONek0PQdSsZWL20WrEW6j/aUyEj8CteswaxdahH5gVkGM8ivYjO8UmeR7Np6GlrBV281Tnadtc66gDCnoRW7h5ItkhyQAx4HWsiXH3CBgZ9fz9qnyLRn7XE6snU88DJ/AetcJ4ofXUh0ka1LG0k+otJaRohDxxJHIH3Z6nBXJx34zXq9hbrJcHOPlGQMevH9a818WSjUfiRBaf8s9IsAOenm3J3t+O1VrGrC8otN6fj6m0aloSi0tfw9DSgSQoM85A9c0oABOSR7danKgAHdwDjgY9BTWCopcgDuM8dK1Mio7rsx8x64qhLKNjE9yCen4VYMhkYrhhz15we9UZVyCucEn2PH9KlkmNdzoFO5eexPUj/8AVXKXlx1MRGe3OK6W7kRWI547dMnvjiuP1FfMLDA74HANZTdkVCN2YT6rP9o8pmyNrDkdcj8KiW7MROGPJ6isqcPBdKX4XnPqOD9aha5Vmyh24BAB/WvPnNt6npQgktDvdN16a2dVD4H97+or6r+FvjqJm/s29cPb3ACMHPHsR/SvhVZ2RgSc4OcV2uh6hcMcW8vluOR2yaOdTTpzV0w5XBqcWf/Z",Va={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral"},ja={"xx-small":{size:24,iconSize:14},"x-small":{size:32,iconSize:18},small:{size:40,iconSize:22},medium:{size:56,iconSize:28},large:{size:64,iconSize:32},"x-large":{size:80,iconSize:40},"xx-large":{size:160,iconSize:80}};const Ga="var(--Button-Border-Width, 1px)";function Ua({src:e,defaultPhoto:t=!0,alt:a,initials:o,icon:i,color:n="default",size:l="x-small",customSize:s,clickable:d=!1,onClick:c,insideButton:u=!1,className:p="",sx:m={},...f}){const g=xt(),[x,b]=r(!1),v="custom"===l&&s?{size:s}:ja[l]||ja.medium,y=Va[n]||Va.default,S=e||(!t||o||i?void 0:Qa),k=S&&!x,B=!k&&o,w=!k&&!B,C=d||!!c,T=k?"transparent":"var(--Buttons-"+y+"-Button)",z="var(--Buttons-"+y+"-Border)",A="var(--Buttons-"+y+"-Text)";return de(h,{component:C?"button":"div",type:C?"button":void 0,role:C?"button":"img","aria-label":a||o||"Avatar",tabIndex:C?0:void 0,onClick:C?c:void 0,...g?{"data-ghost-block":"true"}:{},className:"avatar avatar-"+l+" avatar-"+n+(C?" avatar-clickable":"")+(k?" avatar-image":B?" avatar-initials":" avatar-fallback")+(p?" "+p:""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:v.size+"px",height:v.size+"px",borderRadius:"50%",backgroundColor:T,color:A,...g?bt({radius:"50%",animate:g.animate}):{},fontFamily:"inherit",fontWeight:600,overflow:"hidden",flexShrink:0,border:k?Ga+" solid var(--Border)":B?Ga+" solid "+z:"none",...u&&{marginLeft:"2px",marginRight:"2px"},...C&&{cursor:"pointer",outline:"none",padding:0,transition:"background-color 0.15s ease, border-color 0.15s ease","&:hover":{backgroundColor:k?"rgba(0,0,0,0.08)":"var(--Buttons-Default-Hover)"},"&:active":{backgroundColor:k?"rgba(0,0,0,0.15)":"var(--Buttons-Default-Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"}},...m},...f,children:[k&&le(h,{component:"img",src:S,alt:a||"Avatar",onError:()=>b(!0),sx:{width:"100%",height:"100%",objectFit:"cover",borderRadius:"50%"}}),B&&(()=>{const e=function(e){switch(e){case"xx-small":case"x-small":case"small":return Da;case"medium":case"large":default:return Pa;case"x-large":case"xx-large":return Fa}}(l);return le(e,{sx:{color:"inherit",fontSize:(r=v.size,Math.round(7*r/12)+"px"),lineHeight:1,textAlign:"center",...Vt},"aria-hidden":"true",children:o.slice(0,2).toUpperCase()});var r})(),w&&le(Oa,{size:l,sx:{color:"inherit"},children:i||le(he,{})})]})}function Xa({children:r,max:t=5,size:a="medium",spacing:o=-8,className:i="",sx:n={},...l}){const s=e.Children.toArray(r),d=s.slice(0,t),c=s.length-t;return de(h,{role:"group","aria-label":"Avatar group, "+s.length+" avatars",className:"avatar-group "+i,sx:{display:"inline-flex",alignItems:"center","& > *:not(:first-of-type)":{marginLeft:o+"px"},...n},...l,children:[d,c>0&&le(Ua,{initials:"+"+c,size:a,color:"neutral",sx:{border:"2px solid var(--Background)",zIndex:0}})]})}const Ya=["primary","secondary","tertiary","neutral","info","success","warning","error"],qa=e=>e.charAt(0).toUpperCase()+e.slice(1);function Za(){const e={};return Ya.forEach(r=>{e[r]=function(e){const r=qa(e);return{bg:"var(--Icons-"+r+")",text:"var(--Icons-On-"+r+")",border:"none"}}(r),e[r+"-outline"]=function(e){return{bg:"var(--Background)",text:"var(--Text)",border:"1px solid var(--Buttons-"+qa(e)+"-Border)"}}(r)}),e}const Ja=/-light$/,Ka=new Set;const $a={size:"var(--Sizing-2)",padX:"var(--Sizing-Half)",dot:"var(--Sizing-1)"},_a=new Set;function eo({variant:e="primary",size:r,type:t="standard",badgeContent:a,max:o=99,showZero:i=!1,invisible:n=!1,dot:l=!1,overlap:s="rectangular",anchorOrigin:d={vertical:"top",horizontal:"right"},children:c,className:u="",sx:h={},...m}){const f=Za(),g=function(e){const r=String(e||"primary");if(!Ja.test(r))return r;const t=r.replace(Ja,"");return"production"===process.env.NODE_ENV||Ka.has(r)||(Ka.add(r),console.warn('[Badge] variant="'+r+'" — the -light shape was removed. Rendering variant="'+t+'" (solid).')),t}(e),x=f[g]||f.primary;!function(e){void 0!==e&&("production"===process.env.NODE_ENV||_a.has(e)||(_a.add(e),console.warn('[Badge] size="'+e+'" — Badge has one size and the prop was removed. Rendering the 16px counter. For the 8px status dot use \ntype="status".')))}(r);const b="status"===t||l;let v=a;b?v="":"number"==typeof a&&a>o&&(v=o+"+");const y=n||!b&&!i&&(0===a||null==a),S={"& .MuiBadge-badge":{minWidth:b?$a.dot:$a.size,height:b?$a.dot:$a.size,padding:b?0:"0 "+$a.padX,fontFamily:"var(--Badge-Font-Family, var(--Button-Small-Font-Family))",fontWeight:"var(--Badge-Font-Weight, var(--Button-Small-Font-Weight))",lineHeight:"var(--Badge-Line-Height, 12px)",letterSpacing:"var(--Badge-Letter-Spacing, var(--Button-Small-Letter-Spacing))",fontSize:"var(--Badge-Font-Size, 11px)",borderRadius:b?$a.dot:$a.size,backgroundColor:x.bg,color:x.text,border:x.border,boxSizing:"border-box",boxShadow:"0 0 0 1px var(--Background)",transition:"transform 0.2s ease, opacity 0.2s ease"},...h};return le(p,{badgeContent:b?"":v,max:o,showZero:i,invisible:y,overlap:s,anchorOrigin:d,variant:b?"dot":"standard",className:"badge-"+g+" "+u,sx:S,...m,children:c})}const ro={1:[[.3,.5,.7,0,.41],[1.3,2.5,3.4,-1.2,.205]],2:[[.3,.5,.7,0,.41],[.6,1.2,1.6,-1.2,.273],[3,6,8.1,-2.5,.137]],3:[[.3,.5,.7,0,.41],[.3,.7,.9,-.6,.328],[1,2,2.7,-1.2,.246],[2.8,5.6,7.5,-1.9,.164],[6.3,12.5,16.9,-2.5,.082]],4:[[.3,.5,.7,0,.41],[.4,.7,1,-.5,.342],[1.2,2.4,3.2,-1,.273],[3.4,6.9,9.3,-1.5,.205],[7.8,15.6,21.1,-2,.137],[15,30,40.5,-2.5,.068]],5:[[.3,.5,.7,0,.41],[.4,.7,1,-.4,.359],[1.1,2.2,3,-.7,.308],[3.1,6.3,8.5,-1.1,.256],[7.1,14.2,19.2,-1.4,.205],[13.6,27.3,36.8,-1.8,.154],[23.4,46.8,63.2,-2.1,.103],[37,74,99.9,-2.5,.051]]};function to(e){return ro[e].map(function(e){return e[0]+"px "+e[1]+"px "+e[2]+"px "+e[3]+"px rgba(var(--Dropshadow-Color, 20, 20, 20), "+e[4]+")"}).join(", ")}const ao=(e,r)=>0===e?"none":"var(--Effect-Level-"+e+", "+r+")",oo=ao(1,to(1)),io=ao(2,to(2)),no=ao(3,to(3)),lo=ao(4,to(4)),so=ao(5,to(5)),co={0:"none",1:oo,2:io,3:no,4:lo,5:so},uo={"black-white":"BlackWhite"},ho=e=>{return uo[e]||(r=e).charAt(0).toUpperCase()+r.slice(1);var r},po={small:"Sm-",medium:"",large:"Lg-"};function mo(e,r){const t=ho(e),a=(e,r)=>`color-mix(in srgb, rgb(var(${e}, ${r})) calc(var(--Button-Bevel-Opacity, 0.5) * 100%), transparent)`,o="var(--_bevel)",i="calc(-1 * var(--_bevel))",n=po[r],l=void 0===n?(e,r)=>r:(e,r)=>`var(--${n}Button-${e}, ${r})`;return[`inset ${l("Lowlight-Offset-x",i)} ${l("Lowlight-Offset-y",i)} ${l("Lowlight-Blur-Radius",o)} ${l("Lowlight-Spread",i)} `+a(`--Buttons-${t}-Lowlight`,"0 0 0"),`inset ${l("Highlight-Offset-x",o)} ${l("Highlight-Offset-y",o)} ${l("Highlight-Blur-Radius",o)} ${l("Highlight-Spread",i)} `+a(`--Buttons-${t}-Highlight`,"255 255 255")].join(", ")}const fo={small:"var(--Sm-Button-Text-Padding)",medium:"var(--Button-Text-Padding)",large:"var(--Lg-Button-Text-Padding)"},go=e=>"small"===e?"var(--Sm-Button-Avatar-Text, 9px)":"large"===e?"var(--Lg-Button-Avatar-Text, 23px)":"var(--Button-Avatar-Text, 12px)",xo={small:{avatar:16,icon:20},medium:{avatar:20,icon:20},large:{avatar:40,icon:32}};function bo(r,t){if(!e.isValidElement(r))return r;const a=xo[t]||xo.medium;return r.type===Ua?e.cloneElement(r,{size:"custom",customSize:a.avatar,insideButton:!0}):r.type===Oa?e.cloneElement(r,{size:"custom",fontSize:a.icon}):r}const vo=["default","primary","secondary","tertiary","neutral","info","success","warning","error"],yo=ho;function So(e,r=!1,t=!1,a="medium"){const o=yo(e),i=mo(e,a),n=r?oo:"none";return{backgroundColor:`var(--Buttons-${o}-Button)`,color:`var(--Buttons-${o}-Text)`,border:`var(--Button-Border-Width) solid var(--Buttons-${o}-Border)`,boxShadow:"none"===n?i:`${i}, ${n}`,position:"relative",zIndex:1,"& .MuiTouchRipple-rippleVisible":{color:`var(--Buttons-${o}-Hover)`,zIndex:-1},"&:hover":{backgroundColor:`var(--Buttons-${o}-Hover)`,boxShadow:`${i}, ${r?io:oo}`,...!t&&{transform:"translateY(-1px)"}},"&:active":{backgroundColor:`var(--Buttons-${o}-Pressed)`,boxShadow:i,...!t&&{transform:"translateY(0)"}},"&.Mui-focusVisible":{backgroundColor:`var(--Buttons-${o}-Button)`,outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"& .MuiTouchRipple-root":{zIndex:-1},"& .MuiTypography-root":{zIndex:1},"& .MuiButton-icon":{zIndex:1}}}function ko(e,r=!1){return{backgroundColor:"transparent",color:"var(--Text)",border:`var(--Button-Border-Width) solid var(--Buttons-${yo(e)}-Border)`,boxShadow:"none","& .MuiTouchRipple-rippleVisible":{color:"var(--Hover)"},"&:hover":{backgroundColor:"var(--Hover)",boxShadow:"none",...!r&&{transform:"translateY(-1px)"}},"&:active":{backgroundColor:"var(--Pressed)",...!r&&{transform:"translateY(0)"}},"&.Mui-focusVisible":{backgroundColor:"transparent",outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}}}function Bo(e,r=!1){return{backgroundColor:"transparent",color:e?"var(--Hotlink)":"var(--Quiet)",border:"var(--Button-Border-Width) solid transparent",boxShadow:"none",textDecoration:"none",...e&&{"& .btn-text-content":{textDecoration:"underline"}},"& .MuiTouchRipple-rippleVisible":{color:"var(--Hover)"},"&:hover":{backgroundColor:"var(--Hover)",boxShadow:"none",...!r&&{transform:"translateY(-1px)"},...e?{"& .btn-text-content":{textDecoration:"none"}}:{color:"var(--Text)"}},"&:active":{backgroundColor:"var(--Pressed)",...!r&&{transform:"translateY(0)"},...e?{"& .btn-text-content":{textDecoration:"none"}}:{color:"var(--Text)"}},"&.Mui-focusVisible":{backgroundColor:"transparent",outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px",...e&&{"& .btn-text-content":{textDecoration:"none"}}}}}const wo=/-light$/,Co=new Set;const To={small:"var(--Small-Button-Height)",medium:"var(--Button-Height)",large:"var(--Large-Button-Height)"},zo={small:{minHeight:"var(--Small-Button-Height)",minWidth:"var(--Button-Min-Width)",fontSize:"var(--Sm-Button-Text)","--_height":"var(--Small-Button-Height)"},large:{minHeight:"var(--Large-Button-Height)",minWidth:"var(--Lg-Button-Min-Width, var(--Button-Min-Width))",fontSize:"var(--Lg-Button-Text)","--_height":"var(--Large-Button-Height)"},medium:{minHeight:"var(--Button-Height)",minWidth:"var(--Button-Min-Width)",fontSize:"var(--Button-Text)","--_height":"var(--Button-Height)"}};function Ao({variant:r="default",size:t="medium",elevated:a=!1,selected:o=!1,fullWidth:i=!1,disabled:n=!1,iconOnly:l=!1,letterNumber:s=!1,avatar:d=!1,swatch:c=!1,swatchColor:u,startIcon:p,endIcon:x,startDecorator:b,endDecorator:v,badge:y=!1,badgeContent:S,badgeVariant:k="error",badgeSize:B,badgeDot:w=!1,badgeMax:C=99,badgeAnchorOrigin:T={vertical:"top",horizontal:"right"},children:z,className:A="",sx:I={},...R}){const W=l||d||c,D=W||s;if("production"!==process.env.NODE_ENV){const r=R["aria-label"]||R["aria-labelledby"]||R.title;D&&!r&&console.error('[OmniDesign] A <Button> with no visible text has no accessible name. A screen reader announces it as just "button" — or, for letterNumber, reads the characters ("123") as if they were the label. Add aria-label="…" describing the ACTION ("Your account"), not the content ("JD") or the icon ("trash").'),r&&e.Children.forEach(z,e=>{const t=e?.props?.["aria-label"]||e?.props?.titleAccess;t&&console.error('[OmniDesign] <Button> is labelled "'+r+'" but also contains an icon labelled "'+t+"\". A screen reader reads both. Remove the icon's label — the button owns the name.")})}const P=!W,F=i&&!W&&!s,L=function(e){const r=String(e||"default");if(!wo.test(r))return r;const t=r.replace(wo,"");return"production"===process.env.NODE_ENV||Co.has(r)||(Co.add(r),console.warn('[Button] variant="'+r+'" — the -light shape was removed. Rendering variant="'+t+'" (solid). Use a Buttons mode for colour and solid / -outline / ghost / text for shape.')),t}(!d&&!c||"ghost"!==r&&"text"!==r?r:"primary"),H=function(e,r=!1,t=!1,a="medium"){const o={};return vo.forEach(e=>{o[e]=So(e,r,t,a),o[`${e}-outline`]=ko(e,t)}),o["black-white"]=So("black-white",r,t,a),o["black-white-outline"]=ko("black-white",t),o.danger=So("error",r,t,a),o.outline=ko("default",t),o.ghost=Bo(e,t),o.text=Bo(e,t),o}(P,a,o,t),M=H[L]||H.default,E=function({size:e,iconOnly:r,letterNumber:t,avatar:a}){const o=zo[e]||zo.medium,i=To[e]||To.medium;if(r)return{height:i,width:i,minWidth:"unset",minHeight:"unset",fontSize:a?go(e):"small"===e?"0.875rem":o.fontSize,padding:"0","--_height":i};return t?{...o,minHeight:i,minWidth:i,padding:"0"}:{...o,padding:"large"===e?"0 var(--Lg-Button-Padding)":"0 var(--Button-Padding)"}}({size:t,iconOnly:W,letterNumber:s,avatar:d}),N="small"===t?Ha:Ma,O=void 0!==b?bo(b,t):void 0,Q=void 0!==v?bo(v,t):void 0,V=B||("small"===t?"small":"large"===t?"large":"medium"),j=de(se,{children:[le(m,{styles:{'[class*="btn-"] .MuiButton-startIcon, [class*="btn-"] .MuiButton-icon':{marginLeft:"0px !important",marginRight:"2px !important"},'[class*="btn-"] .MuiButton-endIcon':{marginLeft:"2px !important",marginRight:"0px !important"},'[class*="btn-"] .MuiButton-iconSizeSmall .MuiSvgIcon-root, [class*="btn-"] .MuiButton-iconSizeSmall > *':{fontSize:"var(--Sm-Button-Icon) !important"},'[class*="btn-"] .MuiButton-iconSizeMedium .MuiSvgIcon-root, [class*="btn-"] .MuiButton-iconSizeMedium > *':{fontSize:"var(--Button-Icon) !important"},'[class*="btn-"] .MuiButton-iconSizeLarge .MuiSvgIcon-root, [class*="btn-"] .MuiButton-iconSizeLarge > *':{fontSize:"var(--Lg-Button-Icon) !important"}}}),le(f,{size:t,...F&&{fullWidth:!0},disabled:n,startIcon:void 0!==O?O:d?(()=>{if(d&&z){const e=To[t]||To.medium,r=go(t);return le(g,{sx:{width:e,height:e,backgroundColor:"inherit",color:"inherit",fontSize:r},children:z})}return p})():p,endIcon:void 0!==Q?Q:x,className:`btn-${L} ${A}`,role:"button",sx:{borderRadius:d?"var(--Large-Button-Height)":l||c?"small"===t?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius))":"large"===t?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius))":"var(--Button-Icon-Radius)":"small"===t?"var(--Sm-Button-Radius, var(--Button-Radius))":"large"===t?"var(--Lg-Button-Radius, var(--Button-Radius))":"var(--Button-Radius)",textTransform:"none",fontWeight:"inherit",lineHeight:1,whiteSpace:"nowrap",flexShrink:0,transition:"background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))",..."small"===t&&{position:"relative","&::before":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"100%",height:"100%",minWidth:"var(--Target, 0px)",minHeight:"var(--Target, 0px)"}},...E,...M,"&.MuiButton-root":{padding:E.padding??"0 var(--Sizing-1)"},"& .MuiButton-startIcon":{display:"inherit",color:"inherit",marginLeft:"0px !important",marginRight:d?"0px !important":"2px !important"},...d&&{"& .MuiAvatar-root":{fontSize:go(t)}},"& .MuiButton-endIcon":{display:"inherit",color:"inherit",marginLeft:"2px !important",marginRight:"0px !important"},"& .MuiSvgIcon-root":{color:"inherit"},"&:focus-visible, &.Mui-focusVisible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none",backgroundColor:M.backgroundColor,color:M.color,border:M.border,boxShadow:"none"},...c&&{border:"var(--Button-Border-Width) solid var(--Border)",padding:"1px",width:To[t]||To.medium,height:To[t]||To.medium,minWidth:"unset",minHeight:"unset",boxShadow:"none","--_bevel":"0",backgroundColor:"transparent !important","&:hover":{backgroundColor:"transparent !important",boxShadow:"none"},"&:active":{boxShadow:"none"},"&:hover .btn-swatch-inner":{filter:"brightness(0.9)"}},...F&&{width:"100%"},...I},...R,...c?{style:{backgroundColor:"transparent"}}:{},children:d?null:c?le(h,{className:"btn-swatch-inner",style:{width:"100%",height:"100%",borderRadius:"small"===t?"var(--Sm-Button-Icon-Inner-Radius, calc(var(--Button-Icon-Radius) - 2px))":"large"===t?"var(--Lg-Button-Icon-Inner-Radius, calc(var(--Button-Icon-Radius) - 2px))":"var(--Button-Icon-Inner-Radius, calc(var(--Button-Icon-Radius) - 2px))",...u?{backgroundColor:u}:{}}}):(()=>{if(W)return z;if(s){return le("small"===t?La:N,{component:"span",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",padding:"4px",color:"inherit",lineHeight:1,...Vt},children:z})}return"string"==typeof z||"number"==typeof z?le(h,{component:"span",className:"btn-text-content",sx:{display:"inline-flex",alignItems:"center",padding:fo[t]||fo.medium},children:le(N,{component:"span",sx:{color:"inherit",...Vt},children:z})}):z})()})]});return y?le(eo,{variant:k,size:V,badgeContent:S,dot:w,max:C,anchorOrigin:T,showZero:0===S,children:j}):j}const Io=e=>le(Ao,{iconOnly:!0,...e}),Ro=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],Wo=e=>"Default"===e?"var(--Quiet)":"var(--Buttons-"+e+"-Border)";function Do(){const e={};return Ro.forEach(r=>{e[r]=function(e){const r=ho(e);return{color:r,borderToken:Wo(r),icon:"var(--Buttons-"+r+"-Border)"}}(r)}),e}const Po=/-(outline|light|solid)$/,Fo=new Set;function Lo(e){const r=Do();return r[function(e){const r=String(e||"default");if(!Po.test(r))return r;const t=r.replace(Po,"");return"production"===process.env.NODE_ENV||Fo.has(r)||(Fo.add(r),console.warn('[Checkbox] variant="'+r+'" — the -outline/-light/-solid shapes were removed; a Checkbox has one look and `variant` selects colour only. Rendering variant="'+t+'". Update the call site.')),t}(e)]||r.default}const Ho={small:{box:16,icon:12,gap:4,touchTarget:24,LabelComp:ia},medium:{box:20,icon:14,gap:8,touchTarget:24,LabelComp:sa},large:{box:24,icon:18,gap:12,touchTarget:24,LabelComp:pa}};function Mo({size:e,variant:r,checked:t,indeterminate:a}){const o=Lo(r),i=Ho[e]||Ho.medium,n=t||a,l=o.borderToken,s="small"===e?"var(--Sm-Checkbox-Radius, 3.2px)":"large"===e?"var(--Lg-Checkbox-Radius, 4.8px)":"var(--Checkbox-Radius, 4px)";return le(h,{className:"chk-box-icon",sx:{width:i.box,height:i.box,boxSizing:"border-box",borderRadius:s,border:"2px solid "+l,overflow:"hidden",flexShrink:0,transition:"border-color 0.15s ease-in-out"},children:le(h,{sx:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--Background)",color:"var(--Text)",transition:"background-color 0.15s ease-in-out"},children:n&&le(a?pe:ue,{sx:{fontSize:i.icon,color:o.icon}})})})}function Eo({size:e,variant:r}){return le(Mo,{size:e,variant:r,checked:!1,indeterminate:!1})}function No({size:e,variant:r}){return le(Mo,{size:e,variant:r,checked:!0,indeterminate:!1})}function Oo({size:e,variant:r}){return le(Mo,{size:e,variant:r,checked:!1,indeterminate:!0})}function Qo({variant:e="primary",size:r="medium",label:t,checked:a,defaultChecked:o,indeterminate:i=!1,disabled:n=!1,onChange:l,name:s,value:d,className:c="",sx:u={},"aria-label":h,"aria-labelledby":p,"aria-describedby":m,inputProps:f={},...g}){Lo(e);const v=Ho[r]||Ho.medium,y=v.LabelComp,S={...f,...h&&{"aria-label":h},...p&&{"aria-labelledby":p},...m&&{"aria-describedby":m}},k=le(x,{checked:a,defaultChecked:o,indeterminate:i,disabled:n,onChange:l,name:s,value:d,icon:le(Eo,{size:r,variant:e}),checkedIcon:le(No,{size:r,variant:e}),indeterminateIcon:le(Oo,{size:r,variant:e}),className:"chk-"+e+" "+c,inputProps:S,disableRipple:!0,sx:{padding:(v.touchTarget-v.box)/2+"px",minWidth:24,minHeight:24,borderRadius:"var(--Checkbox-Radius, 4px)",color:"inherit",transition:"background-color 0.15s ease-in-out","&.Mui-checked, &.MuiCheckbox-indeterminate":{color:"inherit"},"&:hover":{backgroundColor:"transparent"},"&:hover .chk-box-icon":{borderColor:"var(--Text)"},"&:active .chk-box-icon":{borderColor:"var(--Text)",backgroundColor:"var(--Pressed)"},"&.Mui-disabled .chk-box-icon":{opacity:"var(--Disabled, 0.38)"},"&.Mui-focusVisible .chk-box-icon":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none"},...u},...g});return t?le(b,{control:k,label:le(y,{component:"span",sx:{color:n?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:t}),disabled:n,sx:{marginLeft:0,marginRight:0,gap:v.gap+"px",alignItems:"center","&.Mui-disabled .MuiTypography-root":{color:"var(--Text-Quiet)",opacity:.6}}}):k}const Vo=["primary","secondary","tertiary","neutral","info","success","warning","error"];function jo(e){const r=(t=e).charAt(0).toUpperCase()+t.slice(1);var t;return{bg:"var(--Hover)",border:"var(--Buttons-"+r+"-Border)",hoverBorder:"var(--Buttons-"+r+"-Hover)",pressedBorder:"var(--Buttons-"+r+"-Pressed)",text:"var(--Text)",focusBg:"var(--Hover)"}}const Go={small:{height:"var(--Small-Button-Height)",fontSize:"13px",labelSize:"13px",padding:"4px var(--Input-Padding, 8px)",iconSize:16},medium:{height:"var(--Button-Height)",fontSize:"15px",labelSize:"15px",padding:"4px var(--Input-Padding, 12px)",iconSize:18},large:{height:"var(--Large-Button-Height)",fontSize:"17px",labelSize:"17px",padding:"4px var(--Input-Padding, 16px)",iconSize:20}},Uo={small:{height:"48px",fontSize:"13px",labelSize:"11px",padding:"20px var(--Input-Padding, 12px) 4px",padTop:20,padBottom:4,leftPad:12,iconSize:16},medium:{height:"56px",fontSize:"15px",labelSize:"12px",padding:"22px var(--Input-Padding, 14px) 6px",padTop:22,padBottom:6,leftPad:14,iconSize:18},large:{height:"64px",fontSize:"17px",labelSize:"14px",padding:"24px var(--Input-Padding, 16px) 6px",padTop:24,padBottom:6,leftPad:16,iconSize:20}},Xo={small:{resting:"Body-Small",shrunk:"Label-ExtraSmall"},medium:{resting:"Body-Medium",shrunk:"Label-Small"},large:{resting:"Body-Large",shrunk:"Label-Medium"}},Yo=e=>({fontSize:"var(--"+e+"-Font-Size)",fontWeight:"var(--"+e+"-Font-Weight)",letterSpacing:"var(--"+e+"-Letter-Spacing)"});const qo={info:xe,success:me,warning:fe,error:ge},Zo={info:{border:"var(--Buttons-Info-Border)",hoverBorder:"var(--Buttons-Info-Hover)",pressedBorder:"var(--Buttons-Info-Pressed)",icon:"var(--Icons-Info)",text:"var(--Hotlink)"},success:{border:"var(--Buttons-Success-Border)",hoverBorder:"var(--Buttons-Success-Hover)",pressedBorder:"var(--Buttons-Success-Pressed)",icon:"var(--Icons-Success)",text:"var(--Text-Success)"},warning:{border:"var(--Buttons-Warning-Border)",hoverBorder:"var(--Buttons-Warning-Hover)",pressedBorder:"var(--Buttons-Warning-Pressed)",icon:"var(--Icons-Warning)",text:"var(--Text-Warning)"},error:{border:"var(--Buttons-Error-Border)",hoverBorder:"var(--Buttons-Error-Hover)",pressedBorder:"var(--Buttons-Error-Pressed)",icon:"var(--Icons-Error)",text:"var(--Text-Error)"}};function Jo({variant:e="primary-outline",size:r="medium",label:a,labelPosition:o="standard",placeholder:i,helperText:n,validation:l,validationMessage:s,disabled:d=!1,id:c,value:u,defaultValue:p,onChange:m,name:f,type:g="text",multiline:x=!1,rows:b,maxRows:k,resize:B="vertical",startAdornment:w,endAdornment:C,fullWidth:T=!1,className:z="",sx:A={},"aria-label":I,"aria-labelledby":R,"aria-describedby":W,"aria-required":D,"aria-invalid":P,inputProps:F={},...L}){const H=function(){const e={};return Vo.forEach(r=>{e[r+"-outline"]=jo(r)}),e.outline=jo("primary"),e}(),M=H[e]||H["primary-outline"],E="floating"===o;"production"!==process.env.NODE_ENV&&/-light$|^light$/.test(e)&&console.warn('[Input] variant="'+e+'" was removed. It differed from "'+e.replace(/-?light$/,"")+'-outline" only by a token no design system publishes, so the two rendered identically. For a lighter field use data-surface="Surface-Brightest" on its container.');const N=E?Uo[r]||Uo.medium:Go[r]||Go.medium,O=t(),Q=c||O,{labelX:V,padX:j,restingY:G,shrunkY:U}=function(e,r){const t=parseInt(e.height,10)||56,a=parseInt(e.fontSize,10)||15,o="var(--Input-Padding, "+(e.leftPad||14)+"px)",i=(e.iconSize||18)+8;return{labelX:r?"calc("+o+" + "+i+"px)":o,padX:o,clearance:r?i:0,restingY:Math.round((t-1.4375*a)/2),shrunkY:6}}(N,!!w),X=Xo[r]||Xo.medium,Y="var(--Text)",q=l?Zo[l]:null,Z=l?qo[l]:null,J=q||M,K=J.border,$={...F,...I&&{"aria-label":I},...R&&{"aria-labelledby":R},...W&&{"aria-describedby":W},...D&&{"aria-required":D},...P&&{"aria-invalid":P}};return de(h,{className:"inp-"+e+" "+z,sx:{width:T?"100%":"auto",...A},children:[(()=>{if(!a||E)return null;return le("small"===r?ia:sa,{component:"label",htmlFor:Q,sx:{display:"block",marginBottom:"6px",color:d?"var(--Quiet)":"var(--Text)",fontSize:N.labelSize,fontWeight:500,opacity:d?"var(--Disabled, 0.38)":1},children:a})})(),le(h,{sx:{border:"1px solid "+K,borderRadius:"small"===r?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===r?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",transition:"border-color 0.15s ease-in-out",boxShadow:"none",...!d&&{"&:hover":{borderColor:J.hoverBorder},"&:active":{borderColor:J.pressedBorder}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{children:le(v,{value:u,defaultValue:p,onChange:m,name:f,type:g,disabled:d,placeholder:i,id:Q,multiline:x,rows:b,maxRows:k,fullWidth:!0,label:E?a:void 0,variant:"outlined",size:"small"===r?"small":"medium",inputProps:$,InputProps:{startAdornment:w?le(y,{position:"start",children:w}):void 0,endAdornment:(()=>{if(C)return le(y,{position:"end",children:C})})()},sx:{"& .MuiOutlinedInput-root":{backgroundColor:"var(--Hover)",color:"var(--Quiet)",fontSize:N.fontSize,minHeight:x?"auto":N.height,padding:0,borderRadius:0,transition:"color 0.15s ease-in-out",...E&&{alignItems:"stretch"},"& fieldset":{border:"none"},"&.Mui-focused":{color:Y},"&:not(.Mui-focused) .MuiOutlinedInput-input:not(:placeholder-shown)":{color:Y},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"},"& input":{padding:N.padding,color:"inherit","&::placeholder":{color:"var(--Quiet)",opacity:1}},"& textarea":{padding:N.padding,color:"inherit",resize:B,"&::placeholder":{color:"var(--Quiet)",opacity:1}},"& .MuiInputAdornment-root":{color:"var(--Quiet)"},...E&&{"& .MuiInputAdornment-root":{maxHeight:"none",height:"auto",alignSelf:"stretch",alignItems:"center",paddingTop:N.padTop+"px",paddingBottom:N.padBottom+"px",marginTop:0,marginBottom:0},"& .MuiInputAdornment-positionStart":{marginLeft:j,marginRight:"8px",width:N.iconSize+"px",minWidth:N.iconSize+"px",justifyContent:"center"},"& .MuiInputAdornment-positionEnd":{marginRight:"8px"},...w&&{"& input":{paddingLeft:0},"& textarea":{paddingLeft:0}}}},"& .MuiInputLabel-root":{color:"var(--Quiet)",fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",...Yo(X.resting),transformOrigin:"top left",transition:"transform 0.15s ease, font-size 0.15s ease, color 0.15s ease",transform:"translate("+V+", "+G+"px)","&.MuiInputLabel-shrink":{transform:"translate("+V+", "+U+"px)",...Yo(X.shrunk),color:"var(--Quiet)"},"&.Mui-focused":{color:Y},"&.Mui-disabled":{color:"var(--Quiet)",opacity:"var(--Disabled, 0.38)"}},"& .MuiOutlinedInput-notchedOutline legend":{display:"none"},"& .MuiOutlinedInput-notchedOutline":{top:0},"& .MuiOutlinedInput-root.Mui-focused":{outline:"none"},"& .MuiOutlinedInput-root:focus-within":{outline:"none"}},...L})})}),l&&s?de(h,{sx:{display:"flex",alignItems:"center",gap:"6px",marginTop:"4px",marginLeft:"2px"},children:[Z&&le(Z,{sx:{fontSize:N.iconSize,color:q.icon,flexShrink:0}}),le(S,{sx:{color:q.text,fontSize:"small"===r?"11px":"12px",margin:0},children:s})]}):n?le(S,{sx:{color:"var(--Quiet)",fontSize:"small"===r?"11px":"12px",marginTop:"4px",marginLeft:"2px"},children:n}):null]})}const Ko=e=>e.charAt(0).toUpperCase()+e.slice(1),$o={small:{height:"var(--Small-Button-Height)",fontSize:"13px",padding:"4px 8px",iconSize:16},medium:{height:"var(--Button-Height)",fontSize:"14px",padding:"6px 12px",iconSize:18},large:{height:"var(--Large-Button-Height)",fontSize:"16px",padding:"8px 16px",iconSize:20}},_o={small:{height:48,fontSize:"13px",padding:"20px 12px 4px",labelSize:"11px",leftPad:12},medium:{height:56,fontSize:"14px",padding:"22px 14px 6px",labelSize:"12px",leftPad:14},large:{height:64,fontSize:"16px",padding:"24px 16px 6px",labelSize:"14px",leftPad:16}};function ei({options:t=[],value:n,defaultValue:l="",onChange:s,label:d,labelPosition:c="top",size:u="medium",variant:p="outline",color:m="primary",selectionStyle:f="default",mode:g="standard",placeholder:x="Select…",showDividers:b=!1,showColorLabels:v=!0,startDecoration:y,disabled:S=!1,fullWidth:k=!1,className:B="",sx:w={},...C}){const T="default"===m?"primary":m,z=Ko(T),A="var(--Buttons-"+z+"-Border)";"production"!==process.env.NODE_ENV&&("light"===p&&console.warn('[Select] variant="light" was removed and had never done anything — it was read by no code path. Rendering outline. For a lighter Select, use data-surface="Surface-Brightest" on its container.'),"light"===f&&console.warn('[Select] selectionStyle="light" was removed with the -Light button shades. It named --Buttons-{C}-Light-{Button,Text,Border}, which no design system publishes, and carried no fallbacks — a selected option rendered with no fill, no text colour and no border. Rendering default.'));const I="light"===p?"outline":p,R="light"===f?"default":f,W="default"===m?"var(--Text)":"var(--Text-"+z+")",[D,P]=r(l),[F,L]=r(!1),[H,M]=r(!1),[E,N]=r({top:0,left:0,width:0,direction:"down"}),O=a(null),Q=a(null),[V,j]=r(null),[G,U]=r(null),X=void 0!==n,Y=X?n:D,q=t.flatMap(e=>e&&Array.isArray(e.options)?e.options:[e]).find(e=>("string"==typeof e?e:e.value)===Y),Z=q?"string"==typeof q?q:q.label:"",J=""!==Y&&null!=Y,K="floating"===c,$="top"===c,_="color"===g,ee=K?_o[u]||_o.medium:$o[u]||$o.medium,re=o(e=>{X||P(e),s?.(e),L(!1),Q.current?.focus()},[X,s]),te=o(()=>{if(!Q.current)return{top:0,left:0,width:0};const e=Q.current.getBoundingClientRect(),r=window.innerHeight-e.bottom,t=e.top,a=r>=240||r>=t?"down":"up";return{top:"down"===a?e.bottom+4:void 0,bottom:"up"===a?window.innerHeight-e.top+4:void 0,left:e.left,width:e.width,direction:a}},[]),ae=o(()=>{S||L(e=>(e||N(te()),!e))},[S,te]);i(()=>{if(!F)return;const e=e=>{!O.current||O.current.contains(e.target)||e.target.closest("[data-select-dropdown]")||L(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[F]),i(()=>{if(!F||!Q.current)return;const e=Q.current.closest("[data-theme]"),r=Q.current.closest("[data-surface]");j(e?.getAttribute("data-theme")||null),U(r?.getAttribute("data-surface")||null);const t=()=>N(te());return window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}},[F,te]);const oe=a(null),ie=o(e=>{const r=oe.current;if(!r)return;const t=r.querySelectorAll('[role="option"]');if(!t.length)return;const a=r.querySelector('[role="option"]:focus');let o=Array.prototype.indexOf.call(t,a);o="down"===e?o<t.length-1?o+1:0:o>0?o-1:t.length-1,t[o].focus()},[]);i(()=>{F&&requestAnimationFrame(()=>{const e=oe.current;if(!e)return;const r=e.querySelector('[aria-selected="true"]'),t=e.querySelector('[role="option"]');(r||t)?.focus()})},[F]);const ne=F?be.createPortal(le(h,{ref:oe,"data-select-dropdown":!0,"data-theme":V||void 0,role:"listbox","aria-label":d||"Options",sx:{position:"fixed",top:E.top??"unset",bottom:E.bottom??"unset",left:E.left,width:E.width+"px",backgroundColor:"var(--Hover)",border:"1px solid var(--Buttons-Default-Border)",borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:"none",zIndex:99999,maxHeight:"240px",overflowY:"auto",py:.5},children:(()=>{const r=(r,t,a)=>{const o="string"==typeof r?r:r.value,i="string"==typeof r?r:r.label,n="object"==typeof r?r.color:null,l=o===Y,s=function(e,r,t){const a=Ko(t||"default");return r?{backgroundColor:"var(--Buttons-"+a+"-Button)",color:"var(--Buttons-"+a+"-Text)",border:"1px solid var(--Buttons-"+a+"-Border)",fontWeight:600}:{color:"var(--Text)",backgroundColor:"transparent",border:"1px solid transparent"}}(0,l,T),d=t===a-1;return de(e.Fragment,{children:[de(h,{role:"option",tabIndex:-1,"aria-selected":l,"aria-label":_&&!v?i:void 0,onClick:()=>re(o),onKeyDown:e=>((e,r)=>{if("Enter"===e.key||" "===e.key)return e.preventDefault(),void re(r);"ArrowDown"===e.key&&(e.preventDefault(),ie("down")),"ArrowUp"===e.key&&(e.preventDefault(),ie("up")),"Escape"===e.key&&(L(!1),Q.current?.focus())})(e,o),sx:{display:"flex",alignItems:"center",gap:1,px:1.5,py:0,mx:.5,my:"1px",minHeight:ee.height,cursor:"pointer",fontSize:ee.fontSize,fontFamily:"inherit",borderRadius:"4px",outline:"none",...s,transition:"background-color 0.1s ease","&:hover":l?{}:{backgroundColor:"var(--Buttons-"+z+"-Hover)",color:"var(--Buttons-"+z+"-Text)"},"&:active":l?{}:{backgroundColor:"var(--Buttons-"+z+"-Pressed)",color:"var(--Buttons-"+z+"-Text)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:[_&&n&&le(h,{sx:{height:"calc("+ee.height+" - 8px)",width:"calc("+ee.height+" - 8px)",borderRadius:"var(--Input-Swatch-Radius, var(--Button-Radius))",backgroundColor:n,border:"1px solid "+(l?"var(--Buttons-"+z+"-Border)":"var(--Border)"),flexShrink:0}}),(!_||v)&&le(ia,{style:{flex:1,color:"inherit",fontWeight:"inherit"},children:i}),l&&le(Oa,{size:"small",sx:{opacity:.6,flexShrink:0},children:le(ue,{})})]}),b&&!d&&le(h,{"aria-hidden":"true",sx:{height:"1px",backgroundColor:"var(--Border)",mx:1,my:.25}})]},o)};return t.map((a,o)=>{if(a&&Array.isArray(a.options)){const t=a.options;return de(e.Fragment,{children:[le(h,{role:"presentation",sx:{px:1.5,pt:0===o?.75:1.25,pb:.5,fontSize:"11px",fontFamily:"inherit",fontWeight:700,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--Text-Quiet)"},children:a.label}),t.map((e,a)=>r(e,a,t.length))]},"group-"+(a.label||o))}return r(a,o,t.length)})})()}),document.body):null;return de(h,{ref:O,className:"select-wrapper select-"+u+" select-label-"+c+" select-style-"+R+" select-variant-"+I+(F?" select-open":"")+(S?" select-disabled":"")+(B?" "+B:""),sx:{position:"relative",width:k?"100%":"auto",display:"inline-block",fontFamily:"inherit",...w},...C,children:[$&&d&&le("small"===u?ia:sa,{component:"label",style:{display:"block",marginBottom:"6px",color:S?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:S?"var(--Disabled, 0.38)":1},children:d}),le(h,{sx:{border:"1px solid "+A,borderRadius:"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",transition:"border-color 0.15s ease",boxShadow:"none","&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{children:de(h,{ref:Q,component:"button",type:"button",role:"combobox","aria-expanded":F,"aria-haspopup":"listbox","aria-label":d||x,tabIndex:S?-1:0,onClick:ae,onKeyDown:e=>"Escape"===e.key?(L(!1),void Q.current?.focus()):"Enter"===e.key||" "===e.key?(e.preventDefault(),void ae()):F||"ArrowDown"!==e.key&&"ArrowUp"!==e.key?(F&&"ArrowDown"===e.key&&(e.preventDefault(),ie("down")),void(F&&"ArrowUp"===e.key&&(e.preventDefault(),ie("up")))):(e.preventDefault(),void L(!0)),onFocus:()=>M(!0),onBlur:()=>M(!1),sx:{display:"flex",alignItems:"center",gap:1,width:"100%",minWidth:140,height:ee.height,padding:ee.padding,backgroundColor:"var(--Hover)",border:"none",borderRadius:0,color:J||F?W:"var(--Quiet)",fontSize:ee.fontSize,fontFamily:"inherit",cursor:S?"not-allowed":"pointer",opacity:S?"var(--Disabled, 0.38)":1,outline:"none",textAlign:"left",position:"relative",transition:"color 0.15s ease"},children:[y&&le(h,{sx:{display:"flex",alignItems:"center",flexShrink:0,color:"var(--Text-Quiet)"},children:y}),K&&d&&le(h,{sx:{position:"absolute",top:J||F?"6px":"50%",left:(ee.leftPad||14)+(y?32:0)+"px",transform:J||F?"scale(0.75)":"translateY(-50%)",transformOrigin:"top left",color:F?W:"var(--Quiet)",fontSize:ee.fontSize,fontWeight:400,pointerEvents:"none",transition:"top 0.15s ease, transform 0.15s ease, color 0.15s ease"},children:d}),le(h,{sx:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",...K&&{mt:J||F?"8px":0}},children:_&&J?de(h,{sx:{display:"flex",alignItems:"center",gap:1},children:[le(h,{sx:{height:"calc("+ee.height+" - 8px)",width:"calc("+ee.height+" - 8px)",borderRadius:"var(--Input-Swatch-Radius, var(--Button-Radius))",backgroundColor:q&&"string"!=typeof q&&q.color||"transparent",border:"1px solid var(--Border)",flexShrink:0}}),v&&le(ia,{style:{color:"inherit",padding:0},children:Z})]}):le(ia,{style:{color:"inherit",padding:0},children:J?Z:K&&d?"":x})}),le(ve,{sx:{fontSize:(ee.iconSize||18)+"px",color:"var(--Text-Quiet)",transform:F?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease",flexShrink:0}})]})})}),ne]})}const ri={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},ti={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},ai={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},oi={small:{px:"var(--Sm-Button-Padding, 8px)",fontSize:"var(--Sm-Button-Text, 14px)",iconSize:"var(--Sm-Button-Icon, 20px)",textPad:"var(--Sm-Button-Text-Padding, 4px)",indicatorThickness:"2px",minHeight:"var(--Sm-Button-Height, 24px)"},medium:{px:"var(--Button-Padding, 8px)",fontSize:"var(--Button-Text, 16px)",iconSize:"var(--Button-Icon, 20px)",textPad:"var(--Button-Text-Padding, 4px)",indicatorThickness:"2px",minHeight:"var(--Button-Height, 32px)"},large:{px:"var(--Lg-Button-Padding, 16px)",fontSize:"var(--Lg-Button-Text, 20px)",iconSize:"var(--Lg-Button-Icon, 32px)",textPad:"var(--Lg-Button-Text-Padding, 8px)",indicatorThickness:"2px",minHeight:"var(--Lg-Button-Height, 56px)"}},ii=l({value:0,setValue:()=>{},variant:"standard",color:"primary",size:"medium",orientation:"horizontal",scrollable:!1,tabsId:""}),ni=()=>n(ii);function li({children:e,defaultValue:a=0,value:i,onChange:n,variant:l="standard",color:s="primary",size:d="medium",orientation:c="horizontal",scrollable:u=!1,className:p="",sx:m={},...f}){const[g,x]=r(a),b=void 0!==i,v=b?i:g,y=t(),S=o(e=>{b||x(e),n?.(e)},[b,n]);return le(ii.Provider,{value:{value:v,setValue:S,variant:l,color:s,size:d,orientation:c,scrollable:u,tabsId:y},children:le(h,{className:"tabs tabs-"+c+" tabs-"+d+" tabs-"+l+("standard"!==l?" tabs-"+s:"")+(u?" tabs-scrollable":"")+" "+p,sx:{display:"flex",flexDirection:"horizontal"===c?"column":"row",width:"100%",overflow:"hidden",...m},...f,children:e})})}function si({children:t,rounded:n=!1,className:l="",sx:s={},...d}){const{variant:c,color:u,size:p,orientation:m,scrollable:f,tabsId:g}=ni(),x=a(null),b=a(null),[v,y]=r(!1),[S,k]=r(!1),B="horizontal"===m,w="standard"===c,C="light"===c,T="dark"===c,z=w?void 0:"solid"===c?ri[u]:C?ti[u]:T?ai[u]:void 0,A=w?void 0:T?"Surface-Dimmest":C?"Surface-Brightest":"Surface",I=o(()=>{const e=b.current;e&&f&&B&&(y(e.scrollLeft>1),k(e.scrollLeft<e.scrollWidth-e.clientWidth-1))},[f,B]);i(()=>{I();const e=b.current;if(!e||!f)return;e.addEventListener("scroll",I,{passive:!0});const r=new ResizeObserver(I);return r.observe(e),()=>{e.removeEventListener("scroll",I),r.disconnect()}},[f,I]);const R=e=>{const r=b.current;if(!r)return;const t=.6*r.clientWidth;r.scrollBy({left:e*t,behavior:"smooth"})},W={display:"inline-flex",alignItems:"center",justifyContent:"center",width:"28px",minWidth:"28px",border:"none",backgroundColor:"transparent",color:"var(--Text-Quiet)",cursor:"pointer",fontSize:"16px",fontFamily:"inherit",lineHeight:1,flexShrink:0,transition:"color 0.15s ease, background-color 0.15s ease","&:hover":{color:"var(--Text)",backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"default","&:hover":{backgroundColor:"transparent",color:"var(--Text-Quiet)"}}},D=e.Children.toArray(t).filter(e.isValidElement).map((r,t)=>e.cloneElement(r,{_index:t,key:r.key||t}));return de(h,{ref:x,"data-theme":z||void 0,"data-surface":A||void 0,className:"tab-list tab-list-"+c+" tab-list-"+p+" tab-list-"+m+(f?" tab-list-scrollable":"")+" "+l,onKeyDown:e=>{const r=f?b.current:x.current,t=r?.querySelectorAll('[role="tab"]:not([aria-disabled="true"])');if(!t?.length)return;const a=Array.from(t).indexOf(document.activeElement);if(a<0)return;const o=B?"ArrowRight":"ArrowDown",i=B?"ArrowLeft":"ArrowUp";if(e.key===o){e.preventDefault();const r=t[(a+1)%t.length];r.focus(),f&&r.scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})}else if(e.key===i){e.preventDefault();const r=t[(a-1+t.length)%t.length];r.focus(),f&&r.scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})}else"Home"===e.key?(e.preventDefault(),t[0].focus(),f&&t[0].scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})):"End"===e.key&&(e.preventDefault(),t[t.length-1].focus(),f&&t[t.length-1].scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"}))},sx:{display:"flex",flexDirection:B?"row":"column",gap:0,position:"relative",backgroundColor:"var(--Background)",padding:"4px",overflow:"hidden",borderRadius:n?"var(--Style-Border-Radius)":0,...s},...d,children:[f&&B&&le(h,{component:"button","aria-label":"Scroll tabs left",onClick:()=>R(-1),disabled:!v,className:"tab-list-scroll-btn tab-list-scroll-btn-left",sx:W,children:"‹"}),le(h,f&&B?{ref:b,role:"tablist","aria-orientation":m,className:"tab-list-scroll-container",sx:{display:"flex",flexDirection:"row",overflowX:"auto",scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},flex:1,minWidth:0},children:D}:{ref:b,role:"tablist","aria-orientation":m,sx:{display:"flex",flexDirection:B?"row":"column",flex:1},children:D}),f&&B&&le(h,{component:"button","aria-label":"Scroll tabs right",onClick:()=>R(1),disabled:!S,className:"tab-list-scroll-btn tab-list-scroll-btn-right",sx:W,children:"›"})]})}function di({children:e,value:r,_index:t=0,disabled:a=!1,startDecorator:o,endDecorator:i,iconOnly:n=!1,className:l="",sx:s={},...d}){const{value:c,setValue:u,variant:p,color:m,size:f,orientation:g,tabsId:x}=ni(),b=oi[f]||oi.medium,v="horizontal"===g,y="standard"===p,S="light"===p,k="dark"===p,B=void 0!==r?r:t,w=c===B,C=y?"var(--Buttons-"+({default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"}[m]||"Default")+"-Border)":"var(--Text)";return de(h,{component:"button",role:"tab",id:"tab-"+x+"-"+B,"data-theme":(y?void 0:"solid"===p?ri[m]:S?ti[m]:k?ai[m]:void 0)||void 0,"data-surface":(y?void 0:k?"Surface-Dimmest":S?"Surface-Brightest":"Surface")||void 0,"aria-selected":w,"aria-controls":"tabpanel-"+x+"-"+B,"aria-disabled":a||void 0,tabIndex:w?0:-1,onClick:()=>{a||u(B)},className:"tab tab-"+f+(w?" tab-selected":"")+(a?" tab-disabled":"")+(n?" tab-icon-only":"")+" "+l,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:"2px",padding:"0 "+(n?"0":b.px),minHeight:b.minHeight,fontSize:b.fontSize,fontFamily:"inherit",fontWeight:500,lineHeight:1.3,color:w?"var(--Text)":"var(--Quiet)",backgroundColor:"transparent",border:"none",borderBottom:v?w?b.indicatorThickness+" solid "+C:b.indicatorThickness+" solid transparent":"none",borderRight:v?"none":w?b.indicatorThickness+" solid "+C:b.indicatorThickness+" solid transparent",cursor:a?"not-allowed":"pointer",opacity:a?"var(--Disabled, 0.38)":1,position:"relative",outline:"none",transition:"color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease",flexShrink:0,whiteSpace:"nowrap",...!a&&{"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"}},...s},...d,children:[o&&le(h,{className:"tab-start-decorator",sx:{display:"inline-flex",fontSize:b.iconSize,lineHeight:1,flexShrink:0},children:o}),!n&&e&&(()=>{const r="small"===f?ga:ia;return le(h,{className:"tab-label",sx:{display:"inline-flex",alignItems:"center",padding:"4px "+b.textPad},children:le(r,{style:{color:"inherit",fontWeight:"inherit"},children:e})})})(),i&&le(h,{className:"tab-end-decorator",sx:{display:"inline-flex",fontSize:b.iconSize,lineHeight:1,flexShrink:0},children:i})]})}function ci({children:e,value:r,className:t="",sx:a={},...o}){const{value:i,size:n,tabsId:l}=ni();return i===r?le(h,{role:"tabpanel",id:"tabpanel-"+l+"-"+r,"aria-labelledby":"tab-"+l+"-"+r,className:"tab-panel tab-panel-"+n+" "+t,sx:{paddingTop:"16px",fontSize:(oi[n]||oi.medium).fontSize,fontFamily:"inherit",color:"var(--Text)",...a},...o,children:e}):null}const ui=e.forwardRef(function({theme:e=null,surface:r="Surface",children:t,minHeight:a=160,sx:o={}},i){return le(h,{ref:i,"data-theme":e||void 0,"data-surface":r,sx:{p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:a,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",...o},children:t})}),hi="__null__",pi=[{label:"Default",value:hi},{label:"Primary",value:"Primary"},{label:"Secondary",value:"Secondary"},{label:"Tertiary",value:"Tertiary"},{label:"Neutral",value:"Neutral"},{label:"Info",value:"Info"},{label:"Success",value:"Success"},{label:"Warning",value:"Warning"},{label:"Error",value:"Error"}],mi=["Surface-Dimmest","Surface-Dim","Surface","Surface-Bright","Surface-Brightest","Container","Container-Highest","Container-High","Container-Low","Container-Lowest"];function fi({theme:e=null,onThemeChange:r,surface:t="Surface",onSurfaceChange:a,surfaces:o=mi,size:i="small"}){const n=o.map(e=>({value:e,label:e}));return de(k,{direction:"row",spacing:1,sx:{alignItems:"center"},children:[le(h,{sx:{width:160},children:le(ei,{options:pi,value:e??hi,onChange:e=>r?.(e===hi?null:e),labelPosition:"none",size:i,variant:"outline",color:"default","aria-label":"Background theme",fullWidth:!0})}),le(h,{sx:{width:180},children:le(ei,{options:n,value:t,onChange:e=>a?.(e),labelPosition:"none",size:i,variant:"outline",color:"default","aria-label":"Surface",fullWidth:!0})})]})}function gi(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var xi,bi={exports:{}},vi={exports:{}},yi={};var Si,ki,Bi,wi,Ci,Ti,zi,Ai,Ii,Ri,Wi,Di,Pi,Fi,Li={};
1
+ import e,{useState as r,useId as t,useRef as a,useCallback as i,useEffect as o,useContext as n,createContext as l,useMemo as s,forwardRef as d,Children as c,isValidElement as u}from"react";import{Box as h,Badge as p,GlobalStyles as m,Button as f,Avatar as g,Checkbox as x,FormControlLabel as b,TextField as v,InputAdornment as y,FormHelperText as S,Stack as k,Tooltip as B,Typography as w,Grid as C,Alert as T,Switch as z,ToggleButton as A,Radio as I,FormControl as W,FormLabel as R,RadioGroup as D,Slider as P,Chip as F,Container as L,Tabs as H,Tab as M,Paper as E,Dialog as N,DialogTitle as O,DialogContent as Q,DialogContentText as V,DialogActions as j,Zoom as G,Grow as U,Fade as X,Slide as Y,List as Z,ListItem as q,ListItemButton as J,ListItemIcon as K,ListItemText as $,Collapse as _,Divider as ee,Drawer as re,useTheme as te,useMediaQuery as ae,AppBar as ie,Toolbar as oe,ToggleButtonGroup as ne}from"@mui/material";import{jsx as le,Fragment as se,jsxs as de}from"react/jsx-runtime";import ce from"@mui/icons-material/ContentCopy";import ue from"@mui/icons-material/Check";import he from"@mui/icons-material/Remove";import pe from"@mui/icons-material/CheckCircleOutline";import me from"@mui/icons-material/WarningAmber";import fe from"@mui/icons-material/ErrorOutline";import ge from"@mui/icons-material/InfoOutlined";import xe from"react-dom";import be from"@mui/icons-material/ExpandMore";import ve from"@mui/icons-material/Favorite";import ye from"@mui/icons-material/Home";import Se from"@mui/icons-material/Delete";import ke from"@mui/icons-material/Settings";import Be from"@mui/icons-material/Search";import we from"@mui/icons-material/Star";import Ce from"@mui/icons-material/Person";import Te from"@mui/icons-material/Notifications";import ze from"@mui/icons-material/Visibility";import Ae from"@mui/icons-material/ShoppingCart";import Ie from"@mui/icons-material/Lock";import We from"@mui/icons-material/Info";import Re from"@mui/icons-material/HomeOutlined";import De from"@mui/icons-material/FavoriteBorderOutlined";import Pe from"@mui/icons-material/DeleteOutlined";import Fe from"@mui/icons-material/SettingsOutlined";import Le from"@mui/icons-material/StarOutline";import He from"@mui/icons-material/PersonOutlined";import Me from"@mui/icons-material/NotificationsOutlined";import Ee from"@mui/icons-material/VisibilityOutlined";import Ne from"@mui/icons-material/ShoppingCartOutlined";import Oe from"@mui/icons-material/LockOutlined";import Qe from"@mui/icons-material/HomeRounded";import Ve from"@mui/icons-material/FavoriteRounded";import je from"@mui/icons-material/DeleteRounded";import Ge from"@mui/icons-material/SettingsRounded";import Ue from"@mui/icons-material/SearchRounded";import Xe from"@mui/icons-material/StarRounded";import Ye from"@mui/icons-material/PersonRounded";import Ze from"@mui/icons-material/NotificationsRounded";import qe from"@mui/icons-material/VisibilityRounded";import Je from"@mui/icons-material/ShoppingCartRounded";import Ke from"@mui/icons-material/LockRounded";import $e from"@mui/icons-material/InfoRounded";import _e from"@mui/icons-material/HomeTwoTone";import er from"@mui/icons-material/FavoriteTwoTone";import rr from"@mui/icons-material/DeleteTwoTone";import tr from"@mui/icons-material/SettingsTwoTone";import ar from"@mui/icons-material/SearchTwoTone";import ir from"@mui/icons-material/StarTwoTone";import or from"@mui/icons-material/PersonTwoTone";import nr from"@mui/icons-material/NotificationsTwoTone";import lr from"@mui/icons-material/VisibilityTwoTone";import sr from"@mui/icons-material/ShoppingCartTwoTone";import dr from"@mui/icons-material/LockTwoTone";import cr from"@mui/icons-material/InfoTwoTone";import ur from"@mui/icons-material/HomeSharp";import hr from"@mui/icons-material/FavoriteSharp";import pr from"@mui/icons-material/DeleteSharp";import mr from"@mui/icons-material/SettingsSharp";import fr from"@mui/icons-material/SearchSharp";import gr from"@mui/icons-material/StarSharp";import xr from"@mui/icons-material/PersonSharp";import br from"@mui/icons-material/NotificationsSharp";import vr from"@mui/icons-material/VisibilitySharp";import yr from"@mui/icons-material/ShoppingCartSharp";import Sr from"@mui/icons-material/LockSharp";import kr from"@mui/icons-material/InfoSharp";import Br from"@mui/icons-material/Code";import wr from"@mui/icons-material/GridView";import Cr from"@mui/icons-material/Computer";import Tr from"@mui/icons-material/Add";import*as zr from"@mui/icons-material";import{Settings as Ar,Close as Ir}from"@mui/icons-material";import Wr from"@mui/icons-material/Menu";import Rr from"@mui/icons-material/Close";import Dr from"@mui/icons-material/FormatBold";import Pr from"@mui/icons-material/FormatItalic";import Fr from"@mui/icons-material/FormatUnderlined";import Lr from"@mui/icons-material/FormatAlignLeft";import Hr from"@mui/icons-material/FormatAlignCenter";import Mr from"@mui/icons-material/KeyboardArrowUp";import Er from"@mui/icons-material/KeyboardArrowDown";import"@mui/icons-material/FormatAlignRight";import"@mui/icons-material/ViewList";import"@mui/icons-material/ViewModule";import Nr from"@mui/material/CircularProgress";import"@mui/icons-material/StarBorder";import Or from"@mui/icons-material/StarHalf";import Qr from"@mui/icons-material/Cancel";import Vr from"@mui/icons-material/ExpandLess";import jr from"@mui/icons-material/Image";import Gr from"@mui/icons-material/ChevronLeft";import Ur from"@mui/icons-material/ChevronRight";import Xr from"@mui/icons-material/FirstPage";import Yr from"@mui/icons-material/LastPage";import Zr from"@mui/icons-material/Explore";import qr from"@mui/icons-material/Radio";import Jr from"@mui/icons-material/LibraryMusic";import Kr from"@mui/icons-material/Bookmark";import $r from"@mui/icons-material/Edit";import _r from"@mui/icons-material/Share";import"@mui/icons-material/FavoriteBorder";import"@mui/icons-material/DeleteOutline";import et from"@mui/icons-material/CloudUpload";import rt from"@mui/icons-material/Mail";import"@mui/icons-material/Inbox";import tt from"@mui/icons-material/Folder";import"@mui/icons-material/MoreVert";import"@mui/icons-material/ImageOutlined";import at from"@mui/icons-material/ArrowBack";import it from"@mui/icons-material/AccountCircle";import ot from"@mui/icons-material/Twitter";import nt from"@mui/icons-material/GitHub";import lt from"@mui/icons-material/LinkedIn";import st from"@mui/icons-material/Help";import dt from"@mui/icons-material/FolderOpen";import ct from"@mui/icons-material/InsertDriveFile";import ut from"@mui/icons-material/PictureAsPdf";import ht from"@mui/icons-material/VideoLibrary";import pt from"@mui/icons-material/InboxOutlined";import mt from"@mui/icons-material/SearchOffOutlined";import ft from"@mui/icons-material/ErrorOutlineOutlined";const gt=e.createContext(null);function xt(){return e.useContext(gt)}function bt({radius:e="var(--Ghost-Radius, 4px)",animate:r=!0}={}){return{backgroundColor:"var(--Border-Variant)",borderRadius:e,color:"transparent",userSelect:"none",pointerEvents:"none",...r&&{backgroundImage:"linear-gradient(90deg, transparent 0%, var(--Background) 50%, transparent 100%)",backgroundSize:"200% 100%",backgroundRepeat:"no-repeat",animation:"omni-ghost-sweep 1.4s linear infinite","@media (prefers-reduced-motion: reduce)":{backgroundImage:"none",animation:"none"}}}}function vt({active:e=!0,animate:r=!0,label:t="Loading",children:a,...i}){return e?de(gt.Provider,{value:{animate:r},children:[le("style",{children:"\n@keyframes omni-ghost-sweep {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n"}),de("div",{"aria-busy":"true","data-ghost":"true",...i,children:[le("span",{style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)",whiteSpace:"nowrap"},children:t}),le("div",{"aria-hidden":"true",children:a})]})]}):le(se,{children:a})}const yt=e=>`var(--${e}-Font-Family)`,St="var(--Font-Family-Display, var(--Font-Family-Header, var(--Header-Font-Family)))",kt="var(--Font-Family-Eyebrow, var(--Decorative-Font-Family))",Bt=(e,r)=>`var(--${e}-Font-Family, ${r})`,wt="var(--Font-Variation-Header, normal)",Ct=(e,r)=>`var(--Eyebrow-${e}-${r}, var(--Overline-${e}-${r}))`,Tt=e=>Ct(e,"Font-Size"),zt=e=>Ct(e,"Font-Weight"),At=e=>Ct(e,"Line-Height"),It=e=>Ct(e,"Letter-Spacing"),Wt=e=>`var(--${e}-Font-Size)`,Rt=e=>`var(--${e}-Font-Weight)`,Dt=e=>`calc(var(--${e}-Line-Height) * var(--Cognitive-Multiplier, 1))`,Pt=e=>`var(--${e}-Line-Height)`,Ft=e=>`var(--${e}-Letter-Spacing)`,Lt={"display-large":{component:"h1",fontFamily:Bt("Display-Large",St),fontSize:Wt("Display-Large"),fontWeight:Rt("Display-Large"),lineHeight:Dt("Display-Large"),letterSpacing:Ft("Display-Large"),defaultColor:"header",defaultWidth:"fill"},"display-medium":{component:"h1",fontFamily:Bt("Display-Medium",St),fontSize:Wt("Display-Medium"),fontWeight:Rt("Display-Medium"),lineHeight:Dt("Display-Medium"),letterSpacing:Ft("Display-Medium"),defaultColor:"header",defaultWidth:"fill"},"display-small":{component:"h2",fontFamily:Bt("Display-Small",St),fontSize:Wt("Display-Small"),fontWeight:Rt("Display-Small"),lineHeight:Dt("Display-Small"),letterSpacing:Ft("Display-Small"),defaultColor:"header",defaultWidth:"fill"},h1:{component:"h1",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Wt("H1"),fontWeight:Rt("H1"),lineHeight:Dt("H1"),letterSpacing:Ft("H1"),defaultColor:"header",defaultWidth:"fill"},h2:{component:"h2",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Wt("H2"),fontWeight:Rt("H2"),lineHeight:Dt("H2"),letterSpacing:Ft("H2"),defaultColor:"header",defaultWidth:"fill"},h3:{component:"h3",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Wt("H3"),fontWeight:Rt("H3"),lineHeight:Dt("H3"),letterSpacing:Ft("H3"),defaultColor:"header",defaultWidth:"fill"},h4:{component:"h4",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Wt("H4"),fontWeight:Rt("H4"),lineHeight:Dt("H4"),letterSpacing:Ft("H4"),defaultColor:"standard",defaultWidth:"fill"},h5:{component:"h5",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Wt("H5"),fontWeight:Rt("H5"),lineHeight:Dt("H5"),letterSpacing:Ft("H5"),defaultColor:"standard",defaultWidth:"fill"},h6:{component:"h6",fontFamily:yt("Header"),fontVariationSettings:wt,fontSize:Wt("H6"),fontWeight:Rt("H6"),lineHeight:Dt("H6"),letterSpacing:Ft("H6"),defaultColor:"standard",defaultWidth:"fill"},"subtitle-large":{component:"p",fontFamily:yt("Body"),fontSize:Wt("Subtitle-Large"),fontWeight:Rt("Subtitle-Large"),lineHeight:Dt("Subtitle-Large"),letterSpacing:Ft("Subtitle-Large"),defaultColor:"header",defaultWidth:"fill"},subtitle:{component:"p",fontFamily:yt("Body"),fontSize:Wt("Subtitle-Medium"),fontWeight:Rt("Subtitle-Medium"),lineHeight:Dt("Subtitle-Medium"),letterSpacing:Ft("Subtitle-Medium"),defaultColor:"header",defaultWidth:"fill"},"subtitle-small":{component:"p",fontFamily:yt("Body"),fontSize:Wt("Subtitle-Small"),fontWeight:Rt("Subtitle-Small"),lineHeight:Dt("Subtitle-Small"),letterSpacing:Ft("Subtitle-Small"),defaultColor:"header",defaultWidth:"fill"},"body-small":{component:"p",fontFamily:yt("Body"),fontSize:Wt("Body-Small"),fontWeight:Rt("Body-Small"),lineHeight:Dt("Body-Small"),letterSpacing:Ft("Body-Small"),defaultColor:"standard",defaultWidth:"fill"},"body-small-semibold":{component:"p",fontFamily:yt("Body"),fontSize:Wt("Body-Small"),fontWeight:Rt("Body-Small-Semibold"),lineHeight:Dt("Body-Small"),letterSpacing:Ft("Body-Small"),defaultColor:"standard",defaultWidth:"fill"},body:{component:"p",fontFamily:yt("Body"),fontSize:Wt("Body-Medium"),fontWeight:Rt("Body-Medium"),lineHeight:Dt("Body-Medium"),letterSpacing:Ft("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-medium":{component:"p",fontFamily:yt("Body"),fontSize:Wt("Body-Medium"),fontWeight:Rt("Body-Medium"),lineHeight:Dt("Body-Medium"),letterSpacing:Ft("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-semibold":{component:"p",fontFamily:yt("Body"),fontSize:Wt("Body-Medium"),fontWeight:Rt("Body-Medium-Semibold"),lineHeight:Dt("Body-Medium"),letterSpacing:Ft("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-medium-semibold":{component:"p",fontFamily:yt("Body"),fontSize:Wt("Body-Medium"),fontWeight:Rt("Body-Medium-Semibold"),lineHeight:Dt("Body-Medium"),letterSpacing:Ft("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-large":{component:"p",fontFamily:yt("Body"),fontSize:Wt("Body-Large"),fontWeight:Rt("Body-Large"),lineHeight:Dt("Body-Large"),letterSpacing:Ft("Body-Large"),defaultColor:"standard",defaultWidth:"fill"},"body-large-semibold":{component:"p",fontFamily:yt("Body"),fontSize:Wt("Body-Large"),fontWeight:Rt("Body-Large-Semibold"),lineHeight:Dt("Body-Large"),letterSpacing:Ft("Body-Large"),defaultColor:"standard",defaultWidth:"fill"},caption:{component:"span",fontFamily:yt("Body"),fontSize:Wt("Caption"),fontWeight:Rt("Caption"),lineHeight:Dt("Caption"),letterSpacing:Ft("Caption"),defaultColor:"quiet",defaultWidth:"hug"},"caption-bold":{component:"span",fontFamily:yt("Body"),fontSize:Wt("Caption"),fontWeight:Rt("Caption-Bold"),lineHeight:Dt("Caption"),letterSpacing:Ft("Caption"),defaultColor:"quiet",defaultWidth:"hug"},"label-extra-small":{component:"label",fontFamily:yt("Body"),fontSize:Wt("Label-ExtraSmall"),fontWeight:Rt("Label-ExtraSmall"),lineHeight:Pt("Label-ExtraSmall"),letterSpacing:Ft("Label-ExtraSmall"),defaultColor:"standard",defaultWidth:"hug"},"label-small":{component:"label",fontFamily:yt("Body"),fontSize:Wt("Label-Small"),fontWeight:Rt("Label-Small"),lineHeight:Pt("Label-Small"),letterSpacing:Ft("Label-Small"),defaultColor:"standard",defaultWidth:"hug"},label:{component:"label",fontFamily:yt("Body"),fontSize:Wt("Label-Medium"),fontWeight:Rt("Label-Medium"),lineHeight:Pt("Label-Medium"),letterSpacing:Ft("Label-Medium"),defaultColor:"standard",defaultWidth:"hug"},"label-medium":{component:"label",fontFamily:yt("Body"),fontSize:Wt("Label-Medium"),fontWeight:Rt("Label-Medium"),lineHeight:Pt("Label-Medium"),letterSpacing:Ft("Label-Medium"),defaultColor:"standard",defaultWidth:"hug"},"label-large":{component:"label",fontFamily:yt("Body"),fontSize:Wt("Label-Large"),fontWeight:Rt("Label-Large"),lineHeight:Pt("Label-Large"),letterSpacing:Ft("Label-Large"),defaultColor:"standard",defaultWidth:"hug"},legal:{component:"span",fontFamily:yt("Body"),fontSize:Wt("Legal"),fontWeight:Rt("Legal"),lineHeight:Dt("Legal"),letterSpacing:Ft("Legal"),defaultColor:"quiet",defaultWidth:"hug"},"legal-semibold":{component:"span",fontFamily:yt("Body"),fontSize:Wt("Legal"),fontWeight:Rt("Legal-Semibold"),lineHeight:Dt("Legal"),letterSpacing:Ft("Legal"),defaultColor:"quiet",defaultWidth:"hug"},"eyebrow-small":{component:"span",fontFamily:kt,fontSize:Tt("Small"),fontWeight:zt("Small"),lineHeight:At("Small"),letterSpacing:It("Small"),textTransform:"uppercase",defaultColor:"eyebrow",defaultWidth:"hug"},eyebrow:{component:"span",fontFamily:kt,fontSize:Tt("Medium"),fontWeight:zt("Medium"),lineHeight:At("Medium"),letterSpacing:It("Medium"),textTransform:"uppercase",defaultColor:"eyebrow",defaultWidth:"hug"},"eyebrow-large":{component:"span",fontFamily:kt,fontSize:Tt("Large"),fontWeight:zt("Large"),lineHeight:At("Large"),letterSpacing:It("Large"),textTransform:"uppercase",defaultColor:"eyebrow",defaultWidth:"hug"},"number-small":{component:"span",fontFamily:yt("Body"),fontSize:Wt("Number-Small"),fontWeight:Rt("Number-Small"),lineHeight:Pt("Number-Small"),letterSpacing:Ft("Number-Small"),fontVariantNumeric:"tabular-nums",defaultColor:"standard",defaultWidth:"hug"},"number-medium":{component:"span",fontFamily:yt("Body"),fontSize:Wt("Number-Medium"),fontWeight:Rt("Number-Medium"),lineHeight:Pt("Number-Medium"),letterSpacing:Ft("Number-Medium"),fontVariantNumeric:"tabular-nums",defaultColor:"standard",defaultWidth:"hug"},"number-large":{component:"span",fontFamily:yt("Body"),fontSize:Wt("Number-Large"),fontWeight:Rt("Number-Large"),lineHeight:Pt("Number-Large"),letterSpacing:Ft("Number-Large"),fontVariantNumeric:"tabular-nums",defaultColor:"standard",defaultWidth:"hug"},"button-extra-small":{component:"span",fontFamily:yt("Body"),fontSize:Wt("Button-ExtraSmall"),fontWeight:Rt("Button-ExtraSmall"),lineHeight:Pt("Button-ExtraSmall"),letterSpacing:Ft("Button-ExtraSmall"),defaultColor:"standard",defaultWidth:"hug"},"button-small":{component:"span",fontFamily:yt("Body"),fontSize:Wt("Button-Small"),fontWeight:Rt("Button-Small"),lineHeight:Pt("Button-Small"),letterSpacing:Ft("Button-Small"),defaultColor:"standard",defaultWidth:"hug"},button:{component:"span",fontFamily:yt("Body"),fontSize:"var(--Button-Standard-Font-Size, var(--Button-Font-Size))",fontWeight:"var(--Button-Standard-Font-Weight, var(--Body-Font-Weight))",lineHeight:Pt("Button-Standard"),letterSpacing:Ft("Button-Standard"),defaultColor:"standard",defaultWidth:"hug"},"button-standard":{component:"span",fontFamily:yt("Body"),fontSize:"var(--Button-Standard-Font-Size, var(--Button-Font-Size))",fontWeight:"var(--Button-Standard-Font-Weight, var(--Body-Font-Weight))",lineHeight:Pt("Button-Standard"),letterSpacing:Ft("Button-Standard"),defaultColor:"standard",defaultWidth:"hug"}},Ht={"overline-small":"eyebrow-small",overline:"eyebrow","overline-medium":"eyebrow","overline-large":"eyebrow-large","eyebrow-medium":"eyebrow","body-small-bold":"body-small-semibold","body-bold":"body-semibold","body-medium-bold":"body-semibold","body-large-bold":"body-large-semibold","subtitle-medium":"subtitle"},Mt={"eyebrow-small":"overline-small",eyebrow:"overline","eyebrow-large":"overline-large"},Et={header:"var(--Header)",default:"var(--Header)",primary:"var(--Header-Primary)",secondary:"var(--Header-Secondary)",tertiary:"var(--Header-Tertiary)",neutral:"var(--Header-Neutral)",info:"var(--Header-Info)",success:"var(--Header-Success)",warning:"var(--Header-Warning)",error:"var(--Header-Error)"},Nt={standard:"var(--Text)",default:"var(--Text)",quiet:"var(--Quiet)",eyebrow:"var(--Eyebrow, var(--Quiet))",primary:"var(--Text-Primary)",secondary:"var(--Text-Secondary)",tertiary:"var(--Text-Tertiary)",neutral:"var(--Text-Neutral)",info:"var(--Text-Info)",success:"var(--Text-Success)",warning:"var(--Text-Warning)",error:"var(--Text-Error)"},Ot=new Set(["h1","h2","h3","h4","h5","h6","display-large","display-medium","display-small","subtitle-large","subtitle","subtitle-small"]);function Qt({children:e,textStyle:r="body",color:t,width:a,component:i,noWrap:o=!1,gutterBottom:n=!1,className:l="",sx:s={},...d}){const c=Ht[r]||r,u=Lt[c]||Lt.body,p="string"==typeof u.fontSize?u.fontSize.match(/--([\w-]+)-Font-Size/):null,m=p?p[1]:null,f=m?"var(--"+m+"-Text-Decoration, "+(u.textDecoration||"none")+")":u.textDecoration||"none",g=m?"var(--"+m+"-Text-Transform, "+(u.textTransform||"none")+")":u.textTransform||"none",x=xt(),b=function(e,r,t){const a=Ot.has(e);return(a?Et:Nt)[r||t]||(a?Et.header:Nt.standard)}(c,t,u.defaultColor),v=a||u.defaultWidth,y="fill"===v,S=i||u.component,k=t||u.defaultColor;return le(h,{component:S,className:"typography typography-"+c+(Mt[c]?" typography-"+Mt[c]:"")+" typography-color-"+k+" typography-width-"+v+" "+l,sx:{fontFamily:u.fontFamily,fontVariationSettings:u.fontVariationSettings||"normal",fontSize:u.fontSize,fontWeight:u.fontWeight,lineHeight:u.lineHeight,letterSpacing:u.letterSpacing,textDecoration:f,textTransform:g,fontVariantNumeric:u.fontVariantNumeric||"normal",color:b,display:y?"block":"inline",width:y?"100%":"auto",margin:0,marginBottom:n?"0.5em":0,padding:0,...o&&{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},...x?bt({animate:x.animate}):{},...s},...d,children:e})}const Vt={"@supports (text-box-edge: cap alphabetic)":{textBoxTrim:"trim-both",textBoxEdge:"cap alphabetic",paddingTop:0,paddingBottom:0}},jt=e=>le(Qt,{textStyle:"display-large",...e}),Gt=e=>le(Qt,{textStyle:"display-medium",...e}),Ut=e=>le(Qt,{textStyle:"display-small",...e}),Xt=e=>le(Qt,{textStyle:"h1",...e}),Yt=e=>le(Qt,{textStyle:"h2",...e}),Zt=e=>le(Qt,{textStyle:"h3",...e}),qt=e=>le(Qt,{textStyle:"h4",...e}),Jt=e=>le(Qt,{textStyle:"h5",...e}),Kt=e=>le(Qt,{textStyle:"h6",...e}),$t=qt,_t=e=>le(Qt,{textStyle:"subtitle-large",...e}),ea=e=>le(Qt,{textStyle:"subtitle",...e}),ra=e=>le(Qt,{textStyle:"subtitle-small",...e}),ta=e=>le(Qt,{textStyle:"subtitle",...e}),aa=_t,ia=ea,oa=e=>le(Qt,{textStyle:"body-small",...e}),na=e=>le(Qt,{textStyle:"body-small-semibold",...e}),la=e=>le(Qt,{textStyle:"body-small-bold",...e}),sa=e=>le(Qt,{textStyle:"body",...e}),da=e=>le(Qt,{textStyle:"body-semibold",...e}),ca=e=>le(Qt,{textStyle:"body-bold",...e}),ua=sa,ha=oa,pa=e=>le(Qt,{textStyle:"body-large",...e}),ma=e=>le(Qt,{textStyle:"body-large-semibold",...e}),fa=e=>le(Qt,{textStyle:"body-large-bold",...e}),ga=e=>le(Qt,{textStyle:"caption",...e}),xa=e=>le(Qt,{textStyle:"caption-bold",...e}),ba=e=>le(Qt,{textStyle:"label-extra-small",...e}),va=e=>le(Qt,{textStyle:"label-small",...e}),ya=e=>le(Qt,{textStyle:"label",...e}),Sa=e=>le(Qt,{textStyle:"label-large",...e}),ka=e=>le(Qt,{textStyle:"legal",...e}),Ba=e=>le(Qt,{textStyle:"legal-semibold",...e}),wa=e=>le(Qt,{textStyle:"eyebrow-small",...e}),Ca=e=>le(Qt,{textStyle:"eyebrow",...e}),Ta=e=>le(Qt,{textStyle:"eyebrow",...e}),za=e=>le(Qt,{textStyle:"eyebrow-large",...e}),Aa=wa,Ia=Ca,Wa=Ta,Ra=za,Da=e=>le(Qt,{textStyle:"number-small",...e}),Pa=e=>le(Qt,{textStyle:"number-medium",...e}),Fa=e=>le(Qt,{textStyle:"number-large",...e}),La=e=>le(Qt,{textStyle:"button-extra-small",...e}),Ha=e=>le(Qt,{textStyle:"button-small",...e}),Ma=e=>le(Qt,{textStyle:"button",...e});function Ea({size:e="100%",...r}){return le("svg",{width:e,height:e,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",...r,children:le("path",{d:"M24.9375 24.0125C23.5562 21.6125 20.9625 20 18 20H14C11.0375 20 8.44375 21.6125 7.0625 24.0125C9.2625 26.4625 12.45 28 16 28C19.55 28 22.7375 26.4563 24.9375 24.0125ZM0 16C0 11.7565 1.68571 7.68687 4.68629 4.68629C7.68687 1.68571 11.7565 0 16 0C20.2435 0 24.3131 1.68571 27.3137 4.68629C30.3143 7.68687 32 11.7565 32 16C32 20.2435 30.3143 24.3131 27.3137 27.3137C24.3131 30.3143 20.2435 32 16 32C11.7565 32 7.68687 30.3143 4.68629 27.3137C1.68571 24.3131 0 20.2435 0 16ZM16 17C17.1935 17 18.3381 16.5259 19.182 15.682C20.0259 14.8381 20.5 13.6935 20.5 12.5C20.5 11.3065 20.0259 10.1619 19.182 9.31802C18.3381 8.47411 17.1935 8 16 8C14.8065 8 13.6619 8.47411 12.818 9.31802C11.9741 10.1619 11.5 11.3065 11.5 12.5C11.5 13.6935 11.9741 14.8381 12.818 15.682C13.6619 16.5259 14.8065 17 16 17Z",fill:"currentColor"})})}const Na={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Oa={xxs:"16px",xs:"20px",small:"24px",medium:"32px",large:"40px",xl:"56px",xxl:"72px"};function Qa({children:e,color:r="default",size:t="medium",fontSize:a,disabled:i=!1,twoTone:o=!1,className:n="",sx:l={},"aria-label":s,...d}){const c=xt(),u=Na[r]||"Default",p="custom"===t&&a?"number"==typeof a?a+"px":a:Oa[t]||Oa.medium;return le(h,{component:"span",className:"icon icon-"+r+" icon-"+t+(i?" icon-disabled":"")+(o?" icon-twotone":"")+(n?" "+n:""),"aria-hidden":s?void 0:"true","aria-label":s||void 0,role:s?"img":void 0,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:p,color:"default"===r?"inherit":"var(--Icons-"+u+")",opacity:i?"var(--Disabled, 0.38)":1,cursor:i?"not-allowed":"inherit",lineHeight:1,flexShrink:0,...o&&{"--twotone-variant":"var(--Icons-Variant-"+u+")"},...c?{...bt({animate:c.animate}),width:p,height:p,"& .MuiSvgIcon-root":{visibility:"hidden"}}:{},"& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"},...l},...d,children:e})}const Va="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QCSRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAACQAAAAAQAAAJAAAAABAAOShgAHAAAAEgAAAHigAgAEAAAAAQAAAKCgAwAEAAAAAQAAAKAAAAAAQVNDSUkAAABTY3JlZW5zaG90/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iAihJQ0NfUFJPRklMRQABAQAAAhhhcHBsBAAAAG1udHJSR0IgWFlaIAfmAAEAAQAAAAAAAGFjc3BBUFBMAAAAAEFQUEwAAAAAAAAAAAAAAAAAAAAAAAD21gABAAAAANMtYXBwbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmRlc2MAAAD8AAAAMGNwcnQAAAEsAAAAUHd0cHQAAAF8AAAAFHJYWVoAAAGQAAAAFGdYWVoAAAGkAAAAFGJYWVoAAAG4AAAAFHJUUkMAAAHMAAAAIGNoYWQAAAHsAAAALGJUUkMAAAHMAAAAIGdUUkMAAAHMAAAAIG1sdWMAAAAAAAAAAQAAAAxlblVTAAAAFAAAABwARABpAHMAcABsAGEAeQAgAFAAM21sdWMAAAAAAAAAAQAAAAxlblVTAAAANAAAABwAQwBvAHAAeQByAGkAZwBoAHQAIABBAHAAcABsAGUAIABJAG4AYwAuACwAIAAyADAAMgAyWFlaIAAAAAAAAPbVAAEAAAAA0yxYWVogAAAAAAAAg98AAD2/////u1hZWiAAAAAAAABKvwAAsTcAAAq5WFlaIAAAAAAAACg4AAARCwAAyLlwYXJhAAAAAAADAAAAAmZmAADypwAADVkAABPQAAAKW3NmMzIAAAAAAAEMQgAABd7///MmAAAHkwAA/ZD///ui///9owAAA9wAAMBu/8AAEQgAoACgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAAgICAgICAwICAwQDAwMEBQQEBAQFBgUFBQUFBggGBgYGBgYICAgICAgICAkJCQkJCQsLCwsLDAwMDAwMDAwMDP/bAEMBAgICAwMDBQMDBQwIBwgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDP/dAAQACv/aAAwDAQACEQMRAD8A8zt1v/D0/m2bbo85K9q664XRPGNl5N0iicc7W9R3FeO2vjF5FAmPB9eldRYvFfqJrWYJIOeDivntTvnRvqeleHfEupeA3EciBoYz8rgcjHr/AI/nXpdt+0p4sd1s7RozEw+V88/lXjlldedEbLVsOCMb+9XPCmk6f4S1yPWvs631uj+Z5bcjI54zU3a1izmlTVmpI+kbLxp8SdcjWVkuzHJ0ZIXCn6MRiultfD3i/UcPdgx57zSgfoMmufb9oZ9WgGl6dAqsw27OWZMf7IFT2XiDxJfKWbcPYkLn6dTXZSrJ/E2zza9Fp+6kj1bRPhjZXKeZr2sLCv8AcgAz/wB9Of6VrX/hL4M6NC39pOb9scieZnBx/sx7R+lebaXYatqlwEupRbx/xMSXP4ZIFehR+C/BUKBtRup7p2/g8zaCT22xgH9a7ou6uor5nJ5XPzw+LkHgGy+INld+AbH7MfPUXMSBlikywwVDd+xxX1HDe3Z8Norx2yIEzsz85z36Yr1SP4cfC6fVTqV1o0U7w4wsrLshDHZmUMeCfU89MDvU+peGPCWsWlxb+H4bG3iRWZhBOu2LaM7pmOQFC5/iABJr57MI1ZS5qTW/Q+lwFCPskqi6dT8o5LC78RfEqG32kRR3h83A6KG5Az7V+pfhHwl8MptKhgvIGhlVAN6yOjdO+Dj9K8W8KfDHTbXUrnWrh4BDCXnnkYjy1UOFwjcjAzksT9AOa9vtbLSJYhJHIsaFFZZEYeWQRwQR8pHoe9d2Fq3Wxw46hK99TtU+Evgu7XOm6tcRE9AWSQfqAf1rOufghqGC+maxBJ6eZGyH81J/lWF9ju4Rvs5xKuNwPXP5Uh1vX9PHyPIO3yOcV1upC2sTg9mZWqfDv4oaKrSWcomVeht7n/2V8Vwdj41+IXhzW44fEMV+0LkRwxNHnfIT03DjHvXp6+OvEtveRRyxzyLJwocDaD6sewFT+NfEVjDp/wBvuJ0a4WPk8dT2UfpXn1nztqDOyjTUFcf4h8TTHS/tWpzLG+zJTPyx8dPc+9fGHjTxve6o8lnp8jLbkkE92/wFWPFnja/1tjBJJ5cA/hHf3NeVahrVhZRNucZqU7LlR1KnzS5mMimitW3yH5qyNb8XW9vHtMn4Dk1w2qeKbaRyfOWJM9erH6CtXw5oN34iuo5Rp8ws2/5bSDG4+oBo6HZGkf/QwfiB+y3N4f8AEotfDV5P/Z8oJ8qRt+wjnhuuK8A1zS9b8AagYLhZvJzgSlG2ZHbdiv0u1v4m6Xd66BfW0tqckbZlIPT3roptF8MeLdKMN1bwvFOhIDBf0zXz9RLmbiz2I6o/MDT/ABdJcSJHc7lJ6HoDXsGhXk6qG3iSNux6V698RfgRZ3enqnhqNIZwBtYLnmvDh8OPiV4YuI4TD9pcuFAUAJ1xli3AHqTwO9Q3Zakzpp6I9M0ZLaC5+2aZARck44GdxPavYvDGqanqF2LGKDFwcfIFbHPfgGuG8AeDr7UZvMvNV0/yIZsTeTMZFjOSrI7KByCOzZz2HWvZF1/TtE8XQeFtE0+BnhgWSTU72VkTEoYL5UUfLuSrAAsT3GetEZq6S3OV4KUrtrQ9H0iPRZXuNPl1GKa7sYhPexwuZBARx5biLJDMx4GCeD71Q8MePvhh4i1K+tPDF6up3mmukUscKldsj7s4MhwdmDuP8ODmvz5+Ofjl/BvhrWdQ8KreafDreurCL1hMvmi2iLsVWQEBEclgqFgN3JB68d+zxJ8RNM8EeLvjHoTxARLKWminiVrydMzXBMZJEQXhdyozN0A446FJyjdM3hhIRkotH1j8fPF9kllq3g7whdBNUa3F5LOitJMktuXMUaPFl8bo2BJCjkEZya+dvhD8d7Pw14WiPjOS5thcM9qr2saTC4s5A8hZo2ILKkxkTgNgHuOvwp45+K/izxlq11rJ1W4im1SFxcMj7HXLncCqYxu2gEdx164Ot4s+IWh6p4I0e006eddSit4Ld5HVVmR7bAXBA5AYZUZzySevESwknbm6s3+tU4+7Doj7yv8A44aP4Ztv7XmS81WHTIv7LgW7uWSJDcPHIjFY2wzrGd0e8FMYBAJOOf8AEX7SenLYqLIRyWlhukkmIKzF5CGffGrbMYxhVJ6N2Ffnd4l8U3upaZJfapYPOLpk2XbthlKJ8v3RtAOe/PHUViXOvW1xp9o81x/pLoBNHsAiZFwFwoYkt0y20Z549dYYO0VF9zKpilJvTofo5pP7Sniy3TzNA2/2fIrNG/zMmBncNjA4Kngj8q9Z8B/tXQ3Rlg8Y+XmLHliFfLZnOQMh+AAQMkkAA5r8tfDfj3xB4dtTYaPIt7aEeY8arux3JAwD7EH0zmvR9a16x8XaLBFusE1WdoRO4QQzIgBzGuGAfsWcjIOBiieGlF6PQwUqc1qtT9d5fihpniLRRf6Msm6ZcASrg7lyCVI4Zc9COCOa8W1vVNQuyZdSdio6KTwK8K8EeKINAuNGsdNuXu7JbZ7a6gZyNlyER1YK3IO3J+XII7nFe66T4d1LxrK0sgMVucgHPII6+2PT2riUteXqU8PZ3Wx4zruvNJO1raQMcdTXKaVoOseKpLj7NalYoDh3kJJJPYV7zf8AgCPwnqMk05MkbDJZ+e3vXQ+Ar/Slgu7S3iJllkO3auR0PU1UV71mdEYKKufPPhz4bWk3iyyS+TcqkkoeQDmvvPUtA03SPD0DWsCJsTOAAD2r540T4d/EHW/HTGxT7PEWLJJt3fKT1xx/OvsvTPg/r0NvFca7eyXRC4KsQF/BRx+ta0acnfqTVrw0sf/R/Q3XfAeh61q8t1cWqM4zhiorirj4YvcPs02RoCgIRlzxXQzfEq1GoPGtvJyxHT+dddp3i7SoY1kkY72GTx09q82UISmzqi/d0PLn8J6/oNuqiRrx+24Z5/SvGfHeg+NZZXutZkkXS4Ip5VihkKyzufLJWQZXKqA+1RuP8q+yZfEVjdRl4sbirbN4IBIHH4V+dPxC+PE3/CRnwL8SC0D6deGOa7jgQQRGdd9uQN6yOAPuvsKk8MRXFjIx5LRuztwnNz7nKeLrzwjb2unQ6dqUumhJDqT6XZ3geSRIPmbzkuH2gyou3mPIHJU8g+M6P+0/4U0vxLcy6/oLMiGZkmQlbn7QS+RNvUhdhIjXyyAMkqQDXjVtHZa54k13xD4bsbmSSyYA3V1dC4uGmuDlmSzUIArqGUBWzlslj2+U9aW91XX7l55tl0JHEyMNpVBgAfgAAR1GMHnNTRwcG3FvU3qYycEpJHXeJ/iNqHijxTd3N8815pMt27w2k1w5jXzeApDPkjKjPPRRwM10ui/ErVNH8LyaPYzR2q299PcC1jbaGSVVyRnO3HIG3AINeD30yTXEv2oKs8TLtZMDKYIzxxnoSeppYLy08pVXAnAIQlSGZ2IyWY54AHAFet7OPLyW0PL9rPn529SzqkhglW6kO6Vi5bnlQcbVPJxgHIqCJ7htKMyyDBmO1CcnJ7gHgdvrVS6a4mm8hgGZgMkYJLeue+K7mfwwdO0uy1OaRJobmMMsUfytvZcnPGDt785HFVKrGKSfUzhRnNtxWxzlzr+oDTY9HS9lNqHVli3YCyAfewee5x+NczNEVl8xxtU9McfMOuB+NdTqWmtbi4tROsqQlcMY9hLNzt3dcj361z8jGaw3kFmQg5649eauEotXXUiaknyy6Fq01CS3xHbM2+UOH2k5KsMEfjXX6Fd3NhItxbgrcJkiUrvYLjJ2qxIyM4rzeKeaNy8R2kgKSOOK6jT2t5I+J/Ll+VlUA8PkYG4jGT+X0onEIaM+i/D3j6/XTLg5+ZrmO5WSUok0bx42vgEDAwM4zxnpzj78+D+s+N/HWmWl14VIsNNtIJklZCZpJriTJ+ZSCBswOBk7elfl3Zx2flpOsuJQC8kbIfmXBGM5/pivsn9nL4v3Xw+s5rW7kZ7e9bzPJ2hRvjG3b84G3C5JYHBXpzXlYmlFe8ejSqSasj9ErjwPqVzOq65+9Vo0DMeAWwM/L2r0DwJ8NdD0uOa6SBNzv1I7e1cL4b+JD+LdCW+UwTbxmOa1LNEY/wCEksASfU9Dxjiu+8N6l4imjkgEJCITlj0Yn0q6MYXuctST2Z6d4YXS7DVtoCq2MD869a1q+tU0/cGXha+SrHw9451HxGWs5Fjjbnc2fl59O9exXHg7xULZft995mRjaBgV1UpPlasZyldn/9L9DbTRdPkeSR4lDFj2rf0Dw/p5kZ3jBGT1ryOTxNrc8/8AoMGFzyT2Feg6LrOs3VssUMezAIY45zjk157cednRFpxR0t/o1iLrjai898fLjoPevy9/a3+IujW+vTWNvpdtNd6NLHGPNs4Z5PKZM5888xttKsi7WwRz6V9k+OvGGoaMIb6YyzJE2x54ULrEHwhfAHQElQTxuPoCR+JXx18earca441LdI96Z7p7iRm8y6EhCRNMdzbmRI1U5OQR6dfOlL21TkjpY9KnFUo88jz++8YavFJqFzpTrY2FzgSxWsmzeY+InfnJYMMjgHNeIXl/LLeS3gXMjPl5GYkvnk5/HrWjot6bnV3M5zHsfCnkHPt9RmsfVpBBeSxRgbW7V6tOmo6HDVqOauU5ZvtNz5qIF3YyoHHFem+DvAN9411Yi1hZI2YhSQSobHTgdMkYxXmkUS3V/aWsB5kZIzj1Y81+pXwn8EeLItJtx4I03TxHbJ+8vdTYhHl4+WJFILBe5PGeleXnGNnQhGnS+KXV9EetkeAp15yqVvhj0W7OD8B/seXmqXEF94lVBb4CTRRbl3YxhlOAeec8fSvojxf+zNoeu6Na6bZQrbS6euIcLgEYwN2wqeOo/kc16b4e8W/GjQtRisfEOlaHqVgdqvJprtFIgx94BmbcfbA+tfQKyfbbKC/EXkl1JdD1UgZIzXyOIxFeU1OVW7XbZH2mGw2GUHCNKye91qz8yvEv7JM7WNvMwBS0Dm4lLHc67SVAGCWO4ADOMAnrXxv4y+Gl54MWO6XesBn2TAjIVTkAkZHGcfSv1v8AiH4m+KV9ObPwzJpuiaah2yXF6qyyOc9QGyoXHtnPevnPXfhJ4w8SRXWfGel6lPcK6m0MMaDBHJUopw3oTxmurBZjWpSi3WTj1Tv/AJHDj8toVozUaLT6NW/zPy+v7KOK5KQ8q3I9OvOK0rW3jEqzXEyCFCCEQ5Yn/PU103xQ8JzeDNch06RHhLJ8yyfeDA85wSCPQivO5G3Dev314/CvuKNaNaCqQejPz+vQlRqOnPdHcx6qq3wufJbyy7CJRzgtnhfck/SvU/DNxp2oajYW2q3Vwbj7THCq7gCF2lSitwByRnLAHkcV45eRWcmjW0qExyptYgZKyZwMZ9R1H5V654E1CBNYs9K1WGJdO1VVtbmPJkVPMO1ZgGy0bq2GJHbpWdZJxNaUmnqfqZ8ENZ17V/Ar2tutlLBpg+xMsEbJcrJEo8l3y5BRkGBtGPlr68+F1zef2RG+p4ErDO0nkZr8yfCeq3vwr0DzrxdU0rUbK6iglWS1cWN2pnKxRvcqCjeYu9UPUHoOtfpL4Wae8it7iWB7M3caskZbLIxXOxxgbWHcc1y0GlLUVdNarY998O6hZR6kVJXcQK9J1OeFrcEEcjNfN2jeFNXu9Y8+K5ZFxz9favRtV03XbC2yLozbR90jFd8JPl2MG9T/0/0LtNNWwh/fqvua6XSoorGwa8kKkHLBCcZFed3Wq6prw8mAeVGeDtH9a6fw/p1zJD5V3LnZ8oyewrgk7z0OiL0Pj34meJm0/wAVa1o99dCWbULYtZWnmGJAturTKDjHLpuADHnaSvSvyG+LemWtzb3t8bc29zPdNcRvseOKZJixY7JDhWBwAF4wM85Jr9zfH/wD8B614ztfHWtRE3dtt3ESMqP5Cv5fnKpAdEDNnPQZxxxX4rftR6jpHiTx5J/wht3JNpaSfZIhIrogKudzRhudm4nDNztGTXmYfDuFa99z1J11Oi48uyPnPSrTT4ra3YtItxI75P8ACwCHAAwD1Gc59iOa5zVopjqOH4LEAFuBnjua7bxVZNoVxHp9pew3z2DG2ae3O+GR4mwzxt3UnODxkc9CK47WLv7ZiaTaspP3UG0AdOnTrXsxbep5k0krGj4Nt/P8aaRFKOHu0GMDHX8q/Wu98GeNfESaRa6dqA0rQbZN06wny5ZTtx8rlXReefmRs+3Wvyj+HsAl8beH/LdTK95ENmTnJOMnsP51/Rj8PtBs20O386NXXy16+hFfJcQJvGUrdE99Vv2PsuGUvqlXm79NHt3Pz9+HPw5+KWmeKftup6098kNwv+rEpiNsAQ6Odg3OeNuCFUjpzx98adNqd54enjZCskY+Xd97kHA/Suu1G40nTX+yW6orMMYUDJ/xo0W3kurC7kKlUchACMEdQTXkVf3lXdX1vZWPoaMFTpW1tpa7bf4nwz8RPCviDxrb/ZopLmBbVpWY25YSFnTETqykEeWecY+bp615f4a+CHi23sre8k8Q3L6ta3huTc7bgFoyADCY5maMDqSwyxPGcV9sC5Tw5qU41RCsQPlmRgApOeOenI5Fei6fa6Pf27T2aIGZeWGOa4sPiKkaToKS+5HTicLTlVVdxbfq7fdc/E/9rXSLiz1LSL29O6ZjJC8g/i2jIP19a+QQWjYNjgg/Lmv0V/b3tI7ZtFCBQRcycA5GNpx/Svzul3SToQv+sVcKenNfc8PN/UYJ9Lr8WfnXEkUsfO3W35HbaS9rPo8sNw2FOSpZgAhzlRt69e4p1hcxRXSTwyMNx4DA/Lt6+uRXORYitpreRmEn3QM/KwBz0retbQXVlBPAXEtuWzwCu3r6j/8AVmvWaR5EW3Y+8PCnijWPH3wiuNJtlN1baJqVm95cSSsXt48s4LR7TiMYYB84DkE4FfqF8L/EV34i0q11/V7GSzmDOiRs25GRflSZcAZVhyrEZwa/Mn9hjxTeaX44n0drC1kstUj8i8uXbbMmFbywqkgMmR8/Bxkc84r9jPDtjpMFkbWyiihijyqRxKERR6Ko4A+lclOPvtGldvY67wp4isF1Aws65xXa6zeRzshjYbSOea8Ts/C8bag90jlcHscZ5roru21WxgM4cuiDgHriuqMnynM276n/1P05fw3eabpRv5IREoXds4BA+naquneIPD1vpJLMryuCztnkHsPbFc9498W+Pp/DUktroz28Ey4LyMA6of4tg/rWt8MtG0VPAtut8iST3iu8zOAWJLEdfYdK4HK87R7HXGOiPmz4rWfi74jeFb3Q/DOsNod1JIDFdEZRoslXhkGDlJFOGxX5hfFr9mHWfhZLp+p39/Nq+iwqZL0wRkSvIsW9hAzmRUVmzgMM4HTPNfq5r2v6To8lzHd4jihkbaCcZCnivkj9pHSvFXxKOkaL4V1JbffbzSCBLhViYeW0nmGWMOSxUbBGQevOOTXn1ZWXM5WOug/e5Ern443iWl9qBS0LRWylm8uRs4QcYyByegzgc1zWpoUcKRtAyPY46EGvWvih4Zg8DRado6zTnUpYxd6isiBGjknUMkWfvcJjOcZJJxzXlF2oa1hk37mOeCecegGM/nXp0ZqSUlsclZWbT3GaJqsuh61Ya1B9+xuYbhffynDY/HGK/oi8LfEO2h8F2uqWzb4ZbZJoSOjI67lOfoa/nKIPfvX6i/sifFex8U+CT8M9cmUanoan7KHPM9iTxjPUxE7SP7u014PE+GnOlHEU943T9H/k/wAz6ThXFwhWlQqbS1Xqv+B+R90+EtV1DWbh/Ed/CSWIaFDzsQ/Mu4ZwCeCRWZrfxU8SaTdTxXzh1ckxpBHtRAPu8gnJ9c/pXI2fgrS08Q6f4iup7qW2tmMN1YrdTR2lzE3AMkaMBvXPyuMEcZyOK9dTT/gBFEP7Q8Paktx50eUieWcYX5nIYS/dOec4PHFfLYbB89FONS3e/wDwx91LENT5nSlL/Ck/1v8AgePx+ONS1mznh1q9hlhmO9UuvKiZRznLZ5HpnmuO8NfEDW9K12PStNuU1HS597RyRkSeXtO3yy4OGXnIZfTGa9O8eWXw18Q+Hr/wx4X8Mw2lpqaSW8tzdYku5I3LZWL5mMe5W25zkD0xmuE1K18P+CtOW7kENhp+lWhBOAkcUMa849gBXJjMMqdnGXNI3VSSV5x5F2dr/NbL77+h8N/tseIbrWtb8PWUyhJZUmuCnopYRr/I18XSRus0eBsKIjADqSRkfp1ruvit8Qbv4neP7zxNGpjtgRb2ERH+rtos7Mj1bJZvc1wSSKQ2QAy4IY+nXGK/SMsw0sPhadKe+79W7n5Lm+KjiMXUqx26eiVi0sr3Mwyg3RbmZgOcgd+36V7j8MtI8NeKZ7vTvFkxt5JLQm2mgBEjTj/VJhSAQxOCANxPTpXielRpLI8pJyPvLycqRyT7Z4/GvX/DOnWuq3linhmSaXVrYxMlvHG6tJeNKuI0HXbGoJaRsDnr0z0V37rRx0d7n1z+zf8ADr4geGfG0euTQPbQC8NtLDcRiSWKzKmXewJz8+1cMPuk5OeRX6l+G/EkSM9sPm2knNec/DjTrz4hxaLrDWqWEraFHFdGSZGmSaCU/u1jU/KpLEhm6kAZ5ruLb4e+L9DmuLyW0+02Zdm8xOGC+6+1cNKc2+YVVxb16HpWheJIbu/+zq2cHkV6vfywSWYUY5FfCl/4huvDWsm5hyV3ZI/GvY9F+KUOqw+VIcFFGc11wrx+FmfLJavY/9X9afiJq+nWPh27jbaSYWVQfUivheL4xWnhOx+y3c+1hkAZ6Z9KpfFD4u/6PJH55nkYcKDxXxlewah4pvmubtyATwOwrza9RJprc6YSctFsek+M/G8Xi+7kWFyImY8g9a1vBlwbeS3S5mkn+zktalySIHYBHZQeAWXgk9v15rQfB8KbQx4r2jRPD1lCF6ZGK4pU/aO7LVT2atFn5v8Ax7+FOo3/AMYdcnt7Wa7sI7Q6zdT3JEcRSIKLkxS5wyCVgvHzgHgHivlDxjZWMOraja6YIDaxTtJCIHZkjjb59gZxuO37ue+K/bL4veAl1/QpLTRdFW+OpSxrdSSSF3jKMWWSSJE3Tx7ifMQYbBBByAR8RXX7DfxBn1u3ksrm3bSpLgGRLjKzeU0mSPlU4bbjIdsjpu9OmhNr4h1KkWtD885EYwxRtxgEjPX5uRWj4X1jVvDfiTTda0Sd7W+tbhHikQ4I5wVI7qwyCDwQcGvs34v/ALLXi7wZoM/ia+RYYBqMFlBa2yCbebhtvmKV5VBtA+fozKuTya+ufhj+x/8AB/4W+FYPFfxTuFvPF8+mvPDp19PGojuHRiqxWo+ZnXIBJLAEGt5VlyO66MyjpOPI9bqx638O9ZtvFujRNc7Y7low0sR4BBHJUHt/k1T1z4aTPcmWHWJLeNjkRg5x9MnNcb4fsTpsaLbyFTGF27TgjHpV3XLnxC4LQ3bOuM5PUe1fltaskmtmfs2FnOm7xbOs0DwlYaMjXlxePcSjd88zD5dvoOgHevi/9qvxbc674YvdH0xythEu5mU489kcEn/cHb1PNezXF3rV2sltcXDurnDKMgHHX/JrzLx54Vs9X0uW2uukg25B6A8VWAxcYV4SlrZpmOZ0Z1qNTXVpo/L+3cI+WU9OoOKt+V5is8YOwYGeTyegzivpPwh8H/DSeNrnw74lvmt5jFv06S5hH2BpHbEf2qRXDBc8HC45yTivorw7+xh408SeOdOt9W8mHwfFIWu59P8ALgDbf3hECb5TIjMTGkjMTjkYGBX6jHERqRVSOz2fc/H61P2U3TqaNbo+H/Cuh65qMsj6Fbbj5MkU2SMtlGZgEOM/KMjg4xmvo74I/Bjxlr/hu/8AiV4Pkn0z+xbm3S4luIWZXilbEk9tMuQPLIIlVlZVX5icZx7N8KfBQ8e/tNatJp+kweFk8Nx3cjW8lu4WdI5fssDNEWAbd95mBXPUA9a/S/4f+F9K+Hdjf2dhHCBqs5ubtIIhFbvIVCHbDkqoKjBHfvWVSTlpbQlzUUrPU7v4P+F9Y0Twdp6axa2lrcKmAtoWZTAp/dBmcZY4ycjjnj1r6Ut9RtZbD7JgAsuCK8f0iS91S3WC0YQxooVVHACgYAUdgOwrTTw9q0b+Z9qYH0zU0/cXuoi99T51+J/wZ1+61KW+8NzNOJXZzbso+XJz8pHb61x2neF9W0lTHqtlJaS9ywIViPQ19y+H4Xs5M30hkPqx6VV+JSWF9oE8FtEstwyZjC4zuHSh0k1zItVJKPK3of/W4WGzm1NhJcyFifU12eleHUyuys3S7cnHBr0bSYnBXC14drnZJ2WhraZ4f2gZrvNP0kIAB2qtp8cgUZWvX/BfgrU/Ege5V47WzhO155emeuFUcsf85reFNyfLFHLOaW5zlrYEDg12+ieEfEGtOF02zkdSeZGG2MfV2wK9csNM8FeFIBO8QvJY8brm4AZQfZPuqPzrRHxR0l38hZ44lXgFvkXA9Pwr06WWVGrtHDPGUouzkcNrHhTwr4M8NX2v+N1j1YWUJufsoUNBlOmd3Lc+wH1r8ktMuJvGHxa8X+M9emNxe6jcRrZmQ5EFkY12QxDoqBlccd6/Qv8AaR8Yyx+Cb660i50+8S7hNuY42drhVYjcRn5eOOMV+YtpcXFrcw6lpZzeW4IMLjaZIyQWRh+AII6EA+orqx+QTxGW1IYfSe687dPn+Zllmf08LmdOddXgtH5X6/L8rn0lDEsEW2UfIpBXHHI6VV1G4gcPGZChIPBHIwKz7Xxt4av4oluLpIJ3Cjy5MoQxGeM8cdDg4Bpt1bwXypMkiyRsMqyMDkE+1fhePo1adR06kWn2aP33A1qVWmqlOSa7pmOIowpMS7tx+83b8KxtVsoEt5JrogRLlnJ4AAGa6TV9U8O6CIop7je5PMcYLt07hen44rx7xd4nXVJBHGGtrFMbYmOWduu9wucew5A9fT18g4Yx+YVVyQah1k1ovTu/JfhueFxDxXgcupNTmpT6RT1fr2XmzyPxNMJ7t7oJh7hlSJT1WIEgZ9zkn8favdv2ffjTqvwwfWbbVY21fQIrqMvaMxDRK/ytJC3Yg4JHQivDmgl1DUxMykKhG0ew79a6nwxZFTq8GwSJPC52n+LackE/T0r99wmUUaOHjhoL3Yq39efU/nrHZzWr154mcvek7/8AA/Q/QNfH/wAF/DXimHUNPgTSYPGCi9XU0JlgmuHwskdw+A0cgI6MCuDkGvb7nTl2q275XUOjD7rKRkMp7g9iK/LbTLH7VoM+gXh8y0fDwZ6wuOm3PftX1t+z/wDFy8i0VPhr4uZZ5tNJ/s+Wck+ZDknySTyMfwkHjpXJjOG0481DR9jTB8QtS5MQrrufUOjatcaNIFSTKk969KTWPtVv5r3Ww46DFeURW9p4kSSfQsJLHnfbOfmyDzsJJz9K5i4ku4i0LSum0kFTkEEdjXymJw1XDzcKisfU4bFU60Oem7o9M1bxBHakt9sbj3rmbL4i6TaXbfbp9/HAZ64l9BfUx80rt9Oa569+HNhM2Z2m/WuKTad0dJ//187TYpMjBr0PTFlUDFZ9lDaKBgV1tqsGBt614kYnROXQ7Hw1p9xql/DZmTy1c5kc9EReWb8BXdeMvixFpEC6R4dUR2NvCyK2cEleCSPUnqa4eyujp+g6rfxnDLEsQPoHOW/QV4Ncap9qtry3lf5iLjac90VZFH4gGvt+HMDB03Xmr3Pjc/x1RT9hTdjt4Pibrd5dOsVyzgjlSxII7jGe9RX+vXN9cB3k8tgPurwufXj2rwjwXqMlzO8q4LBsEentXrYiOFYKAfavrHSitUj5ZVG9zE8X3L3kMVtK7Og7Z4x9K8tl0SEEugwSeK9N135ihYZOD26VzLqGUENnOefpSS0NE7nK3fh+HUolgnRJDkAMQC/oRnr6Vw2vaNrelTTzz6gWt72SC0srZSf3ZyC7AEcHYrcivZ7GNPtiBuhPHfJzXK/E2EnUfDTpkILqfd9fJO3+uK4q+CoTalOCbv8A8A7KWNr0ouMJtKxjDScxq79cDBBP9c1nXWhJKcu2fXj8K6+MnIwu7jGeuMU+SINwO3YV1W6HFdvU4e08PW0cudpIxnNbMFpFZTM8a4J57elavlBA29SfQ8VWniBjLKCPx6UEPzHNpv7v7TYMSMAsnUjvxUSu6yR3qny7iE7lYcEEVWF3LZSbuSQB064BplzqEE5MqnacYI6VtGSMZQ7H0b4A+I9zZ7JJpWWUSH5snHQcD+de+/8ACbeHvEMSxapGIZ26XUOBID6kdGH1r84xq5tFljQkHBkB64K49PUVt6Z4/u4tqSSMdpHP0HX+VcOLw1GuuWornbhK9ak+anKx+jmjO+jzpMZVu7KQgLPH0Gezr1U/ofWvXo9MsNRgFxGAcjtX58eCvilNZzKrSbo3O1kblWHoe1fWXhjxxa29vHdxvm0kwME52MRnafb0NfEZrkzw37ynrH8j7LK82Vf93UVpfmf/0PQbTS4yOR+ZrorawjXGP51x8GoS4Azx9K3rW/c8Bv0rx00as3PEzC28HXdpEcSXSzYx1zHGCP1NfJcWsm8tkuY2OX+YrxnJQxsPXv2r6D8carLZ6dpMhPyyz3EWTxklAVz+K4r4vn1ZdA8Q3WnSFhBKxurUHPMZb94nHUqeor9LyNKOCh5/5s/O87beMnb+tEexfCaCE+C11fAZ7i7mVjjJ+RsBa9WWTdGA3yrzxjvXzp8ONek0PQdSsZWL20WrEW6j/aUyEj8CteswaxdahH5gVkGM8ivYjO8UmeR7Np6GlrBV281Tnadtc66gDCnoRW7h5ItkhyQAx4HWsiXH3CBgZ9fz9qnyLRn7XE6snU88DJ/AetcJ4ofXUh0ka1LG0k+otJaRohDxxJHIH3Z6nBXJx34zXq9hbrJcHOPlGQMevH9a818WSjUfiRBaf8s9IsAOenm3J3t+O1VrGrC8otN6fj6m0aloSi0tfw9DSgSQoM85A9c0oABOSR7danKgAHdwDjgY9BTWCopcgDuM8dK1Mio7rsx8x64qhLKNjE9yCen4VYMhkYrhhz15we9UZVyCucEn2PH9KlkmNdzoFO5eexPUj/8AVXKXlx1MRGe3OK6W7kRWI547dMnvjiuP1FfMLDA74HANZTdkVCN2YT6rP9o8pmyNrDkdcj8KiW7MROGPJ6isqcPBdKX4XnPqOD9aha5Vmyh24BAB/WvPnNt6npQgktDvdN16a2dVD4H97+or6r+FvjqJm/s29cPb3ACMHPHsR/SvhVZ2RgSc4OcV2uh6hcMcW8vluOR2yaOdTTpzV0w5XBqcWf/Z",ja={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral"},Ga={xxs:{size:16,iconSize:9},xs:{size:20,iconSize:12},small:{size:24,iconSize:14},medium:{size:32,iconSize:18},large:{size:40,iconSize:22},xl:{size:56,iconSize:28},xxl:{size:72,iconSize:40},"x-large":{size:80,iconSize:40},"xx-large":{size:160,iconSize:80}},Ua={"xx-small":"small","x-small":"medium"};let Xa=!1;const Ya="var(--Button-Border-Width, 1px)";function Za({src:e,defaultPhoto:t=!0,alt:a,initials:i,icon:o,color:n="default",size:l="medium",customSize:s,clickable:d=!1,onClick:c,insideButton:u=!1,className:p="",sx:m={},...f}){const g=xt(),[x,b]=r(!1),v="custom"===l&&s?{size:s}:Ga[function(e){const r=Ua[e];return r?("production"===process.env.NODE_ENV||Xa||(Xa=!0,console.warn(`[Avatar] size="${e}" is the old ladder's name for ${Ga[r].size}px. Use size="${r}". The ladder was realigned to Figma on 2026-09-28; note that small, medium and large also changed value.`)),r):e}(l)]||Ga.medium,y=ja[n]||ja.default,S=e||(!t||i||o?void 0:Va),k=S&&!x,B=!k&&i,w=!k&&!B,C=d||!!c,T=k?"transparent":"var(--Buttons-"+y+"-Button)",z="var(--Buttons-"+y+"-Border)",A="var(--Buttons-"+y+"-Text)";return de(h,{component:C?"button":"div",type:C?"button":void 0,role:C?"button":"img","aria-label":a||i||"Avatar",tabIndex:C?0:void 0,onClick:C?c:void 0,...g?{"data-ghost-block":"true"}:{},className:"avatar avatar-"+l+" avatar-"+n+(C?" avatar-clickable":"")+(k?" avatar-image":B?" avatar-initials":" avatar-fallback")+(p?" "+p:""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:v.size+"px",height:v.size+"px",borderRadius:"50%",backgroundColor:T,color:A,...g?bt({radius:"50%",animate:g.animate}):{},fontFamily:"inherit",fontWeight:600,overflow:"hidden",flexShrink:0,border:k?Ya+" solid var(--Border)":B?Ya+" solid "+z:"none",...u&&{marginLeft:"2px",marginRight:"2px"},...C&&{cursor:"pointer",outline:"none",padding:0,transition:"background-color 0.15s ease, border-color 0.15s ease","&:hover":{backgroundColor:k?"rgba(0,0,0,0.08)":"var(--Buttons-Default-Hover)"},"&:active":{backgroundColor:k?"rgba(0,0,0,0.15)":"var(--Buttons-Default-Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"}},...m},...f,children:[k&&le(h,{component:"img",src:S,alt:a||"Avatar",onError:()=>b(!0),sx:{width:"100%",height:"100%",objectFit:"cover",borderRadius:"50%"}}),B&&(()=>{const e=function(e){switch(e){case"xx-small":case"x-small":case"small":return Da;case"medium":case"large":default:return Pa;case"x-large":case"xx-large":return Fa}}(l);return le(e,{sx:{color:"inherit",fontSize:(r=v.size,Math.round(7*r/12)+"px"),lineHeight:1,textAlign:"center",...Vt},"aria-hidden":"true",children:i.slice(0,2).toUpperCase()});var r})(),w&&le(Qa,{size:l,sx:{color:"inherit"},children:o||le(Ea,{})})]})}function qa({children:r,max:t=5,size:a="medium",spacing:i=-8,className:o="",sx:n={},...l}){const s=e.Children.toArray(r),d=s.slice(0,t),c=s.length-t;return de(h,{role:"group","aria-label":"Avatar group, "+s.length+" avatars",className:"avatar-group "+o,sx:{display:"inline-flex",alignItems:"center","& > *:not(:first-of-type)":{marginLeft:i+"px"},...n},...l,children:[d,c>0&&le(Za,{initials:"+"+c,size:a,color:"neutral",sx:{border:"2px solid var(--Background)",zIndex:0}})]})}const Ja=["primary","secondary","tertiary","neutral","info","success","warning","error"],Ka=e=>e.charAt(0).toUpperCase()+e.slice(1);function $a(){const e={};return Ja.forEach(r=>{e[r]=function(e){const r=Ka(e);return{bg:"var(--Icons-"+r+")",text:"var(--Icons-On-"+r+")",border:"none"}}(r),e[r+"-outline"]=function(e){return{bg:"var(--Background)",text:"var(--Text)",border:"1px solid var(--Buttons-"+Ka(e)+"-Border)"}}(r)}),e}const _a=/-light$/,ei=new Set;const ri={size:"var(--Sizing-2)",padX:"var(--Sizing-Half)",dot:"var(--Sizing-1)"},ti=new Set;function ai({variant:e="primary",size:r,type:t="standard",badgeContent:a,max:i=99,showZero:o=!1,invisible:n=!1,dot:l=!1,overlap:s="rectangular",anchorOrigin:d={vertical:"top",horizontal:"right"},children:c,className:u="",sx:h={},...m}){const f=$a(),g=function(e){const r=String(e||"primary");if(!_a.test(r))return r;const t=r.replace(_a,"");return"production"===process.env.NODE_ENV||ei.has(r)||(ei.add(r),console.warn('[Badge] variant="'+r+'" — the -light shape was removed. Rendering variant="'+t+'" (solid).')),t}(e),x=f[g]||f.primary;!function(e){void 0!==e&&("production"===process.env.NODE_ENV||ti.has(e)||(ti.add(e),console.warn('[Badge] size="'+e+'" — Badge has one size and the prop was removed. Rendering the 16px counter. For the 8px status dot use \ntype="status".')))}(r);const b="status"===t||l;let v=a;b?v="":"number"==typeof a&&a>i&&(v=i+"+");const y=n||!b&&!o&&(0===a||null==a),S={"& .MuiBadge-badge":{minWidth:b?ri.dot:ri.size,height:b?ri.dot:ri.size,padding:b?0:"0 "+ri.padX,fontFamily:"var(--Badge-Font-Family, var(--Button-Small-Font-Family))",fontWeight:"var(--Badge-Font-Weight, var(--Button-Small-Font-Weight))",lineHeight:"var(--Badge-Line-Height, 12px)",letterSpacing:"var(--Badge-Letter-Spacing, var(--Button-Small-Letter-Spacing))",fontSize:"var(--Badge-Font-Size, 11px)",borderRadius:b?ri.dot:ri.size,backgroundColor:x.bg,color:x.text,border:x.border,boxSizing:"border-box",boxShadow:"0 0 0 1px var(--Background)",transition:"transform 0.2s ease, opacity 0.2s ease"},...h};return le(p,{badgeContent:b?"":v,max:i,showZero:o,invisible:y,overlap:s,anchorOrigin:d,variant:b?"dot":"standard",className:"badge-"+g+" "+u,sx:S,...m,children:c})}const ii={1:[[.3,.5,.7,0,.41],[1.3,2.5,3.4,-1.2,.205]],2:[[.3,.5,.7,0,.41],[.6,1.2,1.6,-1.2,.273],[3,6,8.1,-2.5,.137]],3:[[.3,.5,.7,0,.41],[.3,.7,.9,-.6,.328],[1,2,2.7,-1.2,.246],[2.8,5.6,7.5,-1.9,.164],[6.3,12.5,16.9,-2.5,.082]],4:[[.3,.5,.7,0,.41],[.4,.7,1,-.5,.342],[1.2,2.4,3.2,-1,.273],[3.4,6.9,9.3,-1.5,.205],[7.8,15.6,21.1,-2,.137],[15,30,40.5,-2.5,.068]],5:[[.3,.5,.7,0,.41],[.4,.7,1,-.4,.359],[1.1,2.2,3,-.7,.308],[3.1,6.3,8.5,-1.1,.256],[7.1,14.2,19.2,-1.4,.205],[13.6,27.3,36.8,-1.8,.154],[23.4,46.8,63.2,-2.1,.103],[37,74,99.9,-2.5,.051]]};function oi(e){return ii[e].map(function(e){return e[0]+"px "+e[1]+"px "+e[2]+"px "+e[3]+"px rgba(var(--Dropshadow-Color, 20, 20, 20), "+e[4]+")"}).join(", ")}const ni=(e,r)=>0===e?"none":"var(--Effect-Level-"+e+", "+r+")",li=ni(1,oi(1)),si=ni(2,oi(2)),di=ni(3,oi(3)),ci=ni(4,oi(4)),ui=ni(5,oi(5)),hi={0:"none",1:li,2:si,3:di,4:ci,5:ui},pi={"black-white":"BlackWhite"},mi=e=>{return pi[e]||(r=e).charAt(0).toUpperCase()+r.slice(1);var r},fi={small:"Sm-",medium:"",large:"Lg-"};function gi(e,r){const t=mi(e),a=(e,r)=>`color-mix(in srgb, rgb(var(${e}, ${r})) calc(var(--Button-Bevel-Opacity, 0.5) * 100%), transparent)`,i="var(--_bevel)",o="calc(-1 * var(--_bevel))",n=fi[r],l=void 0===n?(e,r)=>r:(e,r)=>`var(--${n}Button-${e}, ${r})`;return[`inset ${l("Lowlight-Offset-x",o)} ${l("Lowlight-Offset-y",o)} ${l("Lowlight-Blur-Radius",i)} ${l("Lowlight-Spread",o)} `+a(`--Buttons-${t}-Lowlight`,"0 0 0"),`inset ${l("Highlight-Offset-x",i)} ${l("Highlight-Offset-y",i)} ${l("Highlight-Blur-Radius",i)} ${l("Highlight-Spread",o)} `+a(`--Buttons-${t}-Highlight`,"255 255 255")].join(", ")}const xi={small:"var(--Sm-Button-Text-Padding)",medium:"var(--Button-Text-Padding)",large:"var(--Lg-Button-Text-Padding)"},bi=e=>"small"===e?"var(--Sm-Button-Avatar-Text, 9px)":"large"===e?"var(--Lg-Button-Avatar-Text, 23px)":"var(--Button-Avatar-Text, 12px)",vi={small:{avatar:16,icon:20},medium:{avatar:20,icon:20},large:{avatar:40,icon:32}};function yi(r,t){if(!e.isValidElement(r))return r;const a=vi[t]||vi.medium;return r.type===Za?e.cloneElement(r,{size:"custom",customSize:a.avatar,insideButton:!0}):r.type===Qa?e.cloneElement(r,{size:"custom",fontSize:a.icon}):r}const Si=["default","primary","secondary","tertiary","neutral","info","success","warning","error"],ki=mi;function Bi(e,r=!1,t=!1,a="medium"){const i=ki(e),o=gi(e,a),n=r?li:"none";return{backgroundColor:`var(--Buttons-${i}-Button)`,color:`var(--Buttons-${i}-Text)`,border:`var(--Button-Border-Width) solid var(--Buttons-${i}-Border)`,boxShadow:"none"===n?o:`${o}, ${n}`,position:"relative",zIndex:1,"& .MuiTouchRipple-rippleVisible":{color:`var(--Buttons-${i}-Hover)`,zIndex:-1},"&:hover":{backgroundColor:`var(--Buttons-${i}-Hover)`,boxShadow:`${o}, ${r?si:li}`,...!t&&{transform:"translateY(-1px)"}},"&:active":{backgroundColor:`var(--Buttons-${i}-Pressed)`,boxShadow:o,...!t&&{transform:"translateY(0)"}},"&.Mui-focusVisible":{backgroundColor:`var(--Buttons-${i}-Button)`,outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"& .MuiTouchRipple-root":{zIndex:-1},"& .MuiTypography-root":{zIndex:1},"& .MuiButton-icon":{zIndex:1}}}function wi(e,r=!1){return{backgroundColor:"transparent",color:"var(--Text)",border:`var(--Button-Border-Width) solid var(--Buttons-${ki(e)}-Border)`,boxShadow:"none","& .MuiTouchRipple-rippleVisible":{color:"var(--Hover)"},"&:hover":{backgroundColor:"var(--Hover)",boxShadow:"none",...!r&&{transform:"translateY(-1px)"}},"&:active":{backgroundColor:"var(--Pressed)",...!r&&{transform:"translateY(0)"}},"&.Mui-focusVisible":{backgroundColor:"transparent",outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}}}function Ci(e,r=!1){return{backgroundColor:"transparent",color:e?"var(--Hotlink)":"var(--Quiet)",border:"var(--Button-Border-Width) solid transparent",boxShadow:"none",textDecoration:"none",...e&&{"& .btn-text-content":{textDecoration:"underline"}},"& .MuiTouchRipple-rippleVisible":{color:"var(--Hover)"},"&:hover":{backgroundColor:"var(--Hover)",boxShadow:"none",...!r&&{transform:"translateY(-1px)"},...e?{"& .btn-text-content":{textDecoration:"none"}}:{color:"var(--Text)"}},"&:active":{backgroundColor:"var(--Pressed)",...!r&&{transform:"translateY(0)"},...e?{"& .btn-text-content":{textDecoration:"none"}}:{color:"var(--Text)"}},"&.Mui-focusVisible":{backgroundColor:"transparent",outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px",...e&&{"& .btn-text-content":{textDecoration:"none"}}}}}const Ti=/-light$/,zi=new Set;const Ai={small:"var(--Small-Button-Height)",medium:"var(--Button-Height)",large:"var(--Large-Button-Height)"},Ii={small:{minHeight:"var(--Small-Button-Height)",minWidth:"var(--Button-Min-Width)",fontSize:"var(--Sm-Button-Text)","--_height":"var(--Small-Button-Height)"},large:{minHeight:"var(--Large-Button-Height)",minWidth:"var(--Lg-Button-Min-Width, var(--Button-Min-Width))",fontSize:"var(--Lg-Button-Text)","--_height":"var(--Large-Button-Height)"},medium:{minHeight:"var(--Button-Height)",minWidth:"var(--Button-Min-Width)",fontSize:"var(--Button-Text)","--_height":"var(--Button-Height)"}};function Wi({variant:r="default",size:t="medium",elevated:a=!1,selected:i=!1,fullWidth:o=!1,disabled:n=!1,iconOnly:l=!1,letterNumber:s=!1,avatar:d=!1,swatch:c=!1,swatchColor:u,startIcon:p,endIcon:x,startDecorator:b,endDecorator:v,badge:y=!1,badgeContent:S,badgeVariant:k="error",badgeSize:B,badgeDot:w=!1,badgeMax:C=99,badgeAnchorOrigin:T={vertical:"top",horizontal:"right"},children:z,className:A="",sx:I={},...W}){const R=l||d||c,D=R||s;if("production"!==process.env.NODE_ENV){const r=W["aria-label"]||W["aria-labelledby"]||W.title;D&&!r&&console.error('[OmniDesign] A <Button> with no visible text has no accessible name. A screen reader announces it as just "button" — or, for letterNumber, reads the characters ("123") as if they were the label. Add aria-label="…" describing the ACTION ("Your account"), not the content ("JD") or the icon ("trash").'),r&&e.Children.forEach(z,e=>{const t=e?.props?.["aria-label"]||e?.props?.titleAccess;t&&console.error('[OmniDesign] <Button> is labelled "'+r+'" but also contains an icon labelled "'+t+"\". A screen reader reads both. Remove the icon's label — the button owns the name.")})}const P=!R,F=o&&!R&&!s,L=function(e){const r=String(e||"default");if(!Ti.test(r))return r;const t=r.replace(Ti,"");return"production"===process.env.NODE_ENV||zi.has(r)||(zi.add(r),console.warn('[Button] variant="'+r+'" — the -light shape was removed. Rendering variant="'+t+'" (solid). Use a Buttons mode for colour and solid / -outline / ghost / text for shape.')),t}(!d&&!c||"ghost"!==r&&"text"!==r?r:"primary"),H=function(e,r=!1,t=!1,a="medium"){const i={};return Si.forEach(e=>{i[e]=Bi(e,r,t,a),i[`${e}-outline`]=wi(e,t)}),i["black-white"]=Bi("black-white",r,t,a),i["black-white-outline"]=wi("black-white",t),i.danger=Bi("error",r,t,a),i.outline=wi("default",t),i.ghost=Ci(e,t),i.text=Ci(e,t),i}(P,a,i,t),M=H[L]||H.default,E=function({size:e,iconOnly:r,letterNumber:t,avatar:a}){const i=Ii[e]||Ii.medium,o=Ai[e]||Ai.medium;if(r)return{height:o,width:o,minWidth:"unset",minHeight:"unset",fontSize:a?bi(e):"small"===e?"0.875rem":i.fontSize,padding:"0","--_height":o};return t?{...i,minHeight:o,minWidth:o,padding:"0"}:{...i,padding:"large"===e?"0 var(--Lg-Button-Padding)":"0 var(--Button-Padding)"}}({size:t,iconOnly:R,letterNumber:s,avatar:d}),N="small"===t?Ha:Ma,O=void 0!==b?yi(b,t):void 0,Q=void 0!==v?yi(v,t):void 0,V=B||("small"===t?"small":"large"===t?"large":"medium"),j=de(se,{children:[le(m,{styles:{'[class*="btn-"] .MuiButton-startIcon, [class*="btn-"] .MuiButton-icon':{marginLeft:"0px !important",marginRight:"2px !important"},'[class*="btn-"] .MuiButton-endIcon':{marginLeft:"2px !important",marginRight:"0px !important"},'[class*="btn-"] .MuiButton-iconSizeSmall .MuiSvgIcon-root, [class*="btn-"] .MuiButton-iconSizeSmall > *':{fontSize:"var(--Sm-Button-Icon) !important"},'[class*="btn-"] .MuiButton-iconSizeMedium .MuiSvgIcon-root, [class*="btn-"] .MuiButton-iconSizeMedium > *':{fontSize:"var(--Button-Icon) !important"},'[class*="btn-"] .MuiButton-iconSizeLarge .MuiSvgIcon-root, [class*="btn-"] .MuiButton-iconSizeLarge > *':{fontSize:"var(--Lg-Button-Icon) !important"}}}),le(f,{size:t,...F&&{fullWidth:!0},disabled:n,startIcon:void 0!==O?O:d?(()=>{if(d&&z){const e=Ai[t]||Ai.medium,r=bi(t);return le(g,{sx:{width:e,height:e,backgroundColor:"inherit",color:"inherit",fontSize:r},children:z})}return p})():p,endIcon:void 0!==Q?Q:x,className:`btn-${L} ${A}`,role:"button",sx:{borderRadius:d?"var(--Large-Button-Height)":l||c?"small"===t?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius))":"large"===t?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius))":"var(--Button-Icon-Radius)":"small"===t?"var(--Sm-Button-Radius, var(--Button-Radius))":"large"===t?"var(--Lg-Button-Radius, var(--Button-Radius))":"var(--Button-Radius)",textTransform:"none",fontWeight:"inherit",lineHeight:1,whiteSpace:"nowrap",flexShrink:0,transition:"background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))",..."small"===t&&{position:"relative","&::before":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"100%",height:"100%",minWidth:"var(--Target, 0px)",minHeight:"var(--Target, 0px)"}},...E,...M,"&.MuiButton-root":{padding:E.padding??"0 var(--Sizing-1)"},"& .MuiButton-startIcon":{display:"inherit",color:"inherit",marginLeft:"0px !important",marginRight:d?"0px !important":"2px !important"},...d&&{"& .MuiAvatar-root":{fontSize:bi(t)}},"& .MuiButton-endIcon":{display:"inherit",color:"inherit",marginLeft:"2px !important",marginRight:"0px !important"},"& .MuiSvgIcon-root":{color:"inherit"},"&:focus-visible, &.Mui-focusVisible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none",backgroundColor:M.backgroundColor,color:M.color,border:M.border,boxShadow:"none"},...c&&{border:"var(--Button-Border-Width) solid var(--Border)",padding:"1px",width:Ai[t]||Ai.medium,height:Ai[t]||Ai.medium,minWidth:"unset",minHeight:"unset",boxShadow:"none","--_bevel":"0",backgroundColor:"transparent !important","&:hover":{backgroundColor:"transparent !important",boxShadow:"none"},"&:active":{boxShadow:"none"},"&:hover .btn-swatch-inner":{filter:"brightness(0.9)"}},...F&&{width:"100%"},...I},...W,...c?{style:{backgroundColor:"transparent"}}:{},children:d?null:c?le(h,{className:"btn-swatch-inner",style:{width:"100%",height:"100%",borderRadius:"small"===t?"var(--Sm-Button-Icon-Inner-Radius, calc(var(--Button-Icon-Radius) - 2px))":"large"===t?"var(--Lg-Button-Icon-Inner-Radius, calc(var(--Button-Icon-Radius) - 2px))":"var(--Button-Icon-Inner-Radius, calc(var(--Button-Icon-Radius) - 2px))",...u?{backgroundColor:u}:{}}}):(()=>{if(R)return z;if(s){return le("small"===t?La:N,{component:"span",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",padding:"4px",color:"inherit",lineHeight:1,...Vt},children:z})}return"string"==typeof z||"number"==typeof z?le(h,{component:"span",className:"btn-text-content",sx:{display:"inline-flex",alignItems:"center",padding:xi[t]||xi.medium},children:le(N,{component:"span",sx:{color:"inherit",...Vt},children:z})}):z})()})]});return y?le(ai,{variant:k,size:V,badgeContent:S,dot:w,max:C,anchorOrigin:T,showZero:0===S,children:j}):j}const Ri=e=>le(Wi,{iconOnly:!0,...e}),Di=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],Pi=e=>"Default"===e?"var(--Quiet)":"var(--Buttons-"+e+"-Border)";function Fi(){const e={};return Di.forEach(r=>{e[r]=function(e){const r=mi(e);return{color:r,borderToken:Pi(r),icon:"var(--Buttons-"+r+"-Border)"}}(r)}),e}const Li=/-(outline|light|solid)$/,Hi=new Set;function Mi(e){const r=Fi();return r[function(e){const r=String(e||"default");if(!Li.test(r))return r;const t=r.replace(Li,"");return"production"===process.env.NODE_ENV||Hi.has(r)||(Hi.add(r),console.warn('[Checkbox] variant="'+r+'" — the -outline/-light/-solid shapes were removed; a Checkbox has one look and `variant` selects colour only. Rendering variant="'+t+'". Update the call site.')),t}(e)]||r.default}const Ei={small:{box:16,icon:12,gap:4,touchTarget:24,LabelComp:oa},medium:{box:20,icon:14,gap:8,touchTarget:24,LabelComp:sa},large:{box:24,icon:18,gap:12,touchTarget:24,LabelComp:pa}};function Ni({size:e,variant:r,checked:t,indeterminate:a}){const i=Mi(r),o=Ei[e]||Ei.medium,n=t||a,l=i.borderToken,s="small"===e?"var(--Sm-Checkbox-Radius, 3.2px)":"large"===e?"var(--Lg-Checkbox-Radius, 4.8px)":"var(--Checkbox-Radius, 4px)";return le(h,{className:"chk-box-icon",sx:{width:o.box,height:o.box,boxSizing:"border-box",borderRadius:s,border:"2px solid "+l,overflow:"hidden",flexShrink:0,transition:"border-color 0.15s ease-in-out"},children:le(h,{sx:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--Background)",color:"var(--Text)",transition:"background-color 0.15s ease-in-out"},children:n&&le(a?he:ue,{sx:{fontSize:o.icon,color:i.icon}})})})}function Oi({size:e,variant:r}){return le(Ni,{size:e,variant:r,checked:!1,indeterminate:!1})}function Qi({size:e,variant:r}){return le(Ni,{size:e,variant:r,checked:!0,indeterminate:!1})}function Vi({size:e,variant:r}){return le(Ni,{size:e,variant:r,checked:!1,indeterminate:!0})}function ji({variant:e="primary",size:r="medium",label:t,checked:a,defaultChecked:i,indeterminate:o=!1,disabled:n=!1,onChange:l,name:s,value:d,className:c="",sx:u={},"aria-label":h,"aria-labelledby":p,"aria-describedby":m,inputProps:f={},...g}){Mi(e);const v=Ei[r]||Ei.medium,y=v.LabelComp,S={...f,...h&&{"aria-label":h},...p&&{"aria-labelledby":p},...m&&{"aria-describedby":m}},k=le(x,{checked:a,defaultChecked:i,indeterminate:o,disabled:n,onChange:l,name:s,value:d,icon:le(Oi,{size:r,variant:e}),checkedIcon:le(Qi,{size:r,variant:e}),indeterminateIcon:le(Vi,{size:r,variant:e}),className:"chk-"+e+" "+c,inputProps:S,disableRipple:!0,sx:{padding:(v.touchTarget-v.box)/2+"px",minWidth:24,minHeight:24,borderRadius:"var(--Checkbox-Radius, 4px)",color:"inherit",transition:"background-color 0.15s ease-in-out","&.Mui-checked, &.MuiCheckbox-indeterminate":{color:"inherit"},"&:hover":{backgroundColor:"transparent"},"&:hover .chk-box-icon":{borderColor:"var(--Text)"},"&:active .chk-box-icon":{borderColor:"var(--Text)",backgroundColor:"var(--Pressed)"},"&.Mui-disabled .chk-box-icon":{opacity:"var(--Disabled, 0.38)"},"&.Mui-focusVisible .chk-box-icon":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none"},...u},...g});return t?le(b,{control:k,label:le(y,{component:"span",sx:{color:n?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:t}),disabled:n,sx:{marginLeft:0,marginRight:0,gap:v.gap+"px",alignItems:"center","&.Mui-disabled .MuiTypography-root":{color:"var(--Text-Quiet)",opacity:.6}}}):k}const Gi=["primary","secondary","tertiary","neutral","info","success","warning","error"];function Ui(e){const r=(t=e).charAt(0).toUpperCase()+t.slice(1);var t;return{bg:"var(--Hover)",border:"var(--Buttons-"+r+"-Border)",hoverBorder:"var(--Buttons-"+r+"-Hover)",pressedBorder:"var(--Buttons-"+r+"-Pressed)",text:"var(--Text)",focusBg:"var(--Hover)"}}const Xi={small:{height:"var(--Small-Button-Height)",fontSize:"13px",labelSize:"13px",padding:"4px var(--Input-Padding, 8px)",iconSize:16},medium:{height:"var(--Button-Height)",fontSize:"15px",labelSize:"15px",padding:"4px var(--Input-Padding, 12px)",iconSize:18},large:{height:"var(--Large-Button-Height)",fontSize:"17px",labelSize:"17px",padding:"4px var(--Input-Padding, 16px)",iconSize:20}},Yi={small:{height:"48px",fontSize:"13px",labelSize:"11px",padding:"20px var(--Input-Padding, 12px) 4px",padTop:20,padBottom:4,leftPad:12,iconSize:16},medium:{height:"56px",fontSize:"15px",labelSize:"12px",padding:"22px var(--Input-Padding, 14px) 6px",padTop:22,padBottom:6,leftPad:14,iconSize:18},large:{height:"64px",fontSize:"17px",labelSize:"14px",padding:"24px var(--Input-Padding, 16px) 6px",padTop:24,padBottom:6,leftPad:16,iconSize:20}},Zi={small:{resting:"Body-Small",shrunk:"Label-ExtraSmall"},medium:{resting:"Body-Medium",shrunk:"Label-Small"},large:{resting:"Body-Large",shrunk:"Label-Medium"}},qi=e=>({fontSize:"var(--"+e+"-Font-Size)",fontWeight:"var(--"+e+"-Font-Weight)",letterSpacing:"var(--"+e+"-Letter-Spacing)"});const Ji={info:ge,success:pe,warning:me,error:fe},Ki={info:{border:"var(--Buttons-Info-Border)",hoverBorder:"var(--Buttons-Info-Hover)",pressedBorder:"var(--Buttons-Info-Pressed)",icon:"var(--Icons-Info)",text:"var(--Hotlink)"},success:{border:"var(--Buttons-Success-Border)",hoverBorder:"var(--Buttons-Success-Hover)",pressedBorder:"var(--Buttons-Success-Pressed)",icon:"var(--Icons-Success)",text:"var(--Text-Success)"},warning:{border:"var(--Buttons-Warning-Border)",hoverBorder:"var(--Buttons-Warning-Hover)",pressedBorder:"var(--Buttons-Warning-Pressed)",icon:"var(--Icons-Warning)",text:"var(--Text-Warning)"},error:{border:"var(--Buttons-Error-Border)",hoverBorder:"var(--Buttons-Error-Hover)",pressedBorder:"var(--Buttons-Error-Pressed)",icon:"var(--Icons-Error)",text:"var(--Text-Error)"}};function $i({variant:e="primary-outline",size:r="medium",label:a,labelPosition:i="standard",placeholder:o,helperText:n,validation:l,validationMessage:s,disabled:d=!1,id:c,value:u,defaultValue:p,onChange:m,name:f,type:g="text",multiline:x=!1,rows:b,maxRows:k,resize:B="vertical",startAdornment:w,endAdornment:C,fullWidth:T=!1,className:z="",sx:A={},"aria-label":I,"aria-labelledby":W,"aria-describedby":R,"aria-required":D,"aria-invalid":P,inputProps:F={},...L}){const H=function(){const e={};return Gi.forEach(r=>{e[r+"-outline"]=Ui(r)}),e.outline=Ui("primary"),e}(),M=H[e]||H["primary-outline"],E="floating"===i;"production"!==process.env.NODE_ENV&&/-light$|^light$/.test(e)&&console.warn('[Input] variant="'+e+'" was removed. It differed from "'+e.replace(/-?light$/,"")+'-outline" only by a token no design system publishes, so the two rendered identically. For a lighter field use data-surface="Surface-Brightest" on its container.');const N=E?Yi[r]||Yi.medium:Xi[r]||Xi.medium,O=t(),Q=c||O,{labelX:V,padX:j,restingY:G,shrunkY:U}=function(e,r){const t=parseInt(e.height,10)||56,a=parseInt(e.fontSize,10)||15,i="var(--Input-Padding, "+(e.leftPad||14)+"px)",o=(e.iconSize||18)+8;return{labelX:r?"calc("+i+" + "+o+"px)":i,padX:i,clearance:r?o:0,restingY:Math.round((t-1.4375*a)/2),shrunkY:6}}(N,!!w),X=Zi[r]||Zi.medium,Y="var(--Text)",Z=l?Ki[l]:null,q=l?Ji[l]:null,J=Z||M,K=J.border,$={...F,...I&&{"aria-label":I},...W&&{"aria-labelledby":W},...R&&{"aria-describedby":R},...D&&{"aria-required":D},...P&&{"aria-invalid":P}};return de(h,{className:"inp-"+e+" "+z,sx:{width:T?"100%":"auto",...A},children:[(()=>{if(!a||E)return null;return le("small"===r?oa:sa,{component:"label",htmlFor:Q,sx:{display:"block",marginBottom:"6px",color:d?"var(--Quiet)":"var(--Text)",fontSize:N.labelSize,fontWeight:500,opacity:d?"var(--Disabled, 0.38)":1},children:a})})(),le(h,{sx:{border:"1px solid "+K,borderRadius:"small"===r?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===r?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",transition:"border-color 0.15s ease-in-out",boxShadow:"none",...!d&&{"&:hover":{borderColor:J.hoverBorder},"&:active":{borderColor:J.pressedBorder}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{children:le(v,{value:u,defaultValue:p,onChange:m,name:f,type:g,disabled:d,placeholder:o,id:Q,multiline:x,rows:b,maxRows:k,fullWidth:!0,label:E?a:void 0,variant:"outlined",size:"small"===r?"small":"medium",inputProps:$,InputProps:{startAdornment:w?le(y,{position:"start",children:w}):void 0,endAdornment:(()=>{if(C)return le(y,{position:"end",children:C})})()},sx:{"& .MuiOutlinedInput-root":{backgroundColor:"var(--Hover)",color:"var(--Quiet)",fontSize:N.fontSize,minHeight:x?"auto":N.height,padding:0,borderRadius:0,transition:"color 0.15s ease-in-out",...E&&{alignItems:"stretch"},"& fieldset":{border:"none"},"&.Mui-focused":{color:Y},"&:not(.Mui-focused) .MuiOutlinedInput-input:not(:placeholder-shown)":{color:Y},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"},"& input":{padding:N.padding,color:"inherit","&::placeholder":{color:"var(--Quiet)",opacity:1}},"& textarea":{padding:N.padding,color:"inherit",resize:B,"&::placeholder":{color:"var(--Quiet)",opacity:1}},"& .MuiInputAdornment-root":{color:"var(--Quiet)"},...E&&{"& .MuiInputAdornment-root":{maxHeight:"none",height:"auto",alignSelf:"stretch",alignItems:"center",paddingTop:N.padTop+"px",paddingBottom:N.padBottom+"px",marginTop:0,marginBottom:0},"& .MuiInputAdornment-positionStart":{marginLeft:j,marginRight:"8px",width:N.iconSize+"px",minWidth:N.iconSize+"px",justifyContent:"center"},"& .MuiInputAdornment-positionEnd":{marginRight:"8px"},...w&&{"& input":{paddingLeft:0},"& textarea":{paddingLeft:0}}}},"& .MuiInputLabel-root":{color:"var(--Quiet)",fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",...qi(X.resting),transformOrigin:"top left",transition:"transform 0.15s ease, font-size 0.15s ease, color 0.15s ease",transform:"translate("+V+", "+G+"px)","&.MuiInputLabel-shrink":{transform:"translate("+V+", "+U+"px)",...qi(X.shrunk),color:"var(--Quiet)"},"&.Mui-focused":{color:Y},"&.Mui-disabled":{color:"var(--Quiet)",opacity:"var(--Disabled, 0.38)"}},"& .MuiOutlinedInput-notchedOutline legend":{display:"none"},"& .MuiOutlinedInput-notchedOutline":{top:0},"& .MuiOutlinedInput-root.Mui-focused":{outline:"none"},"& .MuiOutlinedInput-root:focus-within":{outline:"none"}},...L})})}),l&&s?de(h,{sx:{display:"flex",alignItems:"center",gap:"6px",marginTop:"4px",marginLeft:"2px"},children:[q&&le(q,{sx:{fontSize:N.iconSize,color:Z.icon,flexShrink:0}}),le(S,{sx:{color:Z.text,fontSize:"small"===r?"11px":"12px",margin:0},children:s})]}):n?le(S,{sx:{color:"var(--Quiet)",fontSize:"small"===r?"11px":"12px",marginTop:"4px",marginLeft:"2px"},children:n}):null]})}const _i=e=>e.charAt(0).toUpperCase()+e.slice(1),eo={small:{height:"var(--Small-Button-Height)",fontSize:"13px",padding:"4px 8px",iconSize:16},medium:{height:"var(--Button-Height)",fontSize:"14px",padding:"6px 12px",iconSize:18},large:{height:"var(--Large-Button-Height)",fontSize:"16px",padding:"8px 16px",iconSize:20}},ro={small:{height:48,fontSize:"13px",padding:"20px 12px 4px",labelSize:"11px",leftPad:12},medium:{height:56,fontSize:"14px",padding:"22px 14px 6px",labelSize:"12px",leftPad:14},large:{height:64,fontSize:"16px",padding:"24px 16px 6px",labelSize:"14px",leftPad:16}};function to({options:t=[],value:n,defaultValue:l="",onChange:s,label:d,labelPosition:c="top",size:u="medium",variant:p="outline",color:m="primary",selectionStyle:f="default",mode:g="standard",placeholder:x="Select…",showDividers:b=!1,showColorLabels:v=!0,startDecoration:y,disabled:S=!1,fullWidth:k=!1,className:B="",sx:w={},...C}){const T="default"===m?"primary":m,z=_i(T),A="var(--Buttons-"+z+"-Border)";"production"!==process.env.NODE_ENV&&("light"===p&&console.warn('[Select] variant="light" was removed and had never done anything — it was read by no code path. Rendering outline. For a lighter Select, use data-surface="Surface-Brightest" on its container.'),"light"===f&&console.warn('[Select] selectionStyle="light" was removed with the -Light button shades. It named --Buttons-{C}-Light-{Button,Text,Border}, which no design system publishes, and carried no fallbacks — a selected option rendered with no fill, no text colour and no border. Rendering default.'));const I="light"===p?"outline":p,W="light"===f?"default":f,R="default"===m?"var(--Text)":"var(--Text-"+z+")",[D,P]=r(l),[F,L]=r(!1),[H,M]=r(!1),[E,N]=r({top:0,left:0,width:0,direction:"down"}),O=a(null),Q=a(null),[V,j]=r(null),[G,U]=r(null),X=void 0!==n,Y=X?n:D,Z=t.flatMap(e=>e&&Array.isArray(e.options)?e.options:[e]).find(e=>("string"==typeof e?e:e.value)===Y),q=Z?"string"==typeof Z?Z:Z.label:"",J=""!==Y&&null!=Y,K="floating"===c,$="top"===c,_="color"===g,ee=K?ro[u]||ro.medium:eo[u]||eo.medium,re=i(e=>{X||P(e),s?.(e),L(!1),Q.current?.focus()},[X,s]),te=i(()=>{if(!Q.current)return{top:0,left:0,width:0};const e=Q.current.getBoundingClientRect(),r=window.innerHeight-e.bottom,t=e.top,a=r>=240||r>=t?"down":"up";return{top:"down"===a?e.bottom+4:void 0,bottom:"up"===a?window.innerHeight-e.top+4:void 0,left:e.left,width:e.width,direction:a}},[]),ae=i(()=>{S||L(e=>(e||N(te()),!e))},[S,te]);o(()=>{if(!F)return;const e=e=>{!O.current||O.current.contains(e.target)||e.target.closest("[data-select-dropdown]")||L(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[F]),o(()=>{if(!F||!Q.current)return;const e=Q.current.closest("[data-theme]"),r=Q.current.closest("[data-surface]");j(e?.getAttribute("data-theme")||null),U(r?.getAttribute("data-surface")||null);const t=()=>N(te());return window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}},[F,te]);const ie=a(null),oe=i(e=>{const r=ie.current;if(!r)return;const t=r.querySelectorAll('[role="option"]');if(!t.length)return;const a=r.querySelector('[role="option"]:focus');let i=Array.prototype.indexOf.call(t,a);i="down"===e?i<t.length-1?i+1:0:i>0?i-1:t.length-1,t[i].focus()},[]);o(()=>{F&&requestAnimationFrame(()=>{const e=ie.current;if(!e)return;const r=e.querySelector('[aria-selected="true"]'),t=e.querySelector('[role="option"]');(r||t)?.focus()})},[F]);const ne=F?xe.createPortal(le(h,{ref:ie,"data-select-dropdown":!0,"data-theme":V||void 0,role:"listbox","aria-label":d||"Options",sx:{position:"fixed",top:E.top??"unset",bottom:E.bottom??"unset",left:E.left,width:E.width+"px",backgroundColor:"var(--Hover)",border:"1px solid var(--Buttons-Default-Border)",borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:"none",zIndex:99999,maxHeight:"240px",overflowY:"auto",py:.5},children:(()=>{const r=(r,t,a)=>{const i="string"==typeof r?r:r.value,o="string"==typeof r?r:r.label,n="object"==typeof r?r.color:null,l=i===Y,s=function(e,r,t){const a=_i(t||"default");return r?{backgroundColor:"var(--Buttons-"+a+"-Button)",color:"var(--Buttons-"+a+"-Text)",border:"1px solid var(--Buttons-"+a+"-Border)",fontWeight:600}:{color:"var(--Text)",backgroundColor:"transparent",border:"1px solid transparent"}}(0,l,T),d=t===a-1;return de(e.Fragment,{children:[de(h,{role:"option",tabIndex:-1,"aria-selected":l,"aria-label":_&&!v?o:void 0,onClick:()=>re(i),onKeyDown:e=>((e,r)=>{if("Enter"===e.key||" "===e.key)return e.preventDefault(),void re(r);"ArrowDown"===e.key&&(e.preventDefault(),oe("down")),"ArrowUp"===e.key&&(e.preventDefault(),oe("up")),"Escape"===e.key&&(L(!1),Q.current?.focus())})(e,i),sx:{display:"flex",alignItems:"center",gap:1,px:1.5,py:0,mx:.5,my:"1px",minHeight:ee.height,cursor:"pointer",fontSize:ee.fontSize,fontFamily:"inherit",borderRadius:"4px",outline:"none",...s,transition:"background-color 0.1s ease","&:hover":l?{}:{backgroundColor:"var(--Buttons-"+z+"-Hover)",color:"var(--Buttons-"+z+"-Text)"},"&:active":l?{}:{backgroundColor:"var(--Buttons-"+z+"-Pressed)",color:"var(--Buttons-"+z+"-Text)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:[_&&n&&le(h,{sx:{height:"calc("+ee.height+" - 8px)",width:"calc("+ee.height+" - 8px)",borderRadius:"var(--Input-Swatch-Radius, var(--Button-Radius))",backgroundColor:n,border:"1px solid "+(l?"var(--Buttons-"+z+"-Border)":"var(--Border)"),flexShrink:0}}),(!_||v)&&le(oa,{style:{flex:1,color:"inherit",fontWeight:"inherit"},children:o}),l&&le(Qa,{size:"small",sx:{opacity:.6,flexShrink:0},children:le(ue,{})})]}),b&&!d&&le(h,{"aria-hidden":"true",sx:{height:"1px",backgroundColor:"var(--Border)",mx:1,my:.25}})]},i)};return t.map((a,i)=>{if(a&&Array.isArray(a.options)){const t=a.options;return de(e.Fragment,{children:[le(h,{role:"presentation",sx:{px:1.5,pt:0===i?.75:1.25,pb:.5,fontSize:"11px",fontFamily:"inherit",fontWeight:700,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--Text-Quiet)"},children:a.label}),t.map((e,a)=>r(e,a,t.length))]},"group-"+(a.label||i))}return r(a,i,t.length)})})()}),document.body):null;return de(h,{ref:O,className:"select-wrapper select-"+u+" select-label-"+c+" select-style-"+W+" select-variant-"+I+(F?" select-open":"")+(S?" select-disabled":"")+(B?" "+B:""),sx:{position:"relative",width:k?"100%":"auto",display:"inline-block",fontFamily:"inherit",...w},...C,children:[$&&d&&le("small"===u?oa:sa,{component:"label",style:{display:"block",marginBottom:"6px",color:S?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:S?"var(--Disabled, 0.38)":1},children:d}),le(h,{sx:{border:"1px solid "+A,borderRadius:"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",transition:"border-color 0.15s ease",boxShadow:"none","&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{children:de(h,{ref:Q,component:"button",type:"button",role:"combobox","aria-expanded":F,"aria-haspopup":"listbox","aria-label":d||x,tabIndex:S?-1:0,onClick:ae,onKeyDown:e=>"Escape"===e.key?(L(!1),void Q.current?.focus()):"Enter"===e.key||" "===e.key?(e.preventDefault(),void ae()):F||"ArrowDown"!==e.key&&"ArrowUp"!==e.key?(F&&"ArrowDown"===e.key&&(e.preventDefault(),oe("down")),void(F&&"ArrowUp"===e.key&&(e.preventDefault(),oe("up")))):(e.preventDefault(),void L(!0)),onFocus:()=>M(!0),onBlur:()=>M(!1),sx:{display:"flex",alignItems:"center",gap:1,width:"100%",minWidth:140,height:ee.height,padding:ee.padding,backgroundColor:"var(--Hover)",border:"none",borderRadius:0,color:J||F?R:"var(--Quiet)",fontSize:ee.fontSize,fontFamily:"inherit",cursor:S?"not-allowed":"pointer",opacity:S?"var(--Disabled, 0.38)":1,outline:"none",textAlign:"left",position:"relative",transition:"color 0.15s ease"},children:[y&&le(h,{sx:{display:"flex",alignItems:"center",flexShrink:0,color:"var(--Text-Quiet)"},children:y}),K&&d&&le(h,{sx:{position:"absolute",top:J||F?"6px":"50%",left:(ee.leftPad||14)+(y?32:0)+"px",transform:J||F?"scale(0.75)":"translateY(-50%)",transformOrigin:"top left",color:F?R:"var(--Quiet)",fontSize:ee.fontSize,fontWeight:400,pointerEvents:"none",transition:"top 0.15s ease, transform 0.15s ease, color 0.15s ease"},children:d}),le(h,{sx:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",...K&&{mt:J||F?"8px":0}},children:_&&J?de(h,{sx:{display:"flex",alignItems:"center",gap:1},children:[le(h,{sx:{height:"calc("+ee.height+" - 8px)",width:"calc("+ee.height+" - 8px)",borderRadius:"var(--Input-Swatch-Radius, var(--Button-Radius))",backgroundColor:Z&&"string"!=typeof Z&&Z.color||"transparent",border:"1px solid var(--Border)",flexShrink:0}}),v&&le(oa,{style:{color:"inherit",padding:0},children:q})]}):le(oa,{style:{color:"inherit",padding:0},children:J?q:K&&d?"":x})}),le(be,{sx:{fontSize:(ee.iconSize||18)+"px",color:"var(--Text-Quiet)",transform:F?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease",flexShrink:0}})]})})}),ne]})}const ao={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},io={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},oo={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},no={small:{px:"var(--Sm-Button-Padding, 8px)",fontSize:"var(--Sm-Button-Text, 14px)",iconSize:"var(--Sm-Button-Icon, 20px)",textPad:"var(--Sm-Button-Text-Padding, 4px)",indicatorThickness:"2px",minHeight:"var(--Sm-Button-Height, 24px)"},medium:{px:"var(--Button-Padding, 8px)",fontSize:"var(--Button-Text, 16px)",iconSize:"var(--Button-Icon, 20px)",textPad:"var(--Button-Text-Padding, 4px)",indicatorThickness:"2px",minHeight:"var(--Button-Height, 32px)"},large:{px:"var(--Lg-Button-Padding, 16px)",fontSize:"var(--Lg-Button-Text, 20px)",iconSize:"var(--Lg-Button-Icon, 32px)",textPad:"var(--Lg-Button-Text-Padding, 8px)",indicatorThickness:"2px",minHeight:"var(--Lg-Button-Height, 56px)"}},lo={horizontal:"Bottom","vertical-left":"Left","vertical-right":"Right",vertical:"Right"},so=e=>lo[e]||"Bottom",co=e=>"horizontal"===e;function uo(e,r,t,a){return r?{}:{["border"+so(e)]:t+" solid color-mix(in srgb, "+a+" 50%, transparent)"}}function ho(e,r,t,a){return{borderBottom:"none",borderLeft:"none",borderRight:"none",["border"+so(e)]:t+" solid "+(r?a:"transparent")}}const po=l({value:0,setValue:()=>{},variant:"standard",color:"primary",size:"medium",orientation:"horizontal",scrollable:!1,baseline:!0,tabsId:""}),mo=()=>n(po);function fo({children:e,defaultValue:a=0,value:o,onChange:n,variant:l="standard",color:s="primary",size:d="medium",orientation:c="horizontal",scrollable:u=!1,baseline:p=!0,className:m="",sx:f={},...g}){const[x,b]=r(a),v=void 0!==o,y=v?o:x,S=t(),k=i(e=>{v||b(e),n?.(e)},[v,n]);return le(po.Provider,{value:{value:y,setValue:k,variant:l,color:s,size:d,orientation:c,scrollable:u,baseline:p,tabsId:S},children:le(h,{className:"tabs tabs-"+c+" tabs-"+d+" tabs-"+l+("standard"!==l?" tabs-"+s:"")+(u?" tabs-scrollable":"")+" "+m,sx:{display:"flex",flexDirection:co(c)?"column":"row",width:"100%",overflow:"hidden",...f},...g,children:e})})}function go({children:t,rounded:n=!1,className:l="",sx:s={},...d}){const{variant:c,color:u,size:p,orientation:m,scrollable:f,baseline:g,tabsId:x}=mo(),b=a(null),v=a(null),[y,S]=r(!1),[k,B]=r(!1),w=co(m),C="standard"===c,T="solid"===c,z="light"===c,A="dark"===c,I=function(e,r=!0){return r?{["border"+so(e)]:"1px solid var(--Border-Variant)"}:{}}(m,g),W=C?void 0:T?ao[u]:z?io[u]:A?oo[u]:void 0,R=C?void 0:A?"Surface-Dimmest":z?"Surface-Brightest":"Surface",D=i(()=>{const e=v.current;e&&f&&w&&(S(e.scrollLeft>1),B(e.scrollLeft<e.scrollWidth-e.clientWidth-1))},[f,w]);o(()=>{D();const e=v.current;if(!e||!f)return;e.addEventListener("scroll",D,{passive:!0});const r=new ResizeObserver(D);return r.observe(e),()=>{e.removeEventListener("scroll",D),r.disconnect()}},[f,D]);const P=e=>{const r=v.current;if(!r)return;const t=.6*r.clientWidth;r.scrollBy({left:e*t,behavior:"smooth"})},F={display:"inline-flex",alignItems:"center",justifyContent:"center",width:"28px",minWidth:"28px",border:"none",backgroundColor:"transparent",color:"var(--Text-Quiet)",cursor:"pointer",fontSize:"16px",fontFamily:"inherit",lineHeight:1,flexShrink:0,transition:"color 0.15s ease, background-color 0.15s ease","&:hover":{color:"var(--Text)",backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-4px"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"default","&:hover":{backgroundColor:"transparent",color:"var(--Text-Quiet)"}}},L=e.Children.toArray(t).filter(e.isValidElement).map((r,t)=>e.cloneElement(r,{_index:t,key:r.key||t}));return de(h,{ref:b,"data-theme":W||void 0,"data-surface":R||void 0,className:"tab-list tab-list-"+c+" tab-list-"+p+" tab-list-"+m+(f?" tab-list-scrollable":"")+" "+l,onKeyDown:e=>{const r=f?v.current:b.current,t=r?.querySelectorAll('[role="tab"]:not([aria-disabled="true"])');if(!t?.length)return;const a=Array.from(t).indexOf(document.activeElement);if(a<0)return;const i=w?"ArrowRight":"ArrowDown",o=w?"ArrowLeft":"ArrowUp";if(e.key===i){e.preventDefault();const r=t[(a+1)%t.length];r.focus(),f&&r.scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})}else if(e.key===o){e.preventDefault();const r=t[(a-1+t.length)%t.length];r.focus(),f&&r.scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})}else"Home"===e.key?(e.preventDefault(),t[0].focus(),f&&t[0].scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})):"End"===e.key&&(e.preventDefault(),t[t.length-1].focus(),f&&t[t.length-1].scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"}))},sx:{display:"flex",flexDirection:w?"row":"column",gap:0,position:"relative",backgroundColor:"var(--Background)",...I,padding:C&&!n?0:"4px",overflow:"hidden",borderRadius:n?"var(--Style-Border-Radius)":0,...s},...d,children:[f&&w&&le(h,{component:"button","aria-label":"Scroll tabs left",onClick:()=>P(-1),disabled:!y,className:"tab-list-scroll-btn tab-list-scroll-btn-left",sx:F,children:"‹"}),le(h,f&&w?{ref:v,role:"tablist","aria-orientation":m,className:"tab-list-scroll-container",sx:{display:"flex",flexDirection:"row",overflowX:"auto",scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},flex:1,minWidth:0},children:L}:{ref:v,role:"tablist","aria-orientation":m,sx:{display:"flex",flexDirection:w?"row":"column",flex:1},children:L}),f&&w&&le(h,{component:"button","aria-label":"Scroll tabs right",onClick:()=>P(1),disabled:!k,className:"tab-list-scroll-btn tab-list-scroll-btn-right",sx:F,children:"›"})]})}function xo({children:e,value:r,_index:t=0,disabled:a=!1,startDecorator:i,endDecorator:o,iconOnly:n=!1,className:l="",sx:s={},...d}){const{value:c,setValue:u,variant:p,color:m,size:f,orientation:g,tabsId:x}=mo(),b=no[f]||no.medium,v="standard"===p,y="light"===p,S="dark"===p,k=void 0!==r?r:t,B=c===k,w=v?"var(--Buttons-"+({default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"}[m]||"Default")+"-Border)":"var(--Text)";return de(h,{component:"button",role:"tab",id:"tab-"+x+"-"+k,"data-theme":(v?void 0:"solid"===p?ao[m]:y?io[m]:S?oo[m]:void 0)||void 0,"data-surface":(v?void 0:S?"Surface-Dimmest":y?"Surface-Brightest":"Surface")||void 0,"aria-selected":B,"aria-controls":"tabpanel-"+x+"-"+k,"aria-disabled":a||void 0,tabIndex:B?0:-1,onClick:()=>{a||u(k)},className:"tab tab-"+f+(B?" tab-selected":"")+(a?" tab-disabled":"")+(n?" tab-icon-only":"")+" "+l,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:"2px",padding:"0 "+(n?"0":b.px),minHeight:b.minHeight,fontSize:b.fontSize,fontFamily:"inherit",fontWeight:500,lineHeight:1.3,color:B?"var(--Text)":"var(--Quiet)",backgroundColor:"transparent",border:"none",...ho(g,B,b.indicatorThickness,w),cursor:a?"not-allowed":"pointer",opacity:a?"var(--Disabled, 0.38)":1,position:"relative",outline:"none",transition:"color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease",flexShrink:0,whiteSpace:"nowrap",...!a&&{"&:hover":{backgroundColor:"var(--Hover)",...uo(g,B,b.indicatorThickness,w)},"&:active":{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-4px"}},...s},...d,children:[i&&le(h,{className:"tab-start-decorator",sx:{display:"inline-flex",fontSize:b.iconSize,lineHeight:1,flexShrink:0},children:i}),!n&&e&&(()=>{const r="small"===f?ga:oa;return le(h,{className:"tab-label",sx:{display:"inline-flex",alignItems:"center",padding:"4px "+b.textPad},children:le(r,{style:{color:"inherit",fontWeight:"inherit"},children:e})})})(),o&&le(h,{className:"tab-end-decorator",sx:{display:"inline-flex",fontSize:b.iconSize,lineHeight:1,flexShrink:0},children:o})]})}function bo({children:e,value:r,className:t="",sx:a={},...i}){const{value:o,size:n,tabsId:l}=mo();return o===r?le(h,{role:"tabpanel",id:"tabpanel-"+l+"-"+r,"aria-labelledby":"tab-"+l+"-"+r,className:"tab-panel tab-panel-"+n+" "+t,sx:{paddingTop:"16px",fontSize:(no[n]||no.medium).fontSize,fontFamily:"inherit",color:"var(--Text)",...a},...i,children:e}):null}const vo=e.forwardRef(function({theme:e=null,surface:r="Surface",children:t,minHeight:a=160,sx:i={}},o){return le(h,{ref:o,"data-theme":e||void 0,"data-surface":r,sx:{p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:a,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",...i},children:t})}),yo="__null__",So=[{label:"Default",value:yo},{label:"Primary",value:"Primary"},{label:"Secondary",value:"Secondary"},{label:"Tertiary",value:"Tertiary"},{label:"Neutral",value:"Neutral"},{label:"Info",value:"Info"},{label:"Success",value:"Success"},{label:"Warning",value:"Warning"},{label:"Error",value:"Error"}],ko=["Surface-Dimmest","Surface-Dim","Surface","Surface-Bright","Surface-Brightest","Container","Container-Highest","Container-High","Container-Low","Container-Lowest"];function Bo({theme:e=null,onThemeChange:r,surface:t="Surface",onSurfaceChange:a,surfaces:i=ko,size:o="small"}){const n=i.map(e=>({value:e,label:e}));return de(k,{direction:"row",spacing:1,sx:{alignItems:"center"},children:[le(h,{sx:{width:160},children:le(to,{options:So,value:e??yo,onChange:e=>r?.(e===yo?null:e),labelPosition:"none",size:o,variant:"outline",color:"default","aria-label":"Background theme",fullWidth:!0})}),le(h,{sx:{width:180},children:le(to,{options:n,value:t,onChange:e=>a?.(e),labelPosition:"none",size:o,variant:"outline",color:"default","aria-label":"Surface",fullWidth:!0})})]})}function wo(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var Co,To={exports:{}},zo={exports:{}},Ao={};var Io,Wo,Ro,Do,Po,Fo,Lo,Ho,Mo,Eo,No,Oo,Qo,Vo,jo={};
2
2
  /** @license React v16.13.1
3
3
  * react-is.development.js
4
4
  *
@@ -6,10 +6,10 @@ import e,{useState as r,useId as t,useRef as a,useCallback as o,useEffect as i,u
6
6
  *
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
- */function Hi(){return ki||(ki=1,"production"===process.env.NODE_ENV?vi.exports=function(){if(xi)return yi;xi=1;var e="function"==typeof Symbol&&Symbol.for,r=e?Symbol.for("react.element"):60103,t=e?Symbol.for("react.portal"):60106,a=e?Symbol.for("react.fragment"):60107,o=e?Symbol.for("react.strict_mode"):60108,i=e?Symbol.for("react.profiler"):60114,n=e?Symbol.for("react.provider"):60109,l=e?Symbol.for("react.context"):60110,s=e?Symbol.for("react.async_mode"):60111,d=e?Symbol.for("react.concurrent_mode"):60111,c=e?Symbol.for("react.forward_ref"):60112,u=e?Symbol.for("react.suspense"):60113,h=e?Symbol.for("react.suspense_list"):60120,p=e?Symbol.for("react.memo"):60115,m=e?Symbol.for("react.lazy"):60116,f=e?Symbol.for("react.block"):60121,g=e?Symbol.for("react.fundamental"):60117,x=e?Symbol.for("react.responder"):60118,b=e?Symbol.for("react.scope"):60119;function v(e){if("object"==typeof e&&null!==e){var h=e.$$typeof;switch(h){case r:switch(e=e.type){case s:case d:case a:case i:case o:case u:return e;default:switch(e=e&&e.$$typeof){case l:case c:case m:case p:case n:return e;default:return h}}case t:return h}}}function y(e){return v(e)===d}return yi.AsyncMode=s,yi.ConcurrentMode=d,yi.ContextConsumer=l,yi.ContextProvider=n,yi.Element=r,yi.ForwardRef=c,yi.Fragment=a,yi.Lazy=m,yi.Memo=p,yi.Portal=t,yi.Profiler=i,yi.StrictMode=o,yi.Suspense=u,yi.isAsyncMode=function(e){return y(e)||v(e)===s},yi.isConcurrentMode=y,yi.isContextConsumer=function(e){return v(e)===l},yi.isContextProvider=function(e){return v(e)===n},yi.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},yi.isForwardRef=function(e){return v(e)===c},yi.isFragment=function(e){return v(e)===a},yi.isLazy=function(e){return v(e)===m},yi.isMemo=function(e){return v(e)===p},yi.isPortal=function(e){return v(e)===t},yi.isProfiler=function(e){return v(e)===i},yi.isStrictMode=function(e){return v(e)===o},yi.isSuspense=function(e){return v(e)===u},yi.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===i||e===o||e===u||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===p||e.$$typeof===n||e.$$typeof===l||e.$$typeof===c||e.$$typeof===g||e.$$typeof===x||e.$$typeof===b||e.$$typeof===f)},yi.typeOf=v,yi}():vi.exports=(Si||(Si=1,"production"!==process.env.NODE_ENV&&function(){var e="function"==typeof Symbol&&Symbol.for,r=e?Symbol.for("react.element"):60103,t=e?Symbol.for("react.portal"):60106,a=e?Symbol.for("react.fragment"):60107,o=e?Symbol.for("react.strict_mode"):60108,i=e?Symbol.for("react.profiler"):60114,n=e?Symbol.for("react.provider"):60109,l=e?Symbol.for("react.context"):60110,s=e?Symbol.for("react.async_mode"):60111,d=e?Symbol.for("react.concurrent_mode"):60111,c=e?Symbol.for("react.forward_ref"):60112,u=e?Symbol.for("react.suspense"):60113,h=e?Symbol.for("react.suspense_list"):60120,p=e?Symbol.for("react.memo"):60115,m=e?Symbol.for("react.lazy"):60116,f=e?Symbol.for("react.block"):60121,g=e?Symbol.for("react.fundamental"):60117,x=e?Symbol.for("react.responder"):60118,b=e?Symbol.for("react.scope"):60119;function v(e){if("object"==typeof e&&null!==e){var h=e.$$typeof;switch(h){case r:var f=e.type;switch(f){case s:case d:case a:case i:case o:case u:return f;default:var g=f&&f.$$typeof;switch(g){case l:case c:case m:case p:case n:return g;default:return h}}case t:return h}}}var y=s,S=d,k=l,B=n,w=r,C=c,T=a,z=m,A=p,I=t,R=i,W=o,D=u,P=!1;function F(e){return v(e)===d}Li.AsyncMode=y,Li.ConcurrentMode=S,Li.ContextConsumer=k,Li.ContextProvider=B,Li.Element=w,Li.ForwardRef=C,Li.Fragment=T,Li.Lazy=z,Li.Memo=A,Li.Portal=I,Li.Profiler=R,Li.StrictMode=W,Li.Suspense=D,Li.isAsyncMode=function(e){return P||(P=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),F(e)||v(e)===s},Li.isConcurrentMode=F,Li.isContextConsumer=function(e){return v(e)===l},Li.isContextProvider=function(e){return v(e)===n},Li.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},Li.isForwardRef=function(e){return v(e)===c},Li.isFragment=function(e){return v(e)===a},Li.isLazy=function(e){return v(e)===m},Li.isMemo=function(e){return v(e)===p},Li.isPortal=function(e){return v(e)===t},Li.isProfiler=function(e){return v(e)===i},Li.isStrictMode=function(e){return v(e)===o},Li.isSuspense=function(e){return v(e)===u},Li.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===i||e===o||e===u||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===p||e.$$typeof===n||e.$$typeof===l||e.$$typeof===c||e.$$typeof===g||e.$$typeof===x||e.$$typeof===b||e.$$typeof===f)},Li.typeOf=v}()),Li)),vi.exports}
9
+ */function Go(){return Wo||(Wo=1,"production"===process.env.NODE_ENV?zo.exports=function(){if(Co)return Ao;Co=1;var e="function"==typeof Symbol&&Symbol.for,r=e?Symbol.for("react.element"):60103,t=e?Symbol.for("react.portal"):60106,a=e?Symbol.for("react.fragment"):60107,i=e?Symbol.for("react.strict_mode"):60108,o=e?Symbol.for("react.profiler"):60114,n=e?Symbol.for("react.provider"):60109,l=e?Symbol.for("react.context"):60110,s=e?Symbol.for("react.async_mode"):60111,d=e?Symbol.for("react.concurrent_mode"):60111,c=e?Symbol.for("react.forward_ref"):60112,u=e?Symbol.for("react.suspense"):60113,h=e?Symbol.for("react.suspense_list"):60120,p=e?Symbol.for("react.memo"):60115,m=e?Symbol.for("react.lazy"):60116,f=e?Symbol.for("react.block"):60121,g=e?Symbol.for("react.fundamental"):60117,x=e?Symbol.for("react.responder"):60118,b=e?Symbol.for("react.scope"):60119;function v(e){if("object"==typeof e&&null!==e){var h=e.$$typeof;switch(h){case r:switch(e=e.type){case s:case d:case a:case o:case i:case u:return e;default:switch(e=e&&e.$$typeof){case l:case c:case m:case p:case n:return e;default:return h}}case t:return h}}}function y(e){return v(e)===d}return Ao.AsyncMode=s,Ao.ConcurrentMode=d,Ao.ContextConsumer=l,Ao.ContextProvider=n,Ao.Element=r,Ao.ForwardRef=c,Ao.Fragment=a,Ao.Lazy=m,Ao.Memo=p,Ao.Portal=t,Ao.Profiler=o,Ao.StrictMode=i,Ao.Suspense=u,Ao.isAsyncMode=function(e){return y(e)||v(e)===s},Ao.isConcurrentMode=y,Ao.isContextConsumer=function(e){return v(e)===l},Ao.isContextProvider=function(e){return v(e)===n},Ao.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},Ao.isForwardRef=function(e){return v(e)===c},Ao.isFragment=function(e){return v(e)===a},Ao.isLazy=function(e){return v(e)===m},Ao.isMemo=function(e){return v(e)===p},Ao.isPortal=function(e){return v(e)===t},Ao.isProfiler=function(e){return v(e)===o},Ao.isStrictMode=function(e){return v(e)===i},Ao.isSuspense=function(e){return v(e)===u},Ao.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===o||e===i||e===u||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===p||e.$$typeof===n||e.$$typeof===l||e.$$typeof===c||e.$$typeof===g||e.$$typeof===x||e.$$typeof===b||e.$$typeof===f)},Ao.typeOf=v,Ao}():zo.exports=(Io||(Io=1,"production"!==process.env.NODE_ENV&&function(){var e="function"==typeof Symbol&&Symbol.for,r=e?Symbol.for("react.element"):60103,t=e?Symbol.for("react.portal"):60106,a=e?Symbol.for("react.fragment"):60107,i=e?Symbol.for("react.strict_mode"):60108,o=e?Symbol.for("react.profiler"):60114,n=e?Symbol.for("react.provider"):60109,l=e?Symbol.for("react.context"):60110,s=e?Symbol.for("react.async_mode"):60111,d=e?Symbol.for("react.concurrent_mode"):60111,c=e?Symbol.for("react.forward_ref"):60112,u=e?Symbol.for("react.suspense"):60113,h=e?Symbol.for("react.suspense_list"):60120,p=e?Symbol.for("react.memo"):60115,m=e?Symbol.for("react.lazy"):60116,f=e?Symbol.for("react.block"):60121,g=e?Symbol.for("react.fundamental"):60117,x=e?Symbol.for("react.responder"):60118,b=e?Symbol.for("react.scope"):60119;function v(e){if("object"==typeof e&&null!==e){var h=e.$$typeof;switch(h){case r:var f=e.type;switch(f){case s:case d:case a:case o:case i:case u:return f;default:var g=f&&f.$$typeof;switch(g){case l:case c:case m:case p:case n:return g;default:return h}}case t:return h}}}var y=s,S=d,k=l,B=n,w=r,C=c,T=a,z=m,A=p,I=t,W=o,R=i,D=u,P=!1;function F(e){return v(e)===d}jo.AsyncMode=y,jo.ConcurrentMode=S,jo.ContextConsumer=k,jo.ContextProvider=B,jo.Element=w,jo.ForwardRef=C,jo.Fragment=T,jo.Lazy=z,jo.Memo=A,jo.Portal=I,jo.Profiler=W,jo.StrictMode=R,jo.Suspense=D,jo.isAsyncMode=function(e){return P||(P=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),F(e)||v(e)===s},jo.isConcurrentMode=F,jo.isContextConsumer=function(e){return v(e)===l},jo.isContextProvider=function(e){return v(e)===n},jo.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},jo.isForwardRef=function(e){return v(e)===c},jo.isFragment=function(e){return v(e)===a},jo.isLazy=function(e){return v(e)===m},jo.isMemo=function(e){return v(e)===p},jo.isPortal=function(e){return v(e)===t},jo.isProfiler=function(e){return v(e)===o},jo.isStrictMode=function(e){return v(e)===i},jo.isSuspense=function(e){return v(e)===u},jo.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===o||e===i||e===u||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===p||e.$$typeof===n||e.$$typeof===l||e.$$typeof===c||e.$$typeof===g||e.$$typeof===x||e.$$typeof===b||e.$$typeof===f)},jo.typeOf=v}()),jo)),zo.exports}
10
10
  /*
11
11
  object-assign
12
12
  (c) Sindre Sorhus
13
13
  @license MIT
14
- */function Mi(){if(wi)return Bi;wi=1;var e=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;return Bi=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(r).map(function(e){return r[e]}).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach(function(e){a[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(e){return!1}}()?Object.assign:function(a,o){for(var i,n,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(a),s=1;s<arguments.length;s++){for(var d in i=Object(arguments[s]))r.call(i,d)&&(l[d]=i[d]);if(e){n=e(i);for(var c=0;c<n.length;c++)t.call(i,n[c])&&(l[n[c]]=i[n[c]])}}return l},Bi}function Ei(){if(Ti)return Ci;Ti=1;return Ci="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}function Ni(){return Ai?zi:(Ai=1,zi=Function.call.bind(Object.prototype.hasOwnProperty))}if("production"!==process.env.NODE_ENV){var Oi=Hi();bi.exports=function(){if(Di)return Wi;Di=1;var e=Hi(),r=Mi(),t=Ei(),a=Ni(),o=function(){if(Ri)return Ii;Ri=1;var e=function(){};if("production"!==process.env.NODE_ENV){var r=Ei(),t={},a=Ni();e=function(e){var r="Warning: "+e;"undefined"!=typeof console&&console.error(r);try{throw new Error(r)}catch(e){}}}function o(o,i,n,l,s){if("production"!==process.env.NODE_ENV)for(var d in o)if(a(o,d)){var c;try{if("function"!=typeof o[d]){var u=Error((l||"React class")+": "+n+" type `"+d+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof o[d]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw u.name="Invariant Violation",u}c=o[d](i,d,l,n,null,r)}catch(e){c=e}if(!c||c instanceof Error||e((l||"React class")+": type specification of "+n+" `"+d+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof c+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),c instanceof Error&&!(c.message in t)){t[c.message]=!0;var h=s?s():"";e("Failed "+n+" type: "+c.message+(null!=h?h:""))}}}return o.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(t={})},Ii=o}(),i=function(){};function n(){return null}return"production"!==process.env.NODE_ENV&&(i=function(e){var r="Warning: "+e;"undefined"!=typeof console&&console.error(r);try{throw new Error(r)}catch(e){}}),Wi=function(l,s){var d="function"==typeof Symbol&&Symbol.iterator,c="<<anonymous>>",u={array:f("array"),bigint:f("bigint"),bool:f("boolean"),func:f("function"),number:f("number"),object:f("object"),string:f("string"),symbol:f("symbol"),any:m(n),arrayOf:function(e){return m(function(r,a,o,i,n){if("function"!=typeof e)return new p("Property `"+n+"` of component `"+o+"` has invalid PropType notation inside arrayOf.");var l=r[a];if(!Array.isArray(l))return new p("Invalid "+i+" `"+n+"` of type `"+b(l)+"` supplied to `"+o+"`, expected an array.");for(var s=0;s<l.length;s++){var d=e(l,s,o,i,n+"["+s+"]",t);if(d instanceof Error)return d}return null})},element:m(function(e,r,t,a,o){var i=e[r];return l(i)?null:new p("Invalid "+a+" `"+o+"` of type `"+b(i)+"` supplied to `"+t+"`, expected a single ReactElement.")}),elementType:m(function(r,t,a,o,i){var n=r[t];return e.isValidElementType(n)?null:new p("Invalid "+o+" `"+i+"` of type `"+b(n)+"` supplied to `"+a+"`, expected a single ReactElement type.")}),instanceOf:function(e){return m(function(r,t,a,o,i){if(!(r[t]instanceof e)){var n=e.name||c;return new p("Invalid "+o+" `"+i+"` of type `"+((l=r[t]).constructor&&l.constructor.name?l.constructor.name:c)+"` supplied to `"+a+"`, expected instance of `"+n+"`.")}var l;return null})},node:m(function(e,r,t,a,o){return x(e[r])?null:new p("Invalid "+a+" `"+o+"` supplied to `"+t+"`, expected a ReactNode.")}),objectOf:function(e){return m(function(r,o,i,n,l){if("function"!=typeof e)return new p("Property `"+l+"` of component `"+i+"` has invalid PropType notation inside objectOf.");var s=r[o],d=b(s);if("object"!==d)return new p("Invalid "+n+" `"+l+"` of type `"+d+"` supplied to `"+i+"`, expected an object.");for(var c in s)if(a(s,c)){var u=e(s,c,i,n,l+"."+c,t);if(u instanceof Error)return u}return null})},oneOf:function(e){return Array.isArray(e)?m(function(r,t,a,o,i){for(var n=r[t],l=0;l<e.length;l++)if(h(n,e[l]))return null;var s=JSON.stringify(e,function(e,r){return"symbol"===v(r)?String(r):r});return new p("Invalid "+o+" `"+i+"` of value `"+String(n)+"` supplied to `"+a+"`, expected one of "+s+".")}):("production"!==process.env.NODE_ENV&&i(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),n)},oneOfType:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&i("Invalid argument supplied to oneOfType, expected an instance of array."),n;for(var r=0;r<e.length;r++){var o=e[r];if("function"!=typeof o)return i("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+y(o)+" at index "+r+"."),n}return m(function(r,o,i,n,l){for(var s=[],d=0;d<e.length;d++){var c=(0,e[d])(r,o,i,n,l,t);if(null==c)return null;c.data&&a(c.data,"expectedType")&&s.push(c.data.expectedType)}return new p("Invalid "+n+" `"+l+"` supplied to `"+i+"`"+(s.length>0?", expected one of type ["+s.join(", ")+"]":"")+".")})},shape:function(e){return m(function(r,a,o,i,n){var l=r[a],s=b(l);if("object"!==s)return new p("Invalid "+i+" `"+n+"` of type `"+s+"` supplied to `"+o+"`, expected `object`.");for(var d in e){var c=e[d];if("function"!=typeof c)return g(o,i,n,d,v(c));var u=c(l,d,o,i,n+"."+d,t);if(u)return u}return null})},exact:function(e){return m(function(o,i,n,l,s){var d=o[i],c=b(d);if("object"!==c)return new p("Invalid "+l+" `"+s+"` of type `"+c+"` supplied to `"+n+"`, expected `object`.");var u=r({},o[i],e);for(var h in u){var m=e[h];if(a(e,h)&&"function"!=typeof m)return g(n,l,s,h,v(m));if(!m)return new p("Invalid "+l+" `"+s+"` key `"+h+"` supplied to `"+n+"`.\nBad object: "+JSON.stringify(o[i],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var f=m(d,h,n,l,s+"."+h,t);if(f)return f}return null})}};function h(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}function p(e,r){this.message=e,this.data=r&&"object"==typeof r?r:{},this.stack=""}function m(e){if("production"!==process.env.NODE_ENV)var r={},a=0;function o(o,n,l,d,u,h,m){if(d=d||c,h=h||l,m!==t){if(s){var f=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw f.name="Invariant Violation",f}if("production"!==process.env.NODE_ENV&&"undefined"!=typeof console){var g=d+":"+l;!r[g]&&a<3&&(i("You are manually calling a React.PropTypes validation function for the `"+h+"` prop on `"+d+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),r[g]=!0,a++)}}return null==n[l]?o?null===n[l]?new p("The "+u+" `"+h+"` is marked as required in `"+d+"`, but its value is `null`."):new p("The "+u+" `"+h+"` is marked as required in `"+d+"`, but its value is `undefined`."):null:e(n,l,d,u,h)}var n=o.bind(null,!1);return n.isRequired=o.bind(null,!0),n}function f(e){return m(function(r,t,a,o,i,n){var l=r[t];return b(l)!==e?new p("Invalid "+o+" `"+i+"` of type `"+v(l)+"` supplied to `"+a+"`, expected `"+e+"`.",{expectedType:e}):null})}function g(e,r,t,a,o){return new p((e||"React class")+": "+r+" type `"+t+"."+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+o+"`.")}function x(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(x);if(null===e||l(e))return!0;var r=function(e){var r=e&&(d&&e[d]||e["@@iterator"]);if("function"==typeof r)return r}(e);if(!r)return!1;var t,a=r.call(e);if(r!==e.entries){for(;!(t=a.next()).done;)if(!x(t.value))return!1}else for(;!(t=a.next()).done;){var o=t.value;if(o&&!x(o[1]))return!1}return!0;default:return!1}}function b(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||!!r&&("Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol)}(r,e)?"symbol":r}function v(e){if(null==e)return""+e;var r=b(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}function y(e){var r=v(e);switch(r){case"array":case"object":return"an "+r;case"boolean":case"date":case"regexp":return"a "+r;default:return r}}return p.prototype=Error.prototype,u.checkPropTypes=o,u.resetWarningCache=o.resetWarningCache,u.PropTypes=u,u},Wi}()(Oi.isElement,!0)}else bi.exports=function(){if(Fi)return Pi;Fi=1;var e=Ei();function r(){}function t(){}return t.resetWarningCache=r,Pi=function(){function a(r,t,a,o,i,n){if(n!==e){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function o(){return a}a.isRequired=a;var i={array:a,bigint:a,bool:a,func:a,number:a,object:a,string:a,symbol:a,any:a,arrayOf:o,element:a,elementType:a,instanceOf:o,node:a,objectOf:o,oneOf:o,oneOfType:o,shape:o,exact:o,checkPropTypes:t,resetWarningCache:r};return i.PropTypes=i,i}}()();var Qi=gi(bi.exports);function Vi({code:e,label:t="Copy code"}){const[a,o]=r(!1);return le(B,{title:a?"Copied!":t,children:le(Io,{size:"small",onClick:async()=>{try{await navigator.clipboard.writeText(e),o(!0),setTimeout(()=>o(!1),2e3)}catch(e){console.error("Copy failed:",e)}},"aria-label":a?"Copied":t,sx:{color:a?"var(--Icons-Success, var(--Text))":"var(--Quiet)"},children:le(a?ue:ce,{fontSize:"small"})})})}Vi.propTypes={code:Qi.string.isRequired,label:Qi.string};function ji({code:e="",language:r="JSX",showCopy:t=!0,showHeader:a=!0,maxHeight:o,wrap:i=!1,sx:n={},...l}){return de(h,{"data-theme":"Neutral","data-surface":"Surface-Dimmest",sx:{backgroundColor:"var(--Background)",borderRadius:"min(var(--Card-Radius, var(--Style-Border-Radius)), 12px)",overflow:"hidden",...n},...l,children:[a&&(r||t)&&de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,px:2,py:1,borderBottom:"1px solid var(--Border)",minHeight:40},children:[le(ga,{color:"quiet",children:r}),t&&e?le(Vi,{code:e}):null]}),le(h,{sx:{p:2,overflow:"auto",maxHeight:o},children:le(h,{component:"pre",sx:{margin:0,fontFamily:"inherit"},children:le(h,{component:"code",sx:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:"13px",lineHeight:1.6,color:"var(--Text)",whiteSpace:i?"pre-wrap":"pre",wordBreak:i?"break-word":"normal",display:"block"},children:e})})})]})}function Gi(e){if(!e)return null;const r=e.trim();if(/^#[0-9a-f]{3}$/i.test(r))return{r:parseInt(r[1]+r[1],16),g:parseInt(r[2]+r[2],16),b:parseInt(r[3]+r[3],16),a:1};if(/^#[0-9a-f]{6}$/i.test(r))return{r:parseInt(r.substring(1,3),16),g:parseInt(r.substring(3,5),16),b:parseInt(r.substring(5,7),16),a:1};if(/^#[0-9a-f]{8}$/i.test(r))return{r:parseInt(r.substring(1,3),16),g:parseInt(r.substring(3,5),16),b:parseInt(r.substring(5,7),16),a:parseInt(r.substring(7,9),16)/255};const t=r.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+%?))?\s*\)/);if(t){let e=1;return void 0!==t[4]&&(e=t[4].endsWith("%")?parseFloat(t[4])/100:parseFloat(t[4])),{r:Math.round(parseFloat(t[1])),g:Math.round(parseFloat(t[2])),b:Math.round(parseFloat(t[3])),a:e}}return null}function Ui(e,r){if(!e||!r)return e||r;if(e.a>=1)return e;const t=e.a;return{r:Math.round(e.r*t+r.r*(1-t)),g:Math.round(e.g*t+r.g*(1-t)),b:Math.round(e.b*t+r.b*(1-t)),a:1}}function Xi(e){const r=e=>e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4);return.2126*r(e.r/255)+.7152*r(e.g/255)+.0722*r(e.b/255)}function Yi(e,r,t){const a=Gi(e),o=Gi(r),i=Gi(t);if(!a||!o)return null;const n=i?Ui(o,i):o.a<1?null:o;if(!n)return null;const l=Ui(a,n);if(!l)return null;const s=Xi(l),d=Xi(n);return((Math.max(s,d)+.05)/(Math.min(s,d)+.05)).toFixed(2)}function qi(e){return"undefined"==typeof window?null:getComputedStyle(document.documentElement).getPropertyValue(e).trim()}ji.propTypes={code:Qi.string,language:Qi.string,showCopy:Qi.bool,showHeader:Qi.bool,maxHeight:Qi.oneOfType([Qi.number,Qi.string]),wrap:Qi.bool,sx:Qi.object};const Zi={"display-large":"Display Large","display-medium":"Display Medium","display-small":"Display Small",h1:"H1",h2:"H2",h3:"H3",h4:"H4",h5:"H5",h6:"H6","subtitle-small":"Subtitle Small",subtitle:"Subtitle Medium","subtitle-large":"Subtitle Large","body-small":"Body Small","body-small-semibold":"Body Small Semibold",body:"Body Medium","body-semibold":"Body Medium Semibold","body-large":"Body Large","body-large-semibold":"Body Large Semibold",label:"Label","label-small":"Label Small","label-large":"Label Large",caption:"Caption","caption-bold":"Caption Bold",legal:"Legal","legal-semibold":"Legal Semibold",eyebrow:"Eyebrow Medium","eyebrow-small":"Eyebrow Small","eyebrow-large":"Eyebrow Large",button:"Button Standard","button-small":"Button Small","button-extra-small":"Button Extra Small","number-large":"Number Large","number-medium":"Number Medium","number-small":"Number Small"};function Ji(){const e=({color:e})=>de(h,{sx:{textAlign:"center"},children:[le(h,{sx:{width:"80px",height:"80px",backgroundColor:`var(${e.var})`,borderRadius:"8px",border:"1px solid var(--Border)",mb:1,mx:"auto"}}),le(w,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",mb:.5,wordBreak:"break-word"},children:e.name}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",fontSize:"10px",fontFamily:"monospace",wordBreak:"break-all"},children:e.var})]});return de(k,{spacing:6,children:[de(h,{children:[le(w,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Brand Colors (Static)"}),le(k,{direction:"row",spacing:3,sx:{justifyContent:"center",flexWrap:"wrap",gap:3},children:[{name:"Primary",var:"--Primary-Color-11"},{name:"Secondary",var:"--Secondary-Color-11"},{name:"Tertiary",var:"--Tertiary-Color-11"}].map(r=>le(e,{color:r},r.var))})]}),de(h,{children:[le(w,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Background Colors (Dynamic)"}),le(w,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Update based on selected Background variant and Mode"}),le(C,{container:!0,spacing:2,sx:{justifyContent:"center"},children:[{name:"Default Background",cssVar:"var(--Theme-Default-Surfaces-Surface)"},{name:"Primary Background",cssVar:"var(--Theme-Primary-Surfaces-Surface)"},{name:"Secondary Background",cssVar:"var(--Theme-Secondary-Surfaces-Surface)"},{name:"Tertiary Background",cssVar:"var(--Theme-Tertiary-Surfaces-Surface)"},{name:"Neutral Background",cssVar:"var(--Theme-Neutral-Surfaces-Surface)"},{name:"Neutral-Variant Background",cssVar:"var(--Theme-Neutral-Variant-Surfaces-Surface)"}].map(e=>le(C,{item:!0,sx:{display:"flex",justifyContent:"center"},children:de(h,{sx:{textAlign:"center"},children:[le(h,{sx:{minWidth:"max(var(--Button-Height), var(--Min-Button-Width))",minHeight:"var(--Button-Height)",backgroundColor:e.cssVar,borderRadius:"var(--Style-Border-Radius)",border:"2px solid var(--Border)",mb:1}}),le(w,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",wordBreak:"break-word"},children:e.name})]})},e.name))})]}),de(h,{children:[le(w,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Dynamic Colors (Update with Mode, Background & Surface)"}),le(T,{severity:"info",sx:{backgroundColor:"var(--Container-Low)",mb:3,border:"1px solid var(--Border)"},children:de(w,{variant:"body2",children:["Most colors update automatically based on the current"," ",le("strong",{children:"Mode"})," (Light/Dark), ",le("strong",{children:"Background"})," ","variant, and ",le("strong",{children:"Surface"})," theme. Only Primary, Secondary, and Tertiary colors are fixed brand colors."]})}),le(w,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"These colors automatically adapt based on:"}),de(k,{spacing:1,sx:{mb:4},children:[de(h,{sx:{display:"flex",gap:2},children:[le(w,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Mode:"}),le(w,{variant:"body2",children:"Light or Dark theme"})]}),de(h,{sx:{display:"flex",gap:2},children:[le(w,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Background:"}),le(w,{variant:"body2",children:"Default, Primary, Secondary, Tertiary, Neutral, or Neutral-Variant"})]}),de(h,{sx:{display:"flex",gap:2},children:[le(w,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Surface:"}),le(w,{variant:"body2",children:"Theme surface layer selection"})]})]}),le(k,{spacing:4,children:[{name:"Layout & Surfaces",colors:[{name:"Background",var:"--Background"},{name:"Border",var:"--Border"},{name:"Border-Variant",var:"--Border-Variant"}]},{name:"Text & Links",colors:[{name:"Header",var:"--Header"},{name:"Text",var:"--Text"},{name:"Text-Quiet",var:"--Text-Quiet"},{name:"Hotlink",var:"--Hotlink"},{name:"Hotlink-Visited",var:"--Hotlink-Visited"}]},{name:"Buttons - Primary",colors:[{name:"Button BG",var:"--Button-Primary-Button"},{name:"Button Text",var:"--Button-Primary-Text"},{name:"Button Hover",var:"--Button-Primary-Hover"},{name:"Button Active",var:"--Button-Primary-Pressed"},{name:"Focus-Visible",var:"--Focus-Visible"}]},{name:"Buttons - Secondary",colors:[{name:"Button BG",var:"--Button-Secondary-Button"},{name:"Button Text",var:"--Button-Secondary-Text"},{name:"Button Hover",var:"--Button-Secondary-Hover"},{name:"Button Active",var:"--Button-Secondary-Pressed"},{name:"Focus-Visible",var:"--Focus-Visible"}]},{name:"Buttons - State",colors:[{name:"Info Button",var:"--Button-Info-Button"},{name:"Success Button",var:"--Button-Success-Button"},{name:"Warning Button",var:"--Button-Warning-Button"},{name:"Error Button",var:"--Button-Error-Button"}]},{name:"Icons",colors:[{name:"Default",var:"--Icons-Default"},{name:"Primary",var:"--Icons-Primary"},{name:"Secondary",var:"--Icons-Secondary"},{name:"Tertiary",var:"--Icons-Tertiary"},{name:"Neutral",var:"--Icons-Neutral"},{name:"Info",var:"--Icons-Info"},{name:"Success",var:"--Icons-Success"},{name:"Warning",var:"--Icons-Warning"},{name:"Error",var:"--Icons-Error"}]},{name:"Chips & Badges",colors:[{name:"Primary BG",var:"--Tags-Primary-BG"},{name:"Primary Text",var:"--Tags-Primary-Text"},{name:"Secondary BG",var:"--Tags-Secondary-BG"},{name:"Secondary Text",var:"--Tags-Secondary-Text"},{name:"Tertiary BG",var:"--Tags-Tertiary-BG"},{name:"Tertiary Text",var:"--Tags-Tertiary-Text"},{name:"Neutral BG",var:"--Tags-Neutral-BG"},{name:"Neutral Text",var:"--Tags-Neutral-Text"},{name:"Info BG",var:"--Tags-Info-BG"},{name:"Info Text",var:"--Tags-Info-Text"},{name:"Success BG",var:"--Tags-Success-BG"},{name:"Success Text",var:"--Tags-Success-Text"},{name:"Warning BG",var:"--Tags-Warning-BG"},{name:"Warning Text",var:"--Tags-Warning-Text"},{name:"Error BG",var:"--Tags-Error-BG"},{name:"Error Text",var:"--Tags-Error-Text"}]}].map(r=>de(h,{children:[le(w,{variant:"h6",sx:{mb:2,fontWeight:600},children:r.name}),le(C,{container:!0,spacing:2,sx:{justifyContent:"center"},children:r.colors.map(r=>le(C,{item:!0,sx:{display:"flex",justifyContent:"center"},children:le(e,{color:r})},r.var))})]},r.name))})]}),de(h,{sx:{pt:4,borderTop:"1px solid var(--Border)"},children:[le(w,{variant:"h5",sx:{mb:2,fontWeight:700},children:"How to Use"}),de(k,{spacing:2,children:[de(h,{children:[le(w,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Static Colors"}),de(w,{variant:"body2",sx:{color:"var(--Text-Secondary)"},children:["Use brand colors (",le("code",{style:{backgroundColor:"var(--Container)",padding:"2px 4px",borderRadius:"4px"},children:"--Primary-Color-11"}),","," ",le("code",{style:{backgroundColor:"var(--Container)",padding:"2px 4px",borderRadius:"4px"},children:"--Secondary-Color-11"}),","," ",le("code",{style:{backgroundColor:"var(--Container)",padding:"2px 4px",borderRadius:"4px"},children:"--Tertiary-Color-11"}),") for brand elements that should never change."]})]}),de(h,{children:[le(w,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Dynamic Colors"}),le(w,{variant:"body2",sx:{color:"var(--Text-Secondary)"},children:"Use dynamic color variables for all UI elements. They will automatically update when users change Mode, Background, or Surface settings."})]}),de(h,{children:[le(w,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Example Usage"}),le(h,{component:"pre",sx:{backgroundColor:"var(--Container)",p:2,borderRadius:"8px",overflow:"auto",fontSize:"12px",border:"1px solid var(--Border)",color:"var(--Text)"},children:"/* Dynamic - updates with theme changes */\ncolor: var(--Text);\nbackgroundColor: var(--Background);\nborderColor: var(--Border);\n\n/* Static - brand colors stay the same */\naccentColor: var(--Primary-Color-11);"})]})]})]})]})}function Ki(){const e=({name:e,varName:r,baseValue:t})=>le(h,{sx:{mb:2},children:de(h,{sx:{display:"flex",alignItems:"center",gap:2,mb:1},children:[le(h,{"aria-hidden":"true",sx:{width:`var(${r})`,minWidth:20,height:24,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:.5,border:"1px solid var(--Border)"}}),de(k,{spacing:.5,children:[le(w,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:r}),de(w,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Base: ",t," (with cognitive multiplier)"]})]})]})}),r=({name:e,varName:r,value:t})=>de(h,{sx:{mb:2},children:[le(h,{"aria-hidden":"true",sx:{width:100,height:t,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:1,border:"1px solid var(--Border)",mb:1}}),le(w,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:r}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:t})]});return de(k,{spacing:3,sx:{p:2},children:[de("section",{children:[le(w,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Spacing Scale"}),le(w,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Spacing values are multiplied by the cognitive multiplier for accessibility. Each spacing value includes a visual reference and text label for clarity."}),le(k,{spacing:1,children:[{name:"Quarter",var:"--Spacing-Quarter",baseValue:"2px"},{name:"Half",var:"--Spacing-Half",baseValue:"4px"},{name:"1-and-Half",var:"--Spacing-1-and-Half",baseValue:"12px"},{name:"1",var:"--Spacing-1",baseValue:"8px"},{name:"2",var:"--Spacing-2",baseValue:"16px"},{name:"3",var:"--Spacing-3",baseValue:"24px"},{name:"4",var:"--Spacing-4",baseValue:"32px"},{name:"5",var:"--Spacing-5",baseValue:"40px"},{name:"6",var:"--Spacing-6",baseValue:"48px"},{name:"7",var:"--Spacing-7",baseValue:"56px"},{name:"8",var:"--Spacing-8",baseValue:"64px"},{name:"9",var:"--Spacing-9",baseValue:"72px"},{name:"10",var:"--Spacing-10",baseValue:"80px"}].map(r=>le(e,{name:r.name,varName:r.var,baseValue:r.baseValue},r.var))})]}),de("section",{children:[le(w,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Sizing Scale"}),le(w,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Fixed sizing values for components and layouts. Each size is labeled with its CSS variable and pixel value."}),le(C,{container:!0,spacing:3,children:[{name:"Quarter",var:"--Sizing-Quarter",value:"2px"},{name:"Half",var:"--Sizing-Half",value:"4px"},{name:"1-and-Half",var:"--Sizing-1-and-Half",value:"12px"},{name:"1",var:"--Sizing-1",value:"8px"},{name:"2",var:"--Sizing-2",value:"16px"},{name:"3",var:"--Sizing-3",value:"24px"},{name:"4",var:"--Sizing-4",value:"32px"},{name:"5",var:"--Sizing-5",value:"40px"},{name:"6",var:"--Sizing-6",value:"48px"},{name:"7",var:"--Sizing-7",value:"56px"},{name:"8",var:"--Sizing-8",value:"64px"},{name:"9",var:"--Sizing-9",value:"72px"},{name:"10",var:"--Sizing-10",value:"80px"},{name:"11",var:"--Sizing-11",value:"88px"},{name:"12",var:"--Sizing-12",value:"96px"},{name:"13",var:"--Sizing-13",value:"104px"},{name:"14",var:"--Sizing-14",value:"112px"},{name:"15",var:"--Sizing-15",value:"160px"},{name:"16",var:"--Sizing-16",value:"240px"},{name:"17",var:"--Sizing-17",value:"320px"},{name:"18",var:"--Sizing-18",value:"480px"}].map(e=>le(C,{item:!0,xs:12,sm:6,md:4,lg:3,children:le(r,{name:e.name,varName:e.var,value:e.value})},e.var))})]}),de("section",{children:[le(w,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Negative Sizing"}),le(w,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Negative values for margins and offsets. Use these to reduce or remove default spacing when needed."}),le(C,{container:!0,spacing:3,children:[{name:"Negative-Quarter",var:"--Sizing-Negative-Quarter",value:"-2px"},{name:"Negative-Half",var:"--Sizing-Negative-Half",value:"-4px"},{name:"Negative-1-and-Half",var:"--Sizing-Negative-1-and-Half",value:"-12px"},{name:"Negative-1",var:"--Sizing-Negative-1",value:"-8px"}].map(e=>le(C,{item:!0,xs:12,sm:6,md:4,lg:3,children:de(h,{children:[le(w,{variant:"subtitle2",sx:{fontWeight:600},children:e.name}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:e.var}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:e.value})]})},e.var))})]}),de("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(w,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Container Padding"}),de(h,{sx:{p:"var(--Spacing-3)",backgroundColor:"var(--Container-Low)",border:"2px dashed var(--Buttons-Primary-Button)",borderRadius:1},children:[de(w,{variant:"body2",children:["Default container padding: ",le("strong",{children:"var(--Spacing-3)"})," = 24px"]}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",mt:1},children:"Use this variable for consistent padding around main content areas."})]})]}),de("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(w,{variant:"h5",component:"h2",sx:{mb:3,fontWeight:700},children:"Practical Examples"}),de("article",{children:[le(w,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Padding Examples"}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",mb:2,display:"block"},children:"Different padding values create different visual breathing room."}),le(C,{container:!0,spacing:2,sx:{mb:4},children:["var(--Spacing-1)","var(--Spacing-2)","var(--Spacing-3)","var(--Spacing-4)"].map(e=>le(C,{item:!0,xs:12,sm:6,children:de(h,{sx:{p:e,backgroundColor:"var(--Container)",border:"1px solid var(--Border)",borderRadius:1},children:[de(w,{variant:"subtitle2",children:["Padding: ",e]}),le(w,{variant:"caption",sx:{display:"block",mt:1,color:"var(--Text-Secondary)"},children:"Content with spacing applied"})]})},e))})]}),de("article",{children:[le(w,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Gap Examples"}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",mb:2,display:"block"},children:"Gap controls spacing between flex/grid children without adding extra elements."}),le(k,{spacing:3,children:["var(--Spacing-1)","var(--Spacing-2)","var(--Spacing-3)"].map(e=>de(h,{children:[le(k,{direction:"row",spacing:e,sx:{mb:1},children:[1,2,3].map(e=>le(h,{"aria-hidden":"true",sx:{width:60,height:60,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:1,flexShrink:0}},e))}),de(w,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Gap: ",e]})]},e))})]})]}),de(h,{role:"note",sx:{p:2,backgroundColor:"var(--Container-Low)",borderRadius:1,borderLeft:"4px solid var(--Buttons-Primary-Button)",mt:3},children:[le(w,{variant:"subtitle2",sx:{fontWeight:600,mb:1},children:"✓ Accessibility Best Practices Used"}),de("ul",{style:{margin:"0.5rem 0",paddingLeft:"1.5rem"},children:[le("li",{children:de(w,{variant:"caption",children:[le("strong",{children:'aria-hidden="true"'})," on purely decorative visual elements"]})}),le("li",{children:le(w,{variant:"caption",children:"All spacing information conveyed through text labels and values"})}),le("li",{children:de(w,{variant:"caption",children:["No empty decorative ",le("code",{children:"<div>"})," elements in DOM"]})}),le("li",{children:de(w,{variant:"caption",children:["Semantic HTML: ",le("code",{children:"<section>"})," and ",le("code",{children:"<article>"})," for structure"]})}),le("li",{children:le(w,{variant:"caption",children:"CSS-based spacing (padding/margin) for actual layout, not decorative divs"})}),le("li",{children:le(w,{variant:"caption",children:"Full keyboard navigation and screen reader support"})})]})]})]})}Object.entries({Display:["display-large","display-medium","display-small"],Headings:["h1","h2","h3","h4","h5","h6"],Subtitle:["subtitle-small","subtitle","subtitle-large"],Body:["body-small","body-small-semibold","body","body-semibold","body-large","body-large-semibold"],Label:["label","label-small","label-large"],Caption:["caption","caption-bold"],Legal:["legal","legal-semibold"],Eyebrow:["eyebrow-small","eyebrow","eyebrow-large"],Button:["button-extra-small","button-small","button"],Number:["number-large","number-medium","number-small"]}).map(([e,r])=>({label:e,options:r.map(e=>({value:e,label:Zi[e]}))}));const $i=["default","primary","secondary","tertiary","neutral","info","success","warning","error"],_i=e=>e.charAt(0).toUpperCase()+e.slice(1);function en(e){const r=_i(e);return{type:"outline",color:r,trackOff:"var(--Background)",trackOffBorder:"var(--Border)",trackOn:"var(--Buttons-"+r+"-Button)",trackOnBorder:"var(--Buttons-"+r+"-Border)",dotOff:"var(--Quiet)",dotOn:"var(--Buttons-"+r+"-Text)",iconOff:"var(--Background)",iconOn:"var(--Buttons-"+r+"-Button)"}}function rn(e){const r=_i(e);return{type:"light",color:r,trackOff:"var(--Border-Variant)",trackOffBorder:"var(--Border)",trackOn:"var(--"+r+"-Color-11)",trackOnBorder:"var(--Buttons-"+r+"-Border)",dotOff:"var(--Quiet)",dotOn:"var(--Buttons-"+r+"-Border)",iconOff:"var(--Quiet)",iconOn:"var(--"+r+"-Color-11)",dataTheme:r,dataSurface:"Surface-Brightest"}}const tn={small:{trackW:28,trackH:16,dotRadius:"var(--Sizing-2, 16px)",icon:8},medium:{trackW:40,trackH:24,dotRadius:"var(--Sizing-2-and-Half, 20px)",icon:16},large:{trackW:56,trackH:32,dotRadius:"var(--Sizing-2-and-Half, 20px)",icon:16}};function an({variant:e="default",size:r="medium",checked:t,defaultChecked:a,onChange:o,disabled:i=!1,label:n,labelPlacement:l="end",name:s,value:d,icon:c,iconOn:u,iconOff:h,className:p="",sx:m={},"aria-label":f,"aria-labelledby":g,...x}){const v=function(){const e={};return $i.forEach(r=>{e[r+"-outline"]=en(r),e[r+"-light"]=rn(r)}),e.default={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Buttons-Default-Button)",trackOnBorder:"var(--Buttons-Default-Border)",dotOff:"var(--Quiet)",dotOn:"var(--Buttons-Default-Text)",iconOff:"var(--Background)",iconOn:"var(--Buttons-Default-Button)"},e["default-outline"]={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Buttons-Default-Button)",trackOnBorder:"var(--Buttons-Default-Border)",dotOff:"var(--Quiet)",dotOn:"var(--Buttons-Default-Text)",iconOff:"var(--Background)",iconOn:"var(--Buttons-Default-Button)"},e.outline={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Buttons-Default-Button)",trackOnBorder:"var(--Buttons-Default-Border)",dotOff:"var(--Quiet)",dotOn:"var(--Buttons-Default-Text)",iconOff:"var(--Background)",iconOn:"var(--Buttons-Default-Button)"},e.primary=en("primary"),e.light=rn("primary"),e}(),y=v[e]||v.default,S=tn[r]||tn.medium,k="small"===r?ia:sa,B=S.trackH-4,w=Math.max(24,S.trackW),C=Math.max(24,S.trackH),T=(C-S.trackH)/2,A={width:B,height:B,borderRadius:S.dotRadius,boxShadow:"none",border:"none",display:"flex",alignItems:"center",justifyContent:"center",transition:"background-color var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))","& > *":{width:S.icon,height:S.icon,display:"block"}},I={width:S.trackW,minWidth:24,height:C,minHeight:24,padding:0,overflow:"visible",opacity:i?"var(--Disabled, 0.38)":1,"& .MuiSwitch-switchBase":{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",justifyContent:"flex-start",alignItems:"center",paddingTop:0,paddingBottom:0,paddingLeft:"2px",paddingRight:w-S.trackW+2+"px",color:"transparent",transition:"justify-content var(--Motion-Duration-Instant, 100ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))",transform:"none","& .MuiSwitch-input":{left:0,top:0,width:"100%",height:"100%",margin:0},"& .MuiSwitch-thumb":{...A,backgroundColor:y.dotOff,color:y.iconOff},"&.Mui-checked":{justifyContent:"flex-end",transform:"none","& .MuiSwitch-thumb":{...A,backgroundColor:y.dotOn,color:y.iconOn},"& + .MuiSwitch-track":{backgroundColor:y.trackOn,borderColor:y.trackOnBorder,opacity:1}},"&:hover, &.Mui-checked:hover":{backgroundColor:"transparent"},"&:hover + .MuiSwitch-track":{boxShadow:io},"&:active + .MuiSwitch-track":{boxShadow:oo},"&.Mui-focusVisible + .MuiSwitch-track":{outline:"1px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled + .MuiSwitch-track":{opacity:1}},"& .MuiSwitch-track":{width:S.trackW,height:S.trackH,borderRadius:"var(--Sizing-3, 24px)",backgroundColor:y.trackOff,border:"1px solid "+y.trackOffBorder,boxSizing:"border-box",opacity:1,position:"absolute",top:T,left:0,transition:"background-color var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1)), border-color var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1)), box-shadow var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))"},...m},R=e.includes("-light")||"light"===e,W=void 0!==h?h:c,D=void 0!==u?u:c,P=e=>le("span",{className:"MuiSwitch-thumb",children:e}),F=le(z,{...void 0!==W||void 0!==D?{icon:P(W),checkedIcon:P(D)}:{},checked:t,defaultChecked:a,onChange:o,disabled:i,name:s,value:d,slotProps:{input:{...f?{"aria-label":f}:{},...g?{"aria-labelledby":g}:{}}},className:"switch-"+e+" "+p,sx:I,disableRipple:!0,...R&&y.dataTheme?{"data-theme":y.dataTheme,"data-surface":y.dataSurface||"Surface-Dim"}:{},...x});return n?le(b,{control:F,label:le(k,{component:"span",sx:{color:i?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===r?"13px":"15px",fontWeight:500,opacity:i?"var(--Disabled, 0.38)":1},children:n}),labelPlacement:l,sx:{gap:"8px",marginLeft:0,marginRight:0}}):F}const on=an,nn=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",ln={default:"Default",quiet:"Quiet",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},sn=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],dn=["filled","outlined","rounded","twotone","sharp"],cn={filled:"Filled",outlined:"Outlined",rounded:"Rounded",twotone:"Two Tone",sharp:"Sharp"},un={Home:{filled:Se,outlined:We,rounded:Qe,twotone:_e,sharp:ur},Favorite:{filled:ye,outlined:De,rounded:Ve,twotone:er,sharp:hr},Delete:{filled:ke,outlined:Pe,rounded:je,twotone:rr,sharp:pr},Settings:{filled:Be,outlined:Fe,rounded:Ge,twotone:tr,sharp:mr},Search:{filled:we,outlined:we,rounded:Ue,twotone:ar,sharp:fr},Star:{filled:Ce,outlined:Le,rounded:Xe,twotone:or,sharp:gr},Person:{filled:he,outlined:He,rounded:Ye,twotone:ir,sharp:xr},Notifications:{filled:Te,outlined:Me,rounded:qe,twotone:nr,sharp:br},Visibility:{filled:ze,outlined:Ee,rounded:Ze,twotone:lr,sharp:vr},ShoppingCart:{filled:Ae,outlined:Ne,rounded:Je,twotone:sr,sharp:yr},Lock:{filled:Ie,outlined:Oe,rounded:Ke,twotone:dr,sharp:Sr},Info:{filled:Re,outlined:xe,rounded:$e,twotone:cr,sharp:kr}};function hn({ratio:e,threshold:r}){if(!e)return le(ga,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=r;return de(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:t?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:[e,":1"]}),le(ga,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function pn({label:e,ratio:r,threshold:t,note:a}){return de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(h,{sx:{flex:1},children:[le(ia,{style:{color:"var(--Text)"},children:e}),a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:a})]}),le(hn,{ratio:r,threshold:t})]})}function mn({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"primary":"primary-outline",size:"small",onClick:t,children:e})}function fn(){const[e,t]=r("filled"),[a,o]=r("default"),[n,l]=r("medium"),[s,d]=r("40"),[c,u]=r(!1),[p,m]=r("Home"),[f,g]=r(""),[x,b]=r({}),v=ln[a]||"Default",y="twotone"===e,S="custom"===n?(parseInt(s,10)||40)+"px":{xs:"12px",small:"16px",medium:"24px",large:"36px"}[n]||"24px",B=function(e,r){return un[e]?.[r]||un[e]?.filled||Se}(p,e),w=function(e){return{outlined:"Outlined",rounded:"Rounded",twotone:"TwoTone",sharp:"Sharp"}[e]||""}(e),T=p+w+"Icon",z=f.trim().length>0,A="<Icon>\n <"+T+' />\n</Icon>\n{/* aria-hidden="true" by default */}',I='<Icon aria-label="'+(z?f.trim():p+" icon")+'">\n <'+T+' />\n</Icon>\n{/* role="img" added automatically */}';return i(()=>{b({background:qi("--Background"),iconColor:qi("--Icons-"+v),iconVariant:qi("--Icons-Variant-"+v)})},[a,v]),de(h,{sx:{pb:8},children:[le(qt,{children:"Icon"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(h,{sx:{p:4,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:200,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",gap:2},children:le(Oa,{color:a,size:n,fontSize:"custom"===n?parseInt(s,10)||40:void 0,disabled:c,twoTone:y,"aria-label":z?f.trim():void 0,children:le(B,{})})}),le(ji,{code:(()=>{const e=[];"default"!==a&&e.push('color="'+a+'"'),"custom"===n?(e.push('size="custom"'),e.push("fontSize={"+(parseInt(s,10)||40)+"}")):"medium"!==n&&e.push('size="'+n+'"'),y&&e.push("twoTone"),c&&e.push("disabled"),z&&e.push('aria-label="'+f.trim()+'"');const r=e.length?" "+e.join(" "):"";return"import "+T+" from '@mui/icons-material/"+p+(w||"")+"';\n\n<Icon"+r+">\n <"+T+" />\n</Icon>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ICON"}),le(h,{component:"input",type:"text",value:p,onChange:e=>m(e.target.value),placeholder:"e.g. Home, Favorite, Delete",sx:{width:"100%",padding:"6px 10px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",boxSizing:"border-box","&:focus":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px",borderColor:"var(--Focus-Visible)"}}}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Enter a MUI icon name."," ",le(h,{component:"a",href:"https://mui.com/material-ui/material-icons/",target:"_blank",rel:"noopener noreferrer",sx:{color:"var(--Text-Primary)",textDecoration:"underline","&:hover":{color:"var(--Header-Primary)"}},children:"Browse MUI Icons ↗"})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:dn.map(r=>le(mn,{label:cn[r],selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:sn.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>{const r=ln[e],t=a===e;return le(h,{component:"button",onClick:()=>o(e),"aria-label":"Select "+nn(e),"aria-pressed":t,title:nn(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Icons-"+r+")",border:t?"2px solid var(--Text)":"1px solid var(--Border)",outline:t?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:t&&le(ue,{sx:{fontSize:16,color:"var(--Background)",pointerEvents:"none"}})},e)})})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["small","medium","large","custom"].map(e=>le(mn,{label:nn(e),selected:n===e,onClick:()=>l(e)},e))}),"custom"===n&&de(h,{sx:{display:"flex",alignItems:"center",gap:1,mt:1.5},children:[le(h,{component:"input",type:"number",value:s,onChange:e=>d(e.target.value),"aria-label":"Custom font size in pixels",sx:{width:72,padding:"4px 8px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",outline:"none","&:focus":{borderColor:"var(--Focus-Visible)"}}}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"px"})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ARIA LABEL"}),le(h,{component:"input",type:"text",value:f,onChange:e=>g(e.target.value),placeholder:"Leave empty for decorative (aria-hidden)",sx:{width:"100%",padding:"6px 10px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",boxSizing:"border-box","&:focus":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px",borderColor:"var(--Focus-Visible)"}}}),le(ga,{style:{color:z?"var(--Tags-Success-Text)":"var(--Text-Quiet)",display:"block",marginTop:6},children:z?'✓ Meaningful — role="img" aria-label="'+f.trim()+'"':'Decorative — aria-hidden="true" (invisible to screen readers)'})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Reduces opacity to 0.38"})]}),le(an,{checked:c,onChange:e=>u(e.target.checked),size:"small","aria-label":"Toggle disabled"})]})]})}),le(ci,{value:1,children:de(h,{sx:{p:3},children:[de(ia,{color:"quiet",style:{marginBottom:24},children:[cn[e]," / ",nn(a)," / ","custom"===n?s+"px":n,z?" / meaningful":" / decorative"]}),de(k,{spacing:3,children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Icon Contrast (WCAG 1.4.11 — 3:1)"}),le(ia,{color:"quiet",style:{marginBottom:16},children:"Non-text elements must contrast 3:1 against the page background."}),le(pn,{label:"var(--Icons-"+v+") vs. var(--Background)",ratio:Yi(x.iconColor,x.background),threshold:3,note:T+" at "+S+" in "+nn(a)+" color"}),y&&le(pn,{label:"var(--Icons-Variant-"+v+") vs. var(--Background)",ratio:Yi(x.iconVariant,x.background),threshold:3,note:"Two-tone secondary fill — must also meet 3:1"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)",backgroundColor:z?"var(--Tags-Success-BG, rgba(0,200,0,0.05))":"transparent",px:1,borderRadius:"4px"},children:[de(ia,{style:{fontWeight:600},children:["Current icon — ",z?"meaningful ✓":"decorative"]}),le(h,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:z?I:A})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Decorative (no aria-label):"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:'aria-hidden="true" is applied automatically. The icon is invisible to screen readers. Use this when the icon is purely visual — e.g. a decorative bullet or inline illustration.'}),le(h,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:A})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Meaningful (with aria-label):"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:'role="img" is added automatically. The label is announced by screen readers. Use this when the icon conveys information that is not present in surrounding text.'}),le(h,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:I})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:["Disabled state",c?" ← current":"",":"]}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Opacity 0.38 — visual cue only. To disable an action, disable the wrapping interactive element (button, link), not the icon itself."})]}),y&&de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:["Two-tone",y?" ← current":"",":"]}),de(ga,{style:{color:"var(--Text-Quiet)"},children:["Secondary fill uses var(--Icons-Variant-",v,"). Both the primary and secondary fills must meet 3:1 contrast independently."]})]}),de(h,{sx:{py:1.5},children:[de(ia,{children:["Touch target — ",S," icon","small"===n?" ⚠":" ✓",":"]}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"small"===n?"Small icons (20px) need a 24px minimum target area around them (WCAG 2.5.5). Wrap in a button with padding.":"Icon is "+S+" — meets 24px minimum. Ensure the wrapping interactive element also meets 24×24px."})]})]})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Size Reference"}),le(k,{spacing:0,children:[{label:"Small",s:"small",px:"20px",note:"Inline text, compact UI"},{label:"Medium",s:"medium",px:"24px",note:"Standard UI — default"},{label:"Large",s:"large",px:"36px",note:"Emphasis, empty states, hero areas"},{label:"Custom",s:"custom",px:"any",note:"Ensure 24×24px minimum touch target (WCAG 2.5.5)"}].map(({label:e,s:r,px:t,note:a},o,i)=>de(h,{sx:{py:1.5,borderBottom:o<i.length-1?"1px solid var(--Border)":"none",display:"flex",justifyContent:"space-between",alignItems:"flex-start"},children:[de(h,{children:[de(ia,{children:[e," — ",t]}),le(ga,{style:{color:"var(--Text-Quiet)"},children:a})]}),n===r&&le(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:"var(--Tags-Success-BG)",color:"var(--Tags-Success-Text)"},children:"current"})]},e))})]})]})]})})]})})})]})]})}const gn={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},xn={small:{size:32,iconSize:"16px",borderRadius:"8px"},medium:{size:40,iconSize:"20px",borderRadius:"10px"},large:{size:48,iconSize:"24px",borderRadius:"12px"}};function bn({children:e,color:r="primary",variant:t="solid",size:a="medium",className:o="",sx:i={},...n}){const l=xn[a]||xn.medium,s=gn[r]||gn.primary;let d,c;switch(t){case"light":d=s,c="Surface-Brightest";break;case"dark":d=s,c="Surface-Dimmest";break;default:d=s,c="Surface"}return le(h,{"data-theme":d,"data-surface":c,className:"icon-badge icon-badge-"+t+" icon-badge-"+a+" icon-badge-"+r+" "+o,sx:{width:l.size,height:l.size,borderRadius:l.borderRadius,backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& svg":{width:l.iconSize,height:l.iconSize,fontSize:l.iconSize,color:"inherit",stroke:"currentColor"},...i},...n,children:e})}function vn({variant:t="outlined",color:a="default",size:o="medium",disabled:i=!1,orientation:n="horizontal",spacing:l=0,fit:s,fullWidth:d=!1,equalWidth:c=!1,multiple:u=!1,value:p,defaultValue:m,onChange:f,children:g,className:x="",sx:b={},"aria-label":v,...y}){const[S,k]=r(m??(u?[]:null)),B=void 0!==p,w=B?p:S,C=u?Array.isArray(w)?w:null==w?[]:[w]:null,T="horizontal"===n,z=0===l,A="light"===t,I="ghost"===t,R=s??(d?"fill":c?"equal":"hug"),W="fill"===R,D="equal"===R&&T,P=(F=a).charAt(0).toUpperCase()+F.slice(1);var F;const L="var(--Buttons-"+P+"-Border)",H="var(--Buttons-"+P+"-Button)",M="var(--Buttons-"+P+"-Text)",E="default"===a?void 0:P,N=e.Children.toArray(g).filter(Boolean),O=N.length,Q=(e,r)=>t=>{const a=u?C.includes(e)?C.filter(r=>r!==e):[...C,e]:e;B||k(a),f?.(a,t),r?.(t)},V=N.map((r,t)=>{if(!e.isValidElement(r))return r;const n=0===t,l=t===O-1,s=r.props.value??t,d=(c=s,u?C.includes(c):w===c);var c;let p;if(z&&O>1){const e="var(--Style-Border-Radius)";p=T?n&&l?e:n?e+" 0 0 "+e:l?"0 "+e+" "+e+" 0":"0":n&&l?e:n?e+" "+e+" 0 0":l?"0 0 "+e+" "+e:"0"}const m=z&&O>1?{borderRadius:p,...!n&&(T?{marginLeft:"calc(-1 * var(--Button-Border-Width))"}:{marginTop:"calc(-1 * var(--Button-Border-Width))"}),position:"relative","&:hover, &:focus-visible":{zIndex:1}}:{},f=I?{backgroundColor:"var(--Background) !important",color:"var(--Text) !important",borderColor:L+" !important"}:{backgroundColor:H+" !important",color:M+" !important",borderColor:L+" !important"},g={...m,transform:"none !important","&:hover, &:active, &:focus-visible":{transform:"none !important"},...d?{...f,"&:hover, &:active, &.Mui-focusVisible, &:focus-visible":f}:{},...d?{}:{color:"var(--Quiet)",backgroundColor:"transparent","&:hover":{backgroundColor:"var(--Hover)",color:"var(--Text)",zIndex:1},"&:active":{backgroundColor:"var(--Pressed)",color:"var(--Text)"}},...I&&!d?{border:"none !important","&:hover":{border:"none !important"}}:{},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px",zIndex:2},...r.props.sx},x=e.cloneElement(r,{variant:r.props.variant??(I?d?a+"-outline":"ghost":d?a:a+"-outline"),size:r.props.size??o,disabled:r.props.disabled??i,onClick:Q(s,r.props.onClick),"aria-pressed":d,sx:g});return A&&!d?le(h,{"data-theme":E,"data-surface":"Surface-Brightest",sx:{display:"contents"},children:x},t):e.cloneElement(x,{key:t})});return le(h,{role:"group","aria-label":v,className:"btn-group btn-group-"+t+" btn-group-"+a+" "+x,sx:{...D?{display:W?"grid":"inline-grid",gridAutoFlow:"column",gridAutoColumns:"1fr",justifyItems:"stretch",alignItems:"stretch",width:W?"100%":"fit-content"}:{display:W?"flex":"inline-flex",flexDirection:T?"row":"column",alignItems:"stretch",width:W?"100%":"auto"},gap:z?0:l,border:"none",borderRadius:"var(--Style-Border-Radius)",...b},...y,children:V})}const yn=["Link","Chip","Badge","Caption","Label","Tag","BodySmall","LegalSemibold","Legal","LabelSmall","LabelExtraSmall","EyebrowSmall","ButtonSmall"];function Sn(r){let t=!1;return e.Children.forEach(r,r=>{(function(r){if(!e.isValidElement(r))return!1;const t=r.props||{};if("small"===t.size)return!0;if("small"===t["data-size"])return!0;if(24===t.height||24===t.minHeight)return!0;if("24px"===t.height||"24px"===t.minHeight)return!0;if(t.sx){const e=t.sx.minHeight||t.sx.height;if(24===e||"24px"===e)return!0}const a=r.type;if(a){const e=a.displayName||a.name||"";if(yn.some(r=>e.includes(r)))return!0}return!1})(r)&&(t=!0)}),t}function kn({children:e,gap:r,spacing:t,direction:a="column",enforceMinGap:o=!0,minGapToken:i="--min-stack-gap",divider:n,flexWrap:l,useFlexGap:d=!0,alignItems:c,justifyContent:u,sx:h={},className:p="",...m}){const f=void 0!==r?r:t,g=o&&Sn(e),x=s(()=>{if(!g)return f;const e=function(e,r=8){return null==e?0:"number"==typeof e?e*r:"string"==typeof e?e.endsWith("px")?parseFloat(e):e.endsWith("rem")?parseFloat(e)*parseFloat(getComputedStyle(document.documentElement).fontSize||"16"):parseFloat(e)*r||0:0}(f),r=function(e,r=8){if("undefined"==typeof window)return r;const t=getComputedStyle(document.documentElement).getPropertyValue(e).trim();return t?t.endsWith("rem")?parseFloat(t)*parseFloat(getComputedStyle(document.documentElement).fontSize):parseFloat(t)||r:r}(i,8);return e>=r?f:"var("+i+", "+r+"px)"},[g,f,i]);return le(k,{direction:a,spacing:d?void 0:x,gap:d?x:void 0,divider:n,flexWrap:l,useFlexGap:d,alignItems:c,justifyContent:u,className:"omni-stack"+(g?" omni-stack-min-gap-enforced":"")+(p?" "+p:""),sx:{...m["data-surface"]||m["data-theme"]?{background:"var(--Background)"}:{},boxSizing:"border-box",...g?{"&::before":{display:"none"}}:{},...h},"data-min-gap-enforced":g?"true":void 0,...m,children:e})}const Bn=e=>le(kn,{direction:"row",alignItems:"center",...e}),wn=e=>le(kn,{direction:"column",...e}),Cn=e=>le(kn,{direction:"column",alignItems:"center",justifyContent:"center",...e}),Tn=e=>le(kn,{direction:"row",alignItems:"center",justifyContent:"space-between",...e}),zn=e=>le(kn,{direction:"row",flexWrap:"wrap",...e}),An=({breakpoint:e="sm",...r})=>le(kn,{direction:{xs:"column",[e]:"row"},...r}),In=kn,Rn=zn,Wn=e=>le(h,{sx:{borderBottom:"1px solid var(--Border)",width:"100%"},...e}),Dn=({sx:e,...r})=>le(kn,{sx:{px:2,...e},...r}),Pn=({sx:e,...r})=>le(kn,{sx:{overflowY:"auto",...e},...r}),Fn={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Ln={small:{gap:"8px",fontSize:"13px",padding:"var(--Card-Padding)"},medium:{gap:"12px",fontSize:"14px",padding:"var(--Card-Padding)"},large:{gap:"16px",fontSize:"16px",padding:"var(--Card-Padding)"}},Hn=l({variant:"default",color:"primary",size:"medium",orientation:"vertical"});function Mn({children:e,variant:r="solid",color:t="default",surface:a,size:o="medium",orientation:i="vertical",clickable:n=!1,selected:l=!1,elevated:s=!1,draggable:d=!1,onClick:c,disabled:u=!1,href:p,className:m="",sx:f={},...g}){const x="default"===t,b=x?"":Fn[t],v=a||(x?"Container":"dark"===r?"Surface-Dimmest":"light"===r?"Surface-Brightest":"Surface"),y=Ln[o]||Ln.medium,S="horizontal"===i,k=!!d,B=!u&&(n||!!c||!!p||l||k),w=p?"a":"div",C=l?`var(--Buttons-${(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===t?"Default":t)}-Border)`:"var(--Buttons-Default-Border)",T=B?l?`2px solid ${C}`:"1px solid var(--Buttons-Default-Border)":"1px solid var(--Border-Variant)",z=s?no:io,A=s?lo:no,I=s?io:oo;return le(Hn.Provider,{value:{variant:r,color:t,size:o,orientation:i},children:le(h,{component:w,href:p||void 0,onClick:B?c:void 0,role:B?"button":void 0,tabIndex:B?0:void 0,"aria-pressed":!!l||void 0,"aria-disabled":u||void 0,draggable:k||void 0,className:"card card-"+r+" card-"+o+" card-"+i+(B?" card-clickable":"")+(l?" card-selected":"")+(s?" card-elevated":"")+(k?" card-draggable":"")+" "+m,sx:{display:"flex",border:T,borderRadius:"var(--Card-Radius)",boxShadow:z,overflow:"hidden",textDecoration:"none",transition:"box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease",...u&&{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none"},...B&&!k&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:A,transform:"translateY(-1px)"},"&:active":{transform:"translateY(0) scale(0.995)",boxShadow:I},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px",borderRadius:"calc(var(--Card-Radius) + 3px)"}},...k&&{cursor:"grab","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:A},"&:active":{cursor:"grabbing",zIndex:10,boxShadow:lo,transform:"scale(1.02)",borderWidth:"2px",borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...f},onKeyDown:B?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),c?.())}:void 0,...g,children:le(h,{"data-theme":b||void 0,"data-surface":v,sx:{display:"flex",flexDirection:S?"row":"column",gap:y.gap,padding:y.padding,backgroundColor:"var(--Background)",color:"var(--Text)",fontSize:y.fontSize,fontFamily:"inherit",borderRadius:"inherit",position:"relative",flex:1,minWidth:0,overflow:"hidden"},children:e})})})}function En({children:e,className:r="",sx:t={},...a}){const{size:o}=n(Hn);return le(h,{className:"card-content "+r,sx:{display:"flex",flexDirection:"column",gap:(Ln[o]||Ln.medium).gap,flex:1,minWidth:0,...t},...a,children:e})}const Nn=e=>le(Mn,{clickable:!0,selected:e.selected,...e}),On=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Qn=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary"]},{label:"State",colors:["info","success","warning","error"]}],Vn=[Se,Br,me,Ce,wr,Cr];function jn(){const[e,t]=r("primary"),[a,o]=r("solid"),[i,n]=r("medium"),l=Vn[0];return de(wn,{spacing:4,style:{paddingBottom:64},children:[le(qt,{children:"Icon Badge"}),de("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24},children:[le(Mn,{padding:"medium",children:de(wn,{spacing:4,alignItems:"center",children:[le("div",{style:{padding:40},children:le(bn,{color:e,variant:a,size:i,children:le(l,{})})}),le(Bn,{spacing:4,alignItems:"flex-end",children:["small","medium","large"].map(r=>de(wn,{spacing:1,alignItems:"center",children:[le(bn,{color:e,variant:a,size:r,children:le(l,{})}),le(ia,{style:{color:"var(--Quiet)"},children:On(r)})]},r))}),de(wn,{spacing:1,alignItems:"center",children:[le(ia,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"Variants"}),le(Bn,{spacing:3,children:["solid","light","dark"].map(r=>de(wn,{spacing:1,alignItems:"center",children:[le(bn,{color:e,variant:r,size:"medium",children:le(l,{})}),le(ia,{style:{color:"var(--Quiet)",fontSize:"0.65rem"},children:On(r)})]},r))})]}),de(wn,{spacing:1,alignItems:"center",children:[le(ia,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"All Colors"}),le(Bn,{spacing:2,style:{flexWrap:"wrap",justifyContent:"center"},children:Qn.flatMap(e=>e.colors).map(e=>de(wn,{spacing:0,alignItems:"center",children:[le(bn,{color:e,variant:a,size:"small",children:le(l,{})}),le(ia,{style:{color:"var(--Quiet)",fontSize:"0.55rem"},children:On(e)})]},e))})]})]})}),le(Mn,{padding:"medium",children:de(wn,{spacing:4,children:[le(qt,{style:{fontSize:"1rem"},children:"Playground"}),de(wn,{spacing:2,children:[le(ya,{children:"Color"}),Qn.map(r=>de(wn,{spacing:1,children:[le(ia,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:r.label}),le(Bn,{spacing:1,children:r.colors.map(r=>le(Ao,{variant:e===r?"default":"outline",size:"small",onClick:()=>t(r),children:On(r)},r))})]},r.label))]}),de(wn,{spacing:1,children:[le(ya,{children:"Variant"}),le(vn,{size:"small",children:["solid","light","dark"].map(e=>le(Ao,{variant:a===e?"default":"outline",size:"small",onClick:()=>o(e),children:On(e)},e))})]}),de(wn,{spacing:1,children:[le(ya,{children:"Size"}),le(vn,{size:"small",children:["small","medium","large"].map(e=>le(Ao,{variant:i===e?"default":"outline",size:"small",onClick:()=>n(e),children:On(e)},e))})]}),de(wn,{spacing:0,children:[de(ia,{style:{color:"var(--Quiet)"},children:["data-theme: ",On(e),"light"===a?"-Light":""]}),de(ia,{style:{color:"var(--Quiet)"},children:["data-surface: ","dark"===a?"Surface-Dimmest":"Surface"]}),le(ia,{style:{color:"var(--Quiet)"},children:"bg: var(--Background)"}),le(ia,{style:{color:"var(--Quiet)"},children:"icon: var(--Text)"})]})]})})]})]})}const Gn={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Un={small:{size:32,iconSize:16,fontSize:"13px",px:12,gap:6},medium:{size:48,iconSize:24,fontSize:"14px",px:16,gap:8},large:{size:56,iconSize:36,fontSize:"15px",px:20,gap:10}};function Xn({children:e,icon:r,label:t,variant:a="solid",color:o="primary",size:i="medium",extended:n=!1,animate:l=!1,disabled:s=!1,onClick:d,ariaLabel:c,className:u="",sx:p={},...m}){"production"!==process.env.NODE_ENV&&"solid"!==a&&console.warn('[Fab] variant="'+a+'" is not a Fab variant; rendering solid. The light variant was removed with the -Light button shades — it named tokens no design system publishes, so it rendered as an unstyled box. For a lighter FAB, put it on data-surface="Surface-Brightest".');const f=function(e){const r=Gn[e]||"Primary";return{bg:"var(--Buttons-"+r+"-Button)",text:"var(--Buttons-"+r+"-Text)",border:"var(--Buttons-"+r+"-Border)",hover:"var(--Buttons-"+r+"-Hover)",active:"var(--Buttons-"+r+"-Pressed)"}}(o),g=Un[i]||Un.medium,x=r||e||le(Tr,{sx:{fontSize:g.iconSize}}),b=c||t||"Action";return de(se,{children:[l&&le("style",{children:"\n@keyframes fab-pulse {\n 0% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb, 0,0,0), 0.4); }\n 70% { box-shadow: 0 0 0 12px rgba(var(--pulse-rgb, 0,0,0), 0); }\n 100% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb, 0,0,0), 0); }\n}\n"}),de(h,{component:"button",type:"button",role:"button","aria-label":b,onClick:d,disabled:s,className:"fab fab-solid fab-"+o+" fab-"+i+(n?" fab-extended":"")+(l?" fab-animate":"")+(s?" fab-disabled":"")+(u?" "+u:""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:n?g.gap+"px":0,...n?{height:g.size+"px",borderRadius:g.size/2+"px",px:g.px+"px"}:{width:g.size+"px",height:g.size+"px",borderRadius:"50%"},backgroundColor:f.bg,color:f.text,border:"var(--Button-Border-Width) solid "+f.border,"--_height":g.size+"px","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))",boxShadow:`${mo(o)}, ${no}`,fontSize:g.fontSize,fontFamily:"inherit",fontWeight:600,cursor:s?"not-allowed":"pointer",opacity:s?"var(--Disabled, 0.38)":1,outline:"none",flexShrink:0,transition:"background-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease","&:hover":s?{}:{backgroundColor:f.hover,boxShadow:`${mo(o)}, ${lo}`},"&:active":s?{}:{backgroundColor:f.active,transform:"scale(0.96)",boxShadow:mo(o)},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"},...l&&!s&&{animation:"fab-pulse 2s infinite"},...p},...m,children:[le(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",fontSize:g.iconSize+"px",color:"inherit","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}},children:x}),n&&t&&le(h,{component:"span",sx:{whiteSpace:"nowrap",lineHeight:1},children:t})]})]})}const Yn=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",qn=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Zn={default:"Tertiary",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function Jn({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Kn({color:e,selected:r,onClick:t}){const a=Zn[e]||"Primary";return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+Yn(e),"aria-pressed":r,title:Yn(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function $n({value:e,onChange:r,placeholder:t,label:a}){return de(h,{children:[a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4},children:a}),le(h,{component:"input",type:"text",value:e,onChange:e=>r(e.target.value),placeholder:t,sx:{width:"100%",padding:"6px 10px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",outline:"none","&:focus":{borderColor:"var(--Focus-Visible)"}}})]})}function _n(){const[e,t]=r("default"),[a,o]=r("medium"),[i,n]=r("Add"),[l,s]=r(!1),[d,c]=r("Create"),[u,p]=r(!1),[m,f]=r(!1),[g,x]=r(null),[b,v]=r("Surface"),y="default"===e?"tertiary":e;return de(h,{sx:{pb:8},children:[le(qt,{children:"Floating Action Button"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:g,children:le(Xn,{color:y,size:a,icon:(()=>{const e=zr[i]||zr.Add;return le(Oa,{size:"medium",children:le(e,{})})})(),extended:l,label:d,animate:u,disabled:m,ariaLabel:l?d:i})}),le(ji,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),r.push("icon={<"+i+"Icon />}"),l&&(r.push("extended"),r.push('label="'+d+'"')),u&&r.push("animate"),m&&r.push("disabled"),r.push('ariaLabel="'+(l?d:i)+'"'),"<Fab\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:g,onThemeChange:x,surface:b,onSurfaceChange:v})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:qn.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Kn,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Jn,{label:Yn(e),selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3},children:[le($n,{label:"Icon Name",value:i,onChange:n,placeholder:"Add"}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:[le("a",{href:"https://mui.com/material-ui/material-icons/",target:"_blank",rel:"noopener noreferrer",style:{color:"var(--Hotlink)"},children:"Material icon"})," name (e.g. Add, Edit, Favorite, Share)"]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Extended"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pill shape with icon + text label"})]}),le(an,{checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Extended"})]}),l&&le(h,{sx:{mt:1.5},children:le($n,{label:"Label Text",value:d,onChange:c,placeholder:"Create"})}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Animation"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pulse ring effect to draw attention"})]}),le(an,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Animation"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(an,{checked:m,onChange:e=>f(e.target.checked),size:"small","aria-label":"Disabled"})]})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:de(k,{spacing:3,children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Role:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<button role="button" aria-label="...">'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Label:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:l?"Extended: visible label provides accessible name.":"Icon-only: aria-label is required."})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Focus:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) with 2px offset."})]}),de(h,{sx:{py:1.5},children:[le(ia,{children:"Disabled:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"HTML disabled attribute. 50% opacity, removed from tab order."})]})]})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Best Practices"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"One per screen:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"FABs represent the primary action. Use at most one per view."})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Extended for clarity:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Use extended variant when the icon alone may be ambiguous."})]}),de(h,{sx:{py:1.5},children:[le(ia,{children:"Animation:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Use sparingly. Respect prefers-reduced-motion."})]})]})]})]})})})]})})})]})]})}const el={small:"var(--Sm-Rail-Width, 72px)",medium:"var(--Rail-Width, 80px)",large:"var(--Lg-Rail-Width, 96px)"},rl="var(--Icon-Size, 24px)",tl="var(--Sizing-Half, 4px)",al="var(--Button-Height, 32px)";function ol({items:e=[],sections:t,value:a,defaultValue:i=0,onChange:n,expandable:l=!1,expandedWidth:s="partial",defaultExpanded:d=!1,fabAction:c,labelStyle:u="contained",size:p="medium",className:m="",sx:f={},...g}){const[x,b]=r(i),[v,y]=r(d),S=void 0!==a,k=S?a:x,B=o(e=>{S||b(e),n?.(e)},[S,n]),w=l&&v;return de(h,{component:"nav",role:"navigation","aria-label":"Navigation rail","data-theme":"Default","data-surface":"Surface-Dim",className:"rail"+(l?" rail-expandable":" rail-fixed")+(w?" rail-expanded":" rail-collapsed")+" rail-label-"+("outside"===u?"outside":"contained")+" rail-"+(el[p]?p:"medium")+" "+m,sx:{display:"flex",flexDirection:"column",width:w?("full"===s?320:240)+"px":el[p]||el.medium,minHeight:"100%",gap:w?0:"var(--Sizing-1, 8px)",backgroundColor:"var(--Background)",borderRight:"1px solid var(--Border)",fontFamily:"inherit",transition:"width 0.25s ease",overflow:"hidden",flexShrink:0,...f},...g,children:[l&&le(h,{sx:{display:"flex",justifyContent:w?"flex-start":"center",px:w?1.5:0,height:56,alignItems:"center"},children:le(Ao,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>y(e=>!e),"aria-label":w?"Collapse menu":"Expand menu",children:le(Oa,{size:"small",sx:{color:"inherit"},children:le(w?Wr:Rr,{})})})}),c&&le(h,{sx:{px:w?2:1,py:1,flexShrink:0},children:le(Ao,{variant:"primary-light",size:"medium",onClick:c.onClick,"aria-label":c.label||"Action",startIcon:c.icon?le(Oa,{size:"small",sx:{color:"inherit"},children:c.icon}):void 0,sx:{width:w?"100%":56,borderRadius:w?"28px":"var(--Style-Border-Radius)",justifyContent:w?"flex-start":"center",transition:"all 0.2s ease"},children:w?c.label:null})}),le(h,{role:"tablist","aria-orientation":"vertical",sx:{flex:1,overflowY:"auto",overflowX:"hidden",display:"flex",flexDirection:"column",alignItems:"center",gap:w?0:"var(--Sizing-1-and-Half, 12px)",px:w?0:"var(--Sizing-1, 8px)",width:"100%",boxSizing:"border-box"},children:(()=>{if(t&&t.length>0){const e=[];let r=0;return t.forEach((t,a)=>{a>0&&e.push(le(h,{"aria-hidden":"true",sx:{height:"1px",width:"100%",backgroundColor:"var(--Border-Variant)"}},"divider-"+a)),t.items.forEach(t=>{const a=r;e.push(le(il,{item:t,selected:k===a,expanded:w,labelStyle:u,onClick:()=>B(a)},"item-"+a)),r++})}),e}return e.map((e,r)=>le(il,{item:e,selected:k===r,expanded:w,labelStyle:u,onClick:()=>B(r)},r))})()})]})}function il({item:e,selected:r,expanded:t,labelStyle:a,onClick:o}){const{icon:i,avatar:n,label:l,badge:s,disabled:d}=e,c=r?"var(--Button)":"transparent",u=r||t?"var(--Text)":"var(--Quiet)",p="outside"!==a,m=p&&!t,f=d?{}:{"&:hover":{backgroundColor:"var(--Hover)","& .rail-item-label":{color:"var(--Text)"}},"&:active":{backgroundColor:"var(--Pressed)","& .rail-item-label":{color:"var(--Text)"}},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px","& .rail-item-label":{color:"var(--Text)"}}};return de(h,{component:"button",type:"button",role:"tab","aria-selected":r,"aria-label":l,"aria-disabled":d||void 0,disabled:d||void 0,onClick:d?void 0:o,className:"rail-item"+(r?" rail-item-selected":""),sx:{display:"flex",flexDirection:t?"row":"column",alignItems:"center",justifyContent:t?"flex-start":"center",gap:t?"var(--Sizing-1-and-Half, 12px)":"2px",width:t?"100%":44,minWidth:t?void 0:rl,minHeight:rl,px:t?2.5:0,py:m?tl:0,border:r&&m?"1px solid var(--Border)":"1px solid transparent",borderRadius:t?0:"8px",backgroundColor:m||t?c:"transparent",boxShadow:r&&m?"var(--Shadow-1, none)":"none",color:"inherit",cursor:d?"not-allowed":"pointer",opacity:d?"var(--Disabled, 0.38)":1,fontFamily:"inherit",textAlign:t?"left":"center",transition:"background-color 0.15s ease, color 0.15s ease",outline:"none",...m||t?f:{}},children:[de(h,{sx:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",...t?{flexShrink:0}:{width:p?"100%":al,height:p?"auto":al,py:p?tl:0,borderRadius:p?"8px":al,backgroundColor:p?"transparent":c,border:!p&&r?"1px solid var(--Border)":void 0,transition:"background-color 0.2s ease",...p?{}:f}},children:[n?le(h,{sx:{display:"flex",width:rl,height:rl},children:n}):le(Oa,{size:"small",sx:{color:"inherit"},children:i}),s&&le(nl,{value:s})]}),l&&le(h,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"center",width:"100%"},children:le(ba,{className:"rail-item-label",style:{color:u,textAlign:"center",whiteSpace:t?"nowrap":"normal",overflow:"hidden",textOverflow:"ellipsis",...t?{flex:1}:{maxWidth:"100%"}},children:l})})]})}function nl({value:e}){return le(h,{sx:{position:"absolute",top:-4,right:-6,minWidth:16,height:16,borderRadius:"8px",backgroundColor:"var(--Tags-Error-BG)",color:"var(--Tags-Error-Text)",fontSize:"10px",fontWeight:700,px:.5,display:"flex",alignItems:"center",justifyContent:"center",lineHeight:1},children:e})}const ll=[{icon:le(Se,{}),label:"Home"},{icon:le(we,{}),label:"Search"},{icon:le(ye,{}),label:"Favorites",badge:3},{icon:le(he,{}),label:"Profile"},{icon:le(Be,{}),label:"Settings"}];function sl({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function dl(){const[e,t]=r(!0),[a,o]=r("partial"),[i,n]=r(!1),[l,s]=r(null),[d,c]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Rail"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(ui,{theme:l,surface:d,sx:{minHeight:400,alignItems:"stretch",p:0},children:[le(ol,{items:ll,expandable:e,expandedWidth:a,fabAction:i?{icon:le(Tr,{}),label:"Create",onClick:()=>{}}:void 0}),le(h,{sx:{flex:1,p:3},children:le(ia,{style:{color:"var(--Quiet)"},children:"Main content area"})})]}),le(ji,{code:(()=>{const r=["items={items}"];return e&&(r.push("expandable"),"partial"!==a&&r.push('expandedWidth="full"')),i&&r.push('fabAction={{ icon: <AddIcon />, label: "Create", onClick: handleCreate }}'),r.push("value={activeIndex}"),r.push("onChange={setActiveIndex}"),"<Rail\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"EXPANDED WIDTH"}),le(k,{direction:"row",spacing:1,children:["partial","full"].map(e=>{return le(sl,{label:(r=e,r?r.charAt(0).toUpperCase()+r.slice(1):""),selected:a===e,onClick:()=>o(e)},e);var r})})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Expandable"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Toggle between collapsed and expanded"})]}),le(an,{variant:"default-outline",checked:e,onChange:e=>t(e.target.checked),size:"small","aria-label":"Expandable"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"FAB Action"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show create button at top"})]}),le(an,{variant:"default-outline",checked:i,onChange:e=>n(e.target.checked),size:"small","aria-label":"FAB action"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Nav",value:'<nav role="navigation" aria-label="Navigation rail">'},{label:"Items",value:'role="tab" aria-selected on each item'},{label:"TabList",value:'role="tablist" aria-orientation="vertical"'},{label:"Toggle",value:'aria-label="Expand/Collapse menu"'},{label:"Focus",value:"outline: 3px solid var(--Focus-Visible); outline-offset: -3px"},{label:"Badge",value:"Visual only — announced via aria-label on parent item"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const cl={default:{theme:"Default"},primary:{theme:"Primary"},"primary-light":{theme:"Primary",surface:"Surface-Brightest"},white:{theme:"Neutral",surface:"Surface-Brightest"},black:{theme:"Neutral",surface:"Surface-Dimmest"}};function ul({items:e=[],value:t,defaultValue:a,onChange:i,type:n="floating",orientation:l="horizontal",color:s="default",fab:d,className:c="",sx:u={},...p}){const[m,f]=r(a??null),g=void 0!==t,x=g?t:m,b=o(e=>{const r=x===e?null:e;g||f(r),i?.(r)},[g,x,i]),v=cl[s]||cl.default,y=v.theme,S=v.surface,k="vertical"===l,B="floating"===n,w=le(h,{role:"toolbar","aria-orientation":l,"aria-label":"Toolbar","data-theme":y,"data-surface":S||"Surface",className:"toolbar toolbar-"+n+" toolbar-"+l+" toolbar-"+s+" "+c,sx:{display:"inline-flex",flexDirection:k?"column":"row",alignItems:"center",gap:"4px",backgroundColor:"var(--Background)",border:"1px solid var(--Border-Variant)",borderRadius:B?"56px":"var(--Style-Border-Radius)",padding:B?"8px 16px":"8px",fontFamily:"inherit",flexShrink:0,...B&&{boxShadow:io},...u},...p,children:e.map((e,r)=>{const t=x===r;return le(Ao,{iconOnly:!0,variant:t?"default":"ghost",size:"small",onClick:()=>b(r),"aria-label":e.label,"aria-checked":t,role:"radio",children:le(Oa,{size:"small",sx:{color:"inherit"},children:e.icon})},e.key||r)})});return d&&B?de(h,{sx:{display:"inline-flex",flexDirection:k?"column":"row",alignItems:"center",gap:1},children:[w,le(Ao,{iconOnly:!0,variant:"default",size:"large",onClick:d.onClick,"aria-label":d.label||"Action",sx:{borderRadius:"50%",width:56,height:56,minWidth:"unset",minHeight:"unset"},children:le(Oa,{size:"medium",sx:{color:"inherit"},children:d.icon})})]}):w}const hl=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",pl=[{icon:le(Dr,{}),label:"Bold"},{icon:le(Pr,{}),label:"Italic"},{icon:le(Fr,{}),label:"Underline"},{icon:le(Lr,{}),label:"Align left"},{icon:le(Hr,{}),label:"Align center"}];function ml({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function fl(){const[e,t]=r("floating"),[a,o]=r("default"),[i,n]=r("horizontal"),[l,s]=r(!1),[d,c]=r(null),[u,p]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Toolbar"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:d,surface:u,sx:{minHeight:200},children:le(ul,{items:pl,type:e,color:a,orientation:i,fab:l&&"floating"===e?{icon:le(Tr,{}),label:"Create",onClick:()=>{}}:void 0})}),le(ji,{code:(()=>{const r=["items={items}"];return"floating"!==e&&r.push('type="contextual"'),"default"!==a&&r.push('color="'+a+'"'),"horizontal"!==i&&r.push('orientation="vertical"'),l&&r.push('fab={{ icon: <AddIcon />, label: "Create", onClick: handleCreate }}'),r.push("value={selected}"),r.push("onChange={setSelected}"),"<Toolbar\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPE"}),le(k,{direction:"row",spacing:1,children:["floating","contextual"].map(r=>le(ml,{label:hl(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["default","primary","primary-light","white","black"].map(e=>le(ml,{label:hl(e),selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(k,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(ml,{label:hl(e),selected:i===e,onClick:()=>n(e)},e))})]}),"floating"===e&&de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"FAB Button"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Add FAB to the right of toolbar"})]}),le(an,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"FAB button"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="toolbar" aria-orientation aria-label'},{label:"Items",value:'role="radio" aria-checked on each icon button'},{label:"Selection",value:"Toggle — click selected again to deselect"},{label:"Focus",value:"Uses Button component focus styles"},{label:"Floating",value:"borderRadius 56px, padding 16px, Effect-Level-2 shadow"},{label:"Contextual",value:"Standard border-radius, padding 8px, no shadow"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const gl={small:{height:"var(--Small-Button-Height)",fontSize:"13px",padding:"4px 8px",iconSize:16,btnSize:28},medium:{height:"var(--Button-Height)",fontSize:"14px",padding:"6px 12px",iconSize:18,btnSize:36},large:{height:"var(--Large-Button-Height)",fontSize:"16px",padding:"8px 16px",iconSize:20,btnSize:44}};function xl({value:e,defaultValue:t=0,onChange:n,min:l,max:s,step:d=1,variant:c="outlined",style:u="outline",color:p="default",size:m="medium",label:f,labelPosition:g="top",placeholder:x,helperText:b,disabled:v=!1,fullWidth:y=!1,className:S="",sx:k={},...B}){const[w,C]=r(t),[T,z]=r(!1),A=a(null),I=void 0!==e,R=I?e:w,W=""!==R&&null!=R,D=(P="default"===p?"primary":p).charAt(0).toUpperCase()+P.slice(1);var P;"production"!==process.env.NODE_ENV&&"light"===u&&console.warn('[NumberField] style="light" was removed and had never done anything — it was read by no code path. For a lighter field use data-surface="Surface-Brightest" on its container.');const F="default"===p?"var(--Border)":"var(--Buttons-"+D+"-Border)",L="default"===p?"var(--Text)":"var(--Text-"+D+")",H="outlined"===c,M="floating"===g,E="top"===g,N=gl[m]||gl.medium,O="small"===m?ia:sa,Q=o(e=>{let r="number"==typeof e?e:parseFloat(e);isNaN(r)&&(r=0),void 0!==l&&r<l&&(r=l),void 0!==s&&r>s&&(r=s),I||C(r),n?.(r)},[I,n,l,s]),V=a(R);V.current=R;const j=o(e=>{if(v)return;const r="number"==typeof V.current?V.current:parseFloat(V.current)||0;void 0!==l&&e<0&&r<=l||void 0!==s&&e>0&&r>=s||Q(r+e*d)},[v,d,l,s,Q]),G=void 0!==l&&R<=l,U=void 0!==s&&R>=s,X=a(null),Y=a(null),q=o(()=>{X.current&&(clearTimeout(X.current),X.current=null),Y.current&&(clearInterval(Y.current),Y.current=null)},[]),Z=o(e=>{v||(q(),j(e),X.current=setTimeout(()=>{let r=120,t=0;const a=()=>{j(e),t+=1,10===t&&r>60?(clearInterval(Y.current),r=60,Y.current=setInterval(a,r)):30===t&&r>30&&(clearInterval(Y.current),r=30,Y.current=setInterval(a,r))};Y.current=setInterval(a,r)},400))},[v,j,q]);i(()=>q,[q]);const J=a(!1),K=e=>({onPointerDown:r=>{if(void 0===r.button||0===r.button){r.preventDefault();try{r.currentTarget.setPointerCapture?.(r.pointerId)}catch(e){}J.current=!0,Z(e)}},onClick:()=>{J.current?J.current=!1:j(e)},onPointerUp:e=>{try{e.currentTarget.releasePointerCapture?.(e.pointerId)}catch(e){}q()},onPointerCancel:q,onPointerLeave:q,onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||r.repeat||(r.preventDefault(),Z(e))},onKeyUp:e=>{"Enter"!==e.key&&" "!==e.key||q()},onBlur:q}),$=e=>{const r=e.target.value;if(""===r||"-"===r)return void(I||C(r));const t=parseFloat(r);isNaN(t)||Q(t)},_=e=>{"ArrowUp"===e.key&&(e.preventDefault(),j(1)),"ArrowDown"===e.key&&(e.preventDefault(),j(-1))},ee={display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent",color:"default"===p?"var(--Text)":"var(--Text-"+D+")",cursor:"pointer",outline:"none",flexShrink:0,border:"none",padding:0,borderRadius:"var(--Button-Icon-Radius, 0)",transition:"background-color 0.15s ease","&:hover:not(:disabled)":{backgroundColor:"var(--Hover)"},"&:active:not(:disabled)":{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"none",boxShadow:"inset 0 0 0 1px var(--Focus-Visible)"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}},re={},te=()=>E&&f?le(O,{component:"label",style:{display:"block",marginBottom:"6px",color:v?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:v?"var(--Disabled, 0.38)":1},children:f}):null;return de(h,H?{className:"numberfield numberfield-outlined"+(v?" numberfield-disabled":"")+(S?" "+S:""),sx:{width:y?"100%":"auto",fontFamily:"inherit",...k},...B,children:[te(),le(h,{sx:{border:"1px solid "+F,borderRadius:"small"===m?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===m?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",transition:"border-color 0.15s ease",boxShadow:"none",opacity:v?"var(--Disabled, 0.38)":1,"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{...re,children:de(h,{sx:{position:"relative",display:"flex",alignItems:"stretch",minHeight:"max("+N.height+", calc(var(--Sizing-3, 24px) * 2 + 1px))",backgroundColor:"var(--Background)"},children:[M&&f&&le(h,{sx:{position:"absolute",top:W||T?"6px":"50%",left:N.padding.split(" ")[1]||"14px",transform:W||T?"none":"translateY(-50%)",transformOrigin:"top left",color:T?L:"var(--Quiet)",fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",...W||T?{fontSize:"var(--"+(Xo[m]||Xo.medium).shrunk+"-Font-Size)",fontWeight:"var(--"+(Xo[m]||Xo.medium).shrunk+"-Font-Weight)",letterSpacing:"var(--"+(Xo[m]||Xo.medium).shrunk+"-Letter-Spacing)"}:{fontSize:"var(--"+(Xo[m]||Xo.medium).resting+"-Font-Size)",fontWeight:"var(--"+(Xo[m]||Xo.medium).resting+"-Font-Weight)",letterSpacing:"var(--"+(Xo[m]||Xo.medium).resting+"-Letter-Spacing)"},pointerEvents:"none",transition:"top 0.15s ease, font-size 0.15s ease, color 0.15s ease",zIndex:1},children:f}),le(h,{component:"input",ref:A,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof R?R:void 0,"aria-valuemin":l,"aria-valuemax":s,"aria-label":f||"Number",value:R,onChange:$,onKeyDown:_,onFocus:()=>z(!0),onBlur:()=>z(!1),disabled:v,placeholder:M?void 0:x||"",sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:W||T?L:"var(--Quiet)",fontSize:N.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)",padding:M?"22px 14px 6px":N.padding,minWidth:0,"&::placeholder":{color:"var(--Quiet)",opacity:1},"&:disabled":{cursor:"not-allowed"}}}),de(h,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"stretch",borderLeft:"1px solid "+F,flexShrink:0},children:[le(h,{component:"button",type:"button","aria-label":"Increase",...K(1),disabled:v||U,sx:{...ee,width:"var(--Sizing-4, 32px)",height:"var(--Sizing-3, 24px)"},children:le(Oa,{size:"medium",children:le(Mr,{})})}),le(h,{"aria-hidden":"true",sx:{height:"1px",backgroundColor:F,flexShrink:0}}),le(h,{component:"button",type:"button","aria-label":"Decrease",...K(-1),disabled:v||G,sx:{...ee,width:"var(--Sizing-4, 32px)",height:"var(--Sizing-3, 24px)"},children:le(Oa,{size:"medium",children:le(Er,{})})})]})]})})}),b&&le(ia,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:b})]}:{className:"numberfield numberfield-spinner"+(v?" numberfield-disabled":"")+(S?" "+S:""),sx:{fontFamily:"inherit",...k},...B,children:[te(),de(h,{sx:{display:"inline-flex",alignItems:"center",gap:"small"===m?.5:1,opacity:v?"var(--Disabled, 0.38)":1},children:[le(h,{component:"button",type:"button","aria-label":"Decrease",...K(-1),disabled:v||G,sx:{...ee,width:N.btnSize,height:N.btnSize,borderRadius:"small"===m?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"large"===m?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"var(--Button-Icon-Radius, var(--Style-Border-Radius))",border:"1px solid "+F},children:le(Oa,{size:"small",children:le(pe,{})})}),le(h,{sx:{border:"1px solid "+F,borderRadius:"small"===m?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===m?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden","&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{...re,children:le(h,{component:"input",ref:A,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof R?R:void 0,"aria-valuemin":l,"aria-valuemax":s,"aria-label":f||"Number",value:R,onChange:$,onKeyDown:_,onFocus:()=>z(!0),onBlur:()=>z(!1),disabled:v,sx:{width:"small"===m?40:56,minHeight:N.height,textAlign:"center",border:"none",outline:"none",backgroundColor:"var(--Hover)",color:"var(--Text)",fontSize:N.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:600,"&:disabled":{cursor:"not-allowed"}}})})}),le(h,{component:"button",type:"button","aria-label":"Increase",...K(1),disabled:v||U,sx:{...ee,width:N.btnSize,height:N.btnSize,borderRadius:"small"===m?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"large"===m?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"var(--Button-Icon-Radius, var(--Style-Border-Radius))",border:"1px solid "+F},children:le(Oa,{size:"small",children:le(Tr,{})})})]}),b&&le(ia,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:b})]})}const bl=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",vl=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function yl({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Sl({color:e,selected:r,onClick:t}){const a=bl(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function kl(){const[e,t]=r("outlined"),[a,o]=r("outline"),[i,n]=r("default"),[l,s]=r("medium"),[d,c]=r("top"),[u,p]=r(!0),[m,f]=r(!1),[g,x]=r(!1),[b,v]=r(null),[y,S]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Number Field"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:b,surface:y,children:le(h,{sx:{width:"100%",maxWidth:"outlined"===e?300:"auto"},children:le(xl,{variant:e,style:a,color:i,size:l,label:u?"Quantity":void 0,labelPosition:d,min:0,max:100,disabled:m,fullWidth:g&&"outlined"===e})})}),le(ji,{code:(()=>{const r=['variant="'+e+'"'];return"outline"!==a&&r.push('style="'+a+'"'),"default"!==i&&r.push('color="'+i+'"'),"medium"!==l&&r.push('size="'+l+'"'),u&&r.push('label="Quantity"'),"top"!==d&&r.push('labelPosition="'+d+'"'),r.push("min={0}"),r.push("max={100}"),m&&r.push("disabled"),g&&"outlined"===e&&r.push("fullWidth"),r.push("value={value}"),r.push("onChange={setValue}"),"<NumberField\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:b,onThemeChange:v,surface:y,onSurfaceChange:S})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(k,{direction:"row",spacing:1,children:["outlined","spinner"].map(r=>le(yl,{label:bl(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["outline","light"].map(e=>le(yl,{label:bl(e),selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:vl.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Sl,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(yl,{label:bl(e),selected:l===e,onClick:()=>s(e)},e))})]}),"outlined"===e&&de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(k,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(yl,{label:"none"===e?"None":bl(e),selected:d===e,onClick:()=>c(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Label"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Text label above field"})]}),le(an,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show label"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(an,{variant:"default-outline",checked:m,onChange:e=>f(e.target.checked),size:"small","aria-label":"Disabled"})]}),"outlined"===e&&de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Full Width"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container"})]}),le(an,{variant:"default-outline",checked:g,onChange:e=>x(e.target.checked),size:"small","aria-label":"Full width"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="spinbutton" with aria-valuenow, aria-valuemin, aria-valuemax'},{label:"Label",value:"aria-label from label prop. Always provide a label."},{label:"Keyboard",value:"ArrowUp/Down increment/decrement. Direct text entry supported."},{label:"Steppers",value:'aria-label="Increase" / "Decrease" on stepper buttons'},{label:"Focus",value:"outline: 2px solid var(--Focus-Visible); outline-offset: 2px"},{label:"Disabled",value:"HTML disabled. Steppers also disabled at min/max bounds."}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Bl={color:"var(--Text)",backgroundColor:"transparent",textTransform:"none",fontWeight:500,"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},"&.Mui-focusVisible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px",zIndex:1},"&.Mui-disabled":{color:"var(--Quiet)",opacity:"var(--Disabled, 0.38)"},"&.Mui-selected":{backgroundColor:"var(--Buttons-Primary-Button)",color:"var(--Buttons-Primary-Text)","&:hover":{backgroundColor:"var(--Buttons-Primary-Hover)"},"&:active":{backgroundColor:"var(--Buttons-Primary-Pressed)"}}};function wl({children:e,selected:r=!1,onChange:t,value:a,sx:o={},...i}){return le(A,{value:a,selected:r,onChange:t,sx:{border:"1px solid var(--Border)",...Bl,...o},...i,children:e})}const Cl=["default","primary","secondary","tertiary","neutral","black-white","info","success","warning","error"],Tl=["fill","outline","ghost"];function zl(){const e={};return Cl.forEach(r=>{Tl.forEach(t=>{e["fill"===t?r:r+"-"+t]=function(e,r){const t=ho(e),a={color:e,style:r,bg:"transparent",text:"var(--Quiet)",hover:"var(--Buttons-"+t+"-Hover)",hoverText:"var(--Buttons-"+t+"-Text)",pressed:"var(--Buttons-"+t+"-Pressed)"};return"ghost"===r?{...a,border:"transparent",selectedBg:"transparent",selectedText:"var(--Buttons-"+t+"-Border)",selectedRing:"inset 0 0 0 2px var(--Buttons-"+t+"-Border)",bevel:!1}:"outline"===r?{...a,border:"var(--Buttons-"+t+"-Border)",selectedBg:"transparent",selectedText:"var(--Buttons-"+t+"-Border)",selectedRing:"inset 0 0 0 2px var(--Buttons-"+t+"-Border)",bevel:!1}:{...a,border:"var(--Buttons-"+t+"-Border)",selectedBg:"var(--Buttons-"+t+"-Button)",selectedText:"var(--Buttons-"+t+"-Text)",selectedRing:null,bevel:!0}}(r,t)})}),e}const Al={small:{height:"var(--Small-Button-Height)",fontSize:"13px",padding:"4px 10px",iconSize:16,gap:4,swatchRadius:"var(--Sm-Input-Swatch-Radius, 18px)"},medium:{height:"var(--Button-Height)",fontSize:"15px",padding:"6px 14px",iconSize:18,gap:6,swatchRadius:"var(--Input-Swatch-Radius, 26px)"},large:{height:"var(--Large-Button-Height)",fontSize:"17px",padding:"8px 18px",iconSize:20,gap:8,swatchRadius:"var(--Lg-Input-Swatch-Radius, 50px)"}};function Il({variant:r="primary",size:t="medium",value:a,defaultValue:o,onChange:i,exclusive:n=!0,orientation:l="horizontal",disabled:s=!1,fullWidth:d=!1,children:c,className:u="",sx:h={},"aria-label":p,...m}){const f=zl(),g=f[r]||f.default,x=Al[t]||Al.medium,b="vertical"===l,v={gap:0,border:"ghost"===g.style?"none":"1px solid "+g.border,borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",...d&&{width:"100%"},display:"grid",gridAutoFlow:b?"row":"column",...b?{gridAutoRows:"1fr"}:{gridAutoColumns:"1fr"},"& .MuiToggleButtonGroup-grouped":{margin:0,borderLeft:0,borderTop:0,"&.Mui-selected + &.Mui-selected":{marginLeft:0,marginTop:0,borderLeft:0,borderTop:0}},"& .MuiToggleButton-root":{height:x.height,fontSize:x.fontSize,padding:x.padding,fontFamily:"inherit",fontWeight:500,textTransform:"none",letterSpacing:"0",lineHeight:1.4,backgroundColor:g.bg,color:g.text,border:"none",borderRadius:0,transition:"background-color 0.15s ease, color 0.15s ease","& .tbtn-start, & .tbtn-end":{display:"inline-flex",alignItems:"center",flexShrink:0,"& > *":{width:x.iconSize,height:x.iconSize,display:"block"}},"& .tbtn-start":{marginRight:"2px"},"& .tbtn-end":{marginLeft:"2px"},"& .tbtn-swatch":{display:"block",flexShrink:0,width:x.iconSize,height:x.iconSize,borderRadius:x.swatchRadius,border:"1px solid var(--Border-Variant)"},"& .tbtn-swatch:not(:only-child)":{marginRight:"2px"},"--_height":x.height,"--_bevel":"var(--Button-Bevel-Px, min(calc(var(--Button-Bevel, 0) * var(--_height) / 100), calc(var(--_height) / 5)))",...d&&{flex:1},..."ghost"===g.style?{}:b?{"&:not(:last-of-type)":{borderBottom:"1px solid "+g.border}}:{"&:not(:last-of-type)":{borderRight:"1px solid "+g.border}},"&:hover":{backgroundColor:g.hover,color:g.hoverText},"&:active":{backgroundColor:g.pressed,color:g.hoverText},"&.Mui-selected":{backgroundColor:g.selectedBg,color:g.selectedText,...g.bevel?{boxShadow:mo(g.color)}:{},...g.selectedRing?{boxShadow:g.selectedRing}:{}},"&.Mui-selected:hover":{backgroundColor:g.selectedRing?"var(--Hover)":g.hover,color:g.selectedText,...g.bevel?{boxShadow:mo(g.color)}:{},...g.selectedRing?{boxShadow:g.selectedRing}:{}},"&.Mui-selected:active":{backgroundColor:g.selectedRing?"var(--Pressed)":g.pressed,color:g.selectedText,...g.bevel?{boxShadow:mo(g.color)}:{},...g.selectedRing?{boxShadow:g.selectedRing}:{}},"&.Mui-focusVisible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"-2px",zIndex:1},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",color:g.text,backgroundColor:g.bg},"&.Mui-disabled.Mui-selected":{opacity:.6,backgroundColor:g.selectedBg,color:g.selectedText},"& .MuiSvgIcon-root":{fontSize:x.iconSize},"& > *:not(:only-child)":{marginRight:x.gap/2,marginLeft:x.gap/2}},...h};return le(I,{value:a,defaultValue:o,onChange:i,exclusive:n,orientation:l,disabled:s,className:"toggle-group-"+r+" "+u,sx:v,"aria-label":p,...m,children:e.Children.map(c,r=>e.isValidElement(r)&&s?e.cloneElement(r,{disabled:!0}):r)})}const Rl=e=>le(Il,{variant:"default",...e}),Wl=e=>le(Il,{variant:"primary",...e}),Dl=e=>le(Il,{variant:"secondary",...e}),Pl=e=>le(Il,{variant:"tertiary",...e}),Fl=e=>le(Il,{variant:"neutral",...e}),Ll=e=>le(Il,{variant:"black-white",...e}),Hl=e=>le(Il,{variant:"info",...e}),Ml=e=>le(Il,{variant:"success",...e}),El=e=>le(Il,{variant:"warning",...e}),Nl=e=>le(Il,{variant:"error",...e});function Ol({label:e,value:t="",onChange:a,placeholder:o,error:i=!1,errorMessage:n="",disabled:l=!1,helperText:s="",variant:d="outlined",size:c="medium",type:u="text",required:p=!1,fullWidth:m=!0,startAdornment:f,endAdornment:g,sx:x={},"aria-label":b,"aria-labelledby":k,onFocus:B,onBlur:w,...C}){const[T,z]=r(!1),A=i?"var(--Buttons-Error-Border)":T?"var(--Buttons-Primary-Border)":"var(--Border)",I=i||T?"var(--Text)":"var(--Text-Quiet)",R="var(--Text)";return de(h,{sx:{width:m?"100%":"auto"},children:[le(v,{label:e,value:t,onChange:a,placeholder:o,disabled:l,variant:d,size:c,type:u,required:p,onFocus:e=>{z(!0),B?.(e)},onBlur:e=>{z(!1),w?.(e)},error:i,fullWidth:m,slotProps:{htmlInput:{...b?{"aria-label":b}:{},...k?{"aria-labelledby":k}:{}},input:{"data-surface":l?"Container-Low":"Container",style:{color:R},startAdornment:f?le(y,{position:"start",children:f}):void 0,endAdornment:g?le(y,{position:"end",children:g}):void 0}},sx:{width:m?"100%":"auto","& .MuiOutlinedInput-root":{backgroundColor:"var(--Background)",transition:"all 0.2s ease-in-out",color:R,"& fieldset":{borderColor:A,transition:"border-color 0.2s ease-in-out"},"&:hover fieldset":{borderColor:i?"var(--Buttons-Error-Border)":"var(--Buttons-Primary-Border)"},"&.Mui-focused fieldset":{borderColor:i?"var(--Buttons-Error-Border)":"var(--Buttons-Primary-Border)",borderWidth:"2px"},"&.Mui-disabled":{backgroundColor:"var(--Background)",opacity:"var(--Disabled, 0.38)"}},"& .MuiInputLabel-root":{color:I,transition:"all 0.2s ease-in-out",fontSize:"14px",fontWeight:500,"&.Mui-focused":{color:"var(--Text)",fontWeight:600},"&.Mui-error":{color:"var(--Text)"},"&.Mui-disabled":{color:"var(--Text-Secondary)",opacity:"var(--Disabled, 0.38)"}},"& .MuiFormHelperText-root":{color:i?"var(--Buttons-Error-Border)":"var(--Text-Secondary)",marginTop:"4px",fontSize:"12px"},...x},...C}),i&&n&&le(S,{error:!0,sx:{color:"var(--Buttons-Error-Border)",marginTop:"4px",fontSize:"12px",fontWeight:500},children:n})]})}function Ql({label:e="Email",...r}){return le(Ol,{label:e,type:"email",placeholder:"user@example.com",...r})}function Vl({label:e="Password",...r}){return le(Ol,{label:e,type:"password",...r})}function jl({label:e="Search",placeholder:r="Type to search...",...t}){return le(Ol,{label:e,type:"search",placeholder:r,...t})}function Gl({label:e="Number",...r}){return le(Ol,{label:e,type:"number",...r})}function Ul({label:e="Phone",placeholder:r="(555) 123-4567",...t}){return le(Ol,{label:e,type:"tel",placeholder:r,...t})}function Xl({label:e="Website",placeholder:r="https://example.com",...t}){return le(Ol,{label:e,type:"url",placeholder:r,...t})}function Yl({error:e=!1,errorMessage:r="",rows:t=4,fullWidth:a=!0,...o}){return le(Jo,{multiline:!0,rows:t,fullWidth:a,...e&&{validation:"error",validationMessage:r},...o})}function ql({fields:e=[],spacing:r=2,sx:t={},...a}){return le(h,{sx:{display:"flex",flexDirection:"column",gap:`var(--Spacing-${r})`,width:"100%",...t},...a,children:e.map(e=>le(Ol,{...e},e.id))})}const Zl=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Jl=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Kl=[{value:"apple",label:"Apple"},{value:"banana",label:"Banana"},{value:"cherry",label:"Cherry"},{value:"date",label:"Date"},{value:"elderberry",label:"Elderberry"}],$l=[{value:"primary",label:"Primary",color:"var(--Buttons-Primary-Button)"},{value:"secondary",label:"Secondary",color:"var(--Buttons-Secondary-Button)"},{value:"tertiary",label:"Tertiary",color:"var(--Buttons-Tertiary-Button)"},{value:"neutral",label:"Neutral",color:"var(--Buttons-Neutral-Button)"},{value:"info",label:"Info",color:"var(--Buttons-Info-Button)"},{value:"success",label:"Success",color:"var(--Buttons-Success-Button)"},{value:"warning",label:"Warning",color:"var(--Buttons-Warning-Button)"},{value:"error",label:"Error",color:"var(--Buttons-Error-Button)"}];function _l({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function es({color:e,selected:r,onClick:t}){const a=Zl(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function rs(){const[e,t]=r("outline"),[a,o]=r("default"),[i,n]=r("medium"),[l,s]=r("top"),[d,c]=r("Fruit"),[u,p]=r(!1),[m,f]=r(!1),[g,x]=r(!0),[b,v]=r(!1),[y,S]=r("Search"),[B,w]=r(""),[T,z]=r(null),[A,I]=r("Surface"),[R,W]=r(!1),[D,P]=r(!0);return de(h,{sx:{pb:8},children:[le(qt,{children:"Select"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:T,surface:A,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(ei,{variant:e,color:a,size:i,label:d,labelPosition:l,mode:R?"color":void 0,showColorLabels:R?D:void 0,options:R?$l:Kl,value:B,onChange:w,showDividers:u,disabled:m,fullWidth:g,startDecoration:b?(()=>{const e=zr[y]||zr.Search;return le(Oa,{size:"small",children:le(e,{})})})():void 0})})}),le(ji,{code:(()=>{const r=[];return"outline"!==e&&r.push('variant="'+e+'"'),"default"!==a&&r.push('color="'+a+'"'),"medium"!==i&&r.push('size="'+i+'"'),d&&r.push('label="'+d+'"'),"top"!==l&&r.push('labelPosition="'+l+'"'),R&&r.push('mode="color"'),R&&!D&&r.push("showColorLabels={false}"),u&&r.push("showDividers"),m&&r.push("disabled"),g&&r.push("fullWidth"),b&&r.push("startDecoration={<Icon><"+y+"Icon /></Icon>}"),r.push("options={options}"),r.push("value={value}"),r.push("onChange={setValue}"),"<Select\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:T,onThemeChange:z,surface:A,onSurfaceChange:I})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["outline","light"].map(r=>le(_l,{label:Zl(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Jl.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(es,{color:e,selected:a===e,onClick:o},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(_l,{label:Zl(e),selected:i===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(k,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(_l,{label:"none"===e?"None":Zl(e),selected:l===e,onClick:()=>s(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Start Icon"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Icon rendered before the value"})]}),le(an,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Start icon"})]}),b&&de(h,{sx:{mt:2},children:[le(Jo,{label:"Icon Name",value:y,onChange:e=>S(e.target.value),placeholder:"Search",variant:"primary-outline",size:"small",fullWidth:!0}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:[le("a",{href:"https://mui.com/material-ui/material-icons/",target:"_blank",rel:"noopener noreferrer",style:{color:"var(--Hotlink)"},children:"Material icon"})," name (e.g. Search, Add, Edit, Filter, Sort, Star)"]})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Dividers"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Lines between options"})]}),le(an,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show dividers"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(an,{checked:m,onChange:e=>f(e.target.checked),size:"small","aria-label":"Disabled"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Color Mode"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Render swatches alongside each option. Swatch size scales to Select height, radius follows the brand's button radius."})]}),le(an,{checked:R,onChange:e=>W(e.target.checked),size:"small","aria-label":"Color mode"})]}),R&&de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Color Labels"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Hide to render a swatch-only trigger (no text). Useful for compact color pickers."})]}),le(an,{checked:D,onChange:e=>P(e.target.checked),size:"small","aria-label":"Show color labels"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Full Width"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(an,{checked:g,onChange:e=>x(e.target.checked),size:"small","aria-label":"Full width"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Trigger",value:'role="combobox" aria-expanded="true|false" aria-haspopup="listbox"'},{label:"Dropdown",value:'role="listbox" aria-label="..."'},{label:"Options",value:'role="option" aria-selected="true|false"'},{label:"Label",value:"aria-label from label prop. Always provide a label."},{label:"Keyboard",value:"Enter/Space opens. Escape closes. Arrow keys when open."},{label:"Focus",value:"outline: 2px solid var(--Focus-Visible); outline-offset: 2px (on outer shell)"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const ts={small:{height:"var(--Small-Button-Height)",fontSize:"13px",padding:"4px 8px",iconSize:16},medium:{height:"var(--Button-Height)",fontSize:"14px",padding:"6px 12px",iconSize:18},large:{height:"var(--Large-Button-Height)",fontSize:"16px",padding:"8px 16px",iconSize:20}},as={small:{height:"48px",fontSize:"13px",padding:"20px 12px 4px",leftPad:12},medium:{height:"56px",fontSize:"14px",padding:"22px 14px 6px",leftPad:14},large:{height:"64px",fontSize:"16px",padding:"24px 16px 6px",leftPad:16}};function os({options:e=[],value:t,defaultValue:n=null,onChange:l,inputValue:s,onInputChange:d,label:c,labelPosition:u="top",placeholder:p="Type to search",helperText:m,size:f="medium",variant:g="outline",color:x="primary",loading:b=!1,loadingText:v="Loading…",noOptionsText:y="No options",freeSolo:S=!1,clearable:k=!0,disabled:B=!1,fullWidth:w=!1,className:C="",sx:T={},...z}){const A=(I="default"===x?"primary":x).charAt(0).toUpperCase()+I.slice(1);var I;"production"!==process.env.NODE_ENV&&"light"===g&&console.warn('[Autocomplete] variant="light" was removed and had never done anything — it was read by no code path. For a lighter Autocomplete use data-surface="Surface-Brightest" on its container.');const R="light"===g?"outline":g,W="var(--Buttons-"+A+"-Border)",D="default"===x?"var(--Text)":"var(--Text-"+A+")",[P,F]=r(n),[L,H]=r(n?"string"==typeof n?n:n.label||"":""),[M,E]=r(!1),[N,O]=r(!1),[Q,V]=r(-1),j=a(null),G=a(null),U=void 0!==t,X=void 0!==s,Y=U?t:P,q=X?s:L,Z="floating"===u,J="top"===u,K=""!==q,$=Z?as[f]||as.medium:ts[f]||ts.medium,_=q?e.filter(e=>("string"==typeof e?e:e.label).toLowerCase().includes(q.toLowerCase())):e,ee=o(e=>{X||H(e),d?.(e)},[X,d]),re=o(e=>{const r="string"==typeof e?e:e.label;U||F(e),ee(r),l?.(e),E(!1),V(-1),G.current?.focus()},[U,l,ee]);i(()=>{if(!M)return;const e=e=>{j.current&&!j.current.contains(e.target)&&E(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[M]);return de(h,{ref:j,className:"autocomplete autocomplete-"+f+" autocomplete-variant-"+R+(M?" autocomplete-open":"")+(B?" autocomplete-disabled":"")+(C?" "+C:""),sx:{position:"relative",width:w?"100%":"auto",display:"inline-block",fontFamily:"inherit",...T},...z,children:[J&&c&&le("small"===f?ia:sa,{component:"label",style:{display:"block",marginBottom:"6px",color:B?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:B?"var(--Disabled, 0.38)":1},children:c}),le(h,{sx:{border:"1px solid "+W,borderRadius:"small"===f?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===f?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",transition:"border-color 0.15s ease",boxShadow:"none",opacity:B?"var(--Disabled, 0.38)":1,"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{children:de(h,{sx:{position:"relative",display:"flex",alignItems:"center",minHeight:$.height,backgroundColor:"var(--Hover)"},children:[Z&&c&&le(h,{sx:{position:"absolute",top:K||N?"6px":"50%",left:($.leftPad||14)+"px",transform:K||N?"scale(0.75)":"translateY(-50%)",transformOrigin:"top left",color:N?D:"var(--Quiet)",fontSize:$.fontSize,fontWeight:400,pointerEvents:"none",zIndex:1,transition:"top 0.15s ease, transform 0.15s ease, color 0.15s ease"},children:c}),le(h,{component:"input",ref:G,type:"text",role:"combobox","aria-expanded":M,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-label":c||p,autoComplete:"off",value:q,onChange:e=>{ee(e.target.value),M||E(!0),V(-1)},onKeyDown:e=>{if("Escape"!==e.key){if("ArrowDown"===e.key){if(e.preventDefault(),!M)return void E(!0);V(e=>Math.min(e+1,_.length-1))}"ArrowUp"===e.key&&(e.preventDefault(),V(e=>Math.max(e-1,0))),"Enter"===e.key&&M&&Q>=0&&_[Q]&&(e.preventDefault(),re(_[Q]))}else E(!1)},onFocus:()=>{O(!0),E(!0)},onBlur:()=>O(!1),disabled:B,placeholder:Z?void 0:p,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:K||N?D:"var(--Quiet)",fontSize:$.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)",padding:$.padding,minWidth:0,"&::placeholder":{color:"var(--Quiet)",opacity:1,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)"},"&:disabled":{cursor:"not-allowed"}}}),b&&M&&le(Nr,{size:16,sx:{mr:1,color:"var(--Quiet)"}}),k&&q&&!B&&le(h,{component:"button",type:"button","aria-label":"Clear",onClick:()=>{U||F(null),ee(""),l?.(null),G.current?.focus()},sx:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,borderRadius:"50%",mr:.5,border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:"pointer","&:hover":{color:"var(--Text)",backgroundColor:"var(--Hover)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)"}},children:le(Wr,{sx:{fontSize:14}})}),le(h,{component:"button",type:"button","aria-label":M?"Close":"Open",tabIndex:-1,onClick:()=>{B||E(!M)},sx:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:"100%",border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:B?"not-allowed":"pointer"},children:le(ve,{sx:{fontSize:($.iconSize||18)+"px",transform:M?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})})]})})}),m&&le(h,{sx:{fontSize:"12px",color:"var(--Quiet)",mt:"4px",ml:"2px"},children:m}),M&&le(h,{role:"listbox","aria-label":c||"Options",sx:{position:"absolute",top:"100%",left:0,right:0,mt:.5,backgroundColor:"var(--Hover)",border:"1px solid var(--Buttons-Default-Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:"none",zIndex:9999,maxHeight:240,overflowY:"auto",py:.5},children:b?le(h,{sx:{px:1.5,py:2,textAlign:"center",fontSize:$.fontSize,color:"var(--Quiet)"},children:v}):0===_.length?le(h,{sx:{px:1.5,py:2,textAlign:"center",fontSize:$.fontSize,color:"var(--Quiet)"},children:y}):_.map((e,r)=>{const t="string"==typeof e?e:e.label,a="string"==typeof e?e:e.value,o=t===(Y?"string"==typeof Y?Y:Y.label:null),i=function(e,r){return r?{backgroundColor:"transparent",color:"var(--Text)",fontWeight:600}:e?{backgroundColor:"var(--Hover)",color:"var(--Text)"}:{backgroundColor:"transparent",color:"var(--Text-Quiet)"}}(r===Q,o);return de(h,{role:"option","aria-selected":o,onClick:()=>re(e),onMouseEnter:()=>V(r),sx:{display:"flex",alignItems:"center",gap:1,px:1.5,py:0,mx:.5,minHeight:$.height,borderRadius:"4px",cursor:"pointer",fontSize:$.fontSize,fontFamily:"inherit",...i,transition:"background-color 0.1s ease","&:active":{backgroundColor:"var(--Pressed)"}},children:[le(ia,{style:{flex:1,color:"inherit",fontWeight:"inherit"},children:t}),o&&le(Oa,{size:"small",sx:{opacity:.6,flexShrink:0},children:le(ue,{})})]},a||t)})})]})}const is=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",ns=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],ls=[{value:"apple",label:"Apple"},{value:"banana",label:"Banana"},{value:"cherry",label:"Cherry"},{value:"date",label:"Date"},{value:"elderberry",label:"Elderberry"},{value:"fig",label:"Fig"},{value:"grape",label:"Grape"}];function ss({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function ds({color:e,selected:r,onClick:t}){const a=is(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function cs(){const[e,t]=r("outline"),[a,o]=r("default"),[i,n]=r("medium"),[l,s]=r("top"),[d,c]=r("Fruit"),[u,p]=r(!0),[m,f]=r(!1),[g,x]=r(!0),[b,v]=r(null),[y,S]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Autocomplete"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:b,surface:y,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(os,{variant:e,color:a,size:i,label:d,labelPosition:l,options:ls,clearable:u,disabled:m,fullWidth:g})})}),le(ji,{code:(()=>{const r=[];return"outline"!==e&&r.push('variant="'+e+'"'),"default"!==a&&r.push('color="'+a+'"'),"medium"!==i&&r.push('size="'+i+'"'),d&&r.push('label="'+d+'"'),"top"!==l&&r.push('labelPosition="'+l+'"'),u||r.push("clearable={false}"),m&&r.push("disabled"),g&&r.push("fullWidth"),r.push("options={options}"),r.push("onChange={handleChange}"),"<Autocomplete\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:b,onThemeChange:v,surface:y,onSurfaceChange:S})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["outline","light"].map(r=>le(ss,{label:is(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:ns.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(ds,{color:e,selected:a===e,onClick:o},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(ss,{label:is(e),selected:i===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(k,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(ss,{label:"none"===e?"None":is(e),selected:l===e,onClick:()=>s(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Clearable"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear button when has value"})]}),le(an,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clearable"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(an,{checked:m,onChange:e=>f(e.target.checked),size:"small","aria-label":"Disabled"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Full Width"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(an,{checked:g,onChange:e=>x(e.target.checked),size:"small","aria-label":"Full width"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Input",value:'role="combobox" aria-expanded aria-haspopup="listbox" aria-autocomplete="list"'},{label:"Dropdown",value:'role="listbox" aria-label="..."'},{label:"Options",value:'role="option" aria-selected="true|false"'},{label:"Label",value:"aria-label from label prop. Always provide a label."},{label:"Keyboard",value:"Arrow keys navigate, Enter selects, Escape closes."},{label:"Focus",value:"outline: 2px solid var(--Focus-Visible); outline-offset: 2px (on outer shell)"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const us=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],hs=ho,ps={small:{touchTarget:24,box:16,dot:8,gap:4,LabelComp:ia},medium:{touchTarget:24,box:20,dot:9.5,gap:8,LabelComp:sa},large:{touchTarget:24,box:24,dot:9.5,gap:12,LabelComp:pa}};function ms({size:e,color:r,checked:t}){const a=hs(r),o="Default"===a?"var(--Quiet)":"var(--Buttons-"+a+"-Border)",i="var(--Buttons-"+a+"-Border)",n=ps[e]||ps.medium;return le(h,{className:"radio-circle-icon",sx:{width:n.box,height:n.box,boxSizing:"border-box",borderRadius:"50%",border:"2px solid "+o,overflow:"hidden",flexShrink:0,backgroundColor:"var(--Background)",display:"flex",alignItems:"center",justifyContent:"center",transition:"border-color 0.15s ease-in-out"},children:t&&le(h,{sx:{width:n.dot,height:n.dot,borderRadius:"50%",backgroundColor:i,transition:"transform 0.15s ease-in-out"}})})}function fs({color:e="primary",size:r="medium",label:t,labelPlacement:a="end",checked:o,disabled:i=!1,onChange:n,name:l,value:s,className:d="",sx:c={},"aria-label":u,"aria-labelledby":h,"aria-describedby":p,inputProps:m={},...f}){const g=us.includes(e)?e:"primary",x=ps[r]||ps.medium,v=x.LabelComp,y=(x.touchTarget-x.box)/2,S={...m,...u&&{"aria-label":u},...h&&{"aria-labelledby":h},...p&&{"aria-describedby":p}},k=le(R,{checked:o,disabled:i,onChange:n,name:l,value:s,icon:le(ms,{size:r,color:g,checked:!1}),checkedIcon:le(ms,{size:r,color:g,checked:!0}),className:"radio-"+g+" "+d,inputProps:S,disableRipple:!0,sx:{padding:y+"px",width:x.touchTarget,height:x.touchTarget,minWidth:x.touchTarget,minHeight:x.touchTarget,boxSizing:"border-box",borderRadius:"50%",color:"inherit",transition:"background-color 0.15s ease-in-out","&.Mui-checked":{color:"inherit"},"&:hover":{backgroundColor:"transparent"},"&:hover .radio-circle-icon":{borderColor:"var(--Text)"},"&:active .radio-circle-icon":{borderColor:"var(--Text)",backgroundColor:"var(--Pressed)"},"&.Mui-disabled .radio-circle-icon":{opacity:"var(--Disabled, 0.38)"},"&.Mui-focusVisible .radio-circle-icon":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none"},...c},...f});return t?le(b,{control:k,label:le(v,{component:"span",sx:{color:i?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:t}),labelPlacement:a,disabled:i,sx:{marginLeft:0,marginRight:0,gap:x.gap+"px",alignItems:"center","&.Mui-disabled .MuiTypography-root":{color:"var(--Text-Quiet)",opacity:.6}}}):k}function gs({color:e="primary",size:r="medium",label:t,options:a=[],value:o,onChange:i,orientation:n="vertical",labelPlacement:l="end",disabled:s=!1,spacing:d=1,name:c,className:u="",sx:h={},"aria-label":p,"aria-labelledby":m,...f}){return de(W,{component:"fieldset",disabled:s,className:"radio-group-"+e+" "+u,sx:h,children:[t&&le(D,{component:"legend",sx:{color:s?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===r?"13px":"15px",fontWeight:500,mb:1,"&.Mui-focused":{color:"var(--Text)"},"&.Mui-disabled":{color:"var(--Text-Quiet)",opacity:"var(--Disabled, 0.38)"}},children:t}),le(P,{value:o,onChange:i,name:c,"aria-label":p,"aria-labelledby":m,row:"horizontal"===n,sx:{display:"flex",flexDirection:"horizontal"===n?"row":"column",flexWrap:"horizontal"===n?"wrap":"nowrap",alignItems:"horizontal"===n?"center":"flex-start",gap:d},...f,children:a.map(t=>le(fs,{color:e,size:r,label:t.label,labelPlacement:l,value:t.value,disabled:t.disabled||s},t.value))})]})}const xs=fs,bs=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];const vs={small:{visual:12,track:2,labelSize:11},medium:{visual:16,track:4,labelSize:12},large:{visual:20,track:6,labelSize:13}};function ys({variant:e="primary",size:r="medium",value:t,defaultValue:a,onChange:o,onChangeCommitted:i,min:n=0,max:l=100,step:s=1,marks:d=!1,valueLabelDisplay:c="off",orientation:u="horizontal",track:p="normal",disabled:m=!1,label:f,name:g,className:x="",sx:b={},"aria-label":v,"aria-labelledby":y,...S}){const k=function(){const e={};return bs.forEach(r=>{e[r]=function(e){const r=(t=e).charAt(0).toUpperCase()+t.slice(1);var t;return{thumb:"var(--Border)",thumbBorder:"1px solid var(--Background)",track:"default"===e?"var(--Button)":"var(--Buttons-"+r+"-Button)",trackBorder:"1px solid var(--Border)",rail:"var(--Background)",railBorder:"1px solid var(--Border)",valueLabel:"var(--Text)",valueLabelText:"var(--Background)"}}(r)}),e}(),B=k[e]||k.primary,w=vs[r]||vs.medium,C="vertical"===u,T=Array.isArray(t)||Array.isArray(a),z="inverted"===p,A="small"===r?ia:sa,I=w.track+2,R=z?B.track:B.rail,W=B.railBorder,D=z?B.rail:B.track,P=B.trackBorder,L={color:"transparent"===B.track?B.thumb:B.track,height:C?void 0:I,width:C?I:void 0,"& .MuiSlider-rail":{backgroundColor:R,border:W||"none",boxSizing:W?"content-box":"border-box",opacity:1,height:C?void 0:W?w.track:I,width:C?W?w.track:I:void 0,borderRadius:I/2},"& .MuiSlider-track":{boxSizing:P?"content-box":"border-box",backgroundColor:D,border:P||"none",height:C?void 0:P?w.track:I,width:C?P?w.track:I:void 0,borderRadius:I/2},"& .MuiSlider-thumb":{width:24,height:24,backgroundColor:"transparent",border:"none",boxShadow:"none",transition:"none","--_height":w.visual+"px","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))","&::after":{display:"none"},"&::before":{content:'""',position:"absolute",width:w.visual,height:w.visual,borderRadius:"50%",backgroundColor:B.thumb,border:B.thumbBorder||"none",boxShadow:`${mo(e)}, ${oo}`,transition:"box-shadow 0.15s ease-in-out",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},"&:hover::before":{boxShadow:`${mo(e)}, ${io}`},"&.Mui-focusVisible::before, &:focus-visible::before":{boxShadow:`${mo(e)}, ${io}, 0 0 0 1px var(--Focus-Visible)`},"&.Mui-active::before":{boxShadow:mo(e)},"&.Mui-focusVisible":{outline:"none",borderRadius:"50%"},"&.Mui-focusVisible::before":{boxShadow:`${mo(e)}, ${io}`}},...T?C?{'& .MuiSlider-thumb[data-index="0"]::before':{top:0,left:"50%",transform:"translateX(-50%)"},'& .MuiSlider-thumb[data-index="1"]::before':{top:"auto",bottom:0,left:"50%",transform:"translateX(-50%)"}}:{'& .MuiSlider-thumb[data-index="0"]::before':{left:"auto",right:0,top:"50%",transform:"translateY(-50%)"},'& .MuiSlider-thumb[data-index="1"]::before':{left:0,right:"auto",top:"50%",transform:"translateY(-50%)"}}:{},"& .MuiSlider-valueLabel":{backgroundColor:B.valueLabel,color:B.valueLabelText,fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",fontSize:"var(--Label-ExtraSmall-Font-Size)",fontWeight:"var(--Label-ExtraSmall-Font-Weight)",letterSpacing:"var(--Label-ExtraSmall-Letter-Spacing)",lineHeight:"var(--Label-ExtraSmall-Line-Height)",borderRadius:"var(--Sizing-1, 8px)",padding:"var(--Sizing-Half, 4px) var(--Sizing-1, 8px)","&::before":{backgroundColor:B.valueLabel}},"& .MuiSlider-mark":{backgroundColor:B.rail,width:C?I:2,height:C?2:I,borderRadius:1},"& .MuiSlider-markActive":{backgroundColor:B.thumb,opacity:.6},"& .MuiSlider-markLabel":{color:"var(--Text-Quiet)",fontSize:w.labelSize},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none","& .MuiSlider-thumb::before":{boxShadow:"none"}},...b},H=le(F,{value:t,defaultValue:a,onChange:o,onChangeCommitted:i,min:n,max:l,step:s,marks:d,valueLabelDisplay:c,orientation:u,track:"inverted"===p?"inverted":!1!==p&&"normal",disabled:m,name:g,"aria-label":v,"aria-labelledby":y,slotProps:m?{input:{"aria-disabled":"true"}}:void 0,className:"slider-"+e+" "+x,sx:L,...S});return f?de(h,{sx:{width:C?"auto":"100%",height:C?"100%":"auto",display:"flex",flexDirection:"column",gap:"4px"},children:[le(A,{component:"label",sx:{color:m?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===r?"13px":"15px",fontWeight:500,opacity:m?"var(--Disabled, 0.38)":1},children:f}),H]}):H}const Ss=ys,ks=ys,Bs={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},ws={small:{iconSize:16,minHit:24,gap:0,focusInset:-3,focusWidth:3},medium:{iconSize:24,minHit:24,gap:0,focusInset:-3,focusWidth:3},large:{iconSize:36,minHit:void 0,gap:2,focusInset:2,focusWidth:2}};function Cs({value:e,defaultValue:t,onChange:a,max:o=5,precision:i=1,color:n="default",size:l="medium",readOnly:s=!1,disabled:d=!1,emptyLabel:c="No rating",className:u="",sx:p={},...m}){const[f,g]=r(t??null),[x,b]=r(null),v=void 0!==e,y=v?e:f,S=null!==x?x:y,k=.5===i,B=!s&&!d,w=Bs[n]||Bs.default,C=ws[l]||ws.medium,T="var(--Buttons-"+w+"-Button)",z="var(--Buttons-"+w+"-Border)",A=e=>{if(!B)return;const r=e===y?null:e;v||g(r),a?.(r)},I=(e,r)=>{if(!B||!k)return;b(r?e+.5:e+1)},R=B?{"&:hover":{filter:"drop-shadow(0 2px 4px rgba(var(--Dropshadow-Color), 0.22)) drop-shadow(0 1px 2px rgba(var(--Dropshadow-Color), 0.28))","& .MuiSvgIcon-root":{stroke:"var(--Buttons-"+w+"-Border)",strokeWidth:1}}}:{},W=e=>{const r=e+1,t=e+.5,a=null!==S&&r<=S,n=null!==S&&!a&&k&&t<=S,l=n?Or:Ce,s=((e,r)=>e||r?{color:T,filter:"drop-shadow(0 1px 2px rgba(var(--Dropshadow-Color), 0.28))",transition:"filter 0.15s ease","& .MuiSvgIcon-root":{stroke:z,strokeWidth:.5}}:{color:"transparent","& .MuiSvgIcon-root":{stroke:"var(--Quiet)",strokeWidth:1}})(a,n);return k&&B?de(h,{sx:{position:"relative",display:"inline-flex",cursor:"pointer",...s,...R},onMouseLeave:()=>b(null),children:[le(h,{sx:{position:"absolute",left:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>I(e,!0),onClick:()=>A(t)}),le(h,{sx:{position:"absolute",right:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>I(e,!1),onClick:()=>A(r)}),le(l,{sx:{fontSize:C.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})]},e):le(h,{component:B?"button":"span",type:B?"button":void 0,role:B?"radio":void 0,"aria-checked":a,"aria-label":r+" star"+(1!==r?"s":""),tabIndex:B?0:-1,onClick:()=>A(r),onMouseEnter:()=>B&&b(r),onMouseLeave:()=>B&&b(null),onKeyDown:e=>{if(B&&("ArrowRight"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),A(Math.min((y||0)+i,o))),"ArrowLeft"===e.key||"ArrowDown"===e.key)){e.preventDefault();const r=Math.max((y||0)-i,0);A(r||null)}},sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",padding:0,...C.minHit&&{minWidth:C.minHit+"px",minHeight:C.minHit+"px"},cursor:d?"not-allowed":B?"pointer":"default",outline:"none",transition:"transform 0.1s ease",...s,...R,"&:active":B?{transform:"scale(0.95)"}:{},"&:focus-visible":B?{outline:C.focusWidth+"px solid var(--Focus-Visible)",outlineOffset:C.focusInset+"px",borderRadius:"2px"}:{},"&:disabled":{cursor:"not-allowed",opacity:"var(--Disabled, 0.38)"}},children:le(l,{sx:{fontSize:C.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})},e)};return de(h,{role:B?"radiogroup":"img","aria-label":"Rating"+(null!==y?": "+y+" of "+o+" stars":": "+c),className:"rating rating-"+n+" rating-"+l+(s?" rating-readonly":"")+(d?" rating-disabled":"")+(null===y?" rating-empty":"")+(u?" "+u:""),sx:{display:"inline-flex",alignItems:"center",gap:C.gap+"px",opacity:d?"var(--Disabled, 0.38)":1,fontFamily:"inherit",...p},...m,children:[Array.from({length:o},(e,r)=>W(r)),null===y&&!x&&le(ga,{style:{color:"var(--Quiet)",marginLeft:4},children:c})]})}const Ts={small:{height:"var(--Small-Button-Height)",fontSize:"13px",iconSize:18,px:12},medium:{height:"var(--Button-Height)",fontSize:"14px",iconSize:20,px:16},large:{height:"var(--Large-Button-Height)",fontSize:"15px",iconSize:22,px:16}};function zs({value:e,defaultValue:t="",onChange:o,onFocus:i,onBlur:n,onClear:l,onSubmit:s,placeholder:d="Search…",size:c="medium",color:u="default",showClearButton:p=!0,disabled:m=!1,ariaLabel:f="Search",className:g="",sx:x={},...b}){const[v,y]=r(t),[S,k]=r(!1),B=a(null),w=void 0!==e,C=w?e:v,T=C.length>0,z=S||T,A=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===u?"primary":u),I="default"===u?"var(--Text)":"var(--Text-"+A+")",R=Ts[c]||Ts.medium,W=()=>{w||y(""),o?.(""),l?.(),B.current?.focus()};return le(h,{className:"search-field search-field-"+c+(S?" search-field-focused":"")+(T?" search-field-filled":"")+(m?" search-field-disabled":"")+(g?" "+g:""),sx:{display:"flex",boxSizing:"border-box",...x},...b,children:le(h,{sx:{border:"1px solid "+("var(--Buttons-"+A+"-Border)"),borderRadius:"small"===c?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===c?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",opacity:m?"var(--Disabled, 0.38)":1,transition:"border-color 0.15s ease, box-shadow 0.15s ease",boxShadow:"none",width:"100%",...!m&&{"&:hover":{borderColor:"var(--Buttons-"+A+"-Hover)"},"&:active":{borderColor:"var(--Buttons-"+A+"-Pressed)"}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:de(h,{sx:{display:"flex",alignItems:"center",gap:1,width:"100%",boxSizing:"border-box",minHeight:R.height,px:R.px+"px",backgroundColor:"var(--Hover)"},children:[le(Oa,{size:"small",sx:{color:z?I:"var(--Quiet)",flexShrink:0,transition:"color 0.15s ease"},children:le(we,{})}),le(h,{component:"input",ref:B,type:"text",role:"searchbox","aria-label":f,value:C,onChange:e=>{const r=e.target.value;w||y(r),o?.(r,e)},onFocus:e=>{k(!0),i?.(e)},onBlur:e=>{k(!1),n?.(e)},onKeyDown:e=>{"Enter"===e.key&&s?.(C,e),"Escape"===e.key&&T&&W()},placeholder:d,disabled:m,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:z?I:"var(--Quiet)",fontSize:R.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)",minWidth:0,"&::placeholder":{color:"var(--Quiet)",opacity:1,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)"},"&:disabled":{cursor:"not-allowed"}}}),p&&T&&!m&&le(h,{component:"button",type:"button","aria-label":"Clear search",onClick:W,sx:{display:"flex",alignItems:"center",justifyContent:"center",width:R.iconSize+4,height:R.iconSize+4,borderRadius:"50%",border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:"pointer",flexShrink:0,padding:0,transition:"color 0.15s ease, background-color 0.15s ease","&:hover":{backgroundColor:"var(--Hover)",color:I},"&:active":{backgroundColor:"var(--Pressed)",color:I},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"}},children:le(Oa,{size:"small",children:le(Wr,{})})})]})})})}const As=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Is=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Rs({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Ws({color:e,selected:r,onClick:t}){const a=As(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Ds(){const[e,t]=r("default"),[a,o]=r("medium"),[i,n]=r(!1),[l,s]=r(!0),[d,c]=r(null),[u,p]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Search Field"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:d,surface:u,children:le(h,{sx:{width:"100%",maxWidth:400},children:le(zs,{color:e,size:a,disabled:i,showClearButton:l,placeholder:"Search..."})})}),le(ji,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),l||r.push("showClearButton={false}"),i&&r.push("disabled"),r.push('placeholder="Search..."'),r.push("onChange={handleSearch}"),"<SearchField\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Is.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Ws,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Rs,{label:As(e),selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Clear Button"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear when has value"})]}),le(an,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Clear button"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(an,{variant:"default-outline",checked:i,onChange:e=>n(e.target.checked),size:"small","aria-label":"Disabled"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="searchbox" on the input element'},{label:"Label",value:'aria-label="Search" (configurable via ariaLabel prop)'},{label:"Clear",value:'aria-label="Clear search" on clear button'},{label:"Keyboard",value:"Enter submits, Escape clears"},{label:"Focus",value:"outline: 2px solid var(--Focus-Visible); outline-offset: 2px"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Ps=["primary","secondary","tertiary","neutral","info","success","warning","error"],Fs=e=>e.charAt(0).toUpperCase()+e.slice(1);function Ls(){const e={};return Ps.forEach(r=>{e[r]=function(e){const r=Fs(e);return{bg:"var(--Buttons-"+r+"-Button)",text:"var(--Buttons-"+r+"-Text)",border:"none",hoverBg:"var(--Buttons-"+r+"-Hover)",activeBg:"var(--Buttons-"+r+"-Pressed)"}}(r),e[r+"-outline"]=function(e){return{bg:"var(--Background)",text:"var(--Text)",border:"1px solid var(--Buttons-"+Fs(e)+"-Border)",hoverBg:"var(--Hover)",activeBg:"var(--Hover)"}}(r)}),e}const Hs=/-light$/,Ms=new Set;const Es={small:{height:24,fontSize:"12px",iconSize:16,padding:"0 8px",deleteSize:16,gap:4},medium:{height:32,fontSize:"13px",iconSize:18,padding:"0 12px",deleteSize:18,gap:6},large:{height:40,fontSize:"14px",iconSize:20,padding:"0 16px",deleteSize:24,gap:8}},Ns=d(function({size:e,onClick:r,...t},a){const o="large"===e?24:"medium"===e?18:16;return le(h,{ref:a,component:"button",onClick:e=>{e.stopPropagation(),r&&r(e)},onKeyDown:e=>{"Enter"!==e.key&&"Backspace"!==e.key&&"Delete"!==e.key||(e.stopPropagation(),r&&r(e))},"aria-label":"Remove",role:"button",tabIndex:0,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",minWidth:24,minHeight:24,width:o,height:o,padding:0,margin:0,marginLeft:"2px",marginRight:"-4px",border:"none",borderRadius:"50%",backgroundColor:"transparent",color:"inherit",opacity:.7,cursor:"pointer",position:"relative",flexShrink:0,transition:"opacity 0.15s ease, background-color 0.15s ease","&:hover":{opacity:1,backgroundColor:"rgba(0,0,0,0.08)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"},...o<24&&{"&::after":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",minWidth:24,minHeight:24}}},...t,children:le(Qr,{sx:{fontSize:o,pointerEvents:"none"}})})});function Os({variant:e="primary",size:r="medium",label:t,clickable:a=!1,disabled:o=!1,selected:i=!1,selectionMode:n,onDelete:l,onClick:s,startDecorator:d,endDecorator:c,children:u,className:p="",sx:m={},...f}){const g=Ls(),x=function(e){const r=String(e||"primary");if(!Hs.test(r))return r;const t=r.replace(Hs,"");return"production"===process.env.NODE_ENV||Ms.has(r)||(Ms.add(r),console.warn('[Chip] variant="'+r+'" — the -light shape was removed. Rendering variant="'+t+'" (solid). For a light chip use variant="'+t+'-outline" with data-theme + data-surface="Surface-Brightest".')),t}(e),b=g[x]||g.primary,v=l?"large":r,y=Es[v]||Es.medium,S=a||!!s||!!n,k={};"radio"===n?(k.role="radio",k["aria-checked"]=i):"checkbox"===n&&(k.role="checkbox",k["aria-checked"]=i);const B=i?{outline:"2px solid var(--Buttons-Primary-Button)",outlineOffset:"1px"}:{},w=t||u,C={height:y.height,fontSize:y.fontSize,fontWeight:500,fontFamily:"inherit",borderRadius:y.height/2+"px",padding:y.padding,boxSizing:"border-box",position:"relative",backgroundColor:b.bg,color:b.text,border:b.border,...B,..."small"===v&&{"&::after":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",minWidth:24,minHeight:24,width:"100%",height:"100%"}},...S&&!o?{cursor:"pointer",transition:"background-color 0.15s ease, outline 0.15s ease","&:hover":{backgroundColor:b.hoverBg},"&:active":{backgroundColor:b.activeBg}}:{},"&:focus-visible, &.Mui-focusVisible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},...o?{opacity:.5,cursor:"not-allowed",pointerEvents:"none"}:{},boxShadow:"none","& .MuiChip-label":{padding:0,fontSize:"inherit",fontWeight:"inherit",fontFamily:"inherit",lineHeight:1.2,display:"flex",alignItems:"center",gap:y.gap+"px"},"& .MuiChip-icon":{margin:0,marginLeft:"-2px",color:"inherit",fontSize:y.iconSize},"& .MuiChip-deleteIcon":{display:"none"},...m},T=de(h,{component:"span",sx:{display:"inline-flex",alignItems:"center",gap:y.gap+"px",lineHeight:1},children:[d&&le(h,{component:"span",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& .MuiSvgIcon-root":{fontSize:y.iconSize},"& .MuiAvatar-root":{width:y.iconSize+4,height:y.iconSize+4,fontSize:Math.round(.65*y.iconSize)+"px"}},children:d}),w,c&&le(h,{component:"span",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& .MuiSvgIcon-root":{fontSize:y.iconSize},"& .MuiAvatar-root":{width:y.iconSize+4,height:y.iconSize+4,fontSize:Math.round(.65*y.iconSize)+"px"}},children:c}),l&&le(Ns,{size:v,onClick:l})]});return le(L,{label:T,clickable:S&&!o,disabled:o,onClick:S?s:void 0,className:"chip-"+x+" "+p,sx:C,...k,...f})}const Qs={body:{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Font-Size)",fontWeight:"var(--Body-Font-Weight)",letterSpacing:"var(--Body-Letter-Spacing)"},"body-small":{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Small-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Small-Font-Size)",fontWeight:"var(--Body-Font-Weight)",letterSpacing:"var(--Body-Small-Letter-Spacing)"},"body-large":{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Large-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Large-Font-Size)",fontWeight:"var(--Body-Font-Weight)",letterSpacing:"var(--Body-Large-Letter-Spacing)"},"body-semibold":{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Font-Size)",fontWeight:"var(--Body-Semibold-Font-Weight)",letterSpacing:"var(--Body-Letter-Spacing)"},"body-bold":{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Font-Size)",fontWeight:"var(--Body-Bold-Font-Weight)",letterSpacing:"var(--Body-Letter-Spacing)"},button:{fontFamily:"var(--Body-Font-Family)",lineHeight:"var(--Button-Line-Height)",fontSize:"var(--Button-Font-Size)",fontWeight:"var(--Button-Font-Weight)",letterSpacing:"var(--Button-Letter-Spacing)"},label:{fontFamily:"var(--Body-Font-Family)",lineHeight:"var(--Label-Line-Height)",fontSize:"var(--Label-Font-Size)",fontWeight:"var(--Label-Font-Weight)",letterSpacing:"var(--Label-Letter-Spacing)"},caption:{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Small-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Small-Font-Size)",fontWeight:"var(--Body-Font-Weight)",letterSpacing:"var(--Body-Small-Letter-Spacing)"}},Vs="var(--Link-Visited, var(--Hotlink-Visited))",js={primary:{base:"var(--Link, var(--Hotlink))",visited:Vs},standard:{base:"var(--Text)",visited:Vs},quiet:{base:"var(--Text-Quiet)",visited:Vs}};function Gs({children:e,href:r,target:t,rel:a,textStyle:o="body",color:i="primary",disabled:n=!1,onClick:l,className:s="",sx:d={},...c}){const u=Qs[o]||Qs.body,p=js[i]||js.primary;return le(h,{component:"a",href:n?void 0:r,target:t,rel:"_blank"===t?a||"noopener noreferrer":a,onClick:n?e=>e.preventDefault():l,"aria-disabled":n||void 0,tabIndex:n?-1:void 0,className:"link link-"+o+" link-color-"+i+(n?" link-disabled":"")+" "+s,sx:{fontFamily:u.fontFamily,lineHeight:u.lineHeight,fontSize:u.fontSize,fontWeight:u.fontWeight,letterSpacing:u.letterSpacing,textDecoration:"underline",textUnderlineOffset:"3px",textDecorationThickness:"1px",color:p.base,cursor:n?"not-allowed":"pointer",opacity:n?"var(--Disabled, 0.38)":1,pointerEvents:n?"none":"auto",display:"inline-flex",alignItems:"center",minHeight:"24px",minWidth:"24px",transition:"color 0.15s ease, text-decoration-color 0.15s ease",...!n&&{"&:hover":{textDecorationThickness:"2px"},"&:visited":{color:p.visited},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"2px"},"&:active":{textDecorationThickness:"2px"}},...d},...c,children:e})}function Us({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"primary":"primary-outline",size:"small",onClick:t,children:e})}function Xs({code:e}){return le(ji,{code:e,language:"JSX",wrap:!0,sx:{mt:1}})}function Ys({passes:e}){return de(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5,px:1.5,py:.5,borderRadius:"20px",backgroundColor:e?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:e?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)",fontSize:"12px",fontWeight:600},children:[le(e?me:fe,{sx:{fontSize:14}}),e?"WCAG Pass":"WCAG Fail"]})}function qs({leftLabel:e,rightLabel:r,leftContent:t,rightContent:a,leftCode:o,rightCode:i,leftPasses:n,rightPasses:l}){return de(C,{container:!0,spacing:3,children:[le(C,{item:!0,xs:12,md:6,children:de(h,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(ia,{style:{fontWeight:600},children:e}),le(Ys,{passes:n})]}),le(h,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:t}),le(Xs,{code:o})]})}),le(C,{item:!0,xs:12,md:6,children:de(h,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(ia,{style:{fontWeight:600},children:r}),le(Ys,{passes:l})]}),le(h,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:a}),le(Xs,{code:i})]})})]})}function Zs(){const[e,t]=r("column"),[a,o]=r(.5),[i,n]=r("small"),[l,s]=r(!0),[d,c]=r(!1),[u,p]=r(null),[m,f]=r("Surface"),g={small:{label:"Small links ⚡",content:de(se,{children:[le(Gs,{href:"#",size:"small",children:"Terms of Service"}),le(Gs,{href:"#",size:"small",children:"Privacy Policy"}),le(Gs,{href:"#",size:"small",children:"Cookie Settings"})]})},chips:{label:"Chips ⚡",content:de(se,{children:[le(Os,{label:"React",size:"small"}),le(Os,{label:"TypeScript",size:"small"}),le(Os,{label:"Design System",size:"small"})]})},normal:{label:"Normal buttons",content:de(se,{children:[le(Ao,{variant:"primary",size:"medium",children:"Primary"}),le(Ao,{variant:"secondary",size:"medium",children:"Secondary"})]})},mixed:{label:"Mixed ⚡",content:de(se,{children:[le(Ao,{variant:"primary",size:"medium",children:"Save changes"}),le(Gs,{href:"#",size:"small",children:"Or discard"})]})}},x=["small","chips","mixed"].includes(i),b=l&&x;return de(C,{container:!0,spacing:3,sx:{mt:1},children:[de(C,{item:!0,xs:12,md:7,children:[le(ui,{theme:u,children:de(h,{sx:{width:"100%"},children:[b&&de(h,{sx:{mb:2,px:2,py:1,borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Tags-Warning-BG)",color:"var(--Tags-Warning-Text)",fontSize:"12px",fontWeight:600,display:"flex",alignItems:"center",gap:1},children:[le(fe,{sx:{fontSize:16}}),"Small child detected — gap raised to var(--min-stack-gap)"]}),le(kn,{direction:e,gap:a,enforceMinGap:l,flexWrap:d?"wrap":void 0,children:g[i].content})]})}),le(Xs,{code:(()=>{const r=["<OmniStack"];return"column"!==e&&r.push(' direction="'+e+'"'),r.push(" gap={"+a+"}"),l||r.push(" enforceMinGap={false}"),d&&r.push(' flexWrap="wrap"'),r.push(">"),r.push(" {children}"),r.push("</OmniStack>"),r.join("\n")})()})]}),le(C,{item:!0,xs:12,md:5,children:de(h,{sx:{display:"flex",flexDirection:"column",gap:3},children:[le(fi,{theme:u,onThemeChange:p,surface:m,onSurfaceChange:f}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CHILDREN"}),le(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:Object.entries(g).map(([e,{label:r}])=>le(Us,{label:r,selected:i===e,onClick:()=>n(e)},e))})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),le(h,{sx:{display:"flex",gap:1},children:["row","column"].map(r=>{return le(Us,{label:(a=r,a?a.charAt(0).toUpperCase()+a.slice(1):""),selected:e===r,onClick:()=>t(r)},r);var a})})]}),de(h,{children:[de(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["GAP — ",a," unit",b?" → raised to var(--min-stack-gap)":""]}),de(h,{sx:{display:"flex",alignItems:"center",gap:2},children:[le(h,{component:"input",type:"range",min:0,max:6,step:.5,value:a,onChange:e=>o(Number(e.target.value)),sx:{flex:1,accentColor:"var(--Primary-Color-10)"}}),le(ga,{style:{color:"var(--Text)",minWidth:24,textAlign:"right"},children:a})]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),de(h,{sx:{display:"flex",flexDirection:"column",gap:1.5},children:[de(h,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[de(h,{children:[le(ia,{children:"Enforce min gap"}),le(ga,{style:{color:b?"var(--Tags-Warning-Text)":"var(--Text-Quiet)",display:"block"},children:b?"⚡ Active — small child detected":x?"Off — WCAG 2.5.8 risk":"No small children detected"})]}),le(an,{checked:l,onChange:e=>s(e.target.checked),size:"small"})]}),de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[le(ia,{children:"Flex wrap"}),le(an,{checked:d,onChange:e=>c(e.target.checked),size:"small"})]})]})]})]})})]})}function Js(){return de(h,{sx:{pb:8},children:[le(qt,{children:"Stack"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:32,maxWidth:640},children:"OmniStack is a layout primitive built on MUI Stack with one intelligent addition: it automatically enforces a minimum gap between children when it detects small (24px) interactive components — protecting WCAG 2.5.8 compliance without any extra developer effort."}),de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Why it matters"}),le(di,{children:"Playground"}),le(di,{children:"API"})]}),le(ci,{value:0,children:de(h,{sx:{pt:3,display:"flex",flexDirection:"column",gap:4},children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(qt,{children:"The problem"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:"WCAG 2.5.8 requires that small interactive targets (24px) have enough surrounding space that they don’t overlap adjacent targets. Every layout library leaves this entirely to the developer — meaning it’s silently violated constantly."}),le(qs,{leftLabel:"Plain MUI Stack — gap too small",rightLabel:"OmniStack — gap auto-enforced",leftPasses:!1,rightPasses:!0,leftContent:de(h,{sx:{display:"flex",flexDirection:"column",gap:"4px"},children:[le(Gs,{href:"#",size:"small",children:"Terms of Service"}),le(Gs,{href:"#",size:"small",children:"Privacy Policy"}),le(Gs,{href:"#",size:"small",children:"Cookie Settings"})]}),rightContent:de(kn,{gap:.5,children:[le(Gs,{href:"#",size:"small",children:"Terms of Service"}),le(Gs,{href:"#",size:"small",children:"Privacy Policy"}),le(Gs,{href:"#",size:"small",children:"Cookie Settings"})]}),leftCode:'<Stack gap={0.5}>\n <Link size="small">Terms of Service</Link>\n <Link size="small">Privacy Policy</Link>\n <Link size="small">Cookie Settings</Link>\n</Stack>\n// ⚠ gap=4px — targets overlap',rightCode:'<OmniStack gap={0.5}>\n <Link size="small">Terms of Service</Link>\n <Link size="small">Privacy Policy</Link>\n <Link size="small">Cookie Settings</Link>\n</OmniStack>\n// ✓ small child detected → gap enforced'})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(qt,{children:"Mixed component sizes"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:"One small child is enough to trigger enforcement for the whole stack — the most common case is a normal button paired with a small cancel link."}),le(qs,{leftLabel:"Without enforcement",rightLabel:"With enforcement",leftPasses:!1,rightPasses:!0,leftContent:de(h,{sx:{display:"flex",flexDirection:"column",gap:"2px"},children:[le(Ao,{variant:"primary",size:"medium",children:"Save changes"}),le(Gs,{href:"#",size:"small",children:"Or discard"})]}),rightContent:de(kn,{gap:.25,children:[le(Ao,{variant:"primary",size:"medium",children:"Save changes"}),le(Gs,{href:"#",size:"small",children:"Or discard"})]}),leftCode:'<Stack gap={0.25}>\n <Button size="medium">Save changes</Button>\n <Link size="small">Or discard</Link>\n</Stack>\n// ⚠ Link is 24px — gap too tight',rightCode:'<OmniStack gap={0.25}>\n <Button size="medium">Save changes</Button>\n <Link size="small">Or discard</Link>\n</OmniStack>\n// ✓ Link detected → gap enforced'})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(qt,{children:"How detection works"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:"OmniStack inspects children at render time using a priority-ordered signal chain. Any one signal is enough to trigger enforcement."}),le(h,{sx:{display:"flex",flexDirection:"column"},children:[{signal:'size="small" prop',example:'<Link size="small" />'},{signal:'data-size="small"',example:'<div data-size="small" />'},{signal:"height={24}",example:"<Box height={24} />"},{signal:"minHeight={24}",example:"<Box minHeight={24} />"},{signal:"sx.minHeight: 24",example:"<Box sx={{ minHeight: 24 }} />"},{signal:"Known component name",example:"Link, Chip, Badge, Caption…"}].map(({signal:e,example:r},t,a)=>de(h,{sx:{display:"flex",alignItems:"center",gap:2,py:1.5,borderBottom:t<a.length-1?"1px solid var(--Border)":"none"},children:[le(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Primary-Color-10)",flexShrink:0}}),le(ia,{style:{flex:"0 0 200px"},children:e}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(qt,{children:"Token-driven minimum"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:"The minimum gap is a CSS custom property, not a hardcoded value — so it respects your brand spacing scale and responds to theme changes without re-rendering."}),le(Xs,{code:":root {\n --min-stack-gap: 8px; /* Set in your theme.css */\n}\n\n/* OmniStack substitutes the variable, not the value: */\ngap: var(--min-stack-gap, 8px);\n\n/* Dark mode, brand overrides, and media queries\n all work automatically — no re-render needed. */"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(qt,{children:"Auditable opt-out"}),de(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:["Use ",le("code",{children:"enforceMinGap={false}"})," to opt out. This creates a searchable pattern accessibility audits can grep for — a conscious waiver, not a silent violation."]}),le(Xs,{code:'<OmniStack gap={0.5} enforceMinGap={false}>\n {/* Explicitly waived — auditors can grep:\n enforceMinGap={false}\n to find all waivers in the codebase. */}\n <Link size="small">Terms</Link>\n <Link size="small">Privacy</Link>\n</OmniStack>'})]})]})}),le(ci,{value:1,children:le(Zs,{})}),le(ci,{value:2,children:de(h,{sx:{pt:3},children:[le(qt,{children:"OmniStack props"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:4,marginBottom:16},children:"All standard MUI Stack props are supported. These are OmniStack additions:"}),le(h,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",mb:4},children:[{prop:"enforceMinGap",type:"boolean",default:"true",desc:"Enable/disable smart gap enforcement."},{prop:"minGapToken",type:"string",default:'"--min-stack-gap"',desc:"CSS variable name for the minimum gap value."},{prop:"gap",type:"number|string",default:"undefined",desc:"Desired gap. Enforced against minGapToken when small children detected."},{prop:"direction",type:"string|object",default:'"column"',desc:"Stack direction. Supports responsive breakpoint objects."},{prop:"flexWrap",type:"string",default:"undefined",desc:'"wrap" | "nowrap" | "wrap-reverse"'},{prop:"divider",type:"ReactNode",default:"undefined",desc:"Element rendered between each child."}].map(({prop:e,type:r,default:t,desc:a},o,i)=>de(h,{sx:{display:"grid",gridTemplateColumns:"160px 160px 1fr",gap:2,px:2,py:1.5,alignItems:"start",borderBottom:o<i.length-1?"1px solid var(--Border)":"none",backgroundColor:o%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(ga,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r}),de(h,{children:[le(ga,{style:{color:"var(--Text)"},children:a}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:["Default: ",t]})]})]},e))}),le(qt,{children:"Convenience exports"}),le(h,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",mb:4},children:[{name:"Stack",desc:"Alias for OmniStack — drop-in MUI Stack replacement"},{name:"HStack",desc:'direction="row" alignItems="center"'},{name:"VStack",desc:'direction="column"'},{name:"CenteredStack",desc:'direction="column" alignItems="center" justifyContent="center"'},{name:"SpaceBetweenStack",desc:'direction="row" justifyContent="space-between"'},{name:"WrapStack",desc:'direction="row" flexWrap="wrap"'},{name:"ResponsiveStack",desc:"column on xs, row on sm+ (breakpoint configurable)"},{name:"GridStack",desc:"Alias for WrapStack"},{name:"InsetStack",desc:"OmniStack with px: 2 horizontal padding"},{name:"ScrollStack",desc:"OmniStack with overflowY: auto"}].map(({name:e,desc:r},t,a)=>de(h,{sx:{display:"grid",gridTemplateColumns:"200px 1fr",gap:2,px:2,py:1.5,borderBottom:t<a.length-1?"1px solid var(--Border)":"none",backgroundColor:t%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(ga,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(ga,{style:{color:"var(--Text-Quiet)"},children:r})]},e))}),le(qt,{children:"Debug attributes"}),le(Xs,{code:'/* When enforcement is active, OmniStack adds: */\nclassName="omni-stack omni-stack-min-gap-enforced"\ndata-min-gap-enforced="true"\n\n/* Target in CSS: */\n.omni-stack-min-gap-enforced { outline: 2px dashed orange; }\n\n/* Query in tests: */\ncontainer.querySelector(\'[data-min-gap-enforced="true"]\')'})]})})]})]})}const Ks={none:void 0,small:"var(--Sm-Card-Radius, var(--Card-Radius))",medium:"var(--Card-Radius)",large:"var(--Lg-Card-Radius, var(--Card-Radius))"};function $s({children:e,theme:r,surface:t,radius:a="none",elevation:o=0,component:i="div",className:n="",sx:l={},style:s,...d}){const c=Math.max(0,Math.min(5,0|o)),u=Ks[a];if(!c)return le(h,{component:i,"data-theme":r||void 0,"data-surface":t||void 0,className:"omni-box"+(n?" "+n:""),sx:{background:"var(--Background)",boxSizing:"border-box",...u?{borderRadius:u}:{},...l},style:s,...d,children:e});const p=s||{},{width:m,height:f,minWidth:g,minHeight:x,maxWidth:b,maxHeight:v,borderRadius:y,margin:S,marginTop:k,marginRight:B,marginBottom:w,marginLeft:C,...T}=p,z={width:m,height:f,minWidth:g,minHeight:x,maxWidth:b,maxHeight:v,borderRadius:y,margin:S,marginTop:k,marginRight:B,marginBottom:w,marginLeft:C},{width:A,height:I,borderRadius:R,...W}=l;return le(h,{component:i,className:"omni-box-elevation"+(n?" "+n:""),"data-elevation":c,sx:{boxShadow:co[c],boxSizing:"border-box",width:A,height:I,borderRadius:void 0!==R?R:u},style:z,...d,children:le(h,{"data-theme":r||void 0,"data-surface":t||void 0,className:"omni-box",sx:{width:"100%",height:"100%",background:"var(--Background)",borderRadius:"inherit",boxSizing:"border-box",...W},style:T,children:e})})}const _s=["Surface","Surface-Dim","Surface-Bright","Container","Container-Low","Container-Lowest","Container-High"],ed=["Default","Primary","Primary-Light","Secondary","Secondary-Light","Tertiary","Tertiary-Light","Neutral","Neutral-Light","Info-Light","Success-Light","Warning-Light","Error-Light"];function rd({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function td(){const[e,t]=r(""),[a,o]=r(""),[i,n]=r(null),[l,s]=r("Surface");return de($s,{sx:{pb:8},children:[le(qt,{children:"Box"}),de(sa,{color:"quiet",style:{marginTop:8,marginBottom:24,maxWidth:720},children:["Bare layout primitive — a slot that participates in the design-system cascade (",le("code",{children:"data-theme"})," / ",le("code",{children:"data-surface"}),") without carrying any chrome. Reach for ",le("code",{children:"<Ratio>"})," or",le("code",{children:" <Card>"})," when you need padding, borders, or shadow."]}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:i,surface:l,children:le($s,{sx:{width:"100%",maxWidth:400},children:le($s,{theme:e||void 0,surface:a||void 0,children:de($s,{sx:{padding:3,backgroundColor:"var(--Background)",color:"var(--Text)",borderRadius:"var(--Style-Border-Radius)",border:"1px dashed var(--Border-Variant)"},children:[le(Jt,{children:"Box content"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:6},children:"Anything dropped inside resolves tokens against the Box's theme / surface, if you set them."})]})})})}),le(ji,{code:(()=>{const r=[];e&&r.push('theme="'+e+'"'),a&&r.push('surface="'+a+'"');return"<Box"+(r.length?" "+r.join(" "):"")+">\n {/* anything */}\n</Box>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le($s,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"When to use"})]}),le(ci,{value:0,children:de($s,{sx:{p:3},children:[le($s,{sx:{mb:3},children:le(fi,{theme:i,onThemeChange:n,surface:l,onSurfaceChange:s})}),de($s,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME (optional)"}),de(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(rd,{label:"None",selected:!e,onClick:()=>t("")}),ed.map(r=>le(rd,{label:r,selected:e===r,onClick:()=>t(r)},r))]})]}),de($s,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE (optional)"}),de(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(rd,{label:"None",selected:!a,onClick:()=>o("")}),_s.map(e=>le(rd,{label:e,selected:a===e,onClick:()=>o(e)},e))]}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Both props are pass-throughs to ",le("code",{children:"data-theme"})," ","and ",le("code",{children:"data-surface"}),". Leave empty to inherit from the parent zone."]})]})]})}),le(ci,{value:1,children:le($s,{sx:{p:3},children:de(k,{spacing:2,children:[de($s,{children:[le(ia,{style:{fontWeight:700},children:"Reach for Box when…"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:"you need a wrapper to scope a theme / surface zone, or you want a typed JSX root without painting any visual styling."})]}),de($s,{children:[le(ia,{style:{fontWeight:700},children:"Use Ratio when…"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:"the container needs a fixed proportion (image, video, embed, hero tile) — it carries the same theme / color shell Box used to."})]}),de($s,{children:[le(ia,{style:{fontWeight:700},children:"Use Card when…"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:"the container has a title, body, and actions — Card handles the standard 2-layer chrome plus header / footer slots."})]})]})})})]})})})]})]})}function ad({children:e,maxWidth:r="lg",disableGutters:t=!1,sx:a={},...o}){return le(H,{maxWidth:r,disableGutters:t,"data-surface":"Surface",sx:{backgroundColor:"var(--Background)",color:"var(--Text)",transition:"all 0.2s ease-in-out",...a},...o,children:e})}function od({children:e,container:r=!1,item:t=!1,spacing:a=2,sx:o={},...i}){return le(C,{container:r,item:t,spacing:a,sx:{transition:"all 0.2s ease-in-out",...o},...i,children:e})}function id({theme:e,surface:r="Surface",as:t="section",padding:a,className:o,style:i,children:n,...l}){return le(t,{...e?{"data-theme":e}:{},"data-surface":r,className:o,style:{background:"var(--Background)",color:"var(--Text)",...void 0!==a?{padding:a}:{},...i},...l,children:n})}function nd(){return de("div",{children:[le(qt,{style:{marginBottom:12},children:"Section"}),de(sa,{color:"quiet",style:{marginBottom:32,maxWidth:720},children:[le("code",{children:"<Section>"})," bundles ",le("code",{children:"data-theme"})," +"," ",le("code",{children:"data-surface"})," + background paint into one component. Use anywhere you'd otherwise reach for"," ",le("code",{children:"<section data-theme data-surface style={{ background: var(--Background) }}>"}),". For wrapping without painting (e.g. AppBar's themed zone), use"," ",le("code",{children:"<ThemedZone>"}),"."]}),le(qt,{style:{marginTop:24,marginBottom:12},children:"Theme + surface"}),le(ia,{color:"quiet",style:{marginBottom:16,display:"block"},children:'Sets data-theme="Primary-Light" + data-surface="Surface", paints --Background.'}),de(id,{theme:"Primary-Light",surface:"Surface",padding:"32px",style:{borderRadius:8},children:[le(qt,{children:"Primary-Light surface"}),le(sa,{children:"Body text picks up --Text automatically."}),le(ia,{color:"quiet",children:"Quiet text picks up --Text-Quiet."}),le("div",{style:{marginTop:12},children:le(Ao,{variant:"primary",children:"Primary button"})})]}),le(qt,{style:{marginTop:32,marginBottom:12},children:"Container surface"}),de(id,{surface:"Container",padding:"32px",style:{borderRadius:8},children:[le(qt,{children:"Container surface (inherits theme)"}),le(sa,{children:"Useful for card-like regions."})]}),le(qt,{style:{marginTop:32,marginBottom:12},children:"Different element"}),de(ia,{color:"quiet",style:{marginBottom:16,display:"block"},children:["Pass ",le("code",{children:'as="article"'}),", ",le("code",{children:'as="footer"'}),", etc."]}),de(id,{as:"article",theme:"Neutral-Dark",surface:"Surface",padding:"32px",style:{borderRadius:8},children:[le(qt,{children:"Neutral-Dark article"}),le(sa,{children:"Renders as an <article> element."})]})]})}const ld=["1:1","3:4","4:3","16:9","9:16","2:3","3:2","1:2","2:1","9:21","21:9","5:7","7:5","4:5","5:4","5:3","3:5","16:10","10:16","Golden-Horizontal","Golden-Vertical"],sd="1.618034",dd={"1:1":"1 / 1","3:4":"3 / 4","4:3":"4 / 3","16:9":"16 / 9","9:16":"9 / 16","2:3":"2 / 3","3:2":"3 / 2","1:2":"1 / 2","2:1":"2 / 1","9:21":"9 / 21","21:9":"21 / 9","5:7":"5 / 7","7:5":"7 / 5","4:5":"4 / 5","5:4":"5 / 4","5:3":"5 / 3","3:5":"3 / 5","16:10":"16 / 10","10:16":"10 / 16","Golden-Horizontal":sd+" / 1","Golden-Vertical":"1 / "+sd},cd={none:0,xs:1,sm:2,md:3,lg:4,xl:6};function ud({ratio:r="1:1",children:t,variant:a="default",color:o="default",padding:i="none",fit:n="width",placeholder:l=!0,elevated:s=!1,clickable:d=!1,onClick:c,maxWidth:u,maxHeight:p,component:m="div",className:f="",sx:g={},...x}){const b=dd[r]||dd["1:1"],v=(y="default"===o?"Default":o).charAt(0).toUpperCase()+y.slice(1);var y;const S=l&&0===e.Children.count(t),k="default"===o?void 0:v,B="dark"===a?"Surface-Dimmest":"light"===a?"Surface-Brightest":void 0,w=void 0!==cd[i]?cd[i]:cd.none,C=d||!!c,T="default"===a,z=s?no:io,A=s?lo:no;return le(h,{component:m,onClick:C?c:void 0,role:C?"button":void 0,tabIndex:C?0:void 0,className:"ratio ratio-"+r.toLowerCase()+" ratio-"+a+(C?" ratio-clickable":"")+(s?" ratio-elevated":"")+(f?" "+f:""),sx:{aspectRatio:b,flex:"0 0 auto",..."height"===n?{height:"100%",width:"auto",minHeight:24}:{width:"100%",height:"auto",minWidth:24},...void 0!==u&&{maxWidth:u},...void 0!==p&&{maxHeight:p},border:T?"none":"1px solid var(--Border-Variant)",borderRadius:T?0:"var(--Style-Border-Radius)",boxShadow:T?"none":z,overflow:"hidden",transition:"box-shadow 0.2s ease, border-color 0.2s ease",...C&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:A},"&:active":{transform:"scale(0.995)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...!C&&!T&&{"&:hover":{boxShadow:A}},...g},...x,children:le(h,{"data-theme":k||void 0,"data-surface":B,sx:{width:"100%",height:"100%",padding:w,backgroundColor:S?"var(--Border)":"var(--Background)",color:"var(--Text)",fontFamily:"inherit",borderRadius:T?0:"calc(var(--Style-Border-Radius) - 1px)",...S?{display:"flex",alignItems:"center",justifyContent:"center"}:{"& > *":{width:"100%",height:"100%"}}},children:S?le(Oa,{size:"large",sx:{color:"var(--Background)"},children:le(jr,{})}):t})})}const hd=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",pd=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],md=["default","solid","light","dark"],fd=["none","xs","sm","md","lg","xl"];function gd({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function xd({color:e,selected:r,onClick:t,variant:a}){const o=hd(e);return le($s,{component:"button","data-theme":{solid:o,light:o+"-Light",dark:o,default:void 0}[a],"data-surface":{solid:"Surface",light:"Surface",dark:"Surface-Dimmest",default:"Surface"}[a],onClick:()=>t(e),"aria-label":"Select "+o,"aria-pressed":r,title:o,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Background)",border:r?"2px solid var(--Text)":"2px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function bd(){const[e,t]=r("1:1"),[a,o]=r("solid"),[i,n]=r("primary"),[l,s]=r("none"),[d,c]=r(!1),[u,h]=r(!1),[p,m]=r(null),[f,g]=r("Surface");return de($s,{sx:{pb:8},children:[le(qt,{children:"Ratio"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:p,surface:f,children:le($s,{sx:{width:"100%",maxWidth:480},children:le(ud,{ratio:e,variant:a,color:i,padding:l,elevated:d,clickable:u})})}),le(ji,{code:(()=>{const r=['ratio="'+e+'"'];return"default"!==a&&r.push('variant="'+a+'"'),"default"!==i&&r.push('color="'+i+'"'),"none"!==l&&r.push('padding="'+l+'"'),d&&r.push("elevated"),u&&r.push("clickable onClick={handleClick}"),"<Ratio "+r.join(" ")+">\n {/* your content */}\n</Ratio>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le($s,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Reference"})]}),le(ci,{value:0,children:de($s,{sx:{p:3},children:[le($s,{sx:{mb:3},children:le(fi,{theme:p,onThemeChange:m,surface:f,onSurfaceChange:g})}),de($s,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:md.map(e=>le(gd,{label:hd(e),selected:a===e,onClick:()=>o(e)},e))})]}),de($s,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:pd.map(e=>de($s,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(xd,{color:e,selected:i===e,onClick:n,variant:"default"===a?"solid":a},e))})]},e.label))})]}),de($s,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PADDING"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:fd.map(e=>le(gd,{label:"none"===e?"None":e.toUpperCase(),selected:l===e,onClick:()=>s(e)},e))})]}),de($s,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"RATIO"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:ld.map(r=>le(gd,{label:r,selected:e===r,onClick:()=>t(r)},r))})]}),de($s,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de($s,{children:[le(ya,{children:"Elevated"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Bumps the shadow up one level"})]}),le(an,{checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Elevated"})]}),de($s,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de($s,{children:[le(ya,{children:"Clickable"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds hover, press, and focus-visible"})]}),le(an,{checked:u,onChange:e=>h(e.target.checked),size:"small","aria-label":"Clickable"})]})]})}),le(ci,{value:1,children:le($s,{sx:{p:3},children:de(k,{spacing:3,children:[de($s,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Common use cases"}),le(k,{spacing:0,children:[{label:"1:1",value:"Square thumbnails, avatars, product tiles"},{label:"16:9",value:"Video, hero images, modern displays"},{label:"4:3",value:"Classic photo, presentation slides"},{label:"3:2",value:"DSLR photography, print frames"},{label:"21:9",value:"Cinematic ultrawide"},{label:"9:16 / 4:5 / 5:7",value:"Portrait social media (Stories, Reels, prints)"},{label:"16:10",value:"Laptop / monitor displays"},{label:"Golden-Horizontal",value:"φ : 1 — design framing for cards, hero blocks"},{label:"Golden-Vertical",value:"1 : φ — vertical posters, sidebars"}].map(({label:e,value:r})=>de($s,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:e}),le(ga,{style:{color:"var(--Text-Quiet)"},children:r})]},e))})]}),de(sa,{color:"quiet",children:["Built on native CSS ",le("code",{children:"aspect-ratio"}),". The themed shell mirrors Box — pick a variant + color to paint the frame, or keep ",le("code",{children:'variant="default"'}),"for a borderless ratio container."]})]})})})]})})})]})]})}const vd=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",yd=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Sd=[{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function kd({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Bd({color:e,selected:r,onClick:t}){const a=vd(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function wd(){const[e,t]=r("standard"),[a,o]=r("default"),[i,n]=r("medium"),[l,s]=r("horizontal"),[d,c]=r(null),[u,p]=r("Surface"),[m,f]=r(!1),g="standard"===e?yd:Sd;return de(h,{sx:{pb:8},children:[le(qt,{children:"Tabs"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:d,surface:u,children:le(h,{sx:{width:"100%",maxWidth:"vertical"===l?500:"100%",display:"flex",flexDirection:"vertical"===l?"row":"column"},children:de(li,{defaultValue:0,variant:e,color:a,size:i,orientation:l,children:[de(si,{rounded:m,children:[le(di,{children:"Overview"}),le(di,{children:"Features"}),le(di,{children:"Pricing"})]}),le(ci,{value:0,children:le(h,{sx:{p:2},children:le(sa,{style:{color:"var(--Quiet)"},children:"Overview content goes here."})})}),le(ci,{value:1,children:le(h,{sx:{p:2},children:le(sa,{style:{color:"var(--Quiet)"},children:"Features content goes here."})})}),le(ci,{value:2,children:le(h,{sx:{p:2},children:le(sa,{style:{color:"var(--Quiet)"},children:"Pricing content goes here."})})})]})})}),le(ji,{code:(()=>{const r=[];return"standard"!==e&&r.push('variant="'+e+'"'),"default"!==a&&r.push('color="'+a+'"'),"medium"!==i&&r.push('size="'+i+'"'),"horizontal"!==l&&r.push('orientation="vertical"'),"<Tabs defaultValue={0}"+(r.length?" "+r.join(" "):"")+">\n <TabList"+(m?" rounded":"")+">\n <Tab>Overview</Tab>\n <Tab>Features</Tab>\n <Tab>Pricing</Tab>\n </TabList>\n <TabPanel value={0}>Overview content</TabPanel>\n <TabPanel value={1}>Features content</TabPanel>\n <TabPanel value={2}>Pricing content</TabPanel>\n</Tabs>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["standard","solid","light","dark"].map(r=>le(kd,{label:vd("standard"===r?"default":r),selected:e===r,onClick:()=>(e=>{t(e),"standard"!==e&&"default"===a&&o("primary")})(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:g.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Bd,{color:e,selected:a===e,onClick:o},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(kd,{label:vd(e),selected:i===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(k,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(kd,{label:vd(e),selected:l===e,onClick:()=>s(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SHAPE"}),le(an,{label:"Rounded corners",checked:m,onChange:e=>f(e.target.checked)}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Off by default. When on, the TabList applies"," ",le("code",{children:"var(--Style-Border-Radius)"})," and clips the active tab's background to fit the rounded shell (",le("code",{children:"overflow: hidden"})," is always on)."]})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"TabList",value:'role="tablist" aria-orientation'},{label:"Tab",value:'role="tab" aria-selected aria-controls={panelId}'},{label:"TabPanel",value:'role="tabpanel" aria-labelledby={tabId}'},{label:"Keyboard",value:"Arrow keys navigate tabs. Home/End jump to first/last."},{label:"Focus",value:"outline: 3px solid var(--Focus-Visible); outline-offset: -3px"},{label:"Indicator",value:"Standard: var(--Buttons-{C}-Border). Themed: var(--Text)."}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Cd={small:{fontSize:"var(--Body-Small-Font-Size)",py:"4px"},medium:{fontSize:"var(--Body-Font-Size)",py:"6px"},large:{fontSize:"var(--Body-Large-Font-Size)",py:"8px"}};function Td({children:r,separator:t="/",size:a="medium",condense:o=!1,maxItems:i=4,itemsBeforeCollapse:n=1,itemsAfterCollapse:l=1,backOnlyMobile:s=!1,onExpand:d,className:p="",sx:m={},...f}){const g=Cd[a]||Cd.medium,x=c.toArray(r).filter(u),b=x.length,v=o&&b>i;let y=x;const[S,k]=e.useState(!1);if(v&&!S){const e=x.slice(0,n),r=x.slice(b-l);y=[...e,le(h,{component:"button",onClick:()=>{k(!0),d?.()},"aria-label":"Show full breadcrumb trail",className:"breadcrumb-ellipsis",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",background:"none",border:"none",padding:"2px 4px",cursor:"pointer",fontFamily:"inherit",fontSize:"inherit",color:"var(--Quiet)",borderRadius:"4px","&:hover":{backgroundColor:"var(--Hover)",color:"var(--Text)"},"&:active":{backgroundColor:"var(--Pressed)",color:"var(--Text)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"1px"}},children:"…"},"__breadcrumb-ellipsis"),...r]}const B=[];y.forEach((e,r)=>{const a=v&&!S?r===y.length-1:r===b-1;B.push(le(h,{component:"li",className:"breadcrumb-item"+(a?" breadcrumb-current":""),sx:{display:"inline-flex",alignItems:"center",...a&&{color:"var(--Text)",fontWeight:"var(--Body-Medium-Semibold-Font-Weight, 600)"},...!a&&{color:"var(--Link, var(--Hotlink))"},maxWidth:"200px","& > *":{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},...a?{"aria-current":"page"}:{},children:e},"crumb-"+r)),r<y.length-1&&B.push(le(h,{component:"li",role:"presentation","aria-hidden":"true",className:"breadcrumb-separator",sx:{display:"inline-flex",alignItems:"center",color:"var(--Quiet)",userSelect:"none",fontSize:"inherit",lineHeight:1,flexShrink:0},children:t},"sep-"+r))});const w=b>=2?x[b-2]:null;return de(h,{component:"nav","aria-label":"Breadcrumb",className:"breadcrumbs breadcrumbs-"+a+" "+p,sx:{fontSize:g.fontSize,fontFamily:"var(--Body-Font-Family)",lineHeight:1.5,...m},...f,children:[le(h,{component:"ol",className:"breadcrumbs-list",sx:{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"var(--Sizing-1)",listStyle:"none",margin:0,padding:0,...s&&{"@media (max-width: 600px)":{display:"none"}}},children:B}),s&&w&&de(h,{className:"breadcrumbs-back-mobile",sx:{display:"none","@media (max-width: 600px)":{display:"flex",alignItems:"center",gap:"var(--Sizing-Half)",fontSize:g.fontSize,color:"var(--Link)"}},children:[le(h,{component:"span","aria-hidden":"true",sx:{fontSize:"1.1em",lineHeight:1},children:"←"}),e.cloneElement(w,{style:{...w.props?.style||{},textDecoration:"underline",textUnderlineOffset:"3px"}})]})]})}function zd({children:e,href:r,className:t="",sx:a={},...o}){const i=!!r;return le(h,{component:i?"a":"span",href:r||void 0,className:"breadcrumb-link "+t,sx:{color:"inherit",textDecoration:i?"underline":"none",textUnderlineOffset:"3px",textDecorationThickness:"1px",cursor:i?"pointer":"default",transition:"color 0.15s ease",...i&&{"&:hover":{textDecorationThickness:"2px"},"&:active":{textDecorationThickness:"3px"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"2px"}},...a},...o,children:e})}const Ad=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"";function Id({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Rd(){const[e,t]=r("medium"),[a,o]=r("/"),[i,n]=r(!1),[l,s]=r(null),[d,c]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Breadcrumbs"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:l,surface:d,children:de(Td,{size:e,separator:a,condense:i,maxItems:3,children:[le(zd,{href:"#",children:"Home"}),le(zd,{href:"#",children:"Products"}),le(zd,{href:"#",children:"Shoes"}),le(zd,{children:"Running Shoes"})]})}),le(ji,{code:(()=>{const r=[];return"medium"!==e&&r.push('size="'+e+'"'),"/"!==a&&r.push('separator="'+a+'"'),i&&r.push("condense maxItems={3}"),"<Breadcrumbs"+(r.length?" "+r.join(" "):"")+'>\n <BreadcrumbItem href="/">Home</BreadcrumbItem>\n <BreadcrumbItem href="/products">Products</BreadcrumbItem>\n <BreadcrumbItem href="/products/shoes">Shoes</BreadcrumbItem>\n <BreadcrumbItem>Running Shoes</BreadcrumbItem>\n</Breadcrumbs>'})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(r=>le(Id,{label:Ad(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEPARATOR"}),le(k,{direction:"row",spacing:1,children:["/","›","→","·","|"].map(e=>le(Id,{label:e,selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Condense"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Collapse middle items into ellipsis"})]}),le(an,{variant:"default-outline",checked:i,onChange:e=>n(e.target.checked),size:"small","aria-label":"Condense"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Nav",value:'<nav aria-label="Breadcrumb">'},{label:"List",value:"<ol> with <li> for each crumb"},{label:"Current",value:'aria-current="page" on the last item'},{label:"Links",value:"BreadcrumbItem renders <a> when href is provided"},{label:"Ellipsis",value:'Expandable button with aria-label="Show full breadcrumb trail"'},{label:"Separator",value:'aria-hidden="true" — decorative only'}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Wd={small:{btnSize:"small",fontSize:"13px",gap:"2px"},medium:{btnSize:"medium",fontSize:"14px",gap:"4px"},large:{btnSize:"large",fontSize:"16px",gap:"4px"}};function Dd({count:e=10,page:t,defaultPage:a=1,onChange:i,color:n="default",size:l="medium",siblingCount:s=1,boundaryCount:d=1,disabled:c=!1,showFirstButton:u=!1,showLastButton:p=!1,className:m="",sx:f={},...g}){const[x,b]=r(a),v=void 0!==t,y=v?t:x;(e=>{e.charAt(0).toUpperCase(),e.slice(1)})("default"===n?"Default":n);const S=Wd[l]||Wd.medium,k=o(r=>{const t=Math.max(1,Math.min(e,r));v||b(t),i?.(t)},[e,v,i]),B=function({count:e,page:r,siblingCount:t=1,boundaryCount:a=1}){const o=(e,r)=>Array.from({length:r-e+1},(r,t)=>e+t);if(2*t+3+2*a>=e)return o(1,e);const i=Math.max(r-t,a+1),n=Math.min(r+t,e-a),l=i>a+2,s=n<e-a-1;if(!l&&s)return[...o(1,Math.min(3+2*t+a,e)),"ellipsis-right",...o(e-a+1,e)];if(l&&!s){const r=o(Math.max(e-(3+2*t+a)+1,1),e);return[...o(1,a),"ellipsis-left",...r]}return l&&s?[...o(1,a),"ellipsis-left",...o(i,n),"ellipsis-right",...o(e-a+1,e)]:o(1,e)}({count:e,page:y,siblingCount:s,boundaryCount:d}),w="default"===n?"default":n;return le(h,{component:"nav","aria-label":"Pagination",className:"pagination pagination-"+n+" pagination-"+l+" "+m,sx:{display:"inline-flex",...f},...g,children:de(h,{component:"ul",sx:{display:"flex",alignItems:"center",gap:S.gap,listStyle:"none",m:0,p:0,flexWrap:"wrap"},children:[u&&le(h,{component:"li",children:le(Ao,{iconOnly:!0,variant:w+"-outline",size:S.btnSize,disabled:c||1===y,onClick:()=>k(1),"aria-label":"Go to first page",children:le(Oa,{size:"small",children:le(Xr,{})})})}),le(h,{component:"li",children:le(Ao,{iconOnly:!0,variant:w+"-outline",size:S.btnSize,disabled:c||1===y,onClick:()=>k(y-1),"aria-label":"Go to previous page",children:le(Oa,{size:"small",children:le(Gr,{})})})}),B.map((e,r)=>{if("string"==typeof e)return le(h,{component:"li",children:le(ga,{style:{color:"var(--Quiet)",padding:"0 4px"},"aria-hidden":"true",children:"…"})},e+"-"+r);const t=e===y;return le(h,{component:"li",children:le(Ao,{variant:t?w:w+"-outline",size:S.btnSize,disabled:c,onClick:()=>k(e),"aria-label":"Page "+e,"aria-current":t?"page":void 0,letterNumber:!0,children:e})},e)}),le(h,{component:"li",children:le(Ao,{iconOnly:!0,variant:w+"-outline",size:S.btnSize,disabled:c||y===e,onClick:()=>k(y+1),"aria-label":"Go to next page",children:le(Oa,{size:"small",children:le(Ur,{})})})}),p&&le(h,{component:"li",children:le(Ao,{iconOnly:!0,variant:w+"-outline",size:S.btnSize,disabled:c||y===e,onClick:()=>k(e),"aria-label":"Go to last page",children:le(Oa,{size:"small",children:le(Yr,{})})})})]})})}const Pd=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Fd=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Ld({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Hd({color:e,selected:r,onClick:t}){const a=Pd(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Md(){const[e,t]=r("default"),[a,o]=r("medium"),[i,n]=r(10),[l,s]=r(!1),[d,c]=r(!1),[u,p]=r(!1),[m,f]=r(null),[g,x]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Pagination"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:m,surface:g,children:le(Dd,{color:e,size:a,count:i,showFirstButton:l,showLastButton:d,disabled:u})}),le(ji,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),10!==i&&r.push("count={"+i+"}"),l&&r.push("showFirstButton"),d&&r.push("showLastButton"),u&&r.push("disabled"),r.push("onChange={handlePageChange}"),1===r.length?"<Pagination onChange={handlePageChange} />":"<Pagination\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:m,onThemeChange:f,surface:g,onSurfaceChange:x})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Fd.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Hd,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Ld,{label:Pd(e),selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PAGES"}),le(k,{direction:"row",spacing:1,children:[5,10,20,50].map(e=>le(Ld,{label:String(e),selected:i===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"First/Last Buttons"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show jump to first/last page"})]}),le(an,{variant:"default-outline",checked:l,onChange:e=>{s(e.target.checked),c(e.target.checked)},size:"small","aria-label":"First/last buttons"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(an,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Disabled"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Nav",value:'<nav aria-label="Pagination">'},{label:"List",value:"<ol> with <li> for each button"},{label:"Current",value:'aria-current="page" on selected page'},{label:"Labels",value:'aria-label="Page N", "Go to previous/next/first/last page"'},{label:"Keyboard",value:"Tab navigates between buttons"},{label:"Focus",value:"Uses Button component focus styles"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Ed=e=>e.charAt(0).toUpperCase()+e.slice(1),Nd={small:ia,medium:sa,large:pa},Od={small:ra,medium:ea,large:_t},Qd={small:{py:"var(--Sizing-Half)",itemPx:"var(--Sizing-1)",itemPy:"var(--Sizing-Half)",fontSize:"var(--Sm-Button-Text)",minWidth:"140px"},medium:{py:"6px",itemPx:"var(--Sizing-1-and-Half)",itemPy:"6px",fontSize:"var(--Button-Text)",minWidth:"160px"},large:{py:"var(--Sizing-1)",itemPx:"var(--Sizing-2)",itemPy:"var(--Sizing-1)",fontSize:"var(--Lg-Button-Text)",minWidth:"180px"}},Vd=l({open:!1,setOpen:()=>{},anchorRef:{current:null},menuId:"",buttonId:"",variant:"outline",color:"default",size:"medium"}),jd=()=>n(Vd);function Gd({children:e,variant:i="outline",color:n="default",size:l="medium",open:s,onOpenChange:d,...c}){const[u,p]=r(!1),m=void 0!==s,f=m?s:u,g=a(null),x=t(),b="menu-"+x,v="menubtn-"+x,y=o(e=>{const r="function"==typeof e?e(f):e;m?d?.(r):p(r)},[m,f,d]);return le(Vd.Provider,{value:{open:f,setOpen:y,anchorRef:g,menuId:b,buttonId:v,variant:i,color:n,size:l},children:le(h,{sx:{display:"inline-flex",position:"relative"},...c,children:e})})}function Ud({children:r,className:t="",sx:a={},...o}){const{open:i,setOpen:n,anchorRef:l,menuId:s,buttonId:d,size:c,color:u}=jd(),p=Qd[c]||Qd.medium,m=Ed("default"===u?"Default":u);return de(h,{component:"button",ref:l,id:d,"aria-haspopup":"true","aria-expanded":i,"aria-controls":i?s:void 0,onClick:()=>n(e=>!e),className:"menu-button "+t,sx:{display:"inline-flex",alignItems:"center",gap:"6px",padding:p.itemPy+" "+p.itemPx,fontSize:p.fontSize,fontFamily:"inherit",fontWeight:600,color:"var(--Text)",backgroundColor:"var(--Background)",border:"1px solid var(--Buttons-"+m+"-Border)",borderRadius:"var(--Style-Border-Radius)",cursor:"pointer",boxShadow:"none",transition:"box-shadow 0.15s ease","&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},...a},onKeyDown:e=>{"ArrowDown"!==e.key&&"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n(!0))},...o,children:["string"==typeof r?e.createElement(Nd[c]||Nd.medium,{style:{color:"inherit",fontWeight:600}},r):r,le(Oa,{size:"small",sx:{color:"var(--Quiet)",transition:"transform 0.2s ease",transform:i?"rotate(180deg)":"rotate(0deg)"},children:le(ve,{})})]})}function Xd({children:e,className:r="",placement:t="bottom-start",sx:o={},...n}){const{open:l,setOpen:s,anchorRef:d,menuId:c,buttonId:u,variant:p,color:m,size:f}=jd(),g=a(null),x=Qd[f]||Qd.medium,b=Ed("default"===m?"Default":m),v="var(--Buttons-"+b+"-Border)",y="light"===p?"default"===m?"Default":b:"solid"===p?b:void 0,S="light"===p?"Surface-Brightest":"solid"===p?"Surface":void 0;return i(()=>{if(l&&g.current){const e=g.current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');e&&e.focus()}},[l]),i(()=>{if(!l)return;const e=e=>{g.current&&!g.current.contains(e.target)&&d.current&&!d.current.contains(e.target)&&s(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[l,s,d]),i(()=>{if(!l)return;const e=e=>{"Escape"===e.key&&(s(!1),d.current?.focus())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[l,s,d]),l?le(h,{className:"menu menu-"+p+" "+r,sx:{position:"absolute",top:"100%",left:"bottom-end"===t?"auto":0,right:"bottom-end"===t?0:"auto",zIndex:99999,marginTop:"4px",border:"1px solid "+v,borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:"none",overflow:"hidden",...o},children:le(h,{ref:g,id:c,role:"menu","aria-labelledby":u,"data-theme":y,"data-surface":S,sx:{minWidth:x.minWidth,backgroundColor:"var(--Background)",color:"var(--Text)",fontSize:x.fontSize,fontFamily:"inherit",padding:x.py+" 0",outline:"none",borderRadius:"calc(var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px))) - 1px)"},onKeyDown:e=>{const r=g.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');if(!r?.length)return;const t=Array.from(r).indexOf(document.activeElement);"ArrowDown"===e.key?(e.preventDefault(),r[(t+1)%r.length].focus()):"ArrowUp"===e.key?(e.preventDefault(),r[(t-1+r.length)%r.length].focus()):"Home"===e.key?(e.preventDefault(),r[0].focus()):"End"===e.key?(e.preventDefault(),r[r.length-1].focus()):"Tab"===e.key&&s(!1)},...n,children:e})}):null}function Yd({children:e,onClick:r,selected:t=!1,disabled:a=!1,className:o="",sx:i={},...n}){const{setOpen:l,size:s}=jd(),d=Qd[s]||Qd.medium,c=t?Od[s]||Od.medium:Nd[s]||Nd.medium,u=()=>{a||(r?.(),l(!1))};return le(h,{role:"menuitem",tabIndex:a?-1:0,"aria-disabled":a||void 0,"aria-selected":t||void 0,onClick:u,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),u())},className:"menu-item"+(t?" menu-item-selected":"")+" "+o,sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-1)",padding:d.itemPy+" "+d.itemPx,fontSize:d.fontSize,color:a?"var(--Quiet)":t?"var(--Text)":"var(--Quiet)",backgroundColor:t?"var(--Hover)":"transparent",cursor:a?"not-allowed":"pointer",opacity:a?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.1s ease, color 0.1s ease",userSelect:"none",...!a&&{"&:hover":{backgroundColor:"var(--Hover)",color:"var(--Text)"},"&:active":{backgroundColor:"var(--Pressed)",color:"var(--Text)"},"&:focus-visible":{backgroundColor:"var(--Hover)",color:"var(--Text)",outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"}},...i},...n,children:le(c,{color:"standard",style:{color:"inherit"},children:e})})}function qd({className:e="",sx:r={},...t}){return le(h,{component:"hr",role:"separator",className:"menu-divider "+e,sx:{border:"none",borderTop:"1px solid var(--Border)",margin:"4px 0",...r},...t})}const Zd=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Jd=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Kd({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function $d({color:e,selected:r,onClick:t}){const a=Zd(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function _d(){const[e,t]=r("outline"),[a,o]=r("default"),[i,n]=r("medium"),[l,s]=r(null),[d,c]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Menu"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:l,surface:d,sx:{minHeight:250,alignItems:"flex-start",pt:6},children:de(Gd,{variant:e,color:a,size:i,children:[le(Ud,{children:"Actions"}),de(Xd,{children:[le(Yd,{children:"Edit"}),le(Yd,{children:"Duplicate"}),le(Yd,{selected:!0,children:"Archive"}),le(qd,{}),le(Yd,{disabled:!0,children:"Delete"})]})]})}),le(ji,{code:(()=>{const r=[];return"outline"!==e&&r.push('variant="'+e+'"'),"default"!==a&&r.push('color="'+a+'"'),"medium"!==i&&r.push('size="'+i+'"'),"<Dropdown "+r.join(" ")+">\n <MenuButton>Actions</MenuButton>\n <Menu>\n <MenuItem>Edit</MenuItem>\n <MenuItem>Duplicate</MenuItem>\n <MenuDivider />\n <MenuItem>Delete</MenuItem>\n </Menu>\n</Dropdown>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["outline","solid","light"].map(r=>le(Kd,{label:Zd(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Jd.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le($d,{color:e,selected:a===e,onClick:o},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Kd,{label:Zd(e),selected:i===e,onClick:()=>n(e)},e))})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Button",value:'aria-haspopup="true" aria-expanded aria-controls'},{label:"Menu",value:'role="menu" aria-labelledby={buttonId}'},{label:"Items",value:'role="menuitem" with tabIndex'},{label:"Selected",value:'aria-selected="true" on active item'},{label:"Disabled",value:'aria-disabled="true", not focusable'},{label:"Keyboard",value:"Arrow keys navigate. Enter/Space selects. Escape closes."},{label:"Focus",value:"First item focused on open. Focus returns to button on close."}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}let ec=0;const rc={default:"Nav-Bar",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},tc="var(--Sizing-1, 8px)",ac="40px",oc="var(--Icon-Size, 24px)",ic="var(--Sizing-Half, 4px)",nc={horizontal:{px:"var(--Button-Height, 32px)",py:"12px"},vertical:{px:"var(--Sizing-1-and-Half, 12px)",py:"var(--Sizing-2, 16px)"}},lc={px:0,py:0};function sc({items:e=[],value:t,defaultValue:i=0,onChange:n,showLabels:l=!0,variant:s="fixed",orientation:d="horizontal",barColor:c="default",fabAction:u,fabPosition:p="end",fixed:m=!0,"aria-label":f="Bottom navigation",className:g="",sx:x={},...b}){const[v,y]=r(i),S=void 0!==t,k=S?t:v,B=o(e=>{S||y(e),n?.(e)},[S,n]),w="vertical"===d,C="floating"===s,T=rc[c]||rc.default,z=C?w?nc.vertical:nc.horizontal:lc,A=a(null);null===A.current&&(A.current="bottom-nav-"+ec++);const I=e=>A.current+"-tab-"+e,R=!!u;return de(h,{component:"nav","data-theme":T,"data-surface":"Surface-Dim","aria-label":f,className:"bottom-nav bottom-nav-"+c+" bottom-nav-style-"+(C?"floating":"fixed")+" bottom-nav-bar-"+d+(l?" bottom-nav-labels":" bottom-nav-no-labels")+(m?" bottom-nav-fixed":"")+(g?" "+g:""),sx:{display:"flex",flexDirection:w?"column":"row",alignItems:"center",justifyContent:"center",backgroundColor:"var(--Background)",borderRadius:C?"83px":0,fontFamily:"inherit",width:w?"fit-content":"100%",px:z.px,py:z.py,...m&&{position:"fixed",zIndex:1100,...w?{top:"50%",left:0,transform:"translateY(-50%)"}:{bottom:0,left:0,right:0}},...x},...b,children:[R&&le(h,{role:"tablist","aria-orientation":w?"vertical":"horizontal","aria-owns":e.map((e,r)=>I(r)).join(" "),sx:{position:"absolute",width:0,height:0,overflow:"hidden"}}),de(h,{role:R?void 0:"tablist","aria-orientation":R?void 0:w?"vertical":"horizontal",sx:{display:"flex",flexDirection:w?"column":"row",alignItems:"center",justifyContent:w?"flex-start":"space-between",gap:w?"10px":0,width:w?"auto":"100%",maxWidth:w?void 0:600},children:[e.map((e,r)=>le(dc,{id:R?I(r):void 0,icon:e.icon,label:e.label,selected:r===k,showLabel:l,onClick:()=>B(r),ariaLabel:e.label||e.ariaLabel,disabled:e.disabled},e.key||r)).flatMap((e,r,t)=>{if(!u)return[e];return r===("center"===p?Math.ceil(t.length/2):t.length)-1?[e,le(uc,{...u,showLabel:l,position:p},"fab")]:[e]}),u&&0===e.length&&le(uc,{...u,showLabel:l,position:p},"fab")]})]})}function dc({id:e,icon:r,label:t,selected:a,showLabel:o,onClick:i,ariaLabel:n,disabled:l}){return de(h,{component:"button",type:"button",role:"tab",id:e,"aria-selected":a,"aria-label":n,onClick:i,disabled:l,"aria-disabled":l||void 0,className:"bottom-nav-item"+(a?" bottom-nav-item-selected":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:ic,width:40,flexShrink:0,border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0,fontFamily:"inherit",outline:"none","&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"8px"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}},children:[le(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",minWidth:32,minHeight:32,padding:tc,borderRadius:ac,backgroundColor:a?"var(--Text)":"transparent",color:a?"var(--Background)":"var(--Quiet)",fontSize:oc,transition:"background-color 0.2s ease, color 0.15s ease","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"},".bottom-nav-item:hover &":a?{backgroundColor:"var(--Text)"}:{color:"var(--Text)",backgroundColor:"var(--Hover)"},".bottom-nav-item:active &":a?{backgroundColor:"var(--Text)"}:{color:"var(--Text)",backgroundColor:"var(--Pressed)"},".bottom-nav-item:disabled:hover &":{backgroundColor:"transparent"}},children:r}),o&&t&&le(ba,{className:"bottom-nav-label",style:{color:a?"var(--Text)":"var(--Quiet)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:t})]})}const cc=32;function uc({icon:e,label:t,onClick:o,showLabel:n,actions:l,position:s="end"}){const d=Array.isArray(l)&&l.length>0,[c,u]=r(!1),p=a(null);i(()=>{if(!c)return;const e=e=>{p.current&&!p.current.contains(e.target)&&u(!1)},r=e=>{"Escape"===e.key&&u(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",r),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",r)}},[c]);const m=e=>({display:"flex",alignItems:"center",justifyContent:"center",minWidth:e,minHeight:e,boxSizing:"border-box",borderRadius:ac,borderWidth:"var(--Button-Border-Width, 1px)",borderStyle:"solid",borderColor:"var(--Buttons-Default-Border)",color:"var(--Buttons-Default-Border)",backgroundColor:"transparent","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}}),f="center"!==s;return de(h,{ref:p,sx:{position:"relative",display:"flex",flexShrink:0},children:[de(h,{component:"button",type:"button","aria-label":t||"Action",onClick:e=>{d&&u(e=>!e),o?.(e)},...d?{"aria-haspopup":"menu","aria-expanded":c}:{},className:"bottom-nav-fab"+(c?" bottom-nav-fab-open":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:ic,width:40,flexShrink:0,border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0,fontFamily:"inherit",outline:"none","&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"8px"}},children:[le(h,{sx:{...m(32),padding:tc,fontSize:oc,transition:"background-color 0.15s ease, transform 0.2s ease",transform:c?"rotate(45deg)":"none",".bottom-nav-fab:hover &":{backgroundColor:"var(--Hover)"},".bottom-nav-fab:active &":{backgroundColor:"var(--Pressed)"}},children:e||le(Tr,{})}),n&&t&&le(ba,{className:"bottom-nav-label",style:{color:"var(--Buttons-Default-Border)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:t})]}),d&&c&&le(h,{role:"menu","aria-label":t||"Actions",className:"bottom-nav-dial","data-surface":"Surface-Brightest",sx:{position:"absolute",bottom:"calc(100% + var(--Sizing-1, 8px))",...f?{right:0}:{left:0},zIndex:1,display:"flex",flexDirection:"column-reverse",padding:"var(--Sizing-1, 8px)",gap:"var(--Sizing-1, 8px)",backgroundColor:"var(--Background)",color:"var(--Text)",border:"1px solid var(--Border)",borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:"var(--Effect-Level-3, none)",whiteSpace:"nowrap"},children:l.map((e,r)=>de(h,{component:"button",type:"button",role:"menuitem","aria-label":e.label,className:"bottom-nav-dial-item",onClick:r=>{u(!1),e.onClick?.(r)},sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-1, 8px)",flexDirection:f?"row-reverse":"row",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0,fontFamily:"inherit",color:"inherit",outline:"none",borderRadius:ac,"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}},children:[le(h,{sx:{width:40,display:"flex",justifyContent:"center",flexShrink:0},children:le(h,{sx:{...m(cc),fontSize:"var(--Icon-Size-Small, 16px)"},children:e.icon||le(Tr,{})})}),le(va,{style:{color:"inherit"},children:e.label})]},e.key||r))})]})}const hc={Home:le(Se,{sx:{fontSize:"inherit"}}),Explore:le(qr,{sx:{fontSize:"inherit"}}),Radio:le(Zr,{sx:{fontSize:"inherit"}}),Library:le(Jr,{sx:{fontSize:"inherit"}}),Favorite:le(ye,{sx:{fontSize:"inherit"}}),Person:le(he,{sx:{fontSize:"inherit"}}),Search:le(we,{sx:{fontSize:"inherit"}}),Settings:le(Be,{sx:{fontSize:"inherit"}}),Notifications:le(Te,{sx:{fontSize:"inherit"}}),Cart:le(Ae,{sx:{fontSize:"inherit"}}),Star:le(Ce,{sx:{fontSize:"inherit"}}),Bookmark:le(Kr,{sx:{fontSize:"inherit"}})},pc=Object.keys(hc),mc=[{icon:"Home",label:"Home"},{icon:"Explore",label:"Browse"},{icon:"Radio",label:"Radio"},{icon:"Library",label:"Library"}],fc=[{value:"default",label:"Default",desc:'data-theme="Nav-Bar"'},{value:"primary",label:"Primary",desc:'data-theme="Primary"'},{value:"primary-light",label:"Primary Light",desc:'data-theme="Primary-Light"'},{value:"primary-medium",label:"Primary Medium",desc:'data-theme="Primary-Medium"'},{value:"primary-dark",label:"Primary Dark",desc:'data-theme="Primary-Dark"'},{value:"white",label:"White",desc:'data-theme="White"'},{value:"black",label:"Black",desc:'data-theme="Black"'}];function gc({label:e,selected:r,onClick:t,disabled:a}){return le(h,{component:"button",onClick:t,disabled:a,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:a?"not-allowed":"pointer",border:"2px solid var(--Buttons-Primary-Button)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:r?"var(--Buttons-Primary-Button)":"transparent",color:r?"var(--Buttons-Primary-Text)":"var(--Text)",padding:"4px 12px",fontSize:"14px",fontFamily:"inherit",fontWeight:500,whiteSpace:"nowrap",flexShrink:0,opacity:a?.4:1,transition:"background-color 0.15s ease, color 0.15s ease","&:hover":{backgroundColor:a?"transparent":r?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function xc({value:e,onChange:r,placeholder:t,sx:a}){return le(h,{component:"input",type:"text",value:e,onChange:e=>r(e.target.value),placeholder:t,sx:{flex:1,padding:"4px 8px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",outline:"none",minWidth:0,"&:focus":{borderColor:"var(--Focus-Visible)"},...a}})}function bc({value:e,onChange:r,options:t,label:a}){return le(h,{component:"select",value:e,onChange:e=>r(e.target.value),"aria-label":a,sx:{padding:"4px 6px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",outline:"none",cursor:"pointer","&:focus":{borderColor:"var(--Focus-Visible)"}},children:t.map(e=>le("option",{value:"string"==typeof e?e:e.value,children:"string"==typeof e?e:e.label},"string"==typeof e?e:e.value))})}function vc({value:e,onChange:r,min:t,max:a,label:o}){return de(h,{sx:{display:"flex",alignItems:"center",gap:1},children:[le(ga,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:90},children:o}),le("button",{type:"button",onClick:()=>{e>t&&r(e-1)},disabled:e<=t,style:{width:28,height:28,display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",cursor:e<=t?"not-allowed":"pointer",fontSize:"14px",opacity:e<=t?.4:1,fontFamily:"inherit"},children:"−"}),le(h,{sx:{fontWeight:700,fontSize:"14px",minWidth:24,textAlign:"center"},children:e}),le("button",{type:"button",onClick:()=>{e<a&&r(e+1)},disabled:e>=a,style:{width:28,height:28,display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",cursor:e>=a?"not-allowed":"pointer",fontSize:"14px",opacity:e>=a?.4:1,fontFamily:"inherit"},children:"+"})]})}function yc({label:e,checked:r,onChange:t,caption:a,disabled:o}){return de(h,{sx:{py:.5,opacity:o?.4:1},children:[le(b,{control:le(x,{checked:r,onChange:e=>t(e.target.checked),size:"small",disabled:o,sx:{color:"var(--Text-Quiet)","&.Mui-checked":{color:"var(--Buttons-Primary-Button)"}}}),label:le(ya,{children:e}),sx:{m:0}}),a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginLeft:32},children:a})]})}function Sc(){const[e,t]=r(0),[a,o]=r(0),[n,l]=r(!0),[s,d]=r(!0),[c,u]=r("fixed"),[p,m]=r("horizontal"),[f,g]=r("default"),[x,b]=r(4),[v,y]=r(mc.map(e=>({icon:e.icon,label:e.label})));i(()=>{y(e=>{const r=[],t=[{icon:"Favorite",label:"Favorites"},{icon:"Person",label:"Profile"}];for(let a=0;a<x;a++)if(e[a])r.push(e[a]);else{const e=t[a-mc.length]||{icon:pc[a%pc.length],label:pc[a%pc.length]};r.push(e)}return r}),o(e=>Math.min(e,x-1))},[x]);const S=(e,r,t)=>{y(a=>{const o=[...a];return o[e]={...o[e],[r]:t},o})},B=v.slice(0,x).map(e=>({icon:hc[e.icon]||hc.Home,label:e.label}));return de(h,{sx:{pb:8},children:[le(qt,{children:"Bottom Navigation"}),de(M,{value:e,onChange:(e,r)=>t(r),sx:{mt:3,mb:0,borderBottom:"1px solid var(--Border)","& .MuiTabs-indicator":{backgroundColor:"var(--Buttons-Primary-Button)",height:3},"& .MuiTab-root":{color:"var(--Text-Quiet)",textTransform:"none",fontWeight:500,"&.Mui-selected":{color:"var(--Text)"}}},children:[le(E,{label:"Playground"}),le(E,{label:"Accessibility"})]}),0===e&&de(C,{container:!0,sx:{minHeight:400},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[de(h,{sx:{p:4,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:300,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",gap:4},children:[le(h,{sx:{width:"100%",maxWidth:500,overflow:"hidden",boxShadow:"0 2px 12px rgba(0,0,0,0.08)"},children:le(sc,{items:B,value:a,onChange:o,showLabels:s,variant:c,orientation:p,barColor:f,fixed:!1},"bn-"+x+"-"+c+"-"+p+"-"+s+"-"+f)}),de(ga,{style:{color:"var(--Text-Quiet)",textAlign:"center"},children:[x," items · ",s?"Labels":"Icons only"," · ","floating"===c?"Floating":"Fixed"," · ","vertical"===p?"Vertical":"Horizontal"," · ",(fc.find(e=>e.value===f)||fc[0]).label]})]}),le(ji,{code:(()=>{const e=[];e.push("const items = ["),B.forEach((r,t)=>{const a=v[t];e.push(" { icon: <"+a.icon+"Icon />, label: '"+a.label+"' },")}),e.push("];"),e.push("");const r=[];return r.push("items={items}"),"default"!==f&&r.push('barColor="'+f+'"'),s||r.push("showLabels={false}"),"fixed"!==c&&r.push('variant="'+c+'"'),"horizontal"!==p&&r.push('orientation="'+p+'"'),n||r.push("fixed={false}"),e.push("<BottomNavigation"),r.forEach(r=>e.push(" "+r)),e.push("/>"),e.join("\n")})(),language:"JSX",sx:{borderRadius:0,borderBottom:"1px solid var(--Border)"}})]}),de(C,{item:!0,sx:{width:{xs:"calc(100vw - 432px)",md:"calc((100vw - 432px) / 2)"},flexShrink:0,p:3,backgroundColor:"var(--Container)",overflowY:"auto"},children:[le(Zt,{children:"Playground"}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:fc.map(e=>le(gc,{label:e.label,selected:f===e.value,onClick:()=>g(e.value)},e.value))}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:[(fc.find(e=>e.value===f)||fc[0]).desc,' · data-surface="Surface-Dim" · bg: var(--Background)']})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),de(k,{spacing:0,children:[le(yc,{label:"Fixed",checked:n,onChange:l,caption:"Position fixed to bottom of viewport."}),le(yc,{label:"Labels",checked:s,onChange:d,caption:"Show text labels with icons."}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Selected paints a filled circle in var(--Text) with the icon reversed out of it. Not a choice — the design has one selected state, so there is no switch for it."})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(gc,{label:"Fixed",selected:"fixed"===c,onClick:()=>u("fixed")}),le(gc,{label:"Floating",selected:"floating"===c,onClick:()=>u("floating")})]}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"floating"===c?"A pill, rounded to its own height so the ends stay semicircular at any length.":"A square band, edge to edge."}),le(wa,{style:{color:"var(--Text-Quiet)",display:"block",margin:"16px 0 8px"},children:"ORIENTATION"}),de(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(gc,{label:"Horizontal",selected:"horizontal"===p,onClick:()=>m("horizontal")}),le(gc,{label:"Vertical",selected:"vertical"===p,onClick:()=>m("vertical")})]}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"The BAR's direction, not the label's — the label is always under the icon. Vertical is a rail of actions down one side."})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"NAVIGATION ITEMS"}),le(vc,{label:"Count",value:x,onChange:b,min:3,max:6}),le(k,{spacing:1.5,sx:{mt:2},children:v.slice(0,x).map((e,r)=>de(h,{sx:{display:"flex",alignItems:"center",gap:1,flexWrap:"nowrap"},children:[le(ga,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:16,textAlign:"right"},children:r+1}),le(bc,{value:e.icon,onChange:e=>S(r,"icon",e),options:pc,label:"Item "+(r+1)+" icon"}),s&&le(xc,{value:e.label,onChange:e=>S(r,"label",e),placeholder:"Label"})]},r))})]})]})]}),1===e&&de(h,{sx:{p:4},children:[le(Zt,{children:"Accessibility Requirements"}),de(ia,{color:"quiet",style:{marginBottom:32},children:[x," items · ",s?"Labels":"Icons only"," · ","floating"===c?"Floating":"Fixed"," · ","vertical"===p?"Vertical":"Horizontal"," · ",(fc.find(e=>e.value===f)||fc[0]).label]}),de(k,{spacing:4,children:[de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Landmark:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav role="navigation" aria-label="Bottom navigation">'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Tab list:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tablist"'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Tab items:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tab", aria-selected, aria-label'})]}),de(h,{sx:{py:1.5},children:[le(ia,{children:"Focus:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) on :focus-visible."})]})]})]}),de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Token Reference"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Bar:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'Always: data-surface="Surface-Dim" · bg: var(--Background). Theme set by data-theme (Nav-Bar, Primary, Primary-Light, etc.).'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Unselected icon/label:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text-Quiet)"})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Selected:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Selected pill:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"bg: var(--Buttons-Primary-Button) · border: 1px solid var(--Buttons-Primary-Border) · icon/text: var(--Buttons-Primary-Text)"})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Backfill + horizontal label:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label inside pill: var(--Buttons-Primary-Text)"})]}),de(h,{sx:{py:1.5},children:[le(ia,{children:"Backfill + vertical label:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label below pill: var(--Text)"})]})]})]}),de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Best Practices"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Item count:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"3–5 recommended. 6 maximum."})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Horizontal layout:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Only available with 4 or fewer items."})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Labels:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Always recommended for clarity."})]}),de(h,{sx:{py:1.5},children:[le(ia,{children:"Fixed:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Add bottom padding to main content to avoid overlap."})]})]})]})]})]})]})}const kc={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Bc={small:{indicator:24,fontSize:"var(--Sm-Button-Numbers, 10px)",dot:"var(--Sm-No-Count-Step, 8px)",labelFontSize:"13px",connectorThickness:"var(--Sm-Step-Bar, 1px)",gap:0},medium:{indicator:32,fontSize:"var(--Button-Numbers, 12px)",dot:"var(--No-Count-Step, 12px)",labelFontSize:"14px",connectorThickness:"var(--Step-Bar, 2px)",gap:0},large:{indicator:40,fontSize:"var(--Lg-Button-Numbers, 16px)",dot:"var(--Lg-No-Count-Step, 16px)",labelFontSize:"16px",connectorThickness:"var(--Lg-Step-Bar, 4px)",gap:0}},wc=l({orientation:"horizontal",size:"medium",color:"primary",activeStep:0,clickable:!1,onStepClick:null,dashedIncomplete:!1,totalSteps:0,variant:"count"}),Cc=()=>n(wc);function Tc({children:r,orientation:t="horizontal",size:a="medium",color:o="primary",activeStep:i=0,clickable:n=!1,onStepClick:l,dashedIncomplete:s=!1,variant:d="count",className:c="",sx:u={},...p}){const m=e.Children.toArray(r).filter(e.isValidElement),f=m.length,g="horizontal"===t;return le(wc.Provider,{value:{orientation:t,size:a,color:o,activeStep:i,clickable:n,onStepClick:l,dashedIncomplete:s,totalSteps:f,variant:d},children:le(h,{component:"ol",role:"list","aria-label":"Progress",className:"stepper stepper-"+t+" stepper-"+a+" stepper-"+o+" "+c,sx:{display:"flex",flexDirection:g?"row":"column",alignItems:g?"flex-start":"stretch",listStyle:"none",margin:0,padding:0,width:"100%",gap:0,...u},...p,children:m.map((r,t)=>e.cloneElement(r,{_index:t,key:r.key||t}))})})}function zc({children:e,icon:r,label:t,disabled:a=!1,_index:o=0,className:i="",sx:n={},...l}){const{orientation:s,size:d,color:c,activeStep:u,clickable:p,onStepClick:m,dashedIncomplete:f,totalSteps:g,variant:x}=Cc(),b=p&&!a,v=Bc[d]||Bc.medium,y=kc[c]||"Primary",S="horizontal"===s,k=o===u,B=o<u,w=o>u,C=o===g-1,T=r||o+1,z=t||e,A=w?"var(--Quiet)":"var(--Buttons-"+y+"-Border)",I=k?"var(--Buttons-"+y+"-Button)":"transparent",R=k?"var(--Buttons-"+y+"-Text)":w?"var(--Quiet)":"var(--Text)",W=k?"var(--Buttons-"+y+"-Hover)":"var(--Hover)",D=k?"var(--Buttons-"+y+"-Pressed)":"var(--Pressed)",P="noCount"===x,F=le(h,{component:b?"button":"div",onClick:b?()=>m?.(o):void 0,onKeyDown:b?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),m?.(o))}:void 0,tabIndex:b?0:void 0,role:b?"button":void 0,"aria-label":b?"Go to step "+(o+1):void 0,"aria-current":k?"step":void 0,"aria-disabled":a||void 0,className:"step-indicator step-indicator-"+d+(k?" step-indicator-active":"")+(B?" step-indicator-completed":"")+(w?" step-indicator-incomplete":"")+(b?" step-indicator-clickable":""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:P?v.dot:v.indicator+"px",height:P?v.dot:v.indicator+"px",minWidth:P?v.dot:v.indicator+"px",minHeight:P?v.dot:v.indicator+"px",borderRadius:"50%",border:"var(--Button-Border-Width, 1px) solid "+A,backgroundColor:I,color:R,fontSize:v.fontSize,fontFamily:"inherit",fontWeight:700,lineHeight:1,flexShrink:0,position:"relative",transition:"background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease",cursor:a?"not-allowed":b?"pointer":"default",outline:"none",padding:0,...a&&{opacity:"var(--Disabled, 0.38)"},..."small"===d&&{"&::after":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"24px",height:"24px",borderRadius:"50%"}},...b&&{"&:hover":{backgroundColor:W},"&:active":{backgroundColor:D},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"}}},children:P?null:T}),L=o<u,H=C?null:le(h,{className:"step-connector"+(L?" step-connector-completed":" step-connector-incomplete")+(f&&!L?" step-connector-dashed":""),"aria-hidden":"true",sx:{flex:1,...S?{height:v.connectorThickness,minWidth:"20px",alignSelf:"flex-start",marginTop:`calc(${v.indicator/2}px - ${v.connectorThickness} / 2)`,marginLeft:"8px",marginRight:"8px"}:{width:v.connectorThickness,minHeight:"24px",marginLeft:`calc(${v.indicator/2}px - ${v.connectorThickness} / 2)`,marginTop:"4px",marginBottom:"4px"},backgroundColor:L?"var(--Buttons-"+y+"-Button)":"var(--Border)",...f&&!L&&{backgroundColor:"transparent",backgroundImage:S?"repeating-linear-gradient(90deg, var(--Border) 0px, var(--Border) 6px, transparent 6px, transparent 12px)":"repeating-linear-gradient(180deg, var(--Border) 0px, var(--Border) 6px, transparent 6px, transparent 12px)",backgroundSize:S?"12px 100%":"100% 12px"},transition:"background-color 0.15s ease"}}),M=z?le("small"===d?ga:ia,{style:{fontWeight:k?600:400,color:k||B?"var(--Text)":"var(--Quiet)",textAlign:S?"center":"left",whiteSpace:"nowrap",lineHeight:1.3},children:z}):null;return de(h,S?{component:"li",className:"step step-"+d+" step-horizontal"+(k?" step-active":"")+(B?" step-completed":"")+(w?" step-incomplete":"")+" "+i,sx:{display:"flex",alignItems:"center",flex:C?"none":1,...n},...l,children:[de(h,{sx:{display:"flex",flexDirection:"column",alignItems:"center",flexShrink:0},children:[F,M&&le(h,{sx:{mt:"4px"},children:M})]}),H]}:{component:"li",className:"step step-"+d+" step-vertical"+(k?" step-active":"")+(B?" step-completed":"")+(w?" step-incomplete":"")+" "+i,sx:{display:"flex",flexDirection:"column",alignItems:"flex-start",...n},...l,children:[de(h,{sx:{display:"flex",alignItems:"center",gap:"8px"},children:[F,M]}),H]})}const Ac=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Ic=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Rc=["Account","Details","Review","Confirm","Complete","Done"];function Wc({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Dc({color:e,selected:r,onClick:t}){const a=Ac(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Pc(){const[e,t]=r("default"),[a,o]=r("medium"),[i,n]=r("horizontal"),[l,s]=r(4),[d,c]=r(1),[u,p]=r(!1),[m,f]=r(!1),[g,x]=r(null),[b,v]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Stepper"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:g,surface:b,children:le(h,{sx:{width:"100%",maxWidth:"vertical"===i?300:"100%"},children:le(Tc,{color:e,size:a,orientation:i,activeStep:d,clickable:u,onStepClick:u?c:void 0,dashedIncomplete:m,children:Rc.slice(0,l).map(e=>le(zc,{label:e},e))})})}),le(ji,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),"horizontal"!==i&&r.push('orientation="vertical"'),r.push("activeStep={"+d+"}"),u&&r.push("clickable onStepClick={setActiveStep}"),m&&r.push("dashedIncomplete"),"<Stepper "+r.join(" ")+">\n"+Rc.slice(0,l).map(e=>' <Step label="'+e+'" />').join("\n")+"\n</Stepper>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:g,onThemeChange:x,surface:b,onSurfaceChange:v})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STEPS"}),le(k,{direction:"row",spacing:1,children:[2,3,4,5,6].map(e=>le(Wc,{label:String(e),selected:l===e,onClick:()=>{s(e),d>=e&&c(e-1)}},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ACTIVE STEP"}),le(k,{direction:"row",spacing:1,children:Rc.slice(0,l).map((e,r)=>le(Wc,{label:String(r+1),selected:d===r,onClick:()=>c(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Ic.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Dc,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Wc,{label:Ac(e),selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(k,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(Wc,{label:Ac(e),selected:i===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Clickable"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Steps are interactive buttons"})]}),le(an,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clickable"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Dashed Incomplete"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Dashed connector for future steps"})]}),le(an,{variant:"default-outline",checked:m,onChange:e=>f(e.target.checked),size:"small","aria-label":"Dashed incomplete"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Container",value:'<ol role="list" aria-label="Progress">'},{label:"Steps",value:"<li> elements with step state classes"},{label:"Active",value:'aria-current="step" on the active indicator'},{label:"Clickable",value:'role="button" aria-label="Go to step N" with tabIndex'},{label:"Focus",value:"outline: 3px solid var(--Focus-Visible); outline-offset: 2px"},{label:"Connectors",value:'aria-hidden="true" — decorative only'}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}function Fc({actions:e=[],variant:t="solid",color:n="default",direction:l="up",speed:s=50,showTooltips:d=!0,open:c,onOpen:u,onClose:p,icon:m,ariaLabel:f="Speed Dial",className:g="",sx:x={},...b}){const[v,y]=r(!1),S=void 0!==c,k=S?c:v,w=a(null),C=t,T=o(()=>{k?(S||y(!1),p?.()):(S||y(!0),u?.())},[k,S,u,p]),z=o((e,r)=>{e.onClick?.(r),S||y(!1),p?.()},[S,p]);i(()=>{if(!k)return;const e=e=>{w.current&&!w.current.contains(e.target)&&(S||y(!1),p?.())};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[k,S,p]),i(()=>{if(!k)return;const e=e=>{"Escape"===e.key&&(S||y(!1),p?.())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[k,S,p]);const A="up"===l||"down"===l,I="up"===l||"down"===l?"left":"top";return de(h,{ref:w,className:"speed-dial speed-dial-"+t+" speed-dial-"+n+" speed-dial-"+l+" "+g,sx:{position:"relative",display:"inline-flex",overflow:"visible",width:A?"56px":"auto",height:A?"auto":"56px",...x},...b,children:[le(Xn,{size:"large",variant:C,color:n,onClick:T,"aria-label":f,"aria-expanded":k,"aria-haspopup":"menu",sx:{position:"relative",zIndex:2},children:le(h,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",transition:"transform 0.3s ease",transform:k?"rotate(45deg)":"rotate(0deg)"},children:m||le(Tr,{})})}),le(h,{role:"menu",sx:{position:"absolute",inset:0,pointerEvents:"none",overflow:"visible"},children:e.map((e,r)=>{const t=(e=>{const r=56+44*e;switch(l){case"up":default:return{bottom:r+"px",left:"12px"};case"down":return{top:r+"px",left:"12px"};case"left":return{right:r+"px",top:"12px"};case"right":return{left:r+"px",top:"12px"}}})(r),a=r*s,o=le(Xn,{size:"small",variant:C,color:n,role:"menuitem","aria-label":e.name||"Action "+(r+1),onClick:()=>z(e,r),sx:{position:"absolute",...t,opacity:k?1:0,transform:k?"scale(1)":"scale(0.3)",transition:"opacity 0.2s ease, transform 0.2s ease",transitionDelay:k?a+"ms":"0ms",pointerEvents:k?"auto":"none"},children:e.icon||le(Tr,{})},e.key||r);return d&&e.name?le(B,{title:e.name,placement:I,arrow:!0,open:!!k&&void 0,slotProps:{tooltip:{sx:{backgroundColor:"var(--Container)",color:"var(--Text)",fontSize:"12px",fontWeight:500,border:"1px solid var(--Border)",boxShadow:"0 2px 8px rgba(0,0,0,0.12)"}},arrow:{sx:{color:"var(--Container)"}}},children:o},e.key||r):o})})]})}const Lc=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Hc=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Mc=[{name:"Edit",icon:le(Oa,{size:"small",sx:{color:"inherit"},children:le($r,{})})},{name:"Share",icon:le(Oa,{size:"small",sx:{color:"inherit"},children:le(_r,{})})},{name:"Delete",icon:le(Oa,{size:"small",sx:{color:"inherit"},children:le(ke,{})})},{name:"Favorite",icon:le(Oa,{size:"small",sx:{color:"inherit"},children:le(ye,{})})}];function Ec({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Nc({color:e,selected:r,onClick:t}){const a=Lc(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Oc(){const[e,t]=r("solid"),[a,o]=r("default"),[i,n]=r("up"),[l,s]=r(!0),[d,c]=r(null),[u,p]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Speed Dial"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:d,surface:u,sx:{minHeight:300,alignItems:"flex-end",justifyContent:"center"},children:le(Fc,{variant:e,color:a,direction:i,showTooltips:l,actions:Mc,ariaLabel:"Quick actions"})}),le(ji,{code:(()=>{const r=[];return"solid"!==e&&r.push('variant="'+e+'"'),"default"!==a&&r.push('color="'+a+'"'),"up"!==i&&r.push('direction="'+i+'"'),l||r.push("showTooltips={false}"),r.push("actions={actions}"),r.push('ariaLabel="Quick actions"'),"<SpeedDial\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["solid","outline"].map(r=>le(Ec,{label:Lc(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Hc.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Nc,{color:e,selected:a===e,onClick:o},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["up","down","left","right"].map(e=>le(Ec,{label:Lc(e),selected:i===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Tooltips"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show labels beside actions"})]}),le(an,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Show tooltips"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"FAB",value:'aria-expanded, aria-haspopup="menu", aria-label'},{label:"Actions",value:'role="menu" container, role="menuitem" on each action'},{label:"Labels",value:"aria-label on each action from name prop"},{label:"Keyboard",value:"Escape closes. Click outside closes."},{label:"Focus",value:"outline: 3px solid var(--Focus-Visible); outline-offset: 2px"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Qc={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",black:"BW",white:"BW"};function Vc(e,r){return"var(--"+(Qc[e]||"Primary")+"-Color-"+r+")"}const jc={primary:{linear:[{family:"primary",tone:8,position:0},{family:"primary",tone:11,position:100}],radial:[{family:"primary",tone:8,position:0},{family:"primary",tone:11,position:100}],mesh:[{family:"primary",tone:8,x:20,y:20,spread:60},{family:"primary",tone:9,x:80,y:30,spread:50},{family:"primary",tone:10,x:50,y:80,spread:55}],meshCard:[{family:"primary",tone:3,x:10,y:10,spread:60},{family:"primary",tone:6,x:80,y:20,spread:50},{family:"primary",tone:9,x:40,y:80,spread:55}]},secondary:{linear:[{family:"secondary",tone:7,position:0},{family:"secondary",tone:10,position:100}],radial:[{family:"secondary",tone:7,position:0},{family:"secondary",tone:10,position:100}],mesh:[{family:"secondary",tone:7,x:15,y:25,spread:55},{family:"secondary",tone:9,x:75,y:35,spread:50},{family:"secondary",tone:11,x:45,y:75,spread:60}],meshCard:[{family:"secondary",tone:2,x:15,y:15,spread:55},{family:"secondary",tone:5,x:85,y:25,spread:50},{family:"secondary",tone:8,x:50,y:75,spread:60}]},tertiary:{linear:[{family:"tertiary",tone:8,position:0},{family:"tertiary",tone:11,position:100}],radial:[{family:"tertiary",tone:8,position:0},{family:"tertiary",tone:11,position:100}],mesh:[{family:"tertiary",tone:8,x:25,y:15,spread:55},{family:"tertiary",tone:10,x:70,y:40,spread:50},{family:"tertiary",tone:11,x:40,y:85,spread:55}],meshCard:[{family:"tertiary",tone:3,x:20,y:10,spread:60},{family:"tertiary",tone:7,x:75,y:30,spread:50},{family:"tertiary",tone:10,x:45,y:80,spread:55}]},black:{linear:[{family:"black",tone:10,position:0},{family:"neutral",tone:3,position:100}],radial:[{family:"black",tone:10,position:0},{family:"neutral",tone:3,position:100}],mesh:[{family:"black",tone:10,x:0,y:0,spread:100},{family:"primary",tone:3,x:25,y:25,spread:50},{family:"secondary",tone:4,x:75,y:35,spread:45},{family:"tertiary",tone:3,x:50,y:80,spread:50}],meshCard:[{family:"black",tone:11,x:0,y:0,spread:100},{family:"primary",tone:5,x:20,y:20,spread:55},{family:"secondary",tone:8,x:80,y:30,spread:45},{family:"tertiary",tone:10,x:45,y:80,spread:50}]},white:{linear:[{family:"white",tone:2,position:0},{family:"neutral",tone:9,position:100}],radial:[{family:"white",tone:2,position:0},{family:"neutral",tone:9,position:100}],mesh:[{family:"white",tone:2,x:0,y:0,spread:100},{family:"primary",tone:9,x:25,y:25,spread:50},{family:"secondary",tone:8,x:75,y:35,spread:45},{family:"tertiary",tone:9,x:50,y:80,spread:50}],meshCard:[{family:"white",tone:1,x:0,y:0,spread:100},{family:"primary",tone:4,x:20,y:20,spread:55},{family:"secondary",tone:7,x:80,y:30,spread:45},{family:"tertiary",tone:10,x:45,y:80,spread:50}]}};function Gc(e,r){const t=jc[e]||jc.primary;return(t[r]||t.linear).map(e=>({...e}))}function Uc({variant:e="linear",color:r="primary",angle:t=135,stops:a=null,position:o=null,blobs:i=null,cardProps:n={},minHeight:l=300,children:s,className:d="",sx:c={},...u}){const p="meshCard"===e,m="mesh"===e||p,f="radial"===e,g="linear"===e||f,x=a||Gc(r,f?"radial":"linear"),b=i||Gc(r,p?"meshCard":"mesh"),v=m?function(e){if(!e||0===e.length)return"none";const r=e.map(e=>{const r=Vc(e.family,e.tone),t=e.spread||40;return"radial-gradient(circle at "+e.x+"% "+e.y+"%, "+r+" 0%, transparent "+t+"%)"}),t=Vc(e[0].family,e[0].tone);return r.push(t),r.join(", ")}(b):f?function(e,r){if(!e||0===e.length)return"none";const t=[...e].sort((e,r)=>e.position-r.position).map(e=>Vc(e.family,e.tone)+" "+e.position+"%"),a=r||{x:50,y:50};return"radial-gradient(circle at "+a.x+"% "+a.y+"%, "+t.join(", ")+")"}(x,o||{x:50,y:50}):function(e,r){return e&&0!==e.length?"linear-gradient("+r+"deg, "+[...e].sort((e,r)=>e.position-r.position).map(e=>Vc(e.family,e.tone)+" "+e.position+"%").join(", ")+")":"none"}(x,t),y=g?x[0]:b[0];var S,k;const B=function(e){return"dark"===e?"var(--BW-Color-1)":"var(--BW-Color-6)"}((S=y?.tone||8,"black"===(k=y?.family||"primary")||"white"===k?S<=5?"light":"dark":S<=5?"dark":"light"));return le(h,p?{className:"gradient gradient-mesh-card "+d,sx:{background:v,minHeight:l,borderRadius:"var(--Card-Radius)",display:"flex",alignItems:"center",justifyContent:"center",padding:"var(--Card-Padding)",position:"relative",overflow:"hidden",...c},...u,children:le(Mn,{variant:"solid",...n,children:le(En,{children:s})})}:{className:"gradient gradient-"+e+" "+d,sx:{background:v,minHeight:l,borderRadius:"var(--Card-Radius)",color:B,display:"flex",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden",...c},...u,children:s})}const Xc=e=>le(Uc,{variant:"linear",...e}),Yc=e=>le(Uc,{variant:"radial",...e}),qc=e=>le(Uc,{variant:"mesh",...e}),Zc=e=>le(Uc,{variant:"meshCard",...e});function Jc({children:e,surface:r="Container",outlined:t=!1,variant:a=(t?"outlined":"elevation"),sx:o={},...i}){const{dataSurface:n,elevation:l}=function(e="Container"){const r={"Container-Lowest":{elevation:0,zIndex:0},"Container-Low":{elevation:1,zIndex:100},Container:{elevation:4,zIndex:200},"Container-High":{elevation:8,zIndex:300},"Container-Highest":{elevation:12,zIndex:400}},t=r[e]||r.Container;return{dataSurface:e,elevation:t.elevation,zIndex:t.zIndex}}(r);return le(N,{variant:a,elevation:t?0:l,"data-surface":n,sx:{padding:2,borderRadius:"8px",transition:"all 0.2s ease-in-out",...o},...i,children:e})}function Kc({open:e=!1,onClose:t,anchorRef:o,placement:n="bottom-end",theme:l="Default",surface:s="Surface-Bright",width:d=320,maxHeight:c=400,children:u,sx:p={}}){const m=a(null),[f,g]=r({top:0,left:0,right:"auto"});return i(()=>{if(!e||!o?.current)return;const r=o.current.getBoundingClientRect();g("bottom-end"===n?{top:r.bottom+6,right:window.innerWidth-r.right,left:"auto"}:{top:r.bottom+6,left:r.left,right:"auto"})},[e,o,n]),i(()=>{if(!e)return;const r=e=>{m.current?.contains(e.target)||o?.current?.contains(e.target)||t?.()};return document.addEventListener("pointerdown",r),()=>document.removeEventListener("pointerdown",r)},[e,t,o]),i(()=>{if(!e)return;const r=e=>{"Escape"===e.key&&t?.()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[e,t]),e?be.createPortal(le(h,{ref:m,"data-theme":l,"data-surface":s,sx:{position:"fixed",top:f.top,left:f.left,right:f.right,zIndex:2e9,width:d,maxHeight:c,overflowY:"auto",backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:lo,...p},children:u}),document.body):null}["default","primary","secondary","tertiary","neutral"].map(e=>{return{value:e,label:(r=e,r?r.charAt(0).toUpperCase()+r.slice(1):"")};var r});const $c=l(null),_c=["Default","Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error","App-Bar","Nav-Bar","Status"],eu=["Professional","Modern","Bold","Playful"],ru=["Surface-Dimmest","Surface-Dim","Surface","Surface-Bright","Surface-Brightest","Container","Container-Low","Container-Lowest","Container-High","Container-Highest"],tu={"light-tonal":{theme:"Primary",rootSurface:"Surface-Brightest"},"grey-professional":{theme:"Neutral",rootSurface:"Surface"},"dark-professional":{theme:"Neutral",rootSurface:"Surface-Dimmest"}},au="omni-foundation",ou="omni-core",iu="omni-typography",nu="omni-mode",lu="omni-base",su="omni-styles";function du(e){document.getElementById(e)?.remove()}function cu(e,r,t){return r?function(e){return!(!e||"string"!=typeof e)&&(e.startsWith("http")||e.startsWith("/")||e.endsWith(".css"))}(r)?function(e,r,t){const a=document.getElementById(e);return a?"LINK"===a.tagName&&a.getAttribute("href")!==r?new Promise((e,t)=>{a.onload=()=>e(a),a.onerror=()=>t(new Error(`OmniDesignProvider: failed to load ${r}`)),a.setAttribute("href",r)}):Promise.resolve(a):new Promise((a,o)=>{const i=document.createElement("link");i.id=e,i.rel="stylesheet",i.setAttribute("data-omni","true"),i.onload=()=>a(i),i.onerror=()=>o(new Error(`OmniDesignProvider: failed to load ${r}`)),i.href=r;const n=t?document.getElementById(t):null;n?document.head.insertBefore(i,n):document.head.appendChild(i)})}(e,r,t):function(e,r,t){if(!r)return Promise.resolve(null);const a=document.getElementById(e);if(a)return a.textContent=r,Promise.resolve(a);const o=document.createElement("style");o.id=e,o.setAttribute("data-omni","true"),o.textContent=r;const i=t?document.getElementById(t):null;return i?document.head.insertBefore(o,i):document.head.appendChild(o),Promise.resolve(o)}(e,r,t):Promise.resolve(null)}function uu({themeURL:e,foundationCSS:t,coreCSS:n,typographyCSS:l,lightModeCSS:d,darkModeCSS:c,baseCSS:u,stylesCSS:h,defaultTheme:p="Default",defaultStyle:m="Modern",defaultSurface:f="Surface",surfaceStyle:g,defaultDarkMode:x=!1,darkTheme:b="Neutral",darkMode:v,onDarkModeChange:y,className:S,style:k,fullHeight:B=!0,children:w}){const[C,T]=r(x),z=void 0!==v,A=z?v:C,[I,R]=r({foundation:t??null,core:n??null,typography:l??null,lightMode:d??null,darkMode:c??null,base:u??null,styles:h??null}),[W,D]=r({}),P=a(!0);i(()=>(P.current=!0,()=>{P.current=!1}),[]),i(()=>{e&&(X("loading"),async function(e){const r=/\.json(\?|$)/.test(e)?e:`${e.replace(/\/$/,"")}/theme.json`,t=e.replace(/\/$/,"").replace(/\/theme\.json(\?.*)?$/,""),a=await fetch(r);if(!a.ok)throw new Error(`OmniDesignProvider: could not load theme manifest from ${r} (${a.status})`);const o=await a.json(),i=e=>e?/^https?:\/\//i.test(e)?e:`${t}/${e}`:null;return{foundationURL:i(o.foundation),coreURL:i(o.core),typographyURL:i(o.typography),lightModeURL:i(o.lightMode),darkModeURL:i(o.darkMode),baseURL:i(o.base),stylesURL:i(o.styles),defaultTheme:o.defaultTheme??null,defaultStyle:o.defaultStyle??null,defaultSurface:o.defaultSurface??null,darkTheme:o.darkTheme??null,name:o.name??null}}(e).then(e=>{P.current&&(R({foundation:t??e.foundationURL,core:n??e.coreURL,typography:l??e.typographyURL,lightMode:d??e.lightModeURL,darkMode:c??e.darkModeURL,base:u??e.baseURL,styles:h??e.stylesURL}),D({defaultTheme:e.defaultTheme,defaultStyle:e.defaultStyle,defaultSurface:e.defaultSurface,darkTheme:e.darkTheme,name:e.name}))}).catch(e=>{P.current&&(console.error("OmniDesignProvider: manifest error:",e),q(e.message),X("error"))}))},[e]);const F=g?tu[g]?.theme??p:"Default"!==p?p:W.defaultTheme??p,L=g?tu[g]?.rootSurface??f:W.defaultSurface??f,H=W.defaultStyle??m,M="Neutral"!==b?b:W.darkTheme??b,[E,N]=r(F),[O,Q]=r(H),[V,j]=r(L),G=!!(e||t||n||l||d||c||u||h),[U,X]=r(G?"loading":"ready"),[Y,q]=r(null);i(()=>{const{foundation:e,core:r,typography:t,base:a,styles:o}=I;if(e||r||t||a||o)return X("loading"),q(null),Promise.all([cu(au,e),cu(ou,r),cu(iu,t).catch(e=>{console.warn("OmniDesignProvider: typography CSS did not load —",e.message)}),cu(lu,a),cu(su,o)]).then(()=>{P.current&&X("ready")}).catch(e=>{P.current&&(console.error("OmniDesignProvider CSS error:",e),q(e.message),X("error"))}),()=>{du(au),du(ou),du(iu),du(lu),du(su)};X("ready")},[I.foundation,I.core,I.typography,I.base,I.styles]),i(()=>{const e=A?I.darkMode:I.lightMode;e&&cu(nu,e,lu).catch(e=>console.error("OmniDesignProvider mode CSS error:",e))},[A,I.lightMode,I.darkMode]),i(()=>()=>du(nu),[]);const Z=A?M:E,J=o(()=>{z?y?.(!A):T(e=>!e)},[z,A,y]),K=o(e=>{_c.includes(e)||console.warn(`OmniDesignProvider: unknown theme "${e}"`),N(e)},[]),$=o(e=>{eu.includes(e)||console.warn(`OmniDesignProvider: unknown style "${e}"`),Q(e)},[]),_=o(e=>{ru.includes(e)||console.warn(`OmniDesignProvider: unknown surface "${e}"`),j(e)},[]),ee=s(()=>({theme:Z,style:O,surface:V,isDark:A,cssStatus:U,cssError:Y,setTheme:K,setStyle:$,setSurface:_,toggleDarkMode:J,themes:_c,styles:eu,surfaces:ru,name:W.name??null}),[Z,O,V,A,U,Y,K,$,_,J,W.name]);return de($c.Provider,{value:ee,children:[le("style",{"data-omni":"hide-during-load",children:'[data-omni-css="loading"]{visibility:hidden}'}),le("div",{"data-theme":Z,"data-style":O,"data-surface":V,"data-omni-css":U,className:S,style:{...B?{minHeight:"100vh"}:{},...k},children:w})]})}function hu(){const e=n($c);if(!e)throw new Error("useOmniDesign must be used inside a <OmniDesignProvider>");return e}function pu({theme:e,surface:r,as:t="div",children:a,className:o,style:i,...n}){return le(t,{"data-theme":e,"data-surface":r,className:o,style:i,...n,children:a})}function mu({surface:e,as:r="div",children:t,className:a,style:o,...i}){return le(r,{"data-surface":e,className:a,style:o,...i,children:t})}const fu=e=>d(function(r,t){return le(q,{direction:e,ref:t,...r})}),gu={fade:d(function(e,r){return le(Y,{ref:r,...e})}),grow:d(function(e,r){return le(X,{ref:r,...e})}),zoom:d(function(e,r){return le(U,{ref:r,...e})}),"slide-up":fu("up"),"slide-down":fu("down"),"slide-left":fu("left"),"slide-right":fu("right")},xu={backgroundColor:"var(--Background)",color:"var(--Text)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:"0 8px 32px rgba(0,0,0,0.18)"},bu={color:"var(--Text)",fontWeight:600,fontSize:"18px",fontFamily:"inherit",borderBottom:"1px solid var(--Border)",display:"flex",justifyContent:"space-between",alignItems:"center",py:1.5,px:3},vu={color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6,py:3,px:3},yu={borderTop:"1px solid var(--Border)",px:3,py:1.5,gap:1},Su={fontFamily:"inherit",fontWeight:500,fontSize:"14px",borderRadius:"var(--Style-Border-Radius)",padding:"6px 16px",cursor:"pointer",border:"none",transition:"background-color 0.15s, color 0.15s","&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"1px"}},ku={primary:{...Su,backgroundColor:"var(--Buttons-Primary-Button)",color:"var(--Buttons-Primary-Text)",border:"1px solid var(--Buttons-Primary-Border)","&:hover":{backgroundColor:"var(--Buttons-Primary-Hover)"},"&:active":{backgroundColor:"var(--Buttons-Primary-Pressed)"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}},outline:{...Su,backgroundColor:"transparent",color:"var(--Text)",border:"1px solid var(--Border)","&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}}};function Bu({open:e=!1,onClose:r,title:t,children:a,actions:o,maxWidth:i="sm",fullScreen:n=!1,scroll:l="body",alert:s=!1,nonModal:d=!1,transition:c,transitionDuration:u=300,titleId:p="dialog-title",contentId:m="dialog-description",className:f="",sx:g={},PaperProps:x={},...b}){const v=c?gu[c]:void 0;let y;try{y=hu()}catch{y=null}const S=y?.theme||"Default",k=y?.style||"Modern",B=y?.surface||"Surface";return de(O,{open:e,onClose:(e,t)=>{s&&"backdropClick"===t||s&&"escapeKeyDown"===t||r?.(e,t)},maxWidth:!n&&i,fullScreen:n,fullWidth:!n,scroll:l,hideBackdrop:d,disableEnforceFocus:d,disableEscapeKeyDown:s,TransitionComponent:v,transitionDuration:u,"aria-labelledby":p,"aria-describedby":m,className:"dialog dialog-"+i+(n?" dialog-fullscreen":"")+(s?" dialog-alert":"")+(f?" "+f:""),style:{zIndex:1e7},slotProps:{backdrop:{sx:{backgroundColor:d?"transparent":"rgba(0,0,0,0.5)"}}},PaperProps:{...x,"data-theme":S,"data-style":k,"data-surface":B,sx:{...xu,...n&&{borderRadius:0,border:"none"},...x.sx},role:s?"alertdialog":"dialog"},...b,children:[t&&de(Q,{id:p,sx:bu,children:[t,!s&&r&&le(Io,{"aria-label":"Close dialog",onClick:e=>r(e,"closeButton"),size:"small",variant:"ghost",sx:{color:"var(--Text-Quiet)"},children:le(Wr,{fontSize:"small"})})]}),le(V,{dividers:"paper"===l,sx:{...vu,..."paper"===l&&{maxHeight:n?"none":"400px",overflowY:"auto",borderColor:"var(--Border)"}},children:s?le(j,{id:m,sx:{color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6},children:a}):le(h,{id:m,children:a})}),o&&le(G,{sx:yu,children:o})]})}function wu({open:e,onClose:r,title:t,children:a,confirmText:o="Confirm",cancelText:i="Cancel",onConfirm:n,onCancel:l,...s}){return le(Bu,{open:e,onClose:r,title:t,alert:!0,...s,actions:de(se,{children:[le(h,{component:"button",type:"button",onClick:l||r,sx:ku.outline,children:i}),le(h,{component:"button",type:"button",onClick:n||r,sx:ku.primary,children:o})]}),children:a})}function Cu({open:e,onClose:r,title:t,children:a,submitText:o="Submit",cancelText:i="Cancel",onSubmit:n,...l}){return le(Bu,{open:e,onClose:r,title:t,...l,actions:de(se,{children:[le(h,{component:"button",type:"button",onClick:r,sx:ku.outline,children:i}),le(h,{component:"button",type:"button",onClick:n,sx:ku.primary,children:o})]}),children:a})}function Tu({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function zu(){const[e,t]=r(!1),[a,o]=r("sm"),[i,n]=r(!1),[l,s]=r("none"),[d,c]=r(!1),[u,p]=r(!1),[m,f]=r(null),[g,x]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Dialog"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:m,surface:g,children:le(Ao,{variant:"default",onClick:()=>t(!0),children:"Open Dialog"})}),le(ji,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"sm"!==a&&e.push('maxWidth="'+a+'"'),i&&e.push("fullScreen"),d&&e.push("alert"),u&&e.push("nonModal"),"none"!==l&&e.push('transition="'+l+'"'),e.push('title="Dialog Title"'),e.push('actions={<><Button variant="default-outline" onClick={handleClose}>Cancel</Button><Button variant="default" onClick={handleClose}>Confirm</Button></>}'),"<Dialog\n "+e.join("\n ")+"\n>\n Dialog content goes here.\n</Dialog>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),le(Bu,{open:e,onClose:(e,r)=>{d&&"backdropClick"===r||t(!1)},maxWidth:a,fullScreen:i,alert:d,nonModal:u,transition:"none"!==l?l:void 0,title:"Dialog Title",actions:de(se,{children:[le(Ao,{variant:"default-outline",size:"small",onClick:()=>t(!1),children:"Cancel"}),le(Ao,{variant:"default",size:"small",onClick:()=>t(!1),children:"Confirm"})]}),children:le(sa,{children:"This is the dialog content. You can put any information here that requires user attention or action."})})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:m,onThemeChange:f,surface:g,onSurfaceChange:x})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[["xs","sm","md","lg","xl"].map(e=>le(Tu,{label:e.toUpperCase(),selected:a===e,onClick:()=>{o(e),n(!1)}},e)),le(Tu,{label:"Full Screen",selected:i,onClick:()=>n(!i)})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TRANSITION"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["none","slide-up","slide-down","grow","fade","zoom"].map(e=>{return le(Tu,{label:(r=e,r?r.charAt(0).toUpperCase()+r.slice(1):""),selected:l===e,onClick:()=>s(e)},e);var r})})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Alert"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop dismiss, no Escape"})]}),le(an,{variant:"default-outline",checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Alert mode"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Non-Modal"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop, interact with content behind"})]}),le(an,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Non-modal"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="dialog" (standard) or role="alertdialog" (alert mode)'},{label:"Label",value:"aria-labelledby links to title, aria-describedby links to content"},{label:"Focus",value:"Focus trapped inside dialog. Returns to trigger on close."},{label:"Keyboard",value:"Escape closes (unless alert). Tab cycles through focusable elements."},{label:"Backdrop",value:"Click closes (unless alert or non-modal)"},{label:"Close",value:'Close button with aria-label="Close dialog"'}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Au={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Iu={default:"Container-High",solid:"Container-High",soft:"Surface-Brightest"},Ru={small:{maxWidth:400,padding:"24px"},medium:{maxWidth:560,padding:"32px"},large:{maxWidth:720,padding:"40px"}},Wu={fade:{enter:{from:{opacity:0},to:{opacity:1}},name:"modal-fade"},"slide-up":{enter:{from:{opacity:0,transform:"translateY(40px)"},to:{opacity:1,transform:"translateY(0)"}},name:"modal-slide-up"},"slide-down":{enter:{from:{opacity:0,transform:"translateY(-40px)"},to:{opacity:1,transform:"translateY(0)"}},name:"modal-slide-down"},zoom:{enter:{from:{opacity:0,transform:"scale(0.85)"},to:{opacity:1,transform:"scale(1)"}},name:"modal-zoom"}};function Du(e){const r=Wu[e];if(!r)return"";const{from:t,to:a}=r.enter,o=Object.entries(t).map(([e,r])=>e+":"+r).join(";"),i=Object.entries(a).map(([e,r])=>e+":"+r).join(";");return"@keyframes "+r.name+" { from {"+o+"} to {"+i+"} }@keyframes "+r.name+"-backdrop { from { opacity: 0 } to { opacity: 1 } }"}function Pu({open:e,onClose:t,children:o,title:n,variant:l="default",color:s="primary",size:d="medium",layout:c="center",transition:u="fade",transitionSpeed:p=250,closeOnBackdrop:m=!0,showCloseButton:f=!0,className:g="",sx:x={},...b}){const v=a(null),y=a(null),[S,k]=r(!1);let B;try{B=hu()}catch{B=null}const w=B?.style||"Modern",C="soft"===l,T="solid"===l,z="fullscreen"===c,A=T||C?Au[s]:null,I=Iu[l]||Iu.default,R=Ru[d]||Ru.medium,W=Wu[u],D=W?W.name:void 0,P=p+"ms";return i(()=>(e?(y.current=document.activeElement,k(!0),requestAnimationFrame(()=>{v.current?.focus()}),document.body.style.overflow="hidden"):(k(!1),document.body.style.overflow="",y.current?.focus()),()=>{document.body.style.overflow=""}),[e]),i(()=>{if(!e)return;const r=e=>{"Escape"===e.key&&t?.()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[e,t]),e||S?de(se,{children:["none"!==u&&le("style",{children:Du(u)}),le(h,{"aria-hidden":"true",onClick:m?t:void 0,sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0,0,0,0.5)",...D&&{animation:D+"-backdrop "+P+" ease-out forwards"}}}),de(h,{role:"dialog","aria-modal":"true","aria-label":n||"Modal",ref:v,tabIndex:-1,"data-surface":I,"data-theme":A||void 0,"data-style":w,className:"modal modal-"+l+" modal-"+d+" modal-"+c+(C||T?" modal-"+s:"")+(g?" "+g:""),sx:{position:"fixed",zIndex:10000001,outline:"none",fontFamily:"inherit",...z?{inset:0,borderRadius:0}:{top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:R.maxWidth+"px",width:"calc(100% - 32px)",maxHeight:"calc(100vh - 64px)",borderRadius:"var(--Modal-Radius, var(--Style-Border-Radius))"},backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:"0 8px 32px rgba(0,0,0,0.24)",display:"flex",flexDirection:"column",overflow:"hidden",...D&&{animation:D+" "+P+" ease-out forwards"},...x},...b,children:[(n||f)&&de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",px:z?4:R.padding,pt:z?3:R.padding,pb:0,flexShrink:0},children:[n&&le(h,{sx:{fontSize:"small"===d?"18px":"large"===d?"24px":"20px",fontWeight:700,color:"var(--Text)",flex:1},children:n}),f&&le(h,{component:"button",type:"button","aria-label":"Close modal",onClick:t,sx:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:"50%",border:"none",backgroundColor:"transparent",color:"var(--Text-Quiet)",cursor:"pointer",flexShrink:0,ml:1,transition:"background-color 0.15s ease, color 0.15s ease","&:hover":{backgroundColor:"var(--Hover)",color:"var(--Text)"},"&:active":{backgroundColor:"var(--Pressed)",color:"var(--Text)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}},children:le(Wr,{sx:{fontSize:20}})})]}),le(h,{sx:{flex:1,overflowY:"auto",px:z?4:R.padding,pt:z?3:"16px",pb:z?3:R.padding,color:"var(--Text)",fontSize:"small"===d?"13px":"14px",lineHeight:1.6},children:o})]})]}):null}const Fu={small:{width:"240px",height:"200px"},medium:{width:"320px",height:"280px"},large:{width:"420px",height:"380px"}},Lu={left:{borderRight:"1px solid var(--Border)"},right:{borderLeft:"1px solid var(--Border)"},top:{borderBottom:"1px solid var(--Border)"},bottom:{borderTop:"1px solid var(--Border)"}},Hu={left:{top:0,left:0,bottom:0},right:{top:0,right:0,bottom:0},top:{top:0,left:0,right:0},bottom:{bottom:0,left:0,right:0}},Mu={left:"translateX(-100%)",right:"translateX(100%)",top:"translateY(-100%)",bottom:"translateY(100%)"};function Eu({children:e,open:r=!1,onClose:t,size:n="medium",anchor:l="left",hideBackdrop:s=!1,className:d="",sx:c={},...u}){const p=a(null),m=a(null),f="left"===l||"right"===l;let g;try{g=hu()}catch{g=null}const x=g?.theme||"Default",b=g?.style||"Modern",v=Fu[n]||Fu.medium;i(()=>{if(!r)return;const e=e=>{"Escape"===e.key&&t?.()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r,t]),i(()=>{r?(m.current=document.activeElement,requestAnimationFrame(()=>{const e=p.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');e?e.focus():p.current?.focus()})):m.current&&(m.current.focus(),m.current=null)},[r]),i(()=>{if(r){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}},[r]);const y=o(e=>{if("Tab"!==e.key||!p.current)return;const r=p.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(!r.length)return;const t=r[0],a=r[r.length-1];e.shiftKey?document.activeElement===t&&(e.preventDefault(),a.focus()):document.activeElement===a&&(e.preventDefault(),t.focus())},[]);return r?de(se,{children:[!s&&le(h,{onClick:()=>t?.(),"aria-hidden":"true",sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0, 0, 0, 0.5)",transition:"opacity 0.3s ease"}}),le(h,{ref:p,role:"dialog","aria-modal":"true",tabIndex:-1,"data-theme":x,"data-style":b,"data-surface":"Surface-Dim",onKeyDown:y,className:"drawer drawer-"+n+" drawer-"+l+" "+d,sx:{position:"fixed",zIndex:10000001,...Hu[l],...f?{width:v.width,height:"100%"}:{height:v.height,width:"100%"},backgroundColor:"var(--Background)",color:"var(--Text)",...Lu[l],boxShadow:no,display:"flex",flexDirection:"column",outline:"none",overflow:"hidden",animation:"drawer-slide-in 0.3s ease forwards","@keyframes drawer-slide-in":{from:{transform:Mu[l]},to:{transform:"translate(0, 0)"}},...c},...u,children:e})]}):null}function Nu({onClick:e,className:r="",sx:t={},...a}){return le(h,{sx:{position:"absolute",top:"12px",right:"12px",zIndex:1,...t},className:r,...a,children:le(Ao,{iconOnly:!0,variant:"ghost",size:"small",onClick:e,"aria-label":"Close drawer",children:le(Oa,{size:"small",children:le(Wr,{})})})})}function Ou({children:e,className:r="",sx:t={},...a}){return le(h,{className:"drawer-header "+r,sx:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px",borderBottom:"1px solid var(--Border)",flexShrink:0,...t},...a,children:e})}function Qu({children:e,className:r="",sx:t={},...a}){return le(h,{className:"drawer-content "+r,sx:{flex:1,overflowY:"auto",padding:"16px",...t},...a,children:e})}const Vu={compact:{minHeight:"24px",fontSize:"13px",iconSize:16,gap:"6px"},default:{minHeight:"32px",fontSize:"14px",iconSize:18,gap:"8px"}},ju={none:void 0,slide:"omni-tree-slide 0.25s ease",spring:"omni-tree-slide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)"},Gu={"@keyframes omni-tree-slide":{from:{opacity:0,transform:"translateY(-4px)"},to:{opacity:1,transform:"none"}}};function Uu(e,r,t=1,a=[]){return e.forEach((o,i)=>{a.push({item:o,level:t,index:i,siblings:e.length}),o.children?.length&&r.includes(o.id)&&Uu(o.children,r,t+1,a)}),a}function Xu(e,r,t=null){for(const a of e){if(a.id===r)return t;if(a.children?.length){const e=Xu(a.children,r,a.id);if(null!=e)return e;if(null===e&&a.children.some(e=>e.id===r))return a.id}}return null}function Yu({node:e,density:r,expanded:t,selected:a,focusedId:o,multiSelect:i,checkboxSelection:n,disableSelection:l,disabledItemsFocusable:s,collapseIcon:d,expandIcon:c,animation:u,onToggle:p,onSelect:m,onFocusItem:f,registerRef:g}){const{item:x,level:b,index:v,siblings:y}=e,S=Vu[r]||Vu.default,k="compact"===r?ga:ia,B=!!x.children?.length,w=B&&t.includes(x.id),C=a.includes(x.id),T=!!x.disabled,z=!T||s;return de(h,{component:"li",role:"treeitem","aria-expanded":B?w:void 0,"aria-selected":l?void 0:C,"aria-disabled":T||void 0,"aria-level":b,"aria-setsize":y,"aria-posinset":v+1,tabIndex:o===x.id&&z?0:-1,ref:e=>g(x.id,e),onFocus:e=>{e.stopPropagation(),f(x.id)},sx:{outline:"none",listStyle:"none",...x.sx||{}},children:[de(h,{className:"omni-tree-content",onClick:e=>{T||(e.stopPropagation(),B&&p(e,x.id),l||m(e,x.id))},sx:{display:"flex",alignItems:"center",gap:S.gap,minHeight:S.minHeight,padding:"0 8px",marginLeft:0,borderRadius:"var(--Style-Border-Radius)",border:"1px solid transparent",color:C?"var(--Text)":"var(--Quiet)",fontWeight:C?600:400,backgroundColor:C?"var(--Pressed)":"transparent",cursor:T?"not-allowed":"pointer",opacity:T?"var(--Disabled, 0.38)":1,transition:"color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease",...T?{}:{"&:hover":{color:"var(--Text)",backgroundColor:"var(--Hover)"},"&:active":{color:"var(--Text)",backgroundColor:"var(--Pressed)"}},"li:focus-visible > &":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"}},children:[le(h,{"aria-hidden":"true",sx:{width:S.iconSize,height:S.iconSize,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",color:"inherit"},children:B&&(w?d:c)}),n&&!l&&le(Qo,{checked:C,disabled:T,size:"small","aria-hidden":"true",tabIndex:-1,onChange:()=>{}}),x.icon&&le(Oa,{size:"small",sx:{color:"inherit",flexShrink:0},children:x.icon}),le(k,{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:"inherit",fontWeight:"inherit"},children:x.label}),x.badge&&le(h,{sx:{flexShrink:0},children:x.badge})]}),B&&w&&le(h,{component:"ul",role:"group",sx:{margin:0,padding:0,paddingLeft:"8px",marginLeft:"12px",borderLeft:"1px solid var(--Border)",listStyle:"none",animation:ju[u]},children:x.children.map((e,h)=>le(Yu,{node:{item:e,level:b+1,index:h,siblings:x.children.length},density:r,expanded:t,selected:a,focusedId:o,multiSelect:i,checkboxSelection:n,disableSelection:l,disabledItemsFocusable:s,collapseIcon:d,expandIcon:c,animation:u,onToggle:p,onSelect:m,onFocusItem:f,registerRef:g},e.id))})]})}function qu({color:e="default",variant:t="solid",surface:i,density:n="default",animation:l="slide",selectionStyle:d,items:c=Zu,selectionMode:u="single",checkboxSelection:p=!1,disableSelection:m=!1,disabledItemsFocusable:f=!1,defaultExpandedItems:g,expandedItems:x,onExpandedItemsChange:b,selectedItems:v,onSelectedItemsChange:y,onItemExpansionToggle:S,onItemSelectionToggle:k,slots:B,"aria-label":w="Tree view",className:C="",sx:T={},...z}){const A=d||t,I="multi"===u,[R,W]=r(g||[]),D=void 0!==x?x:R,[P,F]=r(v||(I?[]:null)),L=void 0!==v?v:P,H=Array.isArray(L)?L:L?[L]:[],M=s(()=>Uu(c,D),[c,D]),[E,N]=r(null),O=E??M[0]?.item.id??null,Q=a({}),V=o((e,r)=>{r?Q.current[e]=r:delete Q.current[e]},[]),j=o(e=>{N(e),Q.current[e]?.focus()},[]),G=o((e,r)=>{const t=D.includes(r),a=t?D.filter(e=>e!==r):[...D,r];void 0===x&&W(a),b?.(e,a),S?.(e,r,!t)},[D,x,b,S]),U=o((e,r)=>{const t=H.includes(r),a=I?t?H.filter(e=>e!==r):[...H,r]:[r],o=I?a:a[0]??null;void 0===v&&F(o),y?.(e,o),k?.(e,r,!I||!t)},[H,I,v,y,k]),X=o(e=>{const r=M.filter(e=>!e.item.disabled||f),t=r.findIndex(e=>e.item.id===O),a=r[t];if(!a)return;const{item:o}=a,i=!!o.children?.length,n=i&&D.includes(o.id),l=t=>{const a=r[Math.max(0,Math.min(r.length-1,t))];a&&(e.preventDefault(),j(a.item.id))};switch(e.key){case"ArrowDown":l(t+1);break;case"ArrowUp":l(t-1);break;case"Home":l(0);break;case"End":l(r.length-1);break;case"ArrowRight":i&&!n?(e.preventDefault(),G(e,o.id)):n&&l(t+1);break;case"ArrowLeft":if(n)e.preventDefault(),G(e,o.id);else{const r=Xu(c,o.id);r&&(e.preventDefault(),j(r))}break;case"Enter":case" ":e.preventDefault(),m?i&&G(e,o.id):U(e,o.id)}},[M,O,D,c,f,m,j,G,U]),Y=(q=e).charAt(0).toUpperCase()+q.slice(1);var q;const Z="default"===A?void 0:Y,J=i||("light"===A?"Surface-Brightest":"Surface-Dim"),K=B?.collapseIcon?le(B.collapseIcon,{}):le(Oa,{size:"small",sx:{color:"inherit",transform:"rotate(90deg)"},children:le(Ur,{})}),$=B?.expandIcon?le(B.expandIcon,{}):le(Oa,{size:"small",sx:{color:"inherit"},children:le(Ur,{})});return le(h,{"data-theme":Z,"data-surface":J,className:"omni-treeview omni-treeview-"+A+" omni-treeview-"+e+" omni-treeview-"+n+(C?" "+C:""),sx:{backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",...Gu,...T},children:le(h,{component:"ul",role:"tree","aria-label":w,"aria-multiselectable":I||void 0,onKeyDown:X,sx:{margin:0,padding:"8px",listStyle:"none",fontFamily:"inherit"},...z,children:c.map((e,r)=>le(Yu,{node:{item:e,level:1,index:r,siblings:c.length},density:n,expanded:D,selected:H,focusedId:O,multiSelect:I,checkboxSelection:p,disableSelection:m,disabledItemsFocusable:f,collapseIcon:K,expandIcon:$,animation:l,onToggle:G,onSelect:U,onFocusItem:N,registerRef:V},e.id))})})}const Zu=[{id:"1",label:"Design System",children:[{id:"1-1",label:"Foundations",children:[{id:"1-1-1",label:"Colors"},{id:"1-1-2",label:"Typography"},{id:"1-1-3",label:"Spacing"}]},{id:"1-2",label:"Components",children:[{id:"1-2-1",label:"Buttons"},{id:"1-2-2",label:"Inputs"},{id:"1-2-3",label:"Navigation",disabled:!0}]}]},{id:"2",label:"Tokens",children:[{id:"2-1",label:"Light Mode"},{id:"2-2",label:"Dark Mode"}]},{id:"3",label:"Changelog"}],Ju=e=>le(qu,{variant:"solid",...e}),Ku=e=>le(qu,{variant:"light",...e}),$u=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",_u=[{id:"home",label:"Home"},{id:"products",label:"Products",children:[{id:"featured",label:"Featured"},{id:"new",label:"New Arrivals"},{id:"sale",label:"On Sale"}]},{id:"about",label:"About"},{id:"contact",label:"Contact"}];function eh({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function rh(){const[e,t]=r(!1),[a,o]=r("medium"),[i,n]=r("left"),[l,s]=r(null),[d,c]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Drawer"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:l,surface:d,children:le(Ao,{variant:"default",onClick:()=>t(!0),children:"Open Drawer"})}),le(ji,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"medium"!==a&&e.push('size="'+a+'"'),"left"!==i&&e.push('anchor="'+i+'"'),"<Drawer "+e.join(" ")+">\n <DrawerHeader>\n <H5>Navigation</H5>\n <DrawerClose onClick={handleClose} />\n </DrawerHeader>\n <DrawerContent>\n <OmniTreeView items={navItems} />\n </DrawerContent>\n</Drawer>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),de(Eu,{open:e,onClose:()=>t(!1),size:a,anchor:i,children:[de(Ou,{children:[le(Jt,{children:"Navigation"}),le(Nu,{onClick:()=>t(!1)})]}),le(Qu,{children:le(qu,{items:_u,variant:"solid",color:"default",defaultExpandedItems:["products"],sx:{border:"none",borderRadius:0}})})]})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(eh,{label:$u(e),selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["left","right","top","bottom"].map(e=>le(eh,{label:$u(e),selected:i===e,onClick:()=>n(e)},e))})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="dialog" aria-modal="true"'},{label:"Focus",value:"Focus trapped inside drawer. Returns to trigger on close."},{label:"Keyboard",value:"Escape closes. Tab cycles focusable elements."},{label:"Backdrop",value:"Click closes. Body scroll locked while open."},{label:"Close",value:'Button with aria-label="Close drawer"'}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const th={small:{minHeight:"120px",padding:"16px",iconSize:"20px",gap:1},medium:{minHeight:"200px",padding:"32px 24px",iconSize:"32px",gap:2},large:{minHeight:"300px",padding:"48px 24px",iconSize:"48px",gap:3}};function ah({onFiles:e,accept:t,multiple:i=!1,size:n="medium",disabled:l=!1,icon:s,label:d,sublabel:c,children:u,className:p="",sx:m={},...f}){const[g,x]=r(!1),b=a(null),v=a(0),y=th[n]||th.medium,S=o(r=>{!l&&r?.length&&e?.(Array.from(r))},[l,e]),k=o(e=>{e.preventDefault(),e.stopPropagation(),v.current=0,x(!1),l||S(e.dataTransfer.files)},[l,S]),B=o(e=>{e.preventDefault(),e.stopPropagation()},[]),w=o(e=>{e.preventDefault(),e.stopPropagation(),v.current++,l||x(!0)},[l]),C=o(e=>{e.preventDefault(),e.stopPropagation(),v.current--,0===v.current&&x(!1)},[]),T=o(()=>{l||b.current?.click()},[l]),z=o(e=>{l||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),b.current?.click())},[l]),A=o(e=>{S(e.target.files),e.target.value=""},[S]),I=s||et,R=i?"Drag and drop files here":"Drag and drop file here";return de(h,{role:"button",tabIndex:l?-1:0,"aria-label":d||R,"aria-disabled":l||void 0,onClick:T,onKeyDown:z,onDrop:k,onDragOver:B,onDragEnter:w,onDragLeave:C,className:"drop-zone drop-zone-"+n+(g?" drop-zone-dragging":"")+(l?" drop-zone-disabled":"")+" "+p,sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:y.gap,minHeight:y.minHeight,padding:y.padding,border:"2px dashed",borderColor:g?"var(--Buttons-Primary-Border)":"var(--Buttons-Default-Border)",borderRadius:"32px",backgroundColor:g?"var(--Hover)":"transparent",color:"var(--Text)",cursor:l?"not-allowed":"pointer",opacity:l?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.2s ease, border-color 0.2s ease",textAlign:"center",...!l&&{"&:hover":{backgroundColor:"var(--Hover)",borderColor:"var(--Buttons-Primary-Border)"},"&:active":{backgroundColor:"var(--Pressed)",borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderColor:"var(--Buttons-Primary-Border)"}},...m},...f,children:[le("input",{ref:b,type:"file",accept:t,multiple:i,onChange:A,style:{display:"none"},"aria-hidden":"true",tabIndex:-1}),u||de(se,{children:[le(I,{sx:{fontSize:y.iconSize,color:"var(--Text-Quiet)"}}),le(ia,{style:{color:"var(--Text)"},children:d||R}),le(ga,{style:{color:"var(--Text-Quiet)"},children:c||"or click to browse"})]})]})}const oh={small:{px:"12px",py:"8px",fontSize:"13px",iconSize:"18px",gap:"8px"},medium:{px:"16px",py:"12px",fontSize:"14px",iconSize:"20px",gap:"10px"},large:{px:"20px",py:"14px",fontSize:"16px",iconSize:"22px",gap:"12px"}};function ih({children:e,variant:r="light",surface:t,color:a="info",size:o="medium",startDecorator:i,endDecorator:n,className:l="",sx:s={},...d}){const c=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===a?"Default":a),u=oh[o]||oh.medium,p="default"===a?"Default":c,m=t||("light"===r?"Surface-Brightest":"Surface"),f="var(--Buttons-"+c+"-Border)",g=de(se,{children:[i&&le(h,{className:"alert-start-decorator",sx:{display:"inline-flex",alignItems:"center",fontSize:u.iconSize,lineHeight:1,flexShrink:0,mt:"2px"},children:i}),le(h,{className:"alert-message",sx:{flex:1,minWidth:0},children:"string"==typeof e?le("small"===o?ia:sa,{children:e}):e}),n&&le(h,{className:"alert-end-decorator",sx:{display:"inline-flex",alignItems:"flex-start",flexShrink:0,gap:u.gap,paddingTop:"2px"},children:n})]});return le(h,{role:"alert",className:"alert alert-"+r+" alert-"+o+" alert-"+a+" "+l,sx:{border:"1px solid "+f,borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",boxShadow:no,...s},...d,children:le(h,{"data-theme":p,"data-surface":m,className:"alert-inner",sx:{display:"flex",alignItems:"flex-start",gap:u.gap,padding:u.py+" "+u.px,fontSize:u.fontSize,fontFamily:"inherit",lineHeight:1.5,color:"var(--Text)",backgroundColor:"var(--Background)",borderRadius:"calc(var(--Style-Border-Radius) - 1px)"},children:g})})}const nh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",lh=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],sh={info:le(xe,{}),success:le(me,{}),warning:le(fe,{}),error:le(ge,{})};function dh({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function ch({color:e,selected:r,onClick:t}){const a=nh(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function uh(){const[e,t]=r("light"),[a,o]=r("info"),[i,n]=r("medium"),[l,s]=r(!0),[d,c]=r(null),[u,p]=r("Surface"),m=l&&sh[a]?le(Oa,{size:"small",sx:{color:"inherit"},children:sh[a]}):void 0;return de(h,{sx:{pb:8},children:[le(qt,{children:"Alert"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:d,surface:u,children:le(h,{sx:{width:"100%",maxWidth:480},children:le(ih,{variant:e,color:a,size:i,startDecorator:m,children:"This is an alert message. Check the details for more information."})})}),le(ji,{code:(()=>{const r=['variant="'+e+'"'];return"info"!==a&&r.push('color="'+a+'"'),"medium"!==i&&r.push('size="'+i+'"'),l&&sh[a]&&r.push("startDecorator={<Icon><"+nh(a)+"Icon /></Icon>}"),"<Alert "+r.join(" ")+">\n This is an alert message.\n</Alert>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["solid","light"].map(r=>le(dh,{label:nh(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:lh.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(ch,{color:e,selected:a===e,onClick:o},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(dh,{label:nh(e),selected:i===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Icon"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(an,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Show icon"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="alert" — live region, announced immediately'},{label:"Border",value:"var(--Buttons-{Color}-Border) on outer shell"},{label:"Shadow",value:"var(--Effect-Level-3)"},{label:"Icons",value:"Decorative — aria-hidden by default via Icon component"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const hh={small:{px:"12px",py:"8px",fontSize:"13px",gap:"8px",minWidth:"240px"},medium:{px:"16px",py:"10px",fontSize:"14px",gap:"12px",minWidth:"300px"},large:{px:"20px",py:"14px",fontSize:"16px",gap:"16px",minWidth:"360px"}};function ph({children:e,open:r=!1,onClose:t,variant:n="light",surface:l,color:s="info",size:d="medium",anchor:c="bottom",autoHideDuration:u,startDecorator:p,endDecorator:m,action:f,className:g="",sx:x={},...b}){const v=a(null),y=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===s?"Default":s),S=hh[d]||hh.medium,k="small"===d?ia:sa,B="default"===s?"Default":y,w=l||("light"===n?"Surface-Brightest":"Surface"),C="var(--Buttons-"+y+"-Border)";i(()=>{if(r&&u&&u>0)return v.current=setTimeout(()=>{t?.({},"timeout")},u),()=>clearTimeout(v.current)},[r,u,t]),i(()=>{if(!r)return;const e=e=>{"Escape"===e.key&&t?.(e,"escapeKeyDown")};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r,t]);const T=o(()=>{v.current&&clearTimeout(v.current)},[]),z=o(()=>{r&&u&&u>0&&(v.current=setTimeout(()=>{t?.({},"timeout")},u))},[r,u,t]),A="top"===c?{from:{transform:"translateX(-50%) translateY(-120%)"},to:{transform:"translateX(-50%) translateY(0)"}}:{from:{transform:"translateX(-50%) translateY(120%)"},to:{transform:"translateX(-50%) translateY(0)"}};return r?le(h,{role:"alert","aria-live":"polite","aria-atomic":"true",onMouseEnter:T,onMouseLeave:z,className:"snackbar snackbar-"+n+" snackbar-"+d+" snackbar-"+c+" snackbar-"+s+" "+g,sx:{position:"fixed",left:"50%",transform:"translateX(-50%)",..."top"===c?{top:"16px"}:{bottom:"16px"},zIndex:1400,minWidth:S.minWidth,maxWidth:"min(560px, calc(100vw - 32px))",border:"1px solid "+C,borderRadius:"var(--Style-Border-Radius)",boxShadow:no,overflow:"hidden",animation:"snackbar-slide-in 0.3s ease forwards","@keyframes snackbar-slide-in":A,...x},...b,children:de(h,{"data-theme":B,"data-surface":w,sx:{display:"flex",alignItems:"center",gap:S.gap,padding:S.py+" "+S.px,fontSize:S.fontSize,fontFamily:"inherit",lineHeight:1.4,color:"var(--Text)",backgroundColor:"var(--Background)",borderRadius:"calc(var(--Style-Border-Radius) - 1px)"},children:[p&&le(h,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:p}),le(h,{sx:{flex:1,minWidth:0},children:"string"==typeof e?le(k,{children:e}):e}),f&&le(h,{sx:{display:"inline-flex",flexShrink:0},children:f}),m&&le(h,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:m}),t&&le(Ao,{iconOnly:!0,variant:"ghost",size:"small",onClick:e=>t(e,"closeClick"),"aria-label":"Close notification",sx:{flexShrink:0,ml:"4px"},children:le(Oa,{size:"small",children:le(Wr,{})})})]})}):null}const mh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",fh=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],gh={info:le(xe,{}),success:le(me,{}),warning:le(fe,{}),error:le(ge,{})};function xh({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function bh({color:e,selected:r,onClick:t}){const a=mh(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function vh(){const[e,t]=r("light"),[a,o]=r("info"),[i,n]=r("medium"),[l,s]=r("bottom"),[d,c]=r(!0),[u,p]=r(!0),[m,f]=r(!1),[g,x]=r(null),[b,v]=r("Surface"),y=d&&gh[a]?le(Oa,{size:"small",sx:{color:"inherit"},children:gh[a]}):void 0;return de(h,{sx:{pb:8},children:[le(qt,{children:"Snackbar"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:g,surface:b,children:le(Ao,{variant:"default",onClick:()=>f(!0),children:"Show Snackbar"})}),le(ji,{code:(()=>{const r=["open={open}"];return r.push('variant="'+e+'"'),"info"!==a&&r.push('color="'+a+'"'),"medium"!==i&&r.push('size="'+i+'"'),"bottom"!==l&&r.push('anchor="top"'),u&&r.push("onClose={handleClose}"),d&&gh[a]&&r.push("startDecorator={<Icon><"+mh(a)+"Icon /></Icon>}"),"<Snackbar\n "+r.join("\n ")+"\n>\n Operation completed successfully.\n</Snackbar>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),le(ph,{open:m,onClose:u?()=>f(!1):void 0,variant:e,color:a,size:i,anchor:l,autoHideDuration:4e3,startDecorator:y,children:"Operation completed successfully."})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:g,onThemeChange:x,surface:b,onSurfaceChange:v})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["solid","light"].map(r=>le(xh,{label:mh(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:fh.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(bh,{color:e,selected:a===e,onClick:o},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(xh,{label:mh(e),selected:i===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),le(k,{direction:"row",spacing:1,children:["top","bottom"].map(e=>le(xh,{label:mh(e),selected:l===e,onClick:()=>s(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Icon"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(an,{variant:"default-outline",checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Show icon"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Close Button"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show dismiss button"})]}),le(an,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Close button"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="alert" aria-live="polite" aria-atomic="true"'},{label:"Close",value:'Button with aria-label="Close notification"'},{label:"Keyboard",value:"Escape closes. Auto-hides after duration."},{label:"Hover",value:"Pauses auto-hide timer on mouse enter"},{label:"Border",value:"var(--Buttons-{Color}-Border) on outer shell"},{label:"Shadow",value:"var(--Effect-Level-3)"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const yh={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",white:"Neutral",black:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Sh={small:{diameter:24,thickness:3,fontSize:"9px",labelSize:"0px"},medium:{diameter:40,thickness:4,fontSize:"12px",labelSize:"12px"},large:{diameter:56,thickness:5,fontSize:"14px",labelSize:"14px"}};function kh({value:e,color:r="primary",size:a="medium",thickness:o,showValue:i=!1,children:n,className:l="",sx:s={},...d}){const c=yh[r]||"Primary",u="number"==typeof a?{diameter:a,thickness:Math.max(2,Math.round(a/11)),fontSize:Math.max(8,Math.round(a/3.3))+"px"}:Sh[a]||Sh.medium,p=o||u.thickness,m=null!=e,f=m?Math.min(100,Math.max(0,e)):0,g=(u.diameter-p)/2,x=2*Math.PI*g,b=m?x-f/100*x:.75*x,v="var(--Buttons-"+c+"-Border)",y="cp-grad-"+t().replace(/:/g,"");return de(h,{role:"progressbar","aria-valuenow":m?Math.round(f):void 0,"aria-valuemin":m?0:void 0,"aria-valuemax":m?100:void 0,"aria-label":m?Math.round(f)+"% progress":"Loading",className:"circular-progress circular-progress-"+a+" circular-progress-"+r+(m?" circular-progress-value":" circular-progress-indeterminate")+" "+l,sx:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",width:u.diameter+"px",height:u.diameter+"px",flexShrink:0,...!m&&{animation:"circular-progress-spin 1.2s linear infinite","@keyframes circular-progress-spin":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}},...s},...d,children:[de("svg",{viewBox:"0 0 "+u.diameter+" "+u.diameter,width:u.diameter,height:u.diameter,style:{position:"absolute",top:0,left:0,transform:"rotate(-90deg)"},children:[le("defs",{children:de("linearGradient",{id:y,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[le("stop",{offset:"0%",stopColor:v,stopOpacity:"0"}),le("stop",{offset:"100%",stopColor:v,stopOpacity:"1"})]})}),le("circle",{cx:u.diameter/2,cy:u.diameter/2,r:g,fill:"none",stroke:"var(--Border-Variant)",strokeWidth:p,className:"circular-progress-track"}),le("circle",{cx:u.diameter/2,cy:u.diameter/2,r:g,fill:"none",stroke:"url(#"+y+")",strokeWidth:p,strokeDasharray:x,strokeDashoffset:b,strokeLinecap:"round",className:"circular-progress-indicator",style:{transition:m?"stroke-dashoffset 0.4s ease":"none"}})]}),(i||n)&&m&&le(h,{className:"circular-progress-label","aria-hidden":"true",sx:{position:"relative",zIndex:1,fontSize:u.fontSize,fontWeight:700,fontFamily:"inherit",lineHeight:1,color:"var(--Text)",userSelect:"none"},children:n||Math.round(f)+"%"})]})}const Bh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",wh=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Ch({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Th({color:e,selected:r,onClick:t}){const a=Bh(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function zh(){const[e,t]=r("default"),[a,o]=r("medium"),[i,n]=r(!1),[l,s]=r(65),[d,c]=r(!1),[u,p]=r(null),[m,f]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Circular Progress"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:u,children:le(kh,{color:e,size:a,value:i?l:void 0,showValue:i&&d})}),le(ji,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),i&&(r.push("value={"+l+"}"),d&&r.push("showValue")),0===r.length?"<CircularProgress />":"<CircularProgress\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:u,onThemeChange:p,surface:m,onSurfaceChange:f})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:wh.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Th,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Ch,{label:Bh(e),selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Determinate"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static arc at a specific value"})]}),le(an,{checked:i,onChange:e=>n(e.target.checked),size:"small","aria-label":"Determinate"})]}),i&&de(se,{children:[le(h,{sx:{mt:2},children:le(ys,{label:"Value",min:0,max:100,value:l,onChange:(e,r)=>s(r),size:"small",valueLabelDisplay:"auto"})}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Label"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Center percentage text"})]}),le(an,{checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Show label"})]})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:de(k,{spacing:3,children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Role:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="progressbar"'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Determinate:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-valuenow, aria-valuemin="0", aria-valuemax="100"'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Indeterminate:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-label="Loading" (no value attributes)'})]}),de(h,{sx:{py:1.5},children:[le(ia,{children:"Label:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Center percentage label is aria-hidden — screen readers use aria-valuenow."})]})]})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Token Reference"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Track (back circle):"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Border-Variant)"})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Fill (progress arc):"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Buttons-{Color}-Border)"})]}),de(h,{sx:{py:1.5},children:[le(ia,{children:"Center label:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]})]})]})]})})})]})})})]})]})}const Ah={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Ih={small:{height:"4px",borderRadius:"2px"},medium:{height:"6px",borderRadius:"3px"},large:{height:"8px",borderRadius:"4px"}};function Rh({value:e,color:r="primary",size:t="medium",className:a="",sx:o={},...i}){const n=Ah[r]||"Primary",l=Ih[t]||Ih.medium,s=null!=e,d=s?Math.min(100,Math.max(0,e)):0,c="var(--Buttons-"+n+"-Border)";return le(h,{role:"progressbar","aria-valuenow":s?Math.round(d):void 0,"aria-valuemin":s?0:void 0,"aria-valuemax":s?100:void 0,"aria-label":s?Math.round(d)+"% progress":"Loading",className:"linear-progress linear-progress-"+t+" linear-progress-"+r+(s?" linear-progress-determinate":" linear-progress-indeterminate")+" "+a,sx:{position:"relative",width:"100%",height:l.height,borderRadius:l.borderRadius,backgroundColor:"var(--Border-Variant)",overflow:"hidden",flexShrink:0,...o},...i,children:le(h,{className:"linear-progress-bar",sx:{position:"absolute",top:0,left:0,height:"100%",borderRadius:"inherit",backgroundColor:c,...s?{width:d+"%",transition:"width 0.4s ease"}:{width:"40%",animation:"linear-progress-slide 1.5s ease-in-out infinite","@keyframes linear-progress-slide":{"0%":{left:"-40%",width:"40%"},"50%":{left:"30%",width:"50%"},"100%":{left:"100%",width:"40%"}}}}})})}const Wh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Dh=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Ph({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Fh({color:e,selected:r,onClick:t}){const a=Wh(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Lh(){const[e,t]=r("default"),[a,o]=r("medium"),[i,n]=r(!1),[l,s]=r(65),[d,c]=r(null),[u,p]=r("Surface");return de(h,{sx:{pb:8},children:[le(qt,{children:"Linear Progress"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:d,surface:u,children:le(h,{sx:{width:"100%",maxWidth:400},children:le(Rh,{color:e,size:a,value:i?l:void 0})})}),le(ji,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),i&&r.push("value={"+l+"}"),0===r.length?"<LinearProgress />":"<LinearProgress\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Dh.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Fh,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Ph,{label:Wh(e),selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Determinate"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static bar at a specific value"})]}),le(an,{variant:"default-outline",checked:i,onChange:e=>n(e.target.checked),size:"small","aria-label":"Determinate"})]}),i&&le(h,{sx:{mt:2},children:le(ys,{label:"Value",min:0,max:100,value:l,onChange:(e,r)=>s(r),size:"small",valueLabelDisplay:"auto"})})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="progressbar"'},{label:"Determinate",value:'aria-valuenow, aria-valuemin="0", aria-valuemax="100"'},{label:"Indeterminate",value:'aria-label="Loading" (no value attributes)'},{label:"Track",value:"var(--Border-Variant)"},{label:"Fill",value:"var(--Buttons-{Color}-Border)"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Hh=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]}],Mh=["photo","icon","initials"],Eh={photo:"Photo",icon:"Icon",initials:"Initials"},Nh=["xx-small","x-small","small","medium","large","x-large","xx-large"],Oh={"xx-small":"XXS","x-small":"XS",small:"Small",medium:"Medium",large:"Large","x-large":"XL","xx-large":"XXL"};function Qh({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Vh({color:e,selected:r,onClick:t}){const a=(o=e)?o.charAt(0).toUpperCase()+o.slice(1):"";var o;return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function jh(){const[e,t]=r("default"),[a,o]=r("medium"),[i,n]=r("initials"),[l,s]=r(!1),[d,c]=r(!1),[u,p]=r(!1),[m,f]=r(null),[g,x]=r("Surface"),b="photo"===i,v=()=>{const r={size:a,clickable:l,insideButton:d};return b||(r.color=e),"initials"===i&&(r.initials="LN"),"photo"===i&&(r.src="https://i.pravatar.cc/150?img=3",r.alt="User avatar"),r};return de(h,{sx:{pb:8},children:[le(qt,{children:"Avatar"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:m,surface:g,children:u?de(Xa,{max:3,size:a,children:[le(Ua,{...v()}),le(Ua,{color:e,size:a,initials:"AB"}),le(Ua,{color:e,size:a,initials:"CD"}),le(Ua,{color:e,size:a,initials:"EF"})]}):le(Ua,{...v()})}),le(ji,{code:(()=>{const r=[];return b||"default"===e||r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),"initials"===i&&r.push('initials="LN"'),"photo"===i&&r.push('src="..." alt="User avatar"'),l&&r.push("clickable onClick={handleClick}"),d&&r.push("insideButton"),u?"<AvatarGroup max={3}>\n <Avatar "+r.join(" ")+' />\n <Avatar initials="AB" />\n <Avatar initials="CD" />\n <Avatar initials="EF" />\n</AvatarGroup>':"<Avatar "+r.join(" ")+" />"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:m,onThemeChange:f,surface:g,onSurfaceChange:x})}),de(h,{sx:{opacity:b?.4:1,pointerEvents:b?"none":"auto"},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Hh.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Vh,{color:r,selected:e===r,onClick:t},r))})]},r.label))}),b&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:"Color is ignored when the avatar shows a photo — the image carries the visual."})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Nh.map(e=>le(Qh,{label:Oh[e],selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CONTENT"}),le(k,{direction:"row",spacing:1,children:Mh.map(e=>le(Qh,{label:Eh[e],selected:i===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Clickable"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Interactive with hover/focus states"})]}),le(an,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Clickable"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Inside Button"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds 2px horizontal margin so the avatar sits cleanly in a Button"})]}),le(an,{variant:"default-outline",checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Inside Button"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Group"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show as AvatarGroup with overflow"})]}),le(an,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show group"})]})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="img" (static) or role="button" (clickable)'},{label:"Label",value:'aria-label from alt, initials, or "Avatar"'},{label:"Image",value:"alt text on <img>. Falls back to initials or icon on error."},{label:"Clickable",value:"Rendered as <button>. Focus ring: 3px solid var(--Focus-Visible)."},{label:"Group",value:'role="group" aria-label="Avatar group, N avatars"'}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Gh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Uh=["primary","secondary","tertiary","neutral","info","success","warning","error"];function Xh({ratio:e,threshold:r}){if(!e)return le(ga,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=r;return de(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[de(h,{sx:{px:1,py:.25,borderRadius:"4px",backgroundColor:t?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)",fontSize:"11px",fontWeight:700},children:[e,":1"]}),le(ga,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Yh({label:e,ratio:r,threshold:t,note:a}){return de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(h,{sx:{flex:1},children:[le(ia,{style:{color:"var(--Text)"},children:e}),a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:a})]}),le(Xh,{ratio:r,threshold:t})]})}function qh({color:e,selected:r,onClick:t}){const a=Gh(e);return le(B,{title:a,arrow:!0,children:le(h,{onClick:()=>t(e),role:"button","aria-label":"Select "+a+" color","aria-pressed":r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:24,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})})}function Zh({label:e,selected:r,onClick:t}){return le(h,{component:"button",onClick:t,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:"pointer",border:"2px solid var(--Buttons-Primary-Button)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:r?"var(--Buttons-Primary-Button)":"transparent",color:r?"var(--Buttons-Primary-Text)":"var(--Text)",padding:"4px 12px",fontSize:"14px",fontFamily:"inherit",fontWeight:500,whiteSpace:"nowrap",flexShrink:0,transition:"background-color 0.15s ease, color 0.15s ease","&:hover":{backgroundColor:r?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function Jh(){const[e,t]=r(0),[a,o]=r("solid"),[n,l]=r("primary"),[s,d]=r("5"),[c,u]=r(!1),[p,m]=r(!1),[f,g]=r({}),y=()=>"solid"===a?n:n+"-"+a,S=()=>{if(c)return;const e=parseInt(s,10);return isNaN(e)||String(e)!==s.trim()?s||void 0:e};return i(()=>{const e=Gh(n),r={};"solid"===a?(r.badgeBg=qi("--Icons-"+e),r.badgeText=qi("--Icons-On-"+e),r.badgeBorder=null):"outline"===a&&(r.badgeBg=qi("--Background"),r.badgeText=qi("--Text"),r.badgeBorder=qi("--Buttons-"+e+"-Border")),r.background=qi("--Background"),r.focusVisible=qi("--Focus-Visible"),g(r)},[a,n]),de(h,{sx:{width:"100%"},children:[le(qt,{style:{marginBottom:8},children:"Badge"}),le(sa,{color:"quiet",style:{marginBottom:24},children:"Small label attached to an element showing status or count. Solid and outline variants across all 8 colors."}),de(M,{value:e,onChange:(e,r)=>t(r),sx:{borderBottom:"1px solid var(--Border)",mb:0},children:[le(E,{label:"Playground"}),le(E,{label:"Accessibility"})]}),0===e&&de(C,{container:!0,sx:{minHeight:400},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[le(h,{sx:{p:4,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:200,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)"},children:de(k,{direction:"row",spacing:6,alignItems:"center",children:[le(eo,{variant:y(),badgeContent:S(),dot:c,showZero:p,children:le(rt,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(eo,{variant:y(),badgeContent:S(),dot:c,showZero:p,children:le(Te,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(eo,{variant:y(),badgeContent:S(),dot:c,showZero:p,children:le(Ae,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})})]})}),le(ji,{code:(()=>{const e=['variant="'+y()+'"'];if(c)e.push("dot");else{const r=S();"number"==typeof r?e.push("badgeContent={"+r+"}"):r&&e.push('badgeContent="'+r+'"')}return p&&e.push("showZero"),"<Badge "+e.join(" ")+">\n <MailIcon />\n</Badge>"})(),language:"JSX",sx:{borderRadius:0,borderBottom:"1px solid var(--Border)"}})]}),de(C,{item:!0,sx:{width:{xs:"calc(100vw - 432px)",md:"calc((100vw - 432px) / 2)"},flexShrink:0,p:3,backgroundColor:"var(--Container)",overflowY:"auto"},children:[le(Zt,{children:"Playground"}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,flexWrap:"wrap",sx:{gap:1},children:["solid","outline"].map(e=>le(Zh,{label:Gh(e),selected:a===e,onClick:()=>o(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Uh.map(e=>le(qh,{color:e,selected:n===e,onClick:l},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Counter 16px · Dot 8px · Padding 4px · Digits 11px"})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BADGE CONTENT"}),le(v,{size:"small",value:s,onChange:e=>d(e.target.value),placeholder:"Number or text",disabled:c,sx:{width:"160px","& .MuiOutlinedInput-root":{fontFamily:"inherit",fontSize:"14px",backgroundColor:"var(--Background)","& fieldset":{borderColor:"var(--Border)"},"&:hover fieldset":{borderColor:"var(--Border)"},"&.Mui-focused fieldset":{borderColor:"var(--Buttons-Primary-Border)"}},"& .MuiOutlinedInput-input":{color:"var(--Text)",padding:"6px 12px"}}})]}),de(h,{sx:{mt:3},children:[le(b,{control:le(x,{checked:c,onChange:e=>u(e.target.checked),size:"small"}),label:le(ia,{children:"Dot (no content)"})}),le(b,{control:le(x,{checked:p,onChange:e=>m(e.target.checked),size:"small"}),label:le(ia,{children:"Show zero"})})]})]})]}),1===e&&de(h,{sx:{p:4},children:[le(Zt,{children:"Accessibility Requirements"}),de(ia,{color:"quiet",style:{marginBottom:32},children:["Based on current Playground settings: ",a," · ",n]}),de(k,{spacing:4,children:[de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Badge Text Contrast"}),le(ia,{color:"quiet",style:{marginBottom:16},children:"Badge text must have ≥ 4.5:1 contrast against badge background (WCAG 1.4.3 AA)"}),le(Yh,{label:"Badge Text vs. Badge Background",ratio:Yi(f.badgeText,f.badgeBg),threshold:4.5,note:"solid"===a?"var(--Buttons-{C}-Text) vs var(--Buttons-{C}-Button)":"outline"===a?"var(--Text) vs var(--Background)":"var(--Buttons-{C}-Text) vs var(--Buttons-{C}-Button)"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Badge Visibility"}),le(ia,{color:"quiet",style:{marginBottom:16},children:"Badge background (or border) must have ≥ 3:1 contrast against page background (WCAG 1.4.11)"}),(()=>{const e=Yi(f.badgeBg,f.background),r=f.badgeBorder?Yi(f.badgeBorder,f.background):null;return le(Yh,{label:"Badge vs. Page Background",ratio:(t=e,o=r,t||o?t?o?parseFloat(t)>=parseFloat(o)?t:o:t:o:null),threshold:3.1,note:"outline"===a?"Border "+(r||"--")+":1 — outline relies on border contrast":"BG "+(e||"--")+":1"});var t,o})()]}),de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Badge Sizing"}),le(ia,{color:"quiet",style:{marginBottom:16},children:"One size. A count has to read the same whether it hangs off a 20px icon or a 56px FAB, so it does not scale with its anchor."}),le(h,{sx:{display:"flex",justifyContent:"space-between",py:1.5,borderBottom:"1px solid var(--Border)"},children:de(h,{children:[le(ia,{children:"Counter"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"16px height · 4px side padding · 11px digits · pill shape"})]})}),le(h,{sx:{display:"flex",justifyContent:"space-between",py:1.5,borderBottom:"1px solid var(--Border)"},children:de(h,{children:[le(ia,{children:"Status dot"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"8px diameter circle"})]})})]}),de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA & Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{style:{display:"block",marginBottom:2},children:"Screenreader support:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:'MUI Badge renders badge content in a visually-hidden span for assistive technology. Numeric content is announced (e.g. "5 notifications").'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{style:{display:"block",marginBottom:2},children:"Dot variant:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Dot badges are purely decorative. Ensure the parent element conveys status to assistive tech via aria-label or similar."})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{style:{display:"block",marginBottom:2},children:"Max overflow:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:'When content exceeds max (default 99), displays "99+" visually but announces the actual number to screenreaders.'})]})]})]})]})]})]})}const Kh=e=>e.charAt(0).toUpperCase()+e.slice(1);function $h(e){return e&&"default"!==e&&"border-variant"!==e?"border"===e?"var(--Border)":"var(--Icons-"+Kh(e)+")":"var(--Border-Variant)"}function _h(e,r){const t=e&&!["default","border","border-variant"].includes(e)?Kh(e):"Default",a=$h(e);return"light"===r?{bg:"var(--Tag-"+t+"-BG)",text:"var(--Tag-"+t+"-Text)",border:"1px solid "+a}:{bg:"var(--Background)",text:"var(--Text)",border:"1px solid "+a}}const ep={small:"var(--Sm-Divider, 0.5px)",medium:"var(--Divider, 1px)",large:"var(--Lg-Divider, 2px)"};function rp({color:e="default",orientation:r="horizontal",size:t="small",children:a,indicatorText:o,indicatorStyle:i="outline",textAlign:n="center",className:l="",sx:s={},...d}){const c=$h(e),u=ep[t]||ep.small,p=!(!a&&!o),m=a||o,f="vertical"===r;if(f&&!p)return le(h,{role:"separator","aria-orientation":"vertical",className:"divider-vertical divider-"+e+" "+l,sx:{display:"inline-block",width:u,alignSelf:"stretch",minHeight:24,backgroundColor:c,flexShrink:0,...s},...d});if(f&&p){const r=_h(e,i),t="top"===n?"0 0 10%":"1 1 auto",a="top"===n?"1 1 auto":"bottom"===n?"0 0 10%":"1 1 auto";return de(h,{role:"separator","aria-orientation":"vertical",className:"divider-vertical divider-"+e+" divider-indicator "+l,sx:{display:"inline-flex",flexDirection:"column",alignItems:"center",alignSelf:"stretch",minHeight:24,flexShrink:0,...s},...d,children:[le(h,{sx:{flex:t,width:u,backgroundColor:c}}),le(h,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,my:1,px:.75,py:.5,borderRadius:"12px",fontSize:"11px",fontWeight:500,fontFamily:"inherit",lineHeight:1.2,whiteSpace:"nowrap",backgroundColor:r.bg,color:r.text,border:r.border,boxSizing:"border-box"},children:m}),le(h,{sx:{flex:a,width:u,backgroundColor:c}})]})}if(!p)return le(h,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" "+l,sx:{width:"100%",height:u,backgroundColor:c,flexShrink:0,...s},...d});const g=_h(e,i),x="left"===n?"0 0 10%":"1 1 auto",b="left"===n?"1 1 auto":"right"===n?"0 0 10%":"1 1 auto";return de(h,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" divider-indicator "+l,sx:{display:"flex",alignItems:"center",width:"100%",...s},...d,children:[le(h,{sx:{flex:x,height:u,backgroundColor:c}}),le(h,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,mx:2,px:1.5,py:.5,borderRadius:"12px",fontSize:"12px",fontWeight:500,fontFamily:"inherit",lineHeight:1.2,whiteSpace:"nowrap",backgroundColor:g.bg,color:g.text,border:g.border,boxSizing:"border-box"},children:m}),le(h,{sx:{flex:b,height:u,backgroundColor:c}})]})}const tp={eyebrow:wa,title:sa,secondary:na},ap={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},op={small:{py:.5,px:1.5,fontSize:"13px",iconSize:16,decoratorSize:28,gap:1,checkSize:"small"},medium:{py:1,px:1,fontSize:"14px",iconSize:20,decoratorSize:36,gap:1.5,checkSize:"small"},large:{py:1.5,px:2.5,fontSize:"16px",iconSize:24,decoratorSize:40,gap:2,checkSize:"medium"}};function ip({children:e,size:r="medium",isButton:t=!1,onAction:a,ariaLabel:o}){return le(h,t?{component:"button",role:"button",tabIndex:0,"aria-label":o||"Action",onClick:e=>{e.stopPropagation(),a?.(e)},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),a?.(e))},className:"list-item-decorator-button",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,padding:0,border:"none",backgroundColor:"transparent",borderRadius:"50%",cursor:"pointer",color:"inherit",transition:"background-color 0.15s ease","&:hover":{backgroundColor:"rgba(128,128,128,0.15)"},"&:active":{backgroundColor:"rgba(128,128,128,0.25)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"}},children:e}:{className:"list-item-decorator",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e})}function np({children:e,startDecorator:r,endDecorator:t,startDecoratorIsButton:a=!1,endDecoratorIsButton:o=!1,onStartDecoratorAction:i,onEndDecoratorAction:n,startDecoratorAriaLabel:l,endDecoratorAriaLabel:s,size:d="medium",variant:c="default",color:u,eyebrow:p,overline:m,secondary:f,clickable:g=!1,disabled:b=!1,selected:v=!1,selectionMode:y="none",onSelect:S,onClick:k,bottomBorder:B=!1,rightBorder:w=!1,sx:C={},...T}){const z=op[d]||op.medium,A=g||!!k,I="checkbox"===y||"radio"===y,W=(A||I)&&!b,D=e=>{b||(I&&S?.(e),k?.(e))};return de(h,{component:"li",role:I?"option":A?"button":"listitem",tabIndex:W?0:void 0,"aria-disabled":b||void 0,"aria-selected":I?v:v||void 0,"aria-checked":"checkbox"===y?v:void 0,onClick:D,onKeyDown:W?e=>{b||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),D(e))}:void 0,className:"list-item"+(v?" list-item-selected":"")+(b?" list-item-disabled":"")+(A?" list-item-clickable":"")+(I?" list-item-selectable":""),sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",width:"100%",boxSizing:"border-box",gap:"var(--Sizing-1-and-Half)",py:z.py,px:z.px,minHeight:"32px",fontSize:z.fontSize,fontFamily:"inherit",color:"var(--Text)",listStyle:"none",cursor:W?"pointer":"default",opacity:b?"var(--Disabled, 0.38)":1,position:"relative",transition:"background-color 0.15s ease, box-shadow 0.15s ease",...A?{border:"1px solid var(--Border)",boxShadow:"var(--Effect-Level-1)",padding:"var(--Sizing-1)",borderRadius:"var(--Input-Radius)"}:{},...!A&&B?{borderBottom:"1px solid var(--Border-Variant)"}:{},...!A&&w?{borderRight:"1px solid var(--Border-Variant)"}:{},backgroundColor:v?"var(--Hover)":"transparent","&:hover":W?{backgroundColor:"var(--Hover)",boxShadow:"var(--Effect-Level-2)"}:{},"&:active":W?{backgroundColor:"var(--Pressed)",boxShadow:"var(--Effect-Level-1)"}:{},"&:focus-visible":{outline:"none"},"&:focus-visible::after":{content:'""',position:"absolute",inset:"1px",border:"3px solid var(--Focus-Visible)",borderRadius:"var(--Input-Inner-Focus-Visible)",pointerEvents:"none"},...C},...T,children:["checkbox"===y&&le(x,{checked:v,disabled:b,size:z.checkSize,tabIndex:-1,onClick:e=>e.stopPropagation(),onChange:()=>S?.(),sx:{p:0,mr:0,color:"inherit","&.Mui-checked":{color:"inherit"}},inputProps:{"aria-label":"Select "+("string"==typeof e?e:"item")}}),"radio"===y&&le(R,{checked:v,disabled:b,size:z.checkSize,tabIndex:-1,onClick:e=>e.stopPropagation(),onChange:()=>S?.(),sx:{p:0,mr:0,color:"inherit","&.Mui-checked":{color:"inherit"}},inputProps:{"aria-label":"Select "+("string"==typeof e?e:"item")}}),r&&le(ip,{size:d,isButton:a,onAction:i,ariaLabel:l,children:r}),(()=>{const r=tp,t=p??m,a={display:"block",width:"100%",wordBreak:"break-word",overflowWrap:"anywhere"};return de(h,{sx:{flex:"1 1 auto",width:"100%",minWidth:0,display:"flex",flexDirection:"column",gap:0},children:[t&&le(r.eyebrow,{style:{...a,color:"var(--Quiet)"},children:t}),null!=e&&le(r.title,{style:{...a,color:"var(--Text)"},children:e}),f&&le(r.secondary,{style:{...a,color:"var(--Quiet)"},children:f})]})})(),t&&le(ip,{size:d,isButton:o,onAction:n,ariaLabel:s,children:t})]})}function lp({children:r,items:t,variant:a="default",color:o="primary",size:i="medium",orientation:n="vertical",dividers:l=!1,selectionMode:s="none",loading:d=!1,skeletonRows:c=3,empty:u,error:p,selectedIndices:m=[],onSelectionChange:f,clickable:g=!1,component:x="ul",className:b="",sx:v={},...y}){const S="horizontal"===n,k="checkbox"===s||"radio"===s,B="light"===a,w="default"===a,C={};("solid"===a||B)&&ap[o]&&(C["data-theme"]=ap[o],B&&(C["data-surface"]="Surface-Brightest"));const T=p?"error":d?"loading":t&&0===t.length&&u?"empty":null;return le(h,{component:x,role:k?"listbox":"list","aria-busy":"loading"===T?"true":void 0,"aria-multiselectable":"checkbox"===s||void 0,...C,className:"list-container list-"+a+" list-"+o+" "+b,sx:{display:"flex",flexDirection:S?"row":"column",boxSizing:"border-box",alignItems:"stretch",gap:g?"var(--Sizing-1)":0,m:0,p:w?0:1,backgroundColor:w?"transparent":"var(--Background)",color:"var(--Text)",borderRadius:w?0:"var(--Style-Border-Radius)",width:"100%",listStyle:"none",...S?{"& > .list-item":{flex:"1 1 0",width:"auto"}}:{},...v},...y,children:(()=>{if("loading"===T)return le(h,{component:"li",sx:{listStyle:"none"},children:le(vt,{label:"Loading",children:Array.from({length:c}).map((e,r)=>le(np,{size:i,variant:a,color:o,children:"        "},"sk-"+r))})});if("error"===T)return le(h,{component:"li",sx:{listStyle:"none"},children:p});if("empty"===T)return le(h,{component:"li",sx:{listStyle:"none"},children:u});if(t&&t.length>0){const e=[];return t.forEach((r,n)=>{e.push(le(np,{size:i,variant:a,color:o,startDecorator:r.startDecorator,endDecorator:r.endDecorator,startDecoratorIsButton:r.startDecoratorIsButton,endDecoratorIsButton:r.endDecoratorIsButton,onStartDecoratorAction:r.onStartDecoratorAction,onEndDecoratorAction:r.onEndDecoratorAction,startDecoratorAriaLabel:r.startDecoratorAriaLabel,endDecoratorAriaLabel:r.endDecoratorAriaLabel,eyebrow:r.eyebrow??r.overline,secondary:r.secondary,clickable:g||r.clickable,disabled:r.disabled,bottomBorder:r.bottomBorder,rightBorder:r.rightBorder,selected:k?m.includes(n):r.selected,selectionMode:s,onSelect:()=>(e=>{if(f)if("radio"===s)f([e]);else{const r=m.includes(e)?m.filter(r=>r!==e):[...m,e];f(r)}})(n),onClick:r.onClick,children:r.label||r.children},"item-"+n)),l&&n<t.length-1&&e.push(le(h,{component:"li",role:"separator","aria-hidden":"true",sx:S?{width:"1px",alignSelf:"stretch",backgroundColor:"var(--Border)",flexShrink:0}:{height:"1px",backgroundColor:"var(--Border)"}},"div-"+n))}),e}if(r){const t=e.Children.toArray(r);if(!l)return t;const a=[];return t.forEach((e,r)=>{a.push(e),r<t.length-1&&a.push(le(h,{component:"li",role:"separator","aria-hidden":"true",sx:S?{width:"1px",alignSelf:"stretch",backgroundColor:"var(--Border)",flexShrink:0}:{height:"1px",backgroundColor:"var(--Border)"}},"div-"+r))}),a}return null})()})}const sp={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},dp={small:{py:"4px",px:"8px",fontSize:"13px",headerFontSize:"12px"},medium:{py:"8px",px:"12px",fontSize:"14px",headerFontSize:"13px"},large:{py:"12px",px:"16px",fontSize:"16px",headerFontSize:"14px"}};function cp({children:e,columns:r,rows:t,footerRows:a,variant:o="default",color:i="primary",loading:n=!1,skeletonRows:l=3,empty:s,error:d,size:c="medium",stripe:u="none",stickyHeader:p=!1,stickyFooter:m=!1,className:f="",sx:g={},...x}){const b=dp[c]||dp.medium,v="solid"===o,y="outlined"===o,S="light"===o,k=(e=>e.charAt(0).toUpperCase()+e.slice(1))(i),B=y?"1px solid var(--Buttons-"+k+"-Border)":"none",w={};v&&sp[i]&&(w["data-theme"]=sp[i]);const C=()=>{const e={fontWeight:600,fontSize:b.headerFontSize,textAlign:"left",padding:b.py+" "+b.px,borderBottom:"2px solid var(--Border)",color:"var(--Text)",whiteSpace:"nowrap"};return S?(e.backgroundColor="var(--Buttons-"+k+"-Button)",e.color="var(--Buttons-"+k+"-Text)"):e.backgroundColor=v?"var(--Hover)":"var(--Background)",p&&(e.position="sticky",e.top=0,e.zIndex=2),e},T=()=>{const e={fontWeight:600,fontSize:b.headerFontSize,textAlign:"left",padding:b.py+" "+b.px,borderTop:"2px solid var(--Border)",color:"var(--Text)",whiteSpace:"nowrap"};return S?(e.backgroundColor="var(--Buttons-"+k+"-Button)",e.color="var(--Buttons-"+k+"-Text)"):e.backgroundColor=v?"var(--Hover)":"var(--Background)",m&&(e.position="sticky",e.bottom=0,e.zIndex=2),e},z=e=>"none"===u?"Surface":"odd"===u?e%2==0?"Surface":"Surface-Dim":"even"===u&&e%2==0?"Surface-Dim":"Surface",A=()=>({padding:b.py+" "+b.px,fontSize:b.fontSize,color:"var(--Text)",borderBottom:"1px solid var(--Border)",textAlign:"left"}),I=d?"error":n?"loading":t&&0===t.length&&s?"empty":null,R=Boolean(a&&a.length>0)&&"error"!==I,W=e=>le(h,{component:"tbody",children:le(h,{component:"tr",children:le(h,{component:"td",colSpan:r?r.length:1,sx:{padding:0,border:"none"},children:e})})});return le(h,{className:"table-wrapper table-"+o+(v||S||y?" table-"+i:"")+" "+f,...w,"aria-busy":"loading"===I?"true":void 0,sx:{width:"100%",overflow:"auto",border:B,borderRadius:y||S?"var(--Style-Border-Radius)":0,...g},children:le(h,{component:"table",sx:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed",fontFamily:"inherit","& thead th":C(),"& tbody td":A(),"& tfoot td, & tfoot th":T(),...p?{"& thead th":{...C(),position:"sticky",top:0,zIndex:2}}:{},...m?{"& tfoot td, & tfoot th":{...T(),position:"sticky",bottom:0,zIndex:2}}:{}},...x,children:r&&t?r&&(t||I)?de(se,{children:[le(h,{component:"thead",children:le(h,{component:"tr",children:r.map((e,r)=>le(h,{component:"th",sx:{...C(),...e.width?{width:e.width}:{},...e.align?{textAlign:e.align}:{}},children:e.label||e.header||e},"h-"+r))})}),"loading"===I&&W(le(vt,{label:"Loading",children:le(h,{component:"table",sx:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed"},children:le(h,{component:"tbody",children:Array.from({length:l}).map((e,t)=>le(h,{component:"tr","data-surface":z(t),children:r.map((e,r)=>le(h,{component:"td",sx:A(),children:"        "},"skc-"+t+"-"+r))},"sk-"+t))})})})),"error"===I&&W(d),"empty"===I&&W(s),!I&&t&&le(h,{component:"tbody",children:t.map((e,t)=>le(h,{component:"tr","data-surface":z(t),sx:{backgroundColor:"var(--"+z(t)+")"},children:(Array.isArray(e)?e:r.map(r=>e[r.field||r.key])).map((e,a)=>le(h,{component:"td",sx:{...A(),...r[a]&&r[a].align?{textAlign:r[a].align}:{}},children:e},"c-"+t+"-"+a))},"r-"+t))}),'/* The footer is decided PER STATE, not dropped wholesale. loading — ghosted, not hidden. A total that vanishes and reappears moves the table\'s height twice, which is the reflow the header is already kept to avoid; and the total genuinely IS loading, so a placeholder is the honest thing to show rather than a gap. empty — SHOWN as given. This is the case the first version got wrong. A filtered view with no matching invoices has a real total: zero. Hiding it makes the user wonder whether the filter or the sum failed, when the answer is simply "none, and they add up to nothing". error — dropped, and this is the one that must stay dropped. A total computed over data that failed to arrive is not missing, it is WRONG, and a wrong number shown confidently is worse than no number. Partial failures are the sharp case: some rows land, the sum looks plausible, and nothing on screen says it is short. */',R&&le(h,{component:"tfoot",children:a.map((e,t)=>le(h,{component:"tr",children:(Array.isArray(e)?e:r.map(r=>e[r.field||r.key])).map((e,a)=>le(h,{component:"td",sx:{...T(),...r[a]&&r[a].align?{textAlign:r[a].align}:{},..."loading"===I?bt():{}},children:e},"fc-"+t+"-"+a))},"f-"+t))})]}):null:e})})}const up={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},hp={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},pp={small:{fontSize:"12px",py:"4px",px:"8px",maxWidth:200,arrowSize:6},medium:{fontSize:"13px",py:"6px",px:"12px",maxWidth:280,arrowSize:8},large:{fontSize:"14px",py:"8px",px:"16px",maxWidth:360,arrowSize:10}};function mp({children:e,title:r,variant:t="solid",color:a="primary",size:o="medium",placement:i="bottom",arrow:n=!1,open:l,enterDelay:s=100,leaveDelay:d=0,describeChild:c=!1,className:u="",sx:p={},...m}){const f=pp[o]||pp.medium,g="solid"===t,x="light"===t,b="outline"===t,v=(e=>e.charAt(0).toUpperCase()+e.slice(1))(a),y="var(--Background)",S=void 0===l?{}:{open:l};return le(B,{title:r?le(h,{"data-theme":(g?up[a]:x?hp[a]:null)||void 0,"data-surface":x?"Surface-Brightest":g?"Surface":void 0,className:"tooltip-content tooltip-"+t+" tooltip-"+a+" tooltip-"+o+" "+u,sx:{backgroundColor:"var(--Background)",color:"var(--Text)",border:b?"1px solid var(--Buttons-"+v+"-Border)":"none",borderRadius:"var(--Style-Border-Radius)",fontSize:f.fontSize,lineHeight:1.5,fontFamily:"inherit",padding:f.py+" "+f.px,maxWidth:f.maxWidth+"px",boxShadow:"0 2px 8px rgba(0,0,0,0.15)",...p},children:r}):"",placement:i,arrow:n,enterDelay:s,leaveDelay:d,describeChild:c,...S,componentsProps:{tooltip:{sx:{backgroundColor:"transparent",padding:0,maxWidth:"none",boxShadow:"none"}},arrow:{sx:{color:y,"&::before":{border:b?"1px solid var(--Buttons-"+v+"-Border)":"none",backgroundColor:y,boxSizing:"border-box"},fontSize:f.arrowSize+"px"}}},...m,children:e})}const fp={default:{theme:"App-Bar"},primary:{theme:"Primary"},"primary-light":{theme:"Primary",surface:"Surface-Brightest"},white:{theme:"Neutral",surface:"Surface-Brightest"},black:{theme:"Neutral",surface:"Surface-Dimmest"}};function gp({children:e,onClick:r,ariaLabel:t}){return le(Ao,{iconOnly:!0,variant:"ghost",size:"medium",onClick:r,"aria-label":t,children:e})}function xp({barColor:t="default",surface:a="Surface",loginType:o="login",menuType:i="hamburger",brandType:n="name",searchPosition:l="right",companyName:s="Company",navLinks:d=["Home","Products","About"],rightButtons:c=[],showRightButtons:u=!1,onMenuClick:p,user:m,onLogin:f,onSignOut:g,brand:x,onBrandClick:b,centerSlot:v,endSlot:y,searchValue:S,onSearchChange:k,searchPlaceholder:B="Search...",children:w,className:C="",sx:T={}}){const[z,A]=r(!1),I=fp[t]||fp.default,R=I.theme,W=I.surface||a,D="expanded"===i&&d.length>3?"hamburger":i,P=le(zs,{placeholder:B,size:"medium",value:S,onChange:k,sx:{flex:"left"===l?"0 1 400px":"0 1 280px",minWidth:0}});return de(se,{children:[le(h,{component:"header",role:"banner","data-theme":R,"data-surface":W,className:"appbar appbar-desktop appbar-"+t+(C?" "+C:""),sx:{display:"flex",alignItems:"center",height:64,px:2,gap:2,backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:oo,fontFamily:"inherit",...T},children:w||de(se,{children:["hamburger"===D&&le(gp,{ariaLabel:"Open navigation menu",onClick:p||(()=>A(!0)),children:le(Rr,{sx:{fontSize:"inherit"}})}),le(h,void 0!==x?b?{component:"button",type:"button",onClick:b,sx:{background:"transparent",border:"none",padding:0,cursor:"pointer",color:"inherit",font:"inherit",fontWeight:700,fontSize:"18px",whiteSpace:"nowrap",flexShrink:0},children:x}:{sx:{fontWeight:700,fontSize:"18px",whiteSpace:"nowrap",flexShrink:0},children:x}:"logo"===n?{sx:{width:32,height:32,borderRadius:"6px",backgroundColor:"var(--Text)",opacity:.8,flexShrink:0},"aria-label":"Company logo"}:{sx:{fontWeight:700,fontSize:"18px",whiteSpace:"nowrap",flexShrink:0},children:s}),de(se,void 0!==v?{children:[le(h,{sx:{flex:1}}),le(h,{sx:{display:"flex",alignItems:"center",flexShrink:0},children:v}),le(h,{sx:{flex:1}})]}:{children:["left"===l&&P,"expanded"===D&&le(li,{defaultValue:0,variant:"standard",color:"default",sx:{ml:2,minHeight:0},children:le(si,{"aria-label":"Main navigation",children:d.map(e=>le(di,{children:e},e))})}),le(h,{sx:{flex:1}}),"right"===l&&P]}),void 0!==y?le(h,{sx:{display:"flex",alignItems:"center",gap:1},children:y}):de(se,{children:[u&&c.length>0&&le(h,{sx:{display:"flex",alignItems:"center",gap:.5},children:c.map((r,t)=>r.raw?le(e.Fragment,{children:r.icon},t):le(gp,{ariaLabel:r.label||"Action "+(t+1),children:r.icon},t))}),m?le(Ao,{variant:"ghost",size:"small",onClick:g,"aria-label":"Sign out",startIcon:m.photoURL?le(h,{component:"img",src:m.photoURL,alt:"",sx:{width:24,height:24,borderRadius:"50%"}}):le(ot,{sx:{fontSize:24}}),children:m.displayName?.split(" ")[0]||"Account"}):f?le(Ao,{variant:"default-outline",size:"small",onClick:f,children:"Login"}):"avatar"===o?le(Ao,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(ot,{sx:{fontSize:28}})}):null]})]})}),le(Eu,{open:z,onClose:()=>A(!1),anchor:"left",size:"small",children:le(h,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:d.map(e=>le(Ao,{variant:"ghost",size:"medium",onClick:()=>A(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})})]})}function bp({mobileVariant:e="search",barColor:t="default",surface:a="Surface",title:o="Page Title",subtitle:i="Subtitle text",actionIcon:n,companyName:l="Company",navLinks:s=["Home","Products","About"],className:d="",sx:c={}}){const[u,p]=r(!1),m=fp[t]||fp.default,f=m.theme,g=m.surface||a,x={backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:oo,fontFamily:"inherit",width:"100%",maxWidth:420,...c},b={"data-theme":f,"data-surface":g},v=le(Eu,{open:u,onClose:()=>p(!1),anchor:"left",size:"small",children:le(h,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:s.map(e=>le(Ao,{variant:"ghost",size:"medium",onClick:()=>p(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})});return"search"===e?de(se,{children:[de(h,{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-search appbar-"+t+" "+d,...b,sx:{...x,display:"flex",alignItems:"center",height:64,px:1.5,gap:1.5},children:[le(gp,{ariaLabel:"Open navigation menu",onClick:()=>p(!0),children:le(Rr,{sx:{fontSize:"inherit"}})}),le(zs,{placeholder:"Search "+l,size:"small",sx:{flex:1,minWidth:0}}),le(Ao,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(ot,{sx:{fontSize:28}})})]}),v]}):de(h,"small"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-small appbar-"+t+" "+d,...b,sx:{...x,display:"flex",alignItems:"center",height:64,px:1.5,gap:1},children:[le(gp,{ariaLabel:"Back",children:le(at,{sx:{fontSize:"inherit"}})}),de(h,{sx:{flex:1,minWidth:0},children:[le(h,{sx:{fontWeight:600,fontSize:"16px",lineHeight:1.3,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:o}),i&&le(h,{sx:{fontSize:"12px",opacity:.7,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:i})]}),n&&le(gp,{ariaLabel:"Action",children:n})]}:"medium"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-medium appbar-"+t+" "+d,...b,sx:{...x,px:1.5,pb:2},children:[de(h,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(gp,{ariaLabel:"Back",children:le(at,{sx:{fontSize:"inherit"}})}),le(h,{sx:{flex:1}}),n&&le(gp,{ariaLabel:"Action",children:n})]}),de(h,{sx:{px:1.5},children:[le(h,{sx:{fontWeight:600,fontSize:"24px",lineHeight:1.2},children:o}),i&&le(h,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:i})]})]}:{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-large appbar-"+t+" "+d,...b,sx:{...x,px:1.5,pb:3},children:[de(h,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(gp,{ariaLabel:"Back",children:le(at,{sx:{fontSize:"inherit"}})}),le(h,{sx:{flex:1}}),n&&le(gp,{ariaLabel:"Action",children:n})]}),de(h,{sx:{px:1.5,mt:1},children:[le(h,{sx:{fontWeight:600,fontSize:"36px",lineHeight:1.1},children:o}),i&&le(h,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:i})]})]})}function vp({mode:e="desktop",...r}){return le("mobile"===e?bp:xp,{...r})}const yp=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Sp=["default","primary","primary-light","white","black"],kp=["Surface","Surface-Bright","Surface-Dim","Surface-Dimmest"],Bp={default:{theme:"App-Bar"},primary:{theme:"Primary"},"primary-light":{theme:"Primary",surface:"Surface-Brightest"},white:{theme:"Neutral",surface:"Surface-Brightest"},black:{theme:"Neutral",surface:"Surface-Dimmest"}};function wp({ratio:e,threshold:r}){if(!e)return le(ga,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=r;return de(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:t?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:[e,":1"]}),le(ga,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Cp({label:e,ratio:r,threshold:t,note:a}){return de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(h,{sx:{flex:1},children:[le(ia,{style:{color:"var(--Text)"},children:e}),a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:a})]}),le(wp,{ratio:r,threshold:t})]})}function Tp({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function zp({color:e,selected:r,onClick:t}){const a=Bp[e]||Bp.default;return le(h,{component:"button","data-theme":a.theme,"data-surface":a.surface||"Surface",onClick:()=>t(e),"aria-label":"Select "+e,"aria-pressed":r,title:e,sx:{width:"var(--Button-Height, 36px)",height:"var(--Button-Height, 36px)",borderRadius:"4px",backgroundColor:"var(--Background)",border:r?"2px solid var(--Text)":"2px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function Ap(){const[e,t]=r("desktop"),[a,o]=r("default"),[n,l]=r("Surface"),[s,d]=r("login"),[c,u]=r("hamburger"),[p,m]=r("name"),[f,g]=r("right"),[x,b]=r("search"),[v,y]=r(null),[S,B]=r("Surface"),[w,T]=r({}),z="desktop"===e,A=Bp[a]||Bp.default,I=A.theme,R=A.surface||n;return i(()=>{const e={};e.text=qi("--Text"),e.textQuiet=qi("--Text-Quiet"),e.background=qi("--Background"),e.border=qi("--Border"),e.focusVisible=qi("--Focus-Visible"),e.hover=qi("--Hover"),e.active=qi("--Pressed"),T(e)},[a,n,e]),de(h,{sx:{pb:8},children:[le(qt,{children:"App Bar"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{theme:v,children:le(h,{sx:{width:"100%",maxWidth:z?"100%":420,overflow:"hidden"},children:z?le(xp,{barColor:a,surface:n,loginType:s,menuType:c,brandType:p,searchPosition:f,companyName:"My App",navLinks:["Home","Products","About"]}):le(bp,{barColor:a,surface:n,mobileVariant:x,companyName:"My App",title:"Page Title",subtitle:"Subtitle text"})})}),le(ji,{code:(()=>{if(z){const e=[];"default"!==a&&e.push('barColor="'+a+'"'),"Surface"!==n&&e.push('surface="'+n+'"'),"login"!==s&&e.push('loginType="'+s+'"'),"hamburger"!==c&&e.push('menuType="'+c+'"'),"name"!==p&&e.push('brandType="'+p+'"'),"right"!==f&&e.push('searchPosition="'+f+'"');const r=e.length?"\n "+e.join("\n ")+"\n":"";return'<AppBar mode="desktop"'+(r||" ")+'companyName="My App" />'}{const e=['mode="mobile"','mobileVariant="'+x+'"'];return"default"!==a&&e.push('barColor="'+a+'"'),"Surface"!==n&&e.push('surface="'+n+'"'),"<AppBar\n "+e.join("\n ")+'\n title="Page Title"\n/>'}})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:v,onThemeChange:y,surface:S,onSurfaceChange:B})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MODE"}),le(k,{direction:"row",spacing:1,children:["desktop","mobile"].map(r=>le(Tp,{label:yp(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Sp.map(e=>le(zp,{color:e,selected:a===e,onClick:o},e))}),de(ga,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-theme="',I,'"']})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:kp.map(e=>le(Tp,{label:e.replace("Surface-","").replace("Surface","Default"),selected:n===e,onClick:()=>l(e)},e))}),de(ga,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-surface="',n,'"']})]}),z&&de(se,{children:[de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MENU TYPE"}),le(k,{direction:"row",spacing:1,children:["hamburger","expanded"].map(e=>le(Tp,{label:yp(e),selected:c===e,onClick:()=>u(e)},e))}),le(ga,{style:{color:"var(--Text-Quiet)",marginTop:4,display:"block"},children:"Expanded auto-falls back to hamburger when nav > 3 links"})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BRAND"}),le(k,{direction:"row",spacing:1,children:["name","logo"].map(e=>le(Tp,{label:yp(e),selected:p===e,onClick:()=>m(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEARCH POSITION"}),le(k,{direction:"row",spacing:1,children:["left","right"].map(e=>le(Tp,{label:yp(e),selected:f===e,onClick:()=>g(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LOGIN TYPE"}),le(k,{direction:"row",spacing:1,children:["login","avatar"].map(e=>le(Tp,{label:yp(e),selected:s===e,onClick:()=>d(e)},e))})]})]}),!z&&de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MOBILE VARIANT"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["search","small","medium","large"].map(e=>le(Tp,{label:yp(e),selected:x===e,onClick:()=>b(e)},e))})]})]})}),le(ci,{value:1,children:de(h,{sx:{p:3},children:[de(ia,{color:"quiet",style:{marginBottom:24},children:[e," / ",a," / ",n,z?"":" / "+x,' — data-theme="',I,'" data-surface="',R,'"']}),de(k,{spacing:3,children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(ia,{color:"quiet",style:{marginBottom:16},children:"All text and icons must have 4.5:1 contrast against the AppBar background."}),le(Cp,{label:"Resting: var(--Text) vs. var(--Background)",ratio:Yi(w.text,w.background),threshold:4.5,note:'data-theme="'+I+'" data-surface="'+R+'"'}),le(Cp,{label:"On hover: var(--Text) vs. var(--Hover)",ratio:Yi(w.text,w.hover),threshold:4.5,note:"Icon buttons use var(--Hover) on hover"}),le(Cp,{label:"On active: var(--Text) vs. var(--Pressed)",ratio:Yi(w.text,w.active),threshold:4.5,note:"Icon buttons use var(--Pressed) on press"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(Cp,{label:"var(--Focus-Visible) vs. var(--Background)",ratio:Yi(w.focusVisible,w.background),threshold:3,note:"outline: 3px solid var(--Focus-Visible); outline-offset: 1px"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Touch Target Area (WCAG 2.5.5)"}),[{label:"Icon button",size:40,note:"width: 40px, height: 40px"},{label:"AppBar (desktop)",size:64,note:"height: 64px"},{label:"AppBar (mobile)",size:64,note:"height: 64px"}].map(({label:e,size:r,note:t})=>{const a=r>=24,o=r>=44,i=r>=48;return de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(h,{sx:{flex:1},children:[de(ia,{style:{color:"var(--Text)"},children:[e," — ",r,"px"]}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:t})]}),de(h,{sx:{display:"flex",gap:.5,flexWrap:"wrap",justifyContent:"flex-end"},children:[de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:a?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:a?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:["Desktop ",a?"Y":"N"]}),de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:o?"var(--Tags-Success-BG)":"var(--Tags-Warning-BG)",color:o?"var(--Tags-Success-Text)":"var(--Tags-Warning-Text)"},children:["iOS ",o?"Y":"~"]}),de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:i?"var(--Tags-Success-BG)":"var(--Tags-Warning-BG)",color:i?"var(--Tags-Success-Text)":"var(--Tags-Warning-Text)"},children:["Android ",i?"Y":"~"]})]})]},e)})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Landmark:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<header role="banner">'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Navigation (expanded menu):"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav aria-label="Main navigation">'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Theme + Surface:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'data-theme="'+I+'" data-surface="'+R+'"'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Shadow:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"box-shadow: var(--Effect-Level-1)"})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(ia,{children:"Icon buttons:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"All icon buttons have aria-label. Focus visible on keyboard navigation."})]}),de(h,{sx:{py:1.5},children:[le(ia,{children:"Keyboard:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Tab navigates all interactive elements. Enter/Space activates buttons."})]})]})]})]})]})})]})})})]})]})}const Ip={default:{bg:"var(--Primary-Color-1)",fg:"var(--Primary-Color-12)"},primary:{theme:"Primary",surface:"Surface-Dim"},"primary-dark":{bg:"var(--Primary-Color-1)",fg:"var(--Primary-Color-12)"},white:{bg:"var(--Neutral-Color-11)",fg:"var(--Neutral-Color-3)"},black:{bg:"var(--Neutral-Color-1)",fg:"var(--Neutral-Color-12)"}};function Rp({color:e="default",companyName:r="",year:t=(new Date).getFullYear(),rights:a="All rights reserved",children:o,className:i,style:n,...l}){const s=o??`© ${t}${r?" "+r:""}.${a?" "+a+".":""}`,d=Ip[e]||Ip.default,c=d.theme?{"data-theme":d.theme,"data-surface":d.surface||"Surface-Dim"}:{},u=d.theme?{background:"var(--Background)",color:"var(--Text)"}:{background:d.bg,color:d.fg};return le("div",{...c,className:["dino-copyright",i].filter(Boolean).join(" "),style:{padding:"14px 24px",textAlign:"center",...u,...n},...l,children:le(ia,{style:{color:"inherit",opacity:.85},children:s})})}const Wp={default:{bg:"var(--Primary-Color-2)",fg:"var(--Primary-Color-12)"},primary:{theme:"Primary",surface:"Surface"},"primary-dark":{theme:"Primary",surface:"Surface-Dimmest"},white:{bg:"var(--Neutral-Color-12)",fg:"var(--Neutral-Color-2)"},black:{bg:"var(--Neutral-Color-1)",fg:"var(--Neutral-Color-12)"}};function Dp({color:e="default",brand:r,address:t,columns:a=[],socialLinks:o=[],subscribe:i,copyrightName:n,copyrightYear:l,className:s,style:d,...c}){const u=a.slice(0,3),h=Wp[e]||Wp.default,p=h.theme?{"data-theme":h.theme,"data-surface":h.surface||"Surface"}:{},m=h.theme?{background:"var(--Background)",color:"var(--Text)"}:{background:h.bg,color:h.fg};return de("footer",{...p,className:["dino-footer",s].filter(Boolean).join(" "),style:{...m,...d},...c,children:[de("div",{style:{maxWidth:1200,margin:"0 auto",padding:"40px 24px 56px"},children:[r&&le("div",{style:{marginBottom:36},children:r}),de("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))",gap:40},children:[le(Pp,{address:t}),u.map((e,r)=>le(Fp,{...e},r))]}),(o.length>0||i)&&de("div",{style:{marginTop:48,paddingTop:32,borderTop:"1px solid rgba(255, 255, 255, 0.10)",display:"flex",flexWrap:"wrap",gap:32,alignItems:"flex-start",justifyContent:"space-between"},children:[o.length>0&&le(Lp,{links:o}),i&&le(Hp,{...i})]})]}),le(Rp,{color:e,companyName:n,year:l})]})}function Pp({address:e}){if(!e)return le("div",{});const{company:r,lines:t=[],email:a,phone:o}=e,i=[...r?[r]:[],...t,...o?[o]:[]];return de("div",{children:[i.map((e,r)=>le(ia,{style:{color:"inherit",opacity:.85,display:"block"},children:e},r)),a&&le("div",{style:{marginTop:12},children:le(ia,{style:{color:"inherit",opacity:.85,display:"block"},children:le(Gs,{href:"mailto:"+a,color:"standard",style:{color:"inherit"},children:a})})})]})}function Fp({title:e,links:r=[]}){return de("div",{children:[e&&le(Zt,{style:{color:"inherit",marginBottom:12},children:e}),le("ul",{style:{listStyle:"none",margin:0,padding:0},children:r.map((e,r)=>le("li",{style:{marginBottom:8},children:le(Gs,{href:e.href,onClick:e.onClick,color:"standard",style:{color:"inherit",opacity:.85},children:e.label})},r))})]})}function Lp({links:e}){return le("div",{style:{display:"flex",gap:16,alignItems:"center"},children:e.map((e,r)=>le("a",{href:e.url,target:"_blank",rel:"noopener noreferrer","aria-label":e.label||"Social link",style:{color:"inherit",opacity:.85,display:"inline-flex",alignItems:"center",justifyContent:"center",width:36,height:36,borderRadius:"50%",border:"1px solid rgba(255, 255, 255, 0.18)",textDecoration:"none",transition:"opacity 150ms ease, border-color 150ms ease"},onMouseEnter:e=>{e.currentTarget.style.opacity="1"},onMouseLeave:e=>{e.currentTarget.style.opacity="0.85"},children:e.icon},r))})}function Hp({title:e="Stay in the loop",description:t,placeholder:a="your@email.com",buttonLabel:o="Subscribe",onSubscribe:i}){const[n,l]=r(""),[s,d]=r(!1);return de("form",{onSubmit:async e=>{if(e&&e.preventDefault(),n&&!s){d(!0);try{await(i?.(n)),l("")}finally{d(!1)}}},style:{minWidth:260,maxWidth:360,flex:"1 1 260px"},children:[le(Zt,{style:{color:"inherit",marginBottom:6},children:e}),t&&le(ia,{style:{color:"inherit",opacity:.85,marginBottom:12,display:"block"},children:t}),de("div",{style:{display:"flex",gap:8},children:[le(Ol,{type:"email",value:n,onChange:e=>l(e.target.value),placeholder:a,size:"small",fullWidth:!0,"aria-label":"Email address"}),le(Ao,{type:"submit",variant:"primary",size:"small",disabled:s||!n,children:o})]})]})}function Mp(e){const r=e.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);return r?[Number(r[1]),Number(r[2]),Number(r[3])]:null}function Ep(e){return e?"#"+e.map(e=>e.toString(16).padStart(2,"0")).join(""):"—"}function Np([e,r,t]){const a=[e,r,t].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*a[0]+.7152*a[1]+.0722*a[2]}function Op({targetRef:e,label:t,deps:a=[]}){const[o,n]=r(null),[l,s]=r(null);i(()=>{if(!e.current)return;const r=requestAnimationFrame(()=>{if(!e.current)return;const r=getComputedStyle(e.current);n(Mp(r.backgroundColor)),s(Mp(r.color))});return()=>cancelAnimationFrame(r)},a);const d=function(e,r){if(!e||!r)return null;const t=Np(e),a=Np(r);return(Math.max(t,a)+.05)/(Math.min(t,a)+.05)}(o,l),c=null!==d&&d>=4.5,u=null===d?"—":null!==d&&d>=7?"AAA":c?"AA":"Fail",h=null===d?"var(--Text-Quiet)":c?"var(--Text-Success)":"var(--Text-Error)";return de("div",{style:{display:"flex",alignItems:"center",gap:16,padding:"12px 16px",borderRadius:8,background:"var(--Container)",border:"1px solid var(--Border)"},children:[de("div",{style:{flex:1,minWidth:0},children:[le(ia,{style:{fontWeight:600},children:t}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Background ",Ep(o)," · Text ",Ep(l)]})]}),de("div",{style:{display:"flex",alignItems:"center",gap:6,borderRadius:999,padding:"4px 10px",background:"var(--Background)",border:"1px solid var(--Border)"},children:[le("span",{style:{fontWeight:700,fontSize:12,color:h},children:u}),le(ga,{style:{color:"var(--Text-Quiet)"},children:null!==d?d.toFixed(2)+":1":"—"})]})]})}const Qp={company:"DinoDesign",lines:["123 Market Street","San Francisco, CA 94103"],email:"hello@dinodesign.dev",phone:"+1 (555) 010-0000"},Vp=[{title:"Product",links:[{label:"Features",href:"#"},{label:"Pricing",href:"#"},{label:"Add-ons",href:"#"}]},{title:"Company",links:[{label:"About",href:"#"},{label:"Careers",href:"#"},{label:"Contact",href:"#"}]},{title:"Resources",links:[{label:"Docs",href:"#"},{label:"Changelog",href:"#"},{label:"Status",href:"#"}]}],jp=[{icon:le(it,{fontSize:"small"}),url:"https://twitter.com",label:"Twitter"},{icon:le(nt,{fontSize:"small"}),url:"https://github.com",label:"GitHub"},{icon:le(lt,{fontSize:"small"}),url:"https://linkedin.com",label:"LinkedIn"}],Gp=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function Up({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Xp(){const[e,t]=r(4),[o,n]=r(!0),[l,s]=r(!0),[d,c]=r("default"),u=a(null),[p,m]=r(null),[f,g]=r(null);i(()=>{u.current&&(m({current:u.current.querySelector(".dino-footer")}),g({current:u.current.querySelector(".dino-copyright")}))},[d,e,o,l]);const x=Vp.slice(0,Math.max(0,e-1)),b=o?jp:[],v=l?{title:"Stay in the loop",description:"Monthly updates on new components and tips.",onSubscribe:async e=>console.log("subscribed:",e)}:void 0;return de(h,{children:[le(qt,{style:{marginBottom:12},children:"Footer"}),de(sa,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:["Configurable 1–4 column footer. The first column is always the company address / contact. Optional ",le("code",{children:"socialLinks"})," and"," ",le("code",{children:"subscribe"})," sit above the auto-generated copyright strip."]}),le(h,{ref:u,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(Dp,{color:d,address:Qp,columns:x,socialLinks:b,subscribe:v,copyrightName:"DinoDesign"})}),de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(k,{spacing:3,sx:{p:3,maxWidth:560},children:[de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLUMNS"}),le(k,{direction:"row",spacing:1,children:[1,2,3,4].map(r=>le(Up,{label:String(r),selected:e===r,onClick:()=>t(r)},r))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"First column is always the address / contact. Up to 3 more link columns."})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Gp.map(e=>le(Up,{label:e.label,selected:d===e.value,onClick:()=>c(e.value)},e.value))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:'"Default" hardcodes Primary tone 2 (auto-derived in a future iteration).'})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SOCIAL LINKS"}),le(on,{label:"Show social media row",checked:o,onChange:e=>n(e.target.checked)}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["When on, the Footer renders the ",le("code",{children:"socialLinks"})," row (icons linking out). In your app, supply the icon + url pairs from your data store."]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SUBSCRIBE"}),le(on,{label:"Show email subscribe form",checked:l,onChange:e=>s(e.target.checked)}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["When on, the Footer renders an email subscribe form. Hook it up via"," ",le("code",{children:"subscribe.onSubscribe(email)"}),"."]})]})]})}),le(ci,{value:1,children:de(k,{spacing:2,sx:{p:3,maxWidth:560},children:[le(ga,{style:{color:"var(--Text-Quiet)"},children:"Live WCAG 2.1 contrast against the painted background. AA needs 4.5:1 for normal text; AAA needs 7:1."}),p&&le(Op,{targetRef:p,label:"Footer body",deps:[d,e,o,l]}),f&&le(Op,{targetRef:f,label:"Copyright strip",deps:[d,e,o,l]})]})})]})]})}const Yp=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function qp({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Zp(){const[e,t]=r("DinoDesign"),[o,n]=r((new Date).getFullYear()),[l,s]=r("All rights reserved"),[d,c]=r(""),[u,p]=r(!1),[m,f]=r("default"),g=a(null),[x,b]=r(null);return i(()=>{g.current&&b({current:g.current.querySelector(".dino-copyright")})},[m,u,e,o,l,d]),de(h,{children:[le(qt,{style:{marginBottom:12},children:"Copyright"}),de(sa,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:["Standalone copyright strip used at the bottom of pages. Defaults to"," ",de("code",{children:["© ","{year}"," ","{companyName}",". ","{rights}","."]})," Pass"," ",le("code",{children:"children"})," to override the entire text."]}),le(h,{ref:g,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(Rp,u?{color:m,children:d||"Type a custom message →"}:{color:m,companyName:e,year:Number(o)||(new Date).getFullYear(),rights:l})}),de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(k,{spacing:3,sx:{p:3,maxWidth:560},children:[de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TEXT MODE"}),de(k,{direction:"row",spacing:1,children:[le(qp,{label:"Auto-generated",selected:!u,onClick:()=>p(!1)}),le(qp,{label:"Custom",selected:u,onClick:()=>p(!0)})]})]}),!u&&de(se,{children:[le(Jo,{label:"Company name",value:e,onChange:e=>t(e.target.value),placeholder:"DinoDesign",size:"medium"}),le(xl,{label:"Year",value:Number(o),onChange:e=>n(e),min:1900,max:2100}),le(Jo,{label:"Rights text",value:l,onChange:e=>s(e.target.value),placeholder:"All rights reserved",size:"medium"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:'Leave Rights blank to omit "All rights reserved." entirely.'})]}),u&&de(se,{children:[le(Jo,{label:"Custom text",value:d,onChange:e=>c(e.target.value),placeholder:"© 2026 DinoDesign · MIT License · Built with love",size:"medium",multiline:!0}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Pass any string (or React node) as children to fully override the auto text."})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Yp.map(e=>le(qp,{label:e.label,selected:m===e.value,onClick:()=>f(e.value)},e.value))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Matches the Footer color presets so the two stack cleanly."})]})]})}),le(ci,{value:1,children:de(k,{spacing:2,sx:{p:3,maxWidth:560},children:[le(ga,{style:{color:"var(--Text-Quiet)"},children:"Live WCAG 2.1 contrast against the painted background. AA needs 4.5:1 for normal text; AAA needs 7:1."}),x&&le(Op,{targetRef:x,label:"Copyright strip",deps:[m,u,e,o,l,d]})]})})]})]})}const Jp=["Default","Primary","Secondary","Tertiary","Neutral"],Kp={Classic:{name:"Classic",description:"Raised + soft shadow",angle:135,bevel:!0,depth:5,softness:1,shadow:!0,shadowDistance:6,shadowBlur:8,shadowOpacity:.6},Carved:{name:"Carved",description:"Deep inset, no shadow",angle:135,bevel:!0,depth:10,softness:2,shadow:!1,shadowDistance:4,shadowBlur:4,shadowOpacity:.4},Embossed:{name:"Embossed",description:"Inset + heavy shadow",angle:135,bevel:!0,depth:7,softness:1.5,shadow:!0,shadowDistance:10,shadowBlur:14,shadowOpacity:.7},Stamp:{name:"Stamp",description:"Reversed light + shadow",angle:315,bevel:!0,depth:6,softness:1,shadow:!0,shadowDistance:5,shadowBlur:6,shadowOpacity:.8},"Night Cut":{name:"Night Cut",description:"Inset on dark background",angle:135,bevel:!0,depth:8,softness:2,shadow:!1,shadowDistance:6,shadowBlur:8,shadowOpacity:.6},"Shadow Only":{name:"Shadow Only",description:"Flat fill + drop shadow",angle:135,bevel:!1,depth:4,softness:1,shadow:!0,shadowDistance:8,shadowBlur:12,shadowOpacity:.5}},$p=Object.keys(Kp);function _p(e,r){if("custom"===e)return{...Kp.Classic,name:"Custom",description:"Custom",...r||{}};const t=Kp[e];return t?{...t}:{...Kp.Classic}}function em(e,r){const t=e||"Primary";return"base"===r?"var(--Buttons-"+t+"-Button)":"highlight"===r?"rgb(var(--Buttons-"+t+"-Highlight))":"lowlight"===r?"rgb(var(--Buttons-"+t+"-Lowlight))":void 0}function rm(e){const r=e||"Primary";return"Default"===r?"var(--Text)":"var(--Text-"+r+")"}function tm(e,r){const t=(e-90)*Math.PI/180;return{dx:Math.cos(t)*r,dy:Math.sin(t)*r}}const am={"display-large":{fontFamily:"var(--Header-Font-Family)",fontSize:"var(--Display-Large-Font-Size)",fontWeight:"var(--Display-Large-Font-Weight)",letterSpacing:"var(--Display-Large-Letter-Spacing)",pxHint:64},"display-small":{fontFamily:"var(--Header-Font-Family)",fontSize:"var(--Display-Small-Font-Size)",fontWeight:"var(--Display-Small-Font-Weight)",letterSpacing:"var(--Display-Small-Letter-Spacing)",pxHint:48}};function om({text:r="Your Brand. Perfected.",curves:t,arc:a=160,radius:o=300,direction:i="up",rotation:n=0,autoCrop:l=!0,textStyle:s="display-large",fontSize:d,fontFamily:c,fontWeight:u,letterSpacing:h,color:p="var(--Text, #1a1a1a)",bevel:m=!1,bevelTheme:f="Primary",bevelPreset:g,bevelCustom:x,className:b,style:v,...y}){const S=g?_p(g,x):null,k=S?!!S.bevel:!!m,B=am[s]||am["display-large"],w=c??B.fontFamily,C=d??B.fontSize,T=u??B.fontWeight,z=h??B.letterSpacing,A="number"==typeof d?d:B.pxHint,I=t&&t.length>0?t:[{arc:a,radius:o,direction:i}],{d:R,width:W,upMax:D,downMax:P,pathId:F}=function(r){return e.useMemo(()=>{const e="dino-curved-text-"+Math.random().toString(36).slice(2,9);let t=0;const a=0;let o="M "+t+" "+a,i=0,n=0;for(const{arc:e,radius:l,direction:s}of r){const r=im(e,1,359),d=Math.max(10,l),c=r*Math.PI/180,u=2*d*Math.sin(c/2),h=d*(1-Math.cos(c/2));t+=u,o+=" A "+d+" "+d+" 0 "+(r>180?1:0)+" "+("up"===s?1:0)+" "+t+" "+a,"up"===s?i=Math.max(i,h):n=Math.max(n,h)}return{d:o,width:t,upMax:i,downMax:n,pathId:e}},[JSON.stringify(r)])}(I),L=Math.ceil(D+A),H=Math.ceil(P+A),M=Math.ceil(A),E=Math.ceil(W+2*M),N=L+H,O=M,Q=L,V=n?"rotate("+n+" "+E/2+" "+N/2+")":void 0,j=e.useRef(null),[G,U]=e.useState(null),[X,Y]=e.useState(A);e.useEffect(()=>{if(!j.current||"undefined"==typeof ResizeObserver)return;const e=j.current,r=()=>{const r=e.getBoundingClientRect(),t=G?G.width:E;if(!t||!r.width)return;const a=r.width/t;Y(A*a)};r();const t=new ResizeObserver(r);return t.observe(e),()=>t.disconnect()},[E,A,G]);const q=k&&X>=19;e.useLayoutEffect(()=>{if(!l)return void U(null);const e=j.current;if(!e)return;const r=e.querySelector("text");if(!r)return;let t;try{t=r.getBBox()}catch(e){return}if(!t||!t.width||!t.height)return;const a=E/2,o=N/2,i=n*Math.PI/180,s=Math.cos(i),d=Math.sin(i),c=(e,r)=>{const t=e-a,i=r-o;return{x:a+t*s-i*d,y:o+t*d+i*s}},u=[c(t.x,t.y),c(t.x+t.width,t.y),c(t.x,t.y+t.height),c(t.x+t.width,t.y+t.height)],h=Math.min(...u.map(e=>e.x)),p=Math.max(...u.map(e=>e.x)),m=Math.min(...u.map(e=>e.y)),f=Math.max(...u.map(e=>e.y)),g=.12*A,x={x:h-g,y:m-g,width:p-h+2*g,height:f-m+2*g};U(e=>e&&Math.abs(e.x-x.x)<.5&&Math.abs(e.y-x.y)<.5&&Math.abs(e.width-x.width)<.5&&Math.abs(e.height-x.height)<.5?e:x)},[l,r,JSON.stringify(I),n,A,z,w,T,k,f,g,JSON.stringify(x)]);const Z=G?G.x+" "+G.y+" "+G.width+" "+G.height:"0 0 "+E+" "+N,J=G?G.width:E,K=G?G.height:N;return de("svg",{ref:j,viewBox:Z,width:J,height:K,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...v},"aria-label":r,role:"img",className:["dino-curved-text",b].filter(Boolean).join(" "),...y,children:[le("defs",{children:le("path",{id:F,d:R,transform:"translate("+O+" "+Q+")"})}),de("g",{transform:V,children:[q&&(()=>{const e=S?S.depth/96:.045,t=Math.max(2,Math.round(A*e)),a=Math.max(1,Math.round(A*e*.67)),o={fontFamily:w,fontSize:"number"==typeof C?C+"px":C,fontWeight:T,letterSpacing:"number"==typeof z?z+"px":z};return de(se,{children:[le("text",{className:"dino-bevel-layer dino-bevel-layer--lowlight",fill:"rgb(var(--Buttons-"+f+"-Lowlight))",transform:"translate(0 "+t+")",style:o,children:le("textPath",{href:"#"+F,startOffset:"50%",textAnchor:"middle",children:r})}),le("text",{className:"dino-bevel-layer dino-bevel-layer--highlight",fill:"rgb(var(--Buttons-"+f+"-Highlight))",transform:"translate(0 -"+a+")",style:o,children:le("textPath",{href:"#"+F,startOffset:"50%",textAnchor:"middle",children:r})})]})})(),le("text",{className:"dino-curved-text__base",fill:q?"var(--Buttons-"+f+"-Button)":k?rm(f):p,style:{fontFamily:w,fontSize:"number"==typeof C?C+"px":C,fontWeight:T,letterSpacing:"number"==typeof z?z+"px":z},children:le("textPath",{href:"#"+F,startOffset:"50%",textAnchor:"middle",children:r})})]})]})}function im(e,r,t){return Math.max(r,Math.min(t,e))}const nm=[{value:"display-large",label:"Display Large"},{value:"display-small",label:"Display Small"}],lm=[{value:"text",label:"Text",css:"var(--Text)"},{value:"primary",label:"Primary",css:"var(--Text-Primary)"},{value:"secondary",label:"Secondary",css:"var(--Text-Secondary)"},{value:"tertiary",label:"Tertiary",css:"var(--Text-Tertiary)"}],sm=Jp.map(e=>({value:e,label:e}));function dm({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function cm(){const[e,t]=r("Your Brand. Perfected."),[o,n]=r("display-large"),[l,s]=r("primary"),[d,c]=r([(u="up",{arc:140,radius:340,direction:u})]);var u;const[p,m]=r(0),[f,g]=r(8),[x,b]=r(700),[v,y]=r(!1),[S,B]=r("Primary"),[w,C]=r("Classic"),T=a(null),[z,A]=r(null);i(()=>{T.current&&A({current:T.current.querySelector("text")})},[l,o,d,p,f,x,v,S,w]);const I=lm.find(e=>e.value===l)?.css||lm[0].css;function R(e,r){c(t=>t.map((t,a)=>a===e?{...t,...r}:t))}return de(h,{children:[le(qt,{style:{marginBottom:12},children:"Curved Display Text"}),le(sa,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:"Decorative text laid along an SVG arc. Chain multiple arcs to build a wave — each curve gets its own radius, arc sweep, and direction. Uses your design system's decorative font + text tokens."}),de(h,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(360px, 1fr))",gap:3,alignItems:"start"},children:[le(h,{sx:{minWidth:0},children:le(h,{ref:T,"data-surface":"Container",sx:{background:"var(--Background)",borderRadius:2,p:3,display:"flex",alignItems:"center",justifyContent:"center",overflow:"auto",position:"sticky",top:16},children:le(om,{text:e,curves:d,textStyle:o,rotation:p,letterSpacing:f,fontWeight:x,bevel:v,bevelTheme:S,bevelPreset:v?w:void 0,color:I})})}),le(h,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(k,{spacing:3,sx:{p:3,maxWidth:720},children:[le(Jo,{label:"Text",value:e,onChange:e=>t(e.target.value),placeholder:"Your headline…",size:"medium"}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CURVES"}),le(k,{direction:"row",spacing:1,children:[1,2].map(e=>le(dm,{label:String(e),selected:d.length===e,onClick:()=>function(e){c(r=>{if(e===r.length)return r;if(e>r.length){const t=[...r];for(;t.length<e;){const e=t[t.length-1];t.push({arc:e.arc,radius:e.radius,direction:"up"===e.direction?"down":"up"})}return t}return r.slice(0,e)})}(e)},e))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"One curve is an arch. Two curves chain end-to-end for a wave."})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"PER-CURVE SETTINGS"}),le(k,{spacing:2,children:d.map((e,r)=>de(h,{"data-surface":"Container",style:{background:"var(--Background)",border:"1px solid var(--Border)",borderRadius:8,padding:12},children:[de(k,{direction:"row",alignItems:"center",spacing:2,sx:{mb:1},children:[de(ga,{style:{fontWeight:700},children:["Curve ",r+1]}),le("div",{style:{flex:1}}),de(k,{direction:"row",spacing:1,children:[le(dm,{label:"⌢ Up",selected:"up"===e.direction,onClick:()=>R(r,{direction:"up"})}),le(dm,{label:"⌣ Down",selected:"down"===e.direction,onClick:()=>R(r,{direction:"down"})})]})]}),de(k,{spacing:1,children:[de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Radius",de("span",{style:{float:"right"},children:[e.radius,"px"]})]}),le(ys,{min:100,max:600,step:10,value:e.radius,onChange:(e,t)=>R(r,{radius:t})})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Arc sweep",de("span",{style:{float:"right"},children:[e.arc,"°"]})]}),le(ys,{min:40,max:280,step:5,value:e.arc,onChange:(e,t)=>R(r,{arc:t})})]})]})]},r))})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:nm.map(e=>le(dm,{label:e.label,selected:o===e.value,onClick:()=>n(e.value)},e.value))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Uses the lib's DisplayLarge / DisplaySmall tokens (font-family, size, weight, letter-spacing)."})]}),de(h,{children:[de(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["LETTER SPACING",de("span",{style:{float:"right"},children:[f,"px"]})]}),le(ys,{min:-4,max:40,step:1,value:f,onChange:(e,r)=>g(r)}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Adjusts the gap between characters along the wave."})]}),de(h,{children:[de(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["FONT WEIGHT",le("span",{style:{float:"right"},children:x})]}),le(ys,{min:100,max:900,step:100,value:x,onChange:(e,r)=>b(r)}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Heavier weights read better at decorative sizes. Available weights depend on the loaded display font."})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BEVEL"}),le(on,{label:"3D bevel effect",checked:v,onChange:e=>y(e.target.checked)}),v&&de(h,{sx:{mt:1.5},children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Preset"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1,mb:1.5},children:$p.map(e=>le(dm,{label:e,selected:w===e,onClick:()=>C(e)},e))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Bevel theme"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:sm.map(e=>le(dm,{label:e.label,selected:S===e.value,onClick:()=>B(e.value)},e.value))})]}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Bevel layers use ",de("code",{children:["--Buttons-","{Theme}","-Button"]})," for the fill, with ",le("code",{children:"Highlight"})," + ",le("code",{children:"Lowlight"}),"tokens for the bright/shadow stripes. CurvedText honors a preset's ",le("em",{children:"depth"})," only — angle, softness, and drop-shadow fields are stacked-rendering limitations and are ignored here (the full filter pipeline lives in ",le("code",{children:"<BevelText>"}),"). Shadow-only presets render no effect. Auto-hides below 19px so the 3:1 bevel contrast doesn't compromise small-text legibility."]})]}),de(h,{children:[de(k,{direction:"row",alignItems:"center",sx:{mb:1},children:[de(wa,{style:{color:"var(--Text-Quiet)",flex:1},children:["ROTATION",de("span",{style:{float:"right",marginRight:12},children:[p,"°"]})]}),le(Ao,{variant:"default-outline",size:"small",onClick:function(){const r=T.current?.querySelector("svg");if(!r)return;const t=r.querySelector("path"),a=r.querySelector("text");if(!t||!a)return;const o=t.getTotalLength();if(!o)return;let i=0;try{i=a.getComputedTextLength?.()||0}catch(e){}i||(i=Math.min(o,18*e.length));const n=Math.max(0,(o-i)/2),l=Math.min(o,n+i),s=t.getPointAtLength(n),d=t.getPointAtLength(l),c=180*Math.atan2(d.y-s.y,d.x-s.x)/Math.PI,u=Math.max(-45,Math.min(45,Math.round(-c)));m(u)},children:"Auto-level"})]}),le(ys,{min:-45,max:45,step:1,value:p,onChange:(e,r)=>m(r)}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:'Tilts the whole text block around its center. "Auto-level" rotates so the text\'s start and end sit on the same horizontal line — useful when a multi-curve wave makes the reading line slant.'})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:lm.map(e=>le(dm,{label:e.label,selected:l===e.value,onClick:()=>s(e.value)},e.value))})]})]})}),le(ci,{value:1,children:de(k,{spacing:2,sx:{p:3,maxWidth:560},children:[le(ga,{style:{color:"var(--Text-Quiet)"},children:"Live WCAG 2.1 contrast against the painted background. Decorative display text counts as large text — AA needs 3:1, AAA needs 4.5:1 — but DinoDesign defaults to 4.5:1 across the board."}),z&&le(Op,{targetRef:z,label:"Curved text",deps:[l,o,JSON.stringify(d),p,f]}),de(ia,{color:"quiet",children:["The SVG sets ",le("code",{children:'role="img"'})," and"," ",le("code",{children:"aria-label"})," to the rendered text so screen readers announce it as a labeled image, not a stream of individual glyphs."]})]})})]})})})]})]})}const um={"display-large":{fontFamily:"var(--Header-Font-Family)",fontSize:"var(--Display-Large-Font-Size)",fontWeight:"var(--Display-Large-Font-Weight)",letterSpacing:"var(--Display-Large-Letter-Spacing)",pxHint:96},"display-small":{fontFamily:"var(--Header-Font-Family)",fontSize:"var(--Display-Small-Font-Size)",fontWeight:"var(--Display-Small-Font-Weight)",letterSpacing:"var(--Display-Small-Letter-Spacing)",pxHint:64}};function hm({text:r="DinoDesign",theme:t="Primary",preset:a="Classic",custom:o,textStyle:i="display-large",fontSize:n,fontFamily:l,fontWeight:s,letterSpacing:d,className:c,style:u,...h}){const p=um[i]||um["display-large"],m=l??p.fontFamily,f=n??p.fontSize,g=s??p.fontWeight,x=d??p.letterSpacing,b="number"==typeof n?n:p.pxHint,v=_p(a,o),y="dino-bevel-"+e.useId().replace(/:/g,""),S=y+"-s",k=e.useRef(null),[B,w]=e.useState(b),C=.6*b,T=Math.max(400,r.length*C+80),z=1.9*b,A=T/2,I=.7*z;e.useEffect(()=>{if(!k.current||"undefined"==typeof ResizeObserver)return;const e=k.current,r=()=>{const r=e.getBoundingClientRect();T&&r.width&&w(b*(r.width/T))};r();const t=new ResizeObserver(r);return t.observe(e),()=>t.disconnect()},[T,b]);const R=B>=19,W=v.bevel?tm(v.angle+180,v.depth):{dx:0,dy:0},D=v.bevel?tm(v.angle,v.depth):{dx:0,dy:0},P=v.shadow?tm(v.angle,v.shadowDistance??6):{dx:0,dy:0},F=R?em(t,"base"):rm(t),L=em(t,"highlight"),H=em(t,"lowlight"),M={fontFamily:m,fontSize:"number"==typeof f?f+"px":f,fontWeight:g,letterSpacing:"number"==typeof x?x+"px":x},E=v.bevel&&R?"url(#"+y+")":void 0,N=v.shadow&&R?"url(#"+S+")":void 0;return de("svg",{ref:k,viewBox:"0 0 "+T+" "+z,width:T,height:z,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...u},"aria-label":r,role:"img",className:["dino-bevel-text",c].filter(Boolean).join(" "),...h,children:[de("defs",{children:[v.shadow&&le("filter",{id:S,x:"-30%",y:"-30%",width:"160%",height:"160%",children:le("feDropShadow",{dx:P.dx.toFixed(2),dy:P.dy.toFixed(2),stdDeviation:v.shadowBlur??8,style:{floodColor:H,floodOpacity:v.shadowOpacity??.6}})}),v.bevel&&de("filter",{id:y,x:"-5%",y:"-5%",width:"110%",height:"110%",colorInterpolationFilters:"sRGB",children:[le("feGaussianBlur",{in:"SourceAlpha",stdDeviation:(v.softness??1)+.5,result:"blur-alpha"}),le("feOffset",{in:"blur-alpha",dx:D.dx.toFixed(2),dy:D.dy.toFixed(2),result:"shadow-offset"}),le("feFlood",{style:{floodColor:H,floodOpacity:.95},result:"shadow-flood"}),le("feComposite",{in:"shadow-flood",in2:"shadow-offset",operator:"in",result:"shadow-shaped"}),le("feComposite",{in:"shadow-shaped",in2:"SourceAlpha",operator:"in",result:"shadow-clipped"}),le("feOffset",{in:"blur-alpha",dx:W.dx.toFixed(2),dy:W.dy.toFixed(2),result:"hi-offset"}),le("feFlood",{style:{floodColor:L,floodOpacity:.95},result:"hi-flood"}),le("feComposite",{in:"hi-flood",in2:"hi-offset",operator:"in",result:"hi-shaped"}),le("feComposite",{in:"hi-shaped",in2:"SourceAlpha",operator:"in",result:"hi-clipped"}),de("feMerge",{children:[le("feMergeNode",{in:"SourceGraphic"}),le("feMergeNode",{in:"shadow-clipped"}),le("feMergeNode",{in:"hi-clipped"})]})]})]}),v.shadow&&R&&le("text",{className:"dino-bevel-layer dino-bevel-layer--shadow",x:A,y:I,textAnchor:"middle",fill:F,filter:N,style:M,"aria-hidden":"true",children:r}),le("text",{className:v.bevel?"dino-bevel-text__base dino-bevel-layer":"dino-bevel-text__base",x:A,y:I,textAnchor:"middle",fill:F,filter:E,style:M,children:r})]})}const pm=[...$p.map(e=>({value:e,label:e,description:Kp[e].description})),{value:"custom",label:"Custom",description:"Tune every knob"}],mm=[{value:"light",label:"Light",css:"var(--Surface)"},{value:"warm",label:"Warm",css:"var(--Surface-Dim)"},{value:"dark",label:"Dark",css:"var(--Container-High)"}];function fm({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function gm({option:e,active:r,onClick:t}){return de(h,{onClick:t,role:"button",tabIndex:0,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),t())},sx:{flex:"1 1 140px",minWidth:130,cursor:"pointer",border:"1.5px solid",borderColor:r?"var(--Buttons-Primary-Border)":"var(--Border)",background:r?"rgb(var(--Buttons-Primary-Highlight) / 0.18)":"var(--Background)",borderRadius:"var(--Style-Border-Radius)",p:1.5,transition:"border-color 0.15s, background 0.15s",textAlign:"center","&:hover":{borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:2}},children:[le(ga,{style:{fontWeight:600,color:"var(--Text)"},children:e.label}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:e.description})]})}function xm(){const[e,t]=r("DinoDesign"),[a,o]=r("Primary"),[i,n]=r("Classic"),[l,s]=r("light"),[d,c]=r(135),[u,p]=r(5),[m,f]=r(1),[g,x]=r(!0),[b,v]=r(!0),[y,S]=r(6),[B,w]=r(8),[C,T]=r(60),[z,A]=r(96),[I,R]=r(900),[W,D]=r(0),P="custom"===i,F=P?{angle:d,depth:u,softness:m,bevel:g,shadow:b,shadowDistance:y,shadowBlur:B,shadowOpacity:C/100}:void 0;const L=mm.find(e=>e.value===l)?.css||mm[0].css;return de(h,{children:[le(qt,{style:{marginBottom:12},children:"Bevel Display Text"}),le(sa,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:"Straight-line display text with an SVG inset-bevel and optional drop shadow. Colors are locked to the active button-palette tokens (Button / Highlight / Lowlight) so the same preset reads correctly under any theme."}),de(h,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(360px, 1fr))",gap:3,alignItems:"start"},children:[le(h,{sx:{minWidth:0},children:le(h,{"data-surface":"Container",sx:{background:L,borderRadius:2,p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:240,overflow:"auto",position:"sticky",top:16,transition:"background 0.2s"},children:le(hm,{text:e,theme:a,preset:i,custom:F,fontSize:z,fontWeight:I,letterSpacing:W})})}),le(h,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(k,{spacing:3,sx:{p:3,maxWidth:720},children:[le(Jo,{label:"Text",value:e,onChange:e=>t(e.target.value),placeholder:"Your headline…",size:"medium"}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Jp.map(e=>le(fm,{label:e,selected:a===e,onClick:()=>o(e)},e))}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Resolves to ",de("code",{children:["--Buttons-","{Theme}","-Button"]})," ","(fill), ",le("code",{children:"-Highlight"})," (light edge), and"," ",le("code",{children:"-Lowlight"})," (shadow edge)."]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PRESETS"}),le(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:pm.map(e=>le(gm,{option:e,active:i===e.value,onClick:()=>function(e){if(n(e),"custom"!==e){const r=_p(e);c(r.angle),p(r.depth??5),f(r.softness??1),x(r.bevel),v(r.shadow),S(r.shadowDistance??6),w(r.shadowBlur??8),T(Math.round(100*(r.shadowOpacity??.6)))}}(e.value)},e.value))})]}),P&&de(h,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",p:2},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"CUSTOM"}),de(k,{spacing:2,children:[de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Light angle",de("span",{style:{float:"right"},children:[d,"°"]})]}),le(ys,{min:0,max:360,step:5,value:d,onChange:(e,r)=>c(r)})]}),de(h,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(on,{label:"Inset bevel",checked:g,onChange:e=>x(e.target.checked)}),g&&de(k,{spacing:1.5,sx:{mt:1.5},children:[de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Depth",de("span",{style:{float:"right"},children:[u,"px"]})]}),le(ys,{min:1,max:16,step:1,value:u,onChange:(e,r)=>p(r)})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Softness",de("span",{style:{float:"right"},children:[m,"px"]})]}),le(ys,{min:0,max:6,step:.5,value:m,onChange:(e,r)=>f(r)})]})]})]}),de(h,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(on,{label:"Drop shadow",checked:b,onChange:e=>v(e.target.checked)}),b&&de(k,{spacing:1.5,sx:{mt:1.5},children:[de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Distance",de("span",{style:{float:"right"},children:[y,"px"]})]}),le(ys,{min:1,max:24,step:1,value:y,onChange:(e,r)=>S(r)})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Blur",de("span",{style:{float:"right"},children:[B,"px"]})]}),le(ys,{min:0,max:24,step:1,value:B,onChange:(e,r)=>w(r)})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Opacity",de("span",{style:{float:"right"},children:[C,"%"]})]}),le(ys,{min:10,max:100,step:5,value:C,onChange:(e,r)=>T(r)})]})]})]})]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),de(k,{spacing:2,children:[de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font size",de("span",{style:{float:"right"},children:[z,"px"]})]}),le(ys,{min:32,max:160,step:4,value:z,onChange:(e,r)=>A(r)})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font weight",le("span",{style:{float:"right"},children:I})]}),le(ys,{min:400,max:900,step:100,value:I,onChange:(e,r)=>R(r)})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Letter spacing",de("span",{style:{float:"right"},children:[W,"px"]})]}),le(ys,{min:-2,max:20,step:1,value:W,onChange:(e,r)=>D(r)})]})]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PREVIEW BACKGROUND"}),le(k,{direction:"row",spacing:1,children:mm.map(e=>le(fm,{label:e.label,selected:l===e.value,onClick:()=>s(e.value)},e.value))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Showcase-only — doesn't affect the emitted code."})]})]})}),le(ci,{value:1,children:de(k,{spacing:2,sx:{p:3,maxWidth:560},children:[de(ga,{style:{color:"var(--Text-Quiet)"},children:["BevelText uses the same Highlight / Lowlight token pair as button bevels, which target the WCAG 2.1 large-text minimum (3:1). Bevel text is decorative display — the SVG sets"," ",le("code",{children:'role="img"'})," and ",le("code",{children:"aria-label"})," to the rendered string so screen readers announce it as a labeled image, not a stream of glyphs."]}),le(ia,{color:"quiet",children:"Keep the rendered glyph height above ~24px when the bevel is on — at smaller sizes the highlight / lowlight stripes optically reduce the legible stroke width and the 3:1 contrast no longer feels comfortable."})]})})]})})})]})]})}const bm={outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},vm={opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"};function ym(e={}){const{selectedBg:r,selectedText:t,selectedHover:a,selectedPressed:o,muiPrefix:i}=e,n=i?"&.Mui-disabled":"&:disabled",l=i?"&.Mui-focusVisible":"&:focus-visible",s={"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},[l]:bm,[n]:{...vm,color:"var(--Quiet)"}};return r?{...s,"&.Mui-selected":{backgroundColor:r,...t?{color:t}:{},"&:hover":{backgroundColor:a||"var(--Hover)"},"&:active":{backgroundColor:o||"var(--Pressed)"}}}:s}function Sm({open:e,onClose:t,items:a=[],onItemClick:o,width:i=280,variant:n="temporary",header:l,footer:s,sx:d={},...c}){const[u,m]=r(null),[f,g]=r({}),x=(e,r)=>{m(r),o?.(e),"temporary"===n&&t?.()},b="permanent"===n?"permanent":"standard"===n?"standard":"temporary",v=de(h,{sx:{display:"flex",flexDirection:"column",height:"100%",backgroundColor:"var(--Container)",color:"var(--Text)"},children:[l&&le(h,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:"string"==typeof l?le(w,{variant:"h6",sx:{fontWeight:700},children:l}):l}),le(Z,{sx:{flex:1,overflow:"auto",py:1},children:a.map((e,r)=>{const t=u===r,a=e.submenu&&e.submenu.length>0,o=f[r];return de(h,{children:[le(B,{title:e.tooltip||"",placement:"right",children:le(J,{disablePadding:!0,children:de(K,{onClick:()=>{a?(e=>{g(r=>({...r,[e]:!r[e]}))})(r):x(e,r)},selected:t&&!a,sx:{backgroundColor:t&&!a?"var(--Buttons-Primary-Button)":"transparent",color:t&&!a?"var(--Buttons-Primary-Text)":"var(--Text)",...ym({muiPrefix:!0,selectedBg:"var(--Buttons-Primary-Button)",selectedText:"var(--Buttons-Primary-Text)",selectedHover:"var(--Buttons-Primary-Hover)",selectedPressed:"var(--Buttons-Primary-Pressed)"}),transition:"all 0.2s ease-in-out"},children:[e.icon&&le($,{sx:{color:t&&!a?"var(--Buttons-Primary-Text)":"var(--Icons-Primary)",minWidth:40},children:e.badge?le(p,{badgeContent:e.badge,variant:"error",children:e.icon}):e.icon}),le(_,{primary:e.label,primaryTypographyProps:{variant:"body2",fontWeight:t&&!a?600:500}}),a&&le(h,{sx:{ml:1},children:le(o?Vr:ve,{})})]})})}),a&&le(ee,{in:o,timeout:"auto",unmountOnExit:!0,children:le(Z,{component:"div",disablePadding:!0,children:e.submenu.map((e,r)=>le(J,{disablePadding:!0,children:de(K,{onClick:()=>x(e,r),sx:{pl:4,backgroundColor:"transparent",color:"var(--Text)",...ym({muiPrefix:!0,selectedBg:"var(--Buttons-Primary-Button)",selectedText:"var(--Buttons-Primary-Text)",selectedHover:"var(--Buttons-Primary-Hover)",selectedPressed:"var(--Buttons-Primary-Pressed)"})},children:[e.icon&&le($,{sx:{color:"var(--Icons-Primary)",minWidth:40},children:e.icon}),le(_,{primary:e.label})]})},r))})}),e.divider&&le(re,{sx:{my:1,borderColor:"var(--Border-Variant)"}})]},r)})}),s&&le(h,{sx:{borderTop:"1px solid var(--Border-Variant)",p:2},children:"string"==typeof s?le(w,{variant:"caption",sx:{color:"var(--Text-Quiet)"},children:s}):s})]});return"permanent"===n?le(h,{sx:{width:i,flexShrink:0,...d},children:v}):le(te,{variant:b,open:e,onClose:t,PaperProps:{sx:{width:i,backgroundColor:"var(--Container)",color:"var(--Text)",...d}},...c,children:v})}function km({layout:e="side",navItems:t=[{label:"Home",icon:le(Se,{}),path:"/"},{label:"About",icon:le(Re,{}),path:"/about"},{label:"Settings",icon:le(Be,{}),path:"/settings"},{label:"Help",icon:le(st,{}),path:"/help"}],title:a="My App",children:o,onLayoutChange:i,onNavigate:n,sx:l={},...s}){const d=ae(),c=oe(d.breakpoints.down("md"));oe(d.breakpoints.down("lg"));const[u,p]=r(!1),[m,f]=r(!1),g=c?"top":e,x=({compact:e=!1})=>le(Z,{sx:{py:1},children:t.map((r,t)=>le(B,{title:e?r.label:"",placement:"right",children:de(K,{onClick:()=>{n?.(r),p(!1)},sx:{color:"var(--Text)",...ym({muiPrefix:!0}),transition:"all 0.2s ease-in-out",justifyContent:e?"center":"flex-start",px:e?1:2},children:[le($,{sx:{color:"var(--Icons-Primary)",minWidth:e?"auto":40,mr:e?0:1},children:r.icon}),!e&&le(_,{primary:r.label})]})},t))});return de(h,{sx:{minHeight:"100vh",backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",flexDirection:"column",...l},...s,children:[le(ie,{position:"static",sx:{backgroundColor:"var(--Header)",color:"var(--Text)",boxShadow:"0 1px 3px rgba(0,0,0,0.12)",borderBottom:"1px solid var(--Border-Variant)"},children:de(ne,{children:[c&&"rail"!==g&&le(Io,{variant:"ghost",onClick:()=>p(!u),"aria-label":u?"Close navigation":"Open navigation",sx:{mr:2},children:le(u?Wr:Rr,{})}),le(w,{variant:"h6",sx:{flex:1,fontWeight:700},children:a}),!c&&i&&de(I,{value:e,exclusive:!0,onChange:(e,r)=>{r&&i(r)},size:"small",sx:{"& .MuiToggleButton-root":{color:"var(--Text)",border:"1px solid var(--Border)","&.Mui-selected":{backgroundColor:"var(--Button-Primary-Button)",color:"#fff",borderColor:"var(--Button-Primary-Button)"}}},children:[le(A,{value:"side","aria-label":"side nav",children:"☰ Side"}),le(A,{value:"rail","aria-label":"rail nav",children:"⫷ Rail"}),le(A,{value:"side-rail","aria-label":"side-rail nav",children:"☰⫷ Both"})]})]})}),de(h,{sx:{display:"flex",flex:1},children:[("rail"===g||"side-rail"===g)&&!c&&le(h,{sx:{width:80,backgroundColor:"var(--Container)",borderRight:"1px solid var(--Border-Variant)",display:"flex",flexDirection:"column",py:2},children:le(x,{compact:!0})}),("side"===g||"side-rail"===g)&&!c&&de(h,{sx:{width:m?80:280,backgroundColor:"var(--Container)",borderRight:"1px solid var(--Border-Variant)",transition:"width 0.3s ease-in-out",display:"flex",flexDirection:"column"},children:[de(h,{sx:{p:2,display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid var(--Border-Variant)",minHeight:64},children:[!m&&le(w,{variant:"h6",sx:{fontWeight:700,color:"var(--Text)"},children:"Menu"}),le(Io,{size:"small",variant:"ghost",onClick:()=>f(!m),"aria-label":m?"Expand navigation":"Collapse navigation",sx:{color:"var(--Icons-Primary)"},children:m?"›":"‹"})]}),le(x,{compact:m})]}),c&&de(te,{anchor:"left",open:u,onClose:()=>p(!1),sx:{"& .MuiDrawer-paper":{backgroundColor:"var(--Container)",width:280}},children:[le(h,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:le(w,{variant:"h6",sx:{fontWeight:700},children:"Menu"})}),le(x,{compact:!1})]}),le(h,{sx:{flex:1,overflow:"auto",backgroundColor:"var(--Background)"},children:le(H,{maxWidth:"lg",sx:{py:4},children:o})})]})]})}const Bm={small:{summaryPadding:"var(--Sizing-Half) var(--Sizing-Half) var(--Sizing-Half) var(--Sizing-1-and-Half)",gap:"var(--Sizing-Half)",detailsPy:"var(--Sizing-1-and-Half)",detailsPx:"var(--Sizing-1-and-Half)",iconSize:"small"},medium:{summaryPadding:"var(--Sizing-1) var(--Sizing-1) var(--Sizing-1) var(--Sizing-2)",gap:"var(--Sizing-1)",detailsPy:"var(--Sizing-2)",detailsPx:"var(--Sizing-2)",iconSize:"medium"},large:{summaryPadding:"var(--Sizing-1-and-Half) var(--Sizing-1-and-Half) var(--Sizing-1-and-Half) var(--Sizing-2-and-Half)",gap:"var(--Sizing-1-and-Half)",detailsPy:"var(--Sizing-2-and-Half)",detailsPx:"var(--Sizing-2-and-Half)",iconSize:"large"}},wm=l({variant:"solid",color:"default",size:"medium",spacing:0}),Cm=l({expanded:!1,toggle:()=>{},disabled:!1,accordionId:""}),Tm="var(--Accordion-Radius, var(--Button-Radius))";function zm({children:e,variant:r="solid",surface:t,color:a="default",size:o="medium",spacing:i=0,className:n="",sx:l={},...s}){const d="default"===a?"Default":(c=a).charAt(0).toUpperCase()+c.slice(1);var c;const u=0===i,p="default"===a?"Default":d,m=t||("dark"===r?"Surface-Dimmest":"light"===r?"Surface-Brightest":"Surface");return le(wm.Provider,u?{value:{variant:r,color:a,size:o,spacing:i,dataTheme:p,dataSurface:m},children:le(h,{role:"presentation",className:"accordion-group accordion-group-connected accordion-group-"+r+" "+n,sx:{display:"flex",flexDirection:"column","& > .accordion-segment":{borderRadius:0,marginBottom:"-1px",boxShadow:"none"},"& > .accordion-segment .accordion-summary":{borderRadius:0},"& > .accordion-segment:first-of-type":{borderTopLeftRadius:Tm,borderTopRightRadius:Tm},"& > .accordion-segment:first-of-type .accordion-summary":{borderTopLeftRadius:Tm,borderTopRightRadius:Tm},"& > .accordion-segment:last-of-type":{borderBottomLeftRadius:Tm,borderBottomRightRadius:Tm,marginBottom:0},"& > .accordion-segment:last-of-type .accordion-summary:not(.accordion-summary-expanded)":{borderBottomLeftRadius:Tm,borderBottomRightRadius:Tm},...l},...s,children:e})}:{value:{variant:r,color:a,size:o,spacing:i,dataTheme:p,dataSurface:m},children:le(h,{role:"presentation",className:"accordion-group accordion-group-"+r+" accordion-group-spaced "+n,sx:{display:"flex",flexDirection:"column",gap:.5===i?"var(--Sizing-Half)":1===i?"var(--Sizing-1)":1.5===i?"var(--Sizing-1-and-Half)":2===i?"var(--Sizing-2)":8*i+"px",...l},...s,children:e})})}function Am({children:e,expanded:t,defaultExpanded:a=!1,onChange:o,disabled:i=!1,className:l="",sx:s={},...d}){const[c,u]=r(a),p=void 0!==t,m=p?t:c,{dataTheme:f,dataSurface:g}=n(wm),[x]=r(()=>"accordion-"+Math.random().toString(36).substring(2,9));return le(Cm.Provider,{value:{expanded:m,toggle:()=>{if(i)return;const e=!m;p||u(e),o?.(e)},disabled:i,accordionId:x},children:le(h,{className:"accordion-segment accordion"+(m?" accordion-expanded":"")+(i?" accordion-disabled":"")+" "+l,"data-theme":f,"data-surface":g,sx:{border:"1px solid var(--Border-Variant)",borderRadius:Tm,backgroundColor:"var(--Background)",overflow:"hidden",boxShadow:io,opacity:i?"var(--Disabled, 0.38)":1,...s},...d,children:e})})}const Im={small:na,medium:da,large:ma},Rm={small:ia,medium:sa,large:pa};function Wm({children:e,startDecorator:r,endDecorator:t,eyebrow:a,overline:o,secondary:i,expandIcon:l,className:s="",sx:d={},...c}){const{expanded:u,toggle:p,disabled:m,accordionId:f}=n(Cm),{size:g}=n(wm),x=Bm[g]||Bm.medium,b=Im[g]||Im.medium,v=l||le(Oa,{size:x.iconSize,sx:{color:u?"var(--Text)":"var(--Quiet)",transition:"color 0.15s ease"},children:le(ve,{})}),y={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block"};return de(h,{component:"button",role:"button","aria-expanded":u,"aria-controls":f+"-content",id:f+"-header",tabIndex:m?-1:0,onClick:p,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),p())},className:"accordion-summary"+(u?" accordion-summary-expanded":"")+" "+s,sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",width:"100%",gap:x.gap,padding:x.summaryPadding,border:"none",backgroundColor:"transparent",color:u?"var(--Text)":"var(--Quiet)",fontFamily:"inherit",cursor:m?"not-allowed":"pointer",textAlign:"left",transition:"color 0.2s ease, background-color 0.15s ease",borderRadius:u?Tm+" "+Tm+" 0 0":Tm,"&:hover":m?{}:{color:"var(--Text)",backgroundColor:"var(--Hover)","& .omni-icon":{color:"var(--Text)"}},"&:active":m?{}:{color:"var(--Text)",backgroundColor:"var(--Pressed)","& .omni-icon":{color:"var(--Text)"}},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"},...d},...c,children:[r&&le(h,{className:"accordion-summary-start",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:r}),de(h,{sx:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)"},children:[(a??o)&&le(wa,{style:{...y,color:"var(--Text-Quiet)"},children:a??o}),null!=e&&le(b,{style:{...y,color:"inherit"},children:e}),i&&le(ia,{style:{...y,color:"var(--Text-Quiet)"},children:i})]}),t&&le(h,{className:"accordion-summary-end",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:t}),le(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",transform:u?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.25s ease",flexShrink:0},children:v})]})}function Dm({children:e,className:r="",sx:t={},...a}){const{expanded:o,accordionId:i}=n(Cm),{size:l}=n(wm),s=Bm[l]||Bm.medium,d=Rm[l]||Rm.medium;return o?le(h,{role:"region",id:i+"-content","aria-labelledby":i+"-header",className:"accordion-details "+r,sx:{padding:"0 "+s.detailsPx+" "+s.detailsPy+" "+s.detailsPx,color:"var(--Text)",fontFamily:"inherit",lineHeight:1.6,...t},...a,children:"string"==typeof e||"number"==typeof e?le(d,{children:e}):e}):null}const Pm={1:{padLeft:0,togglePadLeft:0},2:{padLeft:24,togglePadLeft:4},3:{padLeft:48,togglePadLeft:0},4:{padLeft:72,togglePadLeft:0},5:{padLeft:88,togglePadLeft:4}},Fm={0:{padLeft:8},1:{padLeft:48},2:{padLeft:56,slotPadLeft:4},3:{padLeft:64,slotPadLeft:4},4:{padLeft:88,slotPadLeft:4},5:{padLeft:112},6:{padLeft:128}};function Lm({label:e,icon:r,level:t=0,toggle:a="none",onToggle:o,disabled:i=!1,size:n="small",className:l="",sx:s={},children:d,...c}){const u=6===t&&"none"!==a?"none":a,p="on"===u,m="none"!==u,f=m?Pm[t]||{padLeft:0,togglePadLeft:0}:Fm[t]||Fm[0],g={paddingTop:"8px",paddingRight:"8px",paddingBottom:"8px",paddingLeft:(f.padLeft??8)+"px"};return de(h,{className:"tree-branch tree-branch-"+n+" tree-branch-level-"+t+" tree-branch-toggle-"+u+(i?" tree-branch-disabled":"")+(l?" "+l:""),sx:{width:"100%",...s},...c,children:[de(h,{component:"button",type:"button",role:"treeitem","aria-expanded":m?p:void 0,"aria-disabled":i||void 0,tabIndex:i?-1:0,onClick:e=>{i||m&&(e.stopPropagation(),o?.(p?"off":"on"))},disabled:i,sx:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px",width:"100%",minHeight:"24px",...g,border:"none",backgroundColor:"transparent",fontFamily:"inherit",color:"inherit",textAlign:"left",cursor:i?"not-allowed":"pointer",opacity:i?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.15s ease, color 0.15s ease","&:hover":i?{}:{backgroundColor:"var(--Hover)"},"&:active":i?{}:{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-2px"}},children:[m&&le(h,{className:"tree-branch-toggle",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,paddingLeft:(f.togglePadLeft??0)+"px"},children:le(h,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",transition:"transform 0.2s ease",transform:p?"rotate(-90deg)":"rotate(0deg)"},children:le(Oa,{size:"small",children:le(Ur,{})})})}),de(h,{className:"tree-branch-slot",sx:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px",flex:1,minWidth:0,...void 0!==f.slotPadLeft&&{paddingLeft:f.slotPadLeft+"px"}},children:[r&&le(h,{sx:{display:"inline-flex",alignItems:"center",flexShrink:0},children:le(Oa,{size:"small",children:r})}),null!=e&&le(na,{style:{color:"inherit",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block",flex:1,minWidth:0},children:e})]})]}),p&&d&&le(h,{role:"group",sx:{display:"flex",flexDirection:"column"},children:d})]})}const Hm=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Mm=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Em=e=>le(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:e,flexShrink:0}}),Nm=[{id:"1",label:"Documents",icon:le(tt,{}),badge:Em("var(--Warning-Text, orange)"),children:[{id:"1-1",label:"Company",icon:le(dt,{}),badge:Em("var(--Warning-Text, orange)"),children:[{id:"1-1-1",label:"Invoice",icon:le(ut,{})},{id:"1-1-2",label:"Meeting notes",icon:le(ct,{})},{id:"1-1-3",label:"Tasks list",icon:le(ct,{})},{id:"1-1-4",label:"Equipment",icon:le(ut,{})},{id:"1-1-5",label:"Video conference",icon:le(ht,{})}]},{id:"1-2",label:"Personal",icon:le(tt,{})},{id:"1-3",label:"Group photo",icon:le(jr,{})}]},{id:"2",label:"Bookmarked",icon:le(Kr,{}),children:[{id:"2-1",label:"Favourites",icon:le(ct,{})}]},{id:"3",label:"History",icon:le(tt,{})},{id:"4",label:"Trash",icon:le(ke,{}),disabled:!0}],Om=JSON.stringify(Zu,null,2);function Qm({ratio:e,threshold:r}){if(!e)return le(ga,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=r;return de(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:t?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:[e,":1"]}),le(ga,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Vm({label:e,ratio:r,threshold:t,note:a}){return de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(h,{sx:{flex:1},children:[le(ia,{style:{color:"var(--Text)"},children:e}),a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:a})]}),le(Qm,{ratio:r,threshold:t})]})}function jm({label:e,selected:r,onClick:t}){return le(Ao,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Gm({color:e,selected:r,onClick:t}){const a=Hm(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Um({value:e,onChange:t}){const[a,o]=r(e),[i,n]=r(null);return de(h,{children:[de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:1},children:[le(wa,{style:{color:"var(--Text-Quiet)"},children:"TREE DATA (JSON)"}),le(Ao,{variant:"ghost",size:"small",onClick:()=>{o(Om),n(null),t(Zu)},children:"Reset"})]}),le(h,{component:"textarea",value:a,onChange:e=>{o(e.target.value);try{const r=JSON.parse(e.target.value);n(null),t(r)}catch(e){n(e.message)}},spellCheck:!1,rows:10,sx:{width:"100%",fontFamily:"monospace",fontSize:"11px",backgroundColor:"#1e1e1e",color:i?"#f87171":"#e5e7eb",border:"1px solid "+(i?"#f87171":"#333"),borderRadius:"6px",padding:"10px",resize:"vertical",outline:"none",boxSizing:"border-box",lineHeight:1.5,"&:focus":{borderColor:"var(--Focus-Visible)"}}}),i&&de(ga,{style:{color:"#f87171",display:"block",marginTop:4},children:["JSON error: ",i]})]})}function Xm(){const[e,t]=r("solid"),[n,l]=r("primary"),[s,d]=r("default"),[c,u]=r("slide"),[p,m]=r("single"),[f,g]=r(!1),[x,b]=r(!1),[v,y]=r(!1),[S,B]=r(Zu),[w,T]=r(null),[z,A]=r("Surface"),[I,R]=r({}),W=a(null),D=Hm(n),P=v?Nm:S,F=o((e,r)=>e&&getComputedStyle(e).getPropertyValue(r).trim()||null,[]);i(()=>{const e=setTimeout(()=>{const e=W.current;R({text:F(e,"--Text"),textQuiet:F(e,"--Text-Quiet"),background:F(e,"--Background"),border:F(e,"--Border"),focusVisible:F(e,"--Focus-Visible"),activeBtn:F(e,"--Buttons-"+D+"-Button"),activeBorder:F(e,"--Buttons-"+D+"-Border")})},50);return()=>clearTimeout(e)},[n,w,F,D]);return de(h,{sx:{pb:8},children:[le(qt,{children:"Tree View"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(ui,{ref:W,theme:w,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(qu,{color:n,variant:e,density:s,animation:c,selectionMode:p,checkboxSelection:f,disableSelection:x,items:P,defaultExpandedItems:["1","1-1","2"]})})}),le(ji,{code:(()=>{const r=["<OmniTreeView"];return"default"!==n&&r.push(' color="'+n+'"'),"default"!==e&&r.push(' variant="'+e+'"'),"default"!==s&&r.push(' density="'+s+'"'),"slide"!==c&&r.push(' animation="'+c+'"'),"single"!==p&&r.push(' selectionMode="'+p+'"'),f&&r.push(" checkboxSelection"),x&&r.push(" disableSelection"),r.push(" items={treeData}"),r.push("/>"),r.join("\n")})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(li,{defaultValue:0,variant:"standard",color:"primary",children:[de(si,{children:[le(di,{children:"Playground"}),le(di,{children:"Accessibility"})]}),le(ci,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(fi,{theme:w,onThemeChange:T,surface:z,onSurfaceChange:A})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(k,{direction:"row",spacing:1,children:[le(jm,{label:"Solid",selected:"solid"===e,onClick:()=>t("solid")}),le(jm,{label:"Light",selected:"light"===e,onClick:()=>t("light")})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Mm.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Gm,{color:e,selected:n===e,onClick:l},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DENSITY"}),de(k,{direction:"row",spacing:1,children:[le(jm,{label:"Compact",selected:"compact"===s,onClick:()=>d("compact")}),le(jm,{label:"Default",selected:"default"===s,onClick:()=>d("default")})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANIMATION"}),le(k,{direction:"row",spacing:1,children:["none","slide","spring"].map(e=>le(jm,{label:Hm(e),selected:c===e,onClick:()=>u(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SELECTION MODE"}),de(k,{direction:"row",spacing:1,children:[le(jm,{label:"Single",selected:"single"===p,onClick:()=>m("single")}),le(jm,{label:"Multi",selected:"multi"===p,onClick:()=>m("multi")})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Icons"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Load sample data with icons and badges"})]}),le(an,{checked:v,onChange:e=>y(e.target.checked),size:"small","aria-label":"Show icons"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Checkbox Selection"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show checkboxes for each item"})]}),le(an,{checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Checkbox selection"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disable Selection"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Items are not selectable"})]}),le(an,{checked:x,onChange:e=>b(e.target.checked),size:"small","aria-label":"Disable selection"})]})]}),!v&&le(h,{sx:{mt:3},children:le(Um,{value:Om,onChange:B})})]})}),le(ci,{value:1,children:le(h,{sx:{p:3},children:de(k,{spacing:3,children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(Vm,{label:"Resting: var(--Text-Quiet) vs. background",ratio:Yi(I.textQuiet,I.background),threshold:4.5,note:"Unselected items use Text-Quiet"}),le(Vm,{label:"Hover: var(--Text) vs. background",ratio:Yi(I.text,I.background),threshold:4.5,note:"Hovered items use var(--Text)"}),le(Vm,{label:"Active (solid): var(--Text) vs. var(--Buttons-"+D+"-Button)",ratio:Yi(I.text,I.activeBtn),threshold:4.5,note:"Selected item with solid fill"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(Vm,{label:"var(--Focus-Visible) vs. background",ratio:Yi(I.focusVisible,I.background),threshold:3,note:"outline: 2px solid var(--Focus-Visible); outline-offset: -2px"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="tree" on root, role="treeitem" on each node'},{label:"Expansion",value:'aria-expanded="true/false" on parent items'},{label:"Selection",value:"aria-selected on selected items"},{label:"Disabled",value:'aria-disabled="true" on disabled items'},{label:"Icons",value:"Icon elements are aria-hidden — label carries the accessible name"},{label:"Keyboard",value:"Arrow keys navigate, Enter/Space selects, * expands all siblings"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(ia,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})]})})})]})})})]})]})}function Ym(e,r){if(document.getElementById(r))return;const t=document.createElement("link");t.rel="stylesheet",t.href=e,t.id=r,document.head.appendChild(t)}const qm=[{value:"desktop",label:"Desktop",note:"32px touch targets (WCAG)"},{value:"ios-mobile",label:"iOS Mobile",note:"44px touch targets (HIG)"},{value:"ios-tablet",label:"iOS Tablet",note:"44px touch targets (HIG)"},{value:"android",label:"Android",note:"48px touch targets (M3)"}],Zm={desktop:"32px","ios-mobile":"44px","ios-tablet":"44px",android:"48px"};function Jm(){const{mode:e,switchMode:t}=function(e="light"){const[t,a]=r(e);return i(()=>{Ym("/styles/foundation.css","css-foundation"),Ym("/styles/core.css","css-core"),Ym("/styles/Light-Mode.css","css-mode"),Ym("/styles/base.css","css-base"),Ym("/styles/typography-tokens.css","css-typography-tokens")},[]),{mode:t,switchMode:e=>{const r=document.getElementById("css-mode");r&&(r.href="dark"===e?"/styles/Dark-Mode.css":"/styles/Light-Mode.css"),a(e),localStorage.setItem("themeMode",e)}}}("light"),[a,o]=r(!1),[n,l]=r("desktop");i(()=>{const e=localStorage.getItem("dino-platform")||"desktop",r=localStorage.getItem("themeMode")||"light";l(e),document.documentElement.style.setProperty("--Button-Height",Zm[e]||"32px"),"dark"===r&&t("dark")},[]);const s=e=>{l(e),localStorage.setItem("dino-platform",e),document.documentElement.style.setProperty("--Button-Height",Zm[e]||"32px")};return de(se,{children:[le(h,{onClick:()=>o(!0),role:"button","aria-label":"Open settings",sx:{position:"fixed",bottom:24,right:24,width:52,height:52,borderRadius:"50%",backgroundColor:"var(--Buttons-Tertiary-Button)",color:"var(--Buttons-Tertiary-Text)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",boxShadow:"0 4px 12px rgba(0,0,0,0.15)",zIndex:999,transition:"transform 0.15s ease, box-shadow 0.15s ease","&:hover":{transform:"scale(1.08)",boxShadow:"0 6px 16px rgba(0,0,0,0.2)"}},children:le(Ar,{sx:{fontSize:24}})}),le(Eu,{anchor:"right",open:a,onClose:()=>o(!1),hideBackdrop:!0,size:"small",sx:{width:320,zIndex:99999999},children:de(h,{sx:{p:3,height:"100%",display:"flex",flexDirection:"column"},children:[de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:2},children:[le(Jt,{children:"Settings"}),le(Ao,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>o(!1),"aria-label":"Close settings",children:le(Ir,{fontSize:"small"})})]}),le(re,{sx:{mb:3,borderColor:"var(--Border)"}}),le(h,{sx:{flex:1,overflowY:"auto"},children:de(k,{spacing:4,children:[de(h,{children:[le(wa,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"MODE"}),de(k,{direction:"row",spacing:1,children:[le(Ao,{variant:"light"===e?"primary":"primary-outline",size:"small",onClick:()=>t("light"),sx:{flex:1},children:"Light"}),le(Ao,{variant:"dark"===e?"primary":"primary-outline",size:"small",onClick:()=>t("dark"),sx:{flex:1},children:"Dark"})]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"PLATFORM"}),le(k,{spacing:1,children:qm.map(({value:e,label:r,note:t})=>{const a=n===e;return de(h,{onClick:()=>s(e),sx:{p:1.5,borderRadius:"var(--Style-Border-Radius)",cursor:"pointer",border:a?"2px solid var(--Buttons-Primary-Button)":"1px solid var(--Border)",backgroundColor:a?"var(--Background)":"transparent",display:"flex",justifyContent:"space-between",alignItems:"center",transition:"all 0.15s ease","&:hover":{backgroundColor:"var(--Hover)"}},children:[de(h,{children:[le(ia,{style:{color:a?"var(--Buttons-Primary-Button)":"var(--Text)",fontWeight:a?600:400},children:r}),le(ga,{style:{color:"var(--Text)",opacity:.7},children:t})]}),a&&le(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Buttons-Primary-Button)",flexShrink:0}})]},e)})})]})]})}),le(re,{sx:{my:3,borderColor:"var(--Border)"}}),le(Ao,{variant:"primary-outline",size:"small",onClick:()=>{s("desktop"),t("light")},sx:{width:"100%"},children:"Reset to Defaults"})]})})]})}const Km=e=>(e||[]).map(e=>{const r="number"==typeof e?e:Number(e?.value);return Number.isFinite(r)?r:0}),$m=e=>(e||[]).map((e,r)=>"number"==typeof e?String(r+1):e?.label??String(r+1));function _m(e,{fromZero:r=!0}={}){if(!e.length)return{min:0,max:1};let t=Math.min(...e),a=Math.max(...e);return r&&(t=Math.min(0,t)),a===t&&(a=t+1),{min:t,max:a}}const ef=(e,{min:r,max:t},a,o)=>a+o-(e-r)/(t-r)*o;function rf(e,r,t,{inset:a=0}={}){if(e<=0)return[];if(1===e)return[r+t/2];const o=(t-2*a)/(e-1);return Array.from({length:e},(e,t)=>r+a+t*o)}function tf(e,r,t,{gapRatio:a=.4}={}){if(e<=0)return{centres:[],bandWidth:0};const o=t/e,i=o*(1-a);return{centres:Array.from({length:e},(e,t)=>r+o*t+o/2),bandWidth:i}}const af=e=>e.length?e.map((e,r)=>`${r?"L":"M"}${e.x} ${e.y}`).join(" "):"";function of(e,{tension:r=0}={}){if(e.length<2)return af(e);const t=(1-r)/6;let a=`M${e[0].x} ${e[0].y}`;for(let r=0;r<e.length-1;r++){const o=e[r-1]||e[r],i=e[r],n=e[r+1],l=e[r+2]||n,s={x:i.x+(n.x-o.x)*t,y:i.y+(n.y-o.y)*t},d={x:n.x-(l.x-i.x)*t,y:n.y-(l.y-i.y)*t};a+=` C${s.x} ${s.y} ${d.x} ${d.y} ${n.x} ${n.y}`}return a}const nf=(e,r,t)=>e&&r.length?`${e} L${r[r.length-1].x} ${t} L${r[0].x} ${t} Z`:"";function lf(e,r,t,a,o,i){const n=i-o;if(n>=2*Math.PI-1e-9){const i=o+Math.PI;return lf(e,r,t,a,o,i)+" "+lf(e,r,t,a,i,o+2*Math.PI)}const l=(t,a)=>({x:e+t*Math.sin(a),y:r-t*Math.cos(a)}),s=n>Math.PI?1:0,d=l(a,o),c=l(a,i);if(t<=0)return`M${e} ${r} L${d.x} ${d.y} A${a} ${a} 0 ${s} 1 ${c.x} ${c.y} Z`;const u=l(t,i),h=l(t,o);return`M${d.x} ${d.y} A${a} ${a} 0 ${s} 1 ${c.x} ${c.y} L${u.x} ${u.y} A${t} ${t} 0 ${s} 0 ${h.x} ${h.y} Z`}function sf(e,{startAngle:r=0}={}){const t=e.map(e=>e>0?e:0),a=t.reduce((e,r)=>e+r,0),o=e.filter(e=>e<=0).length;if(a<=0)return{slices:[],total:0,dropped:o};let i=r;return{slices:t.map(e=>{const r=e/a*Math.PI*2,t={start:i,end:i+r,value:e,fraction:e/a};return i+=r,t}),total:a,dropped:o}}function df({min:e,max:r},t=4){if(t<1)return[];const a=(r-e)/t,o=Math.pow(10,Math.floor(Math.log10(Math.abs(a)||1))),i=[1,2,2.5,5,10].map(e=>e*o).find(e=>e>=a)??10*o,n=[];for(let t=Math.ceil(e/i)*i;t<=r+1e-9;t+=i)n.push(Number(t.toFixed(10)));return n}var cf=Object.freeze({__proto__:null,arcPath:lf,areaPath:nf,bands:rf,extent:_m,linePath:af,scaleY:ef,sliceAngles:sf,slots:tf,smoothPath:of,ticks:df,toLabels:$m,toNumbers:Km});const uf={fill:"var(--Icons-Primary)",track:"var(--Border-Variant)",line:"var(--Border-Variant)",quietLabel:"var(--Quiet)",label:"var(--Text)",gradient:"var(--Icons-Primary-Variant)"},hf=["Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error"],pf={fontFamily:"var(--Label-Small-Font-Family)",fontSize:"var(--Label-Small-Font-Size)",fontWeight:"var(--Label-Small-Font-Weight)",letterSpacing:"var(--Label-Small-Letter-Spacing)"},mf={position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0 0 0 0)",clipPath:"inset(50%)",whiteSpace:"nowrap",border:0};function ff({caption:e,labels:r,values:t,valueHeader:a="Value"}){return de(h,{component:"table",sx:mf,children:[le("caption",{children:e}),le("thead",{children:de("tr",{children:[le("th",{scope:"col",children:"Category"}),le("th",{scope:"col",children:a})]})}),le("tbody",{children:t.map((e,t)=>de("tr",{children:[le("th",{scope:"row",children:r[t]}),le("td",{children:e})]},t))})]})}const gf="var(--Motion-Duration-Slow, 300ms) var(--Motion-Easing-Enter, cubic-bezier(0, 0, 0, 1))",xf="var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))";function bf(r){const[t,a]=e.useState(-1),o=e.useCallback(e=>({onMouseEnter:()=>a(e),onMouseLeave:()=>a(r=>r===e?-1:r),onFocus:()=>a(e),onBlur:()=>a(r=>r===e?-1:r)}),[]);return e.useEffect(()=>{a(e=>e>=r?-1:e)},[r]),{active:t,setActive:a,handlers:o}}function vf({count:e,width:r,centres:t,bandWidth:a,labels:o,values:i,handlers:n}){return e?le(h,{sx:{position:"absolute",inset:0,display:"block",pointerEvents:"none"},children:Array.from({length:e},(e,l)=>le(h,{component:"button",type:"button","aria-label":`${o[l]}: ${i[l]}`,...n(l),sx:{position:"absolute",top:0,height:"100%",left:(t[l]-a/2)/r*100+"%",width:a/r*100+"%",padding:0,margin:0,border:0,background:"transparent",cursor:"pointer",pointerEvents:"auto","&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"-2px",borderRadius:"4px"}}},l))}):null}function yf({x:e,y:r,text:t,width:a,tokens:o}){if(null==t)return null;const i=Math.max(28,8*String(t).length+14),n=Math.min(Math.max(e,i/2+2),a-i/2-2),l=r-26>=2?r-26:r+6;return de("g",{pointerEvents:"none",children:[le("rect",{x:n-i/2,y:l,width:i,height:20,rx:6,fill:o.fill}),le("text",{x:n,y:l+14,textAnchor:"middle",fill:"var(--Icons-On-Primary)",style:{fontFamily:"var(--Label-Small-Font-Family)",fontSize:"var(--Label-Small-Font-Size)",fontWeight:"var(--Label-Small-Font-Weight)"},children:t})]})}function Sf({data:e=[],showTrack:t=!0,rounded:a=!0,showValues:o=!1,showLabels:n=!0,animate:l=!0,interactive:s=!0,height:d=200,gapRatio:c=.4,label:u,className:p="",sx:m={},...f}){const g=Km(e),x=$m(e),{active:b,handlers:v}=bf(g.length),[y,S]=r(!l);i(()=>{if(!l)return;const e=requestAnimationFrame(()=>S(!0));return()=>cancelAnimationFrame(e)},[l]);const k=320,B=o?20:8,w=n?22:8,C=Math.max(0,d-B-w),T=_m(g,{fromZero:!0}),{centres:z,bandWidth:A}=tf(g.length,0,k,{gapRatio:c}),I=B+C,R=a?A/2:0,W=g.length?k/g.length:0;return de(h,{component:"figure",className:"bar-chart "+p,sx:{display:"block",width:"100%",m:0,position:"relative",...m},...f,children:[de("svg",{viewBox:`0 0 320 ${d}`,width:"100%",height:d,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[s&&b>=0&&le("rect",{x:z[b]-W/2,y:0,width:W,height:d,fill:"var(--Hover)",rx:6}),g.map((e,r)=>{const a=z[r]-A/2,o=ef(e,T,B,C),i=Math.max(0,I-o);return de("g",{children:[t&&le("rect",{x:a,y:B,width:A,height:C,rx:R,ry:R,fill:uf.track}),i>0&&le("rect",{x:a,y:o,width:A,height:i,rx:Math.min(R,i/2),ry:Math.min(R,i/2),fill:uf.fill,style:{transformBox:"fill-box",transformOrigin:"bottom",transform:y?"scaleY(1)":"scaleY(0)",transition:`transform ${gf}`}})]},r)}),o&&g.map((e,r)=>le("text",{x:z[r],y:ef(e,T,B,C)-6,textAnchor:"middle",fill:uf.label,...pf,children:e},"v"+r)),n&&x.map((e,r)=>le("text",{x:z[r],y:d-6,textAnchor:"middle",fill:uf.quietLabel,...pf,children:e},"l"+r)),s&&b>=0&&!o&&le(yf,{x:z[b],y:ef(g[b],T,B,C),text:g[b],width:k,tokens:uf})]}),s&&le(vf,{count:g.length,width:k,centres:z,bandWidth:W,labels:x,values:g,handlers:v}),le(ff,{caption:u||`Bar chart, ${g.length} values`,labels:x,values:g})]})}function kf({data:e=[],curve:a="smooth",gradient:o=!0,fromZero:n=!1,showGrid:l=!1,showLabels:s=!1,animate:d=!0,interactive:c=!0,height:u=200,strokeWidth:p=3,tension:m=0,label:f,className:g="",sx:x={},...b}){const v="lc-"+t().replace(/:/g,""),y=Km(e),S=$m(e),{active:k,handlers:B}=bf(y.length),[w,C]=r(!d);i(()=>{if(!d)return;const e=requestAnimationFrame(()=>C(!0));return()=>cancelAnimationFrame(e)},[d]);const T=320,z=s?22:8,A=Math.max(0,u-8-z),I=_m(y,{fromZero:n}),R=rf(y.length,0,T,{inset:p}),W=y.map((e,r)=>({x:R[r],y:ef(e,I,8,A)})),D="straight"===a?af(W):of(W,{tension:m}),P=8+A;return de(h,{component:"figure",className:"line-chart "+g,sx:{display:"block",width:"100%",m:0,position:"relative",...x},...b,children:[de("svg",{viewBox:`0 0 320 ${u}`,width:"100%",height:u,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[o&&le("defs",{children:de("linearGradient",{id:v,x1:"0",y1:"0",x2:"0",y2:"1",children:[le("stop",{offset:"0%",stopColor:uf.gradient,stopOpacity:"1"}),le("stop",{offset:"100%",stopColor:uf.gradient,stopOpacity:"0"})]})}),l&&df(I,4).map(e=>le("line",{x1:0,x2:T,y1:ef(e,I,8,A),y2:ef(e,I,8,A),stroke:uf.line,strokeWidth:"1"},e)),o&&W.length>1&&le("path",{d:nf(D,W,P),fill:`url(#${v})`,style:{opacity:w?1:0,transition:`opacity ${gf}`}}),W.length>1&&le("path",{d:D,fill:"none",stroke:uf.fill,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",pathLength:"1",style:{strokeDasharray:1,strokeDashoffset:w?0:1,transition:`stroke-dashoffset ${gf}`}}),1===W.length&&le("circle",{cx:W[0].x,cy:W[0].y,r:p,fill:uf.fill}),c&&k>=0&&de(se,{children:[le("line",{x1:R[k],x2:R[k],y1:8,y2:P,stroke:uf.line,strokeWidth:"1"}),le("circle",{cx:W[k].x,cy:W[k].y,r:p+1,fill:uf.fill,stroke:"var(--Background)",strokeWidth:"2"}),le(yf,{x:W[k].x,y:W[k].y,text:y[k],width:T,tokens:uf})]}),s&&S.map((e,r)=>le("text",{x:R[r],y:u-6,textAnchor:"middle",fill:uf.quietLabel,...pf,children:e},r))]}),c&&le(vf,{count:y.length,width:T,centres:R,bandWidth:y.length?T/y.length:0,labels:S,values:y,handlers:B}),le(ff,{caption:f||`Line chart, ${y.length} points`,labels:S,values:y})]})}function Bf({data:e=[],donut:t=!1,donutRatio:a=.6,colors:o=hf,separatorWidth:n=2,size:l=200,showLabels:s=!1,animate:d=!0,interactive:c=!0,label:u,className:p="",sx:m={},...f}){const g=Km(e),x=$m(e),{slices:b,total:v,dropped:y}=sf(g),{active:S,handlers:k}=bf(g.length),[B,w]=r(!d);i(()=>{if(!d)return;const e=requestAnimationFrame(()=>w(!0));return()=>cancelAnimationFrame(e)},[d]);const C=l/2,T=l/2,z=l/2-1,A=t?z*a:0,I=e=>{return{fill:`var(--Icons-${r=o[e%o.length]})`,onFill:`var(--Icons-On-${r})`};var r};return de(h,{component:"figure",className:"pie-chart "+p,sx:{display:"block",m:0,position:"relative",...m},...f,children:[de("svg",{viewBox:`0 0 ${l} ${l}`,width:l,height:l,focusable:"false","aria-hidden":"true",children:[b.map((e,r)=>{const t=(e.start+e.end)/2,a=c&&S===r?4:0;return le("path",{d:lf(C,T,A,z,e.start,e.end),fill:I(r).fill,stroke:"var(--Background)",strokeWidth:n,strokeLinejoin:"round",...c?k(r):{},style:{transform:`translate(${a*Math.sin(t)}px, ${-a*Math.cos(t)}px) scale(${B?1:0})`,transformOrigin:`${C}px ${T}px`,transformBox:"view-box",transition:`transform ${B?xf:gf}`}},r)}),s&&b.map((e,r)=>{const t=(e.start+e.end)/2,a=A+.62*(z-A);return e.fraction<.07?null:le("text",{x:C+a*Math.sin(t),y:T-a*Math.cos(t),textAnchor:"middle",dominantBaseline:"middle",fill:I(r).onFill,...pf,children:x[r]},r)})]}),le(ff,{caption:(u||`${t?"Donut":"Pie"} chart, ${b.length} segments`)+(y?`, ${y} non-positive values omitted`:""),labels:x,values:g})]})}const wf={empty:{icon:le(pt,{}),iconColor:"quiet",titleColor:"header",role:void 0},"no-results":{icon:le(mt,{}),iconColor:"quiet",titleColor:"header",role:void 0},error:{icon:le(ft,{}),iconColor:"error",titleColor:"error",role:"alert"}},Cf={small:{icon:"medium",pad:"24px 16px",gap:"8px",maxWidth:"36ch"},medium:{icon:"large",pad:"48px 24px",gap:"12px",maxWidth:"40ch"},large:{icon:"large",pad:"80px 24px",gap:"16px",maxWidth:"44ch"}};function Tf({type:e="empty",icon:r,title:a,body:o,action:i,size:n="medium",className:l="",sx:s={},...d}){const c=wf[e]||wf.empty,u=Cf[n]||Cf.medium,p="small"===n?ia:sa,m=t(),f=a?m+"-title":void 0,g=o?m+"-body":void 0;return"production"===process.env.NODE_ENV||a||console.warn("[StateMessage] needs a `title`. A state message with no words is an empty box, which is the thing it exists to replace."),de(h,{className:"state-message state-message-"+e+" state-message-"+n+" "+l,role:c.role||"group","aria-labelledby":f,"aria-describedby":g,sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",gap:u.gap,padding:u.pad,width:"100%",boxSizing:"border-box",...s},...d,children:[le(Oa,{size:u.icon,color:c.iconColor,"aria-hidden":"true",children:r||c.icon}),a&&le(ea,{id:f,color:c.titleColor,children:a}),o&&le(p,{id:g,color:"quiet",sx:{maxWidth:u.maxWidth},children:o}),i&&le(h,{sx:{marginTop:"4px"},children:i})]})}var zf={};export{Am as Accordion,Dm as AccordionDetails,zm as AccordionGroup,Wm as AccordionSummary,ih as Alert,wu as AlertDialog,uh as AlertShowcase,vp as AppBar,Ap as AppBarShowcase,os as Autocomplete,cs as AutocompleteShowcase,Ua as Avatar,Xa as AvatarGroup,jh as AvatarShowcase,eo as Badge,Jh as BadgeShowcase,Sf as BarChart,hm as BevelText,xm as BevelTextShowcase,Ll as BlackWhiteToggleButtonGroup,sa as Body,ua as Body1,ha as Body2,ca as BodyBold,pa as BodyLarge,fa as BodyLargeBold,ma as BodyLargeSemibold,da as BodySemibold,ia as BodySmall,la as BodySmallBold,na as BodySmallSemibold,sc as BottomNavigation,Sc as BottomNavigationShowcase,$s as Box,td as BoxShowcase,zd as BreadcrumbItem,Td as Breadcrumbs,Rd as BreadcrumbsShowcase,Ao as Button,vn as ButtonGroup,Ha as ButtonSmall,Ma as ButtonText,Vt as CAP_HEIGHT_TRIM,pf as CHART_LABEL_TYPE,uf as CHART_TOKENS,ga as Caption,xa as CaptionBold,Mn as Card,Cn as CenteredStack,Qo as Checkbox,Os as Chip,kh as CircularProgress,zh as CircularProgressShowcase,ji as CodeBlock,Ji as Colors,ad as Container,Vi as CopyButton,Rp as Copyright,Zp as CopyrightShowcase,om as CurvedText,cm as CurvedTextShowcase,Qa as DEFAULT_AVATAR_SRC,Zu as DEFAULT_ITEMS,Rl as DefaultToggleButtonGroup,xp as DesktopAppBar,Bu as Dialog,zu as DialogShowcase,jt as DisplayLarge,Gt as DisplayMedium,Ut as DisplaySmall,rp as Divider,Eu as Drawer,Nu as DrawerClose,Qu as DrawerContent,Ou as DrawerHeader,rh as DrawerShowcase,ah as DropZone,Gd as Dropdown,kn as DynoStack,qu as DynoTreeView,Ql as EmailTextField,Nl as ErrorToggleButtonGroup,Ca as Eyebrow,za as EyebrowLarge,Ta as EyebrowMedium,wa as EyebrowSmall,Xn as Fab,_n as FabShowcase,Dp as Footer,Xp as FooterShowcase,Cu as FormDialog,vt as Ghost,Uc as Gradient,od as Grid,Rn as GridStack,Xt as H1,Yt as H2,qt as H3,Zt as H4,Jt as H5,Kt as H6,Bn as HStack,$t as Heading,Oa as Icon,bn as IconBadge,jn as IconBadgeShowcase,fn as IconShowcase,Hl as InfoToggleButtonGroup,Dn as InsetStack,ya as Label,ba as LabelExtraSmall,Sa as LabelLarge,va as LabelSmall,ka as Legal,Ba as LegalSemibold,Ku as LightTreeView,kf as LineChart,Xc as LinearGradient,Rh as LinearProgress,Lh as LinearProgressShowcase,Gs as Link,lp as List,np as ListItem,ip as ListItemDecorator,km as MainLayout,Xd as Menu,Ud as MenuButton,qd as MenuDivider,Yd as MenuItem,_d as MenuShowcase,Zc as MeshCardGradient,qc as MeshGradient,bp as MobileAppBar,Pu as Modal,Fl as NeutralToggleButtonGroup,xl as NumberField,kl as NumberFieldShowcase,Fa as NumberLarge,Pa as NumberMedium,Da as NumberSmall,Gl as NumberTextField,uu as OmniDesignProvider,kn as OmniStack,qu as OmniTreeView,Ia as Overline,Wa as OverlineLarge,Ra as OverlineMedium,Aa as OverlineSmall,Dd as Pagination,Md as PaginationShowcase,Jc as Paper,Vl as PasswordTextField,Ul as PhoneTextField,Bf as PieChart,Kc as Popover,Wl as PrimaryToggleButtonGroup,ld as RATIO_NAMES,Yc as RadialGradient,fs as Radio,gs as RadioGroup,xs as RadioInput,ol as Rail,dl as RailShowcase,ks as RangeSlider,Cs as Rating,Cs as RatingInput,ud as Ratio,bd as RatioShowcase,An as ResponsiveStack,Pn as ScrollStack,zs as SearchField,Ds as SearchFieldShowcase,jl as SearchTextField,Dl as SecondaryToggleButtonGroup,id as Section,nd as SectionShowcase,ei as Select,rs as SelectShowcase,Nn as SelectableCard,Jm as SettingsPanel,Sm as Sidebar,Ss as Slider,Ss as SliderInput,ph as Snackbar,vh as SnackbarShowcase,Ju as SolidTreeView,Tn as SpaceBetweenStack,Ki as Spacing,Fc as SpeedDial,Oc as SpeedDialShowcase,In as Stack,Wn as StackDivider,Js as StackShowcase,Tf as StateMessage,zc as Step,Tc as Stepper,Pc as StepperShowcase,ea as Subtitle,aa as Subtitle1,oa as Subtitle2,_t as SubtitleLarge,ta as SubtitleMedium,ra as SubtitleSmall,Ml as SuccessToggleButtonGroup,mu as Surfaced,on as Switch,on as SwitchInput,di as Tab,si as TabList,ci as TabPanel,cp as Table,li as Tabs,wd as TabsShowcase,Pl as TertiaryToggleButtonGroup,Yl as TextArea,Ol as TextField,ql as TextFieldGroup,Jo as TextInput,pu as ThemedZone,wl as ToggleButton,Il as ToggleButtonGroup,ul as Toolbar,fl as ToolbarShowcase,mp as Tooltip,Lm as TreeBranch,Xm as TreeViewShowcase,Qt as Typography,Xl as URLTextField,wn as VStack,El as WarningToggleButtonGroup,zn as WrapStack,cf as chartGeometry,zf as default,bt as ghostBlockSx,xt as useGhost,hu as useOmniDesign,Cc as useStepperContext,ni as useTabsContext};
14
+ */function Uo(){if(Do)return Ro;Do=1;var e=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;return Ro=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(r).map(function(e){return r[e]}).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach(function(e){a[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(e){return!1}}()?Object.assign:function(a,i){for(var o,n,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(a),s=1;s<arguments.length;s++){for(var d in o=Object(arguments[s]))r.call(o,d)&&(l[d]=o[d]);if(e){n=e(o);for(var c=0;c<n.length;c++)t.call(o,n[c])&&(l[n[c]]=o[n[c]])}}return l},Ro}function Xo(){if(Fo)return Po;Fo=1;return Po="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}function Yo(){return Ho?Lo:(Ho=1,Lo=Function.call.bind(Object.prototype.hasOwnProperty))}if("production"!==process.env.NODE_ENV){var Zo=Go();To.exports=function(){if(Oo)return No;Oo=1;var e=Go(),r=Uo(),t=Xo(),a=Yo(),i=function(){if(Eo)return Mo;Eo=1;var e=function(){};if("production"!==process.env.NODE_ENV){var r=Xo(),t={},a=Yo();e=function(e){var r="Warning: "+e;"undefined"!=typeof console&&console.error(r);try{throw new Error(r)}catch(e){}}}function i(i,o,n,l,s){if("production"!==process.env.NODE_ENV)for(var d in i)if(a(i,d)){var c;try{if("function"!=typeof i[d]){var u=Error((l||"React class")+": "+n+" type `"+d+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof i[d]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw u.name="Invariant Violation",u}c=i[d](o,d,l,n,null,r)}catch(e){c=e}if(!c||c instanceof Error||e((l||"React class")+": type specification of "+n+" `"+d+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof c+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),c instanceof Error&&!(c.message in t)){t[c.message]=!0;var h=s?s():"";e("Failed "+n+" type: "+c.message+(null!=h?h:""))}}}return i.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(t={})},Mo=i}(),o=function(){};function n(){return null}return"production"!==process.env.NODE_ENV&&(o=function(e){var r="Warning: "+e;"undefined"!=typeof console&&console.error(r);try{throw new Error(r)}catch(e){}}),No=function(l,s){var d="function"==typeof Symbol&&Symbol.iterator,c="<<anonymous>>",u={array:f("array"),bigint:f("bigint"),bool:f("boolean"),func:f("function"),number:f("number"),object:f("object"),string:f("string"),symbol:f("symbol"),any:m(n),arrayOf:function(e){return m(function(r,a,i,o,n){if("function"!=typeof e)return new p("Property `"+n+"` of component `"+i+"` has invalid PropType notation inside arrayOf.");var l=r[a];if(!Array.isArray(l))return new p("Invalid "+o+" `"+n+"` of type `"+b(l)+"` supplied to `"+i+"`, expected an array.");for(var s=0;s<l.length;s++){var d=e(l,s,i,o,n+"["+s+"]",t);if(d instanceof Error)return d}return null})},element:m(function(e,r,t,a,i){var o=e[r];return l(o)?null:new p("Invalid "+a+" `"+i+"` of type `"+b(o)+"` supplied to `"+t+"`, expected a single ReactElement.")}),elementType:m(function(r,t,a,i,o){var n=r[t];return e.isValidElementType(n)?null:new p("Invalid "+i+" `"+o+"` of type `"+b(n)+"` supplied to `"+a+"`, expected a single ReactElement type.")}),instanceOf:function(e){return m(function(r,t,a,i,o){if(!(r[t]instanceof e)){var n=e.name||c;return new p("Invalid "+i+" `"+o+"` of type `"+((l=r[t]).constructor&&l.constructor.name?l.constructor.name:c)+"` supplied to `"+a+"`, expected instance of `"+n+"`.")}var l;return null})},node:m(function(e,r,t,a,i){return x(e[r])?null:new p("Invalid "+a+" `"+i+"` supplied to `"+t+"`, expected a ReactNode.")}),objectOf:function(e){return m(function(r,i,o,n,l){if("function"!=typeof e)return new p("Property `"+l+"` of component `"+o+"` has invalid PropType notation inside objectOf.");var s=r[i],d=b(s);if("object"!==d)return new p("Invalid "+n+" `"+l+"` of type `"+d+"` supplied to `"+o+"`, expected an object.");for(var c in s)if(a(s,c)){var u=e(s,c,o,n,l+"."+c,t);if(u instanceof Error)return u}return null})},oneOf:function(e){return Array.isArray(e)?m(function(r,t,a,i,o){for(var n=r[t],l=0;l<e.length;l++)if(h(n,e[l]))return null;var s=JSON.stringify(e,function(e,r){return"symbol"===v(r)?String(r):r});return new p("Invalid "+i+" `"+o+"` of value `"+String(n)+"` supplied to `"+a+"`, expected one of "+s+".")}):("production"!==process.env.NODE_ENV&&o(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),n)},oneOfType:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&o("Invalid argument supplied to oneOfType, expected an instance of array."),n;for(var r=0;r<e.length;r++){var i=e[r];if("function"!=typeof i)return o("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+y(i)+" at index "+r+"."),n}return m(function(r,i,o,n,l){for(var s=[],d=0;d<e.length;d++){var c=(0,e[d])(r,i,o,n,l,t);if(null==c)return null;c.data&&a(c.data,"expectedType")&&s.push(c.data.expectedType)}return new p("Invalid "+n+" `"+l+"` supplied to `"+o+"`"+(s.length>0?", expected one of type ["+s.join(", ")+"]":"")+".")})},shape:function(e){return m(function(r,a,i,o,n){var l=r[a],s=b(l);if("object"!==s)return new p("Invalid "+o+" `"+n+"` of type `"+s+"` supplied to `"+i+"`, expected `object`.");for(var d in e){var c=e[d];if("function"!=typeof c)return g(i,o,n,d,v(c));var u=c(l,d,i,o,n+"."+d,t);if(u)return u}return null})},exact:function(e){return m(function(i,o,n,l,s){var d=i[o],c=b(d);if("object"!==c)return new p("Invalid "+l+" `"+s+"` of type `"+c+"` supplied to `"+n+"`, expected `object`.");var u=r({},i[o],e);for(var h in u){var m=e[h];if(a(e,h)&&"function"!=typeof m)return g(n,l,s,h,v(m));if(!m)return new p("Invalid "+l+" `"+s+"` key `"+h+"` supplied to `"+n+"`.\nBad object: "+JSON.stringify(i[o],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var f=m(d,h,n,l,s+"."+h,t);if(f)return f}return null})}};function h(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}function p(e,r){this.message=e,this.data=r&&"object"==typeof r?r:{},this.stack=""}function m(e){if("production"!==process.env.NODE_ENV)var r={},a=0;function i(i,n,l,d,u,h,m){if(d=d||c,h=h||l,m!==t){if(s){var f=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw f.name="Invariant Violation",f}if("production"!==process.env.NODE_ENV&&"undefined"!=typeof console){var g=d+":"+l;!r[g]&&a<3&&(o("You are manually calling a React.PropTypes validation function for the `"+h+"` prop on `"+d+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),r[g]=!0,a++)}}return null==n[l]?i?null===n[l]?new p("The "+u+" `"+h+"` is marked as required in `"+d+"`, but its value is `null`."):new p("The "+u+" `"+h+"` is marked as required in `"+d+"`, but its value is `undefined`."):null:e(n,l,d,u,h)}var n=i.bind(null,!1);return n.isRequired=i.bind(null,!0),n}function f(e){return m(function(r,t,a,i,o,n){var l=r[t];return b(l)!==e?new p("Invalid "+i+" `"+o+"` of type `"+v(l)+"` supplied to `"+a+"`, expected `"+e+"`.",{expectedType:e}):null})}function g(e,r,t,a,i){return new p((e||"React class")+": "+r+" type `"+t+"."+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+i+"`.")}function x(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(x);if(null===e||l(e))return!0;var r=function(e){var r=e&&(d&&e[d]||e["@@iterator"]);if("function"==typeof r)return r}(e);if(!r)return!1;var t,a=r.call(e);if(r!==e.entries){for(;!(t=a.next()).done;)if(!x(t.value))return!1}else for(;!(t=a.next()).done;){var i=t.value;if(i&&!x(i[1]))return!1}return!0;default:return!1}}function b(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||!!r&&("Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol)}(r,e)?"symbol":r}function v(e){if(null==e)return""+e;var r=b(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}function y(e){var r=v(e);switch(r){case"array":case"object":return"an "+r;case"boolean":case"date":case"regexp":return"a "+r;default:return r}}return p.prototype=Error.prototype,u.checkPropTypes=i,u.resetWarningCache=i.resetWarningCache,u.PropTypes=u,u},No}()(Zo.isElement,!0)}else To.exports=function(){if(Vo)return Qo;Vo=1;var e=Xo();function r(){}function t(){}return t.resetWarningCache=r,Qo=function(){function a(r,t,a,i,o,n){if(n!==e){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function i(){return a}a.isRequired=a;var o={array:a,bigint:a,bool:a,func:a,number:a,object:a,string:a,symbol:a,any:a,arrayOf:i,element:a,elementType:a,instanceOf:i,node:a,objectOf:i,oneOf:i,oneOfType:i,shape:i,exact:i,checkPropTypes:t,resetWarningCache:r};return o.PropTypes=o,o}}()();var qo=wo(To.exports);function Jo({code:e,label:t="Copy code"}){const[a,i]=r(!1);return le(B,{title:a?"Copied!":t,children:le(Ri,{size:"small",onClick:async()=>{try{await navigator.clipboard.writeText(e),i(!0),setTimeout(()=>i(!1),2e3)}catch(e){console.error("Copy failed:",e)}},"aria-label":a?"Copied":t,sx:{color:a?"var(--Icons-Success, var(--Text))":"var(--Quiet)"},children:le(a?ue:ce,{fontSize:"small"})})})}Jo.propTypes={code:qo.string.isRequired,label:qo.string};function Ko({code:e="",language:r="JSX",showCopy:t=!0,showHeader:a=!0,maxHeight:i,wrap:o=!1,sx:n={},...l}){return de(h,{"data-theme":"Neutral","data-surface":"Surface-Dimmest",sx:{backgroundColor:"var(--Background)",borderRadius:"min(var(--Card-Radius, var(--Style-Border-Radius)), 12px)",overflow:"hidden",...n},...l,children:[a&&(r||t)&&de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,px:2,py:1,borderBottom:"1px solid var(--Border)",minHeight:40},children:[le(ga,{color:"quiet",children:r}),t&&e?le(Jo,{code:e}):null]}),le(h,{sx:{p:2,overflow:"auto",maxHeight:i},children:le(h,{component:"pre",sx:{margin:0,fontFamily:"inherit"},children:le(h,{component:"code",sx:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:"13px",lineHeight:1.6,color:"var(--Text)",whiteSpace:o?"pre-wrap":"pre",wordBreak:o?"break-word":"normal",display:"block"},children:e})})})]})}function $o(e){if(!e)return null;const r=e.trim();if(/^#[0-9a-f]{3}$/i.test(r))return{r:parseInt(r[1]+r[1],16),g:parseInt(r[2]+r[2],16),b:parseInt(r[3]+r[3],16),a:1};if(/^#[0-9a-f]{6}$/i.test(r))return{r:parseInt(r.substring(1,3),16),g:parseInt(r.substring(3,5),16),b:parseInt(r.substring(5,7),16),a:1};if(/^#[0-9a-f]{8}$/i.test(r))return{r:parseInt(r.substring(1,3),16),g:parseInt(r.substring(3,5),16),b:parseInt(r.substring(5,7),16),a:parseInt(r.substring(7,9),16)/255};const t=r.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+%?))?\s*\)/);if(t){let e=1;return void 0!==t[4]&&(e=t[4].endsWith("%")?parseFloat(t[4])/100:parseFloat(t[4])),{r:Math.round(parseFloat(t[1])),g:Math.round(parseFloat(t[2])),b:Math.round(parseFloat(t[3])),a:e}}return null}function _o(e,r){if(!e||!r)return e||r;if(e.a>=1)return e;const t=e.a;return{r:Math.round(e.r*t+r.r*(1-t)),g:Math.round(e.g*t+r.g*(1-t)),b:Math.round(e.b*t+r.b*(1-t)),a:1}}function en(e){const r=e=>e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4);return.2126*r(e.r/255)+.7152*r(e.g/255)+.0722*r(e.b/255)}function rn(e,r,t){const a=$o(e),i=$o(r),o=$o(t);if(!a||!i)return null;const n=o?_o(i,o):i.a<1?null:i;if(!n)return null;const l=_o(a,n);if(!l)return null;const s=en(l),d=en(n);return((Math.max(s,d)+.05)/(Math.min(s,d)+.05)).toFixed(2)}function tn(e){return"undefined"==typeof window?null:getComputedStyle(document.documentElement).getPropertyValue(e).trim()}Ko.propTypes={code:qo.string,language:qo.string,showCopy:qo.bool,showHeader:qo.bool,maxHeight:qo.oneOfType([qo.number,qo.string]),wrap:qo.bool,sx:qo.object};const an={"display-large":"Display Large","display-medium":"Display Medium","display-small":"Display Small",h1:"H1",h2:"H2",h3:"H3",h4:"H4",h5:"H5",h6:"H6","subtitle-small":"Subtitle Small",subtitle:"Subtitle Medium","subtitle-large":"Subtitle Large","body-small":"Body Small","body-small-semibold":"Body Small Semibold",body:"Body Medium","body-semibold":"Body Medium Semibold","body-large":"Body Large","body-large-semibold":"Body Large Semibold",label:"Label","label-small":"Label Small","label-large":"Label Large",caption:"Caption","caption-bold":"Caption Bold",legal:"Legal","legal-semibold":"Legal Semibold",eyebrow:"Eyebrow Medium","eyebrow-small":"Eyebrow Small","eyebrow-large":"Eyebrow Large",button:"Button Standard","button-small":"Button Small","button-extra-small":"Button Extra Small","number-large":"Number Large","number-medium":"Number Medium","number-small":"Number Small"};function on(){const e=({color:e})=>de(h,{sx:{textAlign:"center"},children:[le(h,{sx:{width:"80px",height:"80px",backgroundColor:`var(${e.var})`,borderRadius:"8px",border:"1px solid var(--Border)",mb:1,mx:"auto"}}),le(w,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",mb:.5,wordBreak:"break-word"},children:e.name}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",fontSize:"10px",fontFamily:"monospace",wordBreak:"break-all"},children:e.var})]});return de(k,{spacing:6,children:[de(h,{children:[le(w,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Brand Colors (Static)"}),le(k,{direction:"row",spacing:3,sx:{justifyContent:"center",flexWrap:"wrap",gap:3},children:[{name:"Primary",var:"--Primary-Color-11"},{name:"Secondary",var:"--Secondary-Color-11"},{name:"Tertiary",var:"--Tertiary-Color-11"}].map(r=>le(e,{color:r},r.var))})]}),de(h,{children:[le(w,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Background Colors (Dynamic)"}),le(w,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Update based on selected Background variant and Mode"}),le(C,{container:!0,spacing:2,sx:{justifyContent:"center"},children:[{name:"Default Background",cssVar:"var(--Theme-Default-Surfaces-Surface)"},{name:"Primary Background",cssVar:"var(--Theme-Primary-Surfaces-Surface)"},{name:"Secondary Background",cssVar:"var(--Theme-Secondary-Surfaces-Surface)"},{name:"Tertiary Background",cssVar:"var(--Theme-Tertiary-Surfaces-Surface)"},{name:"Neutral Background",cssVar:"var(--Theme-Neutral-Surfaces-Surface)"},{name:"Neutral-Variant Background",cssVar:"var(--Theme-Neutral-Variant-Surfaces-Surface)"}].map(e=>le(C,{item:!0,sx:{display:"flex",justifyContent:"center"},children:de(h,{sx:{textAlign:"center"},children:[le(h,{sx:{minWidth:"max(var(--Button-Height), var(--Min-Button-Width))",minHeight:"var(--Button-Height)",backgroundColor:e.cssVar,borderRadius:"var(--Style-Border-Radius)",border:"2px solid var(--Border)",mb:1}}),le(w,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",wordBreak:"break-word"},children:e.name})]})},e.name))})]}),de(h,{children:[le(w,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Dynamic Colors (Update with Mode, Background & Surface)"}),le(T,{severity:"info",sx:{backgroundColor:"var(--Container-Low)",mb:3,border:"1px solid var(--Border)"},children:de(w,{variant:"body2",children:["Most colors update automatically based on the current"," ",le("strong",{children:"Mode"})," (Light/Dark), ",le("strong",{children:"Background"})," ","variant, and ",le("strong",{children:"Surface"})," theme. Only Primary, Secondary, and Tertiary colors are fixed brand colors."]})}),le(w,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"These colors automatically adapt based on:"}),de(k,{spacing:1,sx:{mb:4},children:[de(h,{sx:{display:"flex",gap:2},children:[le(w,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Mode:"}),le(w,{variant:"body2",children:"Light or Dark theme"})]}),de(h,{sx:{display:"flex",gap:2},children:[le(w,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Background:"}),le(w,{variant:"body2",children:"Default, Primary, Secondary, Tertiary, Neutral, or Neutral-Variant"})]}),de(h,{sx:{display:"flex",gap:2},children:[le(w,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Surface:"}),le(w,{variant:"body2",children:"Theme surface layer selection"})]})]}),le(k,{spacing:4,children:[{name:"Layout & Surfaces",colors:[{name:"Background",var:"--Background"},{name:"Border",var:"--Border"},{name:"Border-Variant",var:"--Border-Variant"}]},{name:"Text & Links",colors:[{name:"Header",var:"--Header"},{name:"Text",var:"--Text"},{name:"Text-Quiet",var:"--Text-Quiet"},{name:"Hotlink",var:"--Hotlink"},{name:"Hotlink-Visited",var:"--Hotlink-Visited"}]},{name:"Buttons - Primary",colors:[{name:"Button BG",var:"--Button-Primary-Button"},{name:"Button Text",var:"--Button-Primary-Text"},{name:"Button Hover",var:"--Button-Primary-Hover"},{name:"Button Active",var:"--Button-Primary-Pressed"},{name:"Focus-Visible",var:"--Focus-Visible"}]},{name:"Buttons - Secondary",colors:[{name:"Button BG",var:"--Button-Secondary-Button"},{name:"Button Text",var:"--Button-Secondary-Text"},{name:"Button Hover",var:"--Button-Secondary-Hover"},{name:"Button Active",var:"--Button-Secondary-Pressed"},{name:"Focus-Visible",var:"--Focus-Visible"}]},{name:"Buttons - State",colors:[{name:"Info Button",var:"--Button-Info-Button"},{name:"Success Button",var:"--Button-Success-Button"},{name:"Warning Button",var:"--Button-Warning-Button"},{name:"Error Button",var:"--Button-Error-Button"}]},{name:"Icons",colors:[{name:"Default",var:"--Icons-Default"},{name:"Primary",var:"--Icons-Primary"},{name:"Secondary",var:"--Icons-Secondary"},{name:"Tertiary",var:"--Icons-Tertiary"},{name:"Neutral",var:"--Icons-Neutral"},{name:"Info",var:"--Icons-Info"},{name:"Success",var:"--Icons-Success"},{name:"Warning",var:"--Icons-Warning"},{name:"Error",var:"--Icons-Error"}]},{name:"Chips & Badges",colors:[{name:"Primary BG",var:"--Tags-Primary-BG"},{name:"Primary Text",var:"--Tags-Primary-Text"},{name:"Secondary BG",var:"--Tags-Secondary-BG"},{name:"Secondary Text",var:"--Tags-Secondary-Text"},{name:"Tertiary BG",var:"--Tags-Tertiary-BG"},{name:"Tertiary Text",var:"--Tags-Tertiary-Text"},{name:"Neutral BG",var:"--Tags-Neutral-BG"},{name:"Neutral Text",var:"--Tags-Neutral-Text"},{name:"Info BG",var:"--Tags-Info-BG"},{name:"Info Text",var:"--Tags-Info-Text"},{name:"Success BG",var:"--Tags-Success-BG"},{name:"Success Text",var:"--Tags-Success-Text"},{name:"Warning BG",var:"--Tags-Warning-BG"},{name:"Warning Text",var:"--Tags-Warning-Text"},{name:"Error BG",var:"--Tags-Error-BG"},{name:"Error Text",var:"--Tags-Error-Text"}]}].map(r=>de(h,{children:[le(w,{variant:"h6",sx:{mb:2,fontWeight:600},children:r.name}),le(C,{container:!0,spacing:2,sx:{justifyContent:"center"},children:r.colors.map(r=>le(C,{item:!0,sx:{display:"flex",justifyContent:"center"},children:le(e,{color:r})},r.var))})]},r.name))})]}),de(h,{sx:{pt:4,borderTop:"1px solid var(--Border)"},children:[le(w,{variant:"h5",sx:{mb:2,fontWeight:700},children:"How to Use"}),de(k,{spacing:2,children:[de(h,{children:[le(w,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Static Colors"}),de(w,{variant:"body2",sx:{color:"var(--Text-Secondary)"},children:["Use brand colors (",le("code",{style:{backgroundColor:"var(--Container)",padding:"2px 4px",borderRadius:"4px"},children:"--Primary-Color-11"}),","," ",le("code",{style:{backgroundColor:"var(--Container)",padding:"2px 4px",borderRadius:"4px"},children:"--Secondary-Color-11"}),","," ",le("code",{style:{backgroundColor:"var(--Container)",padding:"2px 4px",borderRadius:"4px"},children:"--Tertiary-Color-11"}),") for brand elements that should never change."]})]}),de(h,{children:[le(w,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Dynamic Colors"}),le(w,{variant:"body2",sx:{color:"var(--Text-Secondary)"},children:"Use dynamic color variables for all UI elements. They will automatically update when users change Mode, Background, or Surface settings."})]}),de(h,{children:[le(w,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Example Usage"}),le(h,{component:"pre",sx:{backgroundColor:"var(--Container)",p:2,borderRadius:"8px",overflow:"auto",fontSize:"12px",border:"1px solid var(--Border)",color:"var(--Text)"},children:"/* Dynamic - updates with theme changes */\ncolor: var(--Text);\nbackgroundColor: var(--Background);\nborderColor: var(--Border);\n\n/* Static - brand colors stay the same */\naccentColor: var(--Primary-Color-11);"})]})]})]})]})}function nn(){const e=({name:e,varName:r,baseValue:t})=>le(h,{sx:{mb:2},children:de(h,{sx:{display:"flex",alignItems:"center",gap:2,mb:1},children:[le(h,{"aria-hidden":"true",sx:{width:`var(${r})`,minWidth:20,height:24,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:.5,border:"1px solid var(--Border)"}}),de(k,{spacing:.5,children:[le(w,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:r}),de(w,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Base: ",t," (with cognitive multiplier)"]})]})]})}),r=({name:e,varName:r,value:t})=>de(h,{sx:{mb:2},children:[le(h,{"aria-hidden":"true",sx:{width:100,height:t,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:1,border:"1px solid var(--Border)",mb:1}}),le(w,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:r}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:t})]});return de(k,{spacing:3,sx:{p:2},children:[de("section",{children:[le(w,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Spacing Scale"}),le(w,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Spacing values are multiplied by the cognitive multiplier for accessibility. Each spacing value includes a visual reference and text label for clarity."}),le(k,{spacing:1,children:[{name:"Quarter",var:"--Spacing-Quarter",baseValue:"2px"},{name:"Half",var:"--Spacing-Half",baseValue:"4px"},{name:"1-and-Half",var:"--Spacing-1-and-Half",baseValue:"12px"},{name:"1",var:"--Spacing-1",baseValue:"8px"},{name:"2",var:"--Spacing-2",baseValue:"16px"},{name:"3",var:"--Spacing-3",baseValue:"24px"},{name:"4",var:"--Spacing-4",baseValue:"32px"},{name:"5",var:"--Spacing-5",baseValue:"40px"},{name:"6",var:"--Spacing-6",baseValue:"48px"},{name:"7",var:"--Spacing-7",baseValue:"56px"},{name:"8",var:"--Spacing-8",baseValue:"64px"},{name:"9",var:"--Spacing-9",baseValue:"72px"},{name:"10",var:"--Spacing-10",baseValue:"80px"}].map(r=>le(e,{name:r.name,varName:r.var,baseValue:r.baseValue},r.var))})]}),de("section",{children:[le(w,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Sizing Scale"}),le(w,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Fixed sizing values for components and layouts. Each size is labeled with its CSS variable and pixel value."}),le(C,{container:!0,spacing:3,children:[{name:"Quarter",var:"--Sizing-Quarter",value:"2px"},{name:"Half",var:"--Sizing-Half",value:"4px"},{name:"1-and-Half",var:"--Sizing-1-and-Half",value:"12px"},{name:"1",var:"--Sizing-1",value:"8px"},{name:"2",var:"--Sizing-2",value:"16px"},{name:"3",var:"--Sizing-3",value:"24px"},{name:"4",var:"--Sizing-4",value:"32px"},{name:"5",var:"--Sizing-5",value:"40px"},{name:"6",var:"--Sizing-6",value:"48px"},{name:"7",var:"--Sizing-7",value:"56px"},{name:"8",var:"--Sizing-8",value:"64px"},{name:"9",var:"--Sizing-9",value:"72px"},{name:"10",var:"--Sizing-10",value:"80px"},{name:"11",var:"--Sizing-11",value:"88px"},{name:"12",var:"--Sizing-12",value:"96px"},{name:"13",var:"--Sizing-13",value:"104px"},{name:"14",var:"--Sizing-14",value:"112px"},{name:"15",var:"--Sizing-15",value:"160px"},{name:"16",var:"--Sizing-16",value:"240px"},{name:"17",var:"--Sizing-17",value:"320px"},{name:"18",var:"--Sizing-18",value:"480px"}].map(e=>le(C,{item:!0,xs:12,sm:6,md:4,lg:3,children:le(r,{name:e.name,varName:e.var,value:e.value})},e.var))})]}),de("section",{children:[le(w,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Negative Sizing"}),le(w,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Negative values for margins and offsets. Use these to reduce or remove default spacing when needed."}),le(C,{container:!0,spacing:3,children:[{name:"Negative-Quarter",var:"--Sizing-Negative-Quarter",value:"-2px"},{name:"Negative-Half",var:"--Sizing-Negative-Half",value:"-4px"},{name:"Negative-1-and-Half",var:"--Sizing-Negative-1-and-Half",value:"-12px"},{name:"Negative-1",var:"--Sizing-Negative-1",value:"-8px"}].map(e=>le(C,{item:!0,xs:12,sm:6,md:4,lg:3,children:de(h,{children:[le(w,{variant:"subtitle2",sx:{fontWeight:600},children:e.name}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:e.var}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:e.value})]})},e.var))})]}),de("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(w,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Container Padding"}),de(h,{sx:{p:"var(--Spacing-3)",backgroundColor:"var(--Container-Low)",border:"2px dashed var(--Buttons-Primary-Button)",borderRadius:1},children:[de(w,{variant:"body2",children:["Default container padding: ",le("strong",{children:"var(--Spacing-3)"})," = 24px"]}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",mt:1},children:"Use this variable for consistent padding around main content areas."})]})]}),de("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(w,{variant:"h5",component:"h2",sx:{mb:3,fontWeight:700},children:"Practical Examples"}),de("article",{children:[le(w,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Padding Examples"}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",mb:2,display:"block"},children:"Different padding values create different visual breathing room."}),le(C,{container:!0,spacing:2,sx:{mb:4},children:["var(--Spacing-1)","var(--Spacing-2)","var(--Spacing-3)","var(--Spacing-4)"].map(e=>le(C,{item:!0,xs:12,sm:6,children:de(h,{sx:{p:e,backgroundColor:"var(--Container)",border:"1px solid var(--Border)",borderRadius:1},children:[de(w,{variant:"subtitle2",children:["Padding: ",e]}),le(w,{variant:"caption",sx:{display:"block",mt:1,color:"var(--Text-Secondary)"},children:"Content with spacing applied"})]})},e))})]}),de("article",{children:[le(w,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Gap Examples"}),le(w,{variant:"caption",sx:{color:"var(--Text-Secondary)",mb:2,display:"block"},children:"Gap controls spacing between flex/grid children without adding extra elements."}),le(k,{spacing:3,children:["var(--Spacing-1)","var(--Spacing-2)","var(--Spacing-3)"].map(e=>de(h,{children:[le(k,{direction:"row",spacing:e,sx:{mb:1},children:[1,2,3].map(e=>le(h,{"aria-hidden":"true",sx:{width:60,height:60,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:1,flexShrink:0}},e))}),de(w,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Gap: ",e]})]},e))})]})]}),de(h,{role:"note",sx:{p:2,backgroundColor:"var(--Container-Low)",borderRadius:1,borderLeft:"4px solid var(--Buttons-Primary-Button)",mt:3},children:[le(w,{variant:"subtitle2",sx:{fontWeight:600,mb:1},children:"✓ Accessibility Best Practices Used"}),de("ul",{style:{margin:"0.5rem 0",paddingLeft:"1.5rem"},children:[le("li",{children:de(w,{variant:"caption",children:[le("strong",{children:'aria-hidden="true"'})," on purely decorative visual elements"]})}),le("li",{children:le(w,{variant:"caption",children:"All spacing information conveyed through text labels and values"})}),le("li",{children:de(w,{variant:"caption",children:["No empty decorative ",le("code",{children:"<div>"})," elements in DOM"]})}),le("li",{children:de(w,{variant:"caption",children:["Semantic HTML: ",le("code",{children:"<section>"})," and ",le("code",{children:"<article>"})," for structure"]})}),le("li",{children:le(w,{variant:"caption",children:"CSS-based spacing (padding/margin) for actual layout, not decorative divs"})}),le("li",{children:le(w,{variant:"caption",children:"Full keyboard navigation and screen reader support"})})]})]})]})}Object.entries({Display:["display-large","display-medium","display-small"],Headings:["h1","h2","h3","h4","h5","h6"],Subtitle:["subtitle-small","subtitle","subtitle-large"],Body:["body-small","body-small-semibold","body","body-semibold","body-large","body-large-semibold"],Label:["label","label-small","label-large"],Caption:["caption","caption-bold"],Legal:["legal","legal-semibold"],Eyebrow:["eyebrow-small","eyebrow","eyebrow-large"],Button:["button-extra-small","button-small","button"],Number:["number-large","number-medium","number-small"]}).map(([e,r])=>({label:e,options:r.map(e=>({value:e,label:an[e]}))}));const ln=["default","primary","secondary","tertiary","neutral","info","success","warning","error"],sn=e=>e.charAt(0).toUpperCase()+e.slice(1);function dn(e){const r=sn(e);return{type:"outline",color:r,trackOff:"var(--Background)",trackOffBorder:"var(--Border)",trackOn:"var(--Buttons-"+r+"-Button)",trackOnBorder:"var(--Buttons-"+r+"-Border)",dotOff:"var(--Quiet)",dotOn:"var(--Buttons-"+r+"-Text)",iconOff:"var(--Background)",iconOn:"var(--Buttons-"+r+"-Button)"}}function cn(e){const r=sn(e);return{type:"light",color:r,trackOff:"var(--Border-Variant)",trackOffBorder:"var(--Border)",trackOn:"var(--"+r+"-Color-11)",trackOnBorder:"var(--Buttons-"+r+"-Border)",dotOff:"var(--Quiet)",dotOn:"var(--Buttons-"+r+"-Border)",iconOff:"var(--Quiet)",iconOn:"var(--"+r+"-Color-11)",dataTheme:r,dataSurface:"Surface-Brightest"}}const un={small:{trackW:28,trackH:16,dotRadius:"var(--Sizing-2, 16px)",icon:8},medium:{trackW:40,trackH:24,dotRadius:"var(--Sizing-2-and-Half, 20px)",icon:16},large:{trackW:56,trackH:32,dotRadius:"var(--Sizing-2-and-Half, 20px)",icon:16}};function hn({variant:e="default",size:r="medium",checked:t,defaultChecked:a,onChange:i,disabled:o=!1,label:n,labelPlacement:l="end",name:s,value:d,icon:c,iconOn:u,iconOff:h,className:p="",sx:m={},"aria-label":f,"aria-labelledby":g,...x}){const v=function(){const e={};return ln.forEach(r=>{e[r+"-outline"]=dn(r),e[r+"-light"]=cn(r)}),e.default={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Buttons-Default-Button)",trackOnBorder:"var(--Buttons-Default-Border)",dotOff:"var(--Quiet)",dotOn:"var(--Buttons-Default-Text)",iconOff:"var(--Background)",iconOn:"var(--Buttons-Default-Button)"},e["default-outline"]={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Buttons-Default-Button)",trackOnBorder:"var(--Buttons-Default-Border)",dotOff:"var(--Quiet)",dotOn:"var(--Buttons-Default-Text)",iconOff:"var(--Background)",iconOn:"var(--Buttons-Default-Button)"},e.outline={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Buttons-Default-Button)",trackOnBorder:"var(--Buttons-Default-Border)",dotOff:"var(--Quiet)",dotOn:"var(--Buttons-Default-Text)",iconOff:"var(--Background)",iconOn:"var(--Buttons-Default-Button)"},e.primary=dn("primary"),e.light=cn("primary"),e}(),y=v[e]||v.default,S=un[r]||un.medium,k="small"===r?oa:sa,B=S.trackH-4,w=Math.max(24,S.trackW),C=Math.max(24,S.trackH),T=(C-S.trackH)/2,A={width:B,height:B,borderRadius:S.dotRadius,boxShadow:"none",border:"none",display:"flex",alignItems:"center",justifyContent:"center",transition:"background-color var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))","& > *":{width:S.icon,height:S.icon,display:"block"}},I={width:S.trackW,minWidth:24,height:C,minHeight:24,padding:0,overflow:"visible",opacity:o?"var(--Disabled, 0.38)":1,"& .MuiSwitch-switchBase":{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",justifyContent:"flex-start",alignItems:"center",paddingTop:0,paddingBottom:0,paddingLeft:"2px",paddingRight:w-S.trackW+2+"px",color:"transparent",transition:"justify-content var(--Motion-Duration-Instant, 100ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))",transform:"none","& .MuiSwitch-input":{left:0,top:0,width:"100%",height:"100%",margin:0},"& .MuiSwitch-thumb":{...A,backgroundColor:y.dotOff,color:y.iconOff},"&.Mui-checked":{justifyContent:"flex-end",transform:"none","& .MuiSwitch-thumb":{...A,backgroundColor:y.dotOn,color:y.iconOn},"& + .MuiSwitch-track":{backgroundColor:y.trackOn,borderColor:y.trackOnBorder,opacity:1}},"&:hover, &.Mui-checked:hover":{backgroundColor:"transparent"},"&:hover + .MuiSwitch-track":{boxShadow:si},"&:active + .MuiSwitch-track":{boxShadow:li},"&.Mui-focusVisible + .MuiSwitch-track":{outline:"1px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled + .MuiSwitch-track":{opacity:1}},"& .MuiSwitch-track":{width:S.trackW,height:S.trackH,borderRadius:"var(--Sizing-3, 24px)",backgroundColor:y.trackOff,border:"1px solid "+y.trackOffBorder,boxSizing:"border-box",opacity:1,position:"absolute",top:T,left:0,transition:"background-color var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1)), border-color var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1)), box-shadow var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))"},...m},W=e.includes("-light")||"light"===e,R=void 0!==h?h:c,D=void 0!==u?u:c,P=e=>le("span",{className:"MuiSwitch-thumb",children:e}),F=le(z,{...void 0!==R||void 0!==D?{icon:P(R),checkedIcon:P(D)}:{},checked:t,defaultChecked:a,onChange:i,disabled:o,name:s,value:d,slotProps:{input:{...f?{"aria-label":f}:{},...g?{"aria-labelledby":g}:{}}},className:"switch-"+e+" "+p,sx:I,disableRipple:!0,...W&&y.dataTheme?{"data-theme":y.dataTheme,"data-surface":y.dataSurface||"Surface-Dim"}:{},...x});return n?le(b,{control:F,label:le(k,{component:"span",sx:{color:o?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===r?"13px":"15px",fontWeight:500,opacity:o?"var(--Disabled, 0.38)":1},children:n}),labelPlacement:l,sx:{gap:"8px",marginLeft:0,marginRight:0}}):F}const pn=hn,mn=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",fn={default:"Default",quiet:"Quiet",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},gn=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],xn=["filled","outlined","rounded","twotone","sharp"],bn={filled:"Filled",outlined:"Outlined",rounded:"Rounded",twotone:"Two Tone",sharp:"Sharp"},vn={Home:{filled:ye,outlined:Re,rounded:Qe,twotone:_e,sharp:ur},Favorite:{filled:ve,outlined:De,rounded:Ve,twotone:er,sharp:hr},Delete:{filled:Se,outlined:Pe,rounded:je,twotone:rr,sharp:pr},Settings:{filled:ke,outlined:Fe,rounded:Ge,twotone:tr,sharp:mr},Search:{filled:Be,outlined:Be,rounded:Ue,twotone:ar,sharp:fr},Star:{filled:we,outlined:Le,rounded:Xe,twotone:ir,sharp:gr},Person:{filled:Ce,outlined:He,rounded:Ye,twotone:or,sharp:xr},Notifications:{filled:Te,outlined:Me,rounded:Ze,twotone:nr,sharp:br},Visibility:{filled:ze,outlined:Ee,rounded:qe,twotone:lr,sharp:vr},ShoppingCart:{filled:Ae,outlined:Ne,rounded:Je,twotone:sr,sharp:yr},Lock:{filled:Ie,outlined:Oe,rounded:Ke,twotone:dr,sharp:Sr},Info:{filled:We,outlined:ge,rounded:$e,twotone:cr,sharp:kr}};function yn({ratio:e,threshold:r}){if(!e)return le(ga,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=r;return de(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:t?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:[e,":1"]}),le(ga,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Sn({label:e,ratio:r,threshold:t,note:a}){return de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(h,{sx:{flex:1},children:[le(oa,{style:{color:"var(--Text)"},children:e}),a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:a})]}),le(yn,{ratio:r,threshold:t})]})}function kn({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"primary":"primary-outline",size:"small",onClick:t,children:e})}function Bn(){const[e,t]=r("filled"),[a,i]=r("default"),[n,l]=r("medium"),[s,d]=r("40"),[c,u]=r(!1),[p,m]=r("Home"),[f,g]=r(""),[x,b]=r({}),v=fn[a]||"Default",y="twotone"===e,S="custom"===n?(parseInt(s,10)||40)+"px":{xs:"12px",small:"16px",medium:"24px",large:"36px"}[n]||"24px",B=function(e,r){return vn[e]?.[r]||vn[e]?.filled||ye}(p,e),w=function(e){return{outlined:"Outlined",rounded:"Rounded",twotone:"TwoTone",sharp:"Sharp"}[e]||""}(e),T=p+w+"Icon",z=f.trim().length>0,A="<Icon>\n <"+T+' />\n</Icon>\n{/* aria-hidden="true" by default */}',I='<Icon aria-label="'+(z?f.trim():p+" icon")+'">\n <'+T+' />\n</Icon>\n{/* role="img" added automatically */}';return o(()=>{b({background:tn("--Background"),iconColor:tn("--Icons-"+v),iconVariant:tn("--Icons-Variant-"+v)})},[a,v]),de(h,{sx:{pb:8},children:[le(Zt,{children:"Icon"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(h,{sx:{p:4,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:200,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",gap:2},children:le(Qa,{color:a,size:n,fontSize:"custom"===n?parseInt(s,10)||40:void 0,disabled:c,twoTone:y,"aria-label":z?f.trim():void 0,children:le(B,{})})}),le(Ko,{code:(()=>{const e=[];"default"!==a&&e.push('color="'+a+'"'),"custom"===n?(e.push('size="custom"'),e.push("fontSize={"+(parseInt(s,10)||40)+"}")):"medium"!==n&&e.push('size="'+n+'"'),y&&e.push("twoTone"),c&&e.push("disabled"),z&&e.push('aria-label="'+f.trim()+'"');const r=e.length?" "+e.join(" "):"";return"import "+T+" from '@mui/icons-material/"+p+(w||"")+"';\n\n<Icon"+r+">\n <"+T+" />\n</Icon>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ICON"}),le(h,{component:"input",type:"text",value:p,onChange:e=>m(e.target.value),placeholder:"e.g. Home, Favorite, Delete",sx:{width:"100%",padding:"6px 10px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",boxSizing:"border-box","&:focus":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px",borderColor:"var(--Focus-Visible)"}}}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Enter a MUI icon name."," ",le(h,{component:"a",href:"https://mui.com/material-ui/material-icons/",target:"_blank",rel:"noopener noreferrer",sx:{color:"var(--Text-Primary)",textDecoration:"underline","&:hover":{color:"var(--Header-Primary)"}},children:"Browse MUI Icons ↗"})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:xn.map(r=>le(kn,{label:bn[r],selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:gn.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>{const r=fn[e],t=a===e;return le(h,{component:"button",onClick:()=>i(e),"aria-label":"Select "+mn(e),"aria-pressed":t,title:mn(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Icons-"+r+")",border:t?"2px solid var(--Text)":"1px solid var(--Border)",outline:t?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:t&&le(ue,{sx:{fontSize:16,color:"var(--Background)",pointerEvents:"none"}})},e)})})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["small","medium","large","custom"].map(e=>le(kn,{label:mn(e),selected:n===e,onClick:()=>l(e)},e))}),"custom"===n&&de(h,{sx:{display:"flex",alignItems:"center",gap:1,mt:1.5},children:[le(h,{component:"input",type:"number",value:s,onChange:e=>d(e.target.value),"aria-label":"Custom font size in pixels",sx:{width:72,padding:"4px 8px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",outline:"none","&:focus":{borderColor:"var(--Focus-Visible)"}}}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"px"})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ARIA LABEL"}),le(h,{component:"input",type:"text",value:f,onChange:e=>g(e.target.value),placeholder:"Leave empty for decorative (aria-hidden)",sx:{width:"100%",padding:"6px 10px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",boxSizing:"border-box","&:focus":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px",borderColor:"var(--Focus-Visible)"}}}),le(ga,{style:{color:z?"var(--Tags-Success-Text)":"var(--Text-Quiet)",display:"block",marginTop:6},children:z?'✓ Meaningful — role="img" aria-label="'+f.trim()+'"':'Decorative — aria-hidden="true" (invisible to screen readers)'})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Reduces opacity to 0.38"})]}),le(hn,{checked:c,onChange:e=>u(e.target.checked),size:"small","aria-label":"Toggle disabled"})]})]})}),le(bo,{value:1,children:de(h,{sx:{p:3},children:[de(oa,{color:"quiet",style:{marginBottom:24},children:[bn[e]," / ",mn(a)," / ","custom"===n?s+"px":n,z?" / meaningful":" / decorative"]}),de(k,{spacing:3,children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Icon Contrast (WCAG 1.4.11 — 3:1)"}),le(oa,{color:"quiet",style:{marginBottom:16},children:"Non-text elements must contrast 3:1 against the page background."}),le(Sn,{label:"var(--Icons-"+v+") vs. var(--Background)",ratio:rn(x.iconColor,x.background),threshold:3,note:T+" at "+S+" in "+mn(a)+" color"}),y&&le(Sn,{label:"var(--Icons-Variant-"+v+") vs. var(--Background)",ratio:rn(x.iconVariant,x.background),threshold:3,note:"Two-tone secondary fill — must also meet 3:1"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)",backgroundColor:z?"var(--Tags-Success-BG, rgba(0,200,0,0.05))":"transparent",px:1,borderRadius:"4px"},children:[de(oa,{style:{fontWeight:600},children:["Current icon — ",z?"meaningful ✓":"decorative"]}),le(h,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:z?I:A})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Decorative (no aria-label):"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:'aria-hidden="true" is applied automatically. The icon is invisible to screen readers. Use this when the icon is purely visual — e.g. a decorative bullet or inline illustration.'}),le(h,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:A})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Meaningful (with aria-label):"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:'role="img" is added automatically. The label is announced by screen readers. Use this when the icon conveys information that is not present in surrounding text.'}),le(h,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:I})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:["Disabled state",c?" ← current":"",":"]}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Opacity 0.38 — visual cue only. To disable an action, disable the wrapping interactive element (button, link), not the icon itself."})]}),y&&de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:["Two-tone",y?" ← current":"",":"]}),de(ga,{style:{color:"var(--Text-Quiet)"},children:["Secondary fill uses var(--Icons-Variant-",v,"). Both the primary and secondary fills must meet 3:1 contrast independently."]})]}),de(h,{sx:{py:1.5},children:[de(oa,{children:["Touch target — ",S," icon","small"===n?" ⚠":" ✓",":"]}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"small"===n?"Small icons (20px) need a 24px minimum target area around them (WCAG 2.5.5). Wrap in a button with padding.":"Icon is "+S+" — meets 24px minimum. Ensure the wrapping interactive element also meets 24×24px."})]})]})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Size Reference"}),le(k,{spacing:0,children:[{label:"Small",s:"small",px:"20px",note:"Inline text, compact UI"},{label:"Medium",s:"medium",px:"24px",note:"Standard UI — default"},{label:"Large",s:"large",px:"36px",note:"Emphasis, empty states, hero areas"},{label:"Custom",s:"custom",px:"any",note:"Ensure 24×24px minimum touch target (WCAG 2.5.5)"}].map(({label:e,s:r,px:t,note:a},i,o)=>de(h,{sx:{py:1.5,borderBottom:i<o.length-1?"1px solid var(--Border)":"none",display:"flex",justifyContent:"space-between",alignItems:"flex-start"},children:[de(h,{children:[de(oa,{children:[e," — ",t]}),le(ga,{style:{color:"var(--Text-Quiet)"},children:a})]}),n===r&&le(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:"var(--Tags-Success-BG)",color:"var(--Tags-Success-Text)"},children:"current"})]},e))})]})]})]})})]})})})]})]})}const wn={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Cn={small:{size:32,iconSize:"16px",borderRadius:"8px"},medium:{size:40,iconSize:"20px",borderRadius:"10px"},large:{size:48,iconSize:"24px",borderRadius:"12px"}};function Tn({children:e,color:r="primary",variant:t="solid",size:a="medium",className:i="",sx:o={},...n}){const l=Cn[a]||Cn.medium,s=wn[r]||wn.primary;let d,c;switch(t){case"light":d=s,c="Surface-Brightest";break;case"dark":d=s,c="Surface-Dimmest";break;default:d=s,c="Surface"}return le(h,{"data-theme":d,"data-surface":c,className:"icon-badge icon-badge-"+t+" icon-badge-"+a+" icon-badge-"+r+" "+i,sx:{width:l.size,height:l.size,borderRadius:l.borderRadius,backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& svg":{width:l.iconSize,height:l.iconSize,fontSize:l.iconSize,color:"inherit",stroke:"currentColor"},...o},...n,children:e})}function zn({variant:t="outlined",color:a="default",size:i="medium",disabled:o=!1,orientation:n="horizontal",spacing:l=0,fit:s,fullWidth:d=!1,equalWidth:c=!1,multiple:u=!1,value:p,defaultValue:m,onChange:f,children:g,className:x="",sx:b={},"aria-label":v,...y}){const[S,k]=r(m??(u?[]:null)),B=void 0!==p,w=B?p:S,C=u?Array.isArray(w)?w:null==w?[]:[w]:null,T="horizontal"===n,z=0===l,A="light"===t,I="ghost"===t,W=s??(d?"fill":c?"equal":"hug"),R="fill"===W,D="equal"===W&&T,P=(F=a).charAt(0).toUpperCase()+F.slice(1);var F;const L="var(--Buttons-"+P+"-Border)",H="var(--Buttons-"+P+"-Button)",M="var(--Buttons-"+P+"-Text)",E="default"===a?void 0:P,N=e.Children.toArray(g).filter(Boolean),O=N.length,Q=(e,r)=>t=>{const a=u?C.includes(e)?C.filter(r=>r!==e):[...C,e]:e;B||k(a),f?.(a,t),r?.(t)},V=N.map((r,t)=>{if(!e.isValidElement(r))return r;const n=0===t,l=t===O-1,s=r.props.value??t,d=(c=s,u?C.includes(c):w===c);var c;let p;if(z&&O>1){const e="var(--Style-Border-Radius)";p=T?n&&l?e:n?e+" 0 0 "+e:l?"0 "+e+" "+e+" 0":"0":n&&l?e:n?e+" "+e+" 0 0":l?"0 0 "+e+" "+e:"0"}const m=z&&O>1?{borderRadius:p,...!n&&(T?{marginLeft:"calc(-1 * var(--Button-Border-Width))"}:{marginTop:"calc(-1 * var(--Button-Border-Width))"}),position:"relative","&:hover, &:focus-visible":{zIndex:1}}:{},f=I?{backgroundColor:"var(--Background) !important",color:"var(--Text) !important",borderColor:L+" !important"}:{backgroundColor:H+" !important",color:M+" !important",borderColor:L+" !important"},g={...m,transform:"none !important","&:hover, &:active, &:focus-visible":{transform:"none !important"},...d?{...f,"&:hover, &:active, &.Mui-focusVisible, &:focus-visible":f}:{},...d?{}:{color:"var(--Quiet)",backgroundColor:"transparent","&:hover":{backgroundColor:"var(--Hover)",color:"var(--Text)",zIndex:1},"&:active":{backgroundColor:"var(--Pressed)",color:"var(--Text)"}},...I&&!d?{border:"none !important","&:hover":{border:"none !important"}}:{},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px",zIndex:2},...r.props.sx},x=e.cloneElement(r,{variant:r.props.variant??(I?d?a+"-outline":"ghost":d?a:a+"-outline"),size:r.props.size??i,disabled:r.props.disabled??o,onClick:Q(s,r.props.onClick),"aria-pressed":d,sx:g});return A&&!d?le(h,{"data-theme":E,"data-surface":"Surface-Brightest",sx:{display:"contents"},children:x},t):e.cloneElement(x,{key:t})});return le(h,{role:"group","aria-label":v,className:"btn-group btn-group-"+t+" btn-group-"+a+" "+x,sx:{...D?{display:R?"grid":"inline-grid",gridAutoFlow:"column",gridAutoColumns:"1fr",justifyItems:"stretch",alignItems:"stretch",width:R?"100%":"fit-content"}:{display:R?"flex":"inline-flex",flexDirection:T?"row":"column",alignItems:"stretch",width:R?"100%":"auto"},gap:z?0:l,border:"none",borderRadius:"var(--Style-Border-Radius)",...b},...y,children:V})}const An=["Link","Chip","Badge","Caption","Label","Tag","BodySmall","LegalSemibold","Legal","LabelSmall","LabelExtraSmall","EyebrowSmall","ButtonSmall"];function In(r){let t=!1;return e.Children.forEach(r,r=>{(function(r){if(!e.isValidElement(r))return!1;const t=r.props||{};if("small"===t.size)return!0;if("small"===t["data-size"])return!0;if(24===t.height||24===t.minHeight)return!0;if("24px"===t.height||"24px"===t.minHeight)return!0;if(t.sx){const e=t.sx.minHeight||t.sx.height;if(24===e||"24px"===e)return!0}const a=r.type;if(a){const e=a.displayName||a.name||"";if(An.some(r=>e.includes(r)))return!0}return!1})(r)&&(t=!0)}),t}function Wn({children:e,gap:r,spacing:t,direction:a="column",enforceMinGap:i=!0,minGapToken:o="--min-stack-gap",divider:n,flexWrap:l,useFlexGap:d=!0,alignItems:c,justifyContent:u,sx:h={},className:p="",...m}){const f=void 0!==r?r:t,g=i&&In(e),x=s(()=>{if(!g)return f;const e=function(e,r=8){return null==e?0:"number"==typeof e?e*r:"string"==typeof e?e.endsWith("px")?parseFloat(e):e.endsWith("rem")?parseFloat(e)*parseFloat(getComputedStyle(document.documentElement).fontSize||"16"):parseFloat(e)*r||0:0}(f),r=function(e,r=8){if("undefined"==typeof window)return r;const t=getComputedStyle(document.documentElement).getPropertyValue(e).trim();return t?t.endsWith("rem")?parseFloat(t)*parseFloat(getComputedStyle(document.documentElement).fontSize):parseFloat(t)||r:r}(o,8);return e>=r?f:"var("+o+", "+r+"px)"},[g,f,o]);return le(k,{direction:a,spacing:d?void 0:x,gap:d?x:void 0,divider:n,flexWrap:l,useFlexGap:d,alignItems:c,justifyContent:u,className:"omni-stack"+(g?" omni-stack-min-gap-enforced":"")+(p?" "+p:""),sx:{...m["data-surface"]||m["data-theme"]?{background:"var(--Background)"}:{},boxSizing:"border-box",...g?{"&::before":{display:"none"}}:{},...h},"data-min-gap-enforced":g?"true":void 0,...m,children:e})}const Rn=e=>le(Wn,{direction:"row",alignItems:"center",...e}),Dn=e=>le(Wn,{direction:"column",...e}),Pn=e=>le(Wn,{direction:"column",alignItems:"center",justifyContent:"center",...e}),Fn=e=>le(Wn,{direction:"row",alignItems:"center",justifyContent:"space-between",...e}),Ln=e=>le(Wn,{direction:"row",flexWrap:"wrap",...e}),Hn=({breakpoint:e="sm",...r})=>le(Wn,{direction:{xs:"column",[e]:"row"},...r}),Mn=Wn,En=Ln,Nn=e=>le(h,{sx:{borderBottom:"1px solid var(--Border)",width:"100%"},...e}),On=({sx:e,...r})=>le(Wn,{sx:{px:2,...e},...r}),Qn=({sx:e,...r})=>le(Wn,{sx:{overflowY:"auto",...e},...r}),Vn={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},jn={small:{gap:"8px",fontSize:"13px",padding:"var(--Card-Padding)"},medium:{gap:"12px",fontSize:"14px",padding:"var(--Card-Padding)"},large:{gap:"16px",fontSize:"16px",padding:"var(--Card-Padding)"}},Gn=l({variant:"default",color:"primary",size:"medium",orientation:"vertical"});function Un({children:e,variant:r="solid",color:t="default",surface:a,size:i="medium",orientation:o="vertical",clickable:n=!1,selected:l=!1,elevated:s=!1,draggable:d=!1,onClick:c,disabled:u=!1,href:p,className:m="",sx:f={},...g}){const x="default"===t,b=x?"":Vn[t],v=a||(x?"Container":"dark"===r?"Surface-Dimmest":"light"===r?"Surface-Brightest":"Surface"),y=jn[i]||jn.medium,S="horizontal"===o,k=!!d,B=!u&&(n||!!c||!!p||l||k),w=p?"a":"div",C=l?`var(--Buttons-${(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===t?"Default":t)}-Border)`:"var(--Buttons-Default-Border)",T=B?l?`2px solid ${C}`:"1px solid var(--Buttons-Default-Border)":"1px solid var(--Border-Variant)",z=s?di:si,A=s?ci:di,I=s?si:li;return le(Gn.Provider,{value:{variant:r,color:t,size:i,orientation:o},children:le(h,{component:w,href:p||void 0,onClick:B?c:void 0,role:B?"button":void 0,tabIndex:B?0:void 0,"aria-pressed":!!l||void 0,"aria-disabled":u||void 0,draggable:k||void 0,className:"card card-"+r+" card-"+i+" card-"+o+(B?" card-clickable":"")+(l?" card-selected":"")+(s?" card-elevated":"")+(k?" card-draggable":"")+" "+m,sx:{display:"flex",border:T,borderRadius:"var(--Card-Radius)",boxShadow:z,overflow:"hidden",textDecoration:"none",transition:"box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease",...u&&{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none"},...B&&!k&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:A,transform:"translateY(-1px)"},"&:active":{transform:"translateY(0) scale(0.995)",boxShadow:I},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px",borderRadius:"calc(var(--Card-Radius) + 3px)"}},...k&&{cursor:"grab","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:A},"&:active":{cursor:"grabbing",zIndex:10,boxShadow:ci,transform:"scale(1.02)",borderWidth:"2px",borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...f},onKeyDown:B?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),c?.())}:void 0,...g,children:le(h,{"data-theme":b||void 0,"data-surface":v,sx:{display:"flex",flexDirection:S?"row":"column",gap:y.gap,padding:y.padding,backgroundColor:"var(--Background)",color:"var(--Text)",fontSize:y.fontSize,fontFamily:"inherit",borderRadius:"inherit",position:"relative",flex:1,minWidth:0,overflow:"hidden"},children:e})})})}function Xn({children:e,className:r="",sx:t={},...a}){const{size:i}=n(Gn);return le(h,{className:"card-content "+r,sx:{display:"flex",flexDirection:"column",gap:(jn[i]||jn.medium).gap,flex:1,minWidth:0,...t},...a,children:e})}const Yn=e=>le(Un,{clickable:!0,selected:e.selected,...e}),Zn=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",qn=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary"]},{label:"State",colors:["info","success","warning","error"]}],Jn=[ye,Br,pe,we,wr,Cr];function Kn(){const[e,t]=r("primary"),[a,i]=r("solid"),[o,n]=r("medium"),l=Jn[0];return de(Dn,{spacing:4,style:{paddingBottom:64},children:[le(Zt,{children:"Icon Badge"}),de("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24},children:[le(Un,{padding:"medium",children:de(Dn,{spacing:4,alignItems:"center",children:[le("div",{style:{padding:40},children:le(Tn,{color:e,variant:a,size:o,children:le(l,{})})}),le(Rn,{spacing:4,alignItems:"flex-end",children:["small","medium","large"].map(r=>de(Dn,{spacing:1,alignItems:"center",children:[le(Tn,{color:e,variant:a,size:r,children:le(l,{})}),le(oa,{style:{color:"var(--Quiet)"},children:Zn(r)})]},r))}),de(Dn,{spacing:1,alignItems:"center",children:[le(oa,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"Variants"}),le(Rn,{spacing:3,children:["solid","light","dark"].map(r=>de(Dn,{spacing:1,alignItems:"center",children:[le(Tn,{color:e,variant:r,size:"medium",children:le(l,{})}),le(oa,{style:{color:"var(--Quiet)",fontSize:"0.65rem"},children:Zn(r)})]},r))})]}),de(Dn,{spacing:1,alignItems:"center",children:[le(oa,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"All Colors"}),le(Rn,{spacing:2,style:{flexWrap:"wrap",justifyContent:"center"},children:qn.flatMap(e=>e.colors).map(e=>de(Dn,{spacing:0,alignItems:"center",children:[le(Tn,{color:e,variant:a,size:"small",children:le(l,{})}),le(oa,{style:{color:"var(--Quiet)",fontSize:"0.55rem"},children:Zn(e)})]},e))})]})]})}),le(Un,{padding:"medium",children:de(Dn,{spacing:4,children:[le(Zt,{style:{fontSize:"1rem"},children:"Playground"}),de(Dn,{spacing:2,children:[le(ya,{children:"Color"}),qn.map(r=>de(Dn,{spacing:1,children:[le(oa,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:r.label}),le(Rn,{spacing:1,children:r.colors.map(r=>le(Wi,{variant:e===r?"default":"outline",size:"small",onClick:()=>t(r),children:Zn(r)},r))})]},r.label))]}),de(Dn,{spacing:1,children:[le(ya,{children:"Variant"}),le(zn,{size:"small",children:["solid","light","dark"].map(e=>le(Wi,{variant:a===e?"default":"outline",size:"small",onClick:()=>i(e),children:Zn(e)},e))})]}),de(Dn,{spacing:1,children:[le(ya,{children:"Size"}),le(zn,{size:"small",children:["small","medium","large"].map(e=>le(Wi,{variant:o===e?"default":"outline",size:"small",onClick:()=>n(e),children:Zn(e)},e))})]}),de(Dn,{spacing:0,children:[de(oa,{style:{color:"var(--Quiet)"},children:["data-theme: ",Zn(e),"light"===a?"-Light":""]}),de(oa,{style:{color:"var(--Quiet)"},children:["data-surface: ","dark"===a?"Surface-Dimmest":"Surface"]}),le(oa,{style:{color:"var(--Quiet)"},children:"bg: var(--Background)"}),le(oa,{style:{color:"var(--Quiet)"},children:"icon: var(--Text)"})]})]})})]})]})}const $n={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},_n={small:{size:32,iconSize:16,fontSize:"13px",px:12,gap:6},medium:{size:48,iconSize:24,fontSize:"14px",px:16,gap:8},large:{size:56,iconSize:36,fontSize:"15px",px:20,gap:10}};function el({children:e,icon:r,label:t,variant:a="solid",color:i="primary",size:o="medium",extended:n=!1,animate:l=!1,disabled:s=!1,onClick:d,ariaLabel:c,className:u="",sx:p={},...m}){"production"!==process.env.NODE_ENV&&"solid"!==a&&console.warn('[Fab] variant="'+a+'" is not a Fab variant; rendering solid. The light variant was removed with the -Light button shades — it named tokens no design system publishes, so it rendered as an unstyled box. For a lighter FAB, put it on data-surface="Surface-Brightest".');const f=function(e){const r=$n[e]||"Primary";return{bg:"var(--Buttons-"+r+"-Button)",text:"var(--Buttons-"+r+"-Text)",border:"var(--Buttons-"+r+"-Border)",hover:"var(--Buttons-"+r+"-Hover)",active:"var(--Buttons-"+r+"-Pressed)"}}(i),g=_n[o]||_n.medium,x=r||e||le(Tr,{sx:{fontSize:g.iconSize}}),b=c||t||"Action";return de(se,{children:[l&&le("style",{children:"\n@keyframes fab-pulse {\n 0% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb, 0,0,0), 0.4); }\n 70% { box-shadow: 0 0 0 12px rgba(var(--pulse-rgb, 0,0,0), 0); }\n 100% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb, 0,0,0), 0); }\n}\n"}),de(h,{component:"button",type:"button",role:"button","aria-label":b,onClick:d,disabled:s,className:"fab fab-solid fab-"+i+" fab-"+o+(n?" fab-extended":"")+(l?" fab-animate":"")+(s?" fab-disabled":"")+(u?" "+u:""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:n?g.gap+"px":0,...n?{height:g.size+"px",borderRadius:g.size/2+"px",px:g.px+"px"}:{width:g.size+"px",height:g.size+"px",borderRadius:"50%"},backgroundColor:f.bg,color:f.text,border:"var(--Button-Border-Width) solid "+f.border,"--_height":g.size+"px","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))",boxShadow:`${gi(i)}, ${di}`,fontSize:g.fontSize,fontFamily:"inherit",fontWeight:600,cursor:s?"not-allowed":"pointer",opacity:s?"var(--Disabled, 0.38)":1,outline:"none",flexShrink:0,transition:"background-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease","&:hover":s?{}:{backgroundColor:f.hover,boxShadow:`${gi(i)}, ${ci}`},"&:active":s?{}:{backgroundColor:f.active,transform:"scale(0.96)",boxShadow:gi(i)},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"},...l&&!s&&{animation:"fab-pulse 2s infinite"},...p},...m,children:[le(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",fontSize:g.iconSize+"px",color:"inherit","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}},children:x}),n&&t&&le(h,{component:"span",sx:{whiteSpace:"nowrap",lineHeight:1},children:t})]})]})}const rl=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",tl=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],al={default:"Tertiary",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function il({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function ol({color:e,selected:r,onClick:t}){const a=al[e]||"Primary";return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+rl(e),"aria-pressed":r,title:rl(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function nl({value:e,onChange:r,placeholder:t,label:a}){return de(h,{children:[a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4},children:a}),le(h,{component:"input",type:"text",value:e,onChange:e=>r(e.target.value),placeholder:t,sx:{width:"100%",padding:"6px 10px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",outline:"none","&:focus":{borderColor:"var(--Focus-Visible)"}}})]})}function ll(){const[e,t]=r("default"),[a,i]=r("medium"),[o,n]=r("Add"),[l,s]=r(!1),[d,c]=r("Create"),[u,p]=r(!1),[m,f]=r(!1),[g,x]=r(null),[b,v]=r("Surface"),y="default"===e?"tertiary":e;return de(h,{sx:{pb:8},children:[le(Zt,{children:"Floating Action Button"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:g,children:le(el,{color:y,size:a,icon:(()=>{const e=zr[o]||zr.Add;return le(Qa,{size:"medium",children:le(e,{})})})(),extended:l,label:d,animate:u,disabled:m,ariaLabel:l?d:o})}),le(Ko,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),r.push("icon={<"+o+"Icon />}"),l&&(r.push("extended"),r.push('label="'+d+'"')),u&&r.push("animate"),m&&r.push("disabled"),r.push('ariaLabel="'+(l?d:o)+'"'),"<Fab\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:g,onThemeChange:x,surface:b,onSurfaceChange:v})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:tl.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(ol,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(il,{label:rl(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3},children:[le(nl,{label:"Icon Name",value:o,onChange:n,placeholder:"Add"}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:[le("a",{href:"https://mui.com/material-ui/material-icons/",target:"_blank",rel:"noopener noreferrer",style:{color:"var(--Hotlink)"},children:"Material icon"})," name (e.g. Add, Edit, Favorite, Share)"]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Extended"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pill shape with icon + text label"})]}),le(hn,{checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Extended"})]}),l&&le(h,{sx:{mt:1.5},children:le(nl,{label:"Label Text",value:d,onChange:c,placeholder:"Create"})}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Animation"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pulse ring effect to draw attention"})]}),le(hn,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Animation"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(hn,{checked:m,onChange:e=>f(e.target.checked),size:"small","aria-label":"Disabled"})]})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:de(k,{spacing:3,children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Role:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<button role="button" aria-label="...">'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Label:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:l?"Extended: visible label provides accessible name.":"Icon-only: aria-label is required."})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Focus:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) with 2px offset."})]}),de(h,{sx:{py:1.5},children:[le(oa,{children:"Disabled:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"HTML disabled attribute. 50% opacity, removed from tab order."})]})]})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Best Practices"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"One per screen:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"FABs represent the primary action. Use at most one per view."})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Extended for clarity:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Use extended variant when the icon alone may be ambiguous."})]}),de(h,{sx:{py:1.5},children:[le(oa,{children:"Animation:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Use sparingly. Respect prefers-reduced-motion."})]})]})]})]})})})]})})})]})]})}const sl={small:"var(--Sm-Rail-Width, 72px)",medium:"var(--Rail-Width, 80px)",large:"var(--Lg-Rail-Width, 96px)"},dl="var(--Icon-Size, 24px)",cl="var(--Sizing-Half, 4px)",ul="var(--Button-Height, 32px)";function hl({items:e=[],sections:t,value:a,defaultValue:o=0,onChange:n,expandable:l=!1,expandedWidth:s="partial",defaultExpanded:d=!1,fabAction:c,labelStyle:u="contained",size:p="medium",className:m="",sx:f={},...g}){const[x,b]=r(o),[v,y]=r(d),S=void 0!==a,k=S?a:x,B=i(e=>{S||b(e),n?.(e)},[S,n]),w=l&&v;return de(h,{component:"nav",role:"navigation","aria-label":"Navigation rail","data-theme":"Default","data-surface":"Surface-Dim",className:"rail"+(l?" rail-expandable":" rail-fixed")+(w?" rail-expanded":" rail-collapsed")+" rail-label-"+("outside"===u?"outside":"contained")+" rail-"+(sl[p]?p:"medium")+" "+m,sx:{display:"flex",flexDirection:"column",width:w?("full"===s?320:240)+"px":sl[p]||sl.medium,minHeight:"100%",gap:w?0:"var(--Sizing-1, 8px)",backgroundColor:"var(--Background)",borderRight:"1px solid var(--Border)",fontFamily:"inherit",transition:"width 0.25s ease",overflow:"hidden",flexShrink:0,...f},...g,children:[l&&le(h,{sx:{display:"flex",justifyContent:w?"flex-start":"center",px:w?1.5:0,height:56,alignItems:"center"},children:le(Wi,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>y(e=>!e),"aria-label":w?"Collapse menu":"Expand menu",children:le(Qa,{size:"small",sx:{color:"inherit"},children:le(w?Rr:Wr,{})})})}),c&&le(h,{sx:{px:w?2:1,py:1,flexShrink:0},children:le(Wi,{variant:"primary-light",size:"medium",onClick:c.onClick,"aria-label":c.label||"Action",startIcon:c.icon?le(Qa,{size:"small",sx:{color:"inherit"},children:c.icon}):void 0,sx:{width:w?"100%":56,borderRadius:w?"28px":"var(--Style-Border-Radius)",justifyContent:w?"flex-start":"center",transition:"all 0.2s ease"},children:w?c.label:null})}),le(h,{role:"tablist","aria-orientation":"vertical",sx:{flex:1,overflowY:"auto",overflowX:"hidden",display:"flex",flexDirection:"column",alignItems:"center",gap:w?0:"var(--Sizing-1-and-Half, 12px)",px:w?0:"var(--Sizing-1, 8px)",width:"100%",boxSizing:"border-box"},children:(()=>{if(t&&t.length>0){const e=[];let r=0;return t.forEach((t,a)=>{a>0&&e.push(le(h,{"aria-hidden":"true",sx:{height:"1px",width:"100%",backgroundColor:"var(--Border-Variant)"}},"divider-"+a)),t.items.forEach(t=>{const a=r;e.push(le(pl,{item:t,selected:k===a,expanded:w,labelStyle:u,onClick:()=>B(a)},"item-"+a)),r++})}),e}return e.map((e,r)=>le(pl,{item:e,selected:k===r,expanded:w,labelStyle:u,onClick:()=>B(r)},r))})()})]})}function pl({item:e,selected:r,expanded:t,labelStyle:a,onClick:i}){const{icon:o,avatar:n,label:l,badge:s,disabled:d}=e,c=r?"var(--Button)":"transparent",u=r||t?"var(--Text)":"var(--Quiet)",p="outside"!==a,m=p&&!t,f=d?{}:{"&:hover":{backgroundColor:"var(--Hover)","& .rail-item-label":{color:"var(--Text)"}},"&:active":{backgroundColor:"var(--Pressed)","& .rail-item-label":{color:"var(--Text)"}},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px","& .rail-item-label":{color:"var(--Text)"}}};return de(h,{component:"button",type:"button",role:"tab","aria-selected":r,"aria-label":l,"aria-disabled":d||void 0,disabled:d||void 0,onClick:d?void 0:i,className:"rail-item"+(r?" rail-item-selected":""),sx:{display:"flex",flexDirection:t?"row":"column",alignItems:"center",justifyContent:t?"flex-start":"center",gap:t?"var(--Sizing-1-and-Half, 12px)":"2px",width:t?"100%":44,minWidth:t?void 0:dl,minHeight:dl,px:t?2.5:0,py:m?cl:0,border:r&&m?"1px solid var(--Border)":"1px solid transparent",borderRadius:t?0:"8px",backgroundColor:m||t?c:"transparent",boxShadow:r&&m?"var(--Shadow-1, none)":"none",color:"inherit",cursor:d?"not-allowed":"pointer",opacity:d?"var(--Disabled, 0.38)":1,fontFamily:"inherit",textAlign:t?"left":"center",transition:"background-color 0.15s ease, color 0.15s ease",outline:"none",...m||t?f:{}},children:[de(h,{sx:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",...t?{flexShrink:0}:{width:p?"100%":ul,height:p?"auto":ul,py:p?cl:0,borderRadius:p?"8px":ul,backgroundColor:p?"transparent":c,border:!p&&r?"1px solid var(--Border)":void 0,transition:"background-color 0.2s ease",...p?{}:f}},children:[n?le(h,{sx:{display:"flex",width:dl,height:dl},children:n}):le(Qa,{size:"small",sx:{color:"inherit"},children:o}),s&&le(ml,{value:s})]}),l&&le(h,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"center",width:"100%"},children:le(ba,{className:"rail-item-label",style:{color:u,textAlign:"center",whiteSpace:t?"nowrap":"normal",overflow:"hidden",textOverflow:"ellipsis",...t?{flex:1}:{maxWidth:"100%"}},children:l})})]})}function ml({value:e}){return le(h,{sx:{position:"absolute",top:-4,right:-6,minWidth:16,height:16,borderRadius:"8px",backgroundColor:"var(--Tags-Error-BG)",color:"var(--Tags-Error-Text)",fontSize:"10px",fontWeight:700,px:.5,display:"flex",alignItems:"center",justifyContent:"center",lineHeight:1},children:e})}const fl=[{icon:le(ye,{}),label:"Home"},{icon:le(Be,{}),label:"Search"},{icon:le(ve,{}),label:"Favorites",badge:3},{icon:le(Ce,{}),label:"Profile"},{icon:le(ke,{}),label:"Settings"}];function gl({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function xl(){const[e,t]=r(!0),[a,i]=r("partial"),[o,n]=r(!1),[l,s]=r(null),[d,c]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Rail"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(vo,{theme:l,surface:d,sx:{minHeight:400,alignItems:"stretch",p:0},children:[le(hl,{items:fl,expandable:e,expandedWidth:a,fabAction:o?{icon:le(Tr,{}),label:"Create",onClick:()=>{}}:void 0}),le(h,{sx:{flex:1,p:3},children:le(oa,{style:{color:"var(--Quiet)"},children:"Main content area"})})]}),le(Ko,{code:(()=>{const r=["items={items}"];return e&&(r.push("expandable"),"partial"!==a&&r.push('expandedWidth="full"')),o&&r.push('fabAction={{ icon: <AddIcon />, label: "Create", onClick: handleCreate }}'),r.push("value={activeIndex}"),r.push("onChange={setActiveIndex}"),"<Rail\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"EXPANDED WIDTH"}),le(k,{direction:"row",spacing:1,children:["partial","full"].map(e=>{return le(gl,{label:(r=e,r?r.charAt(0).toUpperCase()+r.slice(1):""),selected:a===e,onClick:()=>i(e)},e);var r})})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Expandable"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Toggle between collapsed and expanded"})]}),le(hn,{variant:"default-outline",checked:e,onChange:e=>t(e.target.checked),size:"small","aria-label":"Expandable"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"FAB Action"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show create button at top"})]}),le(hn,{variant:"default-outline",checked:o,onChange:e=>n(e.target.checked),size:"small","aria-label":"FAB action"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Nav",value:'<nav role="navigation" aria-label="Navigation rail">'},{label:"Items",value:'role="tab" aria-selected on each item'},{label:"TabList",value:'role="tablist" aria-orientation="vertical"'},{label:"Toggle",value:'aria-label="Expand/Collapse menu"'},{label:"Focus",value:"outline: 3px solid var(--Focus-Visible); outline-offset: -3px"},{label:"Badge",value:"Visual only — announced via aria-label on parent item"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const bl={default:{theme:"Default"},primary:{theme:"Primary"},"primary-light":{theme:"Primary",surface:"Surface-Brightest"},white:{theme:"Neutral",surface:"Surface-Brightest"},black:{theme:"Neutral",surface:"Surface-Dimmest"}};function vl({items:e=[],value:t,defaultValue:a,onChange:o,type:n="floating",orientation:l="horizontal",color:s="default",fab:d,className:c="",sx:u={},...p}){const[m,f]=r(a??null),g=void 0!==t,x=g?t:m,b=i(e=>{const r=x===e?null:e;g||f(r),o?.(r)},[g,x,o]),v=bl[s]||bl.default,y=v.theme,S=v.surface,k="vertical"===l,B="floating"===n,w=le(h,{role:"toolbar","aria-orientation":l,"aria-label":"Toolbar","data-theme":y,"data-surface":S||"Surface",className:"toolbar toolbar-"+n+" toolbar-"+l+" toolbar-"+s+" "+c,sx:{display:"inline-flex",flexDirection:k?"column":"row",alignItems:"center",gap:"4px",backgroundColor:"var(--Background)",border:"1px solid var(--Border-Variant)",borderRadius:B?"56px":"var(--Style-Border-Radius)",padding:B?"8px 16px":"8px",fontFamily:"inherit",flexShrink:0,...B&&{boxShadow:si},...u},...p,children:e.map((e,r)=>{const t=x===r;return le(Wi,{iconOnly:!0,variant:t?"default":"ghost",size:"small",onClick:()=>b(r),"aria-label":e.label,"aria-checked":t,role:"radio",children:le(Qa,{size:"small",sx:{color:"inherit"},children:e.icon})},e.key||r)})});return d&&B?de(h,{sx:{display:"inline-flex",flexDirection:k?"column":"row",alignItems:"center",gap:1},children:[w,le(Wi,{iconOnly:!0,variant:"default",size:"large",onClick:d.onClick,"aria-label":d.label||"Action",sx:{borderRadius:"50%",width:56,height:56,minWidth:"unset",minHeight:"unset"},children:le(Qa,{size:"medium",sx:{color:"inherit"},children:d.icon})})]}):w}const yl=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Sl=[{icon:le(Dr,{}),label:"Bold"},{icon:le(Pr,{}),label:"Italic"},{icon:le(Fr,{}),label:"Underline"},{icon:le(Lr,{}),label:"Align left"},{icon:le(Hr,{}),label:"Align center"}];function kl({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Bl(){const[e,t]=r("floating"),[a,i]=r("default"),[o,n]=r("horizontal"),[l,s]=r(!1),[d,c]=r(null),[u,p]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Toolbar"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:d,surface:u,sx:{minHeight:200},children:le(vl,{items:Sl,type:e,color:a,orientation:o,fab:l&&"floating"===e?{icon:le(Tr,{}),label:"Create",onClick:()=>{}}:void 0})}),le(Ko,{code:(()=>{const r=["items={items}"];return"floating"!==e&&r.push('type="contextual"'),"default"!==a&&r.push('color="'+a+'"'),"horizontal"!==o&&r.push('orientation="vertical"'),l&&r.push('fab={{ icon: <AddIcon />, label: "Create", onClick: handleCreate }}'),r.push("value={selected}"),r.push("onChange={setSelected}"),"<Toolbar\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPE"}),le(k,{direction:"row",spacing:1,children:["floating","contextual"].map(r=>le(kl,{label:yl(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["default","primary","primary-light","white","black"].map(e=>le(kl,{label:yl(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(k,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(kl,{label:yl(e),selected:o===e,onClick:()=>n(e)},e))})]}),"floating"===e&&de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"FAB Button"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Add FAB to the right of toolbar"})]}),le(hn,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"FAB button"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="toolbar" aria-orientation aria-label'},{label:"Items",value:'role="radio" aria-checked on each icon button'},{label:"Selection",value:"Toggle — click selected again to deselect"},{label:"Focus",value:"Uses Button component focus styles"},{label:"Floating",value:"borderRadius 56px, padding 16px, Effect-Level-2 shadow"},{label:"Contextual",value:"Standard border-radius, padding 8px, no shadow"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const wl={small:{height:"var(--Small-Button-Height)",fontSize:"13px",padding:"4px 8px",iconSize:16,btnSize:28},medium:{height:"var(--Button-Height)",fontSize:"14px",padding:"6px 12px",iconSize:18,btnSize:36},large:{height:"var(--Large-Button-Height)",fontSize:"16px",padding:"8px 16px",iconSize:20,btnSize:44}};function Cl({value:e,defaultValue:t=0,onChange:n,min:l,max:s,step:d=1,variant:c="outlined",style:u="outline",color:p="default",size:m="medium",label:f,labelPosition:g="top",placeholder:x,helperText:b,disabled:v=!1,fullWidth:y=!1,className:S="",sx:k={},...B}){const[w,C]=r(t),[T,z]=r(!1),A=a(null),I=void 0!==e,W=I?e:w,R=""!==W&&null!=W,D=(P="default"===p?"primary":p).charAt(0).toUpperCase()+P.slice(1);var P;"production"!==process.env.NODE_ENV&&"light"===u&&console.warn('[NumberField] style="light" was removed and had never done anything — it was read by no code path. For a lighter field use data-surface="Surface-Brightest" on its container.');const F="default"===p?"var(--Border)":"var(--Buttons-"+D+"-Border)",L="default"===p?"var(--Text)":"var(--Text-"+D+")",H="outlined"===c,M="floating"===g,E="top"===g,N=wl[m]||wl.medium,O="small"===m?oa:sa,Q=i(e=>{let r="number"==typeof e?e:parseFloat(e);isNaN(r)&&(r=0),void 0!==l&&r<l&&(r=l),void 0!==s&&r>s&&(r=s),I||C(r),n?.(r)},[I,n,l,s]),V=a(W);V.current=W;const j=i(e=>{if(v)return;const r="number"==typeof V.current?V.current:parseFloat(V.current)||0;void 0!==l&&e<0&&r<=l||void 0!==s&&e>0&&r>=s||Q(r+e*d)},[v,d,l,s,Q]),G=void 0!==l&&W<=l,U=void 0!==s&&W>=s,X=a(null),Y=a(null),Z=i(()=>{X.current&&(clearTimeout(X.current),X.current=null),Y.current&&(clearInterval(Y.current),Y.current=null)},[]),q=i(e=>{v||(Z(),j(e),X.current=setTimeout(()=>{let r=120,t=0;const a=()=>{j(e),t+=1,10===t&&r>60?(clearInterval(Y.current),r=60,Y.current=setInterval(a,r)):30===t&&r>30&&(clearInterval(Y.current),r=30,Y.current=setInterval(a,r))};Y.current=setInterval(a,r)},400))},[v,j,Z]);o(()=>Z,[Z]);const J=a(!1),K=e=>({onPointerDown:r=>{if(void 0===r.button||0===r.button){r.preventDefault();try{r.currentTarget.setPointerCapture?.(r.pointerId)}catch(e){}J.current=!0,q(e)}},onClick:()=>{J.current?J.current=!1:j(e)},onPointerUp:e=>{try{e.currentTarget.releasePointerCapture?.(e.pointerId)}catch(e){}Z()},onPointerCancel:Z,onPointerLeave:Z,onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||r.repeat||(r.preventDefault(),q(e))},onKeyUp:e=>{"Enter"!==e.key&&" "!==e.key||Z()},onBlur:Z}),$=e=>{const r=e.target.value;if(""===r||"-"===r)return void(I||C(r));const t=parseFloat(r);isNaN(t)||Q(t)},_=e=>{"ArrowUp"===e.key&&(e.preventDefault(),j(1)),"ArrowDown"===e.key&&(e.preventDefault(),j(-1))},ee={display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent",color:"default"===p?"var(--Text)":"var(--Text-"+D+")",cursor:"pointer",outline:"none",flexShrink:0,border:"none",padding:0,borderRadius:"var(--Button-Icon-Radius, 0)",transition:"background-color 0.15s ease","&:hover:not(:disabled)":{backgroundColor:"var(--Hover)"},"&:active:not(:disabled)":{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"none",boxShadow:"inset 0 0 0 1px var(--Focus-Visible)"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}},re={},te=()=>E&&f?le(O,{component:"label",style:{display:"block",marginBottom:"6px",color:v?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:v?"var(--Disabled, 0.38)":1},children:f}):null;return de(h,H?{className:"numberfield numberfield-outlined"+(v?" numberfield-disabled":"")+(S?" "+S:""),sx:{width:y?"100%":"auto",fontFamily:"inherit",...k},...B,children:[te(),le(h,{sx:{border:"1px solid "+F,borderRadius:"small"===m?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===m?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",transition:"border-color 0.15s ease",boxShadow:"none",opacity:v?"var(--Disabled, 0.38)":1,"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{...re,children:de(h,{sx:{position:"relative",display:"flex",alignItems:"stretch",minHeight:"max("+N.height+", calc(var(--Sizing-3, 24px) * 2 + 1px))",backgroundColor:"var(--Background)"},children:[M&&f&&le(h,{sx:{position:"absolute",top:R||T?"6px":"50%",left:N.padding.split(" ")[1]||"14px",transform:R||T?"none":"translateY(-50%)",transformOrigin:"top left",color:T?L:"var(--Quiet)",fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",...R||T?{fontSize:"var(--"+(Zi[m]||Zi.medium).shrunk+"-Font-Size)",fontWeight:"var(--"+(Zi[m]||Zi.medium).shrunk+"-Font-Weight)",letterSpacing:"var(--"+(Zi[m]||Zi.medium).shrunk+"-Letter-Spacing)"}:{fontSize:"var(--"+(Zi[m]||Zi.medium).resting+"-Font-Size)",fontWeight:"var(--"+(Zi[m]||Zi.medium).resting+"-Font-Weight)",letterSpacing:"var(--"+(Zi[m]||Zi.medium).resting+"-Letter-Spacing)"},pointerEvents:"none",transition:"top 0.15s ease, font-size 0.15s ease, color 0.15s ease",zIndex:1},children:f}),le(h,{component:"input",ref:A,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof W?W:void 0,"aria-valuemin":l,"aria-valuemax":s,"aria-label":f||"Number",value:W,onChange:$,onKeyDown:_,onFocus:()=>z(!0),onBlur:()=>z(!1),disabled:v,placeholder:M?void 0:x||"",sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:R||T?L:"var(--Quiet)",fontSize:N.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)",padding:M?"22px 14px 6px":N.padding,minWidth:0,"&::placeholder":{color:"var(--Quiet)",opacity:1},"&:disabled":{cursor:"not-allowed"}}}),de(h,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"stretch",borderLeft:"1px solid "+F,flexShrink:0},children:[le(h,{component:"button",type:"button","aria-label":"Increase",...K(1),disabled:v||U,sx:{...ee,width:"var(--Sizing-4, 32px)",height:"var(--Sizing-3, 24px)"},children:le(Qa,{size:"medium",children:le(Mr,{})})}),le(h,{"aria-hidden":"true",sx:{height:"1px",backgroundColor:F,flexShrink:0}}),le(h,{component:"button",type:"button","aria-label":"Decrease",...K(-1),disabled:v||G,sx:{...ee,width:"var(--Sizing-4, 32px)",height:"var(--Sizing-3, 24px)"},children:le(Qa,{size:"medium",children:le(Er,{})})})]})]})})}),b&&le(oa,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:b})]}:{className:"numberfield numberfield-spinner"+(v?" numberfield-disabled":"")+(S?" "+S:""),sx:{fontFamily:"inherit",...k},...B,children:[te(),de(h,{sx:{display:"inline-flex",alignItems:"center",gap:"small"===m?.5:1,opacity:v?"var(--Disabled, 0.38)":1},children:[le(h,{component:"button",type:"button","aria-label":"Decrease",...K(-1),disabled:v||G,sx:{...ee,width:N.btnSize,height:N.btnSize,borderRadius:"small"===m?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"large"===m?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"var(--Button-Icon-Radius, var(--Style-Border-Radius))",border:"1px solid "+F},children:le(Qa,{size:"small",children:le(he,{})})}),le(h,{sx:{border:"1px solid "+F,borderRadius:"small"===m?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===m?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden","&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{...re,children:le(h,{component:"input",ref:A,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof W?W:void 0,"aria-valuemin":l,"aria-valuemax":s,"aria-label":f||"Number",value:W,onChange:$,onKeyDown:_,onFocus:()=>z(!0),onBlur:()=>z(!1),disabled:v,sx:{width:"small"===m?40:56,minHeight:N.height,textAlign:"center",border:"none",outline:"none",backgroundColor:"var(--Hover)",color:"var(--Text)",fontSize:N.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:600,"&:disabled":{cursor:"not-allowed"}}})})}),le(h,{component:"button",type:"button","aria-label":"Increase",...K(1),disabled:v||U,sx:{...ee,width:N.btnSize,height:N.btnSize,borderRadius:"small"===m?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"large"===m?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"var(--Button-Icon-Radius, var(--Style-Border-Radius))",border:"1px solid "+F},children:le(Qa,{size:"small",children:le(Tr,{})})})]}),b&&le(oa,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:b})]})}const Tl=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",zl=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Al({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Il({color:e,selected:r,onClick:t}){const a=Tl(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Wl(){const[e,t]=r("outlined"),[a,i]=r("outline"),[o,n]=r("default"),[l,s]=r("medium"),[d,c]=r("top"),[u,p]=r(!0),[m,f]=r(!1),[g,x]=r(!1),[b,v]=r(null),[y,S]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Number Field"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:b,surface:y,children:le(h,{sx:{width:"100%",maxWidth:"outlined"===e?300:"auto"},children:le(Cl,{variant:e,style:a,color:o,size:l,label:u?"Quantity":void 0,labelPosition:d,min:0,max:100,disabled:m,fullWidth:g&&"outlined"===e})})}),le(Ko,{code:(()=>{const r=['variant="'+e+'"'];return"outline"!==a&&r.push('style="'+a+'"'),"default"!==o&&r.push('color="'+o+'"'),"medium"!==l&&r.push('size="'+l+'"'),u&&r.push('label="Quantity"'),"top"!==d&&r.push('labelPosition="'+d+'"'),r.push("min={0}"),r.push("max={100}"),m&&r.push("disabled"),g&&"outlined"===e&&r.push("fullWidth"),r.push("value={value}"),r.push("onChange={setValue}"),"<NumberField\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:b,onThemeChange:v,surface:y,onSurfaceChange:S})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(k,{direction:"row",spacing:1,children:["outlined","spinner"].map(r=>le(Al,{label:Tl(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["outline","light"].map(e=>le(Al,{label:Tl(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:zl.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Il,{color:e,selected:o===e,onClick:n},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Al,{label:Tl(e),selected:l===e,onClick:()=>s(e)},e))})]}),"outlined"===e&&de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(k,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(Al,{label:"none"===e?"None":Tl(e),selected:d===e,onClick:()=>c(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Label"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Text label above field"})]}),le(hn,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show label"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(hn,{variant:"default-outline",checked:m,onChange:e=>f(e.target.checked),size:"small","aria-label":"Disabled"})]}),"outlined"===e&&de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Full Width"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container"})]}),le(hn,{variant:"default-outline",checked:g,onChange:e=>x(e.target.checked),size:"small","aria-label":"Full width"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="spinbutton" with aria-valuenow, aria-valuemin, aria-valuemax'},{label:"Label",value:"aria-label from label prop. Always provide a label."},{label:"Keyboard",value:"ArrowUp/Down increment/decrement. Direct text entry supported."},{label:"Steppers",value:'aria-label="Increase" / "Decrease" on stepper buttons'},{label:"Focus",value:"outline: 2px solid var(--Focus-Visible); outline-offset: 2px"},{label:"Disabled",value:"HTML disabled. Steppers also disabled at min/max bounds."}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Rl={color:"var(--Text)",backgroundColor:"transparent",textTransform:"none",fontWeight:500,"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},"&.Mui-focusVisible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px",zIndex:1},"&.Mui-disabled":{color:"var(--Quiet)",opacity:"var(--Disabled, 0.38)"},"&.Mui-selected":{backgroundColor:"var(--Buttons-Primary-Button)",color:"var(--Buttons-Primary-Text)","&:hover":{backgroundColor:"var(--Buttons-Primary-Hover)"},"&:active":{backgroundColor:"var(--Buttons-Primary-Pressed)"}}};function Dl({children:e,selected:r=!1,onChange:t,value:a,sx:i={},...o}){return le(A,{value:a,selected:r,onChange:t,sx:{border:"1px solid var(--Border)",...Rl,...i},...o,children:e})}let Pl=!1;function Fl({variant:e="default",exclusive:r=!0,onChange:t,...a}){return Pl||"production"===process.env.NODE_ENV||(Pl=!0,console.warn('[OmniDesign] ToggleButtonGroup is retired — it was a second implementation of ButtonGroup. Use <ButtonGroup variant="outlined" color="…"> with <Button value="…"> segments. Note two prop changes: `exclusive` becomes `multiple` (inverted), and onChange is (value, event) rather than (event, value).')),le(zn,{variant:"outlined",color:e,multiple:!r,onChange:t?(e,r)=>t(r,e):void 0,...a})}const Ll=e=>{const r=r=>le(Fl,{variant:e,...r});return r.displayName=`${e}ToggleButtonGroup`,r},Hl=Ll("default"),Ml=Ll("primary"),El=Ll("secondary"),Nl=Ll("tertiary"),Ol=Ll("neutral"),Ql=Ll("black-white"),Vl=Ll("info"),jl=Ll("success"),Gl=Ll("warning"),Ul=Ll("error");function Xl({label:e,value:t="",onChange:a,placeholder:i,error:o=!1,errorMessage:n="",disabled:l=!1,helperText:s="",variant:d="outlined",size:c="medium",type:u="text",required:p=!1,fullWidth:m=!0,startAdornment:f,endAdornment:g,sx:x={},"aria-label":b,"aria-labelledby":k,onFocus:B,onBlur:w,...C}){const[T,z]=r(!1),A=o?"var(--Buttons-Error-Border)":T?"var(--Buttons-Primary-Border)":"var(--Border)",I=o||T?"var(--Text)":"var(--Text-Quiet)",W="var(--Text)";return de(h,{sx:{width:m?"100%":"auto"},children:[le(v,{label:e,value:t,onChange:a,placeholder:i,disabled:l,variant:d,size:c,type:u,required:p,onFocus:e=>{z(!0),B?.(e)},onBlur:e=>{z(!1),w?.(e)},error:o,fullWidth:m,slotProps:{htmlInput:{...b?{"aria-label":b}:{},...k?{"aria-labelledby":k}:{}},input:{"data-surface":l?"Container-Low":"Container",style:{color:W},startAdornment:f?le(y,{position:"start",children:f}):void 0,endAdornment:g?le(y,{position:"end",children:g}):void 0}},sx:{width:m?"100%":"auto","& .MuiOutlinedInput-root":{backgroundColor:"var(--Background)",transition:"all 0.2s ease-in-out",color:W,"& fieldset":{borderColor:A,transition:"border-color 0.2s ease-in-out"},"&:hover fieldset":{borderColor:o?"var(--Buttons-Error-Border)":"var(--Buttons-Primary-Border)"},"&.Mui-focused fieldset":{borderColor:o?"var(--Buttons-Error-Border)":"var(--Buttons-Primary-Border)",borderWidth:"2px"},"&.Mui-disabled":{backgroundColor:"var(--Background)",opacity:"var(--Disabled, 0.38)"}},"& .MuiInputLabel-root":{color:I,transition:"all 0.2s ease-in-out",fontSize:"14px",fontWeight:500,"&.Mui-focused":{color:"var(--Text)",fontWeight:600},"&.Mui-error":{color:"var(--Text)"},"&.Mui-disabled":{color:"var(--Text-Secondary)",opacity:"var(--Disabled, 0.38)"}},"& .MuiFormHelperText-root":{color:o?"var(--Buttons-Error-Border)":"var(--Text-Secondary)",marginTop:"4px",fontSize:"12px"},...x},...C}),o&&n&&le(S,{error:!0,sx:{color:"var(--Buttons-Error-Border)",marginTop:"4px",fontSize:"12px",fontWeight:500},children:n})]})}function Yl({label:e="Email",...r}){return le(Xl,{label:e,type:"email",placeholder:"user@example.com",...r})}function Zl({label:e="Password",...r}){return le(Xl,{label:e,type:"password",...r})}function ql({label:e="Search",placeholder:r="Type to search...",...t}){return le(Xl,{label:e,type:"search",placeholder:r,...t})}function Jl({label:e="Number",...r}){return le(Xl,{label:e,type:"number",...r})}function Kl({label:e="Phone",placeholder:r="(555) 123-4567",...t}){return le(Xl,{label:e,type:"tel",placeholder:r,...t})}function $l({label:e="Website",placeholder:r="https://example.com",...t}){return le(Xl,{label:e,type:"url",placeholder:r,...t})}function _l({error:e=!1,errorMessage:r="",rows:t=4,fullWidth:a=!0,...i}){return le($i,{multiline:!0,rows:t,fullWidth:a,...e&&{validation:"error",validationMessage:r},...i})}function es({fields:e=[],spacing:r=2,sx:t={},...a}){return le(h,{sx:{display:"flex",flexDirection:"column",gap:`var(--Spacing-${r})`,width:"100%",...t},...a,children:e.map(e=>le(Xl,{...e},e.id))})}const rs=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",ts=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],as=[{value:"apple",label:"Apple"},{value:"banana",label:"Banana"},{value:"cherry",label:"Cherry"},{value:"date",label:"Date"},{value:"elderberry",label:"Elderberry"}],is=[{value:"primary",label:"Primary",color:"var(--Buttons-Primary-Button)"},{value:"secondary",label:"Secondary",color:"var(--Buttons-Secondary-Button)"},{value:"tertiary",label:"Tertiary",color:"var(--Buttons-Tertiary-Button)"},{value:"neutral",label:"Neutral",color:"var(--Buttons-Neutral-Button)"},{value:"info",label:"Info",color:"var(--Buttons-Info-Button)"},{value:"success",label:"Success",color:"var(--Buttons-Success-Button)"},{value:"warning",label:"Warning",color:"var(--Buttons-Warning-Button)"},{value:"error",label:"Error",color:"var(--Buttons-Error-Button)"}];function os({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function ns({color:e,selected:r,onClick:t}){const a=rs(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function ls(){const[e,t]=r("outline"),[a,i]=r("default"),[o,n]=r("medium"),[l,s]=r("top"),[d,c]=r("Fruit"),[u,p]=r(!1),[m,f]=r(!1),[g,x]=r(!0),[b,v]=r(!1),[y,S]=r("Search"),[B,w]=r(""),[T,z]=r(null),[A,I]=r("Surface"),[W,R]=r(!1),[D,P]=r(!0);return de(h,{sx:{pb:8},children:[le(Zt,{children:"Select"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:T,surface:A,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(to,{variant:e,color:a,size:o,label:d,labelPosition:l,mode:W?"color":void 0,showColorLabels:W?D:void 0,options:W?is:as,value:B,onChange:w,showDividers:u,disabled:m,fullWidth:g,startDecoration:b?(()=>{const e=zr[y]||zr.Search;return le(Qa,{size:"small",children:le(e,{})})})():void 0})})}),le(Ko,{code:(()=>{const r=[];return"outline"!==e&&r.push('variant="'+e+'"'),"default"!==a&&r.push('color="'+a+'"'),"medium"!==o&&r.push('size="'+o+'"'),d&&r.push('label="'+d+'"'),"top"!==l&&r.push('labelPosition="'+l+'"'),W&&r.push('mode="color"'),W&&!D&&r.push("showColorLabels={false}"),u&&r.push("showDividers"),m&&r.push("disabled"),g&&r.push("fullWidth"),b&&r.push("startDecoration={<Icon><"+y+"Icon /></Icon>}"),r.push("options={options}"),r.push("value={value}"),r.push("onChange={setValue}"),"<Select\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:T,onThemeChange:z,surface:A,onSurfaceChange:I})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["outline","light"].map(r=>le(os,{label:rs(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:ts.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(ns,{color:e,selected:a===e,onClick:i},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(os,{label:rs(e),selected:o===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(k,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(os,{label:"none"===e?"None":rs(e),selected:l===e,onClick:()=>s(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Start Icon"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Icon rendered before the value"})]}),le(hn,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Start icon"})]}),b&&de(h,{sx:{mt:2},children:[le($i,{label:"Icon Name",value:y,onChange:e=>S(e.target.value),placeholder:"Search",variant:"primary-outline",size:"small",fullWidth:!0}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:[le("a",{href:"https://mui.com/material-ui/material-icons/",target:"_blank",rel:"noopener noreferrer",style:{color:"var(--Hotlink)"},children:"Material icon"})," name (e.g. Search, Add, Edit, Filter, Sort, Star)"]})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Dividers"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Lines between options"})]}),le(hn,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show dividers"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(hn,{checked:m,onChange:e=>f(e.target.checked),size:"small","aria-label":"Disabled"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Color Mode"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Render swatches alongside each option. Swatch size scales to Select height, radius follows the brand's button radius."})]}),le(hn,{checked:W,onChange:e=>R(e.target.checked),size:"small","aria-label":"Color mode"})]}),W&&de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Color Labels"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Hide to render a swatch-only trigger (no text). Useful for compact color pickers."})]}),le(hn,{checked:D,onChange:e=>P(e.target.checked),size:"small","aria-label":"Show color labels"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Full Width"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(hn,{checked:g,onChange:e=>x(e.target.checked),size:"small","aria-label":"Full width"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Trigger",value:'role="combobox" aria-expanded="true|false" aria-haspopup="listbox"'},{label:"Dropdown",value:'role="listbox" aria-label="..."'},{label:"Options",value:'role="option" aria-selected="true|false"'},{label:"Label",value:"aria-label from label prop. Always provide a label."},{label:"Keyboard",value:"Enter/Space opens. Escape closes. Arrow keys when open."},{label:"Focus",value:"outline: 2px solid var(--Focus-Visible); outline-offset: 2px (on outer shell)"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const ss={small:{height:"var(--Small-Button-Height)",fontSize:"13px",padding:"4px 8px",iconSize:16},medium:{height:"var(--Button-Height)",fontSize:"14px",padding:"6px 12px",iconSize:18},large:{height:"var(--Large-Button-Height)",fontSize:"16px",padding:"8px 16px",iconSize:20}},ds={small:{height:"48px",fontSize:"13px",padding:"20px 12px 4px",leftPad:12},medium:{height:"56px",fontSize:"14px",padding:"22px 14px 6px",leftPad:14},large:{height:"64px",fontSize:"16px",padding:"24px 16px 6px",leftPad:16}};function cs({options:e=[],value:t,defaultValue:n=null,onChange:l,inputValue:s,onInputChange:d,label:c,labelPosition:u="top",placeholder:p="Type to search",helperText:m,size:f="medium",variant:g="outline",color:x="primary",loading:b=!1,loadingText:v="Loading…",noOptionsText:y="No options",freeSolo:S=!1,clearable:k=!0,disabled:B=!1,fullWidth:w=!1,className:C="",sx:T={},...z}){const A=(I="default"===x?"primary":x).charAt(0).toUpperCase()+I.slice(1);var I;"production"!==process.env.NODE_ENV&&"light"===g&&console.warn('[Autocomplete] variant="light" was removed and had never done anything — it was read by no code path. For a lighter Autocomplete use data-surface="Surface-Brightest" on its container.');const W="light"===g?"outline":g,R="var(--Buttons-"+A+"-Border)",D="default"===x?"var(--Text)":"var(--Text-"+A+")",[P,F]=r(n),[L,H]=r(n?"string"==typeof n?n:n.label||"":""),[M,E]=r(!1),[N,O]=r(!1),[Q,V]=r(-1),j=a(null),G=a(null),U=void 0!==t,X=void 0!==s,Y=U?t:P,Z=X?s:L,q="floating"===u,J="top"===u,K=""!==Z,$=q?ds[f]||ds.medium:ss[f]||ss.medium,_=Z?e.filter(e=>("string"==typeof e?e:e.label).toLowerCase().includes(Z.toLowerCase())):e,ee=i(e=>{X||H(e),d?.(e)},[X,d]),re=i(e=>{const r="string"==typeof e?e:e.label;U||F(e),ee(r),l?.(e),E(!1),V(-1),G.current?.focus()},[U,l,ee]);o(()=>{if(!M)return;const e=e=>{j.current&&!j.current.contains(e.target)&&E(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[M]);return de(h,{ref:j,className:"autocomplete autocomplete-"+f+" autocomplete-variant-"+W+(M?" autocomplete-open":"")+(B?" autocomplete-disabled":"")+(C?" "+C:""),sx:{position:"relative",width:w?"100%":"auto",display:"inline-block",fontFamily:"inherit",...T},...z,children:[J&&c&&le("small"===f?oa:sa,{component:"label",style:{display:"block",marginBottom:"6px",color:B?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:B?"var(--Disabled, 0.38)":1},children:c}),le(h,{sx:{border:"1px solid "+R,borderRadius:"small"===f?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===f?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",transition:"border-color 0.15s ease",boxShadow:"none",opacity:B?"var(--Disabled, 0.38)":1,"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{children:de(h,{sx:{position:"relative",display:"flex",alignItems:"center",minHeight:$.height,backgroundColor:"var(--Hover)"},children:[q&&c&&le(h,{sx:{position:"absolute",top:K||N?"6px":"50%",left:($.leftPad||14)+"px",transform:K||N?"scale(0.75)":"translateY(-50%)",transformOrigin:"top left",color:N?D:"var(--Quiet)",fontSize:$.fontSize,fontWeight:400,pointerEvents:"none",zIndex:1,transition:"top 0.15s ease, transform 0.15s ease, color 0.15s ease"},children:c}),le(h,{component:"input",ref:G,type:"text",role:"combobox","aria-expanded":M,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-label":c||p,autoComplete:"off",value:Z,onChange:e=>{ee(e.target.value),M||E(!0),V(-1)},onKeyDown:e=>{if("Escape"!==e.key){if("ArrowDown"===e.key){if(e.preventDefault(),!M)return void E(!0);V(e=>Math.min(e+1,_.length-1))}"ArrowUp"===e.key&&(e.preventDefault(),V(e=>Math.max(e-1,0))),"Enter"===e.key&&M&&Q>=0&&_[Q]&&(e.preventDefault(),re(_[Q]))}else E(!1)},onFocus:()=>{O(!0),E(!0)},onBlur:()=>O(!1),disabled:B,placeholder:q?void 0:p,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:K||N?D:"var(--Quiet)",fontSize:$.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)",padding:$.padding,minWidth:0,"&::placeholder":{color:"var(--Quiet)",opacity:1,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)"},"&:disabled":{cursor:"not-allowed"}}}),b&&M&&le(Nr,{size:16,sx:{mr:1,color:"var(--Quiet)"}}),k&&Z&&!B&&le(h,{component:"button",type:"button","aria-label":"Clear",onClick:()=>{U||F(null),ee(""),l?.(null),G.current?.focus()},sx:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,borderRadius:"50%",mr:.5,border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:"pointer","&:hover":{color:"var(--Text)",backgroundColor:"var(--Hover)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)"}},children:le(Rr,{sx:{fontSize:14}})}),le(h,{component:"button",type:"button","aria-label":M?"Close":"Open",tabIndex:-1,onClick:()=>{B||E(!M)},sx:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:"100%",border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:B?"not-allowed":"pointer"},children:le(be,{sx:{fontSize:($.iconSize||18)+"px",transform:M?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})})]})})}),m&&le(h,{sx:{fontSize:"12px",color:"var(--Quiet)",mt:"4px",ml:"2px"},children:m}),M&&le(h,{role:"listbox","aria-label":c||"Options",sx:{position:"absolute",top:"100%",left:0,right:0,mt:.5,backgroundColor:"var(--Hover)",border:"1px solid var(--Buttons-Default-Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:"none",zIndex:9999,maxHeight:240,overflowY:"auto",py:.5},children:b?le(h,{sx:{px:1.5,py:2,textAlign:"center",fontSize:$.fontSize,color:"var(--Quiet)"},children:v}):0===_.length?le(h,{sx:{px:1.5,py:2,textAlign:"center",fontSize:$.fontSize,color:"var(--Quiet)"},children:y}):_.map((e,r)=>{const t="string"==typeof e?e:e.label,a="string"==typeof e?e:e.value,i=t===(Y?"string"==typeof Y?Y:Y.label:null),o=function(e,r){return r?{backgroundColor:"transparent",color:"var(--Text)",fontWeight:600}:e?{backgroundColor:"var(--Hover)",color:"var(--Text)"}:{backgroundColor:"transparent",color:"var(--Text-Quiet)"}}(r===Q,i);return de(h,{role:"option","aria-selected":i,onClick:()=>re(e),onMouseEnter:()=>V(r),sx:{display:"flex",alignItems:"center",gap:1,px:1.5,py:0,mx:.5,minHeight:$.height,borderRadius:"4px",cursor:"pointer",fontSize:$.fontSize,fontFamily:"inherit",...o,transition:"background-color 0.1s ease","&:active":{backgroundColor:"var(--Pressed)"}},children:[le(oa,{style:{flex:1,color:"inherit",fontWeight:"inherit"},children:t}),i&&le(Qa,{size:"small",sx:{opacity:.6,flexShrink:0},children:le(ue,{})})]},a||t)})})]})}const us=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",hs=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],ps=[{value:"apple",label:"Apple"},{value:"banana",label:"Banana"},{value:"cherry",label:"Cherry"},{value:"date",label:"Date"},{value:"elderberry",label:"Elderberry"},{value:"fig",label:"Fig"},{value:"grape",label:"Grape"}];function ms({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function fs({color:e,selected:r,onClick:t}){const a=us(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function gs(){const[e,t]=r("outline"),[a,i]=r("default"),[o,n]=r("medium"),[l,s]=r("top"),[d,c]=r("Fruit"),[u,p]=r(!0),[m,f]=r(!1),[g,x]=r(!0),[b,v]=r(null),[y,S]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Autocomplete"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:b,surface:y,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(cs,{variant:e,color:a,size:o,label:d,labelPosition:l,options:ps,clearable:u,disabled:m,fullWidth:g})})}),le(Ko,{code:(()=>{const r=[];return"outline"!==e&&r.push('variant="'+e+'"'),"default"!==a&&r.push('color="'+a+'"'),"medium"!==o&&r.push('size="'+o+'"'),d&&r.push('label="'+d+'"'),"top"!==l&&r.push('labelPosition="'+l+'"'),u||r.push("clearable={false}"),m&&r.push("disabled"),g&&r.push("fullWidth"),r.push("options={options}"),r.push("onChange={handleChange}"),"<Autocomplete\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:b,onThemeChange:v,surface:y,onSurfaceChange:S})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["outline","light"].map(r=>le(ms,{label:us(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:hs.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(fs,{color:e,selected:a===e,onClick:i},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(ms,{label:us(e),selected:o===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(k,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(ms,{label:"none"===e?"None":us(e),selected:l===e,onClick:()=>s(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Clearable"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear button when has value"})]}),le(hn,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clearable"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(hn,{checked:m,onChange:e=>f(e.target.checked),size:"small","aria-label":"Disabled"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Full Width"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(hn,{checked:g,onChange:e=>x(e.target.checked),size:"small","aria-label":"Full width"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Input",value:'role="combobox" aria-expanded aria-haspopup="listbox" aria-autocomplete="list"'},{label:"Dropdown",value:'role="listbox" aria-label="..."'},{label:"Options",value:'role="option" aria-selected="true|false"'},{label:"Label",value:"aria-label from label prop. Always provide a label."},{label:"Keyboard",value:"Arrow keys navigate, Enter selects, Escape closes."},{label:"Focus",value:"outline: 2px solid var(--Focus-Visible); outline-offset: 2px (on outer shell)"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const xs=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],bs=mi,vs={small:{touchTarget:24,box:16,dot:8,gap:4,LabelComp:oa},medium:{touchTarget:24,box:20,dot:9.5,gap:8,LabelComp:sa},large:{touchTarget:24,box:24,dot:9.5,gap:12,LabelComp:pa}};function ys({size:e,color:r,checked:t}){const a=bs(r),i="Default"===a?"var(--Quiet)":"var(--Buttons-"+a+"-Border)",o="var(--Buttons-"+a+"-Border)",n=vs[e]||vs.medium;return le(h,{className:"radio-circle-icon",sx:{width:n.box,height:n.box,boxSizing:"border-box",borderRadius:"50%",border:"2px solid "+i,overflow:"hidden",flexShrink:0,backgroundColor:"var(--Background)",display:"flex",alignItems:"center",justifyContent:"center",transition:"border-color 0.15s ease-in-out"},children:t&&le(h,{sx:{width:n.dot,height:n.dot,borderRadius:"50%",backgroundColor:o,transition:"transform 0.15s ease-in-out"}})})}function Ss({theme:e,surface:r,color:t="primary",size:a="medium",label:i,labelPlacement:o="end",checked:n,disabled:l=!1,onChange:s,name:d,value:c,className:u="",sx:h={},"aria-label":p,"aria-labelledby":m,"aria-describedby":f,inputProps:g={},...x}){const v=xs.includes(t)?t:"primary",y=vs[a]||vs.medium,S=y.LabelComp,k=(y.touchTarget-y.box)/2,B={...g,...p&&{"aria-label":p},...m&&{"aria-labelledby":m},...f&&{"aria-describedby":f}},w=le(I,{checked:n,disabled:l,onChange:s,name:d,value:c,icon:le(ys,{size:a,color:v,checked:!1}),checkedIcon:le(ys,{size:a,color:v,checked:!0}),"data-theme":e||void 0,"data-surface":r||void 0,className:"radio-"+v+" "+u,inputProps:B,disableRipple:!0,sx:{padding:k+"px",width:y.touchTarget,height:y.touchTarget,minWidth:y.touchTarget,minHeight:y.touchTarget,boxSizing:"border-box",borderRadius:"50%",color:"inherit",transition:"background-color 0.15s ease-in-out","&.Mui-checked":{color:"inherit"},"&:hover":{backgroundColor:"transparent"},"&:hover .radio-circle-icon":{borderColor:"var(--Text)"},"&:active .radio-circle-icon":{borderColor:"var(--Text)",backgroundColor:"var(--Pressed)"},"&.Mui-disabled .radio-circle-icon":{opacity:"var(--Disabled, 0.38)"},"&.Mui-focusVisible .radio-circle-icon":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none"},...h},...x});return i?le(b,{control:w,label:le(S,{component:"span",sx:{color:l?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:i}),labelPlacement:o,disabled:l,sx:{marginLeft:0,marginRight:0,gap:y.gap+"px",alignItems:"center","&.Mui-disabled .MuiTypography-root":{color:"var(--Text-Quiet)",opacity:.6}}}):w}function ks({color:e="primary",size:r="medium",label:t,options:a=[],value:i,onChange:o,orientation:n="vertical",labelPlacement:l="end",disabled:s=!1,spacing:d=1,name:c,className:u="",sx:h={},"aria-label":p,"aria-labelledby":m,...f}){return de(W,{component:"fieldset",disabled:s,className:"radio-group-"+e+" "+u,sx:h,children:[t&&le(R,{component:"legend",sx:{color:s?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===r?"13px":"15px",fontWeight:500,mb:1,"&.Mui-focused":{color:"var(--Text)"},"&.Mui-disabled":{color:"var(--Text-Quiet)",opacity:"var(--Disabled, 0.38)"}},children:t}),le(D,{value:i,onChange:o,name:c,"aria-label":p,"aria-labelledby":m,row:"horizontal"===n,sx:{display:"flex",flexDirection:"horizontal"===n?"row":"column",flexWrap:"horizontal"===n?"wrap":"nowrap",alignItems:"horizontal"===n?"center":"flex-start",gap:d},...f,children:a.map(t=>le(Ss,{color:e,size:r,label:t.label,labelPlacement:l,value:t.value,disabled:t.disabled||s},t.value))})]})}const Bs=Ss,ws=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];const Cs={small:{visual:12,track:2,labelSize:11},medium:{visual:16,track:4,labelSize:12},large:{visual:20,track:6,labelSize:13}};function Ts({theme:e,surface:r,variant:t="primary",size:a="medium",value:i,defaultValue:o,onChange:n,onChangeCommitted:l,min:s=0,max:d=100,step:c=1,marks:u=!1,valueLabelDisplay:p="off",orientation:m="horizontal",track:f="normal",disabled:g=!1,label:x,name:b,className:v="",sx:y={},"aria-label":S,"aria-labelledby":k,...B}){const w=function(){const e={};return ws.forEach(r=>{e[r]=function(e){const r=(t=e).charAt(0).toUpperCase()+t.slice(1);var t;return{thumb:"var(--Border)",thumbBorder:"1px solid var(--Background)",track:"default"===e?"var(--Button)":"var(--Buttons-"+r+"-Button)",trackBorder:"1px solid var(--Border)",rail:"var(--Background)",railBorder:"1px solid var(--Border)",valueLabel:"var(--Text)",valueLabelText:"var(--Background)"}}(r)}),e}(),C=w[t]||w.primary,T=Cs[a]||Cs.medium,z="vertical"===m,A=Array.isArray(i)||Array.isArray(o),I="inverted"===f,W="small"===a?oa:sa,R=T.track+2,D=I?C.track:C.rail,F=C.railBorder,L=I?C.rail:C.track,H=C.trackBorder,M={color:"transparent"===C.track?C.thumb:C.track,height:z?void 0:R,width:z?R:void 0,"& .MuiSlider-rail":{backgroundColor:D,border:F||"none",boxSizing:F?"content-box":"border-box",opacity:1,height:z?void 0:F?T.track:R,width:z?F?T.track:R:void 0,borderRadius:R/2},"& .MuiSlider-track":{boxSizing:H?"content-box":"border-box",backgroundColor:L,border:H||"none",height:z?void 0:H?T.track:R,width:z?H?T.track:R:void 0,borderRadius:R/2},"& .MuiSlider-thumb":{width:24,height:24,backgroundColor:"transparent",border:"none",boxShadow:"none",transition:"none","--_height":T.visual+"px","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))","&::after":{display:"none"},"&::before":{content:'""',position:"absolute",width:T.visual,height:T.visual,borderRadius:"50%",backgroundColor:C.thumb,border:C.thumbBorder||"none",boxShadow:`${gi(t)}, ${li}`,transition:"box-shadow 0.15s ease-in-out",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},"&:hover::before":{boxShadow:`${gi(t)}, ${si}`},"&.Mui-focusVisible::before, &:focus-visible::before":{boxShadow:`${gi(t)}, ${si}, 0 0 0 1px var(--Focus-Visible)`},"&.Mui-active::before":{boxShadow:gi(t)},"&.Mui-focusVisible":{outline:"none",borderRadius:"50%"},"&.Mui-focusVisible::before":{boxShadow:`${gi(t)}, ${si}`}},...A?z?{'& .MuiSlider-thumb[data-index="0"]::before':{top:0,left:"50%",transform:"translateX(-50%)"},'& .MuiSlider-thumb[data-index="1"]::before':{top:"auto",bottom:0,left:"50%",transform:"translateX(-50%)"}}:{'& .MuiSlider-thumb[data-index="0"]::before':{left:"auto",right:0,top:"50%",transform:"translateY(-50%)"},'& .MuiSlider-thumb[data-index="1"]::before':{left:0,right:"auto",top:"50%",transform:"translateY(-50%)"}}:{},"& .MuiSlider-valueLabel":{backgroundColor:C.valueLabel,color:C.valueLabelText,fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",fontSize:"var(--Label-ExtraSmall-Font-Size)",fontWeight:"var(--Label-ExtraSmall-Font-Weight)",letterSpacing:"var(--Label-ExtraSmall-Letter-Spacing)",lineHeight:"var(--Label-ExtraSmall-Line-Height)",borderRadius:"var(--Sizing-1, 8px)",padding:"var(--Sizing-Half, 4px) var(--Sizing-1, 8px)","&::before":{backgroundColor:C.valueLabel}},"& .MuiSlider-mark":{backgroundColor:C.rail,width:z?R:2,height:z?2:R,borderRadius:1},"& .MuiSlider-markActive":{backgroundColor:C.thumb,opacity:.6},"& .MuiSlider-markLabel":{color:"var(--Text-Quiet)",fontSize:T.labelSize},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none","& .MuiSlider-thumb::before":{boxShadow:"none"}},...y},E=le(P,{value:i,defaultValue:o,onChange:n,onChangeCommitted:l,min:s,max:d,step:c,marks:u,valueLabelDisplay:p,orientation:m,track:"inverted"===f?"inverted":!1!==f&&"normal",disabled:g,name:b,"aria-label":S,"aria-labelledby":k,slotProps:g?{input:{"aria-disabled":"true"}}:void 0,className:"slider-"+t+" "+v,"data-theme":e||void 0,"data-surface":r||void 0,sx:M,...B});return x?de(h,{sx:{width:z?"auto":"100%",height:z?"100%":"auto",display:"flex",flexDirection:"column",gap:"4px"},children:[le(W,{component:"label",sx:{color:g?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===a?"13px":"15px",fontWeight:500,opacity:g?"var(--Disabled, 0.38)":1},children:x}),E]}):E}const zs=Ts,As=Ts,Is={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Ws={small:{iconSize:16,minHit:24,gap:0,focusInset:-3,focusWidth:3},medium:{iconSize:24,minHit:24,gap:0,focusInset:-3,focusWidth:3},large:{iconSize:36,minHit:void 0,gap:2,focusInset:2,focusWidth:2}};function Rs({theme:e,surface:t,value:a,defaultValue:i,onChange:o,max:n=5,precision:l=1,color:s="default",size:d="medium",readOnly:c=!1,disabled:u=!1,emptyLabel:p="No rating",className:m="",sx:f={},...g}){const[x,b]=r(i??null),[v,y]=r(null),S=void 0!==a,k=S?a:x,B=null!==v?v:k,w=.5===l,C=!c&&!u,T=Is[s]||Is.default,z=Ws[d]||Ws.medium,A="var(--Buttons-"+T+"-Button)",I="var(--Buttons-"+T+"-Border)",W=e=>{if(!C)return;const r=e===k?null:e;S||b(r),o?.(r)},R=(e,r)=>{if(!C||!w)return;y(r?e+.5:e+1)},D=C?{"&:hover":{filter:"drop-shadow(0 2px 4px rgba(var(--Dropshadow-Color), 0.22)) drop-shadow(0 1px 2px rgba(var(--Dropshadow-Color), 0.28))","& .MuiSvgIcon-root":{stroke:"var(--Buttons-"+T+"-Border)",strokeWidth:1}}}:{},P=e=>{const r=e+1,t=e+.5,a=null!==B&&r<=B,i=null!==B&&!a&&w&&t<=B,o=i?Or:we,s=((e,r)=>e||r?{color:A,filter:"drop-shadow(0 1px 2px rgba(var(--Dropshadow-Color), 0.28))",transition:"filter 0.15s ease","& .MuiSvgIcon-root":{stroke:I,strokeWidth:.5}}:{color:"transparent","& .MuiSvgIcon-root":{stroke:"var(--Quiet)",strokeWidth:1}})(a,i);return w&&C?de(h,{sx:{position:"relative",display:"inline-flex",cursor:"pointer",...s,...D},onMouseLeave:()=>y(null),children:[le(h,{sx:{position:"absolute",left:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>R(e,!0),onClick:()=>W(t)}),le(h,{sx:{position:"absolute",right:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>R(e,!1),onClick:()=>W(r)}),le(o,{sx:{fontSize:z.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})]},e):le(h,{component:C?"button":"span",type:C?"button":void 0,role:C?"radio":void 0,"aria-checked":a,"aria-label":r+" star"+(1!==r?"s":""),tabIndex:C?0:-1,onClick:()=>W(r),onMouseEnter:()=>C&&y(r),onMouseLeave:()=>C&&y(null),onKeyDown:e=>{if(C&&("ArrowRight"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),W(Math.min((k||0)+l,n))),"ArrowLeft"===e.key||"ArrowDown"===e.key)){e.preventDefault();const r=Math.max((k||0)-l,0);W(r||null)}},sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",padding:0,...z.minHit&&{minWidth:z.minHit+"px",minHeight:z.minHit+"px"},cursor:u?"not-allowed":C?"pointer":"default",outline:"none",transition:"transform 0.1s ease",...s,...D,"&:active":C?{transform:"scale(0.95)"}:{},"&:focus-visible":C?{outline:z.focusWidth+"px solid var(--Focus-Visible)",outlineOffset:z.focusInset+"px",borderRadius:"2px"}:{},"&:disabled":{cursor:"not-allowed",opacity:"var(--Disabled, 0.38)"}},children:le(o,{sx:{fontSize:z.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})},e)};return de(h,{role:C?"radiogroup":"img","aria-label":"Rating"+(null!==k?": "+k+" of "+n+" stars":": "+p),"data-theme":e||void 0,"data-surface":t||void 0,className:"rating rating-"+s+" rating-"+d+(c?" rating-readonly":"")+(u?" rating-disabled":"")+(null===k?" rating-empty":"")+(m?" "+m:""),sx:{display:"inline-flex",alignItems:"center",gap:z.gap+"px",opacity:u?"var(--Disabled, 0.38)":1,fontFamily:"inherit",...f},...g,children:[Array.from({length:n},(e,r)=>P(r)),null===k&&!v&&le(ga,{style:{color:"var(--Quiet)",marginLeft:4},children:p})]})}const Ds={small:{height:"var(--Small-Button-Height)",fontSize:"13px",iconSize:18,px:12},medium:{height:"var(--Button-Height)",fontSize:"14px",iconSize:20,px:16},large:{height:"var(--Large-Button-Height)",fontSize:"15px",iconSize:22,px:16}};function Ps({value:e,defaultValue:t="",onChange:i,onFocus:o,onBlur:n,onClear:l,onSubmit:s,placeholder:d="Search…",size:c="medium",color:u="default",showClearButton:p=!0,disabled:m=!1,ariaLabel:f="Search",className:g="",sx:x={},...b}){const[v,y]=r(t),[S,k]=r(!1),B=a(null),w=void 0!==e,C=w?e:v,T=C.length>0,z=S||T,A=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===u?"primary":u),I="default"===u?"var(--Text)":"var(--Text-"+A+")",W=Ds[c]||Ds.medium,R=()=>{w||y(""),i?.(""),l?.(),B.current?.focus()};return le(h,{className:"search-field search-field-"+c+(S?" search-field-focused":"")+(T?" search-field-filled":"")+(m?" search-field-disabled":"")+(g?" "+g:""),sx:{display:"flex",boxSizing:"border-box",...x},...b,children:le(h,{sx:{border:"1px solid "+("var(--Buttons-"+A+"-Border)"),borderRadius:"small"===c?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===c?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",opacity:m?"var(--Disabled, 0.38)":1,transition:"border-color 0.15s ease, box-shadow 0.15s ease",boxShadow:"none",width:"100%",...!m&&{"&:hover":{borderColor:"var(--Buttons-"+A+"-Hover)"},"&:active":{borderColor:"var(--Buttons-"+A+"-Pressed)"}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:de(h,{sx:{display:"flex",alignItems:"center",gap:1,width:"100%",boxSizing:"border-box",minHeight:W.height,px:W.px+"px",backgroundColor:"var(--Hover)"},children:[le(Qa,{size:"small",sx:{color:z?I:"var(--Quiet)",flexShrink:0,transition:"color 0.15s ease"},children:le(Be,{})}),le(h,{component:"input",ref:B,type:"text",role:"searchbox","aria-label":f,value:C,onChange:e=>{const r=e.target.value;w||y(r),i?.(r,e)},onFocus:e=>{k(!0),o?.(e)},onBlur:e=>{k(!1),n?.(e)},onKeyDown:e=>{"Enter"===e.key&&s?.(C,e),"Escape"===e.key&&T&&R()},placeholder:d,disabled:m,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:z?I:"var(--Quiet)",fontSize:W.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)",minWidth:0,"&::placeholder":{color:"var(--Quiet)",opacity:1,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)"},"&:disabled":{cursor:"not-allowed"}}}),p&&T&&!m&&le(h,{component:"button",type:"button","aria-label":"Clear search",onClick:R,sx:{display:"flex",alignItems:"center",justifyContent:"center",width:W.iconSize+4,height:W.iconSize+4,borderRadius:"50%",border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:"pointer",flexShrink:0,padding:0,transition:"color 0.15s ease, background-color 0.15s ease","&:hover":{backgroundColor:"var(--Hover)",color:I},"&:active":{backgroundColor:"var(--Pressed)",color:I},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"}},children:le(Qa,{size:"small",children:le(Rr,{})})})]})})})}const Fs=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Ls=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Hs({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Ms({color:e,selected:r,onClick:t}){const a=Fs(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Es(){const[e,t]=r("default"),[a,i]=r("medium"),[o,n]=r(!1),[l,s]=r(!0),[d,c]=r(null),[u,p]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Search Field"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:d,surface:u,children:le(h,{sx:{width:"100%",maxWidth:400},children:le(Ps,{color:e,size:a,disabled:o,showClearButton:l,placeholder:"Search..."})})}),le(Ko,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),l||r.push("showClearButton={false}"),o&&r.push("disabled"),r.push('placeholder="Search..."'),r.push("onChange={handleSearch}"),"<SearchField\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Ls.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Ms,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Hs,{label:Fs(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Clear Button"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear when has value"})]}),le(hn,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Clear button"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(hn,{variant:"default-outline",checked:o,onChange:e=>n(e.target.checked),size:"small","aria-label":"Disabled"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="searchbox" on the input element'},{label:"Label",value:'aria-label="Search" (configurable via ariaLabel prop)'},{label:"Clear",value:'aria-label="Clear search" on clear button'},{label:"Keyboard",value:"Enter submits, Escape clears"},{label:"Focus",value:"outline: 2px solid var(--Focus-Visible); outline-offset: 2px"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Ns="Surface-Dimmest",Os="Surface-Brightest",Qs=/-light$/,Vs=/-outline$/,js=new Set;const Gs={small:{height:24,fontSize:"12px",iconSize:16,padding:"0 8px",deleteSize:16,gap:4},medium:{height:32,fontSize:"13px",iconSize:18,padding:"0 12px",deleteSize:18,gap:6},large:{height:40,fontSize:"14px",iconSize:20,padding:"0 16px",deleteSize:24,gap:8}},Us=d(function({size:e,onClick:r,...t},a){const i="large"===e?24:"medium"===e?18:16;return le(h,{ref:a,component:"button",onClick:e=>{e.stopPropagation(),r&&r(e)},onKeyDown:e=>{"Enter"!==e.key&&"Backspace"!==e.key&&"Delete"!==e.key||(e.stopPropagation(),r&&r(e))},"aria-label":"Remove",role:"button",tabIndex:0,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",minWidth:24,minHeight:24,width:i,height:i,padding:0,margin:0,marginLeft:"2px",marginRight:"-4px",border:"none",borderRadius:"50%",backgroundColor:"transparent",color:"inherit",opacity:.7,cursor:"pointer",position:"relative",flexShrink:0,transition:"opacity 0.15s ease, background-color 0.15s ease","&:hover":{opacity:1,backgroundColor:"rgba(0,0,0,0.08)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"},...i<24&&{"&::after":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",minWidth:24,minHeight:24}}},...t,children:le(Qr,{sx:{fontSize:i,pointerEvents:"none"}})})});function Xs({variant:e="primary",size:r="medium",label:t,clickable:a=!1,disabled:i=!1,selected:o=!1,selectionMode:n,onDelete:l,onClick:s,startDecorator:d,endDecorator:c,children:u,className:p="",sx:m={},...f}){const g=function(e){const r=String(e||"primary");if(Vs.test(r)){const e=r.replace(Vs,"");return"production"===process.env.NODE_ENV||js.has(r)||(js.add(r),console.warn('[Chip] variant="'+r+'" — there is no outline shape. An outline chip WAS the unselected chip: same var(--Background) fill, same border. Rendering variant="'+e+'" unselected. Pass selected={true} for the filled state.')),e}if(!Qs.test(r))return r;const t=r.replace(Qs,"");return"production"===process.env.NODE_ENV||js.has(r)||(js.add(r),console.warn('[Chip] variant="'+r+'" — the -light shape was removed. Rendering variant="'+t+'" (solid). For a light chip use variant="'+t+'-outline" with data-theme + data-surface="Surface-Brightest".')),t}(e),x={bg:"var(--Background)",text:"var(--Text)",border:"1px solid var(--Border)",hoverBg:"var(--Hover)",activeBg:"var(--Pressed)"},b="default"===g?void 0:(v=g).charAt(0).toUpperCase()+v.slice(1);var v;const y=o?Ns:Os,S=l?"large":r,k=Gs[S]||Gs.medium,B=a||!!s||!!n,w={};"radio"===n?(w.role="radio",w["aria-checked"]=o):"checkbox"===n&&(w.role="checkbox",w["aria-checked"]=o);const C=t||u,T={height:k.height,fontSize:k.fontSize,fontWeight:500,fontFamily:"inherit",borderRadius:k.height/2+"px",padding:k.padding,boxSizing:"border-box",position:"relative",backgroundColor:x.bg,color:x.text,border:x.border,..."small"===S&&{"&::after":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",minWidth:24,minHeight:24,width:"100%",height:"100%"}},...B&&!i?{cursor:"pointer",transition:"background-color 0.15s ease, outline 0.15s ease","&:hover":{backgroundColor:x.hoverBg},"&:active":{backgroundColor:x.activeBg}}:{},"&:focus-visible, &.Mui-focusVisible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},...i?{opacity:.5,cursor:"not-allowed",pointerEvents:"none"}:{},boxShadow:"none","& .MuiChip-label":{padding:0,fontSize:"inherit",fontWeight:"inherit",fontFamily:"inherit",lineHeight:1.2,display:"flex",alignItems:"center",gap:k.gap+"px"},"& .MuiChip-icon":{margin:0,marginLeft:"-2px",color:"inherit",fontSize:k.iconSize},"& .MuiChip-deleteIcon":{display:"none"},...m},z=de(h,{component:"span",sx:{display:"inline-flex",alignItems:"center",gap:k.gap+"px",lineHeight:1},children:[d&&le(h,{component:"span",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& .MuiSvgIcon-root":{fontSize:k.iconSize},"& .MuiAvatar-root":{width:k.iconSize+4,height:k.iconSize+4,fontSize:Math.round(.65*k.iconSize)+"px"}},children:d}),C,c&&le(h,{component:"span",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& .MuiSvgIcon-root":{fontSize:k.iconSize},"& .MuiAvatar-root":{width:k.iconSize+4,height:k.iconSize+4,fontSize:Math.round(.65*k.iconSize)+"px"}},children:c}),l&&le(Us,{size:S,onClick:l})]});return le(F,{label:z,clickable:B&&!i,disabled:i,onClick:B?s:void 0,className:"chip-"+g+(o?" chip-selected":"")+" "+p,"data-theme":b,"data-surface":y,sx:T,...w,...f})}const Ys={body:{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Font-Size)",fontWeight:"var(--Body-Font-Weight)",letterSpacing:"var(--Body-Letter-Spacing)"},"body-small":{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Small-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Small-Font-Size)",fontWeight:"var(--Body-Font-Weight)",letterSpacing:"var(--Body-Small-Letter-Spacing)"},"body-large":{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Large-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Large-Font-Size)",fontWeight:"var(--Body-Font-Weight)",letterSpacing:"var(--Body-Large-Letter-Spacing)"},"body-semibold":{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Font-Size)",fontWeight:"var(--Body-Semibold-Font-Weight)",letterSpacing:"var(--Body-Letter-Spacing)"},"body-bold":{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Font-Size)",fontWeight:"var(--Body-Bold-Font-Weight)",letterSpacing:"var(--Body-Letter-Spacing)"},button:{fontFamily:"var(--Body-Font-Family)",lineHeight:"var(--Button-Line-Height)",fontSize:"var(--Button-Font-Size)",fontWeight:"var(--Button-Font-Weight)",letterSpacing:"var(--Button-Letter-Spacing)"},label:{fontFamily:"var(--Body-Font-Family)",lineHeight:"var(--Label-Line-Height)",fontSize:"var(--Label-Font-Size)",fontWeight:"var(--Label-Font-Weight)",letterSpacing:"var(--Label-Letter-Spacing)"},caption:{fontFamily:"var(--Body-Font-Family)",lineHeight:"calc(var(--Body-Small-Line-Height) * var(--Cognitive-Multiplier, 1))",fontSize:"var(--Body-Small-Font-Size)",fontWeight:"var(--Body-Font-Weight)",letterSpacing:"var(--Body-Small-Letter-Spacing)"}},Zs="var(--Link-Visited, var(--Hotlink-Visited))",qs={primary:{base:"var(--Link, var(--Hotlink))",visited:Zs},standard:{base:"var(--Text)",visited:Zs},quiet:{base:"var(--Text-Quiet)",visited:Zs}};function Js({children:e,href:r,target:t,rel:a,textStyle:i="body",color:o="primary",disabled:n=!1,onClick:l,className:s="",sx:d={},...c}){const u=Ys[i]||Ys.body,p=qs[o]||qs.primary;return le(h,{component:"a",href:n?void 0:r,target:t,rel:"_blank"===t?a||"noopener noreferrer":a,onClick:n?e=>e.preventDefault():l,"aria-disabled":n||void 0,tabIndex:n?-1:void 0,className:"link link-"+i+" link-color-"+o+(n?" link-disabled":"")+" "+s,sx:{fontFamily:u.fontFamily,lineHeight:u.lineHeight,fontSize:u.fontSize,fontWeight:u.fontWeight,letterSpacing:u.letterSpacing,textDecoration:"underline",textUnderlineOffset:"3px",textDecorationThickness:"1px",color:p.base,cursor:n?"not-allowed":"pointer",opacity:n?"var(--Disabled, 0.38)":1,pointerEvents:n?"none":"auto",display:"inline-flex",alignItems:"center",minHeight:"24px",minWidth:"24px",transition:"color 0.15s ease, text-decoration-color 0.15s ease",...!n&&{"&:hover":{textDecorationThickness:"2px"},"&:visited":{color:p.visited},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"2px"},"&:active":{textDecorationThickness:"2px"}},...d},...c,children:e})}function Ks({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"primary":"primary-outline",size:"small",onClick:t,children:e})}function $s({code:e}){return le(Ko,{code:e,language:"JSX",wrap:!0,sx:{mt:1}})}function _s({passes:e}){return de(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5,px:1.5,py:.5,borderRadius:"20px",backgroundColor:e?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:e?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)",fontSize:"12px",fontWeight:600},children:[le(e?pe:me,{sx:{fontSize:14}}),e?"WCAG Pass":"WCAG Fail"]})}function ed({leftLabel:e,rightLabel:r,leftContent:t,rightContent:a,leftCode:i,rightCode:o,leftPasses:n,rightPasses:l}){return de(C,{container:!0,spacing:3,children:[le(C,{item:!0,xs:12,md:6,children:de(h,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(oa,{style:{fontWeight:600},children:e}),le(_s,{passes:n})]}),le(h,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:t}),le($s,{code:i})]})}),le(C,{item:!0,xs:12,md:6,children:de(h,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(oa,{style:{fontWeight:600},children:r}),le(_s,{passes:l})]}),le(h,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:a}),le($s,{code:o})]})})]})}function rd(){const[e,t]=r("column"),[a,i]=r(.5),[o,n]=r("small"),[l,s]=r(!0),[d,c]=r(!1),[u,p]=r(null),[m,f]=r("Surface"),g={small:{label:"Small links ⚡",content:de(se,{children:[le(Js,{href:"#",size:"small",children:"Terms of Service"}),le(Js,{href:"#",size:"small",children:"Privacy Policy"}),le(Js,{href:"#",size:"small",children:"Cookie Settings"})]})},chips:{label:"Chips ⚡",content:de(se,{children:[le(Xs,{label:"React",size:"small"}),le(Xs,{label:"TypeScript",size:"small"}),le(Xs,{label:"Design System",size:"small"})]})},normal:{label:"Normal buttons",content:de(se,{children:[le(Wi,{variant:"primary",size:"medium",children:"Primary"}),le(Wi,{variant:"secondary",size:"medium",children:"Secondary"})]})},mixed:{label:"Mixed ⚡",content:de(se,{children:[le(Wi,{variant:"primary",size:"medium",children:"Save changes"}),le(Js,{href:"#",size:"small",children:"Or discard"})]})}},x=["small","chips","mixed"].includes(o),b=l&&x;return de(C,{container:!0,spacing:3,sx:{mt:1},children:[de(C,{item:!0,xs:12,md:7,children:[le(vo,{theme:u,children:de(h,{sx:{width:"100%"},children:[b&&de(h,{sx:{mb:2,px:2,py:1,borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Tags-Warning-BG)",color:"var(--Tags-Warning-Text)",fontSize:"12px",fontWeight:600,display:"flex",alignItems:"center",gap:1},children:[le(me,{sx:{fontSize:16}}),"Small child detected — gap raised to var(--min-stack-gap)"]}),le(Wn,{direction:e,gap:a,enforceMinGap:l,flexWrap:d?"wrap":void 0,children:g[o].content})]})}),le($s,{code:(()=>{const r=["<OmniStack"];return"column"!==e&&r.push(' direction="'+e+'"'),r.push(" gap={"+a+"}"),l||r.push(" enforceMinGap={false}"),d&&r.push(' flexWrap="wrap"'),r.push(">"),r.push(" {children}"),r.push("</OmniStack>"),r.join("\n")})()})]}),le(C,{item:!0,xs:12,md:5,children:de(h,{sx:{display:"flex",flexDirection:"column",gap:3},children:[le(Bo,{theme:u,onThemeChange:p,surface:m,onSurfaceChange:f}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CHILDREN"}),le(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:Object.entries(g).map(([e,{label:r}])=>le(Ks,{label:r,selected:o===e,onClick:()=>n(e)},e))})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),le(h,{sx:{display:"flex",gap:1},children:["row","column"].map(r=>{return le(Ks,{label:(a=r,a?a.charAt(0).toUpperCase()+a.slice(1):""),selected:e===r,onClick:()=>t(r)},r);var a})})]}),de(h,{children:[de(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["GAP — ",a," unit",b?" → raised to var(--min-stack-gap)":""]}),de(h,{sx:{display:"flex",alignItems:"center",gap:2},children:[le(h,{component:"input",type:"range",min:0,max:6,step:.5,value:a,onChange:e=>i(Number(e.target.value)),sx:{flex:1,accentColor:"var(--Primary-Color-10)"}}),le(ga,{style:{color:"var(--Text)",minWidth:24,textAlign:"right"},children:a})]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),de(h,{sx:{display:"flex",flexDirection:"column",gap:1.5},children:[de(h,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[de(h,{children:[le(oa,{children:"Enforce min gap"}),le(ga,{style:{color:b?"var(--Tags-Warning-Text)":"var(--Text-Quiet)",display:"block"},children:b?"⚡ Active — small child detected":x?"Off — WCAG 2.5.8 risk":"No small children detected"})]}),le(hn,{checked:l,onChange:e=>s(e.target.checked),size:"small"})]}),de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[le(oa,{children:"Flex wrap"}),le(hn,{checked:d,onChange:e=>c(e.target.checked),size:"small"})]})]})]})]})})]})}function td(){return de(h,{sx:{pb:8},children:[le(Zt,{children:"Stack"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:32,maxWidth:640},children:"OmniStack is a layout primitive built on MUI Stack with one intelligent addition: it automatically enforces a minimum gap between children when it detects small (24px) interactive components — protecting WCAG 2.5.8 compliance without any extra developer effort."}),de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Why it matters"}),le(xo,{children:"Playground"}),le(xo,{children:"API"})]}),le(bo,{value:0,children:de(h,{sx:{pt:3,display:"flex",flexDirection:"column",gap:4},children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(Zt,{children:"The problem"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:"WCAG 2.5.8 requires that small interactive targets (24px) have enough surrounding space that they don’t overlap adjacent targets. Every layout library leaves this entirely to the developer — meaning it’s silently violated constantly."}),le(ed,{leftLabel:"Plain MUI Stack — gap too small",rightLabel:"OmniStack — gap auto-enforced",leftPasses:!1,rightPasses:!0,leftContent:de(h,{sx:{display:"flex",flexDirection:"column",gap:"4px"},children:[le(Js,{href:"#",size:"small",children:"Terms of Service"}),le(Js,{href:"#",size:"small",children:"Privacy Policy"}),le(Js,{href:"#",size:"small",children:"Cookie Settings"})]}),rightContent:de(Wn,{gap:.5,children:[le(Js,{href:"#",size:"small",children:"Terms of Service"}),le(Js,{href:"#",size:"small",children:"Privacy Policy"}),le(Js,{href:"#",size:"small",children:"Cookie Settings"})]}),leftCode:'<Stack gap={0.5}>\n <Link size="small">Terms of Service</Link>\n <Link size="small">Privacy Policy</Link>\n <Link size="small">Cookie Settings</Link>\n</Stack>\n// ⚠ gap=4px — targets overlap',rightCode:'<OmniStack gap={0.5}>\n <Link size="small">Terms of Service</Link>\n <Link size="small">Privacy Policy</Link>\n <Link size="small">Cookie Settings</Link>\n</OmniStack>\n// ✓ small child detected → gap enforced'})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(Zt,{children:"Mixed component sizes"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:"One small child is enough to trigger enforcement for the whole stack — the most common case is a normal button paired with a small cancel link."}),le(ed,{leftLabel:"Without enforcement",rightLabel:"With enforcement",leftPasses:!1,rightPasses:!0,leftContent:de(h,{sx:{display:"flex",flexDirection:"column",gap:"2px"},children:[le(Wi,{variant:"primary",size:"medium",children:"Save changes"}),le(Js,{href:"#",size:"small",children:"Or discard"})]}),rightContent:de(Wn,{gap:.25,children:[le(Wi,{variant:"primary",size:"medium",children:"Save changes"}),le(Js,{href:"#",size:"small",children:"Or discard"})]}),leftCode:'<Stack gap={0.25}>\n <Button size="medium">Save changes</Button>\n <Link size="small">Or discard</Link>\n</Stack>\n// ⚠ Link is 24px — gap too tight',rightCode:'<OmniStack gap={0.25}>\n <Button size="medium">Save changes</Button>\n <Link size="small">Or discard</Link>\n</OmniStack>\n// ✓ Link detected → gap enforced'})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(Zt,{children:"How detection works"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:"OmniStack inspects children at render time using a priority-ordered signal chain. Any one signal is enough to trigger enforcement."}),le(h,{sx:{display:"flex",flexDirection:"column"},children:[{signal:'size="small" prop',example:'<Link size="small" />'},{signal:'data-size="small"',example:'<div data-size="small" />'},{signal:"height={24}",example:"<Box height={24} />"},{signal:"minHeight={24}",example:"<Box minHeight={24} />"},{signal:"sx.minHeight: 24",example:"<Box sx={{ minHeight: 24 }} />"},{signal:"Known component name",example:"Link, Chip, Badge, Caption…"}].map(({signal:e,example:r},t,a)=>de(h,{sx:{display:"flex",alignItems:"center",gap:2,py:1.5,borderBottom:t<a.length-1?"1px solid var(--Border)":"none"},children:[le(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Primary-Color-10)",flexShrink:0}}),le(oa,{style:{flex:"0 0 200px"},children:e}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(Zt,{children:"Token-driven minimum"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:"The minimum gap is a CSS custom property, not a hardcoded value — so it respects your brand spacing scale and responds to theme changes without re-rendering."}),le($s,{code:":root {\n --min-stack-gap: 8px; /* Set in your theme.css */\n}\n\n/* OmniStack substitutes the variable, not the value: */\ngap: var(--min-stack-gap, 8px);\n\n/* Dark mode, brand overrides, and media queries\n all work automatically — no re-render needed. */"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(Zt,{children:"Auditable opt-out"}),de(sa,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:["Use ",le("code",{children:"enforceMinGap={false}"})," to opt out. This creates a searchable pattern accessibility audits can grep for — a conscious waiver, not a silent violation."]}),le($s,{code:'<OmniStack gap={0.5} enforceMinGap={false}>\n {/* Explicitly waived — auditors can grep:\n enforceMinGap={false}\n to find all waivers in the codebase. */}\n <Link size="small">Terms</Link>\n <Link size="small">Privacy</Link>\n</OmniStack>'})]})]})}),le(bo,{value:1,children:le(rd,{})}),le(bo,{value:2,children:de(h,{sx:{pt:3},children:[le(Zt,{children:"OmniStack props"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:4,marginBottom:16},children:"All standard MUI Stack props are supported. These are OmniStack additions:"}),le(h,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",mb:4},children:[{prop:"enforceMinGap",type:"boolean",default:"true",desc:"Enable/disable smart gap enforcement."},{prop:"minGapToken",type:"string",default:'"--min-stack-gap"',desc:"CSS variable name for the minimum gap value."},{prop:"gap",type:"number|string",default:"undefined",desc:"Desired gap. Enforced against minGapToken when small children detected."},{prop:"direction",type:"string|object",default:'"column"',desc:"Stack direction. Supports responsive breakpoint objects."},{prop:"flexWrap",type:"string",default:"undefined",desc:'"wrap" | "nowrap" | "wrap-reverse"'},{prop:"divider",type:"ReactNode",default:"undefined",desc:"Element rendered between each child."}].map(({prop:e,type:r,default:t,desc:a},i,o)=>de(h,{sx:{display:"grid",gridTemplateColumns:"160px 160px 1fr",gap:2,px:2,py:1.5,alignItems:"start",borderBottom:i<o.length-1?"1px solid var(--Border)":"none",backgroundColor:i%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(ga,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r}),de(h,{children:[le(ga,{style:{color:"var(--Text)"},children:a}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:["Default: ",t]})]})]},e))}),le(Zt,{children:"Convenience exports"}),le(h,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",mb:4},children:[{name:"Stack",desc:"Alias for OmniStack — drop-in MUI Stack replacement"},{name:"HStack",desc:'direction="row" alignItems="center"'},{name:"VStack",desc:'direction="column"'},{name:"CenteredStack",desc:'direction="column" alignItems="center" justifyContent="center"'},{name:"SpaceBetweenStack",desc:'direction="row" justifyContent="space-between"'},{name:"WrapStack",desc:'direction="row" flexWrap="wrap"'},{name:"ResponsiveStack",desc:"column on xs, row on sm+ (breakpoint configurable)"},{name:"GridStack",desc:"Alias for WrapStack"},{name:"InsetStack",desc:"OmniStack with px: 2 horizontal padding"},{name:"ScrollStack",desc:"OmniStack with overflowY: auto"}].map(({name:e,desc:r},t,a)=>de(h,{sx:{display:"grid",gridTemplateColumns:"200px 1fr",gap:2,px:2,py:1.5,borderBottom:t<a.length-1?"1px solid var(--Border)":"none",backgroundColor:t%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(ga,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(ga,{style:{color:"var(--Text-Quiet)"},children:r})]},e))}),le(Zt,{children:"Debug attributes"}),le($s,{code:'/* When enforcement is active, OmniStack adds: */\nclassName="omni-stack omni-stack-min-gap-enforced"\ndata-min-gap-enforced="true"\n\n/* Target in CSS: */\n.omni-stack-min-gap-enforced { outline: 2px dashed orange; }\n\n/* Query in tests: */\ncontainer.querySelector(\'[data-min-gap-enforced="true"]\')'})]})})]})]})}const ad={none:void 0,small:"var(--Sm-Card-Radius, var(--Card-Radius))",medium:"var(--Card-Radius)",large:"var(--Lg-Card-Radius, var(--Card-Radius))"};function id({children:e,theme:r,surface:t,radius:a="none",elevation:i=0,component:o="div",className:n="",sx:l={},style:s,...d}){const c=Math.max(0,Math.min(5,0|i)),u=ad[a];if(!c)return le(h,{component:o,"data-theme":r||void 0,"data-surface":t||void 0,className:"omni-box"+(n?" "+n:""),sx:{background:"var(--Background)",boxSizing:"border-box",...u?{borderRadius:u}:{},...l},style:s,...d,children:e});const p=s||{},{width:m,height:f,minWidth:g,minHeight:x,maxWidth:b,maxHeight:v,borderRadius:y,margin:S,marginTop:k,marginRight:B,marginBottom:w,marginLeft:C,...T}=p,z={width:m,height:f,minWidth:g,minHeight:x,maxWidth:b,maxHeight:v,borderRadius:y,margin:S,marginTop:k,marginRight:B,marginBottom:w,marginLeft:C},{width:A,height:I,borderRadius:W,...R}=l;return le(h,{component:o,className:"omni-box-elevation"+(n?" "+n:""),"data-elevation":c,sx:{boxShadow:hi[c],boxSizing:"border-box",width:A,height:I,borderRadius:void 0!==W?W:u},style:z,...d,children:le(h,{"data-theme":r||void 0,"data-surface":t||void 0,className:"omni-box",sx:{width:"100%",height:"100%",background:"var(--Background)",borderRadius:"inherit",boxSizing:"border-box",...R},style:T,children:e})})}const od=["Surface","Surface-Dim","Surface-Bright","Container","Container-Low","Container-Lowest","Container-High"],nd=["Default","Primary","Primary-Light","Secondary","Secondary-Light","Tertiary","Tertiary-Light","Neutral","Neutral-Light","Info-Light","Success-Light","Warning-Light","Error-Light"];function ld({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function sd(){const[e,t]=r(""),[a,i]=r(""),[o,n]=r(null),[l,s]=r("Surface");return de(id,{sx:{pb:8},children:[le(Zt,{children:"Box"}),de(sa,{color:"quiet",style:{marginTop:8,marginBottom:24,maxWidth:720},children:["Bare layout primitive — a slot that participates in the design-system cascade (",le("code",{children:"data-theme"})," / ",le("code",{children:"data-surface"}),") without carrying any chrome. Reach for ",le("code",{children:"<Ratio>"})," or",le("code",{children:" <Card>"})," when you need padding, borders, or shadow."]}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:o,surface:l,children:le(id,{sx:{width:"100%",maxWidth:400},children:le(id,{theme:e||void 0,surface:a||void 0,children:de(id,{sx:{padding:3,backgroundColor:"var(--Background)",color:"var(--Text)",borderRadius:"var(--Style-Border-Radius)",border:"1px dashed var(--Border-Variant)"},children:[le(Jt,{children:"Box content"}),le(sa,{style:{color:"var(--Text-Quiet)",marginTop:6},children:"Anything dropped inside resolves tokens against the Box's theme / surface, if you set them."})]})})})}),le(Ko,{code:(()=>{const r=[];e&&r.push('theme="'+e+'"'),a&&r.push('surface="'+a+'"');return"<Box"+(r.length?" "+r.join(" "):"")+">\n {/* anything */}\n</Box>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(id,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"When to use"})]}),le(bo,{value:0,children:de(id,{sx:{p:3},children:[le(id,{sx:{mb:3},children:le(Bo,{theme:o,onThemeChange:n,surface:l,onSurfaceChange:s})}),de(id,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME (optional)"}),de(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(ld,{label:"None",selected:!e,onClick:()=>t("")}),nd.map(r=>le(ld,{label:r,selected:e===r,onClick:()=>t(r)},r))]})]}),de(id,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE (optional)"}),de(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(ld,{label:"None",selected:!a,onClick:()=>i("")}),od.map(e=>le(ld,{label:e,selected:a===e,onClick:()=>i(e)},e))]}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Both props are pass-throughs to ",le("code",{children:"data-theme"})," ","and ",le("code",{children:"data-surface"}),". Leave empty to inherit from the parent zone."]})]})]})}),le(bo,{value:1,children:le(id,{sx:{p:3},children:de(k,{spacing:2,children:[de(id,{children:[le(oa,{style:{fontWeight:700},children:"Reach for Box when…"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:"you need a wrapper to scope a theme / surface zone, or you want a typed JSX root without painting any visual styling."})]}),de(id,{children:[le(oa,{style:{fontWeight:700},children:"Use Ratio when…"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:"the container needs a fixed proportion (image, video, embed, hero tile) — it carries the same theme / color shell Box used to."})]}),de(id,{children:[le(oa,{style:{fontWeight:700},children:"Use Card when…"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:"the container has a title, body, and actions — Card handles the standard 2-layer chrome plus header / footer slots."})]})]})})})]})})})]})]})}function dd({children:e,maxWidth:r="lg",disableGutters:t=!1,sx:a={},...i}){return le(L,{maxWidth:r,disableGutters:t,"data-surface":"Surface",sx:{backgroundColor:"var(--Background)",color:"var(--Text)",transition:"all 0.2s ease-in-out",...a},...i,children:e})}function cd({children:e,container:r=!1,item:t=!1,spacing:a=2,sx:i={},...o}){return le(C,{container:r,item:t,spacing:a,sx:{transition:"all 0.2s ease-in-out",...i},...o,children:e})}function ud({theme:e,surface:r="Surface",as:t="section",padding:a,className:i,style:o,children:n,...l}){return le(t,{...e?{"data-theme":e}:{},"data-surface":r,className:i,style:{background:"var(--Background)",color:"var(--Text)",...void 0!==a?{padding:a}:{},...o},...l,children:n})}function hd(){return de("div",{children:[le(Zt,{style:{marginBottom:12},children:"Section"}),de(sa,{color:"quiet",style:{marginBottom:32,maxWidth:720},children:[le("code",{children:"<Section>"})," bundles ",le("code",{children:"data-theme"})," +"," ",le("code",{children:"data-surface"})," + background paint into one component. Use anywhere you'd otherwise reach for"," ",le("code",{children:"<section data-theme data-surface style={{ background: var(--Background) }}>"}),". For wrapping without painting (e.g. AppBar's themed zone), use"," ",le("code",{children:"<ThemedZone>"}),"."]}),le(Zt,{style:{marginTop:24,marginBottom:12},children:"Theme + surface"}),le(oa,{color:"quiet",style:{marginBottom:16,display:"block"},children:'Sets data-theme="Primary-Light" + data-surface="Surface", paints --Background.'}),de(ud,{theme:"Primary-Light",surface:"Surface",padding:"32px",style:{borderRadius:8},children:[le(Zt,{children:"Primary-Light surface"}),le(sa,{children:"Body text picks up --Text automatically."}),le(oa,{color:"quiet",children:"Quiet text picks up --Text-Quiet."}),le("div",{style:{marginTop:12},children:le(Wi,{variant:"primary",children:"Primary button"})})]}),le(Zt,{style:{marginTop:32,marginBottom:12},children:"Container surface"}),de(ud,{surface:"Container",padding:"32px",style:{borderRadius:8},children:[le(Zt,{children:"Container surface (inherits theme)"}),le(sa,{children:"Useful for card-like regions."})]}),le(Zt,{style:{marginTop:32,marginBottom:12},children:"Different element"}),de(oa,{color:"quiet",style:{marginBottom:16,display:"block"},children:["Pass ",le("code",{children:'as="article"'}),", ",le("code",{children:'as="footer"'}),", etc."]}),de(ud,{as:"article",theme:"Neutral-Dark",surface:"Surface",padding:"32px",style:{borderRadius:8},children:[le(Zt,{children:"Neutral-Dark article"}),le(sa,{children:"Renders as an <article> element."})]})]})}const pd=["1:1","3:4","4:3","16:9","9:16","2:3","3:2","1:2","2:1","9:21","21:9","5:7","7:5","4:5","5:4","5:3","3:5","16:10","10:16","Golden-Horizontal","Golden-Vertical"],md="1.618034",fd={"1:1":"1 / 1","3:4":"3 / 4","4:3":"4 / 3","16:9":"16 / 9","9:16":"9 / 16","2:3":"2 / 3","3:2":"3 / 2","1:2":"1 / 2","2:1":"2 / 1","9:21":"9 / 21","21:9":"21 / 9","5:7":"5 / 7","7:5":"7 / 5","4:5":"4 / 5","5:4":"5 / 4","5:3":"5 / 3","3:5":"3 / 5","16:10":"16 / 10","10:16":"10 / 16","Golden-Horizontal":md+" / 1","Golden-Vertical":"1 / "+md},gd={none:0,xs:1,sm:2,md:3,lg:4,xl:6};function xd({ratio:r="1:1",children:t,variant:a="default",color:i="default",padding:o="none",fit:n="width",placeholder:l=!0,elevated:s=!1,clickable:d=!1,onClick:c,maxWidth:u,maxHeight:p,component:m="div",className:f="",sx:g={},...x}){const b=fd[r]||fd["1:1"],v=(y="default"===i?"Default":i).charAt(0).toUpperCase()+y.slice(1);var y;const S=l&&0===e.Children.count(t),k="default"===i?void 0:v,B="dark"===a?"Surface-Dimmest":"light"===a?"Surface-Brightest":void 0,w=void 0!==gd[o]?gd[o]:gd.none,C=d||!!c,T="default"===a,z=s?di:si,A=s?ci:di;return le(h,{component:m,onClick:C?c:void 0,role:C?"button":void 0,tabIndex:C?0:void 0,className:"ratio ratio-"+r.toLowerCase()+" ratio-"+a+(C?" ratio-clickable":"")+(s?" ratio-elevated":"")+(f?" "+f:""),sx:{aspectRatio:b,flex:"0 0 auto",..."height"===n?{height:"100%",width:"auto",minHeight:24}:{width:"100%",height:"auto",minWidth:24},...void 0!==u&&{maxWidth:u},...void 0!==p&&{maxHeight:p},border:T?"none":"1px solid var(--Border-Variant)",borderRadius:T?0:"var(--Style-Border-Radius)",boxShadow:T?"none":z,overflow:"hidden",transition:"box-shadow 0.2s ease, border-color 0.2s ease",...C&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:A},"&:active":{transform:"scale(0.995)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...!C&&!T&&{"&:hover":{boxShadow:A}},...g},...x,children:le(h,{"data-theme":k||void 0,"data-surface":B,sx:{width:"100%",height:"100%",padding:w,backgroundColor:S?"var(--Border)":"var(--Background)",color:"var(--Text)",fontFamily:"inherit",borderRadius:T?0:"calc(var(--Style-Border-Radius) - 1px)",...S?{display:"flex",alignItems:"center",justifyContent:"center"}:{"& > *":{width:"100%",height:"100%"}}},children:S?le(Qa,{size:"large",sx:{color:"var(--Background)"},children:le(jr,{})}):t})})}const bd=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",vd=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],yd=["default","solid","light","dark"],Sd=["none","xs","sm","md","lg","xl"];function kd({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Bd({color:e,selected:r,onClick:t,variant:a}){const i=bd(e);return le(id,{component:"button","data-theme":{solid:i,light:i+"-Light",dark:i,default:void 0}[a],"data-surface":{solid:"Surface",light:"Surface",dark:"Surface-Dimmest",default:"Surface"}[a],onClick:()=>t(e),"aria-label":"Select "+i,"aria-pressed":r,title:i,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Background)",border:r?"2px solid var(--Text)":"2px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function wd(){const[e,t]=r("1:1"),[a,i]=r("solid"),[o,n]=r("primary"),[l,s]=r("none"),[d,c]=r(!1),[u,h]=r(!1),[p,m]=r(null),[f,g]=r("Surface");return de(id,{sx:{pb:8},children:[le(Zt,{children:"Ratio"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:p,surface:f,children:le(id,{sx:{width:"100%",maxWidth:480},children:le(xd,{ratio:e,variant:a,color:o,padding:l,elevated:d,clickable:u})})}),le(Ko,{code:(()=>{const r=['ratio="'+e+'"'];return"default"!==a&&r.push('variant="'+a+'"'),"default"!==o&&r.push('color="'+o+'"'),"none"!==l&&r.push('padding="'+l+'"'),d&&r.push("elevated"),u&&r.push("clickable onClick={handleClick}"),"<Ratio "+r.join(" ")+">\n {/* your content */}\n</Ratio>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(id,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Reference"})]}),le(bo,{value:0,children:de(id,{sx:{p:3},children:[le(id,{sx:{mb:3},children:le(Bo,{theme:p,onThemeChange:m,surface:f,onSurfaceChange:g})}),de(id,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:yd.map(e=>le(kd,{label:bd(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(id,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:vd.map(e=>de(id,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Bd,{color:e,selected:o===e,onClick:n,variant:"default"===a?"solid":a},e))})]},e.label))})]}),de(id,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PADDING"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Sd.map(e=>le(kd,{label:"none"===e?"None":e.toUpperCase(),selected:l===e,onClick:()=>s(e)},e))})]}),de(id,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"RATIO"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:pd.map(r=>le(kd,{label:r,selected:e===r,onClick:()=>t(r)},r))})]}),de(id,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(id,{children:[le(ya,{children:"Elevated"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Bumps the shadow up one level"})]}),le(hn,{checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Elevated"})]}),de(id,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(id,{children:[le(ya,{children:"Clickable"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds hover, press, and focus-visible"})]}),le(hn,{checked:u,onChange:e=>h(e.target.checked),size:"small","aria-label":"Clickable"})]})]})}),le(bo,{value:1,children:le(id,{sx:{p:3},children:de(k,{spacing:3,children:[de(id,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Common use cases"}),le(k,{spacing:0,children:[{label:"1:1",value:"Square thumbnails, avatars, product tiles"},{label:"16:9",value:"Video, hero images, modern displays"},{label:"4:3",value:"Classic photo, presentation slides"},{label:"3:2",value:"DSLR photography, print frames"},{label:"21:9",value:"Cinematic ultrawide"},{label:"9:16 / 4:5 / 5:7",value:"Portrait social media (Stories, Reels, prints)"},{label:"16:10",value:"Laptop / monitor displays"},{label:"Golden-Horizontal",value:"φ : 1 — design framing for cards, hero blocks"},{label:"Golden-Vertical",value:"1 : φ — vertical posters, sidebars"}].map(({label:e,value:r})=>de(id,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:e}),le(ga,{style:{color:"var(--Text-Quiet)"},children:r})]},e))})]}),de(sa,{color:"quiet",children:["Built on native CSS ",le("code",{children:"aspect-ratio"}),". The themed shell mirrors Box — pick a variant + color to paint the frame, or keep ",le("code",{children:'variant="default"'}),"for a borderless ratio container."]})]})})})]})})})]})]})}const Cd=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Td=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],zd=[{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Ad({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Id({color:e,selected:r,onClick:t}){const a=Cd(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Wd(){const[e,t]=r("standard"),[a,i]=r("default"),[o,n]=r("medium"),[l,s]=r("horizontal"),[d,c]=r(null),[u,p]=r("Surface"),[m,f]=r(!1),g="standard"===e?Td:zd;return de(h,{sx:{pb:8},children:[le(Zt,{children:"Tabs"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:d,surface:u,children:le(h,{sx:{width:"100%",maxWidth:"vertical"===l?500:"100%",display:"flex",flexDirection:"vertical"===l?"row":"column"},children:de(fo,{defaultValue:0,variant:e,color:a,size:o,orientation:l,children:[de(go,{rounded:m,children:[le(xo,{children:"Overview"}),le(xo,{children:"Features"}),le(xo,{children:"Pricing"})]}),le(bo,{value:0,children:le(h,{sx:{p:2},children:le(sa,{style:{color:"var(--Quiet)"},children:"Overview content goes here."})})}),le(bo,{value:1,children:le(h,{sx:{p:2},children:le(sa,{style:{color:"var(--Quiet)"},children:"Features content goes here."})})}),le(bo,{value:2,children:le(h,{sx:{p:2},children:le(sa,{style:{color:"var(--Quiet)"},children:"Pricing content goes here."})})})]})})}),le(Ko,{code:(()=>{const r=[];return"standard"!==e&&r.push('variant="'+e+'"'),"default"!==a&&r.push('color="'+a+'"'),"medium"!==o&&r.push('size="'+o+'"'),"horizontal"!==l&&r.push('orientation="vertical"'),"<Tabs defaultValue={0}"+(r.length?" "+r.join(" "):"")+">\n <TabList"+(m?" rounded":"")+">\n <Tab>Overview</Tab>\n <Tab>Features</Tab>\n <Tab>Pricing</Tab>\n </TabList>\n <TabPanel value={0}>Overview content</TabPanel>\n <TabPanel value={1}>Features content</TabPanel>\n <TabPanel value={2}>Pricing content</TabPanel>\n</Tabs>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["standard","solid","light","dark"].map(r=>le(Ad,{label:Cd("standard"===r?"default":r),selected:e===r,onClick:()=>(e=>{t(e),"standard"!==e&&"default"===a&&i("primary")})(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:g.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Id,{color:e,selected:a===e,onClick:i},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Ad,{label:Cd(e),selected:o===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(k,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(Ad,{label:Cd(e),selected:l===e,onClick:()=>s(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SHAPE"}),le(hn,{label:"Rounded corners",checked:m,onChange:e=>f(e.target.checked)}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Off by default. When on, the TabList applies"," ",le("code",{children:"var(--Style-Border-Radius)"})," and clips the active tab's background to fit the rounded shell (",le("code",{children:"overflow: hidden"})," is always on)."]})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"TabList",value:'role="tablist" aria-orientation'},{label:"Tab",value:'role="tab" aria-selected aria-controls={panelId}'},{label:"TabPanel",value:'role="tabpanel" aria-labelledby={tabId}'},{label:"Keyboard",value:"Arrow keys navigate tabs. Home/End jump to first/last."},{label:"Focus",value:"outline: 3px solid var(--Focus-Visible); outline-offset: -3px"},{label:"Indicator",value:"Standard: var(--Buttons-{C}-Border). Themed: var(--Text)."}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Rd={small:{fontSize:"var(--Body-Small-Font-Size)",py:"4px"},medium:{fontSize:"var(--Body-Font-Size)",py:"6px"},large:{fontSize:"var(--Body-Large-Font-Size)",py:"8px"}};function Dd({children:r,separator:t="/",size:a="medium",condense:i=!1,maxItems:o=4,itemsBeforeCollapse:n=1,itemsAfterCollapse:l=1,backOnlyMobile:s=!1,onExpand:d,className:p="",sx:m={},...f}){const g=Rd[a]||Rd.medium,x=c.toArray(r).filter(u),b=x.length,v=i&&b>o;let y=x;const[S,k]=e.useState(!1);if(v&&!S){const e=x.slice(0,n),r=x.slice(b-l);y=[...e,le(h,{component:"button",onClick:()=>{k(!0),d?.()},"aria-label":"Show full breadcrumb trail",className:"breadcrumb-ellipsis",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",background:"none",border:"none",padding:"2px 4px",cursor:"pointer",fontFamily:"inherit",fontSize:"inherit",color:"var(--Quiet)",borderRadius:"4px","&:hover":{backgroundColor:"var(--Hover)",color:"var(--Text)"},"&:active":{backgroundColor:"var(--Pressed)",color:"var(--Text)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"1px"}},children:"…"},"__breadcrumb-ellipsis"),...r]}const B=[];y.forEach((e,r)=>{const a=v&&!S?r===y.length-1:r===b-1;B.push(le(h,{component:"li",className:"breadcrumb-item"+(a?" breadcrumb-current":""),sx:{display:"inline-flex",alignItems:"center",...a&&{color:"var(--Text)",fontWeight:"var(--Body-Medium-Semibold-Font-Weight, 600)"},...!a&&{color:"var(--Link, var(--Hotlink))"},maxWidth:"200px","& > *":{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},...a?{"aria-current":"page"}:{},children:e},"crumb-"+r)),r<y.length-1&&B.push(le(h,{component:"li",role:"presentation","aria-hidden":"true",className:"breadcrumb-separator",sx:{display:"inline-flex",alignItems:"center",color:"var(--Quiet)",userSelect:"none",fontSize:"inherit",lineHeight:1,flexShrink:0},children:t},"sep-"+r))});const w=b>=2?x[b-2]:null;return de(h,{component:"nav","aria-label":"Breadcrumb",className:"breadcrumbs breadcrumbs-"+a+" "+p,sx:{fontSize:g.fontSize,fontFamily:"var(--Body-Font-Family)",lineHeight:1.5,...m},...f,children:[le(h,{component:"ol",className:"breadcrumbs-list",sx:{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"var(--Sizing-1)",listStyle:"none",margin:0,padding:0,...s&&{"@media (max-width: 600px)":{display:"none"}}},children:B}),s&&w&&de(h,{className:"breadcrumbs-back-mobile",sx:{display:"none","@media (max-width: 600px)":{display:"flex",alignItems:"center",gap:"var(--Sizing-Half)",fontSize:g.fontSize,color:"var(--Link)"}},children:[le(h,{component:"span","aria-hidden":"true",sx:{fontSize:"1.1em",lineHeight:1},children:"←"}),e.cloneElement(w,{style:{...w.props?.style||{},textDecoration:"underline",textUnderlineOffset:"3px"}})]})]})}function Pd({children:e,href:r,className:t="",sx:a={},...i}){const o=!!r;return le(h,{component:o?"a":"span",href:r||void 0,className:"breadcrumb-link "+t,sx:{color:"inherit",textDecoration:o?"underline":"none",textUnderlineOffset:"3px",textDecorationThickness:"1px",cursor:o?"pointer":"default",transition:"color 0.15s ease",...o&&{"&:hover":{textDecorationThickness:"2px"},"&:active":{textDecorationThickness:"3px"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"2px"}},...a},...i,children:e})}const Fd=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"";function Ld({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Hd(){const[e,t]=r("medium"),[a,i]=r("/"),[o,n]=r(!1),[l,s]=r(null),[d,c]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Breadcrumbs"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:l,surface:d,children:de(Dd,{size:e,separator:a,condense:o,maxItems:3,children:[le(Pd,{href:"#",children:"Home"}),le(Pd,{href:"#",children:"Products"}),le(Pd,{href:"#",children:"Shoes"}),le(Pd,{children:"Running Shoes"})]})}),le(Ko,{code:(()=>{const r=[];return"medium"!==e&&r.push('size="'+e+'"'),"/"!==a&&r.push('separator="'+a+'"'),o&&r.push("condense maxItems={3}"),"<Breadcrumbs"+(r.length?" "+r.join(" "):"")+'>\n <BreadcrumbItem href="/">Home</BreadcrumbItem>\n <BreadcrumbItem href="/products">Products</BreadcrumbItem>\n <BreadcrumbItem href="/products/shoes">Shoes</BreadcrumbItem>\n <BreadcrumbItem>Running Shoes</BreadcrumbItem>\n</Breadcrumbs>'})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(r=>le(Ld,{label:Fd(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEPARATOR"}),le(k,{direction:"row",spacing:1,children:["/","›","→","·","|"].map(e=>le(Ld,{label:e,selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Condense"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Collapse middle items into ellipsis"})]}),le(hn,{variant:"default-outline",checked:o,onChange:e=>n(e.target.checked),size:"small","aria-label":"Condense"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Nav",value:'<nav aria-label="Breadcrumb">'},{label:"List",value:"<ol> with <li> for each crumb"},{label:"Current",value:'aria-current="page" on the last item'},{label:"Links",value:"BreadcrumbItem renders <a> when href is provided"},{label:"Ellipsis",value:'Expandable button with aria-label="Show full breadcrumb trail"'},{label:"Separator",value:'aria-hidden="true" — decorative only'}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Md={small:{btnSize:"small",fontSize:"13px",gap:"2px"},medium:{btnSize:"medium",fontSize:"14px",gap:"4px"},large:{btnSize:"large",fontSize:"16px",gap:"4px"}};function Ed({theme:e,surface:t,count:a=10,page:o,defaultPage:n=1,onChange:l,color:s="default",size:d="medium",siblingCount:c=1,boundaryCount:u=1,disabled:p=!1,showFirstButton:m=!1,showLastButton:f=!1,className:g="",sx:x={},...b}){const[v,y]=r(n),S=void 0!==o,k=S?o:v;(e=>{e.charAt(0).toUpperCase(),e.slice(1)})("default"===s?"Default":s);const B=Md[d]||Md.medium,w=i(e=>{const r=Math.max(1,Math.min(a,e));S||y(r),l?.(r)},[a,S,l]),C=function({count:e,page:r,siblingCount:t=1,boundaryCount:a=1}){const i=(e,r)=>Array.from({length:r-e+1},(r,t)=>e+t);if(2*t+3+2*a>=e)return i(1,e);const o=Math.max(r-t,a+1),n=Math.min(r+t,e-a),l=o>a+2,s=n<e-a-1;if(!l&&s)return[...i(1,Math.min(3+2*t+a,e)),"ellipsis-right",...i(e-a+1,e)];if(l&&!s){const r=i(Math.max(e-(3+2*t+a)+1,1),e);return[...i(1,a),"ellipsis-left",...r]}return l&&s?[...i(1,a),"ellipsis-left",...i(o,n),"ellipsis-right",...i(e-a+1,e)]:i(1,e)}({count:a,page:k,siblingCount:c,boundaryCount:u}),T="default"===s?"default":s;return le(h,{component:"nav","aria-label":"Pagination","data-theme":e||void 0,"data-surface":t||void 0,className:"pagination pagination-"+s+" pagination-"+d+" "+g,sx:{display:"inline-flex",...x},...b,children:de(h,{component:"ul",sx:{display:"flex",alignItems:"center",gap:B.gap,listStyle:"none",m:0,p:0,flexWrap:"wrap"},children:[m&&le(h,{component:"li",children:le(Wi,{iconOnly:!0,variant:T+"-outline",size:B.btnSize,disabled:p||1===k,onClick:()=>w(1),"aria-label":"Go to first page",children:le(Qa,{size:"small",children:le(Xr,{})})})}),le(h,{component:"li",children:le(Wi,{iconOnly:!0,variant:T+"-outline",size:B.btnSize,disabled:p||1===k,onClick:()=>w(k-1),"aria-label":"Go to previous page",children:le(Qa,{size:"small",children:le(Gr,{})})})}),C.map((e,r)=>{if("string"==typeof e)return le(h,{component:"li",children:le(ga,{style:{color:"var(--Quiet)",padding:"0 4px"},"aria-hidden":"true",children:"…"})},e+"-"+r);const t=e===k;return le(h,{component:"li",children:le(Wi,{variant:t?T:T+"-outline",size:B.btnSize,disabled:p,onClick:()=>w(e),"aria-label":"Page "+e,"aria-current":t?"page":void 0,letterNumber:!0,children:e})},e)}),le(h,{component:"li",children:le(Wi,{iconOnly:!0,variant:T+"-outline",size:B.btnSize,disabled:p||k===a,onClick:()=>w(k+1),"aria-label":"Go to next page",children:le(Qa,{size:"small",children:le(Ur,{})})})}),f&&le(h,{component:"li",children:le(Wi,{iconOnly:!0,variant:T+"-outline",size:B.btnSize,disabled:p||k===a,onClick:()=>w(a),"aria-label":"Go to last page",children:le(Qa,{size:"small",children:le(Yr,{})})})})]})})}const Nd=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Od=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Qd({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Vd({color:e,selected:r,onClick:t}){const a=Nd(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function jd(){const[e,t]=r("default"),[a,i]=r("medium"),[o,n]=r(10),[l,s]=r(!1),[d,c]=r(!1),[u,p]=r(!1),[m,f]=r(null),[g,x]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Pagination"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:m,surface:g,children:le(Ed,{color:e,size:a,count:o,showFirstButton:l,showLastButton:d,disabled:u})}),le(Ko,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),10!==o&&r.push("count={"+o+"}"),l&&r.push("showFirstButton"),d&&r.push("showLastButton"),u&&r.push("disabled"),r.push("onChange={handlePageChange}"),1===r.length?"<Pagination onChange={handlePageChange} />":"<Pagination\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:m,onThemeChange:f,surface:g,onSurfaceChange:x})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Od.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Vd,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Qd,{label:Nd(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PAGES"}),le(k,{direction:"row",spacing:1,children:[5,10,20,50].map(e=>le(Qd,{label:String(e),selected:o===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"First/Last Buttons"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show jump to first/last page"})]}),le(hn,{variant:"default-outline",checked:l,onChange:e=>{s(e.target.checked),c(e.target.checked)},size:"small","aria-label":"First/last buttons"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disabled"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(hn,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Disabled"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Nav",value:'<nav aria-label="Pagination">'},{label:"List",value:"<ol> with <li> for each button"},{label:"Current",value:'aria-current="page" on selected page'},{label:"Labels",value:'aria-label="Page N", "Go to previous/next/first/last page"'},{label:"Keyboard",value:"Tab navigates between buttons"},{label:"Focus",value:"Uses Button component focus styles"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Gd=e=>e.charAt(0).toUpperCase()+e.slice(1),Ud={small:oa,medium:sa,large:pa},Xd={small:ra,medium:ea,large:_t},Yd={small:{py:"var(--Sizing-Half)",itemPx:"var(--Sizing-1)",itemPy:"var(--Sizing-Half)",fontSize:"var(--Sm-Button-Text)",minWidth:"140px"},medium:{py:"6px",itemPx:"var(--Sizing-1-and-Half)",itemPy:"6px",fontSize:"var(--Button-Text)",minWidth:"160px"},large:{py:"var(--Sizing-1)",itemPx:"var(--Sizing-2)",itemPy:"var(--Sizing-1)",fontSize:"var(--Lg-Button-Text)",minWidth:"180px"}},Zd=l({open:!1,setOpen:()=>{},anchorRef:{current:null},menuId:"",buttonId:"",variant:"outline",color:"default",size:"medium"}),qd=()=>n(Zd);function Jd({children:e,variant:o="outline",color:n="default",size:l="medium",open:s,onOpenChange:d,...c}){const[u,p]=r(!1),m=void 0!==s,f=m?s:u,g=a(null),x=t(),b="menu-"+x,v="menubtn-"+x,y=i(e=>{const r="function"==typeof e?e(f):e;m?d?.(r):p(r)},[m,f,d]);return le(Zd.Provider,{value:{open:f,setOpen:y,anchorRef:g,menuId:b,buttonId:v,variant:o,color:n,size:l},children:le(h,{sx:{display:"inline-flex",position:"relative"},...c,children:e})})}function Kd({children:r,className:t="",sx:a={},...i}){const{open:o,setOpen:n,anchorRef:l,menuId:s,buttonId:d,size:c,color:u}=qd(),p=Yd[c]||Yd.medium,m=Gd("default"===u?"Default":u);return de(h,{component:"button",ref:l,id:d,"aria-haspopup":"true","aria-expanded":o,"aria-controls":o?s:void 0,onClick:()=>n(e=>!e),className:"menu-button "+t,sx:{display:"inline-flex",alignItems:"center",gap:"6px",padding:p.itemPy+" "+p.itemPx,fontSize:p.fontSize,fontFamily:"inherit",fontWeight:600,color:"var(--Text)",backgroundColor:"var(--Background)",border:"1px solid var(--Buttons-"+m+"-Border)",borderRadius:"var(--Style-Border-Radius)",cursor:"pointer",boxShadow:"none",transition:"box-shadow 0.15s ease","&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},...a},onKeyDown:e=>{"ArrowDown"!==e.key&&"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n(!0))},...i,children:["string"==typeof r?e.createElement(Ud[c]||Ud.medium,{style:{color:"inherit",fontWeight:600}},r):r,le(Qa,{size:"small",sx:{color:"var(--Quiet)",transition:"transform 0.2s ease",transform:o?"rotate(180deg)":"rotate(0deg)"},children:le(be,{})})]})}function $d({children:e,className:r="",placement:t="bottom-start",sx:i={},...n}){const{open:l,setOpen:s,anchorRef:d,menuId:c,buttonId:u,variant:p,color:m,size:f}=qd(),g=a(null),x=Yd[f]||Yd.medium,b=Gd("default"===m?"Default":m),v="var(--Buttons-"+b+"-Border)",y="light"===p?"default"===m?"Default":b:"solid"===p?b:void 0,S="light"===p?"Surface-Brightest":"solid"===p?"Surface":void 0;return o(()=>{if(l&&g.current){const e=g.current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');e&&e.focus()}},[l]),o(()=>{if(!l)return;const e=e=>{g.current&&!g.current.contains(e.target)&&d.current&&!d.current.contains(e.target)&&s(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[l,s,d]),o(()=>{if(!l)return;const e=e=>{"Escape"===e.key&&(s(!1),d.current?.focus())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[l,s,d]),l?le(h,{className:"menu menu-"+p+" "+r,sx:{position:"absolute",top:"100%",left:"bottom-end"===t?"auto":0,right:"bottom-end"===t?0:"auto",zIndex:99999,marginTop:"4px",border:"1px solid "+v,borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:"none",overflow:"hidden",...i},children:le(h,{ref:g,id:c,role:"menu","aria-labelledby":u,"data-theme":y,"data-surface":S,sx:{minWidth:x.minWidth,backgroundColor:"var(--Background)",color:"var(--Text)",fontSize:x.fontSize,fontFamily:"inherit",padding:x.py+" 0",outline:"none",borderRadius:"calc(var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px))) - 1px)"},onKeyDown:e=>{const r=g.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');if(!r?.length)return;const t=Array.from(r).indexOf(document.activeElement);"ArrowDown"===e.key?(e.preventDefault(),r[(t+1)%r.length].focus()):"ArrowUp"===e.key?(e.preventDefault(),r[(t-1+r.length)%r.length].focus()):"Home"===e.key?(e.preventDefault(),r[0].focus()):"End"===e.key?(e.preventDefault(),r[r.length-1].focus()):"Tab"===e.key&&s(!1)},...n,children:e})}):null}function _d({children:e,onClick:r,selected:t=!1,disabled:a=!1,className:i="",sx:o={},...n}){const{setOpen:l,size:s}=qd(),d=Yd[s]||Yd.medium,c=t?Xd[s]||Xd.medium:Ud[s]||Ud.medium,u=()=>{a||(r?.(),l(!1))};return le(h,{role:"menuitem",tabIndex:a?-1:0,"aria-disabled":a||void 0,"aria-selected":t||void 0,onClick:u,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),u())},className:"menu-item"+(t?" menu-item-selected":"")+" "+i,sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-1)",padding:d.itemPy+" "+d.itemPx,fontSize:d.fontSize,color:a?"var(--Quiet)":t?"var(--Text)":"var(--Quiet)",backgroundColor:t?"var(--Hover)":"transparent",cursor:a?"not-allowed":"pointer",opacity:a?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.1s ease, color 0.1s ease",userSelect:"none",...!a&&{"&:hover":{backgroundColor:"var(--Hover)",color:"var(--Text)"},"&:active":{backgroundColor:"var(--Pressed)",color:"var(--Text)"},"&:focus-visible":{backgroundColor:"var(--Hover)",color:"var(--Text)",outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"}},...o},...n,children:le(c,{color:"standard",style:{color:"inherit"},children:e})})}function ec({className:e="",sx:r={},...t}){return le(h,{component:"hr",role:"separator",className:"menu-divider "+e,sx:{border:"none",borderTop:"1px solid var(--Border)",margin:"4px 0",...r},...t})}const rc=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",tc=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function ac({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function ic({color:e,selected:r,onClick:t}){const a=rc(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function oc(){const[e,t]=r("outline"),[a,i]=r("default"),[o,n]=r("medium"),[l,s]=r(null),[d,c]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Menu"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:l,surface:d,sx:{minHeight:250,alignItems:"flex-start",pt:6},children:de(Jd,{variant:e,color:a,size:o,children:[le(Kd,{children:"Actions"}),de($d,{children:[le(_d,{children:"Edit"}),le(_d,{children:"Duplicate"}),le(_d,{selected:!0,children:"Archive"}),le(ec,{}),le(_d,{disabled:!0,children:"Delete"})]})]})}),le(Ko,{code:(()=>{const r=[];return"outline"!==e&&r.push('variant="'+e+'"'),"default"!==a&&r.push('color="'+a+'"'),"medium"!==o&&r.push('size="'+o+'"'),"<Dropdown "+r.join(" ")+">\n <MenuButton>Actions</MenuButton>\n <Menu>\n <MenuItem>Edit</MenuItem>\n <MenuItem>Duplicate</MenuItem>\n <MenuDivider />\n <MenuItem>Delete</MenuItem>\n </Menu>\n</Dropdown>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["outline","solid","light"].map(r=>le(ac,{label:rc(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:tc.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(ic,{color:e,selected:a===e,onClick:i},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(ac,{label:rc(e),selected:o===e,onClick:()=>n(e)},e))})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Button",value:'aria-haspopup="true" aria-expanded aria-controls'},{label:"Menu",value:'role="menu" aria-labelledby={buttonId}'},{label:"Items",value:'role="menuitem" with tabIndex'},{label:"Selected",value:'aria-selected="true" on active item'},{label:"Disabled",value:'aria-disabled="true", not focusable'},{label:"Keyboard",value:"Arrow keys navigate. Enter/Space selects. Escape closes."},{label:"Focus",value:"First item focused on open. Focus returns to button on close."}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}let nc=0;const lc={default:"Nav-Bar",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},sc="var(--Sizing-1, 8px)",dc="40px",cc="var(--Icon-Size, 24px)",uc="var(--Sizing-Half, 4px)",hc={horizontal:{px:"var(--Button-Height, 32px)",py:"12px"},vertical:{px:"var(--Sizing-1-and-Half, 12px)",py:"var(--Sizing-2, 16px)"}},pc={px:0,py:0};function mc({items:e=[],value:t,defaultValue:o=0,onChange:n,showLabels:l=!0,variant:s="fixed",orientation:d="horizontal",barColor:c="default",fabAction:u,fabPosition:p="end",fixed:m=!0,"aria-label":f="Bottom navigation",className:g="",sx:x={},...b}){const[v,y]=r(o),S=void 0!==t,k=S?t:v,B=i(e=>{S||y(e),n?.(e)},[S,n]),w="vertical"===d,C="floating"===s,T=lc[c]||lc.default,z=C?w?hc.vertical:hc.horizontal:pc,A=a(null);null===A.current&&(A.current="bottom-nav-"+nc++);const I=e=>A.current+"-tab-"+e,W=!!u;return de(h,{component:"nav","data-theme":T,"data-surface":"Surface-Dim","aria-label":f,className:"bottom-nav bottom-nav-"+c+" bottom-nav-style-"+(C?"floating":"fixed")+" bottom-nav-bar-"+d+(l?" bottom-nav-labels":" bottom-nav-no-labels")+(m?" bottom-nav-fixed":"")+(g?" "+g:""),sx:{display:"flex",flexDirection:w?"column":"row",alignItems:"center",justifyContent:"center",backgroundColor:"var(--Background)",borderRadius:C?"83px":0,fontFamily:"inherit",width:w?"fit-content":"100%",px:z.px,py:z.py,...m&&{position:"fixed",zIndex:1100,...w?{top:"50%",left:0,transform:"translateY(-50%)"}:{bottom:0,left:0,right:0}},...x},...b,children:[W&&le(h,{role:"tablist","aria-orientation":w?"vertical":"horizontal","aria-owns":e.map((e,r)=>I(r)).join(" "),sx:{position:"absolute",width:0,height:0,overflow:"hidden"}}),de(h,{role:W?void 0:"tablist","aria-orientation":W?void 0:w?"vertical":"horizontal",sx:{display:"flex",flexDirection:w?"column":"row",alignItems:"center",justifyContent:w?"flex-start":"space-between",gap:w?"10px":0,width:w?"auto":"100%",maxWidth:w?void 0:600},children:[e.map((e,r)=>le(fc,{id:W?I(r):void 0,icon:e.icon,label:e.label,selected:r===k,showLabel:l,onClick:()=>B(r),ariaLabel:e.label||e.ariaLabel,disabled:e.disabled},e.key||r)).flatMap((e,r,t)=>{if(!u)return[e];return r===("center"===p?Math.ceil(t.length/2):t.length)-1?[e,le(xc,{...u,showLabel:l,position:p},"fab")]:[e]}),u&&0===e.length&&le(xc,{...u,showLabel:l,position:p},"fab")]})]})}function fc({id:e,icon:r,label:t,selected:a,showLabel:i,onClick:o,ariaLabel:n,disabled:l}){return de(h,{component:"button",type:"button",role:"tab",id:e,"aria-selected":a,"aria-label":n,onClick:o,disabled:l,"aria-disabled":l||void 0,className:"bottom-nav-item"+(a?" bottom-nav-item-selected":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:uc,width:40,flexShrink:0,border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0,fontFamily:"inherit",outline:"none","&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"8px"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}},children:[le(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",minWidth:32,minHeight:32,padding:sc,borderRadius:dc,backgroundColor:a?"var(--Text)":"transparent",color:a?"var(--Background)":"var(--Quiet)",fontSize:cc,transition:"background-color 0.2s ease, color 0.15s ease","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"},".bottom-nav-item:hover &":a?{backgroundColor:"var(--Text)"}:{color:"var(--Text)",backgroundColor:"var(--Hover)"},".bottom-nav-item:active &":a?{backgroundColor:"var(--Text)"}:{color:"var(--Text)",backgroundColor:"var(--Pressed)"},".bottom-nav-item:disabled:hover &":{backgroundColor:"transparent"}},children:r}),i&&t&&le(ba,{className:"bottom-nav-label",style:{color:a?"var(--Text)":"var(--Quiet)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:t})]})}const gc=32;function xc({icon:e,label:t,onClick:i,showLabel:n,actions:l,position:s="end"}){const d=Array.isArray(l)&&l.length>0,[c,u]=r(!1),p=a(null);o(()=>{if(!c)return;const e=e=>{p.current&&!p.current.contains(e.target)&&u(!1)},r=e=>{"Escape"===e.key&&u(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",r),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",r)}},[c]);const m=e=>({display:"flex",alignItems:"center",justifyContent:"center",minWidth:e,minHeight:e,boxSizing:"border-box",borderRadius:dc,borderWidth:"var(--Button-Border-Width, 1px)",borderStyle:"solid",borderColor:"var(--Buttons-Default-Border)",color:"var(--Buttons-Default-Border)",backgroundColor:"transparent","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}}),f="center"!==s;return de(h,{ref:p,sx:{position:"relative",display:"flex",flexShrink:0},children:[de(h,{component:"button",type:"button","aria-label":t||"Action",onClick:e=>{d&&u(e=>!e),i?.(e)},...d?{"aria-haspopup":"menu","aria-expanded":c}:{},className:"bottom-nav-fab"+(c?" bottom-nav-fab-open":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:uc,width:40,flexShrink:0,border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0,fontFamily:"inherit",outline:"none","&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"8px"}},children:[le(h,{sx:{...m(32),padding:sc,fontSize:cc,transition:"background-color 0.15s ease, transform 0.2s ease",transform:c?"rotate(45deg)":"none",".bottom-nav-fab:hover &":{backgroundColor:"var(--Hover)"},".bottom-nav-fab:active &":{backgroundColor:"var(--Pressed)"}},children:e||le(Tr,{})}),n&&t&&le(ba,{className:"bottom-nav-label",style:{color:"var(--Buttons-Default-Border)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:t})]}),d&&c&&le(h,{role:"menu","aria-label":t||"Actions",className:"bottom-nav-dial","data-surface":"Surface-Brightest",sx:{position:"absolute",bottom:"calc(100% + var(--Sizing-1, 8px))",...f?{right:0}:{left:0},zIndex:1,display:"flex",flexDirection:"column-reverse",padding:"var(--Sizing-1, 8px)",gap:"var(--Sizing-1, 8px)",backgroundColor:"var(--Background)",color:"var(--Text)",border:"1px solid var(--Border)",borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:"var(--Effect-Level-3, none)",whiteSpace:"nowrap"},children:l.map((e,r)=>de(h,{component:"button",type:"button",role:"menuitem","aria-label":e.label,className:"bottom-nav-dial-item",onClick:r=>{u(!1),e.onClick?.(r)},sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-1, 8px)",flexDirection:f?"row-reverse":"row",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0,fontFamily:"inherit",color:"inherit",outline:"none",borderRadius:dc,"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}},children:[le(h,{sx:{width:40,display:"flex",justifyContent:"center",flexShrink:0},children:le(h,{sx:{...m(gc),fontSize:"var(--Icon-Size-Small, 16px)"},children:e.icon||le(Tr,{})})}),le(va,{style:{color:"inherit"},children:e.label})]},e.key||r))})]})}const bc={Home:le(ye,{sx:{fontSize:"inherit"}}),Explore:le(Zr,{sx:{fontSize:"inherit"}}),Radio:le(qr,{sx:{fontSize:"inherit"}}),Library:le(Jr,{sx:{fontSize:"inherit"}}),Favorite:le(ve,{sx:{fontSize:"inherit"}}),Person:le(Ce,{sx:{fontSize:"inherit"}}),Search:le(Be,{sx:{fontSize:"inherit"}}),Settings:le(ke,{sx:{fontSize:"inherit"}}),Notifications:le(Te,{sx:{fontSize:"inherit"}}),Cart:le(Ae,{sx:{fontSize:"inherit"}}),Star:le(we,{sx:{fontSize:"inherit"}}),Bookmark:le(Kr,{sx:{fontSize:"inherit"}})},vc=Object.keys(bc),yc=[{icon:"Home",label:"Home"},{icon:"Explore",label:"Browse"},{icon:"Radio",label:"Radio"},{icon:"Library",label:"Library"}],Sc=[{value:"default",label:"Default",desc:'data-theme="Nav-Bar"'},{value:"primary",label:"Primary",desc:'data-theme="Primary"'},{value:"primary-light",label:"Primary Light",desc:'data-theme="Primary-Light"'},{value:"primary-medium",label:"Primary Medium",desc:'data-theme="Primary-Medium"'},{value:"primary-dark",label:"Primary Dark",desc:'data-theme="Primary-Dark"'},{value:"white",label:"White",desc:'data-theme="White"'},{value:"black",label:"Black",desc:'data-theme="Black"'}];function kc({label:e,selected:r,onClick:t,disabled:a}){return le(h,{component:"button",onClick:t,disabled:a,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:a?"not-allowed":"pointer",border:"2px solid var(--Buttons-Primary-Button)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:r?"var(--Buttons-Primary-Button)":"transparent",color:r?"var(--Buttons-Primary-Text)":"var(--Text)",padding:"4px 12px",fontSize:"14px",fontFamily:"inherit",fontWeight:500,whiteSpace:"nowrap",flexShrink:0,opacity:a?.4:1,transition:"background-color 0.15s ease, color 0.15s ease","&:hover":{backgroundColor:a?"transparent":r?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function Bc({value:e,onChange:r,placeholder:t,sx:a}){return le(h,{component:"input",type:"text",value:e,onChange:e=>r(e.target.value),placeholder:t,sx:{flex:1,padding:"4px 8px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",outline:"none",minWidth:0,"&:focus":{borderColor:"var(--Focus-Visible)"},...a}})}function wc({value:e,onChange:r,options:t,label:a}){return le(h,{component:"select",value:e,onChange:e=>r(e.target.value),"aria-label":a,sx:{padding:"4px 6px",fontSize:"13px",fontFamily:"inherit",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",outline:"none",cursor:"pointer","&:focus":{borderColor:"var(--Focus-Visible)"}},children:t.map(e=>le("option",{value:"string"==typeof e?e:e.value,children:"string"==typeof e?e:e.label},"string"==typeof e?e:e.value))})}function Cc({value:e,onChange:r,min:t,max:a,label:i}){return de(h,{sx:{display:"flex",alignItems:"center",gap:1},children:[le(ga,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:90},children:i}),le("button",{type:"button",onClick:()=>{e>t&&r(e-1)},disabled:e<=t,style:{width:28,height:28,display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",cursor:e<=t?"not-allowed":"pointer",fontSize:"14px",opacity:e<=t?.4:1,fontFamily:"inherit"},children:"−"}),le(h,{sx:{fontWeight:700,fontSize:"14px",minWidth:24,textAlign:"center"},children:e}),le("button",{type:"button",onClick:()=>{e<a&&r(e+1)},disabled:e>=a,style:{width:28,height:28,display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid var(--Border)",borderRadius:"4px",backgroundColor:"var(--Background)",color:"var(--Text)",cursor:e>=a?"not-allowed":"pointer",fontSize:"14px",opacity:e>=a?.4:1,fontFamily:"inherit"},children:"+"})]})}function Tc({label:e,checked:r,onChange:t,caption:a,disabled:i}){return de(h,{sx:{py:.5,opacity:i?.4:1},children:[le(b,{control:le(x,{checked:r,onChange:e=>t(e.target.checked),size:"small",disabled:i,sx:{color:"var(--Text-Quiet)","&.Mui-checked":{color:"var(--Buttons-Primary-Button)"}}}),label:le(ya,{children:e}),sx:{m:0}}),a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginLeft:32},children:a})]})}function zc(){const[e,t]=r(0),[a,i]=r(0),[n,l]=r(!0),[s,d]=r(!0),[c,u]=r("fixed"),[p,m]=r("horizontal"),[f,g]=r("default"),[x,b]=r(4),[v,y]=r(yc.map(e=>({icon:e.icon,label:e.label})));o(()=>{y(e=>{const r=[],t=[{icon:"Favorite",label:"Favorites"},{icon:"Person",label:"Profile"}];for(let a=0;a<x;a++)if(e[a])r.push(e[a]);else{const e=t[a-yc.length]||{icon:vc[a%vc.length],label:vc[a%vc.length]};r.push(e)}return r}),i(e=>Math.min(e,x-1))},[x]);const S=(e,r,t)=>{y(a=>{const i=[...a];return i[e]={...i[e],[r]:t},i})},B=v.slice(0,x).map(e=>({icon:bc[e.icon]||bc.Home,label:e.label}));return de(h,{sx:{pb:8},children:[le(Zt,{children:"Bottom Navigation"}),de(H,{value:e,onChange:(e,r)=>t(r),sx:{mt:3,mb:0,borderBottom:"1px solid var(--Border)","& .MuiTabs-indicator":{backgroundColor:"var(--Buttons-Primary-Button)",height:3},"& .MuiTab-root":{color:"var(--Text-Quiet)",textTransform:"none",fontWeight:500,"&.Mui-selected":{color:"var(--Text)"}}},children:[le(M,{label:"Playground"}),le(M,{label:"Accessibility"})]}),0===e&&de(C,{container:!0,sx:{minHeight:400},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[de(h,{sx:{p:4,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:300,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",gap:4},children:[le(h,{sx:{width:"100%",maxWidth:500,overflow:"hidden",boxShadow:"0 2px 12px rgba(0,0,0,0.08)"},children:le(mc,{items:B,value:a,onChange:i,showLabels:s,variant:c,orientation:p,barColor:f,fixed:!1},"bn-"+x+"-"+c+"-"+p+"-"+s+"-"+f)}),de(ga,{style:{color:"var(--Text-Quiet)",textAlign:"center"},children:[x," items · ",s?"Labels":"Icons only"," · ","floating"===c?"Floating":"Fixed"," · ","vertical"===p?"Vertical":"Horizontal"," · ",(Sc.find(e=>e.value===f)||Sc[0]).label]})]}),le(Ko,{code:(()=>{const e=[];e.push("const items = ["),B.forEach((r,t)=>{const a=v[t];e.push(" { icon: <"+a.icon+"Icon />, label: '"+a.label+"' },")}),e.push("];"),e.push("");const r=[];return r.push("items={items}"),"default"!==f&&r.push('barColor="'+f+'"'),s||r.push("showLabels={false}"),"fixed"!==c&&r.push('variant="'+c+'"'),"horizontal"!==p&&r.push('orientation="'+p+'"'),n||r.push("fixed={false}"),e.push("<BottomNavigation"),r.forEach(r=>e.push(" "+r)),e.push("/>"),e.join("\n")})(),language:"JSX",sx:{borderRadius:0,borderBottom:"1px solid var(--Border)"}})]}),de(C,{item:!0,sx:{width:{xs:"calc(100vw - 432px)",md:"calc((100vw - 432px) / 2)"},flexShrink:0,p:3,backgroundColor:"var(--Container)",overflowY:"auto"},children:[le(qt,{children:"Playground"}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Sc.map(e=>le(kc,{label:e.label,selected:f===e.value,onClick:()=>g(e.value)},e.value))}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:[(Sc.find(e=>e.value===f)||Sc[0]).desc,' · data-surface="Surface-Dim" · bg: var(--Background)']})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),de(k,{spacing:0,children:[le(Tc,{label:"Fixed",checked:n,onChange:l,caption:"Position fixed to bottom of viewport."}),le(Tc,{label:"Labels",checked:s,onChange:d,caption:"Show text labels with icons."}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Selected paints a filled circle in var(--Text) with the icon reversed out of it. Not a choice — the design has one selected state, so there is no switch for it."})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(kc,{label:"Fixed",selected:"fixed"===c,onClick:()=>u("fixed")}),le(kc,{label:"Floating",selected:"floating"===c,onClick:()=>u("floating")})]}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"floating"===c?"A pill, rounded to its own height so the ends stay semicircular at any length.":"A square band, edge to edge."}),le(wa,{style:{color:"var(--Text-Quiet)",display:"block",margin:"16px 0 8px"},children:"ORIENTATION"}),de(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(kc,{label:"Horizontal",selected:"horizontal"===p,onClick:()=>m("horizontal")}),le(kc,{label:"Vertical",selected:"vertical"===p,onClick:()=>m("vertical")})]}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"The BAR's direction, not the label's — the label is always under the icon. Vertical is a rail of actions down one side."})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"NAVIGATION ITEMS"}),le(Cc,{label:"Count",value:x,onChange:b,min:3,max:6}),le(k,{spacing:1.5,sx:{mt:2},children:v.slice(0,x).map((e,r)=>de(h,{sx:{display:"flex",alignItems:"center",gap:1,flexWrap:"nowrap"},children:[le(ga,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:16,textAlign:"right"},children:r+1}),le(wc,{value:e.icon,onChange:e=>S(r,"icon",e),options:vc,label:"Item "+(r+1)+" icon"}),s&&le(Bc,{value:e.label,onChange:e=>S(r,"label",e),placeholder:"Label"})]},r))})]})]})]}),1===e&&de(h,{sx:{p:4},children:[le(qt,{children:"Accessibility Requirements"}),de(oa,{color:"quiet",style:{marginBottom:32},children:[x," items · ",s?"Labels":"Icons only"," · ","floating"===c?"Floating":"Fixed"," · ","vertical"===p?"Vertical":"Horizontal"," · ",(Sc.find(e=>e.value===f)||Sc[0]).label]}),de(k,{spacing:4,children:[de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Landmark:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav role="navigation" aria-label="Bottom navigation">'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Tab list:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tablist"'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Tab items:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tab", aria-selected, aria-label'})]}),de(h,{sx:{py:1.5},children:[le(oa,{children:"Focus:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) on :focus-visible."})]})]})]}),de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Token Reference"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Bar:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'Always: data-surface="Surface-Dim" · bg: var(--Background). Theme set by data-theme (Nav-Bar, Primary, Primary-Light, etc.).'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Unselected icon/label:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text-Quiet)"})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Selected:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Selected pill:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"bg: var(--Buttons-Primary-Button) · border: 1px solid var(--Buttons-Primary-Border) · icon/text: var(--Buttons-Primary-Text)"})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Backfill + horizontal label:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label inside pill: var(--Buttons-Primary-Text)"})]}),de(h,{sx:{py:1.5},children:[le(oa,{children:"Backfill + vertical label:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label below pill: var(--Text)"})]})]})]}),de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Best Practices"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Item count:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"3–5 recommended. 6 maximum."})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Horizontal layout:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Only available with 4 or fewer items."})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Labels:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Always recommended for clarity."})]}),de(h,{sx:{py:1.5},children:[le(oa,{children:"Fixed:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Add bottom padding to main content to avoid overlap."})]})]})]})]})]})]})}const Ac={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Ic={small:{indicator:24,fontSize:"var(--Sm-Button-Numbers, 10px)",dot:"var(--Sm-No-Count-Step, 8px)",connectorThickness:"var(--Sm-Step-Bar, 1px)",gap:0},medium:{indicator:32,fontSize:"var(--Button-Numbers, 12px)",dot:"var(--No-Count-Step, 12px)",connectorThickness:"var(--Step-Bar, 2px)",gap:0},large:{indicator:40,fontSize:"var(--Lg-Button-Numbers, 16px)",dot:"var(--Lg-No-Count-Step, 16px)",connectorThickness:"var(--Lg-Step-Bar, 4px)",gap:0}},Wc=l({orientation:"horizontal",size:"medium",color:"primary",activeStep:0,clickable:!1,onStepClick:null,dashedIncomplete:!1,totalSteps:0,variant:"count"}),Rc=()=>n(Wc);function Dc({theme:r,surface:t,children:a,orientation:i="horizontal",size:o="medium",color:n="primary",activeStep:l=0,clickable:s=!1,onStepClick:d,dashedIncomplete:c=!1,variant:u="count",className:p="",sx:m={},...f}){const g=e.Children.toArray(a).filter(e.isValidElement),x=g.length,b="horizontal"===i;return le(Wc.Provider,{value:{orientation:i,size:o,color:n,activeStep:l,clickable:s,onStepClick:d,dashedIncomplete:c,totalSteps:x,variant:u},children:le(h,{component:"ol",role:"list","aria-label":"Progress","data-theme":r||void 0,"data-surface":t||void 0,className:"stepper stepper-"+i+" stepper-"+o+" stepper-"+n+" "+p,sx:{display:"flex",flexDirection:b?"row":"column",alignItems:b?"flex-start":"stretch",listStyle:"none",margin:0,padding:0,width:"100%",gap:0,...m},...f,children:g.map((r,t)=>e.cloneElement(r,{_index:t,key:r.key||t}))})})}function Pc({children:e,icon:r,label:t,disabled:a=!1,_index:i=0,className:o="",sx:n={},...l}){const{orientation:s,size:d,color:c,activeStep:u,clickable:p,onStepClick:m,dashedIncomplete:f,totalSteps:g,variant:x}=Rc(),b=p&&!a,v=Ic[d]||Ic.medium,y=Ac[c]||"Primary",S="horizontal"===s,k=i===u,B=i<u,w=i>u,C=i===g-1,T=r||i+1,z=t||e,A=w?"var(--Quiet)":"var(--Buttons-"+y+"-Border)",I=k?"var(--Buttons-"+y+"-Button)":"transparent",W=k?"var(--Buttons-"+y+"-Text)":w?"var(--Quiet)":"var(--Text)",R=k?"var(--Buttons-"+y+"-Hover)":"var(--Hover)",D=k?"var(--Buttons-"+y+"-Pressed)":"var(--Pressed)",P="noCount"===x,F=le(h,{component:b?"button":"div",onClick:b?()=>m?.(i):void 0,onKeyDown:b?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),m?.(i))}:void 0,tabIndex:b?0:void 0,role:b?"button":void 0,"aria-label":b?"Go to step "+(i+1):void 0,"aria-current":k?"step":void 0,"aria-disabled":a||void 0,className:"step-indicator step-indicator-"+d+(k?" step-indicator-active":"")+(B?" step-indicator-completed":"")+(w?" step-indicator-incomplete":"")+(b?" step-indicator-clickable":""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:P?v.dot:v.indicator+"px",height:P?v.dot:v.indicator+"px",minWidth:P?v.dot:v.indicator+"px",minHeight:P?v.dot:v.indicator+"px",borderRadius:"50%",border:"var(--Button-Border-Width, 1px) solid "+A,backgroundColor:I,color:W,fontSize:v.fontSize,fontFamily:"inherit",fontWeight:"var(--Button-Small-Font-Weight, 700)",lineHeight:1,flexShrink:0,position:"relative",transition:"background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease",cursor:a?"not-allowed":b?"pointer":"default",outline:"none",padding:0,...a&&{opacity:"var(--Disabled, 0.38)"},..."small"===d&&{"&::after":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"24px",height:"24px",borderRadius:"50%"}},...b&&{"&:hover":{backgroundColor:R},"&:active":{backgroundColor:D},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"}}},children:P?null:T}),L=i<u,H=C?null:le(h,{className:"step-connector"+(L?" step-connector-completed":" step-connector-incomplete")+(f&&!L?" step-connector-dashed":""),"aria-hidden":"true",sx:{flex:1,...S?{height:v.connectorThickness,minWidth:"20px",alignSelf:"flex-start",marginTop:`calc(${v.indicator/2}px - ${v.connectorThickness} / 2)`,marginLeft:"8px",marginRight:"8px"}:{width:v.connectorThickness,minHeight:"24px",marginLeft:`calc(${v.indicator/2}px - ${v.connectorThickness} / 2)`,marginTop:"4px",marginBottom:"4px"},backgroundColor:L?"var(--Buttons-"+y+"-Button)":"var(--Border)",...f&&!L&&{backgroundColor:"transparent",backgroundImage:S?"repeating-linear-gradient(90deg, var(--Border) 0px, var(--Border) 6px, transparent 6px, transparent 12px)":"repeating-linear-gradient(180deg, var(--Border) 0px, var(--Border) 6px, transparent 6px, transparent 12px)",backgroundSize:S?"12px 100%":"100% 12px"},transition:"background-color 0.15s ease"}}),M=z?le("small"===d?ga:oa,{style:{fontWeight:k?600:400,color:k||B?"var(--Text)":"var(--Quiet)",textAlign:S?"center":"left",whiteSpace:"nowrap",lineHeight:1.3},children:z}):null;return de(h,S?{component:"li",className:"step step-"+d+" step-horizontal"+(k?" step-active":"")+(B?" step-completed":"")+(w?" step-incomplete":"")+" "+o,sx:{display:"flex",alignItems:"center",flex:C?"none":1,...n},...l,children:[de(h,{sx:{display:"flex",flexDirection:"column",alignItems:"center",flexShrink:0},children:[F,M&&le(h,{sx:{mt:"4px"},children:M})]}),H]}:{component:"li",className:"step step-"+d+" step-vertical"+(k?" step-active":"")+(B?" step-completed":"")+(w?" step-incomplete":"")+" "+o,sx:{display:"flex",flexDirection:"column",alignItems:"flex-start",...n},...l,children:[de(h,{sx:{display:"flex",alignItems:"center",gap:"8px"},children:[F,M]}),H]})}const Fc=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Lc=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Hc=["Account","Details","Review","Confirm","Complete","Done"];function Mc({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Ec({color:e,selected:r,onClick:t}){const a=Fc(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Nc(){const[e,t]=r("default"),[a,i]=r("medium"),[o,n]=r("horizontal"),[l,s]=r(4),[d,c]=r(1),[u,p]=r(!1),[m,f]=r(!1),[g,x]=r(null),[b,v]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Stepper"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:g,surface:b,children:le(h,{sx:{width:"100%",maxWidth:"vertical"===o?300:"100%"},children:le(Dc,{color:e,size:a,orientation:o,activeStep:d,clickable:u,onStepClick:u?c:void 0,dashedIncomplete:m,children:Hc.slice(0,l).map(e=>le(Pc,{label:e},e))})})}),le(Ko,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),"horizontal"!==o&&r.push('orientation="vertical"'),r.push("activeStep={"+d+"}"),u&&r.push("clickable onStepClick={setActiveStep}"),m&&r.push("dashedIncomplete"),"<Stepper "+r.join(" ")+">\n"+Hc.slice(0,l).map(e=>' <Step label="'+e+'" />').join("\n")+"\n</Stepper>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:g,onThemeChange:x,surface:b,onSurfaceChange:v})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STEPS"}),le(k,{direction:"row",spacing:1,children:[2,3,4,5,6].map(e=>le(Mc,{label:String(e),selected:l===e,onClick:()=>{s(e),d>=e&&c(e-1)}},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ACTIVE STEP"}),le(k,{direction:"row",spacing:1,children:Hc.slice(0,l).map((e,r)=>le(Mc,{label:String(r+1),selected:d===r,onClick:()=>c(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Lc.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Ec,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Mc,{label:Fc(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(k,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(Mc,{label:Fc(e),selected:o===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Clickable"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Steps are interactive buttons"})]}),le(hn,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clickable"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Dashed Incomplete"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Dashed connector for future steps"})]}),le(hn,{variant:"default-outline",checked:m,onChange:e=>f(e.target.checked),size:"small","aria-label":"Dashed incomplete"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Container",value:'<ol role="list" aria-label="Progress">'},{label:"Steps",value:"<li> elements with step state classes"},{label:"Active",value:'aria-current="step" on the active indicator'},{label:"Clickable",value:'role="button" aria-label="Go to step N" with tabIndex'},{label:"Focus",value:"outline: 3px solid var(--Focus-Visible); outline-offset: 2px"},{label:"Connectors",value:'aria-hidden="true" — decorative only'}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}function Oc({actions:e=[],variant:t="solid",color:n="default",direction:l="up",speed:s=50,showTooltips:d=!0,open:c,onOpen:u,onClose:p,icon:m,ariaLabel:f="Speed Dial",className:g="",sx:x={},...b}){const[v,y]=r(!1),S=void 0!==c,k=S?c:v,w=a(null),C=t,T=i(()=>{k?(S||y(!1),p?.()):(S||y(!0),u?.())},[k,S,u,p]),z=i((e,r)=>{e.onClick?.(r),S||y(!1),p?.()},[S,p]);o(()=>{if(!k)return;const e=e=>{w.current&&!w.current.contains(e.target)&&(S||y(!1),p?.())};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[k,S,p]),o(()=>{if(!k)return;const e=e=>{"Escape"===e.key&&(S||y(!1),p?.())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[k,S,p]);const A="up"===l||"down"===l,I="up"===l||"down"===l?"left":"top";return de(h,{ref:w,className:"speed-dial speed-dial-"+t+" speed-dial-"+n+" speed-dial-"+l+" "+g,sx:{position:"relative",display:"inline-flex",overflow:"visible",width:A?"56px":"auto",height:A?"auto":"56px",...x},...b,children:[le(el,{size:"large",variant:C,color:n,onClick:T,"aria-label":f,"aria-expanded":k,"aria-haspopup":"menu",sx:{position:"relative",zIndex:2},children:le(h,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",transition:"transform 0.3s ease",transform:k?"rotate(45deg)":"rotate(0deg)"},children:m||le(Tr,{})})}),le(h,{role:"menu",sx:{position:"absolute",inset:0,pointerEvents:"none",overflow:"visible"},children:e.map((e,r)=>{const t=(e=>{const r=56+44*e;switch(l){case"up":default:return{bottom:r+"px",left:"12px"};case"down":return{top:r+"px",left:"12px"};case"left":return{right:r+"px",top:"12px"};case"right":return{left:r+"px",top:"12px"}}})(r),a=r*s,i=le(el,{size:"small",variant:C,color:n,role:"menuitem","aria-label":e.name||"Action "+(r+1),onClick:()=>z(e,r),sx:{position:"absolute",...t,opacity:k?1:0,transform:k?"scale(1)":"scale(0.3)",transition:"opacity 0.2s ease, transform 0.2s ease",transitionDelay:k?a+"ms":"0ms",pointerEvents:k?"auto":"none"},children:e.icon||le(Tr,{})},e.key||r);return d&&e.name?le(B,{title:e.name,placement:I,arrow:!0,open:!!k&&void 0,slotProps:{tooltip:{sx:{backgroundColor:"var(--Container)",color:"var(--Text)",fontSize:"12px",fontWeight:500,border:"1px solid var(--Border)",boxShadow:"0 2px 8px rgba(0,0,0,0.12)"}},arrow:{sx:{color:"var(--Container)"}}},children:i},e.key||r):i})})]})}const Qc=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Vc=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],jc=[{name:"Edit",icon:le(Qa,{size:"small",sx:{color:"inherit"},children:le($r,{})})},{name:"Share",icon:le(Qa,{size:"small",sx:{color:"inherit"},children:le(_r,{})})},{name:"Delete",icon:le(Qa,{size:"small",sx:{color:"inherit"},children:le(Se,{})})},{name:"Favorite",icon:le(Qa,{size:"small",sx:{color:"inherit"},children:le(ve,{})})}];function Gc({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Uc({color:e,selected:r,onClick:t}){const a=Qc(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Xc(){const[e,t]=r("solid"),[a,i]=r("default"),[o,n]=r("up"),[l,s]=r(!0),[d,c]=r(null),[u,p]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Speed Dial"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:d,surface:u,sx:{minHeight:300,alignItems:"flex-end",justifyContent:"center"},children:le(Oc,{variant:e,color:a,direction:o,showTooltips:l,actions:jc,ariaLabel:"Quick actions"})}),le(Ko,{code:(()=>{const r=[];return"solid"!==e&&r.push('variant="'+e+'"'),"default"!==a&&r.push('color="'+a+'"'),"up"!==o&&r.push('direction="'+o+'"'),l||r.push("showTooltips={false}"),r.push("actions={actions}"),r.push('ariaLabel="Quick actions"'),"<SpeedDial\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["solid","outline"].map(r=>le(Gc,{label:Qc(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Vc.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Uc,{color:e,selected:a===e,onClick:i},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["up","down","left","right"].map(e=>le(Gc,{label:Qc(e),selected:o===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Tooltips"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show labels beside actions"})]}),le(hn,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Show tooltips"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"FAB",value:'aria-expanded, aria-haspopup="menu", aria-label'},{label:"Actions",value:'role="menu" container, role="menuitem" on each action'},{label:"Labels",value:"aria-label on each action from name prop"},{label:"Keyboard",value:"Escape closes. Click outside closes."},{label:"Focus",value:"outline: 3px solid var(--Focus-Visible); outline-offset: 2px"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Yc={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",black:"BW",white:"BW"};function Zc(e,r){return"var(--"+(Yc[e]||"Primary")+"-Color-"+r+")"}const qc={primary:{linear:[{family:"primary",tone:8,position:0},{family:"primary",tone:11,position:100}],radial:[{family:"primary",tone:8,position:0},{family:"primary",tone:11,position:100}],mesh:[{family:"primary",tone:8,x:20,y:20,spread:60},{family:"primary",tone:9,x:80,y:30,spread:50},{family:"primary",tone:10,x:50,y:80,spread:55}],meshCard:[{family:"primary",tone:3,x:10,y:10,spread:60},{family:"primary",tone:6,x:80,y:20,spread:50},{family:"primary",tone:9,x:40,y:80,spread:55}]},secondary:{linear:[{family:"secondary",tone:7,position:0},{family:"secondary",tone:10,position:100}],radial:[{family:"secondary",tone:7,position:0},{family:"secondary",tone:10,position:100}],mesh:[{family:"secondary",tone:7,x:15,y:25,spread:55},{family:"secondary",tone:9,x:75,y:35,spread:50},{family:"secondary",tone:11,x:45,y:75,spread:60}],meshCard:[{family:"secondary",tone:2,x:15,y:15,spread:55},{family:"secondary",tone:5,x:85,y:25,spread:50},{family:"secondary",tone:8,x:50,y:75,spread:60}]},tertiary:{linear:[{family:"tertiary",tone:8,position:0},{family:"tertiary",tone:11,position:100}],radial:[{family:"tertiary",tone:8,position:0},{family:"tertiary",tone:11,position:100}],mesh:[{family:"tertiary",tone:8,x:25,y:15,spread:55},{family:"tertiary",tone:10,x:70,y:40,spread:50},{family:"tertiary",tone:11,x:40,y:85,spread:55}],meshCard:[{family:"tertiary",tone:3,x:20,y:10,spread:60},{family:"tertiary",tone:7,x:75,y:30,spread:50},{family:"tertiary",tone:10,x:45,y:80,spread:55}]},black:{linear:[{family:"black",tone:10,position:0},{family:"neutral",tone:3,position:100}],radial:[{family:"black",tone:10,position:0},{family:"neutral",tone:3,position:100}],mesh:[{family:"black",tone:10,x:0,y:0,spread:100},{family:"primary",tone:3,x:25,y:25,spread:50},{family:"secondary",tone:4,x:75,y:35,spread:45},{family:"tertiary",tone:3,x:50,y:80,spread:50}],meshCard:[{family:"black",tone:11,x:0,y:0,spread:100},{family:"primary",tone:5,x:20,y:20,spread:55},{family:"secondary",tone:8,x:80,y:30,spread:45},{family:"tertiary",tone:10,x:45,y:80,spread:50}]},white:{linear:[{family:"white",tone:2,position:0},{family:"neutral",tone:9,position:100}],radial:[{family:"white",tone:2,position:0},{family:"neutral",tone:9,position:100}],mesh:[{family:"white",tone:2,x:0,y:0,spread:100},{family:"primary",tone:9,x:25,y:25,spread:50},{family:"secondary",tone:8,x:75,y:35,spread:45},{family:"tertiary",tone:9,x:50,y:80,spread:50}],meshCard:[{family:"white",tone:1,x:0,y:0,spread:100},{family:"primary",tone:4,x:20,y:20,spread:55},{family:"secondary",tone:7,x:80,y:30,spread:45},{family:"tertiary",tone:10,x:45,y:80,spread:50}]}};function Jc(e,r){const t=qc[e]||qc.primary;return(t[r]||t.linear).map(e=>({...e}))}function Kc({variant:e="linear",color:r="primary",angle:t=135,stops:a=null,position:i=null,blobs:o=null,cardProps:n={},minHeight:l=300,children:s,className:d="",sx:c={},...u}){const p="meshCard"===e,m="mesh"===e||p,f="radial"===e,g="linear"===e||f,x=a||Jc(r,f?"radial":"linear"),b=o||Jc(r,p?"meshCard":"mesh"),v=m?function(e){if(!e||0===e.length)return"none";const r=e.map(e=>{const r=Zc(e.family,e.tone),t=e.spread||40;return"radial-gradient(circle at "+e.x+"% "+e.y+"%, "+r+" 0%, transparent "+t+"%)"}),t=Zc(e[0].family,e[0].tone);return r.push(t),r.join(", ")}(b):f?function(e,r){if(!e||0===e.length)return"none";const t=[...e].sort((e,r)=>e.position-r.position).map(e=>Zc(e.family,e.tone)+" "+e.position+"%"),a=r||{x:50,y:50};return"radial-gradient(circle at "+a.x+"% "+a.y+"%, "+t.join(", ")+")"}(x,i||{x:50,y:50}):function(e,r){return e&&0!==e.length?"linear-gradient("+r+"deg, "+[...e].sort((e,r)=>e.position-r.position).map(e=>Zc(e.family,e.tone)+" "+e.position+"%").join(", ")+")":"none"}(x,t),y=g?x[0]:b[0];var S,k;const B=function(e){return"dark"===e?"var(--BW-Color-1)":"var(--BW-Color-6)"}((S=y?.tone||8,"black"===(k=y?.family||"primary")||"white"===k?S<=5?"light":"dark":S<=5?"dark":"light"));return le(h,p?{className:"gradient gradient-mesh-card "+d,sx:{background:v,minHeight:l,borderRadius:"var(--Card-Radius)",display:"flex",alignItems:"center",justifyContent:"center",padding:"var(--Card-Padding)",position:"relative",overflow:"hidden",...c},...u,children:le(Un,{variant:"solid",...n,children:le(Xn,{children:s})})}:{className:"gradient gradient-"+e+" "+d,sx:{background:v,minHeight:l,borderRadius:"var(--Card-Radius)",color:B,display:"flex",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden",...c},...u,children:s})}const $c=e=>le(Kc,{variant:"linear",...e}),_c=e=>le(Kc,{variant:"radial",...e}),eu=e=>le(Kc,{variant:"mesh",...e}),ru=e=>le(Kc,{variant:"meshCard",...e});function tu({children:e,surface:r="Container",outlined:t=!1,variant:a=(t?"outlined":"elevation"),sx:i={},...o}){const{dataSurface:n,elevation:l}=function(e="Container"){const r={"Container-Lowest":{elevation:0,zIndex:0},"Container-Low":{elevation:1,zIndex:100},Container:{elevation:4,zIndex:200},"Container-High":{elevation:8,zIndex:300},"Container-Highest":{elevation:12,zIndex:400}},t=r[e]||r.Container;return{dataSurface:e,elevation:t.elevation,zIndex:t.zIndex}}(r);return le(E,{variant:a,elevation:t?0:l,"data-surface":n,sx:{padding:2,borderRadius:"8px",transition:"all 0.2s ease-in-out",...i},...o,children:e})}function au({open:e=!1,onClose:t,anchorRef:i,placement:n="bottom-end",theme:l="Default",surface:s="Surface-Bright",width:d=320,maxHeight:c=400,children:u,sx:p={}}){const m=a(null),[f,g]=r({top:0,left:0,right:"auto"});return o(()=>{if(!e||!i?.current)return;const r=i.current.getBoundingClientRect();g("bottom-end"===n?{top:r.bottom+6,right:window.innerWidth-r.right,left:"auto"}:{top:r.bottom+6,left:r.left,right:"auto"})},[e,i,n]),o(()=>{if(!e)return;const r=e=>{m.current?.contains(e.target)||i?.current?.contains(e.target)||t?.()};return document.addEventListener("pointerdown",r),()=>document.removeEventListener("pointerdown",r)},[e,t,i]),o(()=>{if(!e)return;const r=e=>{"Escape"===e.key&&t?.()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[e,t]),e?xe.createPortal(le(h,{ref:m,"data-theme":l,"data-surface":s,sx:{position:"fixed",top:f.top,left:f.left,right:f.right,zIndex:2e9,width:d,maxHeight:c,overflowY:"auto",backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:ci,...p},children:u}),document.body):null}["default","primary","secondary","tertiary","neutral"].map(e=>{return{value:e,label:(r=e,r?r.charAt(0).toUpperCase()+r.slice(1):"")};var r});const iu=l(null),ou=["Default","Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error","App-Bar","Nav-Bar","Status"],nu=["Professional","Modern","Bold","Playful"],lu=["Surface-Dimmest","Surface-Dim","Surface","Surface-Bright","Surface-Brightest","Container","Container-Low","Container-Lowest","Container-High","Container-Highest"],su={"light-tonal":{theme:"Primary",rootSurface:"Surface-Brightest"},"grey-professional":{theme:"Neutral",rootSurface:"Surface"},"dark-professional":{theme:"Neutral",rootSurface:"Surface-Dimmest"}},du="omni-foundation",cu="omni-core",uu="omni-typography",hu="omni-mode",pu="omni-base",mu="omni-styles";function fu(e){document.getElementById(e)?.remove()}function gu(e,r,t){return r?function(e){return!(!e||"string"!=typeof e)&&(e.startsWith("http")||e.startsWith("/")||e.endsWith(".css"))}(r)?function(e,r,t){const a=document.getElementById(e);return a?"LINK"===a.tagName&&a.getAttribute("href")!==r?new Promise((e,t)=>{a.onload=()=>e(a),a.onerror=()=>t(new Error(`OmniDesignProvider: failed to load ${r}`)),a.setAttribute("href",r)}):Promise.resolve(a):new Promise((a,i)=>{const o=document.createElement("link");o.id=e,o.rel="stylesheet",o.setAttribute("data-omni","true"),o.onload=()=>a(o),o.onerror=()=>i(new Error(`OmniDesignProvider: failed to load ${r}`)),o.href=r;const n=t?document.getElementById(t):null;n?document.head.insertBefore(o,n):document.head.appendChild(o)})}(e,r,t):function(e,r,t){if(!r)return Promise.resolve(null);const a=document.getElementById(e);if(a)return a.textContent=r,Promise.resolve(a);const i=document.createElement("style");i.id=e,i.setAttribute("data-omni","true"),i.textContent=r;const o=t?document.getElementById(t):null;return o?document.head.insertBefore(i,o):document.head.appendChild(i),Promise.resolve(i)}(e,r,t):Promise.resolve(null)}function xu({themeURL:e,foundationCSS:t,coreCSS:n,typographyCSS:l,lightModeCSS:d,darkModeCSS:c,baseCSS:u,stylesCSS:h,defaultTheme:p="Default",defaultStyle:m="Modern",defaultSurface:f="Surface",surfaceStyle:g,defaultDarkMode:x=!1,darkTheme:b="Neutral",darkMode:v,onDarkModeChange:y,className:S,style:k,fullHeight:B=!0,children:w}){const[C,T]=r(x),z=void 0!==v,A=z?v:C,[I,W]=r({foundation:t??null,core:n??null,typography:l??null,lightMode:d??null,darkMode:c??null,base:u??null,styles:h??null}),[R,D]=r({}),P=a(!0);o(()=>(P.current=!0,()=>{P.current=!1}),[]),o(()=>{e&&(X("loading"),async function(e){const r=/\.json(\?|$)/.test(e)?e:`${e.replace(/\/$/,"")}/theme.json`,t=e.replace(/\/$/,"").replace(/\/theme\.json(\?.*)?$/,""),a=await fetch(r);if(!a.ok)throw new Error(`OmniDesignProvider: could not load theme manifest from ${r} (${a.status})`);const i=await a.json(),o=e=>e?/^https?:\/\//i.test(e)?e:`${t}/${e}`:null;return{foundationURL:o(i.foundation),coreURL:o(i.core),typographyURL:o(i.typography),lightModeURL:o(i.lightMode),darkModeURL:o(i.darkMode),baseURL:o(i.base),stylesURL:o(i.styles),defaultTheme:i.defaultTheme??null,defaultStyle:i.defaultStyle??null,defaultSurface:i.defaultSurface??null,darkTheme:i.darkTheme??null,name:i.name??null}}(e).then(e=>{P.current&&(W({foundation:t??e.foundationURL,core:n??e.coreURL,typography:l??e.typographyURL,lightMode:d??e.lightModeURL,darkMode:c??e.darkModeURL,base:u??e.baseURL,styles:h??e.stylesURL}),D({defaultTheme:e.defaultTheme,defaultStyle:e.defaultStyle,defaultSurface:e.defaultSurface,darkTheme:e.darkTheme,name:e.name}))}).catch(e=>{P.current&&(console.error("OmniDesignProvider: manifest error:",e),Z(e.message),X("error"))}))},[e]);const F=g?su[g]?.theme??p:"Default"!==p?p:R.defaultTheme??p,L=g?su[g]?.rootSurface??f:R.defaultSurface??f,H=R.defaultStyle??m,M="Neutral"!==b?b:R.darkTheme??b,[E,N]=r(F),[O,Q]=r(H),[V,j]=r(L),G=!!(e||t||n||l||d||c||u||h),[U,X]=r(G?"loading":"ready"),[Y,Z]=r(null);o(()=>{const{foundation:e,core:r,typography:t,base:a,styles:i}=I;if(e||r||t||a||i)return X("loading"),Z(null),Promise.all([gu(du,e),gu(cu,r),gu(uu,t).catch(e=>{console.warn("OmniDesignProvider: typography CSS did not load —",e.message)}),gu(pu,a),gu(mu,i)]).then(()=>{P.current&&X("ready")}).catch(e=>{P.current&&(console.error("OmniDesignProvider CSS error:",e),Z(e.message),X("error"))}),()=>{fu(du),fu(cu),fu(uu),fu(pu),fu(mu)};X("ready")},[I.foundation,I.core,I.typography,I.base,I.styles]),o(()=>{const e=A?I.darkMode:I.lightMode;e&&gu(hu,e,pu).catch(e=>console.error("OmniDesignProvider mode CSS error:",e))},[A,I.lightMode,I.darkMode]),o(()=>()=>fu(hu),[]);const q=A?M:E,J=i(()=>{z?y?.(!A):T(e=>!e)},[z,A,y]),K=i(e=>{ou.includes(e)||console.warn(`OmniDesignProvider: unknown theme "${e}"`),N(e)},[]),$=i(e=>{nu.includes(e)||console.warn(`OmniDesignProvider: unknown style "${e}"`),Q(e)},[]),_=i(e=>{lu.includes(e)||console.warn(`OmniDesignProvider: unknown surface "${e}"`),j(e)},[]),ee=s(()=>({theme:q,style:O,surface:V,isDark:A,cssStatus:U,cssError:Y,setTheme:K,setStyle:$,setSurface:_,toggleDarkMode:J,themes:ou,styles:nu,surfaces:lu,name:R.name??null}),[q,O,V,A,U,Y,K,$,_,J,R.name]);return de(iu.Provider,{value:ee,children:[le("style",{"data-omni":"hide-during-load",children:'[data-omni-css="loading"]{visibility:hidden}'}),le("div",{"data-theme":q,"data-style":O,"data-surface":V,"data-omni-css":U,className:S,style:{...B?{minHeight:"100vh"}:{},...k},children:w})]})}function bu(){const e=n(iu);if(!e)throw new Error("useOmniDesign must be used inside a <OmniDesignProvider>");return e}function vu({theme:e,surface:r,as:t="div",children:a,className:i,style:o,...n}){return le(t,{"data-theme":e,"data-surface":r,className:i,style:o,...n,children:a})}function yu({surface:e,as:r="div",children:t,className:a,style:i,...o}){return le(r,{"data-surface":e,className:a,style:i,...o,children:t})}const Su=e=>d(function(r,t){return le(Y,{direction:e,ref:t,...r})}),ku={fade:d(function(e,r){return le(X,{ref:r,...e})}),grow:d(function(e,r){return le(U,{ref:r,...e})}),zoom:d(function(e,r){return le(G,{ref:r,...e})}),"slide-up":Su("up"),"slide-down":Su("down"),"slide-left":Su("left"),"slide-right":Su("right")},Bu={backgroundColor:"var(--Background)",color:"var(--Text)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:"0 8px 32px rgba(0,0,0,0.18)"},wu={color:"var(--Text)",fontWeight:600,fontSize:"18px",fontFamily:"inherit",borderBottom:"1px solid var(--Border)",display:"flex",justifyContent:"space-between",alignItems:"center",py:1.5,px:3},Cu={color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6,py:3,px:3},Tu={borderTop:"1px solid var(--Border)",px:3,py:1.5,gap:1},zu={fontFamily:"inherit",fontWeight:500,fontSize:"14px",borderRadius:"var(--Style-Border-Radius)",padding:"6px 16px",cursor:"pointer",border:"none",transition:"background-color 0.15s, color 0.15s","&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"1px"}},Au={primary:{...zu,backgroundColor:"var(--Buttons-Primary-Button)",color:"var(--Buttons-Primary-Text)",border:"1px solid var(--Buttons-Primary-Border)","&:hover":{backgroundColor:"var(--Buttons-Primary-Hover)"},"&:active":{backgroundColor:"var(--Buttons-Primary-Pressed)"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}},outline:{...zu,backgroundColor:"transparent",color:"var(--Text)",border:"1px solid var(--Border)","&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}}};function Iu({open:e=!1,onClose:r,title:t,children:a,actions:i,maxWidth:o="sm",fullScreen:n=!1,scroll:l="body",alert:s=!1,nonModal:d=!1,transition:c,transitionDuration:u=300,titleId:p="dialog-title",contentId:m="dialog-description",className:f="",sx:g={},PaperProps:x={},...b}){const v=c?ku[c]:void 0;let y;try{y=bu()}catch{y=null}const S=y?.theme||"Default",k=y?.style||"Modern",B=y?.surface||"Surface";return de(N,{open:e,onClose:(e,t)=>{s&&"backdropClick"===t||s&&"escapeKeyDown"===t||r?.(e,t)},maxWidth:!n&&o,fullScreen:n,fullWidth:!n,scroll:l,hideBackdrop:d,disableEnforceFocus:d,disableEscapeKeyDown:s,TransitionComponent:v,transitionDuration:u,"aria-labelledby":p,"aria-describedby":m,className:"dialog dialog-"+o+(n?" dialog-fullscreen":"")+(s?" dialog-alert":"")+(f?" "+f:""),style:{zIndex:1e7},slotProps:{backdrop:{sx:{backgroundColor:d?"transparent":"rgba(0,0,0,0.5)"}}},PaperProps:{...x,"data-theme":S,"data-style":k,"data-surface":B,sx:{...Bu,...n&&{borderRadius:0,border:"none"},...x.sx},role:s?"alertdialog":"dialog"},...b,children:[t&&de(O,{id:p,sx:wu,children:[t,!s&&r&&le(Ri,{"aria-label":"Close dialog",onClick:e=>r(e,"closeButton"),size:"small",variant:"ghost",sx:{color:"var(--Text-Quiet)"},children:le(Rr,{fontSize:"small"})})]}),le(Q,{dividers:"paper"===l,sx:{...Cu,..."paper"===l&&{maxHeight:n?"none":"400px",overflowY:"auto",borderColor:"var(--Border)"}},children:s?le(V,{id:m,sx:{color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6},children:a}):le(h,{id:m,children:a})}),i&&le(j,{sx:Tu,children:i})]})}function Wu({open:e,onClose:r,title:t,children:a,confirmText:i="Confirm",cancelText:o="Cancel",onConfirm:n,onCancel:l,...s}){return le(Iu,{open:e,onClose:r,title:t,alert:!0,...s,actions:de(se,{children:[le(h,{component:"button",type:"button",onClick:l||r,sx:Au.outline,children:o}),le(h,{component:"button",type:"button",onClick:n||r,sx:Au.primary,children:i})]}),children:a})}function Ru({open:e,onClose:r,title:t,children:a,submitText:i="Submit",cancelText:o="Cancel",onSubmit:n,...l}){return le(Iu,{open:e,onClose:r,title:t,...l,actions:de(se,{children:[le(h,{component:"button",type:"button",onClick:r,sx:Au.outline,children:o}),le(h,{component:"button",type:"button",onClick:n,sx:Au.primary,children:i})]}),children:a})}function Du({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Pu(){const[e,t]=r(!1),[a,i]=r("sm"),[o,n]=r(!1),[l,s]=r("none"),[d,c]=r(!1),[u,p]=r(!1),[m,f]=r(null),[g,x]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Dialog"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:m,surface:g,children:le(Wi,{variant:"default",onClick:()=>t(!0),children:"Open Dialog"})}),le(Ko,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"sm"!==a&&e.push('maxWidth="'+a+'"'),o&&e.push("fullScreen"),d&&e.push("alert"),u&&e.push("nonModal"),"none"!==l&&e.push('transition="'+l+'"'),e.push('title="Dialog Title"'),e.push('actions={<><Button variant="default-outline" onClick={handleClose}>Cancel</Button><Button variant="default" onClick={handleClose}>Confirm</Button></>}'),"<Dialog\n "+e.join("\n ")+"\n>\n Dialog content goes here.\n</Dialog>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),le(Iu,{open:e,onClose:(e,r)=>{d&&"backdropClick"===r||t(!1)},maxWidth:a,fullScreen:o,alert:d,nonModal:u,transition:"none"!==l?l:void 0,title:"Dialog Title",actions:de(se,{children:[le(Wi,{variant:"default-outline",size:"small",onClick:()=>t(!1),children:"Cancel"}),le(Wi,{variant:"default",size:"small",onClick:()=>t(!1),children:"Confirm"})]}),children:le(sa,{children:"This is the dialog content. You can put any information here that requires user attention or action."})})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:m,onThemeChange:f,surface:g,onSurfaceChange:x})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[["xs","sm","md","lg","xl"].map(e=>le(Du,{label:e.toUpperCase(),selected:a===e,onClick:()=>{i(e),n(!1)}},e)),le(Du,{label:"Full Screen",selected:o,onClick:()=>n(!o)})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TRANSITION"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["none","slide-up","slide-down","grow","fade","zoom"].map(e=>{return le(Du,{label:(r=e,r?r.charAt(0).toUpperCase()+r.slice(1):""),selected:l===e,onClick:()=>s(e)},e);var r})})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Alert"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop dismiss, no Escape"})]}),le(hn,{variant:"default-outline",checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Alert mode"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Non-Modal"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop, interact with content behind"})]}),le(hn,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Non-modal"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="dialog" (standard) or role="alertdialog" (alert mode)'},{label:"Label",value:"aria-labelledby links to title, aria-describedby links to content"},{label:"Focus",value:"Focus trapped inside dialog. Returns to trigger on close."},{label:"Keyboard",value:"Escape closes (unless alert). Tab cycles through focusable elements."},{label:"Backdrop",value:"Click closes (unless alert or non-modal)"},{label:"Close",value:'Close button with aria-label="Close dialog"'}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Fu={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Lu={default:"Container-High",solid:"Container-High",soft:"Surface-Brightest"},Hu={small:{maxWidth:400,padding:"24px"},medium:{maxWidth:560,padding:"32px"},large:{maxWidth:720,padding:"40px"}},Mu={fade:{enter:{from:{opacity:0},to:{opacity:1}},name:"modal-fade"},"slide-up":{enter:{from:{opacity:0,transform:"translateY(40px)"},to:{opacity:1,transform:"translateY(0)"}},name:"modal-slide-up"},"slide-down":{enter:{from:{opacity:0,transform:"translateY(-40px)"},to:{opacity:1,transform:"translateY(0)"}},name:"modal-slide-down"},zoom:{enter:{from:{opacity:0,transform:"scale(0.85)"},to:{opacity:1,transform:"scale(1)"}},name:"modal-zoom"}};function Eu(e){const r=Mu[e];if(!r)return"";const{from:t,to:a}=r.enter,i=Object.entries(t).map(([e,r])=>e+":"+r).join(";"),o=Object.entries(a).map(([e,r])=>e+":"+r).join(";");return"@keyframes "+r.name+" { from {"+i+"} to {"+o+"} }@keyframes "+r.name+"-backdrop { from { opacity: 0 } to { opacity: 1 } }"}function Nu({open:e,onClose:t,children:i,title:n,variant:l="default",color:s="primary",size:d="medium",layout:c="center",transition:u="fade",transitionSpeed:p=250,closeOnBackdrop:m=!0,showCloseButton:f=!0,className:g="",sx:x={},...b}){const v=a(null),y=a(null),[S,k]=r(!1);let B;try{B=bu()}catch{B=null}const w=B?.style||"Modern",C="soft"===l,T="solid"===l,z="fullscreen"===c,A=T||C?Fu[s]:null,I=Lu[l]||Lu.default,W=Hu[d]||Hu.medium,R=Mu[u],D=R?R.name:void 0,P=p+"ms";return o(()=>(e?(y.current=document.activeElement,k(!0),requestAnimationFrame(()=>{v.current?.focus()}),document.body.style.overflow="hidden"):(k(!1),document.body.style.overflow="",y.current?.focus()),()=>{document.body.style.overflow=""}),[e]),o(()=>{if(!e)return;const r=e=>{"Escape"===e.key&&t?.()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[e,t]),e||S?de(se,{children:["none"!==u&&le("style",{children:Eu(u)}),le(h,{"aria-hidden":"true",onClick:m?t:void 0,sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0,0,0,0.5)",...D&&{animation:D+"-backdrop "+P+" ease-out forwards"}}}),de(h,{role:"dialog","aria-modal":"true","aria-label":n||"Modal",ref:v,tabIndex:-1,"data-surface":I,"data-theme":A||void 0,"data-style":w,className:"modal modal-"+l+" modal-"+d+" modal-"+c+(C||T?" modal-"+s:"")+(g?" "+g:""),sx:{position:"fixed",zIndex:10000001,outline:"none",fontFamily:"inherit",...z?{inset:0,borderRadius:0}:{top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:W.maxWidth+"px",width:"calc(100% - 32px)",maxHeight:"calc(100vh - 64px)",borderRadius:"var(--Modal-Radius, var(--Style-Border-Radius))"},backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:"0 8px 32px rgba(0,0,0,0.24)",display:"flex",flexDirection:"column",overflow:"hidden",...D&&{animation:D+" "+P+" ease-out forwards"},...x},...b,children:[(n||f)&&de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",px:z?4:W.padding,pt:z?3:W.padding,pb:0,flexShrink:0},children:[n&&le(h,{sx:{fontSize:"small"===d?"18px":"large"===d?"24px":"20px",fontWeight:700,color:"var(--Text)",flex:1},children:n}),f&&le(h,{component:"button",type:"button","aria-label":"Close modal",onClick:t,sx:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:"50%",border:"none",backgroundColor:"transparent",color:"var(--Text-Quiet)",cursor:"pointer",flexShrink:0,ml:1,transition:"background-color 0.15s ease, color 0.15s ease","&:hover":{backgroundColor:"var(--Hover)",color:"var(--Text)"},"&:active":{backgroundColor:"var(--Pressed)",color:"var(--Text)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"&:disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"}},children:le(Rr,{sx:{fontSize:20}})})]}),le(h,{sx:{flex:1,overflowY:"auto",px:z?4:W.padding,pt:z?3:"16px",pb:z?3:W.padding,color:"var(--Text)",fontSize:"small"===d?"13px":"14px",lineHeight:1.6},children:i})]})]}):null}const Ou={small:{width:"240px",height:"200px"},medium:{width:"320px",height:"280px"},large:{width:"420px",height:"380px"}},Qu={left:{borderRight:"1px solid var(--Border)"},right:{borderLeft:"1px solid var(--Border)"},top:{borderBottom:"1px solid var(--Border)"},bottom:{borderTop:"1px solid var(--Border)"}},Vu={left:{top:0,left:0,bottom:0},right:{top:0,right:0,bottom:0},top:{top:0,left:0,right:0},bottom:{bottom:0,left:0,right:0}},ju={left:"translateX(-100%)",right:"translateX(100%)",top:"translateY(-100%)",bottom:"translateY(100%)"};function Gu({children:e,open:r=!1,onClose:t,size:n="medium",anchor:l="left",hideBackdrop:s=!1,className:d="",sx:c={},...u}){const p=a(null),m=a(null),f="left"===l||"right"===l;let g;try{g=bu()}catch{g=null}const x=g?.theme||"Default",b=g?.style||"Modern",v=Ou[n]||Ou.medium;o(()=>{if(!r)return;const e=e=>{"Escape"===e.key&&t?.()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r,t]),o(()=>{r?(m.current=document.activeElement,requestAnimationFrame(()=>{const e=p.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');e?e.focus():p.current?.focus()})):m.current&&(m.current.focus(),m.current=null)},[r]),o(()=>{if(r){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}},[r]);const y=i(e=>{if("Tab"!==e.key||!p.current)return;const r=p.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(!r.length)return;const t=r[0],a=r[r.length-1];e.shiftKey?document.activeElement===t&&(e.preventDefault(),a.focus()):document.activeElement===a&&(e.preventDefault(),t.focus())},[]);return r?de(se,{children:[!s&&le(h,{onClick:()=>t?.(),"aria-hidden":"true",sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0, 0, 0, 0.5)",transition:"opacity 0.3s ease"}}),le(h,{ref:p,role:"dialog","aria-modal":"true",tabIndex:-1,"data-theme":x,"data-style":b,"data-surface":"Surface-Dim",onKeyDown:y,className:"drawer drawer-"+n+" drawer-"+l+" "+d,sx:{position:"fixed",zIndex:10000001,...Vu[l],...f?{width:v.width,height:"100%"}:{height:v.height,width:"100%"},backgroundColor:"var(--Background)",color:"var(--Text)",...Qu[l],boxShadow:di,display:"flex",flexDirection:"column",outline:"none",overflow:"hidden",animation:"drawer-slide-in 0.3s ease forwards","@keyframes drawer-slide-in":{from:{transform:ju[l]},to:{transform:"translate(0, 0)"}},...c},...u,children:e})]}):null}function Uu({onClick:e,className:r="",sx:t={},...a}){return le(h,{sx:{position:"absolute",top:"12px",right:"12px",zIndex:1,...t},className:r,...a,children:le(Wi,{iconOnly:!0,variant:"ghost",size:"small",onClick:e,"aria-label":"Close drawer",children:le(Qa,{size:"small",children:le(Rr,{})})})})}function Xu({children:e,className:r="",sx:t={},...a}){return le(h,{className:"drawer-header "+r,sx:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px",borderBottom:"1px solid var(--Border)",flexShrink:0,...t},...a,children:e})}function Yu({children:e,className:r="",sx:t={},...a}){return le(h,{className:"drawer-content "+r,sx:{flex:1,overflowY:"auto",padding:"16px",...t},...a,children:e})}const Zu={compact:{minHeight:"24px",fontSize:"13px",iconSize:16,gap:"6px"},default:{minHeight:"32px",fontSize:"14px",iconSize:18,gap:"8px"}},qu={none:void 0,slide:"omni-tree-slide 0.25s ease",spring:"omni-tree-slide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)"},Ju={"@keyframes omni-tree-slide":{from:{opacity:0,transform:"translateY(-4px)"},to:{opacity:1,transform:"none"}}};function Ku(e,r,t=1,a=[]){return e.forEach((i,o)=>{a.push({item:i,level:t,index:o,siblings:e.length}),i.children?.length&&r.includes(i.id)&&Ku(i.children,r,t+1,a)}),a}function $u(e,r,t=null){for(const a of e){if(a.id===r)return t;if(a.children?.length){const e=$u(a.children,r,a.id);if(null!=e)return e;if(null===e&&a.children.some(e=>e.id===r))return a.id}}return null}function _u({node:e,density:r,expanded:t,selected:a,focusedId:i,multiSelect:o,checkboxSelection:n,disableSelection:l,disabledItemsFocusable:s,collapseIcon:d,expandIcon:c,animation:u,onToggle:p,onSelect:m,onFocusItem:f,registerRef:g}){const{item:x,level:b,index:v,siblings:y}=e,S=Zu[r]||Zu.default,k="compact"===r?ga:oa,B=!!x.children?.length,w=B&&t.includes(x.id),C=a.includes(x.id),T=!!x.disabled,z=!T||s;return de(h,{component:"li",role:"treeitem","aria-expanded":B?w:void 0,"aria-selected":l?void 0:C,"aria-disabled":T||void 0,"aria-level":b,"aria-setsize":y,"aria-posinset":v+1,tabIndex:i===x.id&&z?0:-1,ref:e=>g(x.id,e),onFocus:e=>{e.stopPropagation(),f(x.id)},sx:{outline:"none",listStyle:"none",...x.sx||{}},children:[de(h,{className:"omni-tree-content",onClick:e=>{T||(e.stopPropagation(),B&&p(e,x.id),l||m(e,x.id))},sx:{display:"flex",alignItems:"center",gap:S.gap,minHeight:S.minHeight,padding:"0 8px",marginLeft:0,borderRadius:"var(--Style-Border-Radius)",border:"1px solid transparent",color:C?"var(--Text)":"var(--Quiet)",fontWeight:C?600:400,backgroundColor:C?"var(--Pressed)":"transparent",cursor:T?"not-allowed":"pointer",opacity:T?"var(--Disabled, 0.38)":1,transition:"color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease",...T?{}:{"&:hover":{color:"var(--Text)",backgroundColor:"var(--Hover)"},"&:active":{color:"var(--Text)",backgroundColor:"var(--Pressed)"}},"li:focus-visible > &":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"}},children:[le(h,{"aria-hidden":"true",sx:{width:S.iconSize,height:S.iconSize,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",color:"inherit"},children:B&&(w?d:c)}),n&&!l&&le(ji,{checked:C,disabled:T,size:"small","aria-hidden":"true",tabIndex:-1,onChange:()=>{}}),x.icon&&le(Qa,{size:"small",sx:{color:"inherit",flexShrink:0},children:x.icon}),le(k,{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:"inherit",fontWeight:"inherit"},children:x.label}),x.badge&&le(h,{sx:{flexShrink:0},children:x.badge})]}),B&&w&&le(h,{component:"ul",role:"group",sx:{margin:0,padding:0,paddingLeft:"8px",marginLeft:"12px",borderLeft:"1px solid var(--Border)",listStyle:"none",animation:qu[u]},children:x.children.map((e,h)=>le(_u,{node:{item:e,level:b+1,index:h,siblings:x.children.length},density:r,expanded:t,selected:a,focusedId:i,multiSelect:o,checkboxSelection:n,disableSelection:l,disabledItemsFocusable:s,collapseIcon:d,expandIcon:c,animation:u,onToggle:p,onSelect:m,onFocusItem:f,registerRef:g},e.id))})]})}function eh({color:e="default",variant:t="solid",surface:o,density:n="default",animation:l="slide",selectionStyle:d,items:c=rh,selectionMode:u="single",checkboxSelection:p=!1,disableSelection:m=!1,disabledItemsFocusable:f=!1,defaultExpandedItems:g,expandedItems:x,onExpandedItemsChange:b,selectedItems:v,onSelectedItemsChange:y,onItemExpansionToggle:S,onItemSelectionToggle:k,slots:B,"aria-label":w="Tree view",className:C="",sx:T={},...z}){const A=d||t,I="multi"===u,[W,R]=r(g||[]),D=void 0!==x?x:W,[P,F]=r(v||(I?[]:null)),L=void 0!==v?v:P,H=Array.isArray(L)?L:L?[L]:[],M=s(()=>Ku(c,D),[c,D]),[E,N]=r(null),O=E??M[0]?.item.id??null,Q=a({}),V=i((e,r)=>{r?Q.current[e]=r:delete Q.current[e]},[]),j=i(e=>{N(e),Q.current[e]?.focus()},[]),G=i((e,r)=>{const t=D.includes(r),a=t?D.filter(e=>e!==r):[...D,r];void 0===x&&R(a),b?.(e,a),S?.(e,r,!t)},[D,x,b,S]),U=i((e,r)=>{const t=H.includes(r),a=I?t?H.filter(e=>e!==r):[...H,r]:[r],i=I?a:a[0]??null;void 0===v&&F(i),y?.(e,i),k?.(e,r,!I||!t)},[H,I,v,y,k]),X=i(e=>{const r=M.filter(e=>!e.item.disabled||f),t=r.findIndex(e=>e.item.id===O),a=r[t];if(!a)return;const{item:i}=a,o=!!i.children?.length,n=o&&D.includes(i.id),l=t=>{const a=r[Math.max(0,Math.min(r.length-1,t))];a&&(e.preventDefault(),j(a.item.id))};switch(e.key){case"ArrowDown":l(t+1);break;case"ArrowUp":l(t-1);break;case"Home":l(0);break;case"End":l(r.length-1);break;case"ArrowRight":o&&!n?(e.preventDefault(),G(e,i.id)):n&&l(t+1);break;case"ArrowLeft":if(n)e.preventDefault(),G(e,i.id);else{const r=$u(c,i.id);r&&(e.preventDefault(),j(r))}break;case"Enter":case" ":e.preventDefault(),m?o&&G(e,i.id):U(e,i.id)}},[M,O,D,c,f,m,j,G,U]),Y=(Z=e).charAt(0).toUpperCase()+Z.slice(1);var Z;const q="default"===A?void 0:Y,J=o||("light"===A?"Surface-Brightest":"Surface-Dim"),K=B?.collapseIcon?le(B.collapseIcon,{}):le(Qa,{size:"small",sx:{color:"inherit",transform:"rotate(90deg)"},children:le(Ur,{})}),$=B?.expandIcon?le(B.expandIcon,{}):le(Qa,{size:"small",sx:{color:"inherit"},children:le(Ur,{})});return le(h,{"data-theme":q,"data-surface":J,className:"omni-treeview omni-treeview-"+A+" omni-treeview-"+e+" omni-treeview-"+n+(C?" "+C:""),sx:{backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",...Ju,...T},children:le(h,{component:"ul",role:"tree","aria-label":w,"aria-multiselectable":I||void 0,onKeyDown:X,sx:{margin:0,padding:"8px",listStyle:"none",fontFamily:"inherit"},...z,children:c.map((e,r)=>le(_u,{node:{item:e,level:1,index:r,siblings:c.length},density:n,expanded:D,selected:H,focusedId:O,multiSelect:I,checkboxSelection:p,disableSelection:m,disabledItemsFocusable:f,collapseIcon:K,expandIcon:$,animation:l,onToggle:G,onSelect:U,onFocusItem:N,registerRef:V},e.id))})})}const rh=[{id:"1",label:"Design System",children:[{id:"1-1",label:"Foundations",children:[{id:"1-1-1",label:"Colors"},{id:"1-1-2",label:"Typography"},{id:"1-1-3",label:"Spacing"}]},{id:"1-2",label:"Components",children:[{id:"1-2-1",label:"Buttons"},{id:"1-2-2",label:"Inputs"},{id:"1-2-3",label:"Navigation",disabled:!0}]}]},{id:"2",label:"Tokens",children:[{id:"2-1",label:"Light Mode"},{id:"2-2",label:"Dark Mode"}]},{id:"3",label:"Changelog"}],th=e=>le(eh,{variant:"solid",...e}),ah=e=>le(eh,{variant:"light",...e}),ih=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",oh=[{id:"home",label:"Home"},{id:"products",label:"Products",children:[{id:"featured",label:"Featured"},{id:"new",label:"New Arrivals"},{id:"sale",label:"On Sale"}]},{id:"about",label:"About"},{id:"contact",label:"Contact"}];function nh({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function lh(){const[e,t]=r(!1),[a,i]=r("medium"),[o,n]=r("left"),[l,s]=r(null),[d,c]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Drawer"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:l,surface:d,children:le(Wi,{variant:"default",onClick:()=>t(!0),children:"Open Drawer"})}),le(Ko,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"medium"!==a&&e.push('size="'+a+'"'),"left"!==o&&e.push('anchor="'+o+'"'),"<Drawer "+e.join(" ")+">\n <DrawerHeader>\n <H5>Navigation</H5>\n <DrawerClose onClick={handleClose} />\n </DrawerHeader>\n <DrawerContent>\n <OmniTreeView items={navItems} />\n </DrawerContent>\n</Drawer>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),de(Gu,{open:e,onClose:()=>t(!1),size:a,anchor:o,children:[de(Xu,{children:[le(Jt,{children:"Navigation"}),le(Uu,{onClick:()=>t(!1)})]}),le(Yu,{children:le(eh,{items:oh,variant:"solid",color:"default",defaultExpandedItems:["products"],sx:{border:"none",borderRadius:0}})})]})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(nh,{label:ih(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["left","right","top","bottom"].map(e=>le(nh,{label:ih(e),selected:o===e,onClick:()=>n(e)},e))})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="dialog" aria-modal="true"'},{label:"Focus",value:"Focus trapped inside drawer. Returns to trigger on close."},{label:"Keyboard",value:"Escape closes. Tab cycles focusable elements."},{label:"Backdrop",value:"Click closes. Body scroll locked while open."},{label:"Close",value:'Button with aria-label="Close drawer"'}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const sh={small:{minHeight:"120px",padding:"16px",iconSize:"20px",gap:1},medium:{minHeight:"200px",padding:"32px 24px",iconSize:"32px",gap:2},large:{minHeight:"300px",padding:"48px 24px",iconSize:"48px",gap:3}};function dh({onFiles:e,accept:t,multiple:o=!1,size:n="medium",disabled:l=!1,icon:s,label:d,sublabel:c,children:u,className:p="",sx:m={},...f}){const[g,x]=r(!1),b=a(null),v=a(0),y=sh[n]||sh.medium,S=i(r=>{!l&&r?.length&&e?.(Array.from(r))},[l,e]),k=i(e=>{e.preventDefault(),e.stopPropagation(),v.current=0,x(!1),l||S(e.dataTransfer.files)},[l,S]),B=i(e=>{e.preventDefault(),e.stopPropagation()},[]),w=i(e=>{e.preventDefault(),e.stopPropagation(),v.current++,l||x(!0)},[l]),C=i(e=>{e.preventDefault(),e.stopPropagation(),v.current--,0===v.current&&x(!1)},[]),T=i(()=>{l||b.current?.click()},[l]),z=i(e=>{l||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),b.current?.click())},[l]),A=i(e=>{S(e.target.files),e.target.value=""},[S]),I=s||et,W=o?"Drag and drop files here":"Drag and drop file here";return de(h,{role:"button",tabIndex:l?-1:0,"aria-label":d||W,"aria-disabled":l||void 0,onClick:T,onKeyDown:z,onDrop:k,onDragOver:B,onDragEnter:w,onDragLeave:C,className:"drop-zone drop-zone-"+n+(g?" drop-zone-dragging":"")+(l?" drop-zone-disabled":"")+" "+p,sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:y.gap,minHeight:y.minHeight,padding:y.padding,border:"2px dashed",borderColor:g?"var(--Buttons-Primary-Border)":"var(--Buttons-Default-Border)",borderRadius:"32px",backgroundColor:g?"var(--Hover)":"transparent",color:"var(--Text)",cursor:l?"not-allowed":"pointer",opacity:l?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.2s ease, border-color 0.2s ease",textAlign:"center",...!l&&{"&:hover":{backgroundColor:"var(--Hover)",borderColor:"var(--Buttons-Primary-Border)"},"&:active":{backgroundColor:"var(--Pressed)",borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderColor:"var(--Buttons-Primary-Border)"}},...m},...f,children:[le("input",{ref:b,type:"file",accept:t,multiple:o,onChange:A,style:{display:"none"},"aria-hidden":"true",tabIndex:-1}),u||de(se,{children:[le(I,{sx:{fontSize:y.iconSize,color:"var(--Text-Quiet)"}}),le(oa,{style:{color:"var(--Text)"},children:d||W}),le(ga,{style:{color:"var(--Text-Quiet)"},children:c||"or click to browse"})]})]})}const ch={small:{px:"12px",py:"8px",fontSize:"13px",iconSize:"18px",gap:"8px"},medium:{px:"16px",py:"12px",fontSize:"14px",iconSize:"20px",gap:"10px"},large:{px:"20px",py:"14px",fontSize:"16px",iconSize:"22px",gap:"12px"}};function uh({children:e,variant:r="light",surface:t,color:a="info",size:i="medium",startDecorator:o,endDecorator:n,className:l="",sx:s={},...d}){const c=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===a?"Default":a),u=ch[i]||ch.medium,p="default"===a?"Default":c,m=t||("light"===r?"Surface-Brightest":"Surface"),f="var(--Buttons-"+c+"-Border)",g=de(se,{children:[o&&le(h,{className:"alert-start-decorator",sx:{display:"inline-flex",alignItems:"center",fontSize:u.iconSize,lineHeight:1,flexShrink:0,mt:"2px"},children:o}),le(h,{className:"alert-message",sx:{flex:1,minWidth:0},children:"string"==typeof e?le("small"===i?oa:sa,{children:e}):e}),n&&le(h,{className:"alert-end-decorator",sx:{display:"inline-flex",alignItems:"flex-start",flexShrink:0,gap:u.gap,paddingTop:"2px"},children:n})]});return le(h,{role:"alert",className:"alert alert-"+r+" alert-"+i+" alert-"+a+" "+l,sx:{border:"1px solid "+f,borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",boxShadow:di,...s},...d,children:le(h,{"data-theme":p,"data-surface":m,className:"alert-inner",sx:{display:"flex",alignItems:"flex-start",gap:u.gap,padding:u.py+" "+u.px,fontSize:u.fontSize,fontFamily:"inherit",lineHeight:1.5,color:"var(--Text)",backgroundColor:"var(--Background)",borderRadius:"calc(var(--Style-Border-Radius) - 1px)"},children:g})})}const hh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",ph=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],mh={info:le(ge,{}),success:le(pe,{}),warning:le(me,{}),error:le(fe,{})};function fh({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function gh({color:e,selected:r,onClick:t}){const a=hh(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function xh(){const[e,t]=r("light"),[a,i]=r("info"),[o,n]=r("medium"),[l,s]=r(!0),[d,c]=r(null),[u,p]=r("Surface"),m=l&&mh[a]?le(Qa,{size:"small",sx:{color:"inherit"},children:mh[a]}):void 0;return de(h,{sx:{pb:8},children:[le(Zt,{children:"Alert"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:d,surface:u,children:le(h,{sx:{width:"100%",maxWidth:480},children:le(uh,{variant:e,color:a,size:o,startDecorator:m,children:"This is an alert message. Check the details for more information."})})}),le(Ko,{code:(()=>{const r=['variant="'+e+'"'];return"info"!==a&&r.push('color="'+a+'"'),"medium"!==o&&r.push('size="'+o+'"'),l&&mh[a]&&r.push("startDecorator={<Icon><"+hh(a)+"Icon /></Icon>}"),"<Alert "+r.join(" ")+">\n This is an alert message.\n</Alert>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["solid","light"].map(r=>le(fh,{label:hh(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:ph.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(gh,{color:e,selected:a===e,onClick:i},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(fh,{label:hh(e),selected:o===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Icon"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(hn,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Show icon"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="alert" — live region, announced immediately'},{label:"Border",value:"var(--Buttons-{Color}-Border) on outer shell"},{label:"Shadow",value:"var(--Effect-Level-3)"},{label:"Icons",value:"Decorative — aria-hidden by default via Icon component"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const bh={small:{px:"12px",py:"8px",fontSize:"13px",gap:"8px",minWidth:"240px"},medium:{px:"16px",py:"10px",fontSize:"14px",gap:"12px",minWidth:"300px"},large:{px:"20px",py:"14px",fontSize:"16px",gap:"16px",minWidth:"360px"}};let vh=!1;function yh({children:e,open:r=!1,onClose:t,variant:n="light",surface:l,color:s="info",size:d="medium",anchor:c="bottom",autoHideDuration:u,startDecorator:p,endDecorator:m,action:f,className:g="",sx:x={},...b}){const v=a(null),y=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===s?"Default":s),S=bh[d]||bh.medium,k="small"===d?oa:sa,B="default"===s?"Default":y;"production"===process.env.NODE_ENV||"solid"!==n||vh||(vh=!0,console.warn('[Snackbar] variant="solid" is retired and now renders as "light". A solid fill makes the label carry the semantic colour as its own background, doubling the contrast combinations to verify. Use the default, or pass `surface` to reach a specific level.'));const w=l||"Surface-Brightest",C="var(--Buttons-"+y+"-Border)";o(()=>{if(r&&u&&u>0)return v.current=setTimeout(()=>{t?.({},"timeout")},u),()=>clearTimeout(v.current)},[r,u,t]),o(()=>{if(!r)return;const e=e=>{"Escape"===e.key&&t?.(e,"escapeKeyDown")};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r,t]);const T=i(()=>{v.current&&clearTimeout(v.current)},[]),z=i(()=>{r&&u&&u>0&&(v.current=setTimeout(()=>{t?.({},"timeout")},u))},[r,u,t]),A="top"===c?{from:{transform:"translateX(-50%) translateY(-120%)"},to:{transform:"translateX(-50%) translateY(0)"}}:{from:{transform:"translateX(-50%) translateY(120%)"},to:{transform:"translateX(-50%) translateY(0)"}};return r?le(h,{role:"alert","aria-live":"polite","aria-atomic":"true",onMouseEnter:T,onMouseLeave:z,className:"snackbar snackbar-"+n+" snackbar-"+d+" snackbar-"+c+" snackbar-"+s+" "+g,sx:{position:"fixed",left:"50%",transform:"translateX(-50%)",..."top"===c?{top:"var(--SnackBar-Top, 24px)"}:{bottom:"var(--SnackBar-Bottom, 24px)"},zIndex:1400,minWidth:S.minWidth,maxWidth:"min(560px, calc(100vw - 32px))",border:"1px solid "+C,borderRadius:"var(--Style-Border-Radius)",boxShadow:di,overflow:"hidden",animation:"snackbar-slide-in 0.3s ease forwards","@keyframes snackbar-slide-in":A,...x},...b,children:de(h,{"data-theme":B,"data-surface":w,sx:{display:"flex",alignItems:"center",gap:S.gap,padding:S.py+" "+S.px,fontSize:S.fontSize,fontFamily:"inherit",lineHeight:1.4,color:"var(--Text)",backgroundColor:"var(--Background)",borderRadius:"calc(var(--Style-Border-Radius) - 1px)"},children:[p&&le(h,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:p}),le(h,{sx:{flex:1,minWidth:0},children:"string"==typeof e?le(k,{children:e}):e}),f&&le(h,{sx:{display:"inline-flex",flexShrink:0},children:f}),m&&le(h,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:m}),t&&le(Wi,{iconOnly:!0,variant:"ghost",size:"small",onClick:e=>t(e,"closeClick"),"aria-label":"Close notification",sx:{flexShrink:0,ml:"4px"},children:le(Qa,{size:"small",children:le(Rr,{})})})]})}):null}const Sh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",kh=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Bh={info:le(ge,{}),success:le(pe,{}),warning:le(me,{}),error:le(fe,{})};function wh({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Ch({color:e,selected:r,onClick:t}){const a=Sh(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Th(){const[e,t]=r("light"),[a,i]=r("info"),[o,n]=r("medium"),[l,s]=r("bottom"),[d,c]=r(!0),[u,p]=r(!0),[m,f]=r(!1),[g,x]=r(null),[b,v]=r("Surface"),y=d&&Bh[a]?le(Qa,{size:"small",sx:{color:"inherit"},children:Bh[a]}):void 0;return de(h,{sx:{pb:8},children:[le(Zt,{children:"Snackbar"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:g,surface:b,children:le(Wi,{variant:"default",onClick:()=>f(!0),children:"Show Snackbar"})}),le(Ko,{code:(()=>{const r=["open={open}"];return r.push('variant="'+e+'"'),"info"!==a&&r.push('color="'+a+'"'),"medium"!==o&&r.push('size="'+o+'"'),"bottom"!==l&&r.push('anchor="top"'),u&&r.push("onClose={handleClose}"),d&&Bh[a]&&r.push("startDecorator={<Icon><"+Sh(a)+"Icon /></Icon>}"),"<Snackbar\n "+r.join("\n ")+"\n>\n Operation completed successfully.\n</Snackbar>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),le(yh,{open:m,onClose:u?()=>f(!1):void 0,variant:e,color:a,size:o,anchor:l,autoHideDuration:4e3,startDecorator:y,children:"Operation completed successfully."})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:g,onThemeChange:x,surface:b,onSurfaceChange:v})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,children:["solid","light"].map(r=>le(wh,{label:Sh(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:kh.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Ch,{color:e,selected:a===e,onClick:i},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(wh,{label:Sh(e),selected:o===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),le(k,{direction:"row",spacing:1,children:["top","bottom"].map(e=>le(wh,{label:Sh(e),selected:l===e,onClick:()=>s(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Icon"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(hn,{variant:"default-outline",checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Show icon"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Close Button"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show dismiss button"})]}),le(hn,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Close button"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="alert" aria-live="polite" aria-atomic="true"'},{label:"Close",value:'Button with aria-label="Close notification"'},{label:"Keyboard",value:"Escape closes. Auto-hides after duration."},{label:"Hover",value:"Pauses auto-hide timer on mouse enter"},{label:"Border",value:"var(--Buttons-{Color}-Border) on outer shell"},{label:"Shadow",value:"var(--Effect-Level-3)"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const zh={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",white:"Neutral",black:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Ah={small:{diameter:24,thickness:3,fontSize:"9px",labelSize:"0px"},medium:{diameter:40,thickness:4,fontSize:"12px",labelSize:"12px"},large:{diameter:56,thickness:5,fontSize:"14px",labelSize:"14px"}};function Ih({value:e,color:r="primary",size:a="medium",thickness:i,showValue:o=!1,children:n,className:l="",sx:s={},...d}){const c=zh[r]||"Primary",u="number"==typeof a?{diameter:a,thickness:Math.max(2,Math.round(a/11)),fontSize:Math.max(8,Math.round(a/3.3))+"px"}:Ah[a]||Ah.medium,p=i||u.thickness,m=null!=e,f=m?Math.min(100,Math.max(0,e)):0,g=(u.diameter-p)/2,x=2*Math.PI*g,b=m?x-f/100*x:.75*x,v="var(--Buttons-"+c+"-Border)",y="cp-grad-"+t().replace(/:/g,"");return de(h,{role:"progressbar","aria-valuenow":m?Math.round(f):void 0,"aria-valuemin":m?0:void 0,"aria-valuemax":m?100:void 0,"aria-label":m?Math.round(f)+"% progress":"Loading",className:"circular-progress circular-progress-"+a+" circular-progress-"+r+(m?" circular-progress-value":" circular-progress-indeterminate")+" "+l,sx:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",width:u.diameter+"px",height:u.diameter+"px",flexShrink:0,...!m&&{animation:"circular-progress-spin 1.2s linear infinite","@keyframes circular-progress-spin":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}},...s},...d,children:[de("svg",{viewBox:"0 0 "+u.diameter+" "+u.diameter,width:u.diameter,height:u.diameter,style:{position:"absolute",top:0,left:0,transform:"rotate(-90deg)"},children:[le("defs",{children:de("linearGradient",{id:y,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[le("stop",{offset:"0%",stopColor:v,stopOpacity:"0"}),le("stop",{offset:"100%",stopColor:v,stopOpacity:"1"})]})}),le("circle",{cx:u.diameter/2,cy:u.diameter/2,r:g,fill:"none",stroke:"var(--Border-Variant)",strokeWidth:p,className:"circular-progress-track"}),le("circle",{cx:u.diameter/2,cy:u.diameter/2,r:g,fill:"none",stroke:"url(#"+y+")",strokeWidth:p,strokeDasharray:x,strokeDashoffset:b,strokeLinecap:"round",className:"circular-progress-indicator",style:{transition:m?"stroke-dashoffset 0.4s ease":"none"}})]}),(o||n)&&m&&le(h,{className:"circular-progress-label","aria-hidden":"true",sx:{position:"relative",zIndex:1,fontSize:u.fontSize,fontWeight:700,fontFamily:"inherit",lineHeight:1,color:"var(--Text)",userSelect:"none"},children:n||Math.round(f)+"%"})]})}const Wh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Rh=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Dh({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Ph({color:e,selected:r,onClick:t}){const a=Wh(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Fh(){const[e,t]=r("default"),[a,i]=r("medium"),[o,n]=r(!1),[l,s]=r(65),[d,c]=r(!1),[u,p]=r(null),[m,f]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Circular Progress"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:u,children:le(Ih,{color:e,size:a,value:o?l:void 0,showValue:o&&d})}),le(Ko,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),o&&(r.push("value={"+l+"}"),d&&r.push("showValue")),0===r.length?"<CircularProgress />":"<CircularProgress\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:u,onThemeChange:p,surface:m,onSurfaceChange:f})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Rh.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Ph,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Dh,{label:Wh(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Determinate"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static arc at a specific value"})]}),le(hn,{checked:o,onChange:e=>n(e.target.checked),size:"small","aria-label":"Determinate"})]}),o&&de(se,{children:[le(h,{sx:{mt:2},children:le(Ts,{label:"Value",min:0,max:100,value:l,onChange:(e,r)=>s(r),size:"small",valueLabelDisplay:"auto"})}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Label"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Center percentage text"})]}),le(hn,{checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Show label"})]})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:de(k,{spacing:3,children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Role:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="progressbar"'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Determinate:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-valuenow, aria-valuemin="0", aria-valuemax="100"'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Indeterminate:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-label="Loading" (no value attributes)'})]}),de(h,{sx:{py:1.5},children:[le(oa,{children:"Label:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Center percentage label is aria-hidden — screen readers use aria-valuenow."})]})]})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Token Reference"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Track (back circle):"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Border-Variant)"})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Fill (progress arc):"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Buttons-{Color}-Border)"})]}),de(h,{sx:{py:1.5},children:[le(oa,{children:"Center label:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]})]})]})]})})})]})})})]})]})}const Lh={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Hh={small:{height:"4px",borderRadius:"2px"},medium:{height:"6px",borderRadius:"3px"},large:{height:"8px",borderRadius:"4px"}};function Mh({value:e,color:r="primary",size:t="medium",className:a="",sx:i={},...o}){const n=Lh[r]||"Primary",l=Hh[t]||Hh.medium,s=null!=e,d=s?Math.min(100,Math.max(0,e)):0,c="var(--Buttons-"+n+"-Border)";return le(h,{role:"progressbar","aria-valuenow":s?Math.round(d):void 0,"aria-valuemin":s?0:void 0,"aria-valuemax":s?100:void 0,"aria-label":s?Math.round(d)+"% progress":"Loading",className:"linear-progress linear-progress-"+t+" linear-progress-"+r+(s?" linear-progress-determinate":" linear-progress-indeterminate")+" "+a,sx:{position:"relative",width:"100%",height:l.height,borderRadius:l.borderRadius,backgroundColor:"var(--Border-Variant)",overflow:"hidden",flexShrink:0,...i},...o,children:le(h,{className:"linear-progress-bar",sx:{position:"absolute",top:0,left:0,height:"100%",borderRadius:"inherit",backgroundColor:c,...s?{width:d+"%",transition:"width 0.4s ease"}:{width:"40%",animation:"linear-progress-slide 1.5s ease-in-out infinite","@keyframes linear-progress-slide":{"0%":{left:"-40%",width:"40%"},"50%":{left:"30%",width:"50%"},"100%":{left:"100%",width:"40%"}}}}})})}const Eh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Nh=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Oh({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Qh({color:e,selected:r,onClick:t}){const a=Eh(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Vh(){const[e,t]=r("default"),[a,i]=r("medium"),[o,n]=r(!1),[l,s]=r(65),[d,c]=r(null),[u,p]=r("Surface");return de(h,{sx:{pb:8},children:[le(Zt,{children:"Linear Progress"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:d,surface:u,children:le(h,{sx:{width:"100%",maxWidth:400},children:le(Mh,{color:e,size:a,value:o?l:void 0})})}),le(Ko,{code:(()=>{const r=[];return"default"!==e&&r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),o&&r.push("value={"+l+"}"),0===r.length?"<LinearProgress />":"<LinearProgress\n "+r.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Nh.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(Qh,{color:r,selected:e===r,onClick:t},r))})]},r.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Oh,{label:Eh(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Determinate"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static bar at a specific value"})]}),le(hn,{variant:"default-outline",checked:o,onChange:e=>n(e.target.checked),size:"small","aria-label":"Determinate"})]}),o&&le(h,{sx:{mt:2},children:le(Ts,{label:"Value",min:0,max:100,value:l,onChange:(e,r)=>s(r),size:"small",valueLabelDisplay:"auto"})})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="progressbar"'},{label:"Determinate",value:'aria-valuenow, aria-valuemin="0", aria-valuemax="100"'},{label:"Indeterminate",value:'aria-label="Loading" (no value attributes)'},{label:"Track",value:"var(--Border-Variant)"},{label:"Fill",value:"var(--Buttons-{Color}-Border)"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const jh=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]}],Gh=["photo","icon","initials"],Uh={photo:"Photo",icon:"Icon",initials:"Initials"},Xh=["xx-small","x-small","small","medium","large","x-large","xx-large"],Yh={"xx-small":"XXS","x-small":"XS",small:"Small",medium:"Medium",large:"Large","x-large":"XL","xx-large":"XXL"};function Zh({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function qh({color:e,selected:r,onClick:t}){const a=(i=e)?i.charAt(0).toUpperCase()+i.slice(1):"";var i;return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function Jh(){const[e,t]=r("default"),[a,i]=r("medium"),[o,n]=r("initials"),[l,s]=r(!1),[d,c]=r(!1),[u,p]=r(!1),[m,f]=r(null),[g,x]=r("Surface"),b="photo"===o,v=()=>{const r={size:a,clickable:l,insideButton:d};return b||(r.color=e),"initials"===o&&(r.initials="LN"),"photo"===o&&(r.src="https://i.pravatar.cc/150?img=3",r.alt="User avatar"),r};return de(h,{sx:{pb:8},children:[le(Zt,{children:"Avatar"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:m,surface:g,children:u?de(qa,{max:3,size:a,children:[le(Za,{...v()}),le(Za,{color:e,size:a,initials:"AB"}),le(Za,{color:e,size:a,initials:"CD"}),le(Za,{color:e,size:a,initials:"EF"})]}):le(Za,{...v()})}),le(Ko,{code:(()=>{const r=[];return b||"default"===e||r.push('color="'+e+'"'),"medium"!==a&&r.push('size="'+a+'"'),"initials"===o&&r.push('initials="LN"'),"photo"===o&&r.push('src="..." alt="User avatar"'),l&&r.push("clickable onClick={handleClick}"),d&&r.push("insideButton"),u?"<AvatarGroup max={3}>\n <Avatar "+r.join(" ")+' />\n <Avatar initials="AB" />\n <Avatar initials="CD" />\n <Avatar initials="EF" />\n</AvatarGroup>':"<Avatar "+r.join(" ")+" />"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:m,onThemeChange:f,surface:g,onSurfaceChange:x})}),de(h,{sx:{opacity:b?.4:1,pointerEvents:b?"none":"auto"},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:jh.map(r=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:r.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:r.colors.map(r=>le(qh,{color:r,selected:e===r,onClick:t},r))})]},r.label))}),b&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:"Color is ignored when the avatar shows a photo — the image carries the visual."})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Xh.map(e=>le(Zh,{label:Yh[e],selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CONTENT"}),le(k,{direction:"row",spacing:1,children:Gh.map(e=>le(Zh,{label:Uh[e],selected:o===e,onClick:()=>n(e)},e))})]}),de(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Clickable"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Interactive with hover/focus states"})]}),le(hn,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Clickable"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Inside Button"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds 2px horizontal margin so the avatar sits cleanly in a Button"})]}),le(hn,{variant:"default-outline",checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Inside Button"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Group"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show as AvatarGroup with overflow"})]}),le(hn,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show group"})]})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:le(k,{spacing:3,children:de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="img" (static) or role="button" (clickable)'},{label:"Label",value:'aria-label from alt, initials, or "Avatar"'},{label:"Image",value:"alt text on <img>. Falls back to initials or icon on error."},{label:"Clickable",value:"Rendered as <button>. Focus ring: 3px solid var(--Focus-Visible)."},{label:"Group",value:'role="group" aria-label="Avatar group, N avatars"'}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})})})})]})})})]})]})}const Kh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",$h=["primary","secondary","tertiary","neutral","info","success","warning","error"];function _h({ratio:e,threshold:r}){if(!e)return le(ga,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=r;return de(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[de(h,{sx:{px:1,py:.25,borderRadius:"4px",backgroundColor:t?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)",fontSize:"11px",fontWeight:700},children:[e,":1"]}),le(ga,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function ep({label:e,ratio:r,threshold:t,note:a}){return de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(h,{sx:{flex:1},children:[le(oa,{style:{color:"var(--Text)"},children:e}),a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:a})]}),le(_h,{ratio:r,threshold:t})]})}function rp({color:e,selected:r,onClick:t}){const a=Kh(e);return le(B,{title:a,arrow:!0,children:le(h,{onClick:()=>t(e),role:"button","aria-label":"Select "+a+" color","aria-pressed":r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:24,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})})}function tp({label:e,selected:r,onClick:t}){return le(h,{component:"button",onClick:t,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:"pointer",border:"2px solid var(--Buttons-Primary-Button)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:r?"var(--Buttons-Primary-Button)":"transparent",color:r?"var(--Buttons-Primary-Text)":"var(--Text)",padding:"4px 12px",fontSize:"14px",fontFamily:"inherit",fontWeight:500,whiteSpace:"nowrap",flexShrink:0,transition:"background-color 0.15s ease, color 0.15s ease","&:hover":{backgroundColor:r?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function ap(){const[e,t]=r(0),[a,i]=r("solid"),[n,l]=r("primary"),[s,d]=r("5"),[c,u]=r(!1),[p,m]=r(!1),[f,g]=r({}),y=()=>"solid"===a?n:n+"-"+a,S=()=>{if(c)return;const e=parseInt(s,10);return isNaN(e)||String(e)!==s.trim()?s||void 0:e};return o(()=>{const e=Kh(n),r={};"solid"===a?(r.badgeBg=tn("--Icons-"+e),r.badgeText=tn("--Icons-On-"+e),r.badgeBorder=null):"outline"===a&&(r.badgeBg=tn("--Background"),r.badgeText=tn("--Text"),r.badgeBorder=tn("--Buttons-"+e+"-Border")),r.background=tn("--Background"),r.focusVisible=tn("--Focus-Visible"),g(r)},[a,n]),de(h,{sx:{width:"100%"},children:[le(Zt,{style:{marginBottom:8},children:"Badge"}),le(sa,{color:"quiet",style:{marginBottom:24},children:"Small label attached to an element showing status or count. Solid and outline variants across all 8 colors."}),de(H,{value:e,onChange:(e,r)=>t(r),sx:{borderBottom:"1px solid var(--Border)",mb:0},children:[le(M,{label:"Playground"}),le(M,{label:"Accessibility"})]}),0===e&&de(C,{container:!0,sx:{minHeight:400},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[le(h,{sx:{p:4,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:200,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)"},children:de(k,{direction:"row",spacing:6,alignItems:"center",children:[le(ai,{variant:y(),badgeContent:S(),dot:c,showZero:p,children:le(rt,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(ai,{variant:y(),badgeContent:S(),dot:c,showZero:p,children:le(Te,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(ai,{variant:y(),badgeContent:S(),dot:c,showZero:p,children:le(Ae,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})})]})}),le(Ko,{code:(()=>{const e=['variant="'+y()+'"'];if(c)e.push("dot");else{const r=S();"number"==typeof r?e.push("badgeContent={"+r+"}"):r&&e.push('badgeContent="'+r+'"')}return p&&e.push("showZero"),"<Badge "+e.join(" ")+">\n <MailIcon />\n</Badge>"})(),language:"JSX",sx:{borderRadius:0,borderBottom:"1px solid var(--Border)"}})]}),de(C,{item:!0,sx:{width:{xs:"calc(100vw - 432px)",md:"calc((100vw - 432px) / 2)"},flexShrink:0,p:3,backgroundColor:"var(--Container)",overflowY:"auto"},children:[le(qt,{children:"Playground"}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(k,{direction:"row",spacing:1,flexWrap:"wrap",sx:{gap:1},children:["solid","outline"].map(e=>le(tp,{label:Kh(e),selected:a===e,onClick:()=>i(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:$h.map(e=>le(rp,{color:e,selected:n===e,onClick:l},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Counter 16px · Dot 8px · Padding 4px · Digits 11px"})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BADGE CONTENT"}),le(v,{size:"small",value:s,onChange:e=>d(e.target.value),placeholder:"Number or text",disabled:c,sx:{width:"160px","& .MuiOutlinedInput-root":{fontFamily:"inherit",fontSize:"14px",backgroundColor:"var(--Background)","& fieldset":{borderColor:"var(--Border)"},"&:hover fieldset":{borderColor:"var(--Border)"},"&.Mui-focused fieldset":{borderColor:"var(--Buttons-Primary-Border)"}},"& .MuiOutlinedInput-input":{color:"var(--Text)",padding:"6px 12px"}}})]}),de(h,{sx:{mt:3},children:[le(b,{control:le(x,{checked:c,onChange:e=>u(e.target.checked),size:"small"}),label:le(oa,{children:"Dot (no content)"})}),le(b,{control:le(x,{checked:p,onChange:e=>m(e.target.checked),size:"small"}),label:le(oa,{children:"Show zero"})})]})]})]}),1===e&&de(h,{sx:{p:4},children:[le(qt,{children:"Accessibility Requirements"}),de(oa,{color:"quiet",style:{marginBottom:32},children:["Based on current Playground settings: ",a," · ",n]}),de(k,{spacing:4,children:[de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Badge Text Contrast"}),le(oa,{color:"quiet",style:{marginBottom:16},children:"Badge text must have ≥ 4.5:1 contrast against badge background (WCAG 1.4.3 AA)"}),le(ep,{label:"Badge Text vs. Badge Background",ratio:rn(f.badgeText,f.badgeBg),threshold:4.5,note:"solid"===a?"var(--Buttons-{C}-Text) vs var(--Buttons-{C}-Button)":"outline"===a?"var(--Text) vs var(--Background)":"var(--Buttons-{C}-Text) vs var(--Buttons-{C}-Button)"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Badge Visibility"}),le(oa,{color:"quiet",style:{marginBottom:16},children:"Badge background (or border) must have ≥ 3:1 contrast against page background (WCAG 1.4.11)"}),(()=>{const e=rn(f.badgeBg,f.background),r=f.badgeBorder?rn(f.badgeBorder,f.background):null;return le(ep,{label:"Badge vs. Page Background",ratio:(t=e,i=r,t||i?t?i?parseFloat(t)>=parseFloat(i)?t:i:t:i:null),threshold:3.1,note:"outline"===a?"Border "+(r||"--")+":1 — outline relies on border contrast":"BG "+(e||"--")+":1"});var t,i})()]}),de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Badge Sizing"}),le(oa,{color:"quiet",style:{marginBottom:16},children:"One size. A count has to read the same whether it hangs off a 20px icon or a 56px FAB, so it does not scale with its anchor."}),le(h,{sx:{display:"flex",justifyContent:"space-between",py:1.5,borderBottom:"1px solid var(--Border)"},children:de(h,{children:[le(oa,{children:"Counter"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"16px height · 4px side padding · 11px digits · pill shape"})]})}),le(h,{sx:{display:"flex",justifyContent:"space-between",py:1.5,borderBottom:"1px solid var(--Border)"},children:de(h,{children:[le(oa,{children:"Status dot"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"8px diameter circle"})]})})]}),de(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA & Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{style:{display:"block",marginBottom:2},children:"Screenreader support:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:'MUI Badge renders badge content in a visually-hidden span for assistive technology. Numeric content is announced (e.g. "5 notifications").'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{style:{display:"block",marginBottom:2},children:"Dot variant:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Dot badges are purely decorative. Ensure the parent element conveys status to assistive tech via aria-label or similar."})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{style:{display:"block",marginBottom:2},children:"Max overflow:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:'When content exceeds max (default 99), displays "99+" visually but announces the actual number to screenreaders.'})]})]})]})]})]})]})}const ip=e=>e.charAt(0).toUpperCase()+e.slice(1);function op(e){return e&&"default"!==e&&"border-variant"!==e?"border"===e?"var(--Border)":"var(--Icons-"+ip(e)+")":"var(--Border-Variant)"}function np(e,r){const t=e&&!["default","border","border-variant"].includes(e)?ip(e):"Default",a=op(e);return"light"===r?{bg:"var(--Tag-"+t+"-BG)",text:"var(--Tag-"+t+"-Text)",border:"1px solid "+a}:{bg:"var(--Background)",text:"var(--Text)",border:"1px solid "+a}}const lp={small:"var(--Sm-Divider, 0.5px)",medium:"var(--Divider, 1px)",large:"var(--Lg-Divider, 2px)"};function sp({color:e="default",orientation:r="horizontal",size:t="small",children:a,indicatorText:i,indicatorStyle:o="outline",textAlign:n="center",className:l="",sx:s={},...d}){const c=op(e),u=lp[t]||lp.small,p=!(!a&&!i),m=a||i,f="vertical"===r;if(f&&!p)return le(h,{role:"separator","aria-orientation":"vertical",className:"divider-vertical divider-"+e+" "+l,sx:{display:"inline-block",width:u,alignSelf:"stretch",minHeight:24,backgroundColor:c,flexShrink:0,...s},...d});if(f&&p){const r=np(e,o),t="top"===n?"0 0 10%":"1 1 auto",a="top"===n?"1 1 auto":"bottom"===n?"0 0 10%":"1 1 auto";return de(h,{role:"separator","aria-orientation":"vertical",className:"divider-vertical divider-"+e+" divider-indicator "+l,sx:{display:"inline-flex",flexDirection:"column",alignItems:"center",alignSelf:"stretch",minHeight:24,flexShrink:0,...s},...d,children:[le(h,{sx:{flex:t,width:u,backgroundColor:c}}),le(h,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,my:1,px:.75,py:.5,borderRadius:"12px",fontSize:"11px",fontWeight:500,fontFamily:"inherit",lineHeight:1.2,whiteSpace:"nowrap",backgroundColor:r.bg,color:r.text,border:r.border,boxSizing:"border-box"},children:m}),le(h,{sx:{flex:a,width:u,backgroundColor:c}})]})}if(!p)return le(h,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" "+l,sx:{width:"100%",height:u,backgroundColor:c,flexShrink:0,...s},...d});const g=np(e,o),x="left"===n?"0 0 10%":"1 1 auto",b="left"===n?"1 1 auto":"right"===n?"0 0 10%":"1 1 auto";return de(h,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" divider-indicator "+l,sx:{display:"flex",alignItems:"center",width:"100%",...s},...d,children:[le(h,{sx:{flex:x,height:u,backgroundColor:c}}),le(h,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,mx:2,px:1.5,py:.5,borderRadius:"12px",fontSize:"12px",fontWeight:500,fontFamily:"inherit",lineHeight:1.2,whiteSpace:"nowrap",backgroundColor:g.bg,color:g.text,border:g.border,boxSizing:"border-box"},children:m}),le(h,{sx:{flex:b,height:u,backgroundColor:c}})]})}const dp={eyebrow:wa,title:sa,secondary:na},cp={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},up={small:{py:.5,px:1.5,fontSize:"13px",iconSize:16,decoratorSize:28,gap:1,checkSize:"small"},medium:{py:1,px:1,fontSize:"14px",iconSize:20,decoratorSize:36,gap:1.5,checkSize:"small"},large:{py:1.5,px:2.5,fontSize:"16px",iconSize:24,decoratorSize:40,gap:2,checkSize:"medium"}};function hp({children:e,size:r="medium",isButton:t=!1,onAction:a,ariaLabel:i}){return le(h,t?{component:"button",role:"button",tabIndex:0,"aria-label":i||"Action",onClick:e=>{e.stopPropagation(),a?.(e)},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),a?.(e))},className:"list-item-decorator-button",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,padding:0,border:"none",backgroundColor:"transparent",borderRadius:"50%",cursor:"pointer",color:"inherit",transition:"background-color 0.15s ease","&:hover":{backgroundColor:"rgba(128,128,128,0.15)"},"&:active":{backgroundColor:"rgba(128,128,128,0.25)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"}},children:e}:{className:"list-item-decorator",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e})}function pp({children:e,startDecorator:r,endDecorator:t,startDecoratorIsButton:a=!1,endDecoratorIsButton:i=!1,onStartDecoratorAction:o,onEndDecoratorAction:n,startDecoratorAriaLabel:l,endDecoratorAriaLabel:s,size:d="medium",variant:c="default",color:u,eyebrow:p,overline:m,secondary:f,clickable:g=!1,disabled:b=!1,selected:v=!1,selectionMode:y="none",onSelect:S,onClick:k,bottomBorder:B=!1,rightBorder:w=!1,sx:C={},...T}){const z=up[d]||up.medium,A=g||!!k,W="checkbox"===y||"radio"===y,R=(A||W)&&!b,D=e=>{b||(W&&S?.(e),k?.(e))};return de(h,{component:"li",role:W?"option":A?"button":"listitem",tabIndex:R?0:void 0,"aria-disabled":b||void 0,"aria-selected":W?v:v||void 0,"aria-checked":"checkbox"===y?v:void 0,onClick:D,onKeyDown:R?e=>{b||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),D(e))}:void 0,className:"list-item"+(v?" list-item-selected":"")+(b?" list-item-disabled":"")+(A?" list-item-clickable":"")+(W?" list-item-selectable":""),sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",width:"100%",boxSizing:"border-box",gap:"var(--Sizing-1-and-Half)",py:z.py,px:z.px,minHeight:"32px",fontSize:z.fontSize,fontFamily:"inherit",color:"var(--Text)",listStyle:"none",cursor:R?"pointer":"default",opacity:b?"var(--Disabled, 0.38)":1,position:"relative",transition:"background-color 0.15s ease, box-shadow 0.15s ease",...A?{border:"1px solid var(--Border)",boxShadow:"var(--Effect-Level-1)",padding:"var(--Sizing-1)",borderRadius:"var(--Input-Radius)"}:{},...!A&&B?{borderBottom:"1px solid var(--Border-Variant)"}:{},...!A&&w?{borderRight:"1px solid var(--Border-Variant)"}:{},backgroundColor:v?"var(--Hover)":"transparent","&:hover":R?{backgroundColor:"var(--Hover)",boxShadow:"var(--Effect-Level-2)"}:{},"&:active":R?{backgroundColor:"var(--Pressed)",boxShadow:"var(--Effect-Level-1)"}:{},"&:focus-visible":{outline:"none"},"&:focus-visible::after":{content:'""',position:"absolute",inset:"1px",border:"3px solid var(--Focus-Visible)",borderRadius:"var(--Input-Inner-Focus-Visible)",pointerEvents:"none"},...C},...T,children:["checkbox"===y&&le(x,{checked:v,disabled:b,size:z.checkSize,tabIndex:-1,onClick:e=>e.stopPropagation(),onChange:()=>S?.(),sx:{p:0,mr:0,color:"inherit","&.Mui-checked":{color:"inherit"}},inputProps:{"aria-label":"Select "+("string"==typeof e?e:"item")}}),"radio"===y&&le(I,{checked:v,disabled:b,size:z.checkSize,tabIndex:-1,onClick:e=>e.stopPropagation(),onChange:()=>S?.(),sx:{p:0,mr:0,color:"inherit","&.Mui-checked":{color:"inherit"}},inputProps:{"aria-label":"Select "+("string"==typeof e?e:"item")}}),r&&le(hp,{size:d,isButton:a,onAction:o,ariaLabel:l,children:r}),(()=>{const r=dp,t=p??m,a={display:"block",width:"100%",wordBreak:"break-word",overflowWrap:"anywhere"};return de(h,{sx:{flex:"1 1 auto",width:"100%",minWidth:0,display:"flex",flexDirection:"column",gap:0},children:[t&&le(r.eyebrow,{style:{...a,color:"var(--Quiet)"},children:t}),null!=e&&le(r.title,{style:{...a,color:"var(--Text)"},children:e}),f&&le(r.secondary,{style:{...a,color:"var(--Quiet)"},children:f})]})})(),t&&le(hp,{size:d,isButton:i,onAction:n,ariaLabel:s,children:t})]})}function mp({children:r,items:t,variant:a="default",color:i="primary",size:o="medium",orientation:n="vertical",dividers:l=!1,selectionMode:s="none",loading:d=!1,skeletonRows:c=3,empty:u,error:p,selectedIndices:m=[],onSelectionChange:f,clickable:g=!1,component:x="ul",className:b="",sx:v={},...y}){const S="horizontal"===n,k="checkbox"===s||"radio"===s,B="light"===a,w="default"===a,C={};("solid"===a||B)&&cp[i]&&(C["data-theme"]=cp[i],B&&(C["data-surface"]="Surface-Brightest"));const T=p?"error":d?"loading":t&&0===t.length&&u?"empty":null;return le(h,{component:x,role:k?"listbox":"list","aria-busy":"loading"===T?"true":void 0,"aria-multiselectable":"checkbox"===s||void 0,...C,className:"list-container list-"+a+" list-"+i+" "+b,sx:{display:"flex",flexDirection:S?"row":"column",boxSizing:"border-box",alignItems:"stretch",gap:g?"var(--Sizing-1)":0,m:0,p:w?0:1,backgroundColor:w?"transparent":"var(--Background)",color:"var(--Text)",borderRadius:w?0:"var(--Style-Border-Radius)",width:"100%",listStyle:"none",...S?{"& > .list-item":{flex:"1 1 0",width:"auto"}}:{},...v},...y,children:(()=>{if("loading"===T)return le(h,{component:"li",sx:{listStyle:"none"},children:le(vt,{label:"Loading",children:Array.from({length:c}).map((e,r)=>le(pp,{size:o,variant:a,color:i,children:"        "},"sk-"+r))})});if("error"===T)return le(h,{component:"li",sx:{listStyle:"none"},children:p});if("empty"===T)return le(h,{component:"li",sx:{listStyle:"none"},children:u});if(t&&t.length>0){const e=[];return t.forEach((r,n)=>{e.push(le(pp,{size:o,variant:a,color:i,startDecorator:r.startDecorator,endDecorator:r.endDecorator,startDecoratorIsButton:r.startDecoratorIsButton,endDecoratorIsButton:r.endDecoratorIsButton,onStartDecoratorAction:r.onStartDecoratorAction,onEndDecoratorAction:r.onEndDecoratorAction,startDecoratorAriaLabel:r.startDecoratorAriaLabel,endDecoratorAriaLabel:r.endDecoratorAriaLabel,eyebrow:r.eyebrow??r.overline,secondary:r.secondary,clickable:g||r.clickable,disabled:r.disabled,bottomBorder:r.bottomBorder,rightBorder:r.rightBorder,selected:k?m.includes(n):r.selected,selectionMode:s,onSelect:()=>(e=>{if(f)if("radio"===s)f([e]);else{const r=m.includes(e)?m.filter(r=>r!==e):[...m,e];f(r)}})(n),onClick:r.onClick,children:r.label||r.children},"item-"+n)),l&&n<t.length-1&&e.push(le(h,{component:"li",role:"separator","aria-hidden":"true",sx:S?{width:"1px",alignSelf:"stretch",backgroundColor:"var(--Border)",flexShrink:0}:{height:"1px",backgroundColor:"var(--Border)"}},"div-"+n))}),e}if(r){const t=e.Children.toArray(r);if(!l)return t;const a=[];return t.forEach((e,r)=>{a.push(e),r<t.length-1&&a.push(le(h,{component:"li",role:"separator","aria-hidden":"true",sx:S?{width:"1px",alignSelf:"stretch",backgroundColor:"var(--Border)",flexShrink:0}:{height:"1px",backgroundColor:"var(--Border)"}},"div-"+r))}),a}return null})()})}const fp={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},gp={small:{py:"4px",px:"8px",fontSize:"13px",headerFontSize:"12px"},medium:{py:"8px",px:"12px",fontSize:"14px",headerFontSize:"13px"},large:{py:"12px",px:"16px",fontSize:"16px",headerFontSize:"14px"}};function xp({children:e,columns:r,rows:t,footerRows:a,variant:i="default",color:o="primary",loading:n=!1,skeletonRows:l=3,empty:s,error:d,size:c="medium",stripe:u="none",stickyHeader:p=!1,stickyFooter:m=!1,className:f="",sx:g={},...x}){const b=gp[c]||gp.medium,v="solid"===i,y="outlined"===i,S="light"===i,k=(e=>e.charAt(0).toUpperCase()+e.slice(1))(o),B=y?"1px solid var(--Buttons-"+k+"-Border)":"none",w={};v&&fp[o]&&(w["data-theme"]=fp[o]);const C=()=>{const e={fontWeight:600,fontSize:b.headerFontSize,textAlign:"left",padding:b.py+" "+b.px,borderBottom:"2px solid var(--Border)",color:"var(--Text)",whiteSpace:"nowrap"};return S?(e.backgroundColor="var(--Buttons-"+k+"-Button)",e.color="var(--Buttons-"+k+"-Text)"):e.backgroundColor=v?"var(--Hover)":"var(--Background)",p&&(e.position="sticky",e.top=0,e.zIndex=2),e},T=()=>{const e={fontWeight:600,fontSize:b.headerFontSize,textAlign:"left",padding:b.py+" "+b.px,borderTop:"2px solid var(--Border)",color:"var(--Text)",whiteSpace:"nowrap"};return S?(e.backgroundColor="var(--Buttons-"+k+"-Button)",e.color="var(--Buttons-"+k+"-Text)"):e.backgroundColor=v?"var(--Hover)":"var(--Background)",m&&(e.position="sticky",e.bottom=0,e.zIndex=2),e},z=e=>"none"===u?"Surface":"odd"===u?e%2==0?"Surface":"Surface-Dim":"even"===u&&e%2==0?"Surface-Dim":"Surface",A=()=>({padding:b.py+" "+b.px,fontSize:b.fontSize,color:"var(--Text)",borderBottom:"1px solid var(--Border)",textAlign:"left"}),I=d?"error":n?"loading":t&&0===t.length&&s?"empty":null,W=Boolean(a&&a.length>0)&&"error"!==I,R=e=>le(h,{component:"tbody",children:le(h,{component:"tr",children:le(h,{component:"td",colSpan:r?r.length:1,sx:{padding:0,border:"none"},children:e})})});return le(h,{className:"table-wrapper table-"+i+(v||S||y?" table-"+o:"")+" "+f,...w,"aria-busy":"loading"===I?"true":void 0,sx:{width:"100%",overflow:"auto",border:B,borderRadius:y||S?"var(--Style-Border-Radius)":0,...g},children:le(h,{component:"table",sx:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed",fontFamily:"inherit","& thead th":C(),"& tbody td":A(),"& tfoot td, & tfoot th":T(),...p?{"& thead th":{...C(),position:"sticky",top:0,zIndex:2}}:{},...m?{"& tfoot td, & tfoot th":{...T(),position:"sticky",bottom:0,zIndex:2}}:{}},...x,children:r&&t?r&&(t||I)?de(se,{children:[le(h,{component:"thead",children:le(h,{component:"tr",children:r.map((e,r)=>le(h,{component:"th",sx:{...C(),...e.width?{width:e.width}:{},...e.align?{textAlign:e.align}:{}},children:e.label||e.header||e},"h-"+r))})}),"loading"===I&&R(le(vt,{label:"Loading",children:le(h,{component:"table",sx:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed"},children:le(h,{component:"tbody",children:Array.from({length:l}).map((e,t)=>le(h,{component:"tr","data-surface":z(t),children:r.map((e,r)=>le(h,{component:"td",sx:A(),children:"        "},"skc-"+t+"-"+r))},"sk-"+t))})})})),"error"===I&&R(d),"empty"===I&&R(s),!I&&t&&le(h,{component:"tbody",children:t.map((e,t)=>le(h,{component:"tr","data-surface":z(t),sx:{backgroundColor:"var(--"+z(t)+")"},children:(Array.isArray(e)?e:r.map(r=>e[r.field||r.key])).map((e,a)=>le(h,{component:"td",sx:{...A(),...r[a]&&r[a].align?{textAlign:r[a].align}:{}},children:e},"c-"+t+"-"+a))},"r-"+t))}),'/* The footer is decided PER STATE, not dropped wholesale. loading — ghosted, not hidden. A total that vanishes and reappears moves the table\'s height twice, which is the reflow the header is already kept to avoid; and the total genuinely IS loading, so a placeholder is the honest thing to show rather than a gap. empty — SHOWN as given. This is the case the first version got wrong. A filtered view with no matching invoices has a real total: zero. Hiding it makes the user wonder whether the filter or the sum failed, when the answer is simply "none, and they add up to nothing". error — dropped, and this is the one that must stay dropped. A total computed over data that failed to arrive is not missing, it is WRONG, and a wrong number shown confidently is worse than no number. Partial failures are the sharp case: some rows land, the sum looks plausible, and nothing on screen says it is short. */',W&&le(h,{component:"tfoot",children:a.map((e,t)=>le(h,{component:"tr",children:(Array.isArray(e)?e:r.map(r=>e[r.field||r.key])).map((e,a)=>le(h,{component:"td",sx:{...T(),...r[a]&&r[a].align?{textAlign:r[a].align}:{},..."loading"===I?bt():{}},children:e},"fc-"+t+"-"+a))},"f-"+t))})]}):null:e})})}const bp={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},vp={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},yp={small:{fontSize:"12px",py:"4px",px:"8px",maxWidth:200,arrowSize:6},medium:{fontSize:"13px",py:"6px",px:"12px",maxWidth:280,arrowSize:8},large:{fontSize:"14px",py:"8px",px:"16px",maxWidth:360,arrowSize:10}};function Sp({children:e,title:r,variant:t="solid",color:a="primary",size:i="medium",placement:o="bottom",arrow:n=!1,open:l,enterDelay:s=100,leaveDelay:d=0,describeChild:c=!1,className:u="",sx:p={},...m}){const f=yp[i]||yp.medium,g="solid"===t,x="light"===t,b="outline"===t,v=(e=>e.charAt(0).toUpperCase()+e.slice(1))(a),y="var(--Background)",S=void 0===l?{}:{open:l};return le(B,{title:r?le(h,{"data-theme":(g?bp[a]:x?vp[a]:null)||void 0,"data-surface":x?"Surface-Brightest":g?"Surface":void 0,className:"tooltip-content tooltip-"+t+" tooltip-"+a+" tooltip-"+i+" "+u,sx:{backgroundColor:"var(--Background)",color:"var(--Text)",border:b?"1px solid var(--Buttons-"+v+"-Border)":"none",borderRadius:"var(--Style-Border-Radius)",fontSize:f.fontSize,lineHeight:1.5,fontFamily:"inherit",padding:f.py+" "+f.px,maxWidth:f.maxWidth+"px",boxShadow:"0 2px 8px rgba(0,0,0,0.15)",...p},children:r}):"",placement:o,arrow:n,enterDelay:s,leaveDelay:d,describeChild:c,...S,componentsProps:{tooltip:{sx:{backgroundColor:"transparent",padding:0,maxWidth:"none",boxShadow:"none"}},arrow:{sx:{color:y,"&::before":{border:b?"1px solid var(--Buttons-"+v+"-Border)":"none",backgroundColor:y,boxSizing:"border-box"},fontSize:f.arrowSize+"px"}}},...m,children:e})}const kp={default:{theme:"App-Bar"},primary:{theme:"Primary"},"primary-light":{theme:"Primary",surface:"Surface-Brightest"},white:{theme:"Neutral",surface:"Surface-Brightest"},black:{theme:"Neutral",surface:"Surface-Dimmest"}};function Bp({children:e,onClick:r,ariaLabel:t}){return le(Wi,{iconOnly:!0,variant:"ghost",size:"medium",onClick:r,"aria-label":t,children:e})}function wp({barColor:t="default",surface:a="Surface",loginType:i="login",menuType:o="hamburger",brandType:n="name",searchPosition:l="right",companyName:s="Company",navLinks:d=["Home","Products","About"],rightButtons:c=[],showRightButtons:u=!1,onMenuClick:p,user:m,onLogin:f,onSignOut:g,brand:x,onBrandClick:b,centerSlot:v,endSlot:y,searchValue:S,onSearchChange:k,searchPlaceholder:B="Search...",children:w,className:C="",sx:T={}}){const[z,A]=r(!1),I=kp[t]||kp.default,W=I.theme,R=I.surface||a,D="expanded"===o&&d.length>3?"hamburger":o,P=le(Ps,{placeholder:B,size:"medium",value:S,onChange:k,sx:{flex:"left"===l?"0 1 400px":"0 1 280px",minWidth:0}});return de(se,{children:[le(h,{component:"header",role:"banner","data-theme":W,"data-surface":R,className:"appbar appbar-desktop appbar-"+t+(C?" "+C:""),sx:{display:"flex",alignItems:"center",height:64,px:2,gap:2,backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:li,fontFamily:"inherit",...T},children:w||de(se,{children:["hamburger"===D&&le(Bp,{ariaLabel:"Open navigation menu",onClick:p||(()=>A(!0)),children:le(Wr,{sx:{fontSize:"inherit"}})}),le(h,void 0!==x?b?{component:"button",type:"button",onClick:b,sx:{background:"transparent",border:"none",padding:0,cursor:"pointer",color:"inherit",font:"inherit",fontWeight:700,fontSize:"18px",whiteSpace:"nowrap",flexShrink:0},children:x}:{sx:{fontWeight:700,fontSize:"18px",whiteSpace:"nowrap",flexShrink:0},children:x}:"logo"===n?{sx:{width:32,height:32,borderRadius:"6px",backgroundColor:"var(--Text)",opacity:.8,flexShrink:0},"aria-label":"Company logo"}:{sx:{fontWeight:700,fontSize:"18px",whiteSpace:"nowrap",flexShrink:0},children:s}),de(se,void 0!==v?{children:[le(h,{sx:{flex:1}}),le(h,{sx:{display:"flex",alignItems:"center",flexShrink:0},children:v}),le(h,{sx:{flex:1}})]}:{children:["left"===l&&P,"expanded"===D&&le(fo,{defaultValue:0,variant:"standard",color:"default",sx:{ml:2,minHeight:0},children:le(go,{"aria-label":"Main navigation",children:d.map(e=>le(xo,{children:e},e))})}),le(h,{sx:{flex:1}}),"right"===l&&P]}),void 0!==y?le(h,{sx:{display:"flex",alignItems:"center",gap:1},children:y}):de(se,{children:[u&&c.length>0&&le(h,{sx:{display:"flex",alignItems:"center",gap:.5},children:c.map((r,t)=>r.raw?le(e.Fragment,{children:r.icon},t):le(Bp,{ariaLabel:r.label||"Action "+(t+1),children:r.icon},t))}),m?le(Wi,{variant:"ghost",size:"small",onClick:g,"aria-label":"Sign out",startIcon:m.photoURL?le(h,{component:"img",src:m.photoURL,alt:"",sx:{width:24,height:24,borderRadius:"50%"}}):le(it,{sx:{fontSize:24}}),children:m.displayName?.split(" ")[0]||"Account"}):f?le(Wi,{variant:"default-outline",size:"small",onClick:f,children:"Login"}):"avatar"===i?le(Wi,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(it,{sx:{fontSize:28}})}):null]})]})}),le(Gu,{open:z,onClose:()=>A(!1),anchor:"left",size:"small",children:le(h,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:d.map(e=>le(Wi,{variant:"ghost",size:"medium",onClick:()=>A(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})})]})}function Cp({mobileVariant:e="search",barColor:t="default",surface:a="Surface",title:i="Page Title",subtitle:o="Subtitle text",actionIcon:n,companyName:l="Company",navLinks:s=["Home","Products","About"],className:d="",sx:c={}}){const[u,p]=r(!1),m=kp[t]||kp.default,f=m.theme,g=m.surface||a,x={backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:li,fontFamily:"inherit",width:"100%",maxWidth:420,...c},b={"data-theme":f,"data-surface":g},v=le(Gu,{open:u,onClose:()=>p(!1),anchor:"left",size:"small",children:le(h,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:s.map(e=>le(Wi,{variant:"ghost",size:"medium",onClick:()=>p(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})});return"search"===e?de(se,{children:[de(h,{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-search appbar-"+t+" "+d,...b,sx:{...x,display:"flex",alignItems:"center",height:64,px:1.5,gap:1.5},children:[le(Bp,{ariaLabel:"Open navigation menu",onClick:()=>p(!0),children:le(Wr,{sx:{fontSize:"inherit"}})}),le(Ps,{placeholder:"Search "+l,size:"small",sx:{flex:1,minWidth:0}}),le(Wi,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(it,{sx:{fontSize:28}})})]}),v]}):de(h,"small"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-small appbar-"+t+" "+d,...b,sx:{...x,display:"flex",alignItems:"center",height:64,px:1.5,gap:1},children:[le(Bp,{ariaLabel:"Back",children:le(at,{sx:{fontSize:"inherit"}})}),de(h,{sx:{flex:1,minWidth:0},children:[le(h,{sx:{fontWeight:600,fontSize:"16px",lineHeight:1.3,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:i}),o&&le(h,{sx:{fontSize:"12px",opacity:.7,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:o})]}),n&&le(Bp,{ariaLabel:"Action",children:n})]}:"medium"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-medium appbar-"+t+" "+d,...b,sx:{...x,px:1.5,pb:2},children:[de(h,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(Bp,{ariaLabel:"Back",children:le(at,{sx:{fontSize:"inherit"}})}),le(h,{sx:{flex:1}}),n&&le(Bp,{ariaLabel:"Action",children:n})]}),de(h,{sx:{px:1.5},children:[le(h,{sx:{fontWeight:600,fontSize:"24px",lineHeight:1.2},children:i}),o&&le(h,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:o})]})]}:{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-large appbar-"+t+" "+d,...b,sx:{...x,px:1.5,pb:3},children:[de(h,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(Bp,{ariaLabel:"Back",children:le(at,{sx:{fontSize:"inherit"}})}),le(h,{sx:{flex:1}}),n&&le(Bp,{ariaLabel:"Action",children:n})]}),de(h,{sx:{px:1.5,mt:1},children:[le(h,{sx:{fontWeight:600,fontSize:"36px",lineHeight:1.1},children:i}),o&&le(h,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:o})]})]})}function Tp({mode:e="desktop",...r}){return le("mobile"===e?Cp:wp,{...r})}const zp=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Ap=["default","primary","primary-light","white","black"],Ip=["Surface","Surface-Bright","Surface-Dim","Surface-Dimmest"],Wp={default:{theme:"App-Bar"},primary:{theme:"Primary"},"primary-light":{theme:"Primary",surface:"Surface-Brightest"},white:{theme:"Neutral",surface:"Surface-Brightest"},black:{theme:"Neutral",surface:"Surface-Dimmest"}};function Rp({ratio:e,threshold:r}){if(!e)return le(ga,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=r;return de(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:t?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:[e,":1"]}),le(ga,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Dp({label:e,ratio:r,threshold:t,note:a}){return de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(h,{sx:{flex:1},children:[le(oa,{style:{color:"var(--Text)"},children:e}),a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:a})]}),le(Rp,{ratio:r,threshold:t})]})}function Pp({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Fp({color:e,selected:r,onClick:t}){const a=Wp[e]||Wp.default;return le(h,{component:"button","data-theme":a.theme,"data-surface":a.surface||"Surface",onClick:()=>t(e),"aria-label":"Select "+e,"aria-pressed":r,title:e,sx:{width:"var(--Button-Height, 36px)",height:"var(--Button-Height, 36px)",borderRadius:"4px",backgroundColor:"var(--Background)",border:r?"2px solid var(--Text)":"2px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function Lp(){const[e,t]=r("desktop"),[a,i]=r("default"),[n,l]=r("Surface"),[s,d]=r("login"),[c,u]=r("hamburger"),[p,m]=r("name"),[f,g]=r("right"),[x,b]=r("search"),[v,y]=r(null),[S,B]=r("Surface"),[w,T]=r({}),z="desktop"===e,A=Wp[a]||Wp.default,I=A.theme,W=A.surface||n;return o(()=>{const e={};e.text=tn("--Text"),e.textQuiet=tn("--Text-Quiet"),e.background=tn("--Background"),e.border=tn("--Border"),e.focusVisible=tn("--Focus-Visible"),e.hover=tn("--Hover"),e.active=tn("--Pressed"),T(e)},[a,n,e]),de(h,{sx:{pb:8},children:[le(Zt,{children:"App Bar"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{theme:v,children:le(h,{sx:{width:"100%",maxWidth:z?"100%":420,overflow:"hidden"},children:z?le(wp,{barColor:a,surface:n,loginType:s,menuType:c,brandType:p,searchPosition:f,companyName:"My App",navLinks:["Home","Products","About"]}):le(Cp,{barColor:a,surface:n,mobileVariant:x,companyName:"My App",title:"Page Title",subtitle:"Subtitle text"})})}),le(Ko,{code:(()=>{if(z){const e=[];"default"!==a&&e.push('barColor="'+a+'"'),"Surface"!==n&&e.push('surface="'+n+'"'),"login"!==s&&e.push('loginType="'+s+'"'),"hamburger"!==c&&e.push('menuType="'+c+'"'),"name"!==p&&e.push('brandType="'+p+'"'),"right"!==f&&e.push('searchPosition="'+f+'"');const r=e.length?"\n "+e.join("\n ")+"\n":"";return'<AppBar mode="desktop"'+(r||" ")+'companyName="My App" />'}{const e=['mode="mobile"','mobileVariant="'+x+'"'];return"default"!==a&&e.push('barColor="'+a+'"'),"Surface"!==n&&e.push('surface="'+n+'"'),"<AppBar\n "+e.join("\n ")+'\n title="Page Title"\n/>'}})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:v,onThemeChange:y,surface:S,onSurfaceChange:B})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MODE"}),le(k,{direction:"row",spacing:1,children:["desktop","mobile"].map(r=>le(Pp,{label:zp(r),selected:e===r,onClick:()=>t(r)},r))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Ap.map(e=>le(Fp,{color:e,selected:a===e,onClick:i},e))}),de(ga,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-theme="',I,'"']})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Ip.map(e=>le(Pp,{label:e.replace("Surface-","").replace("Surface","Default"),selected:n===e,onClick:()=>l(e)},e))}),de(ga,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-surface="',n,'"']})]}),z&&de(se,{children:[de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MENU TYPE"}),le(k,{direction:"row",spacing:1,children:["hamburger","expanded"].map(e=>le(Pp,{label:zp(e),selected:c===e,onClick:()=>u(e)},e))}),le(ga,{style:{color:"var(--Text-Quiet)",marginTop:4,display:"block"},children:"Expanded auto-falls back to hamburger when nav > 3 links"})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BRAND"}),le(k,{direction:"row",spacing:1,children:["name","logo"].map(e=>le(Pp,{label:zp(e),selected:p===e,onClick:()=>m(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEARCH POSITION"}),le(k,{direction:"row",spacing:1,children:["left","right"].map(e=>le(Pp,{label:zp(e),selected:f===e,onClick:()=>g(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LOGIN TYPE"}),le(k,{direction:"row",spacing:1,children:["login","avatar"].map(e=>le(Pp,{label:zp(e),selected:s===e,onClick:()=>d(e)},e))})]})]}),!z&&de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MOBILE VARIANT"}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["search","small","medium","large"].map(e=>le(Pp,{label:zp(e),selected:x===e,onClick:()=>b(e)},e))})]})]})}),le(bo,{value:1,children:de(h,{sx:{p:3},children:[de(oa,{color:"quiet",style:{marginBottom:24},children:[e," / ",a," / ",n,z?"":" / "+x,' — data-theme="',I,'" data-surface="',W,'"']}),de(k,{spacing:3,children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(oa,{color:"quiet",style:{marginBottom:16},children:"All text and icons must have 4.5:1 contrast against the AppBar background."}),le(Dp,{label:"Resting: var(--Text) vs. var(--Background)",ratio:rn(w.text,w.background),threshold:4.5,note:'data-theme="'+I+'" data-surface="'+W+'"'}),le(Dp,{label:"On hover: var(--Text) vs. var(--Hover)",ratio:rn(w.text,w.hover),threshold:4.5,note:"Icon buttons use var(--Hover) on hover"}),le(Dp,{label:"On active: var(--Text) vs. var(--Pressed)",ratio:rn(w.text,w.active),threshold:4.5,note:"Icon buttons use var(--Pressed) on press"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(Dp,{label:"var(--Focus-Visible) vs. var(--Background)",ratio:rn(w.focusVisible,w.background),threshold:3,note:"outline: 3px solid var(--Focus-Visible); outline-offset: 1px"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Touch Target Area (WCAG 2.5.5)"}),[{label:"Icon button",size:40,note:"width: 40px, height: 40px"},{label:"AppBar (desktop)",size:64,note:"height: 64px"},{label:"AppBar (mobile)",size:64,note:"height: 64px"}].map(({label:e,size:r,note:t})=>{const a=r>=24,i=r>=44,o=r>=48;return de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(h,{sx:{flex:1},children:[de(oa,{style:{color:"var(--Text)"},children:[e," — ",r,"px"]}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:t})]}),de(h,{sx:{display:"flex",gap:.5,flexWrap:"wrap",justifyContent:"flex-end"},children:[de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:a?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:a?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:["Desktop ",a?"Y":"N"]}),de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:i?"var(--Tags-Success-BG)":"var(--Tags-Warning-BG)",color:i?"var(--Tags-Success-Text)":"var(--Tags-Warning-Text)"},children:["iOS ",i?"Y":"~"]}),de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:o?"var(--Tags-Success-BG)":"var(--Tags-Warning-BG)",color:o?"var(--Tags-Success-Text)":"var(--Tags-Warning-Text)"},children:["Android ",o?"Y":"~"]})]})]},e)})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),de(k,{spacing:0,children:[de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Landmark:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<header role="banner">'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Navigation (expanded menu):"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav aria-label="Main navigation">'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Theme + Surface:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'data-theme="'+I+'" data-surface="'+W+'"'})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Shadow:"}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"box-shadow: var(--Effect-Level-1)"})]}),de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(oa,{children:"Icon buttons:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"All icon buttons have aria-label. Focus visible on keyboard navigation."})]}),de(h,{sx:{py:1.5},children:[le(oa,{children:"Keyboard:"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Tab navigates all interactive elements. Enter/Space activates buttons."})]})]})]})]})]})})]})})})]})]})}const Hp={default:{bg:"var(--Primary-Color-1)",fg:"var(--Primary-Color-12)"},primary:{theme:"Primary",surface:"Surface-Dim"},"primary-dark":{bg:"var(--Primary-Color-1)",fg:"var(--Primary-Color-12)"},white:{bg:"var(--Neutral-Color-11)",fg:"var(--Neutral-Color-3)"},black:{bg:"var(--Neutral-Color-1)",fg:"var(--Neutral-Color-12)"}};function Mp({color:e="default",companyName:r="",year:t=(new Date).getFullYear(),rights:a="All rights reserved",children:i,className:o,style:n,...l}){const s=i??`© ${t}${r?" "+r:""}.${a?" "+a+".":""}`,d=Hp[e]||Hp.default,c=d.theme?{"data-theme":d.theme,"data-surface":d.surface||"Surface-Dim"}:{},u=d.theme?{background:"var(--Background)",color:"var(--Text)"}:{background:d.bg,color:d.fg};return le("div",{...c,className:["dino-copyright",o].filter(Boolean).join(" "),style:{padding:"14px 24px",textAlign:"center",...u,...n},...l,children:le(oa,{style:{color:"inherit",opacity:.85},children:s})})}const Ep={default:{bg:"var(--Primary-Color-2)",fg:"var(--Primary-Color-12)"},primary:{theme:"Primary",surface:"Surface"},"primary-dark":{theme:"Primary",surface:"Surface-Dimmest"},white:{bg:"var(--Neutral-Color-12)",fg:"var(--Neutral-Color-2)"},black:{bg:"var(--Neutral-Color-1)",fg:"var(--Neutral-Color-12)"}};function Np({color:e="default",brand:r,address:t,columns:a=[],socialLinks:i=[],subscribe:o,copyrightName:n,copyrightYear:l,className:s,style:d,...c}){const u=a.slice(0,3),h=Ep[e]||Ep.default,p=h.theme?{"data-theme":h.theme,"data-surface":h.surface||"Surface"}:{},m=h.theme?{background:"var(--Background)",color:"var(--Text)"}:{background:h.bg,color:h.fg};return de("footer",{...p,className:["dino-footer",s].filter(Boolean).join(" "),style:{...m,...d},...c,children:[de("div",{style:{maxWidth:1200,margin:"0 auto",padding:"40px 24px 56px"},children:[r&&le("div",{style:{marginBottom:36},children:r}),de("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))",gap:40},children:[le(Op,{address:t}),u.map((e,r)=>le(Qp,{...e},r))]}),(i.length>0||o)&&de("div",{style:{marginTop:48,paddingTop:32,borderTop:"1px solid rgba(255, 255, 255, 0.10)",display:"flex",flexWrap:"wrap",gap:32,alignItems:"flex-start",justifyContent:"space-between"},children:[i.length>0&&le(Vp,{links:i}),o&&le(jp,{...o})]})]}),le(Mp,{color:e,companyName:n,year:l})]})}function Op({address:e}){if(!e)return le("div",{});const{company:r,lines:t=[],email:a,phone:i}=e,o=[...r?[r]:[],...t,...i?[i]:[]];return de("div",{children:[o.map((e,r)=>le(oa,{style:{color:"inherit",opacity:.85,display:"block"},children:e},r)),a&&le("div",{style:{marginTop:12},children:le(oa,{style:{color:"inherit",opacity:.85,display:"block"},children:le(Js,{href:"mailto:"+a,color:"standard",style:{color:"inherit"},children:a})})})]})}function Qp({title:e,links:r=[]}){return de("div",{children:[e&&le(qt,{style:{color:"inherit",marginBottom:12},children:e}),le("ul",{style:{listStyle:"none",margin:0,padding:0},children:r.map((e,r)=>le("li",{style:{marginBottom:8},children:le(Js,{href:e.href,onClick:e.onClick,color:"standard",style:{color:"inherit",opacity:.85},children:e.label})},r))})]})}function Vp({links:e}){return le("div",{style:{display:"flex",gap:16,alignItems:"center"},children:e.map((e,r)=>le("a",{href:e.url,target:"_blank",rel:"noopener noreferrer","aria-label":e.label||"Social link",style:{color:"inherit",opacity:.85,display:"inline-flex",alignItems:"center",justifyContent:"center",width:36,height:36,borderRadius:"50%",border:"1px solid rgba(255, 255, 255, 0.18)",textDecoration:"none",transition:"opacity 150ms ease, border-color 150ms ease"},onMouseEnter:e=>{e.currentTarget.style.opacity="1"},onMouseLeave:e=>{e.currentTarget.style.opacity="0.85"},children:e.icon},r))})}function jp({title:e="Stay in the loop",description:t,placeholder:a="your@email.com",buttonLabel:i="Subscribe",onSubscribe:o}){const[n,l]=r(""),[s,d]=r(!1);return de("form",{onSubmit:async e=>{if(e&&e.preventDefault(),n&&!s){d(!0);try{await(o?.(n)),l("")}finally{d(!1)}}},style:{minWidth:260,maxWidth:360,flex:"1 1 260px"},children:[le(qt,{style:{color:"inherit",marginBottom:6},children:e}),t&&le(oa,{style:{color:"inherit",opacity:.85,marginBottom:12,display:"block"},children:t}),de("div",{style:{display:"flex",gap:8},children:[le(Xl,{type:"email",value:n,onChange:e=>l(e.target.value),placeholder:a,size:"small",fullWidth:!0,"aria-label":"Email address"}),le(Wi,{type:"submit",variant:"primary",size:"small",disabled:s||!n,children:i})]})]})}function Gp(e){const r=e.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);return r?[Number(r[1]),Number(r[2]),Number(r[3])]:null}function Up(e){return e?"#"+e.map(e=>e.toString(16).padStart(2,"0")).join(""):"—"}function Xp([e,r,t]){const a=[e,r,t].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*a[0]+.7152*a[1]+.0722*a[2]}function Yp({targetRef:e,label:t,deps:a=[]}){const[i,n]=r(null),[l,s]=r(null);o(()=>{if(!e.current)return;const r=requestAnimationFrame(()=>{if(!e.current)return;const r=getComputedStyle(e.current);n(Gp(r.backgroundColor)),s(Gp(r.color))});return()=>cancelAnimationFrame(r)},a);const d=function(e,r){if(!e||!r)return null;const t=Xp(e),a=Xp(r);return(Math.max(t,a)+.05)/(Math.min(t,a)+.05)}(i,l),c=null!==d&&d>=4.5,u=null===d?"—":null!==d&&d>=7?"AAA":c?"AA":"Fail",h=null===d?"var(--Text-Quiet)":c?"var(--Text-Success)":"var(--Text-Error)";return de("div",{style:{display:"flex",alignItems:"center",gap:16,padding:"12px 16px",borderRadius:8,background:"var(--Container)",border:"1px solid var(--Border)"},children:[de("div",{style:{flex:1,minWidth:0},children:[le(oa,{style:{fontWeight:600},children:t}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Background ",Up(i)," · Text ",Up(l)]})]}),de("div",{style:{display:"flex",alignItems:"center",gap:6,borderRadius:999,padding:"4px 10px",background:"var(--Background)",border:"1px solid var(--Border)"},children:[le("span",{style:{fontWeight:700,fontSize:12,color:h},children:u}),le(ga,{style:{color:"var(--Text-Quiet)"},children:null!==d?d.toFixed(2)+":1":"—"})]})]})}const Zp={company:"DinoDesign",lines:["123 Market Street","San Francisco, CA 94103"],email:"hello@dinodesign.dev",phone:"+1 (555) 010-0000"},qp=[{title:"Product",links:[{label:"Features",href:"#"},{label:"Pricing",href:"#"},{label:"Add-ons",href:"#"}]},{title:"Company",links:[{label:"About",href:"#"},{label:"Careers",href:"#"},{label:"Contact",href:"#"}]},{title:"Resources",links:[{label:"Docs",href:"#"},{label:"Changelog",href:"#"},{label:"Status",href:"#"}]}],Jp=[{icon:le(ot,{fontSize:"small"}),url:"https://twitter.com",label:"Twitter"},{icon:le(nt,{fontSize:"small"}),url:"https://github.com",label:"GitHub"},{icon:le(lt,{fontSize:"small"}),url:"https://linkedin.com",label:"LinkedIn"}],Kp=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function $p({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function _p(){const[e,t]=r(4),[i,n]=r(!0),[l,s]=r(!0),[d,c]=r("default"),u=a(null),[p,m]=r(null),[f,g]=r(null);o(()=>{u.current&&(m({current:u.current.querySelector(".dino-footer")}),g({current:u.current.querySelector(".dino-copyright")}))},[d,e,i,l]);const x=qp.slice(0,Math.max(0,e-1)),b=i?Jp:[],v=l?{title:"Stay in the loop",description:"Monthly updates on new components and tips.",onSubscribe:async e=>console.log("subscribed:",e)}:void 0;return de(h,{children:[le(Zt,{style:{marginBottom:12},children:"Footer"}),de(sa,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:["Configurable 1–4 column footer. The first column is always the company address / contact. Optional ",le("code",{children:"socialLinks"})," and"," ",le("code",{children:"subscribe"})," sit above the auto-generated copyright strip."]}),le(h,{ref:u,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(Np,{color:d,address:Zp,columns:x,socialLinks:b,subscribe:v,copyrightName:"DinoDesign"})}),de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(k,{spacing:3,sx:{p:3,maxWidth:560},children:[de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLUMNS"}),le(k,{direction:"row",spacing:1,children:[1,2,3,4].map(r=>le($p,{label:String(r),selected:e===r,onClick:()=>t(r)},r))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"First column is always the address / contact. Up to 3 more link columns."})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Kp.map(e=>le($p,{label:e.label,selected:d===e.value,onClick:()=>c(e.value)},e.value))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:'"Default" hardcodes Primary tone 2 (auto-derived in a future iteration).'})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SOCIAL LINKS"}),le(pn,{label:"Show social media row",checked:i,onChange:e=>n(e.target.checked)}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["When on, the Footer renders the ",le("code",{children:"socialLinks"})," row (icons linking out). In your app, supply the icon + url pairs from your data store."]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SUBSCRIBE"}),le(pn,{label:"Show email subscribe form",checked:l,onChange:e=>s(e.target.checked)}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["When on, the Footer renders an email subscribe form. Hook it up via"," ",le("code",{children:"subscribe.onSubscribe(email)"}),"."]})]})]})}),le(bo,{value:1,children:de(k,{spacing:2,sx:{p:3,maxWidth:560},children:[le(ga,{style:{color:"var(--Text-Quiet)"},children:"Live WCAG 2.1 contrast against the painted background. AA needs 4.5:1 for normal text; AAA needs 7:1."}),p&&le(Yp,{targetRef:p,label:"Footer body",deps:[d,e,i,l]}),f&&le(Yp,{targetRef:f,label:"Copyright strip",deps:[d,e,i,l]})]})})]})]})}const em=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function rm({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function tm(){const[e,t]=r("DinoDesign"),[i,n]=r((new Date).getFullYear()),[l,s]=r("All rights reserved"),[d,c]=r(""),[u,p]=r(!1),[m,f]=r("default"),g=a(null),[x,b]=r(null);return o(()=>{g.current&&b({current:g.current.querySelector(".dino-copyright")})},[m,u,e,i,l,d]),de(h,{children:[le(Zt,{style:{marginBottom:12},children:"Copyright"}),de(sa,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:["Standalone copyright strip used at the bottom of pages. Defaults to"," ",de("code",{children:["© ","{year}"," ","{companyName}",". ","{rights}","."]})," Pass"," ",le("code",{children:"children"})," to override the entire text."]}),le(h,{ref:g,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(Mp,u?{color:m,children:d||"Type a custom message →"}:{color:m,companyName:e,year:Number(i)||(new Date).getFullYear(),rights:l})}),de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(k,{spacing:3,sx:{p:3,maxWidth:560},children:[de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TEXT MODE"}),de(k,{direction:"row",spacing:1,children:[le(rm,{label:"Auto-generated",selected:!u,onClick:()=>p(!1)}),le(rm,{label:"Custom",selected:u,onClick:()=>p(!0)})]})]}),!u&&de(se,{children:[le($i,{label:"Company name",value:e,onChange:e=>t(e.target.value),placeholder:"DinoDesign",size:"medium"}),le(Cl,{label:"Year",value:Number(i),onChange:e=>n(e),min:1900,max:2100}),le($i,{label:"Rights text",value:l,onChange:e=>s(e.target.value),placeholder:"All rights reserved",size:"medium"}),le(ga,{style:{color:"var(--Text-Quiet)"},children:'Leave Rights blank to omit "All rights reserved." entirely.'})]}),u&&de(se,{children:[le($i,{label:"Custom text",value:d,onChange:e=>c(e.target.value),placeholder:"© 2026 DinoDesign · MIT License · Built with love",size:"medium",multiline:!0}),le(ga,{style:{color:"var(--Text-Quiet)"},children:"Pass any string (or React node) as children to fully override the auto text."})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:em.map(e=>le(rm,{label:e.label,selected:m===e.value,onClick:()=>f(e.value)},e.value))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Matches the Footer color presets so the two stack cleanly."})]})]})}),le(bo,{value:1,children:de(k,{spacing:2,sx:{p:3,maxWidth:560},children:[le(ga,{style:{color:"var(--Text-Quiet)"},children:"Live WCAG 2.1 contrast against the painted background. AA needs 4.5:1 for normal text; AAA needs 7:1."}),x&&le(Yp,{targetRef:x,label:"Copyright strip",deps:[m,u,e,i,l,d]})]})})]})]})}const am=["Default","Primary","Secondary","Tertiary","Neutral"],im={Classic:{name:"Classic",description:"Raised + soft shadow",angle:135,bevel:!0,depth:5,softness:1,shadow:!0,shadowDistance:6,shadowBlur:8,shadowOpacity:.6},Carved:{name:"Carved",description:"Deep inset, no shadow",angle:135,bevel:!0,depth:10,softness:2,shadow:!1,shadowDistance:4,shadowBlur:4,shadowOpacity:.4},Embossed:{name:"Embossed",description:"Inset + heavy shadow",angle:135,bevel:!0,depth:7,softness:1.5,shadow:!0,shadowDistance:10,shadowBlur:14,shadowOpacity:.7},Stamp:{name:"Stamp",description:"Reversed light + shadow",angle:315,bevel:!0,depth:6,softness:1,shadow:!0,shadowDistance:5,shadowBlur:6,shadowOpacity:.8},"Night Cut":{name:"Night Cut",description:"Inset on dark background",angle:135,bevel:!0,depth:8,softness:2,shadow:!1,shadowDistance:6,shadowBlur:8,shadowOpacity:.6},"Shadow Only":{name:"Shadow Only",description:"Flat fill + drop shadow",angle:135,bevel:!1,depth:4,softness:1,shadow:!0,shadowDistance:8,shadowBlur:12,shadowOpacity:.5}},om=Object.keys(im);function nm(e,r){if("custom"===e)return{...im.Classic,name:"Custom",description:"Custom",...r||{}};const t=im[e];return t?{...t}:{...im.Classic}}function lm(e,r){const t=e||"Primary";return"base"===r?"var(--Buttons-"+t+"-Button)":"highlight"===r?"rgb(var(--Buttons-"+t+"-Highlight))":"lowlight"===r?"rgb(var(--Buttons-"+t+"-Lowlight))":void 0}function sm(e){const r=e||"Primary";return"Default"===r?"var(--Text)":"var(--Text-"+r+")"}function dm(e,r){const t=(e-90)*Math.PI/180;return{dx:Math.cos(t)*r,dy:Math.sin(t)*r}}const cm={"display-large":{fontFamily:"var(--Header-Font-Family)",fontSize:"var(--Display-Large-Font-Size)",fontWeight:"var(--Display-Large-Font-Weight)",letterSpacing:"var(--Display-Large-Letter-Spacing)",pxHint:64},"display-small":{fontFamily:"var(--Header-Font-Family)",fontSize:"var(--Display-Small-Font-Size)",fontWeight:"var(--Display-Small-Font-Weight)",letterSpacing:"var(--Display-Small-Letter-Spacing)",pxHint:48}};function um({text:r="Your Brand. Perfected.",curves:t,arc:a=160,radius:i=300,direction:o="up",rotation:n=0,autoCrop:l=!0,textStyle:s="display-large",fontSize:d,fontFamily:c,fontWeight:u,letterSpacing:h,color:p="var(--Text, #1a1a1a)",bevel:m=!1,bevelTheme:f="Primary",bevelPreset:g,bevelCustom:x,className:b,style:v,...y}){const S=g?nm(g,x):null,k=S?!!S.bevel:!!m,B=cm[s]||cm["display-large"],w=c??B.fontFamily,C=d??B.fontSize,T=u??B.fontWeight,z=h??B.letterSpacing,A="number"==typeof d?d:B.pxHint,I=t&&t.length>0?t:[{arc:a,radius:i,direction:o}],{d:W,width:R,upMax:D,downMax:P,pathId:F}=function(r){return e.useMemo(()=>{const e="dino-curved-text-"+Math.random().toString(36).slice(2,9);let t=0;const a=0;let i="M "+t+" "+a,o=0,n=0;for(const{arc:e,radius:l,direction:s}of r){const r=hm(e,1,359),d=Math.max(10,l),c=r*Math.PI/180,u=2*d*Math.sin(c/2),h=d*(1-Math.cos(c/2));t+=u,i+=" A "+d+" "+d+" 0 "+(r>180?1:0)+" "+("up"===s?1:0)+" "+t+" "+a,"up"===s?o=Math.max(o,h):n=Math.max(n,h)}return{d:i,width:t,upMax:o,downMax:n,pathId:e}},[JSON.stringify(r)])}(I),L=Math.ceil(D+A),H=Math.ceil(P+A),M=Math.ceil(A),E=Math.ceil(R+2*M),N=L+H,O=M,Q=L,V=n?"rotate("+n+" "+E/2+" "+N/2+")":void 0,j=e.useRef(null),[G,U]=e.useState(null),[X,Y]=e.useState(A);e.useEffect(()=>{if(!j.current||"undefined"==typeof ResizeObserver)return;const e=j.current,r=()=>{const r=e.getBoundingClientRect(),t=G?G.width:E;if(!t||!r.width)return;const a=r.width/t;Y(A*a)};r();const t=new ResizeObserver(r);return t.observe(e),()=>t.disconnect()},[E,A,G]);const Z=k&&X>=19;e.useLayoutEffect(()=>{if(!l)return void U(null);const e=j.current;if(!e)return;const r=e.querySelector("text");if(!r)return;let t;try{t=r.getBBox()}catch(e){return}if(!t||!t.width||!t.height)return;const a=E/2,i=N/2,o=n*Math.PI/180,s=Math.cos(o),d=Math.sin(o),c=(e,r)=>{const t=e-a,o=r-i;return{x:a+t*s-o*d,y:i+t*d+o*s}},u=[c(t.x,t.y),c(t.x+t.width,t.y),c(t.x,t.y+t.height),c(t.x+t.width,t.y+t.height)],h=Math.min(...u.map(e=>e.x)),p=Math.max(...u.map(e=>e.x)),m=Math.min(...u.map(e=>e.y)),f=Math.max(...u.map(e=>e.y)),g=.12*A,x={x:h-g,y:m-g,width:p-h+2*g,height:f-m+2*g};U(e=>e&&Math.abs(e.x-x.x)<.5&&Math.abs(e.y-x.y)<.5&&Math.abs(e.width-x.width)<.5&&Math.abs(e.height-x.height)<.5?e:x)},[l,r,JSON.stringify(I),n,A,z,w,T,k,f,g,JSON.stringify(x)]);const q=G?G.x+" "+G.y+" "+G.width+" "+G.height:"0 0 "+E+" "+N,J=G?G.width:E,K=G?G.height:N;return de("svg",{ref:j,viewBox:q,width:J,height:K,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...v},"aria-label":r,role:"img",className:["dino-curved-text",b].filter(Boolean).join(" "),...y,children:[le("defs",{children:le("path",{id:F,d:W,transform:"translate("+O+" "+Q+")"})}),de("g",{transform:V,children:[Z&&(()=>{const e=S?S.depth/96:.045,t=Math.max(2,Math.round(A*e)),a=Math.max(1,Math.round(A*e*.67)),i={fontFamily:w,fontSize:"number"==typeof C?C+"px":C,fontWeight:T,letterSpacing:"number"==typeof z?z+"px":z};return de(se,{children:[le("text",{className:"dino-bevel-layer dino-bevel-layer--lowlight",fill:"rgb(var(--Buttons-"+f+"-Lowlight))",transform:"translate(0 "+t+")",style:i,children:le("textPath",{href:"#"+F,startOffset:"50%",textAnchor:"middle",children:r})}),le("text",{className:"dino-bevel-layer dino-bevel-layer--highlight",fill:"rgb(var(--Buttons-"+f+"-Highlight))",transform:"translate(0 -"+a+")",style:i,children:le("textPath",{href:"#"+F,startOffset:"50%",textAnchor:"middle",children:r})})]})})(),le("text",{className:"dino-curved-text__base",fill:Z?"var(--Buttons-"+f+"-Button)":k?sm(f):p,style:{fontFamily:w,fontSize:"number"==typeof C?C+"px":C,fontWeight:T,letterSpacing:"number"==typeof z?z+"px":z},children:le("textPath",{href:"#"+F,startOffset:"50%",textAnchor:"middle",children:r})})]})]})}function hm(e,r,t){return Math.max(r,Math.min(t,e))}const pm=[{value:"display-large",label:"Display Large"},{value:"display-small",label:"Display Small"}],mm=[{value:"text",label:"Text",css:"var(--Text)"},{value:"primary",label:"Primary",css:"var(--Text-Primary)"},{value:"secondary",label:"Secondary",css:"var(--Text-Secondary)"},{value:"tertiary",label:"Tertiary",css:"var(--Text-Tertiary)"}],fm=am.map(e=>({value:e,label:e}));function gm({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function xm(){const[e,t]=r("Your Brand. Perfected."),[i,n]=r("display-large"),[l,s]=r("primary"),[d,c]=r([(u="up",{arc:140,radius:340,direction:u})]);var u;const[p,m]=r(0),[f,g]=r(8),[x,b]=r(700),[v,y]=r(!1),[S,B]=r("Primary"),[w,C]=r("Classic"),T=a(null),[z,A]=r(null);o(()=>{T.current&&A({current:T.current.querySelector("text")})},[l,i,d,p,f,x,v,S,w]);const I=mm.find(e=>e.value===l)?.css||mm[0].css;function W(e,r){c(t=>t.map((t,a)=>a===e?{...t,...r}:t))}return de(h,{children:[le(Zt,{style:{marginBottom:12},children:"Curved Display Text"}),le(sa,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:"Decorative text laid along an SVG arc. Chain multiple arcs to build a wave — each curve gets its own radius, arc sweep, and direction. Uses your design system's decorative font + text tokens."}),de(h,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(360px, 1fr))",gap:3,alignItems:"start"},children:[le(h,{sx:{minWidth:0},children:le(h,{ref:T,"data-surface":"Container",sx:{background:"var(--Background)",borderRadius:2,p:3,display:"flex",alignItems:"center",justifyContent:"center",overflow:"auto",position:"sticky",top:16},children:le(um,{text:e,curves:d,textStyle:i,rotation:p,letterSpacing:f,fontWeight:x,bevel:v,bevelTheme:S,bevelPreset:v?w:void 0,color:I})})}),le(h,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(k,{spacing:3,sx:{p:3,maxWidth:720},children:[le($i,{label:"Text",value:e,onChange:e=>t(e.target.value),placeholder:"Your headline…",size:"medium"}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CURVES"}),le(k,{direction:"row",spacing:1,children:[1,2].map(e=>le(gm,{label:String(e),selected:d.length===e,onClick:()=>function(e){c(r=>{if(e===r.length)return r;if(e>r.length){const t=[...r];for(;t.length<e;){const e=t[t.length-1];t.push({arc:e.arc,radius:e.radius,direction:"up"===e.direction?"down":"up"})}return t}return r.slice(0,e)})}(e)},e))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"One curve is an arch. Two curves chain end-to-end for a wave."})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"PER-CURVE SETTINGS"}),le(k,{spacing:2,children:d.map((e,r)=>de(h,{"data-surface":"Container",style:{background:"var(--Background)",border:"1px solid var(--Border)",borderRadius:8,padding:12},children:[de(k,{direction:"row",alignItems:"center",spacing:2,sx:{mb:1},children:[de(ga,{style:{fontWeight:700},children:["Curve ",r+1]}),le("div",{style:{flex:1}}),de(k,{direction:"row",spacing:1,children:[le(gm,{label:"⌢ Up",selected:"up"===e.direction,onClick:()=>W(r,{direction:"up"})}),le(gm,{label:"⌣ Down",selected:"down"===e.direction,onClick:()=>W(r,{direction:"down"})})]})]}),de(k,{spacing:1,children:[de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Radius",de("span",{style:{float:"right"},children:[e.radius,"px"]})]}),le(Ts,{min:100,max:600,step:10,value:e.radius,onChange:(e,t)=>W(r,{radius:t})})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Arc sweep",de("span",{style:{float:"right"},children:[e.arc,"°"]})]}),le(Ts,{min:40,max:280,step:5,value:e.arc,onChange:(e,t)=>W(r,{arc:t})})]})]})]},r))})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:pm.map(e=>le(gm,{label:e.label,selected:i===e.value,onClick:()=>n(e.value)},e.value))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Uses the lib's DisplayLarge / DisplaySmall tokens (font-family, size, weight, letter-spacing)."})]}),de(h,{children:[de(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["LETTER SPACING",de("span",{style:{float:"right"},children:[f,"px"]})]}),le(Ts,{min:-4,max:40,step:1,value:f,onChange:(e,r)=>g(r)}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Adjusts the gap between characters along the wave."})]}),de(h,{children:[de(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["FONT WEIGHT",le("span",{style:{float:"right"},children:x})]}),le(Ts,{min:100,max:900,step:100,value:x,onChange:(e,r)=>b(r)}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Heavier weights read better at decorative sizes. Available weights depend on the loaded display font."})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BEVEL"}),le(pn,{label:"3D bevel effect",checked:v,onChange:e=>y(e.target.checked)}),v&&de(h,{sx:{mt:1.5},children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Preset"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1,mb:1.5},children:om.map(e=>le(gm,{label:e,selected:w===e,onClick:()=>C(e)},e))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Bevel theme"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:fm.map(e=>le(gm,{label:e.label,selected:S===e.value,onClick:()=>B(e.value)},e.value))})]}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Bevel layers use ",de("code",{children:["--Buttons-","{Theme}","-Button"]})," for the fill, with ",le("code",{children:"Highlight"})," + ",le("code",{children:"Lowlight"}),"tokens for the bright/shadow stripes. CurvedText honors a preset's ",le("em",{children:"depth"})," only — angle, softness, and drop-shadow fields are stacked-rendering limitations and are ignored here (the full filter pipeline lives in ",le("code",{children:"<BevelText>"}),"). Shadow-only presets render no effect. Auto-hides below 19px so the 3:1 bevel contrast doesn't compromise small-text legibility."]})]}),de(h,{children:[de(k,{direction:"row",alignItems:"center",sx:{mb:1},children:[de(wa,{style:{color:"var(--Text-Quiet)",flex:1},children:["ROTATION",de("span",{style:{float:"right",marginRight:12},children:[p,"°"]})]}),le(Wi,{variant:"default-outline",size:"small",onClick:function(){const r=T.current?.querySelector("svg");if(!r)return;const t=r.querySelector("path"),a=r.querySelector("text");if(!t||!a)return;const i=t.getTotalLength();if(!i)return;let o=0;try{o=a.getComputedTextLength?.()||0}catch(e){}o||(o=Math.min(i,18*e.length));const n=Math.max(0,(i-o)/2),l=Math.min(i,n+o),s=t.getPointAtLength(n),d=t.getPointAtLength(l),c=180*Math.atan2(d.y-s.y,d.x-s.x)/Math.PI,u=Math.max(-45,Math.min(45,Math.round(-c)));m(u)},children:"Auto-level"})]}),le(Ts,{min:-45,max:45,step:1,value:p,onChange:(e,r)=>m(r)}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:'Tilts the whole text block around its center. "Auto-level" rotates so the text\'s start and end sit on the same horizontal line — useful when a multi-curve wave makes the reading line slant.'})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:mm.map(e=>le(gm,{label:e.label,selected:l===e.value,onClick:()=>s(e.value)},e.value))})]})]})}),le(bo,{value:1,children:de(k,{spacing:2,sx:{p:3,maxWidth:560},children:[le(ga,{style:{color:"var(--Text-Quiet)"},children:"Live WCAG 2.1 contrast against the painted background. Decorative display text counts as large text — AA needs 3:1, AAA needs 4.5:1 — but DinoDesign defaults to 4.5:1 across the board."}),z&&le(Yp,{targetRef:z,label:"Curved text",deps:[l,i,JSON.stringify(d),p,f]}),de(oa,{color:"quiet",children:["The SVG sets ",le("code",{children:'role="img"'})," and"," ",le("code",{children:"aria-label"})," to the rendered text so screen readers announce it as a labeled image, not a stream of individual glyphs."]})]})})]})})})]})]})}const bm={"display-large":{fontFamily:"var(--Header-Font-Family)",fontSize:"var(--Display-Large-Font-Size)",fontWeight:"var(--Display-Large-Font-Weight)",letterSpacing:"var(--Display-Large-Letter-Spacing)",pxHint:96},"display-small":{fontFamily:"var(--Header-Font-Family)",fontSize:"var(--Display-Small-Font-Size)",fontWeight:"var(--Display-Small-Font-Weight)",letterSpacing:"var(--Display-Small-Letter-Spacing)",pxHint:64}};function vm({text:r="DinoDesign",theme:t="Primary",preset:a="Classic",custom:i,textStyle:o="display-large",fontSize:n,fontFamily:l,fontWeight:s,letterSpacing:d,className:c,style:u,...h}){const p=bm[o]||bm["display-large"],m=l??p.fontFamily,f=n??p.fontSize,g=s??p.fontWeight,x=d??p.letterSpacing,b="number"==typeof n?n:p.pxHint,v=nm(a,i),y="dino-bevel-"+e.useId().replace(/:/g,""),S=y+"-s",k=e.useRef(null),[B,w]=e.useState(b),C=.6*b,T=Math.max(400,r.length*C+80),z=1.9*b,A=T/2,I=.7*z;e.useEffect(()=>{if(!k.current||"undefined"==typeof ResizeObserver)return;const e=k.current,r=()=>{const r=e.getBoundingClientRect();T&&r.width&&w(b*(r.width/T))};r();const t=new ResizeObserver(r);return t.observe(e),()=>t.disconnect()},[T,b]);const W=B>=19,R=v.bevel?dm(v.angle+180,v.depth):{dx:0,dy:0},D=v.bevel?dm(v.angle,v.depth):{dx:0,dy:0},P=v.shadow?dm(v.angle,v.shadowDistance??6):{dx:0,dy:0},F=W?lm(t,"base"):sm(t),L=lm(t,"highlight"),H=lm(t,"lowlight"),M={fontFamily:m,fontSize:"number"==typeof f?f+"px":f,fontWeight:g,letterSpacing:"number"==typeof x?x+"px":x},E=v.bevel&&W?"url(#"+y+")":void 0,N=v.shadow&&W?"url(#"+S+")":void 0;return de("svg",{ref:k,viewBox:"0 0 "+T+" "+z,width:T,height:z,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...u},"aria-label":r,role:"img",className:["dino-bevel-text",c].filter(Boolean).join(" "),...h,children:[de("defs",{children:[v.shadow&&le("filter",{id:S,x:"-30%",y:"-30%",width:"160%",height:"160%",children:le("feDropShadow",{dx:P.dx.toFixed(2),dy:P.dy.toFixed(2),stdDeviation:v.shadowBlur??8,style:{floodColor:H,floodOpacity:v.shadowOpacity??.6}})}),v.bevel&&de("filter",{id:y,x:"-5%",y:"-5%",width:"110%",height:"110%",colorInterpolationFilters:"sRGB",children:[le("feGaussianBlur",{in:"SourceAlpha",stdDeviation:(v.softness??1)+.5,result:"blur-alpha"}),le("feOffset",{in:"blur-alpha",dx:D.dx.toFixed(2),dy:D.dy.toFixed(2),result:"shadow-offset"}),le("feFlood",{style:{floodColor:H,floodOpacity:.95},result:"shadow-flood"}),le("feComposite",{in:"shadow-flood",in2:"shadow-offset",operator:"in",result:"shadow-shaped"}),le("feComposite",{in:"shadow-shaped",in2:"SourceAlpha",operator:"in",result:"shadow-clipped"}),le("feOffset",{in:"blur-alpha",dx:R.dx.toFixed(2),dy:R.dy.toFixed(2),result:"hi-offset"}),le("feFlood",{style:{floodColor:L,floodOpacity:.95},result:"hi-flood"}),le("feComposite",{in:"hi-flood",in2:"hi-offset",operator:"in",result:"hi-shaped"}),le("feComposite",{in:"hi-shaped",in2:"SourceAlpha",operator:"in",result:"hi-clipped"}),de("feMerge",{children:[le("feMergeNode",{in:"SourceGraphic"}),le("feMergeNode",{in:"shadow-clipped"}),le("feMergeNode",{in:"hi-clipped"})]})]})]}),v.shadow&&W&&le("text",{className:"dino-bevel-layer dino-bevel-layer--shadow",x:A,y:I,textAnchor:"middle",fill:F,filter:N,style:M,"aria-hidden":"true",children:r}),le("text",{className:v.bevel?"dino-bevel-text__base dino-bevel-layer":"dino-bevel-text__base",x:A,y:I,textAnchor:"middle",fill:F,filter:E,style:M,children:r})]})}const ym=[...om.map(e=>({value:e,label:e,description:im[e].description})),{value:"custom",label:"Custom",description:"Tune every knob"}],Sm=[{value:"light",label:"Light",css:"var(--Surface)"},{value:"warm",label:"Warm",css:"var(--Surface-Dim)"},{value:"dark",label:"Dark",css:"var(--Container-High)"}];function km({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Bm({option:e,active:r,onClick:t}){return de(h,{onClick:t,role:"button",tabIndex:0,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),t())},sx:{flex:"1 1 140px",minWidth:130,cursor:"pointer",border:"1.5px solid",borderColor:r?"var(--Buttons-Primary-Border)":"var(--Border)",background:r?"rgb(var(--Buttons-Primary-Highlight) / 0.18)":"var(--Background)",borderRadius:"var(--Style-Border-Radius)",p:1.5,transition:"border-color 0.15s, background 0.15s",textAlign:"center","&:hover":{borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:2}},children:[le(ga,{style:{fontWeight:600,color:"var(--Text)"},children:e.label}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:e.description})]})}function wm(){const[e,t]=r("DinoDesign"),[a,i]=r("Primary"),[o,n]=r("Classic"),[l,s]=r("light"),[d,c]=r(135),[u,p]=r(5),[m,f]=r(1),[g,x]=r(!0),[b,v]=r(!0),[y,S]=r(6),[B,w]=r(8),[C,T]=r(60),[z,A]=r(96),[I,W]=r(900),[R,D]=r(0),P="custom"===o,F=P?{angle:d,depth:u,softness:m,bevel:g,shadow:b,shadowDistance:y,shadowBlur:B,shadowOpacity:C/100}:void 0;const L=Sm.find(e=>e.value===l)?.css||Sm[0].css;return de(h,{children:[le(Zt,{style:{marginBottom:12},children:"Bevel Display Text"}),le(sa,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:"Straight-line display text with an SVG inset-bevel and optional drop shadow. Colors are locked to the active button-palette tokens (Button / Highlight / Lowlight) so the same preset reads correctly under any theme."}),de(h,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(360px, 1fr))",gap:3,alignItems:"start"},children:[le(h,{sx:{minWidth:0},children:le(h,{"data-surface":"Container",sx:{background:L,borderRadius:2,p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:240,overflow:"auto",position:"sticky",top:16,transition:"background 0.2s"},children:le(vm,{text:e,theme:a,preset:o,custom:F,fontSize:z,fontWeight:I,letterSpacing:R})})}),le(h,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(k,{spacing:3,sx:{p:3,maxWidth:720},children:[le($i,{label:"Text",value:e,onChange:e=>t(e.target.value),placeholder:"Your headline…",size:"medium"}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME"}),le(k,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:am.map(e=>le(km,{label:e,selected:a===e,onClick:()=>i(e)},e))}),de(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Resolves to ",de("code",{children:["--Buttons-","{Theme}","-Button"]})," ","(fill), ",le("code",{children:"-Highlight"})," (light edge), and"," ",le("code",{children:"-Lowlight"})," (shadow edge)."]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PRESETS"}),le(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:ym.map(e=>le(Bm,{option:e,active:o===e.value,onClick:()=>function(e){if(n(e),"custom"!==e){const r=nm(e);c(r.angle),p(r.depth??5),f(r.softness??1),x(r.bevel),v(r.shadow),S(r.shadowDistance??6),w(r.shadowBlur??8),T(Math.round(100*(r.shadowOpacity??.6)))}}(e.value)},e.value))})]}),P&&de(h,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",p:2},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"CUSTOM"}),de(k,{spacing:2,children:[de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Light angle",de("span",{style:{float:"right"},children:[d,"°"]})]}),le(Ts,{min:0,max:360,step:5,value:d,onChange:(e,r)=>c(r)})]}),de(h,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(pn,{label:"Inset bevel",checked:g,onChange:e=>x(e.target.checked)}),g&&de(k,{spacing:1.5,sx:{mt:1.5},children:[de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Depth",de("span",{style:{float:"right"},children:[u,"px"]})]}),le(Ts,{min:1,max:16,step:1,value:u,onChange:(e,r)=>p(r)})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Softness",de("span",{style:{float:"right"},children:[m,"px"]})]}),le(Ts,{min:0,max:6,step:.5,value:m,onChange:(e,r)=>f(r)})]})]})]}),de(h,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(pn,{label:"Drop shadow",checked:b,onChange:e=>v(e.target.checked)}),b&&de(k,{spacing:1.5,sx:{mt:1.5},children:[de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Distance",de("span",{style:{float:"right"},children:[y,"px"]})]}),le(Ts,{min:1,max:24,step:1,value:y,onChange:(e,r)=>S(r)})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Blur",de("span",{style:{float:"right"},children:[B,"px"]})]}),le(Ts,{min:0,max:24,step:1,value:B,onChange:(e,r)=>w(r)})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Opacity",de("span",{style:{float:"right"},children:[C,"%"]})]}),le(Ts,{min:10,max:100,step:5,value:C,onChange:(e,r)=>T(r)})]})]})]})]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),de(k,{spacing:2,children:[de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font size",de("span",{style:{float:"right"},children:[z,"px"]})]}),le(Ts,{min:32,max:160,step:4,value:z,onChange:(e,r)=>A(r)})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font weight",le("span",{style:{float:"right"},children:I})]}),le(Ts,{min:400,max:900,step:100,value:I,onChange:(e,r)=>W(r)})]}),de("div",{children:[de(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Letter spacing",de("span",{style:{float:"right"},children:[R,"px"]})]}),le(Ts,{min:-2,max:20,step:1,value:R,onChange:(e,r)=>D(r)})]})]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PREVIEW BACKGROUND"}),le(k,{direction:"row",spacing:1,children:Sm.map(e=>le(km,{label:e.label,selected:l===e.value,onClick:()=>s(e.value)},e.value))}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Showcase-only — doesn't affect the emitted code."})]})]})}),le(bo,{value:1,children:de(k,{spacing:2,sx:{p:3,maxWidth:560},children:[de(ga,{style:{color:"var(--Text-Quiet)"},children:["BevelText uses the same Highlight / Lowlight token pair as button bevels, which target the WCAG 2.1 large-text minimum (3:1). Bevel text is decorative display — the SVG sets"," ",le("code",{children:'role="img"'})," and ",le("code",{children:"aria-label"})," to the rendered string so screen readers announce it as a labeled image, not a stream of glyphs."]}),le(oa,{color:"quiet",children:"Keep the rendered glyph height above ~24px when the bevel is on — at smaller sizes the highlight / lowlight stripes optically reduce the legible stroke width and the 3:1 contrast no longer feels comfortable."})]})})]})})})]})]})}const Cm={outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},Tm={opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"};function zm(e={}){const{selectedBg:r,selectedText:t,selectedHover:a,selectedPressed:i,muiPrefix:o}=e,n=o?"&.Mui-disabled":"&:disabled",l=o?"&.Mui-focusVisible":"&:focus-visible",s={"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},[l]:Cm,[n]:{...Tm,color:"var(--Quiet)"}};return r?{...s,"&.Mui-selected":{backgroundColor:r,...t?{color:t}:{},"&:hover":{backgroundColor:a||"var(--Hover)"},"&:active":{backgroundColor:i||"var(--Pressed)"}}}:s}function Am({open:e,onClose:t,items:a=[],onItemClick:i,width:o=280,variant:n="temporary",header:l,footer:s,sx:d={},...c}){const[u,m]=r(null),[f,g]=r({}),x=(e,r)=>{m(r),i?.(e),"temporary"===n&&t?.()},b="permanent"===n?"permanent":"standard"===n?"standard":"temporary",v=de(h,{sx:{display:"flex",flexDirection:"column",height:"100%",backgroundColor:"var(--Container)",color:"var(--Text)"},children:[l&&le(h,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:"string"==typeof l?le(w,{variant:"h6",sx:{fontWeight:700},children:l}):l}),le(Z,{sx:{flex:1,overflow:"auto",py:1},children:a.map((e,r)=>{const t=u===r,a=e.submenu&&e.submenu.length>0,i=f[r];return de(h,{children:[le(B,{title:e.tooltip||"",placement:"right",children:le(q,{disablePadding:!0,children:de(J,{onClick:()=>{a?(e=>{g(r=>({...r,[e]:!r[e]}))})(r):x(e,r)},selected:t&&!a,sx:{backgroundColor:t&&!a?"var(--Buttons-Primary-Button)":"transparent",color:t&&!a?"var(--Buttons-Primary-Text)":"var(--Text)",...zm({muiPrefix:!0,selectedBg:"var(--Buttons-Primary-Button)",selectedText:"var(--Buttons-Primary-Text)",selectedHover:"var(--Buttons-Primary-Hover)",selectedPressed:"var(--Buttons-Primary-Pressed)"}),transition:"all 0.2s ease-in-out"},children:[e.icon&&le(K,{sx:{color:t&&!a?"var(--Buttons-Primary-Text)":"var(--Icons-Primary)",minWidth:40},children:e.badge?le(p,{badgeContent:e.badge,variant:"error",children:e.icon}):e.icon}),le($,{primary:e.label,primaryTypographyProps:{variant:"body2",fontWeight:t&&!a?600:500}}),a&&le(h,{sx:{ml:1},children:le(i?Vr:be,{})})]})})}),a&&le(_,{in:i,timeout:"auto",unmountOnExit:!0,children:le(Z,{component:"div",disablePadding:!0,children:e.submenu.map((e,r)=>le(q,{disablePadding:!0,children:de(J,{onClick:()=>x(e,r),sx:{pl:4,backgroundColor:"transparent",color:"var(--Text)",...zm({muiPrefix:!0,selectedBg:"var(--Buttons-Primary-Button)",selectedText:"var(--Buttons-Primary-Text)",selectedHover:"var(--Buttons-Primary-Hover)",selectedPressed:"var(--Buttons-Primary-Pressed)"})},children:[e.icon&&le(K,{sx:{color:"var(--Icons-Primary)",minWidth:40},children:e.icon}),le($,{primary:e.label})]})},r))})}),e.divider&&le(ee,{sx:{my:1,borderColor:"var(--Border-Variant)"}})]},r)})}),s&&le(h,{sx:{borderTop:"1px solid var(--Border-Variant)",p:2},children:"string"==typeof s?le(w,{variant:"caption",sx:{color:"var(--Text-Quiet)"},children:s}):s})]});return"permanent"===n?le(h,{sx:{width:o,flexShrink:0,...d},children:v}):le(re,{variant:b,open:e,onClose:t,PaperProps:{sx:{width:o,backgroundColor:"var(--Container)",color:"var(--Text)",...d}},...c,children:v})}function Im({layout:e="side",navItems:t=[{label:"Home",icon:le(ye,{}),path:"/"},{label:"About",icon:le(We,{}),path:"/about"},{label:"Settings",icon:le(ke,{}),path:"/settings"},{label:"Help",icon:le(st,{}),path:"/help"}],title:a="My App",children:i,onLayoutChange:o,onNavigate:n,sx:l={},...s}){const d=te(),c=ae(d.breakpoints.down("md"));ae(d.breakpoints.down("lg"));const[u,p]=r(!1),[m,f]=r(!1),g=c?"top":e,x=({compact:e=!1})=>le(Z,{sx:{py:1},children:t.map((r,t)=>le(B,{title:e?r.label:"",placement:"right",children:de(J,{onClick:()=>{n?.(r),p(!1)},sx:{color:"var(--Text)",...zm({muiPrefix:!0}),transition:"all 0.2s ease-in-out",justifyContent:e?"center":"flex-start",px:e?1:2},children:[le(K,{sx:{color:"var(--Icons-Primary)",minWidth:e?"auto":40,mr:e?0:1},children:r.icon}),!e&&le($,{primary:r.label})]})},t))});return de(h,{sx:{minHeight:"100vh",backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",flexDirection:"column",...l},...s,children:[le(ie,{position:"static",sx:{backgroundColor:"var(--Header)",color:"var(--Text)",boxShadow:"0 1px 3px rgba(0,0,0,0.12)",borderBottom:"1px solid var(--Border-Variant)"},children:de(oe,{children:[c&&"rail"!==g&&le(Ri,{variant:"ghost",onClick:()=>p(!u),"aria-label":u?"Close navigation":"Open navigation",sx:{mr:2},children:le(u?Rr:Wr,{})}),le(w,{variant:"h6",sx:{flex:1,fontWeight:700},children:a}),!c&&o&&de(ne,{value:e,exclusive:!0,onChange:(e,r)=>{r&&o(r)},size:"small",sx:{"& .MuiToggleButton-root":{color:"var(--Text)",border:"1px solid var(--Border)","&.Mui-selected":{backgroundColor:"var(--Button-Primary-Button)",color:"#fff",borderColor:"var(--Button-Primary-Button)"}}},children:[le(A,{value:"side","aria-label":"side nav",children:"☰ Side"}),le(A,{value:"rail","aria-label":"rail nav",children:"⫷ Rail"}),le(A,{value:"side-rail","aria-label":"side-rail nav",children:"☰⫷ Both"})]})]})}),de(h,{sx:{display:"flex",flex:1},children:[("rail"===g||"side-rail"===g)&&!c&&le(h,{sx:{width:80,backgroundColor:"var(--Container)",borderRight:"1px solid var(--Border-Variant)",display:"flex",flexDirection:"column",py:2},children:le(x,{compact:!0})}),("side"===g||"side-rail"===g)&&!c&&de(h,{sx:{width:m?80:280,backgroundColor:"var(--Container)",borderRight:"1px solid var(--Border-Variant)",transition:"width 0.3s ease-in-out",display:"flex",flexDirection:"column"},children:[de(h,{sx:{p:2,display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid var(--Border-Variant)",minHeight:64},children:[!m&&le(w,{variant:"h6",sx:{fontWeight:700,color:"var(--Text)"},children:"Menu"}),le(Ri,{size:"small",variant:"ghost",onClick:()=>f(!m),"aria-label":m?"Expand navigation":"Collapse navigation",sx:{color:"var(--Icons-Primary)"},children:m?"›":"‹"})]}),le(x,{compact:m})]}),c&&de(re,{anchor:"left",open:u,onClose:()=>p(!1),sx:{"& .MuiDrawer-paper":{backgroundColor:"var(--Container)",width:280}},children:[le(h,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:le(w,{variant:"h6",sx:{fontWeight:700},children:"Menu"})}),le(x,{compact:!1})]}),le(h,{sx:{flex:1,overflow:"auto",backgroundColor:"var(--Background)"},children:le(L,{maxWidth:"lg",sx:{py:4},children:i})})]})]})}const Wm={small:{summaryPadding:"var(--Sizing-Half) var(--Sizing-Half) var(--Sizing-Half) var(--Sizing-1-and-Half)",gap:"var(--Sizing-Half)",detailsPy:"var(--Sizing-1-and-Half)",detailsPx:"var(--Sizing-1-and-Half)",iconSize:"small"},medium:{summaryPadding:"var(--Sizing-1) var(--Sizing-1) var(--Sizing-1) var(--Sizing-2)",gap:"var(--Sizing-1)",detailsPy:"var(--Sizing-2)",detailsPx:"var(--Sizing-2)",iconSize:"medium"},large:{summaryPadding:"var(--Sizing-1-and-Half) var(--Sizing-1-and-Half) var(--Sizing-1-and-Half) var(--Sizing-2-and-Half)",gap:"var(--Sizing-1-and-Half)",detailsPy:"var(--Sizing-2-and-Half)",detailsPx:"var(--Sizing-2-and-Half)",iconSize:"large"}},Rm=l({variant:"solid",color:"default",size:"medium",spacing:0}),Dm=l({expanded:!1,toggle:()=>{},disabled:!1,accordionId:""}),Pm="var(--Accordion-Radius, var(--Button-Radius))";function Fm({children:e,variant:r="solid",surface:t,color:a="default",size:i="medium",spacing:o=0,className:n="",sx:l={},...s}){const d="default"===a?"Default":(c=a).charAt(0).toUpperCase()+c.slice(1);var c;const u=0===o,p="default"===a?"Default":d,m=t||("dark"===r?"Surface-Dimmest":"light"===r?"Surface-Brightest":"Surface");return le(Rm.Provider,u?{value:{variant:r,color:a,size:i,spacing:o,dataTheme:p,dataSurface:m},children:le(h,{role:"presentation",className:"accordion-group accordion-group-connected accordion-group-"+r+" "+n,sx:{display:"flex",flexDirection:"column","& > .accordion-segment":{borderRadius:0,marginBottom:"-1px",boxShadow:"none"},"& > .accordion-segment .accordion-summary":{borderRadius:0},"& > .accordion-segment:first-of-type":{borderTopLeftRadius:Pm,borderTopRightRadius:Pm},"& > .accordion-segment:first-of-type .accordion-summary":{borderTopLeftRadius:Pm,borderTopRightRadius:Pm},"& > .accordion-segment:last-of-type":{borderBottomLeftRadius:Pm,borderBottomRightRadius:Pm,marginBottom:0},"& > .accordion-segment:last-of-type .accordion-summary:not(.accordion-summary-expanded)":{borderBottomLeftRadius:Pm,borderBottomRightRadius:Pm},...l},...s,children:e})}:{value:{variant:r,color:a,size:i,spacing:o,dataTheme:p,dataSurface:m},children:le(h,{role:"presentation",className:"accordion-group accordion-group-"+r+" accordion-group-spaced "+n,sx:{display:"flex",flexDirection:"column",gap:.5===o?"var(--Sizing-Half)":1===o?"var(--Sizing-1)":1.5===o?"var(--Sizing-1-and-Half)":2===o?"var(--Sizing-2)":8*o+"px",...l},...s,children:e})})}function Lm({children:e,expanded:t,defaultExpanded:a=!1,onChange:i,disabled:o=!1,className:l="",sx:s={},...d}){const[c,u]=r(a),p=void 0!==t,m=p?t:c,{dataTheme:f,dataSurface:g}=n(Rm),[x]=r(()=>"accordion-"+Math.random().toString(36).substring(2,9));return le(Dm.Provider,{value:{expanded:m,toggle:()=>{if(o)return;const e=!m;p||u(e),i?.(e)},disabled:o,accordionId:x},children:le(h,{className:"accordion-segment accordion"+(m?" accordion-expanded":"")+(o?" accordion-disabled":"")+" "+l,"data-theme":f,"data-surface":g,sx:{border:"1px solid var(--Border-Variant)",borderRadius:Pm,backgroundColor:"var(--Background)",overflow:"hidden",boxShadow:si,opacity:o?"var(--Disabled, 0.38)":1,...s},...d,children:e})})}const Hm={small:na,medium:da,large:ma},Mm={small:oa,medium:sa,large:pa};function Em({children:e,startDecorator:r,endDecorator:t,eyebrow:a,overline:i,secondary:o,expandIcon:l,className:s="",sx:d={},...c}){const{expanded:u,toggle:p,disabled:m,accordionId:f}=n(Dm),{size:g}=n(Rm),x=Wm[g]||Wm.medium,b=Hm[g]||Hm.medium,v=l||le(Qa,{size:x.iconSize,sx:{color:u?"var(--Text)":"var(--Quiet)",transition:"color 0.15s ease"},children:le(be,{})}),y={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block"};return de(h,{component:"button",role:"button","aria-expanded":u,"aria-controls":f+"-content",id:f+"-header",tabIndex:m?-1:0,onClick:p,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),p())},className:"accordion-summary"+(u?" accordion-summary-expanded":"")+" "+s,sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",width:"100%",gap:x.gap,padding:x.summaryPadding,border:"none",backgroundColor:"transparent",color:u?"var(--Text)":"var(--Quiet)",fontFamily:"inherit",cursor:m?"not-allowed":"pointer",textAlign:"left",transition:"color 0.2s ease, background-color 0.15s ease",borderRadius:u?Pm+" "+Pm+" 0 0":Pm,"&:hover":m?{}:{color:"var(--Text)",backgroundColor:"var(--Hover)","& .omni-icon":{color:"var(--Text)"}},"&:active":m?{}:{color:"var(--Text)",backgroundColor:"var(--Pressed)","& .omni-icon":{color:"var(--Text)"}},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"},...d},...c,children:[r&&le(h,{className:"accordion-summary-start",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:r}),de(h,{sx:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)"},children:[(a??i)&&le(wa,{style:{...y,color:"var(--Text-Quiet)"},children:a??i}),null!=e&&le(b,{style:{...y,color:"inherit"},children:e}),o&&le(oa,{style:{...y,color:"var(--Text-Quiet)"},children:o})]}),t&&le(h,{className:"accordion-summary-end",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:t}),le(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",transform:u?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.25s ease",flexShrink:0},children:v})]})}function Nm({children:e,className:r="",sx:t={},...a}){const{expanded:i,accordionId:o}=n(Dm),{size:l}=n(Rm),s=Wm[l]||Wm.medium,d=Mm[l]||Mm.medium;return i?le(h,{role:"region",id:o+"-content","aria-labelledby":o+"-header",className:"accordion-details "+r,sx:{padding:"0 "+s.detailsPx+" "+s.detailsPy+" "+s.detailsPx,color:"var(--Text)",fontFamily:"inherit",lineHeight:1.6,...t},...a,children:"string"==typeof e||"number"==typeof e?le(d,{children:e}):e}):null}const Om={1:{padLeft:0,togglePadLeft:0},2:{padLeft:24,togglePadLeft:4},3:{padLeft:48,togglePadLeft:0},4:{padLeft:72,togglePadLeft:0},5:{padLeft:88,togglePadLeft:4}},Qm={0:{padLeft:8},1:{padLeft:48},2:{padLeft:56,slotPadLeft:4},3:{padLeft:64,slotPadLeft:4},4:{padLeft:88,slotPadLeft:4},5:{padLeft:112},6:{padLeft:128}};function Vm({label:e,icon:r,level:t=0,toggle:a="none",onToggle:i,disabled:o=!1,size:n="small",className:l="",sx:s={},children:d,...c}){const u=6===t&&"none"!==a?"none":a,p="on"===u,m="none"!==u,f=m?Om[t]||{padLeft:0,togglePadLeft:0}:Qm[t]||Qm[0],g={paddingTop:"8px",paddingRight:"8px",paddingBottom:"8px",paddingLeft:(f.padLeft??8)+"px"};return de(h,{className:"tree-branch tree-branch-"+n+" tree-branch-level-"+t+" tree-branch-toggle-"+u+(o?" tree-branch-disabled":"")+(l?" "+l:""),sx:{width:"100%",...s},...c,children:[de(h,{component:"button",type:"button",role:"treeitem","aria-expanded":m?p:void 0,"aria-disabled":o||void 0,tabIndex:o?-1:0,onClick:e=>{o||m&&(e.stopPropagation(),i?.(p?"off":"on"))},disabled:o,sx:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px",width:"100%",minHeight:"24px",...g,border:"none",backgroundColor:"transparent",fontFamily:"inherit",color:"inherit",textAlign:"left",cursor:o?"not-allowed":"pointer",opacity:o?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.15s ease, color 0.15s ease","&:hover":o?{}:{backgroundColor:"var(--Hover)"},"&:active":o?{}:{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-2px"}},children:[m&&le(h,{className:"tree-branch-toggle",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,paddingLeft:(f.togglePadLeft??0)+"px"},children:le(h,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",transition:"transform 0.2s ease",transform:p?"rotate(-90deg)":"rotate(0deg)"},children:le(Qa,{size:"small",children:le(Ur,{})})})}),de(h,{className:"tree-branch-slot",sx:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px",flex:1,minWidth:0,...void 0!==f.slotPadLeft&&{paddingLeft:f.slotPadLeft+"px"}},children:[r&&le(h,{sx:{display:"inline-flex",alignItems:"center",flexShrink:0},children:le(Qa,{size:"small",children:r})}),null!=e&&le(na,{style:{color:"inherit",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block",flex:1,minWidth:0},children:e})]})]}),p&&d&&le(h,{role:"group",sx:{display:"flex",flexDirection:"column"},children:d})]})}const jm=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Gm=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Um=e=>le(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:e,flexShrink:0}}),Xm=[{id:"1",label:"Documents",icon:le(tt,{}),badge:Um("var(--Warning-Text, orange)"),children:[{id:"1-1",label:"Company",icon:le(dt,{}),badge:Um("var(--Warning-Text, orange)"),children:[{id:"1-1-1",label:"Invoice",icon:le(ut,{})},{id:"1-1-2",label:"Meeting notes",icon:le(ct,{})},{id:"1-1-3",label:"Tasks list",icon:le(ct,{})},{id:"1-1-4",label:"Equipment",icon:le(ut,{})},{id:"1-1-5",label:"Video conference",icon:le(ht,{})}]},{id:"1-2",label:"Personal",icon:le(tt,{})},{id:"1-3",label:"Group photo",icon:le(jr,{})}]},{id:"2",label:"Bookmarked",icon:le(Kr,{}),children:[{id:"2-1",label:"Favourites",icon:le(ct,{})}]},{id:"3",label:"History",icon:le(tt,{})},{id:"4",label:"Trash",icon:le(Se,{}),disabled:!0}],Ym=JSON.stringify(rh,null,2);function Zm({ratio:e,threshold:r}){if(!e)return le(ga,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=r;return de(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[de(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:t?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:[e,":1"]}),le(ga,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function qm({label:e,ratio:r,threshold:t,note:a}){return de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(h,{sx:{flex:1},children:[le(oa,{style:{color:"var(--Text)"},children:e}),a&&le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:a})]}),le(Zm,{ratio:r,threshold:t})]})}function Jm({label:e,selected:r,onClick:t}){return le(Wi,{selected:r,variant:r?"default":"default-outline",size:"small",onClick:t,children:e})}function Km({color:e,selected:r,onClick:t}){const a=jm(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+a,"aria-pressed":r,title:a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+a+"-Button)",border:r?"2px solid var(--Text)":"1px solid var(--Border)",outline:r?"2px solid var(--Focus-Visible)":"2px solid transparent",outlineOffset:"1px",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.1s ease","&:hover":{transform:"scale(1.1)"}},children:r&&le(ue,{sx:{fontSize:16,color:"var(--Buttons-"+a+"-Text)",pointerEvents:"none"}})})}function $m({value:e,onChange:t}){const[a,i]=r(e),[o,n]=r(null);return de(h,{children:[de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:1},children:[le(wa,{style:{color:"var(--Text-Quiet)"},children:"TREE DATA (JSON)"}),le(Wi,{variant:"ghost",size:"small",onClick:()=>{i(Ym),n(null),t(rh)},children:"Reset"})]}),le(h,{component:"textarea",value:a,onChange:e=>{i(e.target.value);try{const r=JSON.parse(e.target.value);n(null),t(r)}catch(e){n(e.message)}},spellCheck:!1,rows:10,sx:{width:"100%",fontFamily:"monospace",fontSize:"11px",backgroundColor:"#1e1e1e",color:o?"#f87171":"#e5e7eb",border:"1px solid "+(o?"#f87171":"#333"),borderRadius:"6px",padding:"10px",resize:"vertical",outline:"none",boxSizing:"border-box",lineHeight:1.5,"&:focus":{borderColor:"var(--Focus-Visible)"}}}),o&&de(ga,{style:{color:"#f87171",display:"block",marginTop:4},children:["JSON error: ",o]})]})}function _m(){const[e,t]=r("solid"),[n,l]=r("primary"),[s,d]=r("default"),[c,u]=r("slide"),[p,m]=r("single"),[f,g]=r(!1),[x,b]=r(!1),[v,y]=r(!1),[S,B]=r(rh),[w,T]=r(null),[z,A]=r("Surface"),[I,W]=r({}),R=a(null),D=jm(n),P=v?Xm:S,F=i((e,r)=>e&&getComputedStyle(e).getPropertyValue(r).trim()||null,[]);o(()=>{const e=setTimeout(()=>{const e=R.current;W({text:F(e,"--Text"),textQuiet:F(e,"--Text-Quiet"),background:F(e,"--Background"),border:F(e,"--Border"),focusVisible:F(e,"--Focus-Visible"),activeBtn:F(e,"--Buttons-"+D+"-Button"),activeBorder:F(e,"--Buttons-"+D+"-Border")})},50);return()=>clearTimeout(e)},[n,w,F,D]);return de(h,{sx:{pb:8},children:[le(Zt,{children:"Tree View"}),de(C,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[de(C,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(vo,{ref:R,theme:w,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(eh,{color:n,variant:e,density:s,animation:c,selectionMode:p,checkboxSelection:f,disableSelection:x,items:P,defaultExpandedItems:["1","1-1","2"]})})}),le(Ko,{code:(()=>{const r=["<OmniTreeView"];return"default"!==n&&r.push(' color="'+n+'"'),"default"!==e&&r.push(' variant="'+e+'"'),"default"!==s&&r.push(' density="'+s+'"'),"slide"!==c&&r.push(' animation="'+c+'"'),"single"!==p&&r.push(' selectionMode="'+p+'"'),f&&r.push(" checkboxSelection"),x&&r.push(" disableSelection"),r.push(" items={treeData}"),r.push("/>"),r.join("\n")})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(C,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:de(fo,{defaultValue:0,variant:"standard",color:"primary",children:[de(go,{children:[le(xo,{children:"Playground"}),le(xo,{children:"Accessibility"})]}),le(bo,{value:0,children:de(h,{sx:{p:3},children:[le(h,{sx:{mb:3},children:le(Bo,{theme:w,onThemeChange:T,surface:z,onSurfaceChange:A})}),de(h,{children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(k,{direction:"row",spacing:1,children:[le(Jm,{label:"Solid",selected:"solid"===e,onClick:()=>t("solid")}),le(Jm,{label:"Light",selected:"light"===e,onClick:()=>t("light")})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(k,{spacing:1.5,children:Gm.map(e=>de(h,{children:[le(ga,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(k,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Km,{color:e,selected:n===e,onClick:l},e))})]},e.label))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DENSITY"}),de(k,{direction:"row",spacing:1,children:[le(Jm,{label:"Compact",selected:"compact"===s,onClick:()=>d("compact")}),le(Jm,{label:"Default",selected:"default"===s,onClick:()=>d("default")})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANIMATION"}),le(k,{direction:"row",spacing:1,children:["none","slide","spring"].map(e=>le(Jm,{label:jm(e),selected:c===e,onClick:()=>u(e)},e))})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SELECTION MODE"}),de(k,{direction:"row",spacing:1,children:[le(Jm,{label:"Single",selected:"single"===p,onClick:()=>m("single")}),le(Jm,{label:"Multi",selected:"multi"===p,onClick:()=>m("multi")})]})]}),de(h,{sx:{mt:3},children:[le(wa,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Show Icons"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Load sample data with icons and badges"})]}),le(hn,{checked:v,onChange:e=>y(e.target.checked),size:"small","aria-label":"Show icons"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Checkbox Selection"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show checkboxes for each item"})]}),le(hn,{checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Checkbox selection"})]}),de(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[de(h,{children:[le(ya,{children:"Disable Selection"}),le(ga,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Items are not selectable"})]}),le(hn,{checked:x,onChange:e=>b(e.target.checked),size:"small","aria-label":"Disable selection"})]})]}),!v&&le(h,{sx:{mt:3},children:le($m,{value:Ym,onChange:B})})]})}),le(bo,{value:1,children:le(h,{sx:{p:3},children:de(k,{spacing:3,children:[de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(qm,{label:"Resting: var(--Text-Quiet) vs. background",ratio:rn(I.textQuiet,I.background),threshold:4.5,note:"Unselected items use Text-Quiet"}),le(qm,{label:"Hover: var(--Text) vs. background",ratio:rn(I.text,I.background),threshold:4.5,note:"Hovered items use var(--Text)"}),le(qm,{label:"Active (solid): var(--Text) vs. var(--Buttons-"+D+"-Button)",ratio:rn(I.text,I.activeBtn),threshold:4.5,note:"Selected item with solid fill"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(qm,{label:"var(--Focus-Visible) vs. background",ratio:rn(I.focusVisible,I.background),threshold:3,note:"outline: 2px solid var(--Focus-Visible); outline-offset: -2px"})]}),de(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(Jt,{children:"ARIA and Semantics"}),le(k,{spacing:0,children:[{label:"Role",value:'role="tree" on root, role="treeitem" on each node'},{label:"Expansion",value:'aria-expanded="true/false" on parent items'},{label:"Selection",value:"aria-selected on selected items"},{label:"Disabled",value:'aria-disabled="true" on disabled items'},{label:"Icons",value:"Icon elements are aria-hidden — label carries the accessible name"},{label:"Keyboard",value:"Arrow keys navigate, Enter/Space selects, * expands all siblings"}].map(({label:e,value:r})=>de(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(oa,{children:[e,":"]}),le(ga,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:r})]},e))})]})]})})})]})})})]})]})}function ef(e,r){if(document.getElementById(r))return;const t=document.createElement("link");t.rel="stylesheet",t.href=e,t.id=r,document.head.appendChild(t)}const rf=[{value:"desktop",label:"Desktop",note:"32px touch targets (WCAG)"},{value:"ios-mobile",label:"iOS Mobile",note:"44px touch targets (HIG)"},{value:"ios-tablet",label:"iOS Tablet",note:"44px touch targets (HIG)"},{value:"android",label:"Android",note:"48px touch targets (M3)"}],tf={desktop:"32px","ios-mobile":"44px","ios-tablet":"44px",android:"48px"};function af(){const{mode:e,switchMode:t}=function(e="light"){const[t,a]=r(e);return o(()=>{ef("/styles/foundation.css","css-foundation"),ef("/styles/core.css","css-core"),ef("/styles/Light-Mode.css","css-mode"),ef("/styles/base.css","css-base"),ef("/styles/typography-tokens.css","css-typography-tokens")},[]),{mode:t,switchMode:e=>{const r=document.getElementById("css-mode");r&&(r.href="dark"===e?"/styles/Dark-Mode.css":"/styles/Light-Mode.css"),a(e),localStorage.setItem("themeMode",e)}}}("light"),[a,i]=r(!1),[n,l]=r("desktop");o(()=>{const e=localStorage.getItem("dino-platform")||"desktop",r=localStorage.getItem("themeMode")||"light";l(e),document.documentElement.style.setProperty("--Button-Height",tf[e]||"32px"),"dark"===r&&t("dark")},[]);const s=e=>{l(e),localStorage.setItem("dino-platform",e),document.documentElement.style.setProperty("--Button-Height",tf[e]||"32px")};return de(se,{children:[le(h,{onClick:()=>i(!0),role:"button","aria-label":"Open settings",sx:{position:"fixed",bottom:24,right:24,width:52,height:52,borderRadius:"50%",backgroundColor:"var(--Buttons-Tertiary-Button)",color:"var(--Buttons-Tertiary-Text)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",boxShadow:"0 4px 12px rgba(0,0,0,0.15)",zIndex:999,transition:"transform 0.15s ease, box-shadow 0.15s ease","&:hover":{transform:"scale(1.08)",boxShadow:"0 6px 16px rgba(0,0,0,0.2)"}},children:le(Ar,{sx:{fontSize:24}})}),le(Gu,{anchor:"right",open:a,onClose:()=>i(!1),hideBackdrop:!0,size:"small",sx:{width:320,zIndex:99999999},children:de(h,{sx:{p:3,height:"100%",display:"flex",flexDirection:"column"},children:[de(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:2},children:[le(Jt,{children:"Settings"}),le(Wi,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>i(!1),"aria-label":"Close settings",children:le(Ir,{fontSize:"small"})})]}),le(ee,{sx:{mb:3,borderColor:"var(--Border)"}}),le(h,{sx:{flex:1,overflowY:"auto"},children:de(k,{spacing:4,children:[de(h,{children:[le(wa,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"MODE"}),de(k,{direction:"row",spacing:1,children:[le(Wi,{variant:"light"===e?"primary":"primary-outline",size:"small",onClick:()=>t("light"),sx:{flex:1},children:"Light"}),le(Wi,{variant:"dark"===e?"primary":"primary-outline",size:"small",onClick:()=>t("dark"),sx:{flex:1},children:"Dark"})]})]}),de(h,{children:[le(wa,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"PLATFORM"}),le(k,{spacing:1,children:rf.map(({value:e,label:r,note:t})=>{const a=n===e;return de(h,{onClick:()=>s(e),sx:{p:1.5,borderRadius:"var(--Style-Border-Radius)",cursor:"pointer",border:a?"2px solid var(--Buttons-Primary-Button)":"1px solid var(--Border)",backgroundColor:a?"var(--Background)":"transparent",display:"flex",justifyContent:"space-between",alignItems:"center",transition:"all 0.15s ease","&:hover":{backgroundColor:"var(--Hover)"}},children:[de(h,{children:[le(oa,{style:{color:a?"var(--Buttons-Primary-Button)":"var(--Text)",fontWeight:a?600:400},children:r}),le(ga,{style:{color:"var(--Text)",opacity:.7},children:t})]}),a&&le(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Buttons-Primary-Button)",flexShrink:0}})]},e)})})]})]})}),le(ee,{sx:{my:3,borderColor:"var(--Border)"}}),le(Wi,{variant:"primary-outline",size:"small",onClick:()=>{s("desktop"),t("light")},sx:{width:"100%"},children:"Reset to Defaults"})]})})]})}const of=e=>(e||[]).map(e=>{const r="number"==typeof e?e:Number(e?.value);return Number.isFinite(r)?r:0}),nf=e=>(e||[]).map((e,r)=>"number"==typeof e?String(r+1):e?.label??String(r+1));function lf(e,{fromZero:r=!0}={}){if(!e.length)return{min:0,max:1};let t=Math.min(...e),a=Math.max(...e);return r&&(t=Math.min(0,t)),a===t&&(a=t+1),{min:t,max:a}}const sf=(e,{min:r,max:t},a,i)=>a+i-(e-r)/(t-r)*i;function df(e,r,t,{inset:a=0}={}){if(e<=0)return[];if(1===e)return[r+t/2];const i=(t-2*a)/(e-1);return Array.from({length:e},(e,t)=>r+a+t*i)}function cf(e,r,t,{gapRatio:a=.4}={}){if(e<=0)return{centres:[],bandWidth:0};const i=t/e,o=i*(1-a);return{centres:Array.from({length:e},(e,t)=>r+i*t+i/2),bandWidth:o}}const uf=e=>e.length?e.map((e,r)=>`${r?"L":"M"}${e.x} ${e.y}`).join(" "):"";function hf(e,{tension:r=0}={}){if(e.length<2)return uf(e);const t=(1-r)/6;let a=`M${e[0].x} ${e[0].y}`;for(let r=0;r<e.length-1;r++){const i=e[r-1]||e[r],o=e[r],n=e[r+1],l=e[r+2]||n,s={x:o.x+(n.x-i.x)*t,y:o.y+(n.y-i.y)*t},d={x:n.x-(l.x-o.x)*t,y:n.y-(l.y-o.y)*t};a+=` C${s.x} ${s.y} ${d.x} ${d.y} ${n.x} ${n.y}`}return a}const pf=(e,r,t)=>e&&r.length?`${e} L${r[r.length-1].x} ${t} L${r[0].x} ${t} Z`:"";function mf(e,r,t,a,i,o){const n=o-i;if(n>=2*Math.PI-1e-9){const o=i+Math.PI;return mf(e,r,t,a,i,o)+" "+mf(e,r,t,a,o,i+2*Math.PI)}const l=(t,a)=>({x:e+t*Math.sin(a),y:r-t*Math.cos(a)}),s=n>Math.PI?1:0,d=l(a,i),c=l(a,o);if(t<=0)return`M${e} ${r} L${d.x} ${d.y} A${a} ${a} 0 ${s} 1 ${c.x} ${c.y} Z`;const u=l(t,o),h=l(t,i);return`M${d.x} ${d.y} A${a} ${a} 0 ${s} 1 ${c.x} ${c.y} L${u.x} ${u.y} A${t} ${t} 0 ${s} 0 ${h.x} ${h.y} Z`}function ff(e,{startAngle:r=0}={}){const t=e.map(e=>e>0?e:0),a=t.reduce((e,r)=>e+r,0),i=e.filter(e=>e<=0).length;if(a<=0)return{slices:[],total:0,dropped:i};let o=r;return{slices:t.map(e=>{const r=e/a*Math.PI*2,t={start:o,end:o+r,value:e,fraction:e/a};return o+=r,t}),total:a,dropped:i}}function gf({min:e,max:r},t=4){if(t<1)return[];const a=(r-e)/t,i=Math.pow(10,Math.floor(Math.log10(Math.abs(a)||1))),o=[1,2,2.5,5,10].map(e=>e*i).find(e=>e>=a)??10*i,n=[];for(let t=Math.ceil(e/o)*o;t<=r+1e-9;t+=o)n.push(Number(t.toFixed(10)));return n}var xf=Object.freeze({__proto__:null,arcPath:mf,areaPath:pf,bands:df,extent:lf,linePath:uf,scaleY:sf,sliceAngles:ff,slots:cf,smoothPath:hf,ticks:gf,toLabels:nf,toNumbers:of});const bf={fill:"var(--Icons-Primary)",track:"var(--Border-Variant)",line:"var(--Border-Variant)",quietLabel:"var(--Quiet)",label:"var(--Text)",gradient:"var(--Icons-Primary-Variant)"},vf=["Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error"],yf={fontFamily:"var(--Label-Small-Font-Family)",fontSize:"var(--Label-Small-Font-Size)",fontWeight:"var(--Label-Small-Font-Weight)",letterSpacing:"var(--Label-Small-Letter-Spacing)"},Sf={position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0 0 0 0)",clipPath:"inset(50%)",whiteSpace:"nowrap",border:0};function kf({caption:e,labels:r,values:t,valueHeader:a="Value"}){return de(h,{component:"table",sx:Sf,children:[le("caption",{children:e}),le("thead",{children:de("tr",{children:[le("th",{scope:"col",children:"Category"}),le("th",{scope:"col",children:a})]})}),le("tbody",{children:t.map((e,t)=>de("tr",{children:[le("th",{scope:"row",children:r[t]}),le("td",{children:e})]},t))})]})}const Bf="var(--Motion-Duration-Slow, 300ms) var(--Motion-Easing-Enter, cubic-bezier(0, 0, 0, 1))",wf="var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))";function Cf(r){const[t,a]=e.useState(-1),i=e.useCallback(e=>({onMouseEnter:()=>a(e),onMouseLeave:()=>a(r=>r===e?-1:r),onFocus:()=>a(e),onBlur:()=>a(r=>r===e?-1:r)}),[]);return e.useEffect(()=>{a(e=>e>=r?-1:e)},[r]),{active:t,setActive:a,handlers:i}}function Tf({count:e,width:r,centres:t,bandWidth:a,labels:i,values:o,handlers:n}){return e?le(h,{sx:{position:"absolute",inset:0,display:"block",pointerEvents:"none"},children:Array.from({length:e},(e,l)=>le(h,{component:"button",type:"button","aria-label":`${i[l]}: ${o[l]}`,...n(l),sx:{position:"absolute",top:0,height:"100%",left:(t[l]-a/2)/r*100+"%",width:a/r*100+"%",padding:0,margin:0,border:0,background:"transparent",cursor:"pointer",pointerEvents:"auto","&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"-2px",borderRadius:"4px"}}},l))}):null}function zf({x:e,y:r,text:t,width:a,tokens:i}){if(null==t)return null;const o=Math.max(28,8*String(t).length+14),n=Math.min(Math.max(e,o/2+2),a-o/2-2),l=r-26>=2?r-26:r+6;return de("g",{pointerEvents:"none",children:[le("rect",{x:n-o/2,y:l,width:o,height:20,rx:6,fill:i.fill}),le("text",{x:n,y:l+14,textAnchor:"middle",fill:"var(--Icons-On-Primary)",style:{fontFamily:"var(--Label-Small-Font-Family)",fontSize:"var(--Label-Small-Font-Size)",fontWeight:"var(--Label-Small-Font-Weight)"},children:t})]})}function Af({data:e=[],showTrack:t=!0,rounded:a=!0,showValues:i=!1,showLabels:n=!0,animate:l=!0,interactive:s=!0,height:d=200,gapRatio:c=.4,label:u,className:p="",sx:m={},...f}){const g=of(e),x=nf(e),{active:b,handlers:v}=Cf(g.length),[y,S]=r(!l);o(()=>{if(!l)return;const e=requestAnimationFrame(()=>S(!0));return()=>cancelAnimationFrame(e)},[l]);const k=320,B=i?20:8,w=n?22:8,C=Math.max(0,d-B-w),T=lf(g,{fromZero:!0}),{centres:z,bandWidth:A}=cf(g.length,0,k,{gapRatio:c}),I=B+C,W=a?A/2:0,R=g.length?k/g.length:0;return de(h,{component:"figure",className:"bar-chart "+p,sx:{display:"block",width:"100%",m:0,position:"relative",...m},...f,children:[de("svg",{viewBox:`0 0 320 ${d}`,width:"100%",height:d,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[s&&b>=0&&le("rect",{x:z[b]-R/2,y:0,width:R,height:d,fill:"var(--Hover)",rx:6}),g.map((e,r)=>{const a=z[r]-A/2,i=sf(e,T,B,C),o=Math.max(0,I-i);return de("g",{children:[t&&le("rect",{x:a,y:B,width:A,height:C,rx:W,ry:W,fill:bf.track}),o>0&&le("rect",{x:a,y:i,width:A,height:o,rx:Math.min(W,o/2),ry:Math.min(W,o/2),fill:bf.fill,style:{transformBox:"fill-box",transformOrigin:"bottom",transform:y?"scaleY(1)":"scaleY(0)",transition:`transform ${Bf}`}})]},r)}),i&&g.map((e,r)=>le("text",{x:z[r],y:sf(e,T,B,C)-6,textAnchor:"middle",fill:bf.label,...yf,children:e},"v"+r)),n&&x.map((e,r)=>le("text",{x:z[r],y:d-6,textAnchor:"middle",fill:bf.quietLabel,...yf,children:e},"l"+r)),s&&b>=0&&!i&&le(zf,{x:z[b],y:sf(g[b],T,B,C),text:g[b],width:k,tokens:bf})]}),s&&le(Tf,{count:g.length,width:k,centres:z,bandWidth:R,labels:x,values:g,handlers:v}),le(kf,{caption:u||`Bar chart, ${g.length} values`,labels:x,values:g})]})}function If({data:e=[],curve:a="smooth",gradient:i=!0,fromZero:n=!1,showGrid:l=!1,showLabels:s=!1,animate:d=!0,interactive:c=!0,height:u=200,strokeWidth:p=3,tension:m=0,label:f,className:g="",sx:x={},...b}){const v="lc-"+t().replace(/:/g,""),y=of(e),S=nf(e),{active:k,handlers:B}=Cf(y.length),[w,C]=r(!d);o(()=>{if(!d)return;const e=requestAnimationFrame(()=>C(!0));return()=>cancelAnimationFrame(e)},[d]);const T=320,z=s?22:8,A=Math.max(0,u-8-z),I=lf(y,{fromZero:n}),W=df(y.length,0,T,{inset:p}),R=y.map((e,r)=>({x:W[r],y:sf(e,I,8,A)})),D="straight"===a?uf(R):hf(R,{tension:m}),P=8+A;return de(h,{component:"figure",className:"line-chart "+g,sx:{display:"block",width:"100%",m:0,position:"relative",...x},...b,children:[de("svg",{viewBox:`0 0 320 ${u}`,width:"100%",height:u,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[i&&le("defs",{children:de("linearGradient",{id:v,x1:"0",y1:"0",x2:"0",y2:"1",children:[le("stop",{offset:"0%",stopColor:bf.gradient,stopOpacity:"1"}),le("stop",{offset:"100%",stopColor:bf.gradient,stopOpacity:"0"})]})}),l&&gf(I,4).map(e=>le("line",{x1:0,x2:T,y1:sf(e,I,8,A),y2:sf(e,I,8,A),stroke:bf.line,strokeWidth:"1"},e)),i&&R.length>1&&le("path",{d:pf(D,R,P),fill:`url(#${v})`,style:{opacity:w?1:0,transition:`opacity ${Bf}`}}),R.length>1&&le("path",{d:D,fill:"none",stroke:bf.fill,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",pathLength:"1",style:{strokeDasharray:1,strokeDashoffset:w?0:1,transition:`stroke-dashoffset ${Bf}`}}),1===R.length&&le("circle",{cx:R[0].x,cy:R[0].y,r:p,fill:bf.fill}),c&&k>=0&&de(se,{children:[le("line",{x1:W[k],x2:W[k],y1:8,y2:P,stroke:bf.line,strokeWidth:"1"}),le("circle",{cx:R[k].x,cy:R[k].y,r:p+1,fill:bf.fill,stroke:"var(--Background)",strokeWidth:"2"}),le(zf,{x:R[k].x,y:R[k].y,text:y[k],width:T,tokens:bf})]}),s&&S.map((e,r)=>le("text",{x:W[r],y:u-6,textAnchor:"middle",fill:bf.quietLabel,...yf,children:e},r))]}),c&&le(Tf,{count:y.length,width:T,centres:W,bandWidth:y.length?T/y.length:0,labels:S,values:y,handlers:B}),le(kf,{caption:f||`Line chart, ${y.length} points`,labels:S,values:y})]})}function Wf({data:e=[],donut:t=!1,donutRatio:a=.6,colors:i=vf,separatorWidth:n=2,size:l=200,showLabels:s=!1,animate:d=!0,interactive:c=!0,label:u,className:p="",sx:m={},...f}){const g=of(e),x=nf(e),{slices:b,total:v,dropped:y}=ff(g),{active:S,handlers:k}=Cf(g.length),[B,w]=r(!d);o(()=>{if(!d)return;const e=requestAnimationFrame(()=>w(!0));return()=>cancelAnimationFrame(e)},[d]);const C=l/2,T=l/2,z=l/2-1,A=t?z*a:0,I=e=>{return{fill:`var(--Icons-${r=i[e%i.length]})`,onFill:`var(--Icons-On-${r})`};var r};return de(h,{component:"figure",className:"pie-chart "+p,sx:{display:"block",m:0,position:"relative",...m},...f,children:[de("svg",{viewBox:`0 0 ${l} ${l}`,width:l,height:l,focusable:"false","aria-hidden":"true",children:[b.map((e,r)=>{const t=(e.start+e.end)/2,a=c&&S===r?4:0;return le("path",{d:mf(C,T,A,z,e.start,e.end),fill:I(r).fill,stroke:"var(--Background)",strokeWidth:n,strokeLinejoin:"round",...c?k(r):{},style:{transform:`translate(${a*Math.sin(t)}px, ${-a*Math.cos(t)}px) scale(${B?1:0})`,transformOrigin:`${C}px ${T}px`,transformBox:"view-box",transition:`transform ${B?wf:Bf}`}},r)}),s&&b.map((e,r)=>{const t=(e.start+e.end)/2,a=A+.62*(z-A);return e.fraction<.07?null:le("text",{x:C+a*Math.sin(t),y:T-a*Math.cos(t),textAnchor:"middle",dominantBaseline:"middle",fill:I(r).onFill,...yf,children:x[r]},r)})]}),le(kf,{caption:(u||`${t?"Donut":"Pie"} chart, ${b.length} segments`)+(y?`, ${y} non-positive values omitted`:""),labels:x,values:g})]})}const Rf={empty:{icon:le(pt,{}),iconColor:"quiet",titleColor:"header",role:void 0},"no-results":{icon:le(mt,{}),iconColor:"quiet",titleColor:"header",role:void 0},error:{icon:le(ft,{}),iconColor:"error",titleColor:"error",role:"alert"}},Df={small:{icon:"medium",pad:"24px 16px",gap:"8px",maxWidth:"36ch"},medium:{icon:"large",pad:"48px 24px",gap:"12px",maxWidth:"40ch"},large:{icon:"large",pad:"80px 24px",gap:"16px",maxWidth:"44ch"}};function Pf({type:e="empty",icon:r,title:a,body:i,action:o,size:n="medium",className:l="",sx:s={},...d}){const c=Rf[e]||Rf.empty,u=Df[n]||Df.medium,p="small"===n?oa:sa,m=t(),f=a?m+"-title":void 0,g=i?m+"-body":void 0;return"production"===process.env.NODE_ENV||a||console.warn("[StateMessage] needs a `title`. A state message with no words is an empty box, which is the thing it exists to replace."),de(h,{className:"state-message state-message-"+e+" state-message-"+n+" "+l,role:c.role||"group","aria-labelledby":f,"aria-describedby":g,sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",gap:u.gap,padding:u.pad,width:"100%",boxSizing:"border-box",...s},...d,children:[le(Qa,{size:u.icon,color:c.iconColor,"aria-hidden":"true",children:r||c.icon}),a&&le(ea,{id:f,color:c.titleColor,children:a}),i&&le(p,{id:g,color:"quiet",sx:{maxWidth:u.maxWidth},children:i}),o&&le(h,{sx:{marginTop:"4px"},children:o})]})}var Ff={};export{Lm as Accordion,Nm as AccordionDetails,Fm as AccordionGroup,Em as AccordionSummary,uh as Alert,Wu as AlertDialog,xh as AlertShowcase,Tp as AppBar,Lp as AppBarShowcase,cs as Autocomplete,gs as AutocompleteShowcase,Za as Avatar,qa as AvatarGroup,Jh as AvatarShowcase,ai as Badge,ap as BadgeShowcase,Af as BarChart,vm as BevelText,wm as BevelTextShowcase,Ql as BlackWhiteToggleButtonGroup,sa as Body,ua as Body1,ha as Body2,ca as BodyBold,pa as BodyLarge,fa as BodyLargeBold,ma as BodyLargeSemibold,da as BodySemibold,oa as BodySmall,la as BodySmallBold,na as BodySmallSemibold,mc as BottomNavigation,zc as BottomNavigationShowcase,id as Box,sd as BoxShowcase,Pd as BreadcrumbItem,Dd as Breadcrumbs,Hd as BreadcrumbsShowcase,Wi as Button,zn as ButtonGroup,Ha as ButtonSmall,Ma as ButtonText,Vt as CAP_HEIGHT_TRIM,yf as CHART_LABEL_TYPE,bf as CHART_TOKENS,ga as Caption,xa as CaptionBold,Un as Card,Pn as CenteredStack,ji as Checkbox,Xs as Chip,Ih as CircularProgress,Fh as CircularProgressShowcase,Ko as CodeBlock,on as Colors,dd as Container,Jo as CopyButton,Mp as Copyright,tm as CopyrightShowcase,um as CurvedText,xm as CurvedTextShowcase,Va as DEFAULT_AVATAR_SRC,rh as DEFAULT_ITEMS,Hl as DefaultToggleButtonGroup,wp as DesktopAppBar,Iu as Dialog,Pu as DialogShowcase,jt as DisplayLarge,Gt as DisplayMedium,Ut as DisplaySmall,sp as Divider,Gu as Drawer,Uu as DrawerClose,Yu as DrawerContent,Xu as DrawerHeader,lh as DrawerShowcase,dh as DropZone,Jd as Dropdown,Wn as DynoStack,eh as DynoTreeView,Yl as EmailTextField,Ul as ErrorToggleButtonGroup,Ca as Eyebrow,za as EyebrowLarge,Ta as EyebrowMedium,wa as EyebrowSmall,el as Fab,ll as FabShowcase,Np as Footer,_p as FooterShowcase,Ru as FormDialog,vt as Ghost,Kc as Gradient,cd as Grid,En as GridStack,Xt as H1,Yt as H2,Zt as H3,qt as H4,Jt as H5,Kt as H6,Rn as HStack,$t as Heading,Qa as Icon,Tn as IconBadge,Kn as IconBadgeShowcase,Bn as IconShowcase,Vl as InfoToggleButtonGroup,On as InsetStack,ya as Label,ba as LabelExtraSmall,Sa as LabelLarge,va as LabelSmall,ka as Legal,Ba as LegalSemibold,ah as LightTreeView,If as LineChart,$c as LinearGradient,Mh as LinearProgress,Vh as LinearProgressShowcase,Js as Link,mp as List,pp as ListItem,hp as ListItemDecorator,Im as MainLayout,$d as Menu,Kd as MenuButton,ec as MenuDivider,_d as MenuItem,oc as MenuShowcase,ru as MeshCardGradient,eu as MeshGradient,Cp as MobileAppBar,Nu as Modal,Ol as NeutralToggleButtonGroup,Cl as NumberField,Wl as NumberFieldShowcase,Fa as NumberLarge,Pa as NumberMedium,Da as NumberSmall,Jl as NumberTextField,xu as OmniDesignProvider,Wn as OmniStack,eh as OmniTreeView,Ia as Overline,Ra as OverlineLarge,Wa as OverlineMedium,Aa as OverlineSmall,Ed as Pagination,jd as PaginationShowcase,tu as Paper,Zl as PasswordTextField,Kl as PhoneTextField,Wf as PieChart,au as Popover,Ml as PrimaryToggleButtonGroup,pd as RATIO_NAMES,_c as RadialGradient,Ss as Radio,ks as RadioGroup,Bs as RadioInput,hl as Rail,xl as RailShowcase,As as RangeSlider,Rs as Rating,Rs as RatingInput,xd as Ratio,wd as RatioShowcase,Hn as ResponsiveStack,Qn as ScrollStack,Ps as SearchField,Es as SearchFieldShowcase,ql as SearchTextField,El as SecondaryToggleButtonGroup,ud as Section,hd as SectionShowcase,to as Select,ls as SelectShowcase,Yn as SelectableCard,af as SettingsPanel,Am as Sidebar,zs as Slider,zs as SliderInput,yh as Snackbar,Th as SnackbarShowcase,th as SolidTreeView,Fn as SpaceBetweenStack,nn as Spacing,Oc as SpeedDial,Xc as SpeedDialShowcase,Mn as Stack,Nn as StackDivider,td as StackShowcase,Pf as StateMessage,Pc as Step,Dc as Stepper,Nc as StepperShowcase,ea as Subtitle,aa as Subtitle1,ia as Subtitle2,_t as SubtitleLarge,ta as SubtitleMedium,ra as SubtitleSmall,jl as SuccessToggleButtonGroup,yu as Surfaced,pn as Switch,pn as SwitchInput,xo as Tab,go as TabList,bo as TabPanel,xp as Table,fo as Tabs,Wd as TabsShowcase,Nl as TertiaryToggleButtonGroup,_l as TextArea,Xl as TextField,es as TextFieldGroup,$i as TextInput,vu as ThemedZone,Dl as ToggleButton,Fl as ToggleButtonGroup,vl as Toolbar,Bl as ToolbarShowcase,Sp as Tooltip,Vm as TreeBranch,_m as TreeViewShowcase,Qt as Typography,$l as URLTextField,Dn as VStack,Gl as WarningToggleButtonGroup,Ln as WrapStack,xf as chartGeometry,Ff as default,bt as ghostBlockSx,xt as useGhost,bu as useOmniDesign,Rc as useStepperContext,mo as useTabsContext};
15
15
  //# sourceMappingURL=index.esm.js.map