@omni-design/components 0.11.0 → 0.12.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 (42) hide show
  1. package/.claude/commands/ScanComponents.md +1 -1
  2. package/.claude/commands/ShareComponent.md +1 -1
  3. package/CLAUDE.md +5 -3
  4. package/dist/index.esm.js +3 -3
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.js +3 -3
  7. package/dist/index.js.map +1 -1
  8. package/dist/types/components/Button/Button.d.ts +3 -1
  9. package/dist/types/components/ButtonGroup/ButtonGroup.d.ts +3 -2
  10. package/dist/types/components/Chip/Chip.d.ts +1 -1
  11. package/dist/types/components/IconBadge/IconBadge.d.ts +1 -1
  12. package/dist/types/components/Loader/Loader.d.ts +66 -0
  13. package/dist/types/components/Loader/index.d.ts +1 -0
  14. package/dist/types/components/MiniSwatch/MiniSwatch.d.ts +7 -0
  15. package/dist/types/components/MiniSwatch/index.d.ts +1 -0
  16. package/dist/types/components/Swatch/Swatch.d.ts +14 -0
  17. package/dist/types/components/Swatch/index.d.ts +1 -0
  18. package/dist/types/components/Switch/Switch.d.ts +24 -8
  19. package/dist/types/components/Switch/index.d.ts +1 -1
  20. package/dist/types/components/index.d.ts +5 -0
  21. package/dist/types/docs/DocPanels.d.ts +39 -0
  22. package/dist/types/docs/components.d.ts +212 -0
  23. package/dist/types/docs/componentsData.d.ts +587 -0
  24. package/dist/types/docs/componentsForms.d.ts +597 -0
  25. package/dist/types/docs/componentsNav.d.ts +420 -0
  26. package/dist/types/docs/componentsOverlays.d.ts +379 -0
  27. package/dist/types/docs/componentsRest.d.ts +158 -0
  28. package/dist/types/docs/componentsSurfaces.d.ts +339 -0
  29. package/dist/types/docs/docsLink.d.ts +32 -0
  30. package/dist/types/docs/examples.d.ts +37 -0
  31. package/dist/types/docs/foundations.d.ts +28 -0
  32. package/dist/types/docs/index.d.ts +5 -0
  33. package/docs/components.md +71 -55
  34. package/package.json +1 -1
  35. package/public/styles/Dark-Mode.css +12056 -13009
  36. package/public/styles/Light-Mode.css +11240 -12370
  37. package/public/styles/base.css +364 -182
  38. package/public/styles/core.css +480 -123
  39. package/public/styles/foundation.css +124 -53
  40. package/public/styles/styles.css +5 -5
  41. package/public/styles/theme.json +2 -2
  42. package/public/styles/typography-tokens.css +686 -158
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
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={};
1
+ import e,{useState as t,forwardRef as a,useEffect as r,useRef as n,useCallback as o,useId as i,useContext as l,createContext as s,Children as d,isValidElement as c,useMemo as u}from"react";import{Box as h,Badge as p,GlobalStyles as m,Button as g,Avatar as f,Chip as b,Tooltip as v,Tabs as x,Tab as y,Grid as w,Stack as S,TextField as k,FormControlLabel as B,Checkbox as C,Switch as T,InputAdornment as A,FormHelperText as z,Radio as I,FormControl as R,FormLabel as W,RadioGroup as D,Slider as F,Typography as P,Alert as L,ToggleButton as H,Container as N,Paper as M,Dialog as O,DialogTitle as E,DialogContent as Q,DialogContentText as V,DialogActions as j,Zoom as U,Grow as G,Fade as X,Slide as q,LinearProgress as Y,Skeleton as Z,List as J,ListItem as $,ListItemButton as K,ListItemIcon as _,ListItemText as ee,Collapse as te,Divider as ae,Drawer as re,useTheme as ne,useMediaQuery as oe,AppBar as ie,Toolbar as le,ToggleButtonGroup as se}from"@mui/material";import{jsx as de,Fragment as ce,jsxs as ue}from"react/jsx-runtime";import he from"@mui/icons-material/Cancel";import pe from"@mui/icons-material/ContentCopy";import me from"@mui/icons-material/Check";import ge from"@mui/icons-material/ExpandMore";import fe from"@mui/icons-material/ExpandLess";import*as be from"@mui/icons-material";import{Settings as ve,Close as xe}from"@mui/icons-material";import ye from"@mui/icons-material/Mail";import we from"@mui/icons-material/Notifications";import Se from"@mui/icons-material/ShoppingCart";import ke from"@mui/icons-material/InfoOutlined";import Be from"@mui/icons-material/CheckCircleOutline";import Ce from"@mui/icons-material/WarningAmber";import Te from"@mui/icons-material/ErrorOutline";import Ae from"react-dom";import"@mui/icons-material/FavoriteBorder";import ze from"@mui/icons-material/Remove";import Ie from"@mui/icons-material/Favorite";import Re from"@mui/icons-material/Home";import We from"@mui/icons-material/Delete";import De from"@mui/icons-material/Settings";import Fe from"@mui/icons-material/Search";import Pe from"@mui/icons-material/Star";import Le from"@mui/icons-material/Person";import He from"@mui/icons-material/Visibility";import Ne from"@mui/icons-material/Lock";import Me from"@mui/icons-material/Info";import Oe from"@mui/icons-material/HomeOutlined";import Ee from"@mui/icons-material/FavoriteBorderOutlined";import Qe from"@mui/icons-material/DeleteOutlined";import Ve from"@mui/icons-material/SettingsOutlined";import je from"@mui/icons-material/StarOutline";import Ue from"@mui/icons-material/PersonOutlined";import Ge from"@mui/icons-material/NotificationsOutlined";import Xe from"@mui/icons-material/VisibilityOutlined";import qe from"@mui/icons-material/ShoppingCartOutlined";import Ye from"@mui/icons-material/LockOutlined";import Ze from"@mui/icons-material/HomeRounded";import Je from"@mui/icons-material/FavoriteRounded";import $e from"@mui/icons-material/DeleteRounded";import Ke from"@mui/icons-material/SettingsRounded";import _e from"@mui/icons-material/SearchRounded";import et from"@mui/icons-material/StarRounded";import tt from"@mui/icons-material/PersonRounded";import at from"@mui/icons-material/NotificationsRounded";import rt from"@mui/icons-material/VisibilityRounded";import nt from"@mui/icons-material/ShoppingCartRounded";import ot from"@mui/icons-material/LockRounded";import it from"@mui/icons-material/InfoRounded";import lt from"@mui/icons-material/HomeTwoTone";import st from"@mui/icons-material/FavoriteTwoTone";import dt from"@mui/icons-material/DeleteTwoTone";import ct from"@mui/icons-material/SettingsTwoTone";import ut from"@mui/icons-material/SearchTwoTone";import ht from"@mui/icons-material/StarTwoTone";import pt from"@mui/icons-material/PersonTwoTone";import mt from"@mui/icons-material/NotificationsTwoTone";import gt from"@mui/icons-material/VisibilityTwoTone";import ft from"@mui/icons-material/ShoppingCartTwoTone";import bt from"@mui/icons-material/LockTwoTone";import vt from"@mui/icons-material/InfoTwoTone";import xt from"@mui/icons-material/HomeSharp";import yt from"@mui/icons-material/FavoriteSharp";import wt from"@mui/icons-material/DeleteSharp";import St from"@mui/icons-material/SettingsSharp";import kt from"@mui/icons-material/SearchSharp";import Bt from"@mui/icons-material/StarSharp";import Ct from"@mui/icons-material/PersonSharp";import Tt from"@mui/icons-material/NotificationsSharp";import At from"@mui/icons-material/VisibilitySharp";import zt from"@mui/icons-material/ShoppingCartSharp";import It from"@mui/icons-material/LockSharp";import Rt from"@mui/icons-material/InfoSharp";import Wt from"@mui/icons-material/Add";import Dt from"@mui/icons-material/ArrowForward";import"@mui/icons-material/StarBorder";import Ft from"@mui/icons-material/StarHalf";import Pt from"@mui/icons-material/ChevronLeft";import Lt from"@mui/icons-material/ChevronRight";import Ht from"@mui/icons-material/FirstPage";import Nt from"@mui/icons-material/LastPage";import Mt from"@mui/icons-material/Code";import Ot from"@mui/icons-material/GridView";import Et from"@mui/icons-material/Computer";import Qt from"@mui/icons-material/Menu";import Vt from"@mui/icons-material/Close";import jt from"@mui/icons-material/FormatBold";import Ut from"@mui/icons-material/FormatItalic";import Gt from"@mui/icons-material/FormatUnderlined";import Xt from"@mui/icons-material/FormatAlignLeft";import qt from"@mui/icons-material/FormatAlignCenter";import Yt from"@mui/icons-material/KeyboardArrowUp";import Zt from"@mui/icons-material/KeyboardArrowDown";import"@mui/icons-material/FormatAlignRight";import"@mui/icons-material/ViewList";import"@mui/icons-material/ViewModule";import Jt from"@mui/material/CircularProgress";import $t from"@mui/icons-material/Image";import Kt from"@mui/icons-material/Explore";import _t from"@mui/icons-material/Radio";import ea from"@mui/icons-material/LibraryMusic";import ta from"@mui/icons-material/Bookmark";import aa from"@mui/icons-material/Edit";import ra from"@mui/icons-material/Share";import"@mui/icons-material/DeleteOutline";import na from"@mui/icons-material/CloudUpload";import"@mui/icons-material/Inbox";import oa from"@mui/icons-material/Folder";import"@mui/icons-material/MoreVert";import"@mui/icons-material/ImageOutlined";import ia from"@mui/icons-material/ArrowBack";import la from"@mui/icons-material/AccountCircle";import sa from"@mui/icons-material/Twitter";import da from"@mui/icons-material/GitHub";import ca from"@mui/icons-material/LinkedIn";import ua from"@mui/icons-material/Help";import ha from"@mui/icons-material/FolderOpen";import pa from"@mui/icons-material/InsertDriveFile";import ma from"@mui/icons-material/PictureAsPdf";import ga from"@mui/icons-material/VideoLibrary";import fa from"@mui/icons-material/InboxOutlined";import ba from"@mui/icons-material/SearchOffOutlined";import va from"@mui/icons-material/ErrorOutlineOutlined";const xa=e.createContext(null);function ya(){return e.useContext(xa)}function wa({radius:e="var(--Ghost-Radius, 4px)",animate:t=!0}={}){return{backgroundColor:"var(--Border-Variant)",borderRadius:e,color:"transparent",userSelect:"none",pointerEvents:"none",...t&&{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 Sa({active:e=!0,animate:t=!0,label:a="Loading",children:r,...n}){return e?ue(xa.Provider,{value:{animate:t},children:[de("style",{children:"\n@keyframes omni-ghost-sweep {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n"}),ue("div",{"aria-busy":"true","data-ghost":"true",...n,children:[de("span",{style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)",whiteSpace:"nowrap"},children:a}),de("div",{"aria-hidden":"true",children:r})]})]}):de(ce,{children:r})}const ka=e=>`var(--${e}-Font-Family)`,Ba="var(--Font-Family-Display, var(--Font-Family-Header, var(--Header-Font-Family)))",Ca="var(--Font-Family-Eyebrow)",Ta=(e,t)=>`var(--${e}-Font-Family, ${t})`,Aa="var(--Font-Variation-Header, normal)",za=(e,t)=>`var(--Eyebrow-${e}-${t}, var(--Overline-${e}-${t}))`,Ia=e=>za(e,"Font-Size"),Ra=e=>za(e,"Font-Weight"),Wa=e=>za(e,"Line-Height"),Da=e=>za(e,"Letter-Spacing"),Fa=e=>`var(--${e}-Font-Size)`,Pa=e=>`var(--${e}-Font-Weight)`,La=e=>`calc(var(--${e}-Line-Height) * var(--Cognitive-Multiplier, 1))`,Ha=e=>`var(--${e}-Line-Height)`,Na=e=>`var(--${e}-Letter-Spacing)`,Ma={"display-large":{component:"h1",fontFamily:Ta("Display-Large",Ba),fontSize:Fa("Display-Large"),fontWeight:Pa("Display-Large"),lineHeight:La("Display-Large"),letterSpacing:Na("Display-Large"),defaultColor:"header",defaultWidth:"fill"},"display-medium":{component:"h1",fontFamily:Ta("Display-Medium",Ba),fontSize:Fa("Display-Medium"),fontWeight:Pa("Display-Medium"),lineHeight:La("Display-Medium"),letterSpacing:Na("Display-Medium"),defaultColor:"header",defaultWidth:"fill"},"display-small":{component:"h2",fontFamily:Ta("Display-Small",Ba),fontSize:Fa("Display-Small"),fontWeight:Pa("Display-Small"),lineHeight:La("Display-Small"),letterSpacing:Na("Display-Small"),defaultColor:"header",defaultWidth:"fill"},h1:{component:"h1",fontFamily:ka("Header"),fontVariationSettings:Aa,fontSize:Fa("H1"),fontWeight:Pa("H1"),lineHeight:La("H1"),letterSpacing:Na("H1"),defaultColor:"header",defaultWidth:"fill"},h2:{component:"h2",fontFamily:ka("Header"),fontVariationSettings:Aa,fontSize:Fa("H2"),fontWeight:Pa("H2"),lineHeight:La("H2"),letterSpacing:Na("H2"),defaultColor:"header",defaultWidth:"fill"},h3:{component:"h3",fontFamily:ka("Header"),fontVariationSettings:Aa,fontSize:Fa("H3"),fontWeight:Pa("H3"),lineHeight:La("H3"),letterSpacing:Na("H3"),defaultColor:"header",defaultWidth:"fill"},h4:{component:"h4",fontFamily:ka("Header"),fontVariationSettings:Aa,fontSize:Fa("H4"),fontWeight:Pa("H4"),lineHeight:La("H4"),letterSpacing:Na("H4"),defaultColor:"standard",defaultWidth:"fill"},h5:{component:"h5",fontFamily:ka("Header"),fontVariationSettings:Aa,fontSize:Fa("H5"),fontWeight:Pa("H5"),lineHeight:La("H5"),letterSpacing:Na("H5"),defaultColor:"standard",defaultWidth:"fill"},h6:{component:"h6",fontFamily:ka("Header"),fontVariationSettings:Aa,fontSize:Fa("H6"),fontWeight:Pa("H6"),lineHeight:La("H6"),letterSpacing:Na("H6"),defaultColor:"standard",defaultWidth:"fill"},"subtitle-large":{component:"p",fontFamily:ka("Body"),fontSize:Fa("Subtitle-Large"),fontWeight:Pa("Subtitle-Large"),lineHeight:La("Subtitle-Large"),letterSpacing:Na("Subtitle-Large"),defaultColor:"header",defaultWidth:"fill"},subtitle:{component:"p",fontFamily:ka("Body"),fontSize:Fa("Subtitle-Medium"),fontWeight:Pa("Subtitle-Medium"),lineHeight:La("Subtitle-Medium"),letterSpacing:Na("Subtitle-Medium"),defaultColor:"header",defaultWidth:"fill"},"subtitle-small":{component:"p",fontFamily:ka("Body"),fontSize:Fa("Subtitle-Small"),fontWeight:Pa("Subtitle-Small"),lineHeight:La("Subtitle-Small"),letterSpacing:Na("Subtitle-Small"),defaultColor:"header",defaultWidth:"fill"},"body-small":{component:"p",fontFamily:ka("Body"),fontSize:Fa("Body-Small"),fontWeight:Pa("Body-Small"),lineHeight:La("Body-Small"),letterSpacing:Na("Body-Small"),defaultColor:"standard",defaultWidth:"fill"},"body-small-semibold":{component:"p",fontFamily:ka("Body"),fontSize:Fa("Body-Small"),fontWeight:Pa("Body-Small-Semibold"),lineHeight:La("Body-Small"),letterSpacing:Na("Body-Small"),defaultColor:"standard",defaultWidth:"fill"},body:{component:"p",fontFamily:ka("Body"),fontSize:Fa("Body-Medium"),fontWeight:Pa("Body-Medium"),lineHeight:La("Body-Medium"),letterSpacing:Na("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-medium":{component:"p",fontFamily:ka("Body"),fontSize:Fa("Body-Medium"),fontWeight:Pa("Body-Medium"),lineHeight:La("Body-Medium"),letterSpacing:Na("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-semibold":{component:"p",fontFamily:ka("Body"),fontSize:Fa("Body-Medium"),fontWeight:Pa("Body-Medium-Semibold"),lineHeight:La("Body-Medium"),letterSpacing:Na("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-medium-semibold":{component:"p",fontFamily:ka("Body"),fontSize:Fa("Body-Medium"),fontWeight:Pa("Body-Medium-Semibold"),lineHeight:La("Body-Medium"),letterSpacing:Na("Body-Medium"),defaultColor:"standard",defaultWidth:"fill"},"body-large":{component:"p",fontFamily:ka("Body"),fontSize:Fa("Body-Large"),fontWeight:Pa("Body-Large"),lineHeight:La("Body-Large"),letterSpacing:Na("Body-Large"),defaultColor:"standard",defaultWidth:"fill"},"body-large-semibold":{component:"p",fontFamily:ka("Body"),fontSize:Fa("Body-Large"),fontWeight:Pa("Body-Large-Semibold"),lineHeight:La("Body-Large"),letterSpacing:Na("Body-Large"),defaultColor:"standard",defaultWidth:"fill"},caption:{component:"span",fontFamily:ka("Body"),fontSize:Fa("Caption"),fontWeight:Pa("Caption"),lineHeight:La("Caption"),letterSpacing:Na("Caption"),defaultColor:"quiet",defaultWidth:"hug"},"caption-bold":{component:"span",fontFamily:ka("Body"),fontSize:Fa("Caption"),fontWeight:Pa("Caption-Bold"),lineHeight:La("Caption"),letterSpacing:Na("Caption"),defaultColor:"quiet",defaultWidth:"hug"},"label-extra-small":{component:"label",fontFamily:ka("Body"),fontSize:Fa("Label-ExtraSmall"),fontWeight:Pa("Label-ExtraSmall"),lineHeight:Ha("Label-ExtraSmall"),letterSpacing:Na("Label-ExtraSmall"),defaultColor:"standard",defaultWidth:"hug"},"label-small":{component:"label",fontFamily:ka("Body"),fontSize:Fa("Label-Small"),fontWeight:Pa("Label-Small"),lineHeight:Ha("Label-Small"),letterSpacing:Na("Label-Small"),defaultColor:"standard",defaultWidth:"hug"},label:{component:"label",fontFamily:ka("Body"),fontSize:Fa("Label-Medium"),fontWeight:Pa("Label-Medium"),lineHeight:Ha("Label-Medium"),letterSpacing:Na("Label-Medium"),defaultColor:"standard",defaultWidth:"hug"},"label-medium":{component:"label",fontFamily:ka("Body"),fontSize:Fa("Label-Medium"),fontWeight:Pa("Label-Medium"),lineHeight:Ha("Label-Medium"),letterSpacing:Na("Label-Medium"),defaultColor:"standard",defaultWidth:"hug"},"label-large":{component:"label",fontFamily:ka("Body"),fontSize:Fa("Label-Large"),fontWeight:Pa("Label-Large"),lineHeight:Ha("Label-Large"),letterSpacing:Na("Label-Large"),defaultColor:"standard",defaultWidth:"hug"},legal:{component:"span",fontFamily:ka("Body"),fontSize:Fa("Legal"),fontWeight:Pa("Legal"),lineHeight:La("Legal"),letterSpacing:Na("Legal"),defaultColor:"quiet",defaultWidth:"hug"},"legal-semibold":{component:"span",fontFamily:ka("Body"),fontSize:Fa("Legal"),fontWeight:Pa("Legal-Semibold"),lineHeight:La("Legal"),letterSpacing:Na("Legal"),defaultColor:"quiet",defaultWidth:"hug"},"eyebrow-small":{component:"span",fontFamily:Ca,fontSize:Ia("Small"),fontWeight:Ra("Small"),lineHeight:Wa("Small"),letterSpacing:Da("Small"),textTransform:"uppercase",defaultColor:"eyebrow",defaultWidth:"hug"},eyebrow:{component:"span",fontFamily:Ca,fontSize:Ia("Medium"),fontWeight:Ra("Medium"),lineHeight:Wa("Medium"),letterSpacing:Da("Medium"),textTransform:"uppercase",defaultColor:"eyebrow",defaultWidth:"hug"},"eyebrow-large":{component:"span",fontFamily:Ca,fontSize:Ia("Large"),fontWeight:Ra("Large"),lineHeight:Wa("Large"),letterSpacing:Da("Large"),textTransform:"uppercase",defaultColor:"eyebrow",defaultWidth:"hug"},"number-small":{component:"span",fontFamily:ka("Body"),fontSize:Fa("Number-Small"),fontWeight:Pa("Number-Small"),lineHeight:Ha("Number-Small"),letterSpacing:Na("Number-Small"),fontVariantNumeric:"tabular-nums",defaultColor:"standard",defaultWidth:"hug"},"number-medium":{component:"span",fontFamily:ka("Body"),fontSize:Fa("Number-Medium"),fontWeight:Pa("Number-Medium"),lineHeight:Ha("Number-Medium"),letterSpacing:Na("Number-Medium"),fontVariantNumeric:"tabular-nums",defaultColor:"standard",defaultWidth:"hug"},"number-large":{component:"span",fontFamily:ka("Body"),fontSize:Fa("Number-Large"),fontWeight:Pa("Number-Large"),lineHeight:Ha("Number-Large"),letterSpacing:Na("Number-Large"),fontVariantNumeric:"tabular-nums",defaultColor:"standard",defaultWidth:"hug"},"button-extra-small":{component:"span",fontFamily:ka("Body"),fontSize:Fa("Button-ExtraSmall"),fontWeight:Pa("Button-ExtraSmall"),lineHeight:Ha("Button-ExtraSmall"),letterSpacing:Na("Button-ExtraSmall"),defaultColor:"standard",defaultWidth:"hug"},"button-small":{component:"span",fontFamily:ka("Body"),fontSize:Fa("Button-Small"),fontWeight:Pa("Button-Small"),lineHeight:Ha("Button-Small"),letterSpacing:Na("Button-Small"),defaultColor:"standard",defaultWidth:"hug"},button:{component:"span",fontFamily:ka("Body"),fontSize:"var(--Button-Standard-Font-Size, var(--Button-Font-Size))",fontWeight:"var(--Button-Standard-Font-Weight, var(--Body-Font-Weight))",lineHeight:Ha("Button-Standard"),letterSpacing:Na("Button-Standard"),defaultColor:"standard",defaultWidth:"hug"},"button-standard":{component:"span",fontFamily:ka("Body"),fontSize:"var(--Button-Standard-Font-Size, var(--Button-Font-Size))",fontWeight:"var(--Button-Standard-Font-Weight, var(--Body-Font-Weight))",lineHeight:Ha("Button-Standard"),letterSpacing:Na("Button-Standard"),defaultColor:"standard",defaultWidth:"hug"}},Oa={"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"},Ea={"eyebrow-small":"overline-small",eyebrow:"overline","eyebrow-large":"overline-large"},Qa={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)"},Va={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)"},ja=new Set(["h1","h2","h3","h4","h5","h6","display-large","display-medium","display-small","subtitle-large","subtitle","subtitle-small"]);function Ua({children:e,textStyle:t="body",color:a,width:r,component:n,noWrap:o=!1,gutterBottom:i=!1,className:l="",sx:s={},...d}){const c=Oa[t]||t,u=Ma[c]||Ma.body,p="string"==typeof u.fontSize?u.fontSize.match(/--([\w-]+)-Font-Size/):null,m=p?p[1]:null,g=m?"var(--"+m+"-Text-Decoration, "+(u.textDecoration||"none")+")":u.textDecoration||"none",f=m?"var(--"+m+"-Text-Transform, "+(u.textTransform||"none")+")":u.textTransform||"none",b=ya(),v=function(e,t,a){const r=ja.has(e);return(r?Qa:Va)[t||a]||(r?Qa.header:Va.standard)}(c,a,u.defaultColor),x=r||u.defaultWidth,y="fill"===x,w=n||u.component,S=a||u.defaultColor;return de(h,{component:w,className:"typography typography-"+c+(Ea[c]?" typography-"+Ea[c]:"")+" typography-color-"+S+" typography-width-"+x+" "+l,sx:{fontFamily:u.fontFamily,fontVariationSettings:u.fontVariationSettings||"normal",fontSize:u.fontSize,fontWeight:u.fontWeight,lineHeight:u.lineHeight,letterSpacing:u.letterSpacing,textDecoration:g,textTransform:f,fontVariantNumeric:u.fontVariantNumeric||"normal",color:v,display:y?"block":"inline",width:y?"100%":"auto",margin:0,marginBottom:i?"0.5em":0,padding:0,...o&&{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},...b?wa({animate:b.animate}):{},...s},...d,children:e})}const Ga={"@supports (text-box-edge: cap alphabetic)":{textBoxTrim:"trim-both",textBoxEdge:"cap alphabetic",paddingTop:0,paddingBottom:0}},Xa=e=>de(Ua,{textStyle:"display-large",...e}),qa=e=>de(Ua,{textStyle:"display-medium",...e}),Ya=e=>de(Ua,{textStyle:"display-small",...e}),Za=e=>de(Ua,{textStyle:"h1",...e}),Ja=e=>de(Ua,{textStyle:"h2",...e}),$a=e=>de(Ua,{textStyle:"h3",...e}),Ka=e=>de(Ua,{textStyle:"h4",...e}),_a=e=>de(Ua,{textStyle:"h5",...e}),er=e=>de(Ua,{textStyle:"h6",...e}),tr=Ka,ar=e=>de(Ua,{textStyle:"subtitle-large",...e}),rr=e=>de(Ua,{textStyle:"subtitle",...e}),nr=e=>de(Ua,{textStyle:"subtitle-small",...e}),or=e=>de(Ua,{textStyle:"subtitle",...e}),ir=ar,lr=rr,sr=e=>de(Ua,{textStyle:"body-small",...e}),dr=e=>de(Ua,{textStyle:"body-small-semibold",...e}),cr=e=>de(Ua,{textStyle:"body-small-bold",...e}),ur=e=>de(Ua,{textStyle:"body",...e}),hr=e=>de(Ua,{textStyle:"body-semibold",...e}),pr=e=>de(Ua,{textStyle:"body-bold",...e}),mr=ur,gr=sr,fr=e=>de(Ua,{textStyle:"body-large",...e}),br=e=>de(Ua,{textStyle:"body-large-semibold",...e}),vr=e=>de(Ua,{textStyle:"body-large-bold",...e}),xr=e=>de(Ua,{textStyle:"caption",...e}),yr=e=>de(Ua,{textStyle:"caption-bold",...e}),wr=e=>de(Ua,{textStyle:"label-extra-small",...e}),Sr=e=>de(Ua,{textStyle:"label-small",...e}),kr=e=>de(Ua,{textStyle:"label",...e}),Br=e=>de(Ua,{textStyle:"label-large",...e}),Cr=e=>de(Ua,{textStyle:"legal",...e}),Tr=e=>de(Ua,{textStyle:"legal-semibold",...e}),Ar=e=>de(Ua,{textStyle:"eyebrow-small",...e}),zr=e=>de(Ua,{textStyle:"eyebrow",...e}),Ir=e=>de(Ua,{textStyle:"eyebrow",...e}),Rr=e=>de(Ua,{textStyle:"eyebrow-large",...e}),Wr=Ar,Dr=zr,Fr=Ir,Pr=Rr,Lr=e=>de(Ua,{textStyle:"number-small",...e}),Hr=e=>de(Ua,{textStyle:"number-medium",...e}),Nr=e=>de(Ua,{textStyle:"number-large",...e}),Mr=e=>de(Ua,{textStyle:"button-extra-small",...e}),Or=e=>de(Ua,{textStyle:"button-small",...e}),Er=e=>de(Ua,{textStyle:"button",...e}),Qr=(e,t)=>({name:e,sets:t,variesWith:"theme + surface",figma:"Modes → Theme → Surface"}),Vr=[{name:"Checkbox",summary:"Turns one option on or off, independently of any other.",insteadUse:[{when:"Exactly one of several must be chosen",use:"RadioGroup"},{when:"It switches something on immediately",use:"SwitchInput"},{when:"It selects a row in a list",use:"ListItem with selectionMode"}],props:[{name:"variant",type:"string",default:"primary",note:"The palette. A checkbox is one of the few controls that defaults to `primary` rather than `default`."},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"checked / defaultChecked",type:"boolean",default:"undefined",note:"Controlled with `checked` + `onChange`; uncontrolled with `defaultChecked`."},{name:"indeterminate",type:"boolean",default:"false",note:'A third visual state for "some children checked". It is not a value — the box is still checked or not.'},{name:"label",type:"ReactNode",default:"undefined"},{name:"disabled",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction"},{state:"Pressed",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Checked",setBy:"prop"},{state:"Indeterminate",setBy:"prop"},{state:"Disabled",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor — Checkbox has no theme prop.",inFigma:"Pins no Theme mode; it inherits. Set the mode on the frame around it."}],tokens:[Qr("--Border","the unchecked box outline"),{name:"--Buttons-{Color}-Button",sets:"the checked fill",variesWith:"theme + surface",figma:"Modes → Theme → Buttons"},{name:"--Checkbox-Width",sets:"the box",variesWith:"size mode",figma:"Checkbox/Checkbox-Width"},{name:"--Checkbox-Radius",sets:"the box corner",variesWith:"size mode",figma:"Checkbox/Checkbox-Radius"},{name:"--Checkbox-Gap",sets:"box-to-label gap",variesWith:"size mode",figma:"Checkbox/Checkbox-Gap"},{name:"--Sizing-3",sets:"the 24px hit area",variesWith:"—",figma:"Sizing-3"}],composition:["Pass `label` rather than putting text beside it — the label is wired to the input and clicking it toggles."],accessibility:["A checkbox without a `label` needs an `aria-label`.",'`indeterminate` sets `aria-checked="mixed"` — do not also set `checked`.',"The box is centred inside a constant 24px frame so the target meets WCAG 2.5.8 even at `small`."],gotchas:['It defaults to `variant="primary"`, unlike Button which defaults to `default`. Both are deliberate.',"The 24px hit area is `--Sizing-3`, not a Checkbox token. It lives on the Sizing scale — a collection, not a Component-Size group, so it has no prefix — and a second name for one number is how the two drift."]},{name:"Radio",summary:"Picks exactly one option from a set. Never use one alone.",insteadUse:[{when:"Options are independent",use:"Checkbox"},{when:"There are more than about seven",use:"Select"},{when:"It is a single on/off",use:"SwitchInput"}],props:[{name:"color",type:"string",default:"primary"},{name:"theme / surface",type:"string",default:"undefined",note:"Puts `data-theme` / `data-surface` on the root. Absent means inherit — do not pass an empty string."},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"label",type:"ReactNode",default:"undefined"},{name:"labelPlacement",type:"string",values:["start","end","top","bottom"],default:"end"},{name:"checked",type:"boolean",default:"undefined"},{name:"disabled",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction"},{state:"Pressed",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Selected",setBy:"prop",note:"`checked`, usually driven by the enclosing RadioGroup."},{state:"Disabled",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`theme` / `surface` props, or `data-theme` on an ancestor.",inFigma:"The variant root pins `Theme=Primary`. Change the mode there to retheme it."}],themingNotes:["`color` and `theme` are different: `color` picks which palette the filled dot draws from, `theme` moves the whole surface including the border and label tones."],tokens:[Qr("--Border","the ring"),{name:"--Buttons-{Color}-Button",sets:"the selected dot",variesWith:"theme + surface",figma:"Modes → Theme → Buttons"},{name:"--Radio",sets:"the outer circle",variesWith:"size mode",figma:"Radio/Radio"},{name:"--Dot",sets:"the inner dot",variesWith:"size mode",figma:"Radio/Dot"},{name:"--Radio-Gap",sets:"circle-to-label gap",variesWith:"size mode",figma:"Radio/Radio-Gap"}],composition:["Wrap radios in `RadioGroup` — it owns the value, the name and arrow-key navigation."],accessibility:["A lone radio is a bug: one option that cannot be deselected. Always a group of two or more.","Arrow keys move between radios and Tab leaves the group. RadioGroup handles this."],gotchas:['A radio cannot be unchecked by clicking it again. If the user must be able to clear it, the set needs an explicit "None" option.']},{name:"SwitchInput",summary:"Turns something on or off and applies it immediately — no save step.",insteadUse:[{when:"The change needs saving or confirming",use:"Checkbox"},{when:"It is one of several options",use:"RadioGroup"}],props:[{name:"variant",type:"string",default:"default",note:"Picks which Icons colour the on state paints with: `primary` resolves the track to `--Icons-Primary`. Also takes `{color}-outline`."},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"checked / defaultChecked",type:"boolean",default:"undefined"},{name:"label",type:"ReactNode",default:"undefined"},{name:"labelPlacement",type:"string",values:["start","end"],default:"end"},{name:"icon",type:"ReactNode",default:"undefined",note:"Rides inside the handle."},{name:"disabled",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction"},{state:"Pressed",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"On / Off",setBy:"prop"},{state:"Disabled",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"The variant root pins `Theme=Primary`. Change the mode there. This drives the OFF state, which is drawn in `--Quiet` / `--Border`."},{collection:"Icons",inCode:'`variant` — `<SwitchInput variant="primary">` resolves the on track to `--Icons-Primary`.',inFigma:"The ON variants bind Switch-Body's fill AND stroke to `Icon`, and the Dot to `On-Icon`, and pin nothing — so they inherit. Set the Icons mode on the switch or an ancestor; that is what recolours an on switch."}],tokens:[{name:"--Icons-{Color}",sets:"the on track — fill and edge are the same token",variesWith:"theme + surface",figma:"Icons → Icon"},{name:"--Icons-On-{Color}",sets:"the knob on the on track",variesWith:"theme + surface",figma:"Icons → On-Icon"},Qr("--Quiet","the off knob"),Qr("--Border","the off track"),{name:"--Switch-Width",sets:"track width",variesWith:"size mode",figma:"Switch/Switch-Width"},{name:"--Switch-Height",sets:"track height",variesWith:"size mode",figma:"Switch/Switch-Height"},{name:"--Switch-Handle",sets:"the knob",variesWith:"size mode",figma:"Switch/Switch-Handle"}],composition:["The label is a prop, not a sibling — it is wired to the input."],accessibility:["Announced as a switch with on/off, not checked/unchecked.",'Label it with what it controls, not its state: "Email notifications", never "On".'],gotchas:['The `-light` shape is gone here too. It tinted the track, which is not a shape in the Figma set — that has only State and Status axes. `{color}-light` still renders (it normalizes to `{color}` and warns once in development), but the eight `*LightSwitch` convenience exports are deleted, so a stale import fails at build. `ButtonGroup` `variant="light"` is unrelated and still real.'],changes:[{version:"0.12.0",change:"The ON state reads the Icons collection — --Icons-{Color} for the track, --Icons-On-{Color} for the knob — which is what Figma binds.",silent:!0},{version:"0.12.0",change:"The `-light` tinted track was removed, along with the eight PrimaryLightSwitch…ErrorLightSwitch exports. The Figma Switch set has only State and Status axes, so a light shape had nothing to be checked against.",migrate:"{color}-light normalizes to {color} and warns once; a stale named import now fails at build.",silent:!0}]},{name:"Chip",summary:"A compact, selectable or dismissible token — a filter, a tag on an input, a choice.",insteadUse:[{when:"It only labels something and cannot be clicked",use:"Tag"},{when:"It is a primary action",use:"Button"},{when:"It shows a count on another element",use:"Badge"}],props:[{name:"variant",type:"string",default:"primary"},{name:"label",type:"ReactNode",default:"undefined"},{name:"selected",type:"boolean",default:"false",note:"Selection is a SURFACE change, not a different variant — selected draws on `Surface-Dimmest`, unselected on `Surface-Brightest`."},{name:"clickable",type:"boolean",default:"false"},{name:"onDelete",type:"function",default:"undefined",note:"Adds the dismiss affordance. Without it there is no X."},{name:"startDecorator / endDecorator",type:"ReactNode",default:"undefined"},{name:"disabled",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction"},{state:"Pressed",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Selected",setBy:"prop"},{state:"Disabled",setBy:"prop"}],theming:[{collection:"Theme",inCode:'`variant` sets `data-theme` on the chip; the chip sets `data-surface` itself from `selected`. `variant="default"` sets no theme and inherits.',inFigma:"One layer carries both: `Theme-Chip-Body` pins `Theme` AND the `Surface` level. Nothing is pinned on the variant root — the shadow lives on `Chip Holder` ABOVE it, so a drop shadow reads the page's theme rather than the chip's."}],themingNotes:["Do not reach for an outline variant — there is no outline/solid axis, only selected and unselected. `-outline` is stripped to the solid variant for back-compat and should not be written."],tokens:[Qr("--Background","the body fill"),Qr("--Text","the label"),Qr("--Border","the outline")],composition:["Decorators are props. An avatar or icon goes in `startDecorator`, the dismiss affordance comes from `onDelete`."],accessibility:['A dismissible chip needs its X labelled with what it removes, not "close".',"A selectable chip announces its selected state; do not add your own `aria-pressed`."],gotchas:["Selected and unselected differ by SURFACE, not by theme. That is why changing a chip's theme moves both states together — the two used to be separate style blocks and had drifted."],changes:[{version:"0.12.0",change:"One size. Chip is 24px and the `size` prop was removed — Figma has never drawn a 32px or 40px chip, so the DEFAULT chip was the one size that did not exist in the design.",migrate:"Drop the size prop. Component sizing comes from the Component-Size modes, not a per-component ladder.",silent:!0},{version:"0.12.0",change:"`onDelete` no longer forces the chip to a bigger size. The 24x24 touch target is carried by a pseudo-element, which is what WCAG 2.5.8 asks for — the glyph stays 16px.",silent:!0},{version:"0.9.0",change:"The solid/outline shape axis and the `-light` shape were removed. `-outline` was the unselected chip under another name, which let the component express four combinations against the design's two.",migrate:"Colour comes from `variant`; selection is a SURFACE level — unselected is Surface-Brightest, selected is Surface-Dimmest.",silent:!0}]},{name:"Alert",summary:"Tells the user something about the state of the page, in place.",insteadUse:[{when:"It is transient and self-dismissing",use:"Snackbar"},{when:"It demands a decision before anything else",use:"Dialog"},{when:"It describes one field",use:"the field's own validation message"}],props:[{name:"variant",type:"string",default:"light"},{name:"color",type:"string",values:["info","success","warning","error"],default:"info"},{name:"surface",type:"string",default:"undefined"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"startDecorator / endDecorator",type:"ReactNode",default:"undefined"}],states:[{state:"None",setBy:"prop",note:"An alert is not interactive; its colour is the message."}],theming:[{collection:"Theme",inCode:"`color` picks the semantic palette. `data-theme` on an ancestor is rarely wanted — an error alert should stay an error colour.",inFigma:"`Alert Container` pins both Theme (Error / Warning) and `Surface=Surface-Brightest`. That container is the node to change."}],tokens:[Qr("--Background","the alert fill"),Qr("--Text","the message"),Qr("--Border","the outline")],composition:["The icon goes in `startDecorator`, a dismiss or action in `endDecorator`."],accessibility:['An error or warning that appears in response to something needs `role="alert"` so it is announced.',"Colour alone is not the message — an error alert needs an icon or a word that says so."],gotchas:['It defaults to `variant="light"`, which is a surface treatment here and not the removed `-light` shape.']},{name:"Badge",summary:"A count or a dot anchored to the corner of something else.",insteadUse:[{when:"It stands alone and labels something",use:"Tag"},{when:"It can be clicked or dismissed",use:"Chip"}],props:[{name:"variant",type:"string",default:"primary"},{name:"badgeContent",type:"ReactNode",default:"undefined"},{name:"max",type:"number",default:"99",note:'Above this it renders "99+".'},{name:"dot",type:"boolean",default:"false",note:'A mark with no number — "something changed".'},{name:"showZero",type:"boolean",default:"false",note:"Off by default: a zero badge tells the user nothing and adds noise."},{name:"invisible",type:"boolean",default:"false"},{name:"overlap",type:"string",values:["rectangular","circular"],default:"rectangular"},{name:"anchorOrigin",type:"object",default:"{ vertical: 'top', horizontal: 'right' }"}],states:[{state:"None",setBy:"prop",note:"A badge is decoration on its child; it has no states of its own."}],theming:[{collection:"Icons",inCode:"`data-theme` on an ancestor; the fill follows the Icons colour.",inFigma:"Badge Counter binds `Icon` and `On-Icon` from the Icons collection and pins nothing. Set the Icons mode on it or an ancestor — that is what recolours a badge."}],tokens:[{name:"--Buttons-{Color}-Button",sets:"the badge fill",variesWith:"theme + surface",figma:"Modes → Theme → Buttons"},Qr("--Background","the ring separating it from its child")],composition:["It wraps its child — `<Badge badgeContent={3}><Icon/></Badge>`, not a sibling."],accessibility:['The number alone means nothing to a screen reader. Label the thing it sits on: "Notifications, 3 unread".',"A `dot` badge conveys nothing on its own and needs text elsewhere."],gotchas:["There is no `-light` Badge. The sixteen `PrimaryLightBadge`…`ErrorLightBadge` exports were deleted in 0.9.0, so a stale import fails at build rather than rendering something other than its name."],changes:[{version:"0.11.0",change:"One size, and the `size` prop was removed. Badge follows the design: the Icons palette, one size, its own type style.",migrate:'For the 8px status dot use type="status"; the default is the 16px counter.',silent:!0},{version:"0.9.0",change:"The `-light` shape was removed, along with the eight PrimaryLightBadge…ErrorLightBadge exports.",migrate:'A light badge is a SURFACE: {color}-outline with data-theme + data-surface="Surface-Brightest".'}]},{name:"Avatar",summary:"Represents a person or entity: a photo, their initials, or a fallback glyph.",insteadUse:[{when:"It is a brand or product mark",use:"an Icon or image"},{when:"It is a status indicator",use:"Badge"}],props:[{name:"src",type:"string",default:"undefined"},{name:"initials",type:"string",default:"undefined"},{name:"icon",type:"ReactNode",default:"undefined"},{name:"defaultPhoto",type:"boolean",default:"true",note:"The brand glyph when nothing else resolves. `false` falls back to the icon."},{name:"color",type:"string",default:"default"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"customSize",type:"number",default:"undefined"},{name:"clickable",type:"boolean",default:"false"},{name:"alt",type:"string",default:"undefined"}],states:[{state:"Hover",setBy:"interaction",note:"Only when `clickable`."},{state:"Focus-visible",setBy:"interaction",note:"Only when `clickable`."}],theming:[{collection:"Buttons",inCode:"`data-theme` on an ancestor.",inFigma:"The `Button-Theme-Avatar` and `Button-Theme-Initials` layers mark where the Buttons mode goes. Both are unpinned, so an avatar inherits. The Style variant chooses Photo / Initials / Default, which is content, not colour."}],tokens:[{name:"--Buttons-{Color}-Button",sets:"the initials background",variesWith:"theme + surface",figma:"Modes → Theme → Buttons"},Qr("--Text","the initials")],composition:["Content resolves in order: `src` → `initials` → `icon` → the default photo.",'Use `AvatarGroup` for a stack; it handles the overlap and the "+n" overflow.'],accessibility:["An avatar with a photo needs `alt` naming the person.",'Initials are not a name. `aria-label="JD"` passes every checker and says nothing — give the full name.'],gotchas:["In Figma the variant axis is `Style = Initials | Default | Photo`. Those are content choices; the library derives them from which prop you pass, so there is no `style` prop."]},{name:"Input",summary:"One line of typed text, with a label and optional validation.",insteadUse:[{when:"More than one line",use:"TextArea"},{when:"A search query",use:"SearchField"},{when:"Picking from a fixed list",use:"Select"},{when:"A number with steppers",use:"NumberField"}],props:[{name:"variant",type:"string",default:"primary-outline"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"label",type:"string",default:"undefined"},{name:"labelPosition",type:"string",values:["standard","floating"],default:"standard"},{name:"placeholder",type:"string",default:"undefined",note:"Not a label. It disappears on focus, so a field labelled only by its placeholder has no label once typing starts."},{name:"helperText",type:"string",default:"undefined"},{name:"validation",type:"string",values:["none","error"],default:"none"},{name:"validationMessage",type:"string",default:"undefined"},{name:"type",type:"string",default:"text"},{name:"disabled",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Error",setBy:"prop",note:'`validation="error"`, which also reveals `validationMessage`.'},{state:"Disabled",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"Pins nothing and inherits. Set the mode on the frame around it."}],tokens:[Qr("--Border","the outline"),Qr("--Text","the typed value"),Qr("--Quiet","the placeholder"),{name:"--Input-Height",sets:"height",variesWith:"size mode + device",figma:"Input/Input-Height"},{name:"--Input-Radius",sets:"corner",variesWith:"size mode",figma:"Input/Input-Radius"},{name:"--Input-Focus-Radius",sets:"focus ring corner",variesWith:"size mode",figma:"Input/Input-Focus-Radius"},{name:"--Input-Padding",sets:"inner padding",variesWith:"size mode",figma:"Input/Input-Padding"}],composition:["The label, helper text and validation message are props. Do not place a `<Label>` beside it — the wiring is what makes them announced together."],accessibility:["Every input needs a `label`. A placeholder is not one.",'`validation="error"` sets `aria-invalid` and ties the message with `aria-describedby`, so the error is announced rather than only drawn.','Write the message as what to change, not what went wrong: "Enter a date after today", not "Invalid date".'],gotchas:["The focus ring is drawn as an `outline`, not a border. A border would change the box size on focus and shift the layout."]},{name:"Swatch",summary:"A colour chip, optionally labelled, optionally clickable — one value out of a palette a person is choosing from.",insteadUse:[{when:"It triggers an action rather than carrying a colour",use:"Button"},{when:"It is a status or category label",use:"Tag"},{when:"It is one of a set of mutually exclusive options with text",use:"ButtonGroup"}],props:[{name:"color",type:"string",default:"undefined",note:"Any CSS colour. Arbitrary DATA from a picker, not a palette choice — which is why Swatch is not a Button variant."},{name:"label",type:"string",default:"undefined",note:"Optional caption below the chip, in the Legal type style. Figma models it as the `Label` boolean."},{name:"size",type:"string",values:["small","medium","large"],default:"medium",note:"Follows the BUTTON height ramp, so a swatch lines up with the controls beside it and inherits the device chain."},{name:"selected",type:"boolean",default:"false",note:"Draws the inner ring. Sets aria-pressed when clickable."},{name:"disabled",type:"boolean",default:"false"},{name:"radio",type:"boolean",default:"false",note:"Figma's Style axis (No-Radio | Radio). With a radio, EVERY state is delegated to it — Figma pins State=Hover, State=Focus-Visible and Status=selected on the nested instance — so the chip shows no check. Two marks for one state would be one too many. The radio is presentational: aria-hidden and out of the tab order, because the swatch is the control."},{name:"onClick",type:"function",default:"undefined",note:"Its PRESENCE is what makes a swatch clickable — there is no separate prop. Figma says the same thing by putting `non-clickable` on the state axis, and the Radio style has no such value: a radio that cannot be chosen is not a radio."}],states:[{state:"Hover",setBy:"interaction",note:"Elevation 0 to 1, plus the --Hover scrim over the colour."},{state:"Pressed",setBy:"interaction",note:"Back to elevation 0, with the --Pressed scrim."},{state:"Focus-visible",setBy:"interaction",note:"2px --Focus-Visible ring, 3px OUTSIDE the chip."},{state:"Selected",setBy:"prop",note:"A check on its own --Background disc, so the mark never sits on the arbitrary swatch colour and its contrast can be known. With `radio`, the radio carries it instead."},{state:"Disabled",setBy:"prop",note:"0.38 opacity."}],theming:[{collection:"Theme",inCode:"The chip takes no theme — its fill is the `color` prop. The border, scrims and focus ring resolve from whatever zone it sits in.",inFigma:"The Swatch set binds width, height AND radius to Button/Button-Height, so size follows the Component-Size mode rather than a Size axis."}],themingNotes:["The radius is the full height, so a swatch is a CIRCLE at every size."],tokens:[{name:"--Button-Height",sets:"the chip diameter",variesWith:"size and data-platform",figma:"Button/Button-Height"},{name:"--Border",sets:"the chip edge",variesWith:"surface",figma:"Border"},{name:"--Hover / --Pressed",sets:"the interaction scrim",variesWith:"surface",figma:"the Hover and Pressed overlays"},{name:"--Focus-Visible",sets:"the focus ring",variesWith:"surface",figma:"Focus-Visible"},{name:"--Legal-*",sets:"the label type",variesWith:"platform",figma:"Legal/*"}],composition:["A chip and an optional label, nothing else. Put swatches in a row yourself; there is no SwatchGroup."],accessibility:["A colour is not a name. Without a visible label, pass `aria-label` — the colour value is the fallback, and it is a poor one.","Selection is announced with aria-pressed, and only when the swatch is clickable.","The chip keeps a --Border edge so a pale colour stays visible on a pale surface."],gotchas:['It used to be `<Button swatch swatchColor={hex}>`. That never fitted: Button\'s axes are STYLE and COLOUR, and a swatch uses neither — "outline swatch" means nothing, and its colour is data rather than a palette.',"Clickability is the presence of `onClick`, not a `clickable` prop."],changes:[{version:"0.12.0",change:"Added. Replaces `<Button swatch swatchColor={hex}>`, which read --Button-Icon-Radius and so stayed square when a brand set a large corner.",migrate:"Use <Swatch color={hex} /> with onClick where it is pickable."}]}],jr=(e,t)=>({name:e,sets:t,variesWith:"theme + surface",figma:"Modes → Theme → Surface"}),Ur=[{name:"Icon",summary:"Wraps an icon glyph so it takes a system colour and size. Decorative unless you name it.",insteadUse:[{when:"It is clickable",use:"Button with iconOnly"},{when:"It is a person or entity",use:"Avatar"},{when:"It carries a count",use:"Badge"}],props:[{name:"color",type:"string",default:"default",values:["default","primary","secondary","tertiary","neutral","info","success","warning","error","quiet"],note:"Picks the Icons mode. This is the only way to recolour an icon — do not pass `style={{ color }}`."},{name:"size",type:"string",values:["xxs","xs","small","medium","large","xl","xxl"],default:"medium"},{name:"twoTone",type:"boolean",default:"false",note:"Draws the glyph in the icon colour with its secondary shapes at the variant alpha."},{name:"disabled",type:"boolean",default:"false"}],states:[{state:"Disabled",setBy:"prop",note:"An icon is decoration; it has no interactive states of its own."}],theming:[{collection:"Icons",inCode:'`color` — `<Icon color="primary">`. It resolves to `--Icons-Primary`.',inFigma:"The Icon component binds `Vector → Icon` from the Icons collection and pins nothing, so it inherits. Set the Icons mode on it or an ancestor."}],themingNotes:["The Icons collection is 3 variables across 10 modes, the same shape as Buttons. Before it existed each colour was its own variable in Surface, so a component had to bind to ONE — which is why Badge could only ever be an error badge in Figma.","In CSS there are no modes: the generator flattens each one into a name, so `--Icons-Primary` is what a consumer writes and always has been."],tokens:[{name:"--Icons-{Color}",sets:"the glyph",variesWith:"theme + surface",figma:"Icons → Icon"},{name:"--Icons-Variant-{Color}",sets:"the glyph's secondary shapes",variesWith:"theme + surface",figma:"Icons → Icon-Variant"},{name:"--Icons-On-{Color}",sets:"a glyph sitting ON that colour",variesWith:"theme + surface",figma:"Icons → On-Icon"},{name:"--Icon-Size",sets:"the glyph box",variesWith:"size mode",figma:"Icons & Avatars → Icon-Size"}],composition:['Pass a MUI icon as the child — `<Icon color="primary"><CheckIcon/></Icon>`. The wrapper is what makes it take a system colour.'],accessibility:["Icons are `aria-hidden` by default. That is correct: an icon beside a label is decoration, and announcing it repeats the label.","An icon carrying meaning on its own needs an `aria-label` — but if it is also clickable, the name belongs on the Button, not the Icon, or it is announced twice."],gotchas:["`Icons & Avatars` sounds like a colour collection and is not — it holds Icon-Size and Avatar-Size, and its modes (`in-button`, `in-check`, `xxs`…) are SIZES. A containing component pins it automatically; you never choose it.","The variant alpha is one flat number across every theme and surface (`Colors/Icon-Variant-Opacity`, 50). It was adaptive once; flattening it is what let Figma express it as alias-plus-opacity instead of 192 baked colours."]},{name:"Fab",summary:"The one primary action on a screen, floating above the content.",insteadUse:[{when:"It sits in the layout rather than over it",use:"Button"},{when:"There is more than one action",use:"SpeedDial"},{when:"It is inside a toolbar or bar",use:"Button with iconOnly"}],props:[{name:"icon",type:"ReactNode",default:"undefined"},{name:"label",type:"string",default:"undefined",note:"Shown only when `extended`."},{name:"variant",type:"string",values:["solid","outline","ghost"],default:"solid"},{name:"color",type:"string",default:"primary"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"extended",type:"boolean",default:"false",note:"Widens it to carry a label beside the icon."},{name:"ariaLabel",type:"string",default:"undefined",note:"Required unless `extended` — an icon-only FAB has no visible name."},{name:"disabled",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction",note:"Rises from elevation 3 to 4."},{state:"Pressed",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Disabled",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on the FAB or an ancestor.",inFigma:"Set the Theme mode on the `Theme-Container` layer — **not** the variant root. The root carries the drop shadows."}],themingNotes:["This is the component the shadow rule exists for. A drop shadow falls on the PAGE, so it has to read the page's theme; the fill and bevel belong to the component. Theming the root does both and tints the shadow.","The root pins `Elevation`, which IS the component's own property. Theme inherits, elevation is pinned — that is the whole split in one sentence."],tokens:[{name:"--Buttons-{Color}-Button",sets:"the fill",variesWith:"theme + surface",figma:"Buttons → Button"},{name:"--FAB-Width",sets:"diameter",variesWith:"size mode",figma:"FAB/FAB-Width"},{name:"--FAB-Icon",sets:"the glyph",variesWith:"size mode",figma:"FAB/FAB-Icon"},{name:"--FAB-Focus-Radius",sets:"the focus ring",variesWith:"size mode",figma:"FAB/FAB-Focus-Radius"}],composition:["One icon, or an icon plus a label when `extended`. Nothing else goes inside."],accessibility:['An icon-only FAB needs `ariaLabel` naming the ACTION — "Compose message", not "pencil".',"There should be one FAB per screen. Two competing primary actions is a design problem no label fixes."],gotchas:["Its icon sizes are STATED, not derived: 16 / 24 / 32 against widths of 32 / 48 / 56. The large one is 32, not width/2, so the ratio does not describe them.","Elevation 3 at rest, 4 on hover — the highest of any component except Dialog. A FAB that does not appear to float is usually one whose shadow got themed."]},{name:"Snackbar",summary:"A brief message about something that just happened, which dismisses itself.",insteadUse:[{when:"It describes the state of the page and stays",use:"Alert"},{when:"It needs a decision before anything continues",use:"Dialog"},{when:"It belongs to one field",use:"the field's validation message"}],props:[{name:"open",type:"boolean",default:"false"},{name:"color",type:"string",values:["info","success","warning","error"],default:"info"},{name:"variant",type:"string",default:"light"},{name:"anchor",type:"string",values:["top","bottom"],default:"bottom"},{name:"autoHideDuration",type:"number",default:"undefined",note:"Milliseconds. Omit it and the snackbar stays until dismissed."},{name:"action",type:"ReactNode",default:"undefined",note:"One action at most — a snackbar is not a dialog."},{name:"onClose",type:"function",default:"undefined"}],states:[{state:"Open",setBy:"prop"},{state:"Auto-hiding",setBy:"prop",note:"`autoHideDuration` starts the timer; the component calls `onClose`."}],theming:[{collection:"Theme",inCode:"`color` picks the semantic palette. A snackbar rarely wants `data-theme` — the colour is the message.",inFigma:"Set the Theme mode on `Theme-Container`. All eight colours are pinned there, one per variant, alongside `Surface-Brightest`."}],tokens:[jr("--Background","the bar"),jr("--Text","the message"),{name:"--SnackBar-Top / --SnackBar-Bottom",sets:"distance from the edge",variesWith:"—",figma:"—"}],composition:["Message as children, one action in `action`, an icon in `startDecorator`.","It positions itself from `anchor` — do not wrap it in your own fixed container."],accessibility:["A snackbar that disappears on a timer is unreadable for anyone who needs longer. Give an action or a dismiss for anything that matters.","It announces politely by default; an error should be assertive so it interrupts."],gotchas:["Its offsets read `var(--SnackBar-Top, 24px)` so a brand can move it, but nothing generates those tokens — the fallback is what ships unless a consumer defines them."]},{name:"Accordion",summary:"Collapses a section of content behind its own heading.",insteadUse:[{when:"Only one section may be open and they are peers",use:"Tabs"},{when:"The content is a sequence",use:"Stepper"},{when:"It is a menu",use:"Dropdown"}],props:[{name:"variant",type:"string",values:["solid","outlined","ghost"],default:"solid"},{name:"color",type:"string",default:"default"},{name:"surface",type:"string",default:"undefined"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"spacing",type:"number",default:"0",note:"0 joins the segments into one block; above 0 they float separately."},{name:"defaultExpanded",type:"boolean",default:"false"},{name:"disabled",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction"},{state:"Pressed",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction",note:"A lone segment gets an OUTER ring; a stacked one an inner ring, because an outer one would overlap its neighbour."},{state:"Expanded",setBy:"prop"},{state:"Disabled",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on the accordion or an ancestor.",inFigma:"Set the Theme mode on `Theme-Container`. It is UNPINNED, so an accordion inherits until you choose otherwise — the layer marks the place, it does not fix a colour."}],themingNotes:["Its structure is the model for the shadow rule: `Vertical Container` carries four drop shadows, `Theme-Container` inside it carries the fill and stroke. Theme the inner one and the shadow keeps reading the page."],tokens:[jr("--Background","the segment fill"),jr("--Border","the outline"),{name:"--Accordion-Radius",sets:"corner",variesWith:"size mode",figma:"Accordion/Accordion-Radius"},{name:"--Accordion-Focus-Radius",sets:"the outer ring",variesWith:"size mode",figma:"Accordion/Accordion-Focus-Radius"},{name:"--Accordion-Inner-Focus-Radius",sets:"the inner ring",variesWith:"size mode",figma:"Accordion/Accordion-Inner-Focus-Radius"}],composition:["A summary and a details region per segment; several segments stack into one accordion."],accessibility:["The summary is a button that toggles the details and carries `aria-expanded`.","Do not nest an accordion inside an accordion — the heading levels stop making sense."],gotchas:["Two focus radii, and they are not a mistake: `Accordion-Focus-Radius` is `radius + 3` for the outer ring, `Accordion-Inner-Focus-Radius` is `max(0, radius − 3)` for the inner one. CSS needs neither — a browser draws an outline concentric with the border — but Figma cannot do arithmetic on a variable, so both are stated."]}],Gr=(e,t)=>({name:e,sets:t,variesWith:"theme + surface",figma:"Modes → Theme → Surface"}),Xr=[{name:"Modal",summary:"Blocks the page with a task the user has to finish or abandon.",insteadUse:[{when:"It asks one question with one or two answers",use:"Dialog"},{when:"It is a message, not a task",use:"Alert or Snackbar"},{when:"It is a panel the page can carry on around",use:"Drawer"}],props:[{name:"open",type:"boolean",default:"undefined"},{name:"onClose",type:"function",default:"undefined"},{name:"title",type:"string",default:"undefined"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"layout",type:"string",values:["center","top"],default:"center"},{name:"transition",type:"string",default:"fade"},{name:"closeOnBackdrop",type:"boolean",default:"true",note:"Turn it off only when losing the work would be worse than the extra click."},{name:"showCloseButton",type:"boolean",default:"true"}],states:[{state:"Open",setBy:"prop"},{state:"Focus trapped",setBy:"context",note:"Automatic while open — do not add your own trap."}],theming:[{collection:"Theme",inCode:"`data-theme` on the modal, or wrap its content in `<Section>`.",inFigma:"Pins nothing and inherits. Set the mode on the frame around it."}],tokens:[Gr("--Background","the panel"),{name:"--Modal-Radius",sets:"corner",variesWith:"size mode",figma:"Other/Modal-Radius"},{name:"--Modal-Padding",sets:"inner padding",variesWith:"size mode",figma:"Other/Modal-Padding"},{name:"--Modal-Focus-Radius",sets:"focus ring corner",variesWith:"size mode",figma:"—"}],composition:["Title as a prop, body as children, actions at the end of the children."],accessibility:["Focus moves in on open and returns to whatever opened it on close. Both are handled.","Escape closes it. Do not intercept the key without providing another way out.","A modal with no focusable element traps keyboard users — give it at least a close button."],gotchas:["`Modal-Radius` equals `Card-Radius` rather than being its own value: a floating panel is a card that happens to float, and two numbers for one shape drift.","Elevation 5, the top of the scale, and it cannot be raised further — a modal is already above everything."]},{name:"Dialog",summary:"Asks one question and waits for the answer.",insteadUse:[{when:"It is a form or a multi-step task",use:"Modal"},{when:"Nothing needs answering",use:"Snackbar"}],props:[{name:"open",type:"boolean",default:"false"},{name:"title",type:"string",default:"undefined"},{name:"actions",type:"ReactNode",default:"undefined",note:"The answers. Two is the usual maximum."},{name:"maxWidth",type:"string",values:["xs","sm","md","lg"],default:"sm"},{name:"fullScreen",type:"boolean",default:"false"},{name:"alert",type:"boolean",default:"false",note:"Announces assertively and cannot be dismissed by the backdrop — for destructive or blocking questions."},{name:"nonModal",type:"boolean",default:"false",note:"Stops it trapping focus. Rare, and it stops being a dialog in the accessibility sense."}],states:[{state:"Open",setBy:"prop"},{state:"Focus trapped",setBy:"prop",note:"On unless `nonModal`."}],theming:[{collection:"Theme",inCode:"`data-theme` on the dialog or an ancestor.",inFigma:"Pins nothing and inherits."}],tokens:[Gr("--Background","the panel"),{name:"--Modal-Radius",sets:"corner",variesWith:"size mode",figma:"Other/Modal-Radius"}],composition:["Title, message as children, answers in `actions`."],accessibility:["The destructive answer should not be the default focus.",'Label the actions with the verb — "Delete", not "OK". "OK" to "Are you sure?" is unanswerable when read aloud.','`alert` makes it `role="alertdialog"`, which interrupts. Use it for consequences, not for confirmations.'],gotchas:["Dialog and Modal share their elevation and shadow — the FAB-Hover, Dialog and Modal levels are the same geometry. They differ by role, not by depth."]},{name:"Drawer",summary:"A panel that slides in from an edge and can be dismissed.",insteadUse:[{when:"It must be answered before anything else",use:"Modal"},{when:"It is permanent navigation",use:"Rail or Sidebar"},{when:"It rises from the bottom on a phone",use:"Sheet"}],props:[{name:"open",type:"boolean",default:"false"},{name:"anchor",type:"string",values:["left","right","top","bottom"],default:"left"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"hideBackdrop",type:"boolean",default:"false",note:"Without a backdrop it no longer reads as temporary — and it stops trapping focus."},{name:"onClose",type:"function",default:"undefined"}],states:[{state:"Open",setBy:"prop"},{state:"Focus trapped",setBy:"prop",note:"Unless `hideBackdrop`."}],theming:[{collection:"Theme",inCode:"`data-theme` on the drawer or an ancestor.",inFigma:"Pins nothing and inherits."}],tokens:[Gr("--Background","the panel"),Gr("--Border","the edge against the page")],composition:["Children are yours. A drawer adds the surface, the slide and the dismiss."],accessibility:["Escape closes it, and focus returns to the trigger.","A drawer holding navigation should be a `<nav>`, not a generic region."],gotchas:["`hideBackdrop` changes more than the visuals: without it the drawer stops trapping focus and becomes a permanent panel that happens to slide."]},{name:"Tooltip",summary:"Names or explains the control it is attached to, on hover or focus.",insteadUse:[{when:"The content is essential",use:"visible text — a tooltip is not readable on touch"},{when:"It is interactive or holds links",use:"Popover"},{when:"It reports an error",use:"the field's validation message"}],props:[{name:"title",type:"ReactNode",default:"undefined",note:"The content. Keep it to a phrase."},{name:"placement",type:"string",values:["top","bottom","left","right"],default:"bottom"},{name:"color",type:"string",default:"black-white",note:"Which Buttons mode paints the bubble. The default matches the mode Figma pins on `Button-Theme-Tooltip`; pass another palette to recolour."},{name:"arrow",type:"boolean",default:"true",note:"On by default — every Figma variant carries the arrow, and the component root uses a -2px gap to seat it against the bubble."},{name:"enterDelay",type:"number",default:"100"},{name:"leaveDelay",type:"number",default:"0"},{name:"describeChild",type:"boolean",default:"false",note:"Switches it from NAMING the child to DESCRIBING it — `aria-describedby` rather than `aria-label`. Use it when the child already has a name."}],states:[{state:"Hover",setBy:"interaction"},{state:"Focus",setBy:"interaction",note:"A tooltip that only appears on hover is unreachable by keyboard."}],theming:[{collection:"Buttons",inCode:'`color` — `<Tooltip color="primary">` resolves the bubble to `--Buttons-Primary-Button`. Defaults to `black-white`.',inFigma:"One pin, on the inner `Button-Theme-Tooltip` frame: `Buttons = black-white`. The bubble, the arrow, the label and the icon all inherit it, so that frame is the only place to change a tooltip's colour."},{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"Pins nothing and inherits — deliberately. The drop shadow sits on the component ROOT, one level above the themed frame, so it reads the ambient surface rather than the tooltip's own colour."}],tokens:[{name:"--Buttons-{Color}-Button",sets:"the bubble and its arrow",variesWith:"Buttons mode + surface",figma:"Buttons → Button"},{name:"--Buttons-{Color}-Text",sets:"the label and any icon in it",variesWith:"Buttons mode + surface",figma:"Buttons → Text"},{name:"--Buttons-{Color}-Border",sets:"the edge, outline variant only",variesWith:"Buttons mode + surface",figma:"Buttons → Border"},{name:"--Effect-Level-2",sets:"the drop shadow",variesWith:"elevation mode",figma:"Component-Elevations → AppBar, Toolbars, Menus"}],composition:["It wraps the element it describes. The child must be able to hold a ref and take focus."],accessibility:["Never put the only copy of something important in a tooltip — touch users get no hover.",'`describeChild` is the difference between replacing a control\'s name and adding to it. Naming a button "Save" that already says "Save" announces it twice.'],gotchas:["A tooltip on a `disabled` control never shows: a disabled element fires no pointer events. Wrap it in a span if the explanation matters.",'The bubble is a Buttons colour, not a surface colour. It used to read `--Background`, which painted it the colour of whatever it floated over and left no way to recolour it. `variant="light"` still works, because the Buttons tokens are surface-aware and light moves the SURFACE rather than tinting the fill.'],changes:[{version:"0.12.0",change:"Elevation is Level 2, matching the AppBar/Toolbar/Menu row rather than sitting flat.",silent:!0},{version:"0.12.0",change:"Colour defaults to `black-white`, the mode Figma pins on Button-Theme-Tooltip. The arrow now takes its width and height separately so a sideways tooltip is not drawn with a square arrow.",silent:!0}]},{name:"Table",summary:"Rows and columns of data that the reader compares across both axes.",insteadUse:[{when:"Each row is a thing rather than a set of values",use:"List"},{when:"There is one column",use:"List"},{when:"It is layout, not data",use:"Grid"}],props:[{name:"columns",type:"array",default:"undefined"},{name:"rows",type:"array",default:"undefined"},{name:"footerRows",type:"array",default:"undefined"},{name:"variant",type:"string",default:"default"},{name:"loading",type:"boolean",default:"false",note:"Draws `skeletonRows` placeholder rows rather than an empty table."},{name:"skeletonRows",type:"number",default:"3"},{name:"empty",type:"ReactNode",default:"undefined",note:"What to show when there are no rows. Without it an empty table reads as a broken one."},{name:"error",type:"ReactNode",default:"undefined"}],states:[{state:"Loading",setBy:"prop"},{state:"Empty",setBy:"prop"},{state:"Error",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"Table Header Row and Table Body Row pin nothing and inherit."}],tokens:[Gr("--Background","row fills"),Gr("--Border-Variant","the row rules"),Gr("--Hover","row hover")],composition:["Data goes in `columns` and `rows`, not as children — the component owns the markup so the header and cells stay associated."],accessibility:["Header cells must be headers, not styled body cells; that association is what lets a screen reader say which column a value is in.","Loading, empty and error each need their own message. A blank table says nothing about which it is."],gotchas:["Row separators use `--Border-Variant`, not `--Border`. Variant is decorative and carries no contrast requirement; `--Border` is for anything that outlines a control."]},{name:"List",summary:"A stack of items where each row is one thing.",insteadUse:[{when:"Rows are compared across columns",use:"Table"},{when:"Items are actions in a floating panel",use:"Menu"},{when:"Each item is a separate surface",use:"Card"}],props:[{name:"items",type:"array",default:"undefined"},{name:"orientation",type:"string",values:["vertical","horizontal"],default:"vertical"},{name:"dividers",type:"boolean",default:"false"},{name:"clickable",type:"boolean",default:"false",note:"Also sets the gap: clickable rows separate by `--Sizing-1`, non-clickable ones sit at 0 and are joined by hairlines."},{name:"selectionMode",type:"string",values:["none","single","multiple"],default:"none"},{name:"loading",type:"boolean",default:"false"},{name:"empty",type:"ReactNode",default:"undefined"},{name:"error",type:"ReactNode",default:"undefined"}],states:[{state:"Hover",setBy:"interaction",note:"Only when `clickable`."},{state:"Focus-visible",setBy:"interaction"},{state:"Selected",setBy:"prop"},{state:"Loading / Empty / Error",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"List and List Item pin nothing and inherit."}],tokens:[Gr("--Background","the row fill"),{name:"--List-Item-Radius",sets:"row corner",variesWith:"size mode",figma:"List-item/List-Item-Radius"},{name:"--List-Item-Padding",sets:"inner padding",variesWith:"size mode",figma:"List-item/List-Item-Padding"},{name:"--List-Item-Gap",sets:"the gap between rows",variesWith:"size mode",figma:"List-item/List-Item-Gap"},{name:"--List-Item-Focus-Radius",sets:"the inset focus ring",variesWith:"size mode",figma:"List-item/List-Item-Focus-Radius"},{name:"--List-Item-Default-Image-Width",sets:"the thumbnail",variesWith:"size mode",figma:"List-item/List-Item-Default-Image-Width"}],composition:["Rows carry `startDecorator` / `endDecorator`. A decorator that is itself a control needs `startDecoratorIsButton` so it becomes one rather than a click target inside a click target."],accessibility:["A clickable row is one target. A button inside it is a second, and nesting them makes the inner one unreachable — that is what the `*IsButton` props exist to avoid.","Selection announces itself; do not add your own `aria-selected`."],gotchas:["The row gap is the row padding, by rule: `listItemGap = listItemPadding`. They were both bound to `Sizing-1` in Figma, so they tracked each other by coincidence until the relationship was stated.","The focus ring is inset 2, not 1, because the row draws its own 1px border. Measured from the drawn edge it is the same 1px clear gap every inner ring has."]}],qr=(e,t)=>({name:e,sets:t,variesWith:"theme + surface",figma:"Modes → Theme → Surface"}),Yr=[{name:"AppBar",summary:"The bar across the top of an application, carrying the brand, navigation and account.",insteadUse:[{when:"It is the primary navigation down the side",use:"Rail or Sidebar"},{when:"It is the primary navigation at the bottom on a phone",use:"BottomNavigation"},{when:"It is a row of actions on a selection or a panel",use:"Toolbar"}],props:[{name:"mode",type:"string",values:["desktop","mobile"],default:"desktop"},{name:"barColor",type:"string",default:"default"},{name:"surface",type:"string",default:"Surface"},{name:"brandType",type:"string",values:["name","logo","both"],default:"name"},{name:"menuType",type:"string",values:["hamburger","none"],default:"hamburger"},{name:"loginType",type:"string",default:"login"},{name:"navLinks",type:"array",default:"['Home', 'Products', 'About']"},{name:"centerSlot / endSlot",type:"ReactNode",default:"undefined",note:"For anything the props do not cover — search, a status chip, a second action."}],states:[{state:"Scrolled",setBy:"interaction",note:"Where the bar elevates on scroll, the elevation is the bar’s own property, not the page’s."}],theming:[{collection:"Theme",inCode:"`barColor` and `surface`, or `data-theme` on an ancestor.",inFigma:"Set the Theme mode on `Theme-Container` — **not** the variant root, which carries five drop shadows and must keep reading the page."}],themingNotes:["The root pins `Elevation=Level-2`, its own property, and inherits Theme. That split is what keeps a Primary app bar from casting a Primary-tinted shadow on a neutral page.","Once a user has a design system, the AppBar inherits its parent `data-theme` rather than carrying the DinoDesign brand — the brand belongs on the landing and pre-system pages only."],tokens:[qr("--Background","the bar"),qr("--Text","links and title"),{name:"--App-Bar-Height",sets:"the bar height",variesWith:"size mode + device",figma:"Other/App-Bar-Height"}],composition:["Brand, nav and account are props. `centerSlot` and `endSlot` take anything else — do not nest a second bar."],accessibility:["It is a `<header>` with a `<nav>` inside, not a row of buttons.",'The current page link needs `aria-current="page"`; colour alone does not say which one you are on.'],gotchas:['`Other/App-Bar-Height` was `App-Bar Height` with a space until 2026-09-30. Its sibling `Nav-Bar Height` still has one, because the rule is "use the file’s name", not "hyphenate".']},{name:"Rail",summary:"A narrow column of primary destinations down the side, always visible.",insteadUse:[{when:"It slides in and can be dismissed",use:"Drawer"},{when:"It is wide and holds nested navigation",use:"Sidebar"},{when:"It is at the bottom of a phone screen",use:"BottomNavigation"}],props:[{name:"items",type:"array",default:"[]"},{name:"sections",type:"array",default:"undefined"},{name:"defaultValue",type:"number",default:"0"},{name:"expandable",type:"boolean",default:"false"},{name:"expandedWidth",type:"string",values:["partial","full"],default:"partial"},{name:"labelStyle",type:"string",values:["contained","outside"],default:"contained",note:"Whether the label sits inside the item’s target or beneath it. It changes the hit area, not just the look."},{name:"fabAction",type:"object",default:"undefined"}],states:[{state:"Hover",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction",note:"An OUTSIDE ring — the rail is the only component drawing its ring outside the node."},{state:"Selected",setBy:"context",note:"From the rail’s value, not set per item."},{state:"Expanded",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on the rail or an ancestor.",inFigma:"Nav Rail pins Theme on its variant ROOT. Nav Rail Item and Expandable Nav Rail Item pin nothing."}],tokens:[qr("--Background","the rail"),qr("--Hover","item hover"),{name:"--Rail-Width",sets:"the column",variesWith:"size mode",figma:"Other/Rail-Width"}],composition:["Items are data, not children. A `fabAction` puts a FAB at the top without nesting one yourself."],accessibility:["A `<nav>` with a list of links. The selected one needs `aria-current`.","Icon-only items need labels — `labelStyle` controls where the label shows, never whether it exists."],gotchas:["Its focus rings are drawn OUTSIDE, unlike every other component. `Nav Rail Item` insets 1px, `Expandable Nav Rail Item` sits flush top and bottom — the second is deliberate, since a wide row in a stack would otherwise overlap its neighbour."]},{name:"BottomNavigation",summary:"Three to five top-level destinations along the bottom of a phone screen.",insteadUse:[{when:"There are more than five",use:"Drawer or a More item"},{when:"They are views inside one screen",use:"Tabs"},{when:"It is a desktop layout",use:"AppBar or Rail"}],props:[{name:"items",type:"array",default:"[]"},{name:"defaultValue",type:"number",default:"0"},{name:"showLabels",type:"boolean",default:"true",note:"Icons alone are guessable at best. Turn this off only where the icons are genuinely universal."},{name:"variant",type:"string",values:["fixed","floating"],default:"fixed"},{name:"barColor",type:"string",default:"default"},{name:"fabAction",type:"object",default:"undefined",note:'Raises a FAB into the bar — the "Floating +Raised FAB" style in Figma.'}],states:[{state:"Hover",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Selected",setBy:"context"}],theming:[{collection:"Theme",inCode:"`barColor`, or `data-theme` on an ancestor.",inFigma:"Set the Theme mode on `Theme-Container`, on the **NavBar** page. The set is called `Nav-Bar` and the item `Nav Item`."}],tokens:[qr("--Background","the bar"),qr("--Text","the selected item"),qr("--Quiet","unselected items"),{name:"--Nav-Bar Height",sets:"the bar height",variesWith:"size mode + device",figma:"Other/Nav-Bar Height"}],composition:["Items are data. The FAB comes from `fabAction` rather than being placed inside."],accessibility:["A `<nav>` of links, with `aria-current` on the active destination.","Three to five items. Fewer is a Tab bar; more does not fit a thumb."],gotchas:["The Figma page is **NavBar** and the library export is **BottomNavigation** — a name pair worth knowing, since neither search finds the other.","`Other/Nav-Bar Height` keeps a space in its name. Its sibling App-Bar-Height was hyphenated; this one was not, and the studio writes whichever the file has."]},{name:"Breadcrumbs",summary:"Shows where the current page sits in the hierarchy, and offers the way back up.",insteadUse:[{when:"The steps are a sequence to complete",use:"Stepper"},{when:"They are peer views",use:"Tabs"},{when:"The hierarchy is one level deep",use:"a single back link"}],props:[{name:"separator",type:"string",default:"/"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"maxItems",type:"number",default:"4",note:"Above this the middle collapses to an ellipsis."},{name:"itemsBeforeCollapse",type:"number",default:"1"},{name:"itemsAfterCollapse",type:"number",default:"1"},{name:"condense",type:"boolean",default:"false"},{name:"backOnlyMobile",type:"boolean",default:"false",note:"Collapses to a single back link on small screens, where a full trail does not fit."}],states:[{state:"Hover",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Expanded",setBy:"interaction",note:"Clicking the ellipsis reveals the collapsed middle."}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"Breadcrumb-Segments and Breadcrumbs-separator pin nothing and inherit."}],tokens:[qr("--Hotlink","the links"),qr("--Text","the current page"),qr("--Quiet","the separator")],composition:["Each crumb is a child. The last one is the current page and is not a link."],accessibility:['A `<nav>` with `aria-label="Breadcrumb"`, an ordered list inside.','The last crumb carries `aria-current="page"` and must not be a link — linking to where you already are is a dead end for keyboard users.'],gotchas:["The separator is decorative and hidden from screen readers. Do not replace it with a character that carries meaning."]},{name:"Pagination",summary:"Moves between pages of a long result set.",insteadUse:[{when:"Results load as the user scrolls",use:"no control at all"},{when:"It is a sequence of steps",use:"Stepper"},{when:"There are only a few pages",use:"Tabs"}],props:[{name:"count",type:"number",default:"10"},{name:"defaultPage",type:"number",default:"1"},{name:"theme / surface",type:"string",default:"undefined",note:"Puts data-theme / data-surface on the root. Absent means inherit."},{name:"color",type:"string",default:"default"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"siblingCount",type:"number",default:"1"},{name:"boundaryCount",type:"number",default:"1"},{name:"showFirstButton / showLastButton",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Current page",setBy:"prop"},{state:"Disabled",setBy:"prop",note:"Previous on page 1, Next on the last."}],theming:[{collection:"Theme",inCode:"`theme` / `surface` props, or `data-theme` on an ancestor.",inFigma:"Pagination Number pins nothing and inherits."}],tokens:[qr("--Text","page numbers"),qr("--Hover","hover"),qr("--Background","the current page")],composition:["Page numbers are generated from `count` — do not render them yourself."],accessibility:['A `<nav>` labelled "Pagination", with `aria-current="page"` on the current number.','Each number needs an accessible name that says what it does — "Go to page 4", not "4".'],gotchas:["`siblingCount` and `boundaryCount` decide how many numbers show either side of the current page and at the ends. Setting both to 0 leaves only arrows, which works but gives no sense of position."]},{name:"TreeView",summary:"A hierarchy that expands and collapses in place.",insteadUse:[{when:"It is flat",use:"List"},{when:"Each branch is a panel of content",use:"Accordion"},{when:"It is navigation with two levels",use:"Rail with sections"}],props:[{name:"items",type:"array",default:"[]"},{name:"defaultExpanded",type:"array",default:"[]"},{name:"selectionMode",type:"string",values:["none","single","multiple"],default:"none"}],states:[{state:"Hover",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction",note:"A 3px INNER ring, inset 1px — rows sit shoulder to shoulder, so an outer ring would overlap."},{state:"Expanded",setBy:"prop"},{state:"Selected",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"TreeView and Menu Item pin nothing and inherit."}],tokens:[qr("--Text","labels"),qr("--Hover","row hover"),{name:"--Menu-Item-Radius",sets:"the row corner",variesWith:"size mode",figma:"Menu/Menu-Item-Radius"}],composition:["Nesting is data, not markup — a node carries its children rather than a TreeView containing a TreeView."],accessibility:["Arrow keys move and expand; Tab enters and leaves the whole tree, not each row.","Every node reports its level and how many siblings it has. That is what makes a tree navigable without sight of the indentation."],gotchas:["Indentation is a fixed ladder: 8px at level 0, then 28px per level. It is a stated table, not a multiplier, so a deep tree does not run off the panel."]}],Zr=(e,t)=>({name:e,sets:t,variesWith:"theme + surface",figma:"Modes → Theme → Surface"}),Jr=[{name:"theme",type:"string",default:"undefined",note:"Sets `data-theme` on the root. Absent means INHERIT — never pass an empty string, which pins the component to a zone that defines nothing."},{name:"surface",type:"string",default:"undefined"}],$r={name:"Stepper",summary:"Shows progress through a sequence and where the user is in it.",insteadUse:[{when:"The views are peers in any order",use:"Tabs"},{when:"It is a percentage",use:"Progress"},{when:"It is a hierarchy",use:"Breadcrumbs"}],props:[...Jr,{name:"activeStep",type:"number",default:"0"},{name:"orientation",type:"string",values:["horizontal","vertical"],default:"horizontal"},{name:"color",type:"string",default:"primary"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"clickable",type:"boolean",default:"false",note:"Lets the user jump back. Only sensible where steps can be revisited."},{name:"dashedIncomplete",type:"boolean",default:"false"}],states:[{state:"Complete / Current / Incomplete",setBy:"context",note:"Derived from `activeStep`, never set per step."},{state:"Hover",setBy:"interaction",note:"Only when `clickable`."},{state:"Focus-visible",setBy:"interaction"}],theming:[{collection:"Theme",inCode:"`theme` / `surface` props, or `data-theme` on an ancestor.",inFigma:"Count Step and No-Count Step pin Theme on their variant ROOT; the Stepper set pins it on a nested Count Step. Both are candidates for a named `Theme-*` layer."}],tokens:[{name:"--Buttons-{Color}-Button",sets:"a completed step",variesWith:"theme + surface",figma:"Buttons → Button"},Zr("--Border","the connecting line"),{name:"--Step bar",sets:"the line thickness",variesWith:"size mode",figma:"Other/Step bar"},{name:"--No Count Step",sets:"a dot step",variesWith:"size mode",figma:"Other/No Count Step"}],composition:["Steps are children; the connecting line is drawn by the stepper, not by you."],accessibility:["A non-clickable stepper is a status display, not a control — it should not be in the tab order.",'The current step needs `aria-current="step"`. Colour alone does not say which one you are on.'],gotchas:["A step signalling focus by lightening its fill is not a focus indicator: the two colours measured 1.46:1 and 1.55:1 against each other, where an indicator needs 3:1. The ring carries it; the fill stays put."]},Kr={name:"Slider",summary:"Picks a value from a range by dragging, where the exact number matters less than the feel of it.",insteadUse:[{when:"The exact value matters",use:"NumberField"},{when:"There are a few discrete options",use:"RadioGroup or ButtonGroup"},{when:"It is on or off",use:"SwitchInput"}],props:[...Jr,{name:"variant",type:"string",default:"primary"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"value / defaultValue",type:"number",default:"undefined"},{name:"min",type:"number",default:"0"},{name:"max",type:"number",default:"100"},{name:"onChange",type:"function",default:"undefined",note:"Fires continuously while dragging."},{name:"onChangeCommitted",type:"function",default:"undefined",note:"Fires once on release — use this for anything expensive."}],states:[{state:"Hover",setBy:"interaction"},{state:"Dragging",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction",note:"A DUAL ring: a blue inner and a background-coloured outer, so it survives any backdrop."},{state:"Disabled",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`theme` / `surface` props, or `data-theme` on an ancestor.",inFigma:"The Slider sets pin nothing and inherit."}],themingNotes:["The thumb recolours on its own: it reads `--Border` and `--Background`, which are zone tokens, so moving the zone moves the thumb without the component knowing about themes."],tokens:[{name:"--Buttons-{Color}-Button",sets:"the filled track",variesWith:"theme + surface",figma:"Buttons → Button"},Zr("--Border","the thumb and empty track"),Zr("--Background","the thumb's border"),{name:"--Slider-Handle-Radius",sets:"the thumb corner",variesWith:"size mode",figma:"Slider/Slider-Handle-Radius"},{name:"--Rail",sets:"the track thickness",variesWith:"size mode",figma:"Slider/Rail"}],composition:["Labels and the value display are the slider’s own; a separate NumberField beside it is a different pattern."],accessibility:["Arrow keys move by one step, Page Up/Down by a larger one, Home and End to the ends. All handled.",'It needs an accessible name and announces min, max and current value — a bare slider says "50" with no unit or meaning.'],gotchas:["The dual focus ring is deliberate: a single-colour ring disappears on a background close to its own colour. The outer ring is bound to `--Background`, so on a dark surface it goes dark and the pair still separates."]},_r={name:"Rating",summary:"Shows or collects a score, usually out of five.",insteadUse:[{when:"It is a percentage or progress",use:"Progress"},{when:"It is one choice from several",use:"RadioGroup"}],props:[...Jr,{name:"defaultValue",type:"number",default:"undefined"},{name:"max",type:"number",default:"5"},{name:"precision",type:"number",default:"1",note:"0.5 allows half stars."},{name:"readOnly",type:"boolean",default:"false",note:"A displayed score, not an input. It leaves the tab order."},{name:"color",type:"string",default:"default"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"}],states:[{state:"Hover",setBy:"interaction",note:"Previews the score under the pointer."},{state:"Focus-visible",setBy:"interaction"},{state:"Selected / Half / Empty",setBy:"prop"},{state:"Read-only",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`theme` / `surface` props, or `data-theme` on an ancestor.",inFigma:"Star pins Theme on its variant ROOT; the Rating set pins it on a nested Star, which looks like the pin landed on whatever was selected."}],tokens:[{name:"--Buttons-{Color}-Button",sets:"a filled star",variesWith:"theme + surface",figma:"Buttons → Button"},Zr("--Border","an empty star"),{name:"--Rating",sets:"the star box",variesWith:"size mode",figma:"Other/Rating"},{name:"--Rating-Icon",sets:"the glyph",variesWith:"size mode",figma:"Other/Rating-Icon"}],composition:["Stars are generated from `max` — do not render them yourself."],accessibility:["An interactive rating is a radio group: arrow keys move between values.",'`readOnly` must announce the score as text — "3 out of 5", not five graphics.'],gotchas:["Its focus ring is the 3px inner kind, inset 1px, because stars sit shoulder to shoulder and an outer ring would overlap the neighbour."]},en={name:"Loader",summary:"Says the page is working when there is nothing yet to show.",insteadUse:[{when:"The shape of the result is known",use:"Skeleton"},{when:"Progress is measurable",use:"Progress"},{when:"It is one control that is busy",use:"CircularProgress inside it"}],props:[...Jr,{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"color",type:"string",default:"primary"},{name:"message",type:"string",default:"'Loading...'"}],states:[{state:"Spinning",setBy:"context",note:"A loader has one state; you mount it or you do not."}],theming:[{collection:"Theme",inCode:"`theme` / `surface` props, or `data-theme` on an ancestor.",inFigma:"Loader pins nothing and inherits."}],tokens:[{name:"--Buttons-{Color}-Button",sets:"the spinner",variesWith:"theme + surface",figma:"Buttons → Button"},{name:"--Loader",sets:"the spinner size",variesWith:"size mode",figma:"Other/Loader"}],composition:["The message is a prop. A loader with no message is a spinner with no explanation."],accessibility:['Announce it politely with `role="status"` — assertive interrupts whatever the user is reading.','The message should say what is loading. "Loading…" alone tells a screen-reader user nothing about what to expect.'],gotchas:["Prefer a Skeleton where the result has a known shape: it holds the layout and stops the page jumping when content arrives."],changes:[{version:"0.12.0",change:"Exported for the first time, with SkeletonLoader, DotsLoader, PageLoader, OverlayLoader and SkeletonCard."}]},tn={name:"Divider",summary:"A rule separating two regions, optionally with a label in it.",insteadUse:[{when:"You need space, not a line",use:"Spacing"},{when:"It separates rows in a list",use:"List's dividers prop"},{when:"It is a section heading",use:"a heading"}],props:[{name:"orientation",type:"string",values:["horizontal","vertical"],default:"horizontal"},{name:"color",type:"string",default:"default"},{name:"size",type:"string",values:["small","medium","large"],default:"small"},{name:"indicatorText",type:"string",default:"undefined",note:'A label sitting in the rule — "OR" between two sign-in options.'},{name:"indicatorStyle",type:"string",values:["outline","solid"],default:"outline"},{name:"textAlign",type:"string",values:["left","center","right"],default:"center"}],states:[{state:"None",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"Divider pins nothing and inherits."}],tokens:[Zr("--Border-Variant","the rule"),{name:"--Divider",sets:"its thickness",variesWith:"size mode",figma:"Other/Divider"}],composition:["A label goes in `indicatorText`, not as a child beside the rule."],accessibility:["A decorative divider should be hidden from screen readers; one with `indicatorText` is a separator with a label and announces."],gotchas:["It uses `--Border-Variant`, not `--Border`. Variant is decorative and carries no contrast requirement; `--Border` is reserved for anything outlining a control, which must hold 3:1."]},an={name:"Ratio",summary:"Holds a box at a fixed aspect ratio while its content loads or resizes.",insteadUse:[{when:"The content sets its own size",use:"nothing — let it"},{when:"You want a placeholder while loading",use:"Skeleton"}],props:[{name:"ratio",type:"string",default:"1:1",note:"Written as `16:9`, not a decimal."},{name:"fit",type:"string",values:["width","height"],default:"width",note:"Which axis is driven; the other follows from the ratio."},{name:"variant",type:"string",default:"default"},{name:"padding",type:"string",default:"none"}],states:[{state:"None",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"Ratio - Fill Horizontal and Ratio - Fill Vertical pin nothing."}],tokens:[Zr("--Background","the box while empty")],composition:["One child, which fills the box."],accessibility:["It is layout. An image inside still needs its own `alt`."],gotchas:["Two Figma sets, Horizontal and Vertical, at 21 variants each — they correspond to `fit`, not to `ratio`."]},rn=(e,t)=>({name:e,sets:t,variesWith:"theme + surface",figma:"Modes → Theme → Surface"}),nn=(e="an ancestor")=>[{collection:"Theme",inCode:`\`data-theme\` on ${e}.`,inFigma:"No Figma counterpart — it inherits whatever zone it is dropped into."}],on=(e,t,a,r,n,o,i,l,s)=>({name:e,summary:t,insteadUse:a,props:r,states:n,theming:nn(),tokens:o,composition:i,accessibility:l,gotchas:s}),ln=[{name:"Button",summary:"Triggers an action. Not for navigation — a thing that changes the URL is a Link.",insteadUse:[{when:"It navigates somewhere",use:"Link"},{when:"It is one of a set of mutually exclusive options",use:"ButtonGroup"},{when:"It is the primary action floating over content",use:"Fab"},{when:"It toggles a single on/off value",use:"SwitchInput"}],props:[{name:"variant",type:"string",default:"default",values:["default","primary","secondary","tertiary","neutral","info","success","warning","error"],note:"Colour and SHAPE are separate axes, and only `-outline` is a suffix. Every colour takes `{color}` and `{color}-outline`; `ghost` is written BARE, with no colour prefix, because it reads from the text role (`--Hotlink` for text, `--Quiet` for icon-only) rather than a palette. `text` is an ALIAS of `ghost`, not a fourth shape — Figma's Style axis is solid / outline / ghost. There is no `primary-ghost`: an unknown variant warns and renders the default. **The default is `default`, not `primary`** — use `primary` only where the design explicitly marks it."},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"iconOnly",type:"boolean — one value of Figma's Type axis",default:"false",note:"Figma models TYPE as one axis with four exclusive values — text | iconOnly | letterNumber | Avatar. Code splits it into three independent booleans (`iconOnly`, `letterNumber`, `avatar`), with `text` being all three false, so the code can express combinations the design cannot: setting two at once is undefined. Pick exactly one. Requires an `aria-label`: the library dev-warns without one."},{name:"elevated",type:"boolean",default:"false",note:"Raises it one elevation level; a button is flat at rest and earns its shadow by being hovered."},{name:"selected",type:"boolean",default:"false",note:"For a toggled-on button in a group. Suppresses the hover lift so a selected button does not animate when hovered again."},{name:"fullWidth",type:"boolean — Figma's Fit axis",default:"false",note:"Fit=default hugs the label; Fit=fullWidth stretches to the container. Ignored for iconOnly and letterNumber, which are square by definition.",note:"Text buttons only. It is IGNORED on `iconOnly` and `letterNumber` (Button.js:476), and Figma matches by offering `Fit` only on `Type=text` — there is no such thing as a full-width icon button."},{name:"disabled",type:"boolean",default:"false"},{name:"startDecorator / endDecorator",type:"ReactNode",default:"undefined",note:"An icon OR an avatar, before or after the label. Figma models these as the four booleans start-icon, start-avatar, end-icon, end-avatar. (This row read `startIcon / endIcon` until it was checked against the component — those props do not exist.)"},{name:"avatar",type:"boolean",default:"false",note:"Type=Avatar in Figma. The child is an initial or a person icon; the button becomes a circle."},{name:"letterNumber",type:"boolean",default:"false",note:"Type=letterNumber in Figma — a single letter or digit. Needs an `aria-label`: the glyph is not a name."},{name:"swatch",type:"boolean",default:"false",note:"A colour chip, filled from `swatchColor`. Not in the Figma Type axis."}],states:[{state:"Hover",setBy:"interaction"},{state:"Pressed",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction",note:"3px ring, inset 1px from the edge."},{state:"Disabled",setBy:"prop",note:"The `disabled` prop."},{state:"Selected",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on the button, or on any ancestor — it inherits.",inFigma:"The Button component pins no Theme mode, so it inherits too. Set the mode on the frame it sits in."},{collection:"Buttons",inCode:'`variant` picks the palette — `variant="success"`.',inFigma:"Set the Buttons mode. Colour is not a variant axis in Figma either — it arrives as a mode."}],themingNotes:['Colour and theme are different things. `variant="success"` picks a palette; a theme moves the whole surface, including the text and border tones that have to stay readable on it.',"A button carries no shadow at rest, so theming it is safe. Components that DO — Fab, Chip, AppBar — pin the theme on an inner node instead, so the shadow keeps reading the page."],tokens:[{name:"--Buttons-{Color}-Button",sets:"the fill",variesWith:"theme + surface",figma:"Modes → Theme → Buttons"},{name:"--Buttons-{Color}-Border",sets:"the border",variesWith:"theme + surface",figma:"Modes → Theme → Buttons"},{name:"--Button-Height",sets:"height",variesWith:"size mode + device",figma:"Button/Button-Height"},{name:"--Button-Radius",sets:"corner",variesWith:"size mode",figma:"Button/Button-Radius"},{name:"--Button-Focus-Radius",sets:"focus ring corner",variesWith:"size mode",figma:"Button/Button-Focus-Radius"},{name:"--Button-Border-Width",sets:"border thickness",variesWith:"—",figma:"Button/Button-Border-Width"},{name:"--Button-Padding",sets:"horizontal padding",variesWith:"size mode",figma:"Button/Button-Padding"}],composition:["Icons go in `startIcon` / `endIcon`, not as children.","A `Badge` anchors to the corner when `badge` is set — do not wrap the button yourself."],accessibility:["An icon-only button needs `aria-label`; a text button must **not** have one, or it is announced twice.",'Name the ACTION, not the glyph: `aria-label="Delete item"`, never `aria-label="trash"`.','A name that says nothing — `"button"`, `"JD"`, `"3"` — is an error, not a pass. It satisfies every automated checker and silences the dev warning.'],gotchas:["`--Button-Border-Width` is 1px and load-bearing: Figma computes seven other tokens from it as `outer - (border x 2)`."],changes:[{version:"0.12.0",change:"`swatch` and `swatchColor` are retired — use the Swatch component. A swatch uses neither of Button's axes: its colour is arbitrary data from a picker rather than a palette, and it has no solid / outline / ghost shape. Figma draws Swatch as its own component, so Button/Button-Swatch has no component left to serve.",migrate:"Use <Swatch color={hex} /> — and it fixes the corner, which read --Button-Icon-Radius and so stayed square when a brand set a large radius.",silent:!0},{version:"0.12.0",change:"A badged Button no longer derives a badge size from its own. It used to synthesise one, so every <Button badge> tripped Badge's removed-prop warning for a value the caller never wrote.",silent:!0},{version:"0.9.0",change:"The `-light` shape was removed. It painted --<C>-Color-11, a tinted fill that was never a shape in the design — shape is solid / outline / ghost / text, and colour arrives as a Buttons mode.",migrate:"Use the solid variant of that colour, or an outline on a brighter surface.",silent:!0}]},{name:"Tabs",summary:"Switches between views in the same place. The tab list stays put; only the panel changes.",insteadUse:[{when:"The views are sequential",use:"Stepper"},{when:"Selecting changes the page or URL",use:"Link or a nav component"},{when:"Panels can be open at once",use:"Accordion"}],props:[{name:"value / defaultValue",type:"number | string",default:"0",note:"Controlled with `value` + `onChange`, uncontrolled with `defaultValue`."},{name:"orientation",type:"string",values:["horizontal","vertical-left","vertical-right"],default:"horizontal",note:"`vertical` is kept as an alias for `vertical-right`. It decides which edge both the baseline and the indicator sit on."},{name:"baseline",type:"boolean",default:"true",note:"The 1px rule the tabs sit on. Turn it off where the container already separates them — an AppBar's own edge, for instance."},{name:"variant",type:"string",values:["standard","solid","light","dark"],default:"standard"},{name:"color",type:"string",default:"primary"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"scrollable",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction",note:"Draws the indicator at 50%, previewing where selection will land."},{state:"Pressed",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Selected",setBy:"context",note:"Derived from the Tabs `value`, never set on a Tab."},{state:"Disabled",setBy:"prop",note:"On the individual `Tab`."}],theming:[{collection:"Theme",inCode:"`TabList` carries the zone: a `variant` other than `standard` sets `data-theme` + `data-surface` for every tab inside.",inFigma:"Neither the Tabs nor the Tab set pins a Theme mode — both inherit. Set the mode on the frame holding the Tabs instance."},{collection:"Theme",inCode:"`standard` sets neither, so it inherits the surface it is dropped on.",inFigma:"Same behaviour, and the reason nothing is pinned: a tab bar usually belongs to the region around it."}],tokens:[{name:"--Border-Variant",sets:"the 1px baseline",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Buttons-{Color}-Border",sets:"the 2px indicator",variesWith:"theme + surface",figma:"Modes → Theme → Buttons"},{name:"--Text",sets:"selected label",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Quiet",sets:"unselected label",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Hover",sets:"hover background",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Pressed",sets:"pressed background",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Focus-Visible",sets:"the 3px focus ring",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Button-Height",sets:"a tab's minimum height",variesWith:"size mode + device",figma:"Button/Button-Height"}],composition:["`<Tabs>` wraps `<TabList>` with `<Tab>` children, then `<TabPanel>` per view.","Icons go in `startDecorator` / `endDecorator` on a `Tab`."],accessibility:["Roles, `aria-selected` and arrow-key navigation are handled — do not add them.","An icon-only tab needs an `aria-label`, same rule as Button."],gotchas:["Three thicknesses, deliberately: **baseline 1px, indicator 2px, focus ring 3px**. Each has been collapsed into another at some point.","The focus ring uses `outline-offset: -4px`, not `-3px`. The offset is measured to the outline's INNER edge, so a 3px ring at -3px lands flush; -4px leaves the 1px gap the design draws.","The hover mark is 50% of the indicator's own token via `color-mix`, not `--Border-Variant` — that is the baseline's token, and using it would read as a thicker baseline rather than a hovered tab."]},{name:"Card",summary:"A surface that groups related content. Clickable only when the whole card is one target.",insteadUse:[{when:"You only need a background",use:"Section or Box"},{when:"It is a row in a list",use:"ListItem"},{when:"It floats above everything and traps focus",use:"Modal"}],props:[{name:"variant",type:"string",values:["solid","outlined","ghost"],default:"solid"},{name:"color",type:"string",default:"default"},{name:"surface",type:"string",default:"undefined",note:'Overrides the inner content surface. A default-color card uses `Container`; pass `surface="Surface"` when the card is genuinely a Surface-level region, so `--Header` resolves to the Surface tone.'},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"orientation",type:"string",values:["vertical","horizontal"],default:"vertical"},{name:"clickable",type:"boolean",default:"false",note:"Makes the whole card a target. Without it the card is not focusable and gets no hover or pressed state."},{name:"elevated",type:"boolean",default:"false"},{name:"selected",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction",note:"Only when `clickable`."},{state:"Pressed",setBy:"interaction",note:"Only when `clickable`."},{state:"Focus-visible",setBy:"interaction",note:"A 2px ring sitting 3px OUTSIDE the card — outward, unlike Tabs."},{state:"Selected",setBy:"prop"},{state:"Disabled",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on the card, or wrap it in `<Section>`.",inFigma:"The Card set pins no Theme mode — it inherits. Set the mode on the frame around it."},{collection:"Theme",inCode:'`surface="Surface"` when the card is a Surface-level region rather than a Container.',inFigma:"`Card Content` pins `Surface=Container`, which is what makes the inner content read Container tones. That is the node to change if a card should be a Surface."}],themingNotes:["Never `style={{ background }}`. It paints the box and leaves the text and borders on the parent's tone, which breaks the moment the surface flips dark."],tokens:[{name:"--Background",sets:"the card fill",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Text",sets:"body copy",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Border",sets:"the outline",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Card-Radius",sets:"corner",variesWith:"size mode",figma:"Card/Card-Radius"},{name:"--Card-Padding",sets:"inner padding",variesWith:"size mode",figma:"Card/Card-Padding"},{name:"--Card-Inner-Radius",sets:"a nested surface corner",variesWith:"size mode",figma:"Card/Card-Inner-Radius"},{name:"--Card-Focus-Radius",sets:"focus ring corner",variesWith:"size mode",figma:"Card/Card-Focus-Radius"}],composition:["Children are yours — the card adds padding and a surface, nothing else.",'A card inside a card should be `variant="outlined"`; two nested solid surfaces read as one.'],accessibility:["A `clickable` card is a button: it gets a role, focus and keyboard activation. A non-clickable one is a plain region.","Do not put a separate link inside a clickable card — nested targets are unreachable by keyboard."],gotchas:["The focus ring is `Card-Radius + 3` because it sits 3px outside. Tabs insets its ring instead, so the sign is opposite — a ring that crosses the card's own curve is this arithmetic backwards.","`Card-Radius` is per size (small / medium / large) and so is its focus radius. A single focus radius is correct for exactly one of the three."]},...Vr,...Ur,...Xr,...Yr,...[$r,Kr,_r,en,{name:"Link",summary:"Navigates. If it does not change where you are, it is a Button.",insteadUse:[{when:"It performs an action",use:"Button"},{when:"It looks like a button and navigates",use:"Link styled as one — the element follows the behaviour"}],props:[{name:"href",type:"string",default:"undefined"},{name:"target",type:"string",default:"undefined",note:"With `_blank`, say so in the text — an unexpected new tab is disorienting."},{name:"textStyle",type:"string",default:"body"},{name:"color",type:"string",default:"primary"},{name:"disabled",type:"boolean",default:"false"}],states:[{state:"Hover",setBy:"interaction",note:"The underline THICKENS. The colour does not change."},{state:"Visited",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"Link and Hotlink Group pin nothing and inherit."}],tokens:[{name:"--Hotlink",sets:"the link colour",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Hotlink-Visited",sets:"a visited link",variesWith:"theme + surface",figma:"Modes → Theme → Surface"}],composition:['The text is the child. Link text should say where it goes — "Read the pricing guide", never "click here".'],accessibility:["Link text must make sense read alone, out of context — screen reader users list links without the surrounding sentence.","A link that opens a new tab should say so in its text or its accessible name."],gotchas:["**Links do not change colour on hover** — the underline thickens instead. The system emits no hover tone for links, and inventing one would put an unverified value on text carrying a 4.5:1 requirement.","The library reads `--Link` / `--Link-Visited`, which nothing generates, and falls back to `--Hotlink` / `--Hotlink-Visited`, which is what the studio actually emits. Define the Link names yourself or rely on the fallback."]},{name:"Tag",summary:"A short label attached to something. It is not a control.",insteadUse:[{when:"It can be clicked, selected or dismissed",use:"Chip"},{when:"It is a count on another element",use:"Badge"},{when:"It is the status of the whole page",use:"Alert"}],props:[{name:"color",type:"string",default:"primary"},{name:"width",type:"string",values:["hug","fill"],default:"hug"},{name:"allCaps",type:"boolean",default:"false"}],states:[{state:"None",setBy:"prop",note:"A tag has no states. If it needs one, it is a Chip."}],theming:[{collection:"Theme",inCode:"`color`, or `data-theme` on an ancestor.",inFigma:"Tag pins nothing on its container; its variants are named per theme."}],tokens:[{name:"--Tag-BG",sets:"the fill",variesWith:"theme + surface",figma:"Modes → Theme → Surface"},{name:"--Tag-Text",sets:"the label",variesWith:"theme + surface",figma:"Modes → Theme → Surface"}],composition:["Label as the child. No icons, no dismiss — those make it a Chip."],accessibility:["A tag is text. It needs no role, and giving it one implies an interaction it does not have.","Its text carries a 4.5:1 requirement against its own background, which is why `--Tag-Text` is generated against `--Tag-BG` rather than the page."],gotchas:["`--Tag-BG` is NOT held to 3:1 against the page. It is a background for text, not a control outline, so the contrast that matters is the text on it."],changes:[{version:"0.12.0",change:"Exported for the first time. Tag was never in the package index — not renamed, not deprecated, just never exported — while src/components/Tag/ carried the component and its tests.",migrate:"Use Tag for a status label. Chip is for something selectable or dismissible."}]},tn,an],...[{name:"Select",summary:"Picks one or more values from a fixed list.",insteadUse:[{when:"The user types and the list narrows",use:"Autocomplete"},{when:"There are five or fewer options",use:"RadioGroup"},{when:"The list is actions, not values",use:"Menu"}],props:[{name:"options",type:"array",default:"[]"},{name:"defaultValue",type:"string",default:"''"},{name:"label",type:"string",default:"undefined"},{name:"labelPosition",type:"string",values:["top","floating"],default:"top"},{name:"variant",type:"string",default:"outline",note:"The `light` variant was removed — see the Button note on `-light`."},{name:"color",type:"string",default:"primary"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"mode",type:"string",values:["standard","multiselect","searchable"],default:"standard"}],states:[{state:"Hover",setBy:"interaction"},{state:"Pressed",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Open",setBy:"interaction"},{state:"Disabled",setBy:"prop"}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"Neither `Select` nor `SelectMenu` pins a Theme mode. Set it on the frame around them."}],themingNotes:["In Figma the trigger and the panel are separate sets: `Select` is a Button instance with `type = default | multiselect | searchable`, `SelectMenu` is the panel it opens — and the panel is itself a TreeView instance built from Menu Item."],tokens:[rn("--Border","the trigger outline"),rn("--Text","the chosen value"),rn("--Quiet","the placeholder"),{name:"--Input-Height",sets:"the trigger height",variesWith:"size mode + device",figma:"Input/Input-Height"},{name:"--Dropdown-Frame-Radius",sets:"the panel corner",variesWith:"size mode",figma:"Menu/Dropdown-Frame-Radius"}],composition:["Options are data. The panel is the component’s own — do not place a Menu beside it."],accessibility:['It needs a label. A select showing "Choose…" with no label is unlabelled.',"Arrow keys move through options, Enter picks, Escape closes without changing the value.","Multiselect must announce how many are chosen, not just the first."],gotchas:["`--Dropdown-Frame-Radius` is `min(Input-Radius, Card-Radius, 16px)` in pixels, not a percent: the panel follows the input it opens from, is never rounder than the cards it floats above, and caps at 16 because rows are full-bleed and a larger corner clips the first and last row’s hover."]},{name:"Menu",summary:"A list of actions opened from a control.",insteadUse:[{when:"It picks a value for a form",use:"Select"},{when:"It is permanent navigation",use:"Rail or Sidebar"},{when:"It holds arbitrary content, not a list",use:"Popover"}],props:[{name:"variant",type:"string",default:"outline"},{name:"color",type:"string",default:"default"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"}],states:[{state:"Open",setBy:"context",note:"From the `Dropdown` root, which owns the state."},{state:"Hover / Focus-visible",setBy:"interaction",note:"Per item."},{state:"Disabled",setBy:"prop",note:"Per `MenuItem`."}],theming:[{collection:"Theme",inCode:"`data-theme` on an ancestor.",inFigma:"`Menu Item` pins nothing and inherits. It has its own page because TreeView and SelectMenu both build from it."}],tokens:[rn("--Background","the panel"),rn("--Hover","row hover"),{name:"--Dropdown-Frame-Radius",sets:"the panel corner",variesWith:"size mode",figma:"Menu/Dropdown-Frame-Radius"},{name:"--Menu-Item-Radius",sets:"a row corner",variesWith:"size mode",figma:"Menu/Menu-Item-Radius"}],composition:["Always `<Dropdown>` as the root — it supplies the open state through context. A `<Menu>` on its own reads the default context, whose `open` is false, so it renders NOTHING with no warning.","Then `<MenuButton>` as the trigger and `<MenuItem>` / `<MenuDivider>` inside."],accessibility:["The trigger carries `aria-haspopup`, `aria-expanded` and `aria-controls`; the panel is a `menu` of `menuitem`s. All handled.","Arrow keys move, Escape closes and returns focus to the trigger."],gotchas:["**It does not portal.** The panel is `position: absolute` inside the Dropdown wrapper, and z-index cannot lift a positioned element out of an `overflow: hidden` or transformed ancestor — so inside a scrolling container or a clipped card it is cut off. Use the portal pattern for those, and tag it `MISSING-LIB-COMPONENT: Popover`.",'Its 18 failing ARIA tests are TEST bugs: they assert on `getByText(...)`, which returns the inner Typography `<p>`, while the ARIA attributes are correctly on the ancestor `<button>`. Do not "fix" the component to satisfy them.']},{name:"CodeBlock",summary:"A block of code, a shell command or a copyable URL, with its own copy button.",insteadUse:[{when:"It is one word of code inside a sentence",use:"inline `code` in the Markdown"},{when:"You only need the copy affordance",use:"CopyButton"}],props:[{name:"code",type:"string",default:"''",note:"The text shown AND the text copied — they are the same string, so what the user pastes is what they read."},{name:"language",type:"string",default:"'JSX'",note:'The header label: `"bash"`, `"JSX"`, `"CSS"`, `"URL"`. A label, not a syntax highlighter.'},{name:"showCopy",type:"boolean",default:"true"},{name:"showHeader",type:"boolean",default:"true"},{name:"maxHeight",type:"string | number",default:"undefined",note:"Caps the code area and scrolls past it."},{name:"wrap",type:"boolean",default:"false",note:"Wrap long lines instead of scrolling horizontally."}],states:[{state:"Copied",setBy:"interaction",note:"The component owns the flag, the confirmation and the timer."}],theming:[{collection:"Theme",inCode:'None to set. The root declares `data-theme="Neutral"` + `data-surface="Surface-Dimmest"` itself, so the dark region follows the brand\'s own neutrals.',inFigma:"The component pins the same pair. Change the Neutral ramp, not this component, to move it."}],tokens:[rn("--Background","the dark code region — via Surface-Dimmest"),rn("--Text","the code"),rn("--Border","the edge and the header rule")],composition:["It brings its own copy button, confirmation and timer, so the surrounding component should NOT keep a `copied` flag of its own."],accessibility:['The copy control is a button with a name, not an icon alone — "Copy code", not "copy".',"Copying is announced; a purely visual tick tells a screen-reader user nothing."],gotchas:['Its dark region is NOT a hardcoded colour. The wrapper declares `data-theme="Neutral"` + `data-surface="Surface-Dimmest"`, so it follows the brand\'s neutrals and stays legible in both modes. Do not override its background — that is the one change that breaks dark mode for it.',"Any block of code, shell command or copyable URL uses this. Hand-rolling a `<pre>`/`<code>` panel with its own copy button is what it replaces, and the studio still has ten of those."]},on("Autocomplete","A text field whose list narrows as the user types.",[{when:"The list is short and fixed",use:"Select"},{when:"It searches a page rather than picking a value",use:"SearchField"}],[{name:"options",type:"array",default:"[]"},{name:"defaultValue",type:"object",default:"null"},{name:"placeholder",type:"string",default:"'Type to search'"},{name:"label",type:"string",default:"undefined"},{name:"labelPosition",type:"string",values:["top","floating"],default:"top"},{name:"variant",type:"string",default:"outline"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"}],[{state:"Focus-visible",setBy:"interaction"},{state:"Open",setBy:"interaction",note:"Opens as the user types, not on focus."},{state:"Disabled",setBy:"prop"}],[rn("--Border","the field outline"),rn("--Background","the suggestion panel")],["Options are data. The panel is the component’s own."],["The suggestion list must be announced as it changes — a silently updating list is invisible to a screen reader.","Arrow keys move through suggestions without losing what has been typed."],["No Figma drawing. Its trigger is a text field and its panel matches SelectMenu — build from those two rather than inventing a third."]),on("TextField","One line of typed text. The lower-level field that Input builds on.",[{when:"You want the full field with label and validation",use:"Input"},{when:"More than one line",use:"TextArea"}],[{name:"label",type:"string",default:"undefined"},{name:"value",type:"string",default:"''"},{name:"placeholder",type:"string",default:"undefined"},{name:"error",type:"boolean",default:"false"},{name:"errorMessage",type:"string",default:"''"},{name:"helperText",type:"string",default:"''"},{name:"variant",type:"string",default:"outlined"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"}],[{state:"Focus-visible",setBy:"interaction"},{state:"Error",setBy:"prop"},{state:"Disabled",setBy:"prop"}],[rn("--Border","the outline"),rn("--Text","the value")],["Label, helper and error are props — the wiring is what makes them announced with the field."],["Every field needs a label; a placeholder is not one, because it disappears on focus.","`error` should set `aria-invalid` and tie the message with `aria-describedby`."],["Prefer `Input`, which is the designed one. TextField exists for cases Input’s API does not reach."]),on("SearchField","A field for searching, with a clear button and a submit.",[{when:"It picks from a fixed list",use:"Select or Autocomplete"},{when:"It is a general text field",use:"Input"}],[{name:"defaultValue",type:"string",default:"''"},{name:"placeholder",type:"string",default:"'Search…'"},{name:"showClearButton",type:"boolean",default:"true"},{name:"onSubmit",type:"function",default:"undefined"},{name:"onClear",type:"function",default:"undefined"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"color",type:"string",default:"default"}],[{state:"Focus-visible",setBy:"interaction"},{state:"Has value",setBy:"interaction",note:"Reveals the clear button."}],[rn("--Border","the outline"),rn("--Quiet","the placeholder and icon")],["The search icon and clear button are the component’s own — do not add decorators for them."],['The clear button needs a name — "Clear search", not an X.','It should be a `<form>` with `role="search"` so it can be jumped to as a landmark.'],["No Figma drawing. It is an Input with two fixed decorators; build it from the Input design."]),on("Popover","A floating panel anchored to an element, holding arbitrary content.",[{when:"It is a list of actions",use:"Menu"},{when:"It is a short label on hover",use:"Tooltip"},{when:"It blocks the page",use:"Modal"}],[{name:"open",type:"boolean",default:"false"},{name:"anchorRef",type:"ref",default:"undefined"},{name:"placement",type:"string",default:"bottom-end"},{name:"theme",type:"string",default:"Default"},{name:"surface",type:"string",default:"Surface-Bright"},{name:"width",type:"number",default:"320"},{name:"maxHeight",type:"number",default:"400"}],[{state:"Open",setBy:"prop"}],[rn("--Background","the panel"),rn("--Border","its edge")],["Anchored with `anchorRef` rather than by nesting, which is what lets it escape a clipped ancestor."],["It must close on Escape and on outside click, and return focus to whatever opened it.","A popover containing controls needs focus moved into it; one holding only text does not."],["**This is the portal-based panel the Menu cannot be.** Menu is `position: absolute` and gets clipped inside a scrolling container; Popover portals to the body. It is also the component `MISSING-LIB-COMPONENT: Popover` refers to.","It takes `theme` and `surface` directly, unlike most components — a floating panel has no ancestor to inherit a zone from once it portals."]),on("Paper","A plain raised surface. The unopinionated version of Card.",[{when:"It holds grouped content with padding",use:"Card"},{when:"It is a page region",use:"Section"}],[{name:"surface",type:"string",default:"Container"},{name:"outlined",type:"boolean",default:"false"},{name:"variant",type:"string",values:["elevation","outlined"],default:"elevation"}],[{state:"None",setBy:"prop"}],[rn("--Background","the surface"),rn("--Border","the outline when outlined")],["Children are yours entirely — Paper adds a surface and nothing else, not even padding."],["It is a region, not a control. Do not give it a role."],["Prefer `Card`, which is designed and carries padding and radius. Paper is for cases where you want the surface without the opinions."]),on("Sidebar","A wide panel of navigation down the side, usually with nested sections.",[{when:"It is narrow and icon-led",use:"Rail"},{when:"It slides in and is dismissed",use:"Drawer"}],[{name:"items",type:"array",default:"[]"},{name:"width",type:"number",default:"280"},{name:"variant",type:"string",values:["temporary","permanent"],default:"temporary"},{name:"header",type:"ReactNode",default:"undefined"},{name:"footer",type:"ReactNode",default:"undefined"}],[{state:"Open",setBy:"prop",note:"Only meaningful when temporary."},{state:"Selected",setBy:"context"}],[rn("--Background","the panel"),rn("--Hover","item hover")],["Items are data, with header and footer as slots."],["A `<nav>` of links with `aria-current` on the active one.","A temporary sidebar traps focus; a permanent one must not."],["No Figma drawing. The Rail page has `Nav Rail`, `Nav Rail Item` and `Drawer Title`, which is the closest design — a sidebar is a rail that stays expanded."]),on("Toolbar","A row of actions belonging to a region or a selection.",[{when:"It is the top-level application bar",use:"AppBar"},{when:"It is one set of exclusive choices",use:"ButtonGroup"}],[{name:"items",type:"array",default:"[]"},{name:"type",type:"string",values:["floating","docked"],default:"floating"},{name:"orientation",type:"string",values:["horizontal","vertical"],default:"horizontal"},{name:"color",type:"string",default:"default"},{name:"fab",type:"object",default:"undefined"}],[{state:"Hover / Focus-visible",setBy:"interaction",note:"Per item."},{state:"Selected",setBy:"prop"}],[rn("--Background","the bar"),rn("--Hover","item hover")],["Items are data. A FAB comes from `fab` rather than being nested."],["Icon-only items each need a name saying the action.","A toolbar is a `toolbar` role with arrow-key navigation between items, and one tab stop for the whole thing."],["No Figma drawing. `AppBar` shares its elevation group — AppBar, Toolbars and Menus are one row in the elevation table."]),on("CodeBlock","A block of code or a copyable command, with its own copy button.",[{when:"It is inline code in a sentence",use:"a `code` element"},{when:"It is editable",use:"TextArea"}],[{name:"code",type:"string",default:"''"},{name:"language",type:"string",default:"JSX",note:"Shown as a header label — `bash`, `JSX`, `CSS`, `URL`."},{name:"showCopy",type:"boolean",default:"true"},{name:"showHeader",type:"boolean",default:"true"},{name:"maxHeight",type:"number",default:"undefined"},{name:"wrap",type:"boolean",default:"false"}],[{state:"Copied",setBy:"interaction",note:"The component owns the confirmation and its timer."}],[{name:"--Background",sets:"the dark region",variesWith:"theme + surface",figma:"Modes → Theme → Surface"}],["Code goes in `code`, not as children. The copy button is built in — do not add one."],["The copy button needs a name and its confirmation must be announced, not only drawn."],['Its dark region is NOT a hardcoded colour: it declares `data-theme="Neutral"` + `data-surface="Surface-Dimmest"`, so it follows the brand’s own neutrals and stays legible in both modes. Do not override its background.',"It brings its own copy state and timer, so the surrounding component must not keep a `copied` flag."]),on("IconBadge","An icon with a badge already positioned on it.",[{when:"You are badging something else",use:"Badge around it"},{when:"There is no badge",use:"Icon"}],[{name:"color",type:"string",default:"primary"},{name:"variant",type:"string",default:"solid"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"}],[{state:"None",setBy:"prop"}],[{name:"--Icons-{Color}",sets:"the glyph",variesWith:"theme + surface",figma:"Icons → Icon"}],["The icon is the child; the badge is the component’s own."],['The badge number means nothing alone — the accessible name must carry both, "Messages, 3 unread".'],["No Figma drawing, but both halves are designed: `Icon` and `Badge Counter`. It is those two composed, not a third thing."]),on("DropZone","An area that accepts dropped or chosen files.",[{when:"It is a plain file input",use:"an input of type file"},{when:"It is an image placeholder",use:"ImagePlaceholder"}],[{name:"onFiles",type:"function",default:"undefined"},{name:"accept",type:"string",default:"undefined"},{name:"multiple",type:"boolean",default:"false"},{name:"label",type:"ReactNode",default:"undefined"},{name:"sublabel",type:"ReactNode",default:"undefined"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"},{name:"disabled",type:"boolean",default:"false"}],[{state:"Dragging over",setBy:"interaction"},{state:"Focus-visible",setBy:"interaction"},{state:"Disabled",setBy:"prop"}],[rn("--Border","the dashed edge"),rn("--Hover","the drag-over fill")],["Label and sublabel are props. It contains a real file input so the keyboard path works."],["Drag and drop is not keyboard-operable, so a DropZone must also be clickable and focusable — the hidden input is what provides that.","`accept` should be stated in the sublabel too; a rejected file with no explanation is a dead end."],["No Figma drawing. It is a bordered region with an icon and two lines of text — build from `ImagePlaceholder` and `Card`."]),on("StateMessage","What to show when there is nothing to show: empty, error or no results.",[{when:"Something is loading",use:"Loader or Skeleton"},{when:"It is a transient message",use:"Snackbar"},{when:"It sits in the page as a warning",use:"Alert"}],[{name:"type",type:"string",values:["empty","error","no-results"],default:"empty"},{name:"title",type:"string",default:"undefined"},{name:"body",type:"string",default:"undefined"},{name:"action",type:"ReactNode",default:"undefined",note:"The way out. An empty state with no next step is a dead end."},{name:"icon",type:"ReactNode",default:"undefined"},{name:"size",type:"string",values:["small","medium","large"],default:"medium"}],[{state:"None",setBy:"prop",note:"The `type` IS the state."}],[rn("--Text","the title"),rn("--Quiet","the body")],["Title, body and action are props. Table and List take it through their own `empty` and `error` props."],["An error state must say what to do, not only what failed.","It should be announced when it replaces content, or a screen reader user sees the list simply vanish."],["No Figma drawing. It is a centred icon, a title, a body and one action — build from Typography and Button."])]];function sn({size:e="100%",...t}){return de("svg",{width:e,height:e,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",...t,children:de("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 dn={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},cn={xxs:"16px",xs:"20px",small:"24px",medium:"32px",large:"40px",xl:"56px",xxl:"72px"};function un({children:e,color:t="default",size:a="medium",fontSize:r,disabled:n=!1,twoTone:o=!1,className:i="",sx:l={},"aria-label":s,...d}){const c=ya(),u=dn[t]||"Default",p="custom"===a&&r?"number"==typeof r?r+"px":r:cn[a]||cn.medium;return de(h,{component:"span",className:"icon icon-"+t+" icon-"+a+(n?" icon-disabled":"")+(o?" icon-twotone":"")+(i?" "+i:""),"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"===t?"inherit":"var(--Icons-"+u+")",opacity:n?"var(--Disabled, 0.38)":1,cursor:n?"not-allowed":"inherit",lineHeight:1,flexShrink:0,...o&&{"--twotone-variant":"var(--Icons-Variant-"+u+")"},...c?{...wa({animate:c.animate}),width:p,height:p,"& .MuiSvgIcon-root":{visibility:"hidden"}}:{},"& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"},...l},...d,children:e})}const hn="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",pn={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral"},mn={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}},gn={"xx-small":"small","x-small":"medium"};let fn=!1;const bn="var(--Button-Border-Width, 1px)";function vn({src:e,defaultPhoto:a=!0,alt:r,initials:n,icon:o,color:i="default",size:l="medium",customSize:s,clickable:d=!1,onClick:c,insideButton:u=!1,className:p="",sx:m={},...g}){const f=ya(),[b,v]=t(!1),x="custom"===l&&s?{size:s}:mn[function(e){const t=gn[e];return t?("production"===process.env.NODE_ENV||fn||(fn=!0,console.warn(`[Avatar] size="${e}" is the old ladder's name for ${mn[t].size}px. Use size="${t}". The ladder was realigned to Figma on 2026-09-28; note that small, medium and large also changed value.`)),t):e}(l)]||mn.medium,y=pn[i]||pn.default,w=e||(!a||n||o?void 0:hn),S=w&&!b,k=!S&&n,B=!S&&!k,C=d||!!c,T=S?"transparent":"var(--Buttons-"+y+"-Button)",A="var(--Buttons-"+y+"-Border)",z="var(--Buttons-"+y+"-Text)";return ue(h,{component:C?"button":"div",type:C?"button":void 0,role:C?"button":"img","aria-label":r||n||"Avatar",tabIndex:C?0:void 0,onClick:C?c:void 0,...f?{"data-ghost-block":"true"}:{},className:"avatar avatar-"+l+" avatar-"+i+(C?" avatar-clickable":"")+(S?" avatar-image":k?" avatar-initials":" avatar-fallback")+(p?" "+p:""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:x.size+"px",height:x.size+"px",borderRadius:"50%",backgroundColor:T,color:z,...f?wa({radius:"50%",animate:f.animate}):{},fontFamily:"inherit",fontWeight:600,overflow:"hidden",flexShrink:0,border:S?bn+" solid var(--Border)":k?bn+" solid "+A:"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:S?"rgba(0,0,0,0.08)":"var(--Buttons-Default-Hover)"},"&:active":{backgroundColor:S?"rgba(0,0,0,0.15)":"var(--Buttons-Default-Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"}},...m},...g,children:[S&&de(h,{component:"img",src:w,alt:r||"Avatar",onError:()=>v(!0),sx:{width:"100%",height:"100%",objectFit:"cover",borderRadius:"50%"}}),k&&(()=>{const e=function(e){switch(e){case"xx-small":case"x-small":case"small":return Lr;case"medium":case"large":default:return Hr;case"x-large":case"xx-large":return Nr}}(l);return de(e,{sx:{color:"inherit",fontSize:(t=x.size,Math.round(7*t/12)+"px"),lineHeight:1,textAlign:"center",...Ga},"aria-hidden":"true",children:n.slice(0,2).toUpperCase()});var t})(),B&&de(un,{size:l,sx:{color:"inherit"},children:o||de(sn,{})})]})}function xn({children:t,max:a=5,size:r="medium",spacing:n=-8,className:o="",sx:i={},...l}){const s=e.Children.toArray(t),d=s.slice(0,a),c=s.length-a;return ue(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:n+"px"},...i},...l,children:[d,c>0&&de(vn,{initials:"+"+c,size:r,color:"neutral",sx:{border:"2px solid var(--Background)",zIndex:0}})]})}const yn=["primary","secondary","tertiary","neutral","info","success","warning","error"],wn=e=>e.charAt(0).toUpperCase()+e.slice(1);function Sn(){const e={};return yn.forEach(t=>{e[t]=function(e){const t=wn(e);return{bg:"var(--Icons-"+t+")",text:"var(--Icons-On-"+t+")",border:"none"}}(t),e[t+"-outline"]=function(e){return{bg:"var(--Background)",text:"var(--Text)",border:"1px solid var(--Buttons-"+wn(e)+"-Border)"}}(t)}),e}const kn=/-light$/,Bn=new Set;const Cn={size:"var(--Sizing-2)",padX:"var(--Sizing-Half)",dot:"var(--Sizing-1)"},Tn=new Set;function An({variant:e="primary",size:t,type:a="standard",badgeContent:r,max:n=99,showZero:o=!1,invisible:i=!1,dot:l=!1,overlap:s="rectangular",anchorOrigin:d={vertical:"top",horizontal:"right"},children:c,className:u="",sx:h={},...m}){const g=Sn(),f=function(e){const t=String(e||"primary");if(!kn.test(t))return t;const a=t.replace(kn,"");return"production"===process.env.NODE_ENV||Bn.has(t)||(Bn.add(t),console.warn('[Badge] variant="'+t+'" — the -light shape was removed. Rendering variant="'+a+'" (solid).')),a}(e),b=g[f]||g.primary;!function(e){void 0!==e&&("production"===process.env.NODE_ENV||Tn.has(e)||(Tn.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".')))}(t);const v="status"===a||l;let x=r;v?x="":"number"==typeof r&&r>n&&(x=n+"+");const y=i||!v&&!o&&(0===r||null==r),w={"& .MuiBadge-badge":{minWidth:v?Cn.dot:Cn.size,height:v?Cn.dot:Cn.size,padding:v?0:"0 "+Cn.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:v?Cn.dot:Cn.size,backgroundColor:b.bg,color:b.text,border:b.border,boxSizing:"border-box",boxShadow:"0 0 0 1px var(--Background)",transition:"transform 0.2s ease, opacity 0.2s ease"},...h};return de(p,{badgeContent:v?"":x,max:n,showZero:o,invisible:y,overlap:s,anchorOrigin:d,variant:v?"dot":"standard",className:"badge-"+f+" "+u,sx:w,...m,children:c})}const zn={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 In(e){return zn[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 Rn=(e,t)=>0===e?"none":"var(--Effect-Level-"+e+", "+t+")",Wn=Rn(1,In(1)),Dn=Rn(2,In(2)),Fn=Rn(3,In(3)),Pn=Rn(4,In(4)),Ln=Rn(5,In(5)),Hn={0:"none",1:Wn,2:Dn,3:Fn,4:Pn,5:Ln},Nn={"black-white":"BlackWhite"},Mn=e=>{return Nn[e]||(t=e).charAt(0).toUpperCase()+t.slice(1);var t},On={small:"Sm-",medium:"",large:"Lg-"};function En(e,t){const a=Mn(e),r=(e,t)=>`color-mix(in srgb, rgb(var(${e}, ${t})) calc(var(--Button-Bevel-Opacity, 0.5) * 100%), transparent)`,n="var(--_bevel)",o="calc(-1 * var(--_bevel))",i=On[t],l=void 0===i?(e,t)=>t:(e,t)=>`var(--${i}Button-${e}, ${t})`;return[`inset ${l("Lowlight-Offset-x",o)} ${l("Lowlight-Offset-y",o)} ${l("Lowlight-Blur-Radius",n)} ${l("Lowlight-Spread",o)} `+r(`--Buttons-${a}-Lowlight`,"0 0 0"),`inset ${l("Highlight-Offset-x",n)} ${l("Highlight-Offset-y",n)} ${l("Highlight-Blur-Radius",n)} ${l("Highlight-Spread",o)} `+r(`--Buttons-${a}-Highlight`,"255 255 255")].join(", ")}const Qn={small:"var(--Sm-Button-Text-Padding)",medium:"var(--Button-Text-Padding)",large:"var(--Lg-Button-Text-Padding)"},Vn=e=>"small"===e?"var(--Sm-Button-Avatar-Text, 9px)":"large"===e?"var(--Lg-Button-Avatar-Text, 23px)":"var(--Button-Avatar-Text, 12px)",jn={small:{avatar:16,icon:16},medium:{avatar:20,icon:20},large:{avatar:40,icon:32}};function Un(t,a){if(!e.isValidElement(t))return t;const r=jn[a]||jn.medium;return t.type===vn?e.cloneElement(t,{size:"custom",customSize:r.avatar,insideButton:!0}):t.type===un?e.cloneElement(t,{size:"custom",fontSize:r.icon}):t}const Gn=["default","primary","secondary","tertiary","neutral","info","success","warning","error"],Xn=Mn;function qn(e,t=!1,a=!1,r="medium"){const n=Xn(e),o=En(e,r),i=t?Wn:"none";return{backgroundColor:`var(--Buttons-${n}-Button)`,color:`var(--Buttons-${n}-Text)`,border:`var(--Button-Border-Width) solid var(--Buttons-${n}-Border)`,boxShadow:"none"===i?o:`${o}, ${i}`,position:"relative",zIndex:1,"& .MuiTouchRipple-rippleVisible":{color:`var(--Buttons-${n}-Hover)`,zIndex:-1},"&:hover":{backgroundColor:`var(--Buttons-${n}-Hover)`,boxShadow:`${o}, ${t?Dn:Wn}`,...!a&&{transform:"translateY(-1px)"}},"&:active":{backgroundColor:`var(--Buttons-${n}-Pressed)`,boxShadow:o,...!a&&{transform:"translateY(0)"}},"&.Mui-focusVisible":{backgroundColor:`var(--Buttons-${n}-Button)`,outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},"& .MuiTouchRipple-root":{zIndex:-1},"& .MuiTypography-root":{zIndex:1},"& .MuiButton-icon":{zIndex:1}}}function Yn(e,t=!1){return{backgroundColor:"transparent",color:"var(--Text)",border:`var(--Button-Border-Width) solid var(--Buttons-${Xn(e)}-Border)`,boxShadow:"none","& .MuiTouchRipple-rippleVisible":{color:"var(--Hover)"},"&:hover":{backgroundColor:"var(--Hover)",boxShadow:"none",...!t&&{transform:"translateY(-1px)"}},"&:active":{backgroundColor:"var(--Pressed)",...!t&&{transform:"translateY(0)"}},"&.Mui-focusVisible":{backgroundColor:"transparent",outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}}}function Zn(e,t=!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",...!t&&{transform:"translateY(-1px)"},...e?{"& .btn-text-content":{textDecoration:"none"}}:{color:"var(--Text)"}},"&:active":{backgroundColor:"var(--Pressed)",...!t&&{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 Jn=/-light$/,$n=new Set;const Kn=["text","iconOnly","letterNumber","avatar"],_n=new Set;function eo(e,t){"production"===process.env.NODE_ENV||_n.has(e)||(_n.add(e),console.warn("[Button] "+t))}let to=!1;const ao=new Set;const ro={small:"var(--Small-Button-Height)",medium:"var(--Button-Height)",large:"var(--Large-Button-Height)"},no={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 oo({variant:t="default",size:a="medium",elevated:r=!1,selected:n=!1,fullWidth:o=!1,disabled:i=!1,contentType:l,iconOnly:s=!1,letterNumber:d=!1,avatar:c=!1,swatch:u=!1,swatchColor:p,startIcon:b,endIcon:v,startDecorator:x,endDecorator:y,badge:w=!1,badgeContent:S,badgeVariant:k="error",badgeSize:B,badgeDot:C=!1,badgeMax:T=99,badgeAnchorOrigin:A={vertical:"top",horizontal:"right"},children:z,className:I="",sx:R={},...W}){u&&("production"===process.env.NODE_ENV||to||(to=!0,console.warn("[Button] `swatch` is retired — use the Swatch component. A swatch uses neither of Button's axes: its colour is data from a picker rather than a palette, and it has no solid / outline / ghost shape. Swatch also fixes the corner: this read --Button-Icon-Radius, which is why swatches stayed square when a brand set a large radius.")));const D=function(e,t){if(void 0!==e){const t=String(e);return Kn.includes(t)?{iconOnly:"iconOnly"===t,letterNumber:"letterNumber"===t,avatar:"avatar"===t}:(eo("bad:"+t,'contentType="'+t+'" is not a type. Use one of '+Kn.join(" | ")+". Rendering text."),{iconOnly:!1,letterNumber:!1,avatar:!1})}const a=Kn.filter(e=>"text"!==e&&t[e]);return a.length>1?(eo("multi:"+a.join(","),a.join(" and ")+" are both set. Type is ONE axis in the design — text | iconOnly | letterNumber | avatar — so there is no drawing for the combination. Using "+a[0]+'. Prefer contentType="'+a[0]+'".'),{iconOnly:"iconOnly"===a[0],letterNumber:"letterNumber"===a[0],avatar:"avatar"===a[0]}):t}(l,{iconOnly:s,letterNumber:d,avatar:c});s=D.iconOnly,d=D.letterNumber,c=D.avatar;const F=s||c||u,P=F||d;if("production"!==process.env.NODE_ENV){const t=W["aria-label"]||W["aria-labelledby"]||W.title;P&&!t&&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").'),t&&e.Children.forEach(z,e=>{const a=e?.props?.["aria-label"]||e?.props?.titleAccess;a&&console.error('[OmniDesign] <Button> is labelled "'+t+'" but also contains an icon labelled "'+a+"\". A screen reader reads both. Remove the icon's label — the button owns the name.")})}const L=!F,H=o&&!F&&!d,N=function(e){const t=String(e||"default");if(!Jn.test(t))return t;const a=t.replace(Jn,"");return"production"===process.env.NODE_ENV||$n.has(t)||($n.add(t),console.warn('[Button] variant="'+t+'" — the -light shape was removed. Rendering variant="'+a+'" (solid). Use a Buttons mode for colour and solid / -outline / ghost / text for shape.')),a}(t),M=function(e,t=!1,a=!1,r="medium"){const n={};return Gn.forEach(e=>{n[e]=qn(e,t,a,r),n[`${e}-outline`]=Yn(e,a)}),n["black-white"]=qn("black-white",t,a,r),n["black-white-outline"]=Yn("black-white",a),n.danger=qn("error",t,a,r),n.outline=Yn("default",a),n.ghost=Zn(e,a),n.text=Zn(e,a),n}(L,r,n,a),O=M[N]||function(e,t){return"production"===process.env.NODE_ENV||ao.has(e)||(ao.add(e),console.warn('[Button] variant="'+e+'" is not a variant. Rendering the default. Shape is solid / {color}-outline / ghost / text — ghost and text take NO colour prefix, because a ghost takes its colour from the text role (--Hotlink for text, --Quiet for icon-only), not a palette.')),t.default}(N,M),E=function({size:e,iconOnly:t,letterNumber:a,avatar:r,swatch:n}){const o=no[e]||no.medium,i=ro[e]||ro.medium;if(t)return{height:i,width:i,minWidth:"unset",minHeight:"unset",fontSize:r?Vn(e):"small"===e?"0.875rem":o.fontSize,padding:"0","--_height":i,...!r&&!n&&{"& .MuiSvgIcon-root, & > *":{fontSize:"small"===e?"var(--Sm-Button-Icon-Only, var(--Button-Icon-Only))":"large"===e?"var(--Lg-Button-Icon-Only, var(--Button-Icon-Only))":"var(--Button-Icon-Only)"}}};return a?{...o,minHeight:i,minWidth:i,padding:"0"}:{...o,padding:"large"===e?"0 var(--Lg-Button-Padding)":"0 var(--Button-Padding)"}}({size:a,iconOnly:F,letterNumber:d,avatar:c,swatch:u}),Q="small"===a?Or:Er,V=void 0!==x?Un(x,a):void 0,j=void 0!==y?Un(y,a):void 0,U=ue(ce,{children:[de(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"}}}),de(g,{size:a,...H&&{fullWidth:!0},disabled:i,startIcon:void 0!==V?V:c?(()=>{if(c&&z){const e=ro[a]||ro.medium,t=Vn(a);return de(f,{sx:{width:e,height:e,backgroundColor:"inherit",color:"inherit",fontSize:t},children:z})}return b})():b,endIcon:void 0!==j?j:v,className:`btn-${N} ${I}`,role:"button",sx:{borderRadius:c?"small"===a?"var(--Small-Button-Height, var(--Button-Height))":"large"===a?"var(--Large-Button-Height, var(--Button-Height))":"var(--Button-Height)":s||u?"small"===a?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius))":"large"===a?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius))":"var(--Button-Icon-Radius)":"small"===a?"var(--Sm-Button-Radius, var(--Button-Radius))":"large"===a?"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"===a&&{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,...O,"&.MuiButton-root":{padding:E.padding??"0 var(--Sizing-1)"},"& .MuiButton-startIcon":{display:"inherit",color:"inherit",marginLeft:"0px !important",marginRight:c?"0px !important":"2px !important"},...c&&{"& .MuiAvatar-root":{fontSize:Vn(a)}},"& .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:O.backgroundColor,color:O.color,border:O.border,boxShadow:"none"},...u&&{border:"var(--Button-Border-Width) solid var(--Border)",padding:"1px",width:ro[a]||ro.medium,height:ro[a]||ro.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)"}},...H&&{width:"100%"},...R},...W,...u?{style:{backgroundColor:"transparent"}}:{},children:c?null:u?de(h,{className:"btn-swatch-inner",style:{width:"100%",height:"100%",borderRadius:"small"===a?"var(--Sm-Button-Icon-Inner-Radius, calc(var(--Button-Icon-Radius) - 2px))":"large"===a?"var(--Lg-Button-Icon-Inner-Radius, calc(var(--Button-Icon-Radius) - 2px))":"var(--Button-Icon-Inner-Radius, calc(var(--Button-Icon-Radius) - 2px))",...p?{backgroundColor:p}:{}}}):(()=>{if(c)return e.Children.map(z,t=>e.isValidElement(t)&&t.type===vn?e.cloneElement(t,{sx:{...t.props.sx||{},width:"100%",height:"100%"}}):t);if(F)return z;if(d){return de("small"===a?Mr:Q,{component:"span",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",padding:"4px",color:"inherit",lineHeight:1,...Ga},children:z})}return"string"==typeof z||"number"==typeof z?de(h,{component:"span",className:"btn-text-content",sx:{display:"inline-flex",alignItems:"center",padding:Qn[a]||Qn.medium},children:de(Q,{component:"span",sx:{color:"inherit",...Ga},children:z})}):z})()})]});return w?de(An,{variant:k,size:B,badgeContent:S,dot:C,max:T,anchorOrigin:A,showZero:0===S,children:U}):U}const io=e=>de(oo,{iconOnly:!0,...e}),lo="Surface-Dimmest",so="Surface-Brightest",co=/-light$/,uo=/-outline$/,ho=new Set;const po={height:24,fontSize:"12px",iconSize:16,padding:"0 8px",gap:4,minWidth:32},mo=new Set;const go=a(function({onClick:e,...t},a){return de(h,{ref:a,component:"button",onClick:t=>{t.stopPropagation(),e&&e(t)},onKeyDown:t=>{"Enter"!==t.key&&"Backspace"!==t.key&&"Delete"!==t.key||(t.stopPropagation(),e&&e(t))},"aria-label":"Remove",role:"button",tabIndex:0,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",minWidth:24,minHeight:24,width:16,height:16,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"},"&::after":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",minWidth:24,minHeight:24}},...t,children:de(he,{sx:{fontSize:16,pointerEvents:"none"}})})});function fo({variant:e="primary",size:t,label:a,clickable:r=!1,disabled:n=!1,selected:o=!1,selectionMode:i,onDelete:l,onClick:s,startDecorator:d,endDecorator:c,children:u,className:p="",sx:m={},...g}){const f=function(e){const t=String(e||"primary");if(uo.test(t)){const e=t.replace(uo,"");return"production"===process.env.NODE_ENV||ho.has(t)||(ho.add(t),console.warn('[Chip] variant="'+t+'" — 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(!co.test(t))return t;const a=t.replace(co,"");return"production"===process.env.NODE_ENV||ho.has(t)||(ho.add(t),console.warn('[Chip] variant="'+t+'" — the -light shape was removed. Rendering variant="'+a+'" (solid). For a light chip use variant="'+a+'-outline" with data-theme + data-surface="Surface-Brightest".')),a}(e),v={bg:"var(--Background)",text:"var(--Text)",border:"1px solid var(--Border)",hoverBg:"var(--Hover)",activeBg:"var(--Pressed)"},x="default"===f?void 0:(y=f).charAt(0).toUpperCase()+y.slice(1);var y;const w=o?lo:so;var S;void 0!==(S=t)&&("production"===process.env.NODE_ENV||mo.has(S)||(mo.add(S),console.warn('[Chip] size="'+S+'" — Chip has one size (24px) and the prop was removed. Figma draws no other, and component sizing comes from the Component-Size modes rather than a per-component ladder.')));const k=po,B=r||!!s||!!i,C={};"radio"===i?(C.role="radio",C["aria-checked"]=o):"checkbox"===i&&(C.role="checkbox",C["aria-checked"]=o);const T=a||u,A={height:k.height,fontSize:k.fontSize,fontWeight:500,fontFamily:"inherit",borderRadius:k.height/2+"px",padding:k.padding,minWidth:k.minWidth,boxSizing:"border-box",position:"relative",backgroundColor:v.bg,color:v.text,border:v.border,"&::after":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",minWidth:24,minHeight:24,width:"100%",height:"100%"},...B&&!n?{cursor:"pointer",transition:"background-color 0.15s ease, outline 0.15s ease","&:hover":{backgroundColor:v.hoverBg},"&:active":{backgroundColor:v.activeBg}}:{},"&:focus-visible, &.Mui-focusVisible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},...n?{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=ue(h,{component:"span",sx:{display:"inline-flex",alignItems:"center",gap:k.gap+"px",lineHeight:1},children:[d&&de(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}),T,c&&de(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&&de(go,{onClick:l})]});return de(b,{label:z,clickable:B&&!n,disabled:n,onClick:B?s:void 0,className:"chip-"+f+(o?" chip-selected":"")+" "+p,"data-theme":x,"data-surface":w,sx:A,...C,...g})}function bo(e){if(!e)return null;const t=e.trim();if(/^#[0-9a-f]{3}$/i.test(t))return{r:parseInt(t[1]+t[1],16),g:parseInt(t[2]+t[2],16),b:parseInt(t[3]+t[3],16),a:1};if(/^#[0-9a-f]{6}$/i.test(t))return{r:parseInt(t.substring(1,3),16),g:parseInt(t.substring(3,5),16),b:parseInt(t.substring(5,7),16),a:1};if(/^#[0-9a-f]{8}$/i.test(t))return{r:parseInt(t.substring(1,3),16),g:parseInt(t.substring(3,5),16),b:parseInt(t.substring(5,7),16),a:parseInt(t.substring(7,9),16)/255};const a=t.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+%?))?\s*\)/);if(a){let e=1;return void 0!==a[4]&&(e=a[4].endsWith("%")?parseFloat(a[4])/100:parseFloat(a[4])),{r:Math.round(parseFloat(a[1])),g:Math.round(parseFloat(a[2])),b:Math.round(parseFloat(a[3])),a:e}}return null}function vo(e,t){if(!e||!t)return e||t;if(e.a>=1)return e;const a=e.a;return{r:Math.round(e.r*a+t.r*(1-a)),g:Math.round(e.g*a+t.g*(1-a)),b:Math.round(e.b*a+t.b*(1-a)),a:1}}function xo(e){const t=e=>e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4);return.2126*t(e.r/255)+.7152*t(e.g/255)+.0722*t(e.b/255)}function yo(e,t,a){const r=bo(e),n=bo(t),o=bo(a);if(!r||!n)return null;const i=o?vo(n,o):n.a<1?null:n;if(!i)return null;const l=vo(r,i);if(!l)return null;const s=xo(l),d=xo(i);return((Math.max(s,d)+.05)/(Math.min(s,d)+.05)).toFixed(2)}function wo(e){return"undefined"==typeof window?null:getComputedStyle(document.documentElement).getPropertyValue(e).trim()}function So(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var ko,Bo={exports:{}},Co={exports:{}},To={};var Ao,zo,Io,Ro,Wo,Do,Fo,Po,Lo,Ho,No,Mo,Oo,Eo,Qo={};
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 i,useEffect as o,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 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}
9
+ */function Vo(){return zo||(zo=1,"production"===process.env.NODE_ENV?Co.exports=function(){if(ko)return To;ko=1;var e="function"==typeof Symbol&&Symbol.for,t=e?Symbol.for("react.element"):60103,a=e?Symbol.for("react.portal"):60106,r=e?Symbol.for("react.fragment"):60107,n=e?Symbol.for("react.strict_mode"):60108,o=e?Symbol.for("react.profiler"):60114,i=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,g=e?Symbol.for("react.block"):60121,f=e?Symbol.for("react.fundamental"):60117,b=e?Symbol.for("react.responder"):60118,v=e?Symbol.for("react.scope"):60119;function x(e){if("object"==typeof e&&null!==e){var h=e.$$typeof;switch(h){case t:switch(e=e.type){case s:case d:case r:case o:case n:case u:return e;default:switch(e=e&&e.$$typeof){case l:case c:case m:case p:case i:return e;default:return h}}case a:return h}}}function y(e){return x(e)===d}return To.AsyncMode=s,To.ConcurrentMode=d,To.ContextConsumer=l,To.ContextProvider=i,To.Element=t,To.ForwardRef=c,To.Fragment=r,To.Lazy=m,To.Memo=p,To.Portal=a,To.Profiler=o,To.StrictMode=n,To.Suspense=u,To.isAsyncMode=function(e){return y(e)||x(e)===s},To.isConcurrentMode=y,To.isContextConsumer=function(e){return x(e)===l},To.isContextProvider=function(e){return x(e)===i},To.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===t},To.isForwardRef=function(e){return x(e)===c},To.isFragment=function(e){return x(e)===r},To.isLazy=function(e){return x(e)===m},To.isMemo=function(e){return x(e)===p},To.isPortal=function(e){return x(e)===a},To.isProfiler=function(e){return x(e)===o},To.isStrictMode=function(e){return x(e)===n},To.isSuspense=function(e){return x(e)===u},To.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===r||e===d||e===o||e===n||e===u||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===p||e.$$typeof===i||e.$$typeof===l||e.$$typeof===c||e.$$typeof===f||e.$$typeof===b||e.$$typeof===v||e.$$typeof===g)},To.typeOf=x,To}():Co.exports=(Ao||(Ao=1,"production"!==process.env.NODE_ENV&&function(){var e="function"==typeof Symbol&&Symbol.for,t=e?Symbol.for("react.element"):60103,a=e?Symbol.for("react.portal"):60106,r=e?Symbol.for("react.fragment"):60107,n=e?Symbol.for("react.strict_mode"):60108,o=e?Symbol.for("react.profiler"):60114,i=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,g=e?Symbol.for("react.block"):60121,f=e?Symbol.for("react.fundamental"):60117,b=e?Symbol.for("react.responder"):60118,v=e?Symbol.for("react.scope"):60119;function x(e){if("object"==typeof e&&null!==e){var h=e.$$typeof;switch(h){case t:var g=e.type;switch(g){case s:case d:case r:case o:case n:case u:return g;default:var f=g&&g.$$typeof;switch(f){case l:case c:case m:case p:case i:return f;default:return h}}case a:return h}}}var y=s,w=d,S=l,k=i,B=t,C=c,T=r,A=m,z=p,I=a,R=o,W=n,D=u,F=!1;function P(e){return x(e)===d}Qo.AsyncMode=y,Qo.ConcurrentMode=w,Qo.ContextConsumer=S,Qo.ContextProvider=k,Qo.Element=B,Qo.ForwardRef=C,Qo.Fragment=T,Qo.Lazy=A,Qo.Memo=z,Qo.Portal=I,Qo.Profiler=R,Qo.StrictMode=W,Qo.Suspense=D,Qo.isAsyncMode=function(e){return F||(F=!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.")),P(e)||x(e)===s},Qo.isConcurrentMode=P,Qo.isContextConsumer=function(e){return x(e)===l},Qo.isContextProvider=function(e){return x(e)===i},Qo.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===t},Qo.isForwardRef=function(e){return x(e)===c},Qo.isFragment=function(e){return x(e)===r},Qo.isLazy=function(e){return x(e)===m},Qo.isMemo=function(e){return x(e)===p},Qo.isPortal=function(e){return x(e)===a},Qo.isProfiler=function(e){return x(e)===o},Qo.isStrictMode=function(e){return x(e)===n},Qo.isSuspense=function(e){return x(e)===u},Qo.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===r||e===d||e===o||e===n||e===u||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===p||e.$$typeof===i||e.$$typeof===l||e.$$typeof===c||e.$$typeof===f||e.$$typeof===b||e.$$typeof===v||e.$$typeof===g)},Qo.typeOf=x}()),Qo)),Co.exports}
10
10
  /*
11
11
  object-assign
12
12
  (c) Sindre Sorhus
13
13
  @license MIT
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};
14
+ */function jo(){if(Ro)return Io;Ro=1;var e=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;return Io=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 t={},a=0;a<10;a++)t["_"+String.fromCharCode(a)]=a;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(r,n){for(var o,i,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(r),s=1;s<arguments.length;s++){for(var d in o=Object(arguments[s]))t.call(o,d)&&(l[d]=o[d]);if(e){i=e(o);for(var c=0;c<i.length;c++)a.call(o,i[c])&&(l[i[c]]=o[i[c]])}}return l},Io}function Uo(){if(Do)return Wo;Do=1;return Wo="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}function Go(){return Po?Fo:(Po=1,Fo=Function.call.bind(Object.prototype.hasOwnProperty))}if("production"!==process.env.NODE_ENV){var Xo=Vo();Bo.exports=function(){if(Mo)return No;Mo=1;var e=Vo(),t=jo(),a=Uo(),r=Go(),n=function(){if(Ho)return Lo;Ho=1;var e=function(){};if("production"!==process.env.NODE_ENV){var t=Uo(),a={},r=Go();e=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}}function n(n,o,i,l,s){if("production"!==process.env.NODE_ENV)for(var d in n)if(r(n,d)){var c;try{if("function"!=typeof n[d]){var u=Error((l||"React class")+": "+i+" type `"+d+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof n[d]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw u.name="Invariant Violation",u}c=n[d](o,d,l,i,null,t)}catch(e){c=e}if(!c||c instanceof Error||e((l||"React class")+": type specification of "+i+" `"+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 a)){a[c.message]=!0;var h=s?s():"";e("Failed "+i+" type: "+c.message+(null!=h?h:""))}}}return n.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(a={})},Lo=n}(),o=function(){};function i(){return null}return"production"!==process.env.NODE_ENV&&(o=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}),No=function(l,s){var d="function"==typeof Symbol&&Symbol.iterator,c="<<anonymous>>",u={array:g("array"),bigint:g("bigint"),bool:g("boolean"),func:g("function"),number:g("number"),object:g("object"),string:g("string"),symbol:g("symbol"),any:m(i),arrayOf:function(e){return m(function(t,r,n,o,i){if("function"!=typeof e)return new p("Property `"+i+"` of component `"+n+"` has invalid PropType notation inside arrayOf.");var l=t[r];if(!Array.isArray(l))return new p("Invalid "+o+" `"+i+"` of type `"+v(l)+"` supplied to `"+n+"`, expected an array.");for(var s=0;s<l.length;s++){var d=e(l,s,n,o,i+"["+s+"]",a);if(d instanceof Error)return d}return null})},element:m(function(e,t,a,r,n){var o=e[t];return l(o)?null:new p("Invalid "+r+" `"+n+"` of type `"+v(o)+"` supplied to `"+a+"`, expected a single ReactElement.")}),elementType:m(function(t,a,r,n,o){var i=t[a];return e.isValidElementType(i)?null:new p("Invalid "+n+" `"+o+"` of type `"+v(i)+"` supplied to `"+r+"`, expected a single ReactElement type.")}),instanceOf:function(e){return m(function(t,a,r,n,o){if(!(t[a]instanceof e)){var i=e.name||c;return new p("Invalid "+n+" `"+o+"` of type `"+((l=t[a]).constructor&&l.constructor.name?l.constructor.name:c)+"` supplied to `"+r+"`, expected instance of `"+i+"`.")}var l;return null})},node:m(function(e,t,a,r,n){return b(e[t])?null:new p("Invalid "+r+" `"+n+"` supplied to `"+a+"`, expected a ReactNode.")}),objectOf:function(e){return m(function(t,n,o,i,l){if("function"!=typeof e)return new p("Property `"+l+"` of component `"+o+"` has invalid PropType notation inside objectOf.");var s=t[n],d=v(s);if("object"!==d)return new p("Invalid "+i+" `"+l+"` of type `"+d+"` supplied to `"+o+"`, expected an object.");for(var c in s)if(r(s,c)){var u=e(s,c,o,i,l+"."+c,a);if(u instanceof Error)return u}return null})},oneOf:function(e){return Array.isArray(e)?m(function(t,a,r,n,o){for(var i=t[a],l=0;l<e.length;l++)if(h(i,e[l]))return null;var s=JSON.stringify(e,function(e,t){return"symbol"===x(t)?String(t):t});return new p("Invalid "+n+" `"+o+"` of value `"+String(i)+"` supplied to `"+r+"`, 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."),i)},oneOfType:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&o("Invalid argument supplied to oneOfType, expected an instance of array."),i;for(var t=0;t<e.length;t++){var n=e[t];if("function"!=typeof n)return o("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+y(n)+" at index "+t+"."),i}return m(function(t,n,o,i,l){for(var s=[],d=0;d<e.length;d++){var c=(0,e[d])(t,n,o,i,l,a);if(null==c)return null;c.data&&r(c.data,"expectedType")&&s.push(c.data.expectedType)}return new p("Invalid "+i+" `"+l+"` supplied to `"+o+"`"+(s.length>0?", expected one of type ["+s.join(", ")+"]":"")+".")})},shape:function(e){return m(function(t,r,n,o,i){var l=t[r],s=v(l);if("object"!==s)return new p("Invalid "+o+" `"+i+"` of type `"+s+"` supplied to `"+n+"`, expected `object`.");for(var d in e){var c=e[d];if("function"!=typeof c)return f(n,o,i,d,x(c));var u=c(l,d,n,o,i+"."+d,a);if(u)return u}return null})},exact:function(e){return m(function(n,o,i,l,s){var d=n[o],c=v(d);if("object"!==c)return new p("Invalid "+l+" `"+s+"` of type `"+c+"` supplied to `"+i+"`, expected `object`.");var u=t({},n[o],e);for(var h in u){var m=e[h];if(r(e,h)&&"function"!=typeof m)return f(i,l,s,h,x(m));if(!m)return new p("Invalid "+l+" `"+s+"` key `"+h+"` supplied to `"+i+"`.\nBad object: "+JSON.stringify(n[o],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var g=m(d,h,i,l,s+"."+h,a);if(g)return g}return null})}};function h(e,t){return e===t?0!==e||1/e==1/t:e!=e&&t!=t}function p(e,t){this.message=e,this.data=t&&"object"==typeof t?t:{},this.stack=""}function m(e){if("production"!==process.env.NODE_ENV)var t={},r=0;function n(n,i,l,d,u,h,m){if(d=d||c,h=h||l,m!==a){if(s){var g=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 g.name="Invariant Violation",g}if("production"!==process.env.NODE_ENV&&"undefined"!=typeof console){var f=d+":"+l;!t[f]&&r<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."),t[f]=!0,r++)}}return null==i[l]?n?null===i[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(i,l,d,u,h)}var i=n.bind(null,!1);return i.isRequired=n.bind(null,!0),i}function g(e){return m(function(t,a,r,n,o,i){var l=t[a];return v(l)!==e?new p("Invalid "+n+" `"+o+"` of type `"+x(l)+"` supplied to `"+r+"`, expected `"+e+"`.",{expectedType:e}):null})}function f(e,t,a,r,n){return new p((e||"React class")+": "+t+" type `"+a+"."+r+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+n+"`.")}function b(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(b);if(null===e||l(e))return!0;var t=function(e){var t=e&&(d&&e[d]||e["@@iterator"]);if("function"==typeof t)return t}(e);if(!t)return!1;var a,r=t.call(e);if(t!==e.entries){for(;!(a=r.next()).done;)if(!b(a.value))return!1}else for(;!(a=r.next()).done;){var n=a.value;if(n&&!b(n[1]))return!1}return!0;default:return!1}}function v(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,t){return"symbol"===e||!!t&&("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}(t,e)?"symbol":t}function x(e){if(null==e)return""+e;var t=v(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function y(e){var t=x(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}return p.prototype=Error.prototype,u.checkPropTypes=n,u.resetWarningCache=n.resetWarningCache,u.PropTypes=u,u},No}()(Xo.isElement,!0)}else Bo.exports=function(){if(Eo)return Oo;Eo=1;var e=Uo();function t(){}function a(){}return a.resetWarningCache=t,Oo=function(){function r(t,a,r,n,o,i){if(i!==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 n(){return r}r.isRequired=r;var o={array:r,bigint:r,bool:r,func:r,number:r,object:r,string:r,symbol:r,any:r,arrayOf:n,element:r,elementType:r,instanceOf:n,node:r,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:a,resetWarningCache:t};return o.PropTypes=o,o}}()();var qo=So(Bo.exports);function Yo({code:e,label:a="Copy code"}){const[r,n]=t(!1);return de(v,{title:r?"Copied!":a,children:de(io,{size:"small",onClick:async()=>{try{await navigator.clipboard.writeText(e),n(!0),setTimeout(()=>n(!1),2e3)}catch(e){console.error("Copy failed:",e)}},"aria-label":r?"Copied":a,sx:{color:r?"var(--Icons-Success, var(--Text))":"var(--Quiet)"},children:de(r?me:pe,{fontSize:"small"})})})}Yo.propTypes={code:qo.string.isRequired,label:qo.string};function Zo({code:e="",language:t="JSX",showCopy:a=!0,showHeader:r=!0,maxHeight:n,wrap:o=!1,sx:i={},...l}){return ue(h,{"data-theme":"Neutral","data-surface":"Surface-Dimmest",sx:{backgroundColor:"var(--Background)",borderRadius:"min(var(--Card-Radius, var(--Style-Border-Radius)), 12px)",overflow:"hidden",...i},...l,children:[r&&(t||a)&&ue(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,px:2,py:1,borderBottom:"1px solid var(--Border)",minHeight:40},children:[de(xr,{color:"quiet",children:t}),a&&e?de(Yo,{code:e}):null]}),de(h,{sx:{p:2,overflow:"auto",maxHeight:n},children:de(h,{component:"pre",sx:{margin:0,fontFamily:"inherit"},children:de(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})})})]})}Zo.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 Jo=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",$o=["primary","secondary","tertiary","neutral","info","success","warning","error"];function Ko({ratio:e,threshold:t}){if(!e)return de(xr,{style:{color:"var(--Text-Quiet)"},children:"--"});const a=parseFloat(e)>=t;return ue(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ue(h,{sx:{px:1,py:.25,borderRadius:"4px",backgroundColor:a?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:a?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)",fontSize:"11px",fontWeight:700},children:[e,":1"]}),de(xr,{style:{color:a?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:a?"Pass":"Fail"})]})}function _o({label:e,ratio:t,threshold:a,note:r}){return ue(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(h,{sx:{flex:1},children:[de(sr,{style:{color:"var(--Text)"},children:e}),r&&de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),de(Ko,{ratio:t,threshold:a})]})}function ei({color:e,selected:t,onClick:a}){const r=Jo(e);return de(v,{title:r,arrow:!0,children:de(h,{onClick:()=>a(e),role:"button","aria-label":"Select "+r+" color","aria-pressed":t,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",border:t?"2px solid var(--Text)":"1px solid var(--Border)",outline:t?"2px solid var(--Focus-Visible)":"2px solid transparent",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center","&:hover":{transform:"scale(1.1)"}},children:t&&de(me,{sx:{fontSize:24,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})})}function ti({label:e,selected:t,onClick:a}){return de(h,{component:"button",onClick:a,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:"pointer",border:"2px solid var(--Buttons-Primary-Button)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:t?"var(--Buttons-Primary-Button)":"transparent",color:t?"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:t?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function ai(){const[e,a]=t(0),[n,o]=t("solid"),[i,l]=t("primary"),[s,d]=t("5"),[c,u]=t(!1),[p,m]=t(!1),[g,f]=t({}),b=()=>"solid"===n?i:i+"-"+n,v=()=>{if(c)return;const e=parseInt(s,10);return isNaN(e)||String(e)!==s.trim()?s||void 0:e};return r(()=>{const e=Jo(i),t={};"solid"===n?(t.badgeBg=wo("--Icons-"+e),t.badgeText=wo("--Icons-On-"+e),t.badgeBorder=null):"outline"===n&&(t.badgeBg=wo("--Background"),t.badgeText=wo("--Text"),t.badgeBorder=wo("--Buttons-"+e+"-Border")),t.background=wo("--Background"),t.focusVisible=wo("--Focus-Visible"),f(t)},[n,i]),ue(h,{sx:{width:"100%"},children:[de($a,{style:{marginBottom:8},children:"Badge"}),de(ur,{color:"quiet",style:{marginBottom:24},children:"Small label attached to an element showing status or count. Solid and outline variants across all 8 colors."}),ue(x,{value:e,onChange:(e,t)=>a(t),sx:{borderBottom:"1px solid var(--Border)",mb:0},children:[de(y,{label:"Playground"}),de(y,{label:"Accessibility"})]}),0===e&&ue(w,{container:!0,sx:{minHeight:400},children:[ue(w,{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:200,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)"},children:ue(S,{direction:"row",spacing:6,alignItems:"center",children:[de(An,{variant:b(),badgeContent:v(),dot:c,showZero:p,children:de(ye,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),de(An,{variant:b(),badgeContent:v(),dot:c,showZero:p,children:de(we,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),de(An,{variant:b(),badgeContent:v(),dot:c,showZero:p,children:de(Se,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})})]})}),de(Zo,{code:(()=>{const e=['variant="'+b()+'"'];if(c)e.push("dot");else{const t=v();"number"==typeof t?e.push("badgeContent={"+t+"}"):t&&e.push('badgeContent="'+t+'"')}return p&&e.push("showZero"),"<Badge "+e.join(" ")+">\n <MailIcon />\n</Badge>"})(),language:"JSX",sx:{borderRadius:0,borderBottom:"1px solid var(--Border)"}})]}),ue(w,{item:!0,sx:{width:{xs:"calc(100vw - 432px)",md:"calc((100vw - 432px) / 2)"},flexShrink:0,p:3,backgroundColor:"var(--Container)",overflowY:"auto"},children:[de(Ka,{children:"Playground"}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(S,{direction:"row",spacing:1,flexWrap:"wrap",sx:{gap:1},children:["solid","outline"].map(e=>de(ti,{label:Jo(e),selected:n===e,onClick:()=>o(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:$o.map(e=>de(ei,{color:e,selected:i===e,onClick:l},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Counter 16px · Dot 8px · Padding 4px · Digits 11px"})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BADGE CONTENT"}),de(k,{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"}}})]}),ue(h,{sx:{mt:3},children:[de(B,{control:de(C,{checked:c,onChange:e=>u(e.target.checked),size:"small"}),label:de(sr,{children:"Dot (no content)"})}),de(B,{control:de(C,{checked:p,onChange:e=>m(e.target.checked),size:"small"}),label:de(sr,{children:"Show zero"})})]})]})]}),1===e&&ue(h,{sx:{p:4},children:[de(Ka,{children:"Accessibility Requirements"}),ue(sr,{color:"quiet",style:{marginBottom:32},children:["Based on current Playground settings: ",n," · ",i]}),ue(S,{spacing:4,children:[ue(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Badge Text Contrast"}),de(sr,{color:"quiet",style:{marginBottom:16},children:"Badge text must have ≥ 4.5:1 contrast against badge background (WCAG 1.4.3 AA)"}),de(_o,{label:"Badge Text vs. Badge Background",ratio:yo(g.badgeText,g.badgeBg),threshold:4.5,note:"solid"===n?"var(--Buttons-{C}-Text) vs var(--Buttons-{C}-Button)":"outline"===n?"var(--Text) vs var(--Background)":"var(--Buttons-{C}-Text) vs var(--Buttons-{C}-Button)"})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Badge Visibility"}),de(sr,{color:"quiet",style:{marginBottom:16},children:"Badge background (or border) must have ≥ 3:1 contrast against page background (WCAG 1.4.11)"}),(()=>{const e=yo(g.badgeBg,g.background),t=g.badgeBorder?yo(g.badgeBorder,g.background):null;return de(_o,{label:"Badge vs. Page Background",ratio:(a=e,r=t,a||r?a?r?parseFloat(a)>=parseFloat(r)?a:r:a:r:null),threshold:3.1,note:"outline"===n?"Border "+(t||"--")+":1 — outline relies on border contrast":"BG "+(e||"--")+":1"});var a,r})()]}),ue(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Badge Sizing"}),de(sr,{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."}),de(h,{sx:{display:"flex",justifyContent:"space-between",py:1.5,borderBottom:"1px solid var(--Border)"},children:ue(h,{children:[de(sr,{children:"Counter"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"16px height · 4px side padding · 11px digits · pill shape"})]})}),de(h,{sx:{display:"flex",justifyContent:"space-between",py:1.5,borderBottom:"1px solid var(--Border)"},children:ue(h,{children:[de(sr,{children:"Status dot"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"8px diameter circle"})]})})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA & Semantics"}),ue(S,{spacing:0,children:[ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{style:{display:"block",marginBottom:2},children:"Screenreader support:"}),de(xr,{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").'})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{style:{display:"block",marginBottom:2},children:"Dot variant:"}),de(xr,{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."})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{style:{display:"block",marginBottom:2},children:"Max overflow:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:'When content exceeds max (default 99), displays "99+" visually but announces the actual number to screenreaders.'})]})]})]})]})]})]})}const ri={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 ni({children:e,variant:t="light",surface:a,color:r="info",size:n="medium",startDecorator:o,endDecorator:i,className:l="",sx:s={},...d}){const c=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===r?"Default":r),u=ri[n]||ri.medium,p="default"===r?"Default":c,m=a||("light"===t?"Surface-Brightest":"Surface"),g="var(--Buttons-"+c+"-Border)",f=ue(ce,{children:[o&&de(h,{className:"alert-start-decorator",sx:{display:"inline-flex",alignItems:"center",fontSize:u.iconSize,lineHeight:1,flexShrink:0,mt:"2px"},children:o}),de(h,{className:"alert-message",sx:{flex:1,minWidth:0},children:"string"==typeof e?de("small"===n?sr:ur,{children:e}):e}),i&&de(h,{className:"alert-end-decorator",sx:{display:"inline-flex",alignItems:"flex-start",flexShrink:0,gap:u.gap,paddingTop:"2px"},children:i})]});return de(h,{role:"alert",className:"alert alert-"+t+" alert-"+n+" alert-"+r+" "+l,sx:{border:"1px solid "+g,borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",boxShadow:Fn,...s},...d,children:de(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:f})})}const oi=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];function ii(e){const t=(a=e).charAt(0).toUpperCase()+a.slice(1);var a;return{type:"outline",color:t,trackOff:"var(--Background)",trackOffBorder:"var(--Border)",trackOn:"var(--Icons-"+t+")",trackOnBorder:"var(--Icons-"+t+")",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-"+t+")",iconOff:"var(--Background)",iconOn:"var(--Icons-"+t+")"}}const li=/-light$/,si=new Set;const di={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 ci({variant:e="default",size:t="medium",checked:a,defaultChecked:r,onChange:n,disabled:o=!1,label:i,labelPlacement:l="end",name:s,value:d,icon:c,iconOn:u,iconOff:h,className:p="",sx:m={},"aria-label":g,"aria-labelledby":f,...b}){const v=function(){const e={};return oi.forEach(t=>{e[t+"-outline"]=ii(t)}),e.default={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Icons-Default)",trackOnBorder:"var(--Icons-Default)",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-Default)",iconOff:"var(--Background)",iconOn:"var(--Icons-Default)"},e["default-outline"]={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Icons-Default)",trackOnBorder:"var(--Icons-Default)",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-Default)",iconOff:"var(--Background)",iconOn:"var(--Icons-Default)"},e.outline={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Icons-Default)",trackOnBorder:"var(--Icons-Default)",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-Default)",iconOff:"var(--Background)",iconOn:"var(--Icons-Default)"},e.primary=ii("primary"),e}(),x=function(e){const t=String(e||"default");if("light"!==t&&!li.test(t))return t;const a="light"===t?"primary":t.replace(li,"");return"production"===process.env.NODE_ENV||si.has(t)||(si.add(t),console.warn('[Switch] variant="'+t+'" — the -light shape was removed. Rendering variant="'+a+'". The on state takes its colour from the Icons collection (--Icons-<Color> / --Icons-On-<Color>).')),a}(e),y=v[x]||v.default,w=di[t]||di.medium,S="small"===t?sr:ur,k=w.trackH-4,C=Math.max(24,w.trackW),A=Math.max(24,w.trackH),z=(A-w.trackH)/2,I={width:k,height:k,borderRadius:w.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:w.icon,height:w.icon,display:"block"}},R={width:w.trackW,minWidth:24,height:A,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:C-w.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":{...I,backgroundColor:y.dotOff,color:y.iconOff},"&.Mui-checked":{justifyContent:"flex-end",transform:"none","& .MuiSwitch-thumb":{...I,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:Dn},"&:active + .MuiSwitch-track":{boxShadow:Wn},"&.Mui-focusVisible + .MuiSwitch-track":{outline:"1px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled + .MuiSwitch-track":{opacity:1}},"& .MuiSwitch-track":{width:w.trackW,height:w.trackH,borderRadius:"var(--Sizing-3, 24px)",backgroundColor:y.trackOff,border:"1px solid "+y.trackOffBorder,boxSizing:"border-box",opacity:1,position:"absolute",top:z,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=void 0!==h?h:c,D=void 0!==u?u:c,F=e=>de("span",{className:"MuiSwitch-thumb",children:e}),P=de(T,{...void 0!==W||void 0!==D?{icon:F(W),checkedIcon:F(D)}:{},checked:a,defaultChecked:r,onChange:n,disabled:o,name:s,value:d,slotProps:{input:{...g?{"aria-label":g}:{},...f?{"aria-labelledby":f}:{}}},className:"switch-"+x+" "+p,sx:R,disableRipple:!0,...b});return i?de(B,{control:P,label:de(S,{component:"span",sx:{color:o?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===t?"13px":"15px",fontWeight:500,opacity:o?"var(--Disabled, 0.38)":1},children:i}),labelPlacement:l,sx:{gap:"8px",marginLeft:0,marginRight:0}}):P}const ui=ci,hi={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},pi={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},mi={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},gi={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)"}},fi={horizontal:"Bottom","vertical-left":"Left","vertical-right":"Right",vertical:"Right"},bi=e=>fi[e]||"Bottom",vi=e=>"horizontal"===e;function xi(e,t,a,r){return t?{}:{["border"+bi(e)]:a+" solid color-mix(in srgb, "+r+" 50%, transparent)"}}function yi(e,t,a,r){return{borderBottom:"none",borderLeft:"none",borderRight:"none",["border"+bi(e)]:a+" solid "+(t?r:"transparent")}}const wi=s({value:0,setValue:()=>{},variant:"standard",color:"primary",size:"medium",orientation:"horizontal",scrollable:!1,baseline:!0,tabsId:""}),Si=()=>l(wi);function ki({children:e,defaultValue:a=0,value:r,onChange:n,variant:l="standard",color:s="primary",size:d="medium",orientation:c="horizontal",scrollable:u=!1,baseline:p=!0,className:m="",sx:g={},...f}){const[b,v]=t(a),x=void 0!==r,y=x?r:b,w=i(),S=o(e=>{x||v(e),n?.(e)},[x,n]);return de(wi.Provider,{value:{value:y,setValue:S,variant:l,color:s,size:d,orientation:c,scrollable:u,baseline:p,tabsId:w},children:de(h,{className:"tabs tabs-"+c+" tabs-"+d+" tabs-"+l+("standard"!==l?" tabs-"+s:"")+(u?" tabs-scrollable":"")+" "+m,sx:{display:"flex",flexDirection:vi(c)?"column":"row",width:"100%",overflow:"hidden",...g},...f,children:e})})}function Bi({children:a,rounded:i=!1,className:l="",sx:s={},...d}){const{variant:c,color:u,size:p,orientation:m,scrollable:g,baseline:f,tabsId:b}=Si(),v=n(null),x=n(null),[y,w]=t(!1),[S,k]=t(!1),B=vi(m),C="standard"===c,T="solid"===c,A="light"===c,z="dark"===c,I=function(e,t=!0){return t?{["border"+bi(e)]:"1px solid var(--Border-Variant)"}:{}}(m,f),R=C?void 0:T?hi[u]:A?pi[u]:z?mi[u]:void 0,W=C?void 0:z?"Surface-Dimmest":A?"Surface-Brightest":"Surface",D=o(()=>{const e=x.current;e&&g&&B&&(w(e.scrollLeft>1),k(e.scrollLeft<e.scrollWidth-e.clientWidth-1))},[g,B]);r(()=>{D();const e=x.current;if(!e||!g)return;e.addEventListener("scroll",D,{passive:!0});const t=new ResizeObserver(D);return t.observe(e),()=>{e.removeEventListener("scroll",D),t.disconnect()}},[g,D]);const F=e=>{const t=x.current;if(!t)return;const a=.6*t.clientWidth;t.scrollBy({left:e*a,behavior:"smooth"})},P={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(a).filter(e.isValidElement).map((t,a)=>e.cloneElement(t,{_index:a,key:t.key||a}));return ue(h,{ref:v,"data-theme":R||void 0,"data-surface":W||void 0,className:"tab-list tab-list-"+c+" tab-list-"+p+" tab-list-"+m+(g?" tab-list-scrollable":"")+" "+l,onKeyDown:e=>{const t=g?x.current:v.current,a=t?.querySelectorAll('[role="tab"]:not([aria-disabled="true"])');if(!a?.length)return;const r=Array.from(a).indexOf(document.activeElement);if(r<0)return;const n=B?"ArrowRight":"ArrowDown",o=B?"ArrowLeft":"ArrowUp";if(e.key===n){e.preventDefault();const t=a[(r+1)%a.length];t.focus(),g&&t.scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})}else if(e.key===o){e.preventDefault();const t=a[(r-1+a.length)%a.length];t.focus(),g&&t.scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})}else"Home"===e.key?(e.preventDefault(),a[0].focus(),g&&a[0].scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})):"End"===e.key&&(e.preventDefault(),a[a.length-1].focus(),g&&a[a.length-1].scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"}))},sx:{display:"flex",flexDirection:B?"row":"column",gap:0,position:"relative",backgroundColor:"var(--Background)",...I,padding:C&&!i?0:"4px",overflow:"hidden",borderRadius:i?"var(--Style-Border-Radius)":0,...s},...d,children:[g&&B&&de(h,{component:"button","aria-label":"Scroll tabs left",onClick:()=>F(-1),disabled:!y,className:"tab-list-scroll-btn tab-list-scroll-btn-left",sx:P,children:"‹"}),de(h,g&&B?{ref:x,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:x,role:"tablist","aria-orientation":m,sx:{display:"flex",flexDirection:B?"row":"column",flex:1},children:L}),g&&B&&de(h,{component:"button","aria-label":"Scroll tabs right",onClick:()=>F(1),disabled:!S,className:"tab-list-scroll-btn tab-list-scroll-btn-right",sx:P,children:"›"})]})}function Ci({children:e,value:t,_index:a=0,disabled:r=!1,startDecorator:n,endDecorator:o,iconOnly:i=!1,className:l="",sx:s={},...d}){const{value:c,setValue:u,variant:p,color:m,size:g,orientation:f,tabsId:b}=Si(),v=gi[g]||gi.medium,x="standard"===p,y="light"===p,w="dark"===p,S=void 0!==t?t:a,k=c===S,B=x?"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 ue(h,{component:"button",role:"tab",id:"tab-"+b+"-"+S,"data-theme":(x?void 0:"solid"===p?hi[m]:y?pi[m]:w?mi[m]:void 0)||void 0,"data-surface":(x?void 0:w?"Surface-Dimmest":y?"Surface-Brightest":"Surface")||void 0,"aria-selected":k,"aria-controls":"tabpanel-"+b+"-"+S,"aria-disabled":r||void 0,tabIndex:k?0:-1,onClick:()=>{r||u(S)},className:"tab tab-"+g+(k?" tab-selected":"")+(r?" tab-disabled":"")+(i?" tab-icon-only":"")+" "+l,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:"2px",padding:"0 "+(i?"0":v.px),minHeight:v.minHeight,fontSize:v.fontSize,fontFamily:"inherit",fontWeight:500,lineHeight:1.3,color:k?"var(--Text)":"var(--Quiet)",backgroundColor:"transparent",border:"none",...yi(f,k,v.indicatorThickness,B),cursor:r?"not-allowed":"pointer",opacity:r?"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",...!r&&{"&:hover":{backgroundColor:"var(--Hover)",...xi(f,k,v.indicatorThickness,B)},"&:active":{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-4px"}},...s},...d,children:[n&&de(h,{className:"tab-start-decorator",sx:{display:"inline-flex",fontSize:v.iconSize,lineHeight:1,flexShrink:0},children:n}),!i&&e&&(()=>{const t="small"===g?xr:sr;return de(h,{className:"tab-label",sx:{display:"inline-flex",alignItems:"center",padding:"4px "+v.textPad},children:de(t,{style:{color:"inherit",fontWeight:"inherit"},children:e})})})(),o&&de(h,{className:"tab-end-decorator",sx:{display:"inline-flex",fontSize:v.iconSize,lineHeight:1,flexShrink:0},children:o})]})}function Ti({children:e,value:t,className:a="",sx:r={},...n}){const{value:o,size:i,tabsId:l}=Si();return o===t?de(h,{role:"tabpanel",id:"tabpanel-"+l+"-"+t,"aria-labelledby":"tab-"+l+"-"+t,className:"tab-panel tab-panel-"+i+" "+a,sx:{paddingTop:"16px",fontSize:(gi[i]||gi.medium).fontSize,fontFamily:"inherit",color:"var(--Text)",...r},...n,children:e}):null}const Ai=e.forwardRef(function({theme:e=null,surface:t="Surface",children:a,minHeight:r=160,sx:n={}},o){return de(h,{ref:o,"data-theme":e||void 0,"data-surface":t,sx:{p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:r,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",...n},children:a})}),zi=e=>e.charAt(0).toUpperCase()+e.slice(1),Ii={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}},Ri={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 Wi({options:a=[],value:i,defaultValue:l="",onChange:s,label:d,labelPosition:c="top",size:u="medium",variant:p="outline",color:m="primary",selectionStyle:g="default",mode:f="standard",placeholder:b="Select…",showDividers:v=!1,showColorLabels:x=!0,startDecoration:y,disabled:w=!1,fullWidth:S=!1,className:k="",sx:B={},...C}){const T="default"===m?"primary":m,A=zi(T),z="var(--Buttons-"+A+"-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"===g&&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"===g?"default":g,W="default"===m?"var(--Text)":"var(--Text-"+A+")",[D,F]=t(l),[P,L]=t(!1),[H,N]=t(!1),[M,O]=t({top:0,left:0,width:0,direction:"down"}),E=n(null),Q=n(null),[V,j]=t(null),[U,G]=t(null),X=void 0!==i,q=X?i:D,Y=a.flatMap(e=>e&&Array.isArray(e.options)?e.options:[e]).find(e=>("string"==typeof e?e:e.value)===q),Z=Y?"string"==typeof Y?Y:Y.label:"",J=""!==q&&null!=q,$="floating"===c,K="top"===c,_="color"===f,ee=$?Ri[u]||Ri.medium:Ii[u]||Ii.medium,te=o(e=>{X||F(e),s?.(e),L(!1),Q.current?.focus()},[X,s]),ae=o(()=>{if(!Q.current)return{top:0,left:0,width:0};const e=Q.current.getBoundingClientRect(),t=window.innerHeight-e.bottom,a=e.top,r=t>=240||t>=a?"down":"up";return{top:"down"===r?e.bottom+4:void 0,bottom:"up"===r?window.innerHeight-e.top+4:void 0,left:e.left,width:e.width,direction:r}},[]),re=o(()=>{w||L(e=>(e||O(ae()),!e))},[w,ae]);r(()=>{if(!P)return;const e=e=>{!E.current||E.current.contains(e.target)||e.target.closest("[data-select-dropdown]")||L(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[P]),r(()=>{if(!P||!Q.current)return;const e=Q.current.closest("[data-theme]"),t=Q.current.closest("[data-surface]");j(e?.getAttribute("data-theme")||null),G(t?.getAttribute("data-surface")||null);const a=()=>O(ae());return window.addEventListener("scroll",a,!0),window.addEventListener("resize",a),()=>{window.removeEventListener("scroll",a,!0),window.removeEventListener("resize",a)}},[P,ae]);const ne=n(null),oe=o(e=>{const t=ne.current;if(!t)return;const a=t.querySelectorAll('[role="option"]');if(!a.length)return;const r=t.querySelector('[role="option"]:focus');let n=Array.prototype.indexOf.call(a,r);n="down"===e?n<a.length-1?n+1:0:n>0?n-1:a.length-1,a[n].focus()},[]);r(()=>{P&&requestAnimationFrame(()=>{const e=ne.current;if(!e)return;const t=e.querySelector('[aria-selected="true"]'),a=e.querySelector('[role="option"]');(t||a)?.focus()})},[P]);const ie=P?Ae.createPortal(de(h,{ref:ne,"data-select-dropdown":!0,"data-theme":V||void 0,role:"listbox","aria-label":d||"Options",sx:{position:"fixed",top:M.top??"unset",bottom:M.bottom??"unset",left:M.left,width:M.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 t=(t,a,r)=>{const n="string"==typeof t?t:t.value,o="string"==typeof t?t:t.label,i="object"==typeof t?t.color:null,l=n===q,s=function(e,t,a){const r=zi(a||"default");return t?{backgroundColor:"var(--Buttons-"+r+"-Button)",color:"var(--Buttons-"+r+"-Text)",border:"1px solid var(--Buttons-"+r+"-Border)",fontWeight:600}:{color:"var(--Text)",backgroundColor:"transparent",border:"1px solid transparent"}}(0,l,T),d=a===r-1;return ue(e.Fragment,{children:[ue(h,{role:"option",tabIndex:-1,"aria-selected":l,"aria-label":_&&!x?o:void 0,onClick:()=>te(n),onKeyDown:e=>((e,t)=>{if("Enter"===e.key||" "===e.key)return e.preventDefault(),void te(t);"ArrowDown"===e.key&&(e.preventDefault(),oe("down")),"ArrowUp"===e.key&&(e.preventDefault(),oe("up")),"Escape"===e.key&&(L(!1),Q.current?.focus())})(e,n),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-"+A+"-Hover)",color:"var(--Buttons-"+A+"-Text)"},"&:active":l?{}:{backgroundColor:"var(--Buttons-"+A+"-Pressed)",color:"var(--Buttons-"+A+"-Text)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:[_&&i&&de(h,{sx:{height:"calc("+ee.height+" - 8px)",width:"calc("+ee.height+" - 8px)",borderRadius:"var(--Input-Swatch-Radius, var(--Button-Radius))",backgroundColor:i,border:"1px solid "+(l?"var(--Buttons-"+A+"-Border)":"var(--Border)"),flexShrink:0}}),(!_||x)&&de(sr,{style:{flex:1,color:"inherit",fontWeight:"inherit"},children:o}),l&&de(un,{size:"small",sx:{opacity:.6,flexShrink:0},children:de(me,{})})]}),v&&!d&&de(h,{"aria-hidden":"true",sx:{height:"1px",backgroundColor:"var(--Border)",mx:1,my:.25}})]},n)};return a.map((r,n)=>{if(r&&Array.isArray(r.options)){const a=r.options;return ue(e.Fragment,{children:[de(h,{role:"presentation",sx:{px:1.5,pt:0===n?.75:1.25,pb:.5,fontSize:"11px",fontFamily:"inherit",fontWeight:700,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--Text-Quiet)"},children:r.label}),a.map((e,r)=>t(e,r,a.length))]},"group-"+(r.label||n))}return t(r,n,a.length)})})()}),document.body):null;return ue(h,{ref:E,className:"select-wrapper select-"+u+" select-label-"+c+" select-style-"+R+" select-variant-"+I+(P?" select-open":"")+(w?" select-disabled":"")+(k?" "+k:""),sx:{position:"relative",width:S?"100%":"auto",display:"inline-block",fontFamily:"inherit",...B},...C,children:[K&&d&&de("small"===u?sr:ur,{component:"label",style:{display:"block",marginBottom:"6px",color:w?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:w?"var(--Disabled, 0.38)":1},children:d}),de(h,{sx:{border:"1px solid "+z,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:de(h,{children:ue(h,{ref:Q,component:"button",type:"button",role:"combobox","aria-expanded":P,"aria-haspopup":"listbox","aria-label":d||b,tabIndex:w?-1:0,onClick:re,onKeyDown:e=>"Escape"===e.key?(L(!1),void Q.current?.focus()):"Enter"===e.key||" "===e.key?(e.preventDefault(),void re()):P||"ArrowDown"!==e.key&&"ArrowUp"!==e.key?(P&&"ArrowDown"===e.key&&(e.preventDefault(),oe("down")),void(P&&"ArrowUp"===e.key&&(e.preventDefault(),oe("up")))):(e.preventDefault(),void L(!0)),onFocus:()=>N(!0),onBlur:()=>N(!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||P?W:"var(--Quiet)",fontSize:ee.fontSize,fontFamily:"inherit",cursor:w?"not-allowed":"pointer",opacity:w?"var(--Disabled, 0.38)":1,outline:"none",textAlign:"left",position:"relative",transition:"color 0.15s ease"},children:[y&&de(h,{sx:{display:"flex",alignItems:"center",flexShrink:0,color:"var(--Text-Quiet)"},children:y}),$&&d&&de(h,{sx:{position:"absolute",top:J||P?"6px":"50%",left:(ee.leftPad||14)+(y?32:0)+"px",transform:J||P?"scale(0.75)":"translateY(-50%)",transformOrigin:"top left",color:P?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}),de(h,{sx:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",...$&&{mt:J||P?"8px":0}},children:_&&J?ue(h,{sx:{display:"flex",alignItems:"center",gap:1},children:[de(h,{sx:{height:"calc("+ee.height+" - 8px)",width:"calc("+ee.height+" - 8px)",borderRadius:"var(--Input-Swatch-Radius, var(--Button-Radius))",backgroundColor:Y&&"string"!=typeof Y&&Y.color||"transparent",border:"1px solid var(--Border)",flexShrink:0}}),x&&de(sr,{style:{color:"inherit",padding:0},children:Z})]}):de(sr,{style:{color:"inherit",padding:0},children:J?Z:$&&d?"":b})}),de(ge,{sx:{fontSize:(ee.iconSize||18)+"px",color:"var(--Text-Quiet)",transform:P?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease",flexShrink:0}})]})})}),ie]})}const Di="__null__",Fi=[{label:"Default",value:Di},{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"}],Pi=["Surface-Dimmest","Surface-Dim","Surface","Surface-Bright","Surface-Brightest","Container","Container-Highest","Container-High","Container-Low","Container-Lowest"];function Li({theme:e=null,onThemeChange:t,surface:a="Surface",onSurfaceChange:r,surfaces:n=Pi,size:o="small"}){const i=n.map(e=>({value:e,label:e}));return ue(S,{direction:"row",spacing:1,sx:{alignItems:"center"},children:[de(h,{sx:{width:160},children:de(Wi,{options:Fi,value:e??Di,onChange:e=>t?.(e===Di?null:e),labelPosition:"none",size:o,variant:"outline",color:"default","aria-label":"Background theme",fullWidth:!0})}),de(h,{sx:{width:180},children:de(Wi,{options:i,value:a,onChange:e=>r?.(e),labelPosition:"none",size:o,variant:"outline",color:"default","aria-label":"Surface",fullWidth:!0})})]})}const Hi=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Ni=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Mi={info:de(ke,{}),success:de(Be,{}),warning:de(Ce,{}),error:de(Te,{})};function Oi({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Ei({color:e,selected:t,onClick:a}){const r=Hi(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Qi(){const[e,a]=t("light"),[r,n]=t("info"),[o,i]=t("medium"),[l,s]=t(!0),[d,c]=t(null),[u,p]=t("Surface"),m=l&&Mi[r]?de(un,{size:"small",sx:{color:"inherit"},children:Mi[r]}):void 0;return ue(h,{sx:{pb:8},children:[de($a,{children:"Alert"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:d,surface:u,children:de(h,{sx:{width:"100%",maxWidth:480},children:de(ni,{variant:e,color:r,size:o,startDecorator:m,children:"This is an alert message. Check the details for more information."})})}),de(Zo,{code:(()=>{const t=['variant="'+e+'"'];return"info"!==r&&t.push('color="'+r+'"'),"medium"!==o&&t.push('size="'+o+'"'),l&&Mi[r]&&t.push("startDecorator={<Icon><"+Hi(r)+"Icon /></Icon>}"),"<Alert "+t.join(" ")+">\n This is an alert message.\n</Alert>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Alert",theme:d,surface:u})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(S,{direction:"row",spacing:1,children:["solid","light"].map(t=>de(Oi,{label:Hi(t),selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:Ni.map(e=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>de(Ei,{color:e,selected:r===e,onClick:n},e))})]},e.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(Oi,{label:Hi(e),selected:o===e,onClick:()=>i(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Show Icon"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),de(ci,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Show icon"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Alert"})})]})]})})]})]})}const Vi={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},ji={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)"}},Ui=s({variant:"default",color:"primary",size:"medium",orientation:"vertical"});function Gi({children:e,variant:t="solid",color:a="default",surface:r,size:n="medium",orientation:o="vertical",clickable:i=!1,selected:l=!1,elevated:s=!1,draggable:d=!1,onClick:c,disabled:u=!1,href:p,className:m="",sx:g={},...f}){const b="default"===a,v=b?"":Vi[a],x=r||(b?"Container":"dark"===t?"Surface-Dimmest":"light"===t?"Surface-Brightest":"Surface"),y=ji[n]||ji.medium,w="horizontal"===o,S=!!d,k=!u&&(i||!!c||!!p||l||S),B=p?"a":"div",C=l?`var(--Buttons-${(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===a?"Default":a)}-Border)`:"var(--Buttons-Default-Border)",T=k?l?`2px solid ${C}`:"1px solid var(--Buttons-Default-Border)":"1px solid var(--Border-Variant)",A=s?Fn:Dn,z=s?Pn:Fn,I=s?Dn:Wn;return de(Ui.Provider,{value:{variant:t,color:a,size:n,orientation:o},children:de(h,{component:B,href:p||void 0,onClick:k?c:void 0,role:k?"button":void 0,tabIndex:k?0:void 0,"aria-pressed":!!l||void 0,"aria-disabled":u||void 0,draggable:S||void 0,className:"card card-"+t+" card-"+n+" card-"+o+(k?" card-clickable":"")+(l?" card-selected":"")+(s?" card-elevated":"")+(S?" card-draggable":"")+" "+m,sx:{display:"flex",border:T,borderRadius:"var(--Card-Radius)",boxShadow:A,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"},...k&&!S&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:z,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)"}},...S&&{cursor:"grab","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:z},"&:active":{cursor:"grabbing",zIndex:10,boxShadow:Pn,transform:"scale(1.02)",borderWidth:"2px",borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...g},onKeyDown:k?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),c?.())}:void 0,...f,children:de(h,{"data-theme":v||void 0,"data-surface":x,sx:{display:"flex",flexDirection:w?"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 Xi({children:e,className:t="",sx:a={},...r}){const{size:n}=l(Ui);return de(h,{className:"card-content "+t,sx:{display:"flex",flexDirection:"column",gap:(ji[n]||ji.medium).gap,flex:1,minWidth:0,...a},...r,children:e})}const qi=e=>de(Gi,{clickable:!0,selected:e.selected,...e}),Yi=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],Zi=e=>"Default"===e?"var(--Quiet)":"var(--Buttons-"+e+"-Border)";function Ji(){const e={};return Yi.forEach(t=>{e[t]=function(e){const t=Mn(e);return{color:t,borderToken:Zi(t),icon:"var(--Buttons-"+t+"-Border)"}}(t)}),e}const $i=/-(outline|light|solid)$/,Ki=new Set;function _i(e){const t=Ji();return t[function(e){const t=String(e||"default");if(!$i.test(t))return t;const a=t.replace($i,"");return"production"===process.env.NODE_ENV||Ki.has(t)||(Ki.add(t),console.warn('[Checkbox] variant="'+t+'" — the -outline/-light/-solid shapes were removed; a Checkbox has one look and `variant` selects colour only. Rendering variant="'+a+'". Update the call site.')),a}(e)]||t.default}const el={small:{box:16,icon:12,gap:4,touchTarget:24,LabelComp:sr},medium:{box:20,icon:14,gap:8,touchTarget:24,LabelComp:ur},large:{box:24,icon:18,gap:12,touchTarget:24,LabelComp:fr}};function tl({size:e,variant:t,checked:a,indeterminate:r}){const n=_i(t),o=el[e]||el.medium,i=a||r,l=n.borderToken,s="small"===e?"var(--Sm-Checkbox-Radius, 3.2px)":"large"===e?"var(--Lg-Checkbox-Radius, 4.8px)":"var(--Checkbox-Radius, 4px)";return de(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:de(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:i&&de(r?ze:me,{sx:{fontSize:o.icon,color:n.icon}})})})}function al({size:e,variant:t}){return de(tl,{size:e,variant:t,checked:!1,indeterminate:!1})}function rl({size:e,variant:t}){return de(tl,{size:e,variant:t,checked:!0,indeterminate:!1})}function nl({size:e,variant:t}){return de(tl,{size:e,variant:t,checked:!1,indeterminate:!0})}function ol({variant:e="primary",size:t="medium",label:a,checked:r,defaultChecked:n,indeterminate:o=!1,disabled:i=!1,onChange:l,name:s,value:d,className:c="",sx:u={},"aria-label":h,"aria-labelledby":p,"aria-describedby":m,inputProps:g={},...f}){_i(e);const b=el[t]||el.medium,v=b.LabelComp,x={...g,...h&&{"aria-label":h},...p&&{"aria-labelledby":p},...m&&{"aria-describedby":m}},y=de(C,{checked:r,defaultChecked:n,indeterminate:o,disabled:i,onChange:l,name:s,value:d,icon:de(al,{size:t,variant:e}),checkedIcon:de(rl,{size:t,variant:e}),indeterminateIcon:de(nl,{size:t,variant:e}),className:"chk-"+e+" "+c,inputProps:x,disableRipple:!0,sx:{padding:(b.touchTarget-b.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},...f});return a?de(B,{control:y,label:de(v,{component:"span",sx:{color:i?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:a}),disabled:i,sx:{marginLeft:0,marginRight:0,gap:b.gap+"px",alignItems:"center","&.Mui-disabled .MuiTypography-root":{color:"var(--Text-Quiet)",opacity:.6}}}):y}const il=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]}],ll=["photo","icon","initials"],sl={photo:"Photo",icon:"Icon",initials:"Initials"},dl=["xx-small","x-small","small","medium","large","x-large","xx-large"],cl={"xx-small":"XXS","x-small":"XS",small:"Small",medium:"Medium",large:"Large","x-large":"XL","xx-large":"XXL"};function ul({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function hl({color:e,selected:t,onClick:a}){const r=(n=e)?n.charAt(0).toUpperCase()+n.slice(1):"";var n;return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function pl(){const[e,a]=t("default"),[r,n]=t("medium"),[o,i]=t("initials"),[l,s]=t(!1),[d,c]=t(!1),[u,p]=t(!1),[m,g]=t(null),[f,b]=t("Surface"),v="photo"===o,x=()=>{const t={size:r,clickable:l,insideButton:d};return v||(t.color=e),"initials"===o&&(t.initials="LN"),"photo"===o&&(t.src="https://i.pravatar.cc/150?img=3",t.alt="User avatar"),t};return ue(h,{sx:{pb:8},children:[de($a,{children:"Avatar"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:m,surface:f,children:u?ue(xn,{max:3,size:r,children:[de(vn,{...x()}),de(vn,{color:e,size:r,initials:"AB"}),de(vn,{color:e,size:r,initials:"CD"}),de(vn,{color:e,size:r,initials:"EF"})]}):de(vn,{...x()})}),de(Zo,{code:(()=>{const t=[];return v||"default"===e||t.push('color="'+e+'"'),"medium"!==r&&t.push('size="'+r+'"'),"initials"===o&&t.push('initials="LN"'),"photo"===o&&t.push('src="..." alt="User avatar"'),l&&t.push("clickable onClick={handleClick}"),d&&t.push("insideButton"),u?"<AvatarGroup max={3}>\n <Avatar "+t.join(" ")+' />\n <Avatar initials="AB" />\n <Avatar initials="CD" />\n <Avatar initials="EF" />\n</AvatarGroup>':"<Avatar "+t.join(" ")+" />"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:m,onThemeChange:g,surface:f,onSurfaceChange:b})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Avatar",theme:m,surface:f})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{sx:{opacity:v?.4:1,pointerEvents:v?"none":"auto"},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:il.map(t=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:t.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:t.colors.map(t=>de(hl,{color:t,selected:e===t,onClick:a},t))})]},t.label))}),v&&de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:"Color is ignored when the avatar shows a photo — the image carries the visual."})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:dl.map(e=>de(ul,{label:cl[e],selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CONTENT"}),de(S,{direction:"row",spacing:1,children:ll.map(e=>de(ul,{label:sl[e],selected:o===e,onClick:()=>i(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Clickable"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Interactive with hover/focus states"})]}),de(ci,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Clickable"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Inside Button"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds 2px horizontal margin so the avatar sits cleanly in a Button"})]}),de(ci,{variant:"default-outline",checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Inside Button"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Group"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show as AvatarGroup with overflow"})]}),de(ci,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show group"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Avatar"})})]})]})})]})]})}const ml=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",gl={default:"Default",quiet:"Quiet",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},fl=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],bl=["filled","outlined","rounded","twotone","sharp"],vl={filled:"Filled",outlined:"Outlined",rounded:"Rounded",twotone:"Two Tone",sharp:"Sharp"},xl={Home:{filled:Re,outlined:Oe,rounded:Ze,twotone:lt,sharp:xt},Favorite:{filled:Ie,outlined:Ee,rounded:Je,twotone:st,sharp:yt},Delete:{filled:We,outlined:Qe,rounded:$e,twotone:dt,sharp:wt},Settings:{filled:De,outlined:Ve,rounded:Ke,twotone:ct,sharp:St},Search:{filled:Fe,outlined:Fe,rounded:_e,twotone:ut,sharp:kt},Star:{filled:Pe,outlined:je,rounded:et,twotone:ht,sharp:Bt},Person:{filled:Le,outlined:Ue,rounded:tt,twotone:pt,sharp:Ct},Notifications:{filled:we,outlined:Ge,rounded:at,twotone:mt,sharp:Tt},Visibility:{filled:He,outlined:Xe,rounded:rt,twotone:gt,sharp:At},ShoppingCart:{filled:Se,outlined:qe,rounded:nt,twotone:ft,sharp:zt},Lock:{filled:Ne,outlined:Ye,rounded:ot,twotone:bt,sharp:It},Info:{filled:Me,outlined:ke,rounded:it,twotone:vt,sharp:Rt}};function yl({ratio:e,threshold:t}){if(!e)return de(xr,{style:{color:"var(--Text-Quiet)"},children:"--"});const a=parseFloat(e)>=t;return ue(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ue(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:[e,":1"]}),de(xr,{style:{color:a?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:a?"Pass":"Fail"})]})}function wl({label:e,ratio:t,threshold:a,note:r}){return ue(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(h,{sx:{flex:1},children:[de(sr,{style:{color:"var(--Text)"},children:e}),r&&de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),de(yl,{ratio:t,threshold:a})]})}function Sl({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"primary":"primary-outline",size:"small",onClick:a,children:e})}function kl(){const[e,a]=t("filled"),[n,o]=t("default"),[i,l]=t("medium"),[s,d]=t("40"),[c,u]=t(!1),[p,m]=t("Home"),[g,f]=t(""),[b,v]=t({}),x=gl[n]||"Default",y="twotone"===e,k="custom"===i?(parseInt(s,10)||40)+"px":{xs:"12px",small:"16px",medium:"24px",large:"36px"}[i]||"24px",B=function(e,t){return xl[e]?.[t]||xl[e]?.filled||Re}(p,e),C=function(e){return{outlined:"Outlined",rounded:"Rounded",twotone:"TwoTone",sharp:"Sharp"}[e]||""}(e),T=p+C+"Icon",A=g.trim().length>0,z="<Icon>\n <"+T+' />\n</Icon>\n{/* aria-hidden="true" by default */}',I='<Icon aria-label="'+(A?g.trim():p+" icon")+'">\n <'+T+' />\n</Icon>\n{/* role="img" added automatically */}';return r(()=>{v({background:wo("--Background"),iconColor:wo("--Icons-"+x),iconVariant:wo("--Icons-Variant-"+x)})},[n,x]),ue(h,{sx:{pb:8},children:[de($a,{children:"Icon"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(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:de(un,{color:n,size:i,fontSize:"custom"===i?parseInt(s,10)||40:void 0,disabled:c,twoTone:y,"aria-label":A?g.trim():void 0,children:de(B,{})})}),de(Zo,{code:(()=>{const e=[];"default"!==n&&e.push('color="'+n+'"'),"custom"===i?(e.push('size="custom"'),e.push("fontSize={"+(parseInt(s,10)||40)+"}")):"medium"!==i&&e.push('size="'+i+'"'),y&&e.push("twoTone"),c&&e.push("disabled"),A&&e.push('aria-label="'+g.trim()+'"');const t=e.length?" "+e.join(" "):"";return"import "+T+" from '@mui/icons-material/"+p+(C||"")+"';\n\n<Icon"+t+">\n <"+T+" />\n</Icon>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:de(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Icon"})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ICON"}),de(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)"}}}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Enter a MUI icon name."," ",de(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 ↗"})]})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:bl.map(t=>de(Sl,{label:vl[t],selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:fl.map(e=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>{const t=gl[e],a=n===e;return de(h,{component:"button",onClick:()=>o(e),"aria-label":"Select "+ml(e),"aria-pressed":a,title:ml(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Icons-"+t+")",border:a?"2px solid var(--Text)":"1px solid var(--Border)",outline:a?"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:a&&de(me,{sx:{fontSize:16,color:"var(--Background)",pointerEvents:"none"}})},e)})})]},e.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["small","medium","large","custom"].map(e=>de(Sl,{label:ml(e),selected:i===e,onClick:()=>l(e)},e))}),"custom"===i&&ue(h,{sx:{display:"flex",alignItems:"center",gap:1,mt:1.5},children:[de(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)"}}}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"px"})]})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ARIA LABEL"}),de(h,{component:"input",type:"text",value:g,onChange:e=>f(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)"}}}),de(xr,{style:{color:A?"var(--Tags-Success-Text)":"var(--Text-Quiet)",display:"block",marginTop:6},children:A?'✓ Meaningful — role="img" aria-label="'+g.trim()+'"':'Decorative — aria-hidden="true" (invisible to screen readers)'})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Disabled"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Reduces opacity to 0.38"})]}),de(ci,{checked:c,onChange:e=>u(e.target.checked),size:"small","aria-label":"Toggle disabled"})]})]})}),de(Ti,{value:2,children:ue(h,{sx:{p:3},children:[ue(sr,{color:"quiet",style:{marginBottom:24},children:[vl[e]," / ",ml(n)," / ","custom"===i?s+"px":i,A?" / meaningful":" / decorative"]}),ue(S,{spacing:3,children:[ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Icon Contrast (WCAG 1.4.11 — 3:1)"}),de(sr,{color:"quiet",style:{marginBottom:16},children:"Non-text elements must contrast 3:1 against the page background."}),de(wl,{label:"var(--Icons-"+x+") vs. var(--Background)",ratio:yo(b.iconColor,b.background),threshold:3,note:T+" at "+k+" in "+ml(n)+" color"}),y&&de(wl,{label:"var(--Icons-Variant-"+x+") vs. var(--Background)",ratio:yo(b.iconVariant,b.background),threshold:3,note:"Two-tone secondary fill — must also meet 3:1"})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),ue(S,{spacing:0,children:[ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)",backgroundColor:A?"var(--Tags-Success-BG, rgba(0,200,0,0.05))":"transparent",px:1,borderRadius:"4px"},children:[ue(sr,{style:{fontWeight:600},children:["Current icon — ",A?"meaningful ✓":"decorative"]}),de(h,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:A?I:z})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Decorative (no aria-label):"}),de(xr,{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.'}),de(h,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:z})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Meaningful (with aria-label):"}),de(xr,{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.'}),de(h,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:I})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:["Disabled state",c?" ← current":"",":"]}),de(xr,{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&&ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:["Two-tone",y?" ← current":"",":"]}),ue(xr,{style:{color:"var(--Text-Quiet)"},children:["Secondary fill uses var(--Icons-Variant-",x,"). Both the primary and secondary fills must meet 3:1 contrast independently."]})]}),ue(h,{sx:{py:1.5},children:[ue(sr,{children:["Touch target — ",k," icon","small"===i?" ⚠":" ✓",":"]}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"small"===i?"Small icons (20px) need a 24px minimum target area around them (WCAG 2.5.5). Wrap in a button with padding.":"Icon is "+k+" — meets 24px minimum. Ensure the wrapping interactive element also meets 24×24px."})]})]})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Size Reference"}),de(S,{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:t,px:a,note:r},n,o)=>ue(h,{sx:{py:1.5,borderBottom:n<o.length-1?"1px solid var(--Border)":"none",display:"flex",justifyContent:"space-between",alignItems:"flex-start"},children:[ue(h,{children:[ue(sr,{children:[e," — ",a]}),de(xr,{style:{color:"var(--Text-Quiet)"},children:r})]}),i===t&&de(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))})]})]})]})}),de(Ti,{value:3,children:de(pd,{component:"Icon"})})]})})})]})]})}const Bl={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)"}},Cl="var(--Link-Visited, var(--Hotlink-Visited))",Tl={primary:{base:"var(--Link, var(--Hotlink))",visited:Cl},standard:{base:"var(--Text)",visited:Cl},quiet:{base:"var(--Text-Quiet)",visited:Cl}};function Al({children:e,href:t,target:a,rel:r,textStyle:n="body",color:o="primary",disabled:i=!1,onClick:l,className:s="",sx:d={},...c}){const u=Bl[n]||Bl.body,p=Tl[o]||Tl.primary;return de(h,{component:"a",href:i?void 0:t,target:a,rel:"_blank"===a?r||"noopener noreferrer":r,onClick:i?e=>e.preventDefault():l,"aria-disabled":i||void 0,tabIndex:i?-1:void 0,className:"link link-"+n+" link-color-"+o+(i?" 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:i?"not-allowed":"pointer",opacity:i?"var(--Disabled, 0.38)":1,pointerEvents:i?"none":"auto",display:"inline-flex",alignItems:"center",minHeight:"24px",minWidth:"24px",transition:"color 0.15s ease, text-decoration-color 0.15s ease",...!i&&{"&: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})}const zl=e=>e.charAt(0).toUpperCase()+e.slice(1);function Il(e){return e&&"default"!==e&&"border-variant"!==e?"border"===e?"var(--Border)":"var(--Icons-"+zl(e)+")":"var(--Border-Variant)"}function Rl(e,t){const a=e&&!["default","border","border-variant"].includes(e)?zl(e):"Default",r=Il(e);return"light"===t?{bg:"var(--Tag-"+a+"-BG)",text:"var(--Tag-"+a+"-Text)",border:"1px solid "+r}:{bg:"var(--Background)",text:"var(--Text)",border:"1px solid "+r}}const Wl={small:"var(--Sm-Divider, 0.5px)",medium:"var(--Divider, 1px)",large:"var(--Lg-Divider, 2px)"};function Dl({color:e="default",orientation:t="horizontal",size:a="small",children:r,indicatorText:n,indicatorStyle:o="outline",textAlign:i="center",className:l="",sx:s={},...d}){const c=Il(e),u=Wl[a]||Wl.small,p=!(!r&&!n),m=r||n,g="vertical"===t;if(g&&!p)return de(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(g&&p){const t=Rl(e,o),a="top"===i?"0 0 10%":"1 1 auto",r="top"===i?"1 1 auto":"bottom"===i?"0 0 10%":"1 1 auto";return ue(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:[de(h,{sx:{flex:a,width:u,backgroundColor:c}}),de(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:t.bg,color:t.text,border:t.border,boxSizing:"border-box"},children:m}),de(h,{sx:{flex:r,width:u,backgroundColor:c}})]})}if(!p)return de(h,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" "+l,sx:{width:"100%",height:u,backgroundColor:c,flexShrink:0,...s},...d});const f=Rl(e,o),b="left"===i?"0 0 10%":"1 1 auto",v="left"===i?"1 1 auto":"right"===i?"0 0 10%":"1 1 auto";return ue(h,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" divider-indicator "+l,sx:{display:"flex",alignItems:"center",width:"100%",...s},...d,children:[de(h,{sx:{flex:b,height:u,backgroundColor:c}}),de(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:f.bg,color:f.text,border:f.border,boxSizing:"border-box"},children:m}),de(h,{sx:{flex:v,height:u,backgroundColor:c}})]})}const Fl=["primary","secondary","tertiary","neutral","info","success","warning","error"];function Pl(e){const t=(a=e).charAt(0).toUpperCase()+a.slice(1);var a;return{bg:"var(--Hover)",border:"var(--Buttons-"+t+"-Border)",hoverBorder:"var(--Buttons-"+t+"-Hover)",pressedBorder:"var(--Buttons-"+t+"-Pressed)",text:"var(--Text)",focusBg:"var(--Hover)"}}const Ll={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}},Hl={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}},Nl={small:{resting:"Body-Small",shrunk:"Label-ExtraSmall"},medium:{resting:"Body-Medium",shrunk:"Label-Small"},large:{resting:"Body-Large",shrunk:"Label-Medium"}},Ml=e=>({fontSize:"var(--"+e+"-Font-Size)",fontWeight:"var(--"+e+"-Font-Weight)",letterSpacing:"var(--"+e+"-Letter-Spacing)"});const Ol={info:ke,success:Be,warning:Ce,error:Te},El={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 Ql({variant:e="primary-outline",size:t="medium",label:a,labelPosition:r="standard",placeholder:n,helperText:o,validation:l,validationMessage:s,disabled:d=!1,id:c,value:u,defaultValue:p,onChange:m,name:g,type:f="text",multiline:b=!1,rows:v,maxRows:x,resize:y="vertical",startAdornment:w,endAdornment:S,fullWidth:B=!1,className:C="",sx:T={},"aria-label":I,"aria-labelledby":R,"aria-describedby":W,"aria-required":D,"aria-invalid":F,inputProps:P={},...L}){const H=function(){const e={};return Fl.forEach(t=>{e[t+"-outline"]=Pl(t)}),e.outline=Pl("primary"),e}(),N=H[e]||H["primary-outline"],M="floating"===r;"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 O=M?Hl[t]||Hl.medium:Ll[t]||Ll.medium,E=i(),Q=c||E,{labelX:V,padX:j,restingY:U,shrunkY:G}=function(e,t){const a=parseInt(e.height,10)||56,r=parseInt(e.fontSize,10)||15,n="var(--Input-Padding, "+(e.leftPad||14)+"px)",o=(e.iconSize||18)+8;return{labelX:t?"calc("+n+" + "+o+"px)":n,padX:n,clearance:t?o:0,restingY:Math.round((a-1.4375*r)/2),shrunkY:6}}(O,!!w),X=Nl[t]||Nl.medium,q="var(--Text)",Y=l?El[l]:null,Z=l?Ol[l]:null,J=Y||N,$=J.border,K={...P,...I&&{"aria-label":I},...R&&{"aria-labelledby":R},...W&&{"aria-describedby":W},...D&&{"aria-required":D},...F&&{"aria-invalid":F}};return ue(h,{className:"inp-"+e+" "+C,sx:{width:B?"100%":"auto",...T},children:[(()=>{if(!a||M)return null;return de("small"===t?sr:ur,{component:"label",htmlFor:Q,sx:{display:"block",marginBottom:"6px",color:d?"var(--Quiet)":"var(--Text)",fontSize:O.labelSize,fontWeight:500,opacity:d?"var(--Disabled, 0.38)":1},children:a})})(),de(h,{sx:{border:"1px solid "+$,borderRadius:"small"===t?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===t?"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:de(h,{children:de(k,{value:u,defaultValue:p,onChange:m,name:g,type:f,disabled:d,placeholder:n,id:Q,multiline:b,rows:v,maxRows:x,fullWidth:!0,label:M?a:void 0,variant:"outlined",size:"small"===t?"small":"medium",inputProps:K,InputProps:{startAdornment:w?de(A,{position:"start",children:w}):void 0,endAdornment:(()=>{if(S)return de(A,{position:"end",children:S})})()},sx:{"& .MuiOutlinedInput-root":{backgroundColor:"var(--Hover)",color:"var(--Quiet)",fontSize:O.fontSize,minHeight:b?"auto":O.height,padding:0,borderRadius:0,transition:"color 0.15s ease-in-out",...M&&{alignItems:"stretch"},"& fieldset":{border:"none"},"&.Mui-focused":{color:q},"&:not(.Mui-focused) .MuiOutlinedInput-input:not(:placeholder-shown)":{color:q},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"},"& input":{padding:O.padding,color:"inherit","&::placeholder":{color:"var(--Quiet)",opacity:1}},"& textarea":{padding:O.padding,color:"inherit",resize:y,"&::placeholder":{color:"var(--Quiet)",opacity:1}},"& .MuiInputAdornment-root":{color:"var(--Quiet)"},...M&&{"& .MuiInputAdornment-root":{maxHeight:"none",height:"auto",alignSelf:"stretch",alignItems:"center",paddingTop:O.padTop+"px",paddingBottom:O.padBottom+"px",marginTop:0,marginBottom:0},"& .MuiInputAdornment-positionStart":{marginLeft:j,marginRight:"8px",width:O.iconSize+"px",minWidth:O.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))",...Ml(X.resting),transformOrigin:"top left",transition:"transform 0.15s ease, font-size 0.15s ease, color 0.15s ease",transform:"translate("+V+", "+U+"px)","&.MuiInputLabel-shrink":{transform:"translate("+V+", "+G+"px)",...Ml(X.shrunk),color:"var(--Quiet)"},"&.Mui-focused":{color:q},"&.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?ue(h,{sx:{display:"flex",alignItems:"center",gap:"6px",marginTop:"4px",marginLeft:"2px"},children:[Z&&de(Z,{sx:{fontSize:O.iconSize,color:Y.icon,flexShrink:0}}),de(z,{sx:{color:Y.text,fontSize:"small"===t?"11px":"12px",margin:0},children:s})]}):o?de(z,{sx:{color:"var(--Quiet)",fontSize:"small"===t?"11px":"12px",marginTop:"4px",marginLeft:"2px"},children:o}):null]})}const Vl=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],jl=Mn,Ul={small:{touchTarget:24,box:16,dot:8,gap:4,LabelComp:sr},medium:{touchTarget:24,box:20,dot:10,gap:8,LabelComp:ur},large:{touchTarget:24,box:24,dot:12,gap:12,LabelComp:fr}};function Gl({size:e,color:t,checked:a}){const r=jl(t),n="Default"===r?"var(--Quiet)":"var(--Buttons-"+r+"-Border)",o="var(--Buttons-"+r+"-Border)",i=Ul[e]||Ul.medium;return de(h,{className:"radio-circle-icon",sx:{width:i.box,height:i.box,boxSizing:"border-box",borderRadius:"50%",border:"2px solid "+n,overflow:"hidden",flexShrink:0,backgroundColor:"var(--Background)",display:"flex",alignItems:"center",justifyContent:"center",transition:"border-color 0.15s ease-in-out"},children:a&&de(h,{sx:{width:i.dot,height:i.dot,borderRadius:"50%",backgroundColor:o,transition:"transform 0.15s ease-in-out"}})})}function Xl({theme:e,surface:t,color:a="primary",size:r="medium",label:n,labelPlacement:o="end",checked:i,disabled:l=!1,onChange:s,name:d,value:c,className:u="",sx:h={},"aria-label":p,"aria-labelledby":m,"aria-describedby":g,inputProps:f={},...b}){const v=Vl.includes(a)?a:"primary",x=Ul[r]||Ul.medium,y=x.LabelComp,w=(x.touchTarget-x.box)/2,S={...f,...p&&{"aria-label":p},...m&&{"aria-labelledby":m},...g&&{"aria-describedby":g}},k=de(I,{checked:i,disabled:l,onChange:s,name:d,value:c,icon:de(Gl,{size:r,color:v,checked:!1}),checkedIcon:de(Gl,{size:r,color:v,checked:!0}),"data-theme":e||void 0,"data-surface":t||void 0,className:"radio-"+v+" "+u,inputProps:S,disableRipple:!0,sx:{padding:w+"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"},...h},...b});return n?de(B,{control:k,label:de(y,{component:"span",sx:{color:l?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:n}),labelPlacement:o,disabled:l,sx:{marginLeft:0,marginRight:0,gap:x.gap+"px",alignItems:"center","&.Mui-disabled .MuiTypography-root":{color:"var(--Text-Quiet)",opacity:.6}}}):k}function ql({color:e="primary",size:t="medium",label:a,options:r=[],value:n,onChange:o,orientation:i="vertical",labelPlacement:l="end",disabled:s=!1,spacing:d=1,name:c,className:u="",sx:h={},"aria-label":p,"aria-labelledby":m,...g}){return ue(R,{component:"fieldset",disabled:s,className:"radio-group-"+e+" "+u,sx:h,children:[a&&de(W,{component:"legend",sx:{color:s?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===t?"13px":"15px",fontWeight:500,mb:1,"&.Mui-focused":{color:"var(--Text)"},"&.Mui-disabled":{color:"var(--Text-Quiet)",opacity:"var(--Disabled, 0.38)"}},children:a}),de(D,{value:n,onChange:o,name:c,"aria-label":p,"aria-labelledby":m,row:"horizontal"===i,sx:{display:"flex",flexDirection:"horizontal"===i?"row":"column",flexWrap:"horizontal"===i?"wrap":"nowrap",alignItems:"horizontal"===i?"center":"flex-start",gap:d},...g,children:r.map(a=>de(Xl,{color:e,size:t,label:a.label,labelPlacement:l,value:a.value,disabled:a.disabled||s},a.value))})]})}const Yl=Xl,Zl=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];const Jl={small:{visual:12,track:2,labelSize:11},medium:{visual:16,track:4,labelSize:12},large:{visual:20,track:6,labelSize:13}};function $l({theme:e,surface:t,variant:a="primary",size:r="medium",value:n,defaultValue:o,onChange:i,onChangeCommitted:l,min:s=0,max:d=100,step:c=1,marks:u=!1,valueLabelDisplay:p="off",orientation:m="horizontal",track:g="normal",disabled:f=!1,label:b,name:v,className:x="",sx:y={},"aria-label":w,"aria-labelledby":S,...k}){const B=function(){const e={};return Zl.forEach(t=>{e[t]=function(e){const t=(a=e).charAt(0).toUpperCase()+a.slice(1);var a;return{thumb:"var(--Border)",thumbBorder:"1px solid var(--Background)",track:"default"===e?"var(--Button)":"var(--Buttons-"+t+"-Button)",trackBorder:"1px solid var(--Border)",rail:"var(--Background)",railBorder:"1px solid var(--Border)",valueLabel:"var(--Text)",valueLabelText:"var(--Background)"}}(t)}),e}(),C=B[a]||B.primary,T=Jl[r]||Jl.medium,A="vertical"===m,z=Array.isArray(n)||Array.isArray(o),I="inverted"===g,R="small"===r?sr:ur,W=T.track+2,D=I?C.track:C.rail,P=C.railBorder,L=I?C.rail:C.track,H=C.trackBorder,N={color:"transparent"===C.track?C.thumb:C.track,height:A?void 0:W,width:A?W:void 0,"& .MuiSlider-rail":{backgroundColor:D,border:P||"none",boxSizing:P?"content-box":"border-box",opacity:1,height:A?void 0:P?T.track:W,width:A?P?T.track:W:void 0,borderRadius:W/2},"& .MuiSlider-track":{boxSizing:H?"content-box":"border-box",backgroundColor:L,border:H||"none",height:A?void 0:H?T.track:W,width:A?H?T.track:W:void 0,borderRadius:W/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:`${En(a)}, ${Wn}`,transition:"box-shadow 0.15s ease-in-out",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},"&:hover::before":{boxShadow:`${En(a)}, ${Dn}`},"&.Mui-focusVisible::before, &:focus-visible::before":{boxShadow:`${En(a)}, ${Dn}, 0 0 0 1px var(--Focus-Visible)`},"&.Mui-active::before":{boxShadow:En(a)},"&.Mui-focusVisible":{outline:"none",borderRadius:"50%"},"&.Mui-focusVisible::before":{boxShadow:`${En(a)}, ${Dn}`}},...z?A?{'& .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:A?W:2,height:A?2:W,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},M=de(F,{value:n,defaultValue:o,onChange:i,onChangeCommitted:l,min:s,max:d,step:c,marks:u,valueLabelDisplay:p,orientation:m,track:"inverted"===g?"inverted":!1!==g&&"normal",disabled:f,name:v,"aria-label":w,"aria-labelledby":S,slotProps:f?{input:{"aria-disabled":"true"}}:void 0,className:"slider-"+a+" "+x,"data-theme":e||void 0,"data-surface":t||void 0,sx:N,...k});return b?ue(h,{sx:{width:A?"auto":"100%",height:A?"100%":"auto",display:"flex",flexDirection:"column",gap:"4px"},children:[de(R,{component:"label",sx:{color:f?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===r?"13px":"15px",fontWeight:500,opacity:f?"var(--Disabled, 0.38)":1},children:b}),M]}):M}const Kl=$l,_l=$l,es={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},ts={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 as({theme:e,surface:a,value:r,defaultValue:n,onChange:o,max:i=5,precision:l=1,color:s="default",size:d="medium",readOnly:c=!1,disabled:u=!1,emptyLabel:p="No rating",className:m="",sx:g={},...f}){const[b,v]=t(n??null),[x,y]=t(null),w=void 0!==r,S=w?r:b,k=null!==x?x:S,B=.5===l,C=!c&&!u,T=es[s]||es.default,A=ts[d]||ts.medium,z="var(--Buttons-"+T+"-Button)",I="var(--Buttons-"+T+"-Border)",R=e=>{if(!C)return;const t=e===S?null:e;w||v(t),o?.(t)},W=(e,t)=>{if(!C||!B)return;y(t?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}}}:{},F=e=>{const t=e+1,a=e+.5,r=null!==k&&t<=k,n=null!==k&&!r&&B&&a<=k,o=n?Ft:Pe,s=((e,t)=>e||t?{color:z,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}})(r,n);return B&&C?ue(h,{sx:{position:"relative",display:"inline-flex",cursor:"pointer",...s,...D},onMouseLeave:()=>y(null),children:[de(h,{sx:{position:"absolute",left:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>W(e,!0),onClick:()=>R(a)}),de(h,{sx:{position:"absolute",right:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>W(e,!1),onClick:()=>R(t)}),de(o,{sx:{fontSize:A.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})]},e):de(h,{component:C?"button":"span",type:C?"button":void 0,role:C?"radio":void 0,"aria-checked":r,"aria-label":t+" star"+(1!==t?"s":""),tabIndex:C?0:-1,onClick:()=>R(t),onMouseEnter:()=>C&&y(t),onMouseLeave:()=>C&&y(null),onKeyDown:e=>{if(C&&("ArrowRight"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),R(Math.min((S||0)+l,i))),"ArrowLeft"===e.key||"ArrowDown"===e.key)){e.preventDefault();const t=Math.max((S||0)-l,0);R(t||null)}},sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",padding:0,...A.minHit&&{minWidth:A.minHit+"px",minHeight:A.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:A.focusWidth+"px solid var(--Focus-Visible)",outlineOffset:A.focusInset+"px",borderRadius:"2px"}:{},"&:disabled":{cursor:"not-allowed",opacity:"var(--Disabled, 0.38)"}},children:de(o,{sx:{fontSize:A.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})},e)};return ue(h,{role:C?"radiogroup":"img","aria-label":"Rating"+(null!==S?": "+S+" of "+i+" stars":": "+p),"data-theme":e||void 0,"data-surface":a||void 0,className:"rating rating-"+s+" rating-"+d+(c?" rating-readonly":"")+(u?" rating-disabled":"")+(null===S?" rating-empty":"")+(m?" "+m:""),sx:{display:"inline-flex",alignItems:"center",gap:A.gap+"px",opacity:u?"var(--Disabled, 0.38)":1,fontFamily:"inherit",...g},...f,children:[Array.from({length:i},(e,t)=>F(t)),null===S&&!x&&de(xr,{style:{color:"var(--Quiet)",marginLeft:4},children:p})]})}const rs={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 ns({children:t,separator:a="/",size:r="medium",condense:n=!1,maxItems:o=4,itemsBeforeCollapse:i=1,itemsAfterCollapse:l=1,backOnlyMobile:s=!1,onExpand:u,className:p="",sx:m={},...g}){const f=rs[r]||rs.medium,b=d.toArray(t).filter(c),v=b.length,x=n&&v>o;let y=b;const[w,S]=e.useState(!1);if(x&&!w){const e=b.slice(0,i),t=b.slice(v-l);y=[...e,de(h,{component:"button",onClick:()=>{S(!0),u?.()},"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"),...t]}const k=[];y.forEach((e,t)=>{const r=x&&!w?t===y.length-1:t===v-1;k.push(de(h,{component:"li",className:"breadcrumb-item"+(r?" breadcrumb-current":""),sx:{display:"inline-flex",alignItems:"center",...r&&{color:"var(--Text)",fontWeight:"var(--Body-Medium-Semibold-Font-Weight, 600)"},...!r&&{color:"var(--Link, var(--Hotlink))"},maxWidth:"200px","& > *":{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},...r?{"aria-current":"page"}:{},children:e},"crumb-"+t)),t<y.length-1&&k.push(de(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:a},"sep-"+t))});const B=v>=2?b[v-2]:null;return ue(h,{component:"nav","aria-label":"Breadcrumb",className:"breadcrumbs breadcrumbs-"+r+" "+p,sx:{fontSize:f.fontSize,fontFamily:"var(--Body-Font-Family)",lineHeight:1.5,...m},...g,children:[de(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:k}),s&&B&&ue(h,{className:"breadcrumbs-back-mobile",sx:{display:"none","@media (max-width: 600px)":{display:"flex",alignItems:"center",gap:"var(--Sizing-Half)",fontSize:f.fontSize,color:"var(--Link)"}},children:[de(h,{component:"span","aria-hidden":"true",sx:{fontSize:"1.1em",lineHeight:1},children:"←"}),e.cloneElement(B,{style:{...B.props?.style||{},textDecoration:"underline",textUnderlineOffset:"3px"}})]})]})}function os({children:e,href:t,className:a="",sx:r={},...n}){const o=!!t;return de(h,{component:o?"a":"span",href:t||void 0,className:"breadcrumb-link "+a,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"}},...r},...n,children:e})}const is=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"";function ls({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function ss(){const[e,a]=t("medium"),[r,n]=t("/"),[o,i]=t(!1),[l,s]=t(null),[d,c]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Breadcrumbs"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:l,surface:d,children:ue(ns,{size:e,separator:r,condense:o,maxItems:3,children:[de(os,{href:"#",children:"Home"}),de(os,{href:"#",children:"Products"}),de(os,{href:"#",children:"Shoes"}),de(os,{children:"Running Shoes"})]})}),de(Zo,{code:(()=>{const t=[];return"medium"!==e&&t.push('size="'+e+'"'),"/"!==r&&t.push('separator="'+r+'"'),o&&t.push("condense maxItems={3}"),"<Breadcrumbs"+(t.length?" "+t.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}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Breadcrumbs",theme:l,surface:d})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(t=>de(ls,{label:is(t),selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEPARATOR"}),de(S,{direction:"row",spacing:1,children:["/","›","→","·","|"].map(e=>de(ls,{label:e,selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Condense"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Collapse middle items into ellipsis"})]}),de(ci,{variant:"default-outline",checked:o,onChange:e=>i(e.target.checked),size:"small","aria-label":"Condense"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Breadcrumbs"})})]})]})})]})]})}const ds={small:{btnSize:"small",fontSize:"13px",gap:"2px"},medium:{btnSize:"medium",fontSize:"14px",gap:"4px"},large:{btnSize:"large",fontSize:"16px",gap:"4px"}};function cs({theme:e,surface:a,count:r=10,page:n,defaultPage:i=1,onChange:l,color:s="default",size:d="medium",siblingCount:c=1,boundaryCount:u=1,disabled:p=!1,showFirstButton:m=!1,showLastButton:g=!1,className:f="",sx:b={},...v}){const[x,y]=t(i),w=void 0!==n,S=w?n:x;(e=>{e.charAt(0).toUpperCase(),e.slice(1)})("default"===s?"Default":s);const k=ds[d]||ds.medium,B=o(e=>{const t=Math.max(1,Math.min(r,e));w||y(t),l?.(t)},[r,w,l]),C=function({count:e,page:t,siblingCount:a=1,boundaryCount:r=1}){const n=(e,t)=>Array.from({length:t-e+1},(t,a)=>e+a);if(2*a+3+2*r>=e)return n(1,e);const o=Math.max(t-a,r+1),i=Math.min(t+a,e-r),l=o>r+2,s=i<e-r-1;if(!l&&s)return[...n(1,Math.min(3+2*a+r,e)),"ellipsis-right",...n(e-r+1,e)];if(l&&!s){const t=n(Math.max(e-(3+2*a+r)+1,1),e);return[...n(1,r),"ellipsis-left",...t]}return l&&s?[...n(1,r),"ellipsis-left",...n(o,i),"ellipsis-right",...n(e-r+1,e)]:n(1,e)}({count:r,page:S,siblingCount:c,boundaryCount:u}),T="default"===s?"default":s;return de(h,{component:"nav","aria-label":"Pagination","data-theme":e||void 0,"data-surface":a||void 0,className:"pagination pagination-"+s+" pagination-"+d+" "+f,sx:{display:"inline-flex",...b},...v,children:ue(h,{component:"ul",sx:{display:"flex",alignItems:"center",gap:k.gap,listStyle:"none",m:0,p:0,flexWrap:"wrap"},children:[m&&de(h,{component:"li",children:de(oo,{iconOnly:!0,variant:T+"-outline",size:k.btnSize,disabled:p||1===S,onClick:()=>B(1),"aria-label":"Go to first page",children:de(un,{size:"small",children:de(Ht,{})})})}),de(h,{component:"li",children:de(oo,{iconOnly:!0,variant:T+"-outline",size:k.btnSize,disabled:p||1===S,onClick:()=>B(S-1),"aria-label":"Go to previous page",children:de(un,{size:"small",children:de(Pt,{})})})}),C.map((e,t)=>{if("string"==typeof e)return de(h,{component:"li",children:de(xr,{style:{color:"var(--Quiet)",padding:"0 4px"},"aria-hidden":"true",children:"…"})},e+"-"+t);const a=e===S;return de(h,{component:"li",children:de(oo,{variant:a?T:T+"-outline",size:k.btnSize,disabled:p,onClick:()=>B(e),"aria-label":"Page "+e,"aria-current":a?"page":void 0,letterNumber:!0,children:e})},e)}),de(h,{component:"li",children:de(oo,{iconOnly:!0,variant:T+"-outline",size:k.btnSize,disabled:p||S===r,onClick:()=>B(S+1),"aria-label":"Go to next page",children:de(un,{size:"small",children:de(Lt,{})})})}),g&&de(h,{component:"li",children:de(oo,{iconOnly:!0,variant:T+"-outline",size:k.btnSize,disabled:p||S===r,onClick:()=>B(r),"aria-label":"Go to last page",children:de(un,{size:"small",children:de(Nt,{})})})})]})})}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"]}];function ps({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function ms({color:e,selected:t,onClick:a}){const r=us(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function gs(){const[e,a]=t("default"),[r,n]=t("medium"),[o,i]=t(10),[l,s]=t(!1),[d,c]=t(!1),[u,p]=t(!1),[m,g]=t(null),[f,b]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Pagination"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:m,surface:f,children:de(cs,{color:e,size:r,count:o,showFirstButton:l,showLastButton:d,disabled:u})}),de(Zo,{code:(()=>{const t=[];return"default"!==e&&t.push('color="'+e+'"'),"medium"!==r&&t.push('size="'+r+'"'),10!==o&&t.push("count={"+o+"}"),l&&t.push("showFirstButton"),d&&t.push("showLastButton"),u&&t.push("disabled"),t.push("onChange={handlePageChange}"),1===t.length?"<Pagination onChange={handlePageChange} />":"<Pagination\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:m,onThemeChange:g,surface:f,onSurfaceChange:b})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Pagination",theme:m,surface:f})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:hs.map(t=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:t.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:t.colors.map(t=>de(ms,{color:t,selected:e===t,onClick:a},t))})]},t.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(ps,{label:us(e),selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PAGES"}),de(S,{direction:"row",spacing:1,children:[5,10,20,50].map(e=>de(ps,{label:String(e),selected:o===e,onClick:()=>i(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"First/Last Buttons"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show jump to first/last page"})]}),de(ci,{variant:"default-outline",checked:l,onChange:e=>{s(e.target.checked),c(e.target.checked)},size:"small","aria-label":"First/last buttons"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Disabled"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),de(ci,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Disabled"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Pagination"})})]})]})})]})]})}const fs=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",bs=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],vs=[{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function xs({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function ys({color:e,selected:t,onClick:a}){const r=fs(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function ws(){const[e,a]=t("standard"),[r,n]=t("default"),[o,i]=t("medium"),[l,s]=t("horizontal"),[d,c]=t(null),[u,p]=t("Surface"),[m,g]=t(!1),f="standard"===e?bs:vs;return ue(h,{sx:{pb:8},children:[de($a,{children:"Tabs"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:d,surface:u,children:de(h,{sx:{width:"100%",maxWidth:"vertical"===l?500:"100%",display:"flex",flexDirection:"vertical"===l?"row":"column"},children:ue(ki,{defaultValue:0,variant:e,color:r,size:o,orientation:l,children:[ue(Bi,{rounded:m,children:[de(Ci,{children:"Overview"}),de(Ci,{children:"Features"}),de(Ci,{children:"Pricing"})]}),de(Ti,{value:0,children:de(h,{sx:{p:2},children:de(ur,{style:{color:"var(--Quiet)"},children:"Overview content goes here."})})}),de(Ti,{value:1,children:de(h,{sx:{p:2},children:de(ur,{style:{color:"var(--Quiet)"},children:"Features content goes here."})})}),de(Ti,{value:2,children:de(h,{sx:{p:2},children:de(ur,{style:{color:"var(--Quiet)"},children:"Pricing content goes here."})})})]})})}),de(Zo,{code:(()=>{const t=[];return"standard"!==e&&t.push('variant="'+e+'"'),"default"!==r&&t.push('color="'+r+'"'),"medium"!==o&&t.push('size="'+o+'"'),"horizontal"!==l&&t.push('orientation="vertical"'),"<Tabs defaultValue={0}"+(t.length?" "+t.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}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:de(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"})]}),de(Ti,{value:0,children:ue(h,{sx:{p:3},children:[de(h,{sx:{mb:3},children:de(Li,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["standard","solid","light","dark"].map(t=>de(xs,{label:fs("standard"===t?"default":t),selected:e===t,onClick:()=>(e=>{a(e),"standard"!==e&&"default"===r&&n("primary")})(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:f.map(e=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>de(ys,{color:e,selected:r===e,onClick:n},e))})]},e.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(xs,{label:fs(e),selected:o===e,onClick:()=>i(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),de(S,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>de(xs,{label:fs(e),selected:l===e,onClick:()=>s(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SHAPE"}),de(ci,{label:"Rounded corners",checked:m,onChange:e=>g(e.target.checked)}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Off by default. When on, the TabList applies"," ",de("code",{children:"var(--Style-Border-Radius)"})," and clips the active tab's background to fit the rounded shell (",de("code",{children:"overflow: hidden"})," is always on)."]})]})]})}),de(Ti,{value:1,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})})]})})})]})]})}const Ss=new Set;function ks({variant:a="outlined",color:r="default",size:n="medium",disabled:o=!1,orientation:i="horizontal",separated:l=!1,spacing:s,fit:d,fullWidth:c=!1,equalWidth:u=!1,multiple:p=!1,value:m,defaultValue:g,onChange:f,children:b,className:v="",sx:x={},"aria-label":y,...w}){const[S,k]=t(g??(p?[]:null)),B=void 0!==m,C=B?m:S,T=p?Array.isArray(C)?C:null==C?[]:[C]:null,A="horizontal"===i,z=void 0!==s?s:l?"var(--Platform-Spacer)":0,I=!l&&0===z,R="light"===a,W="ghost"===a,D=d??(c?"fill":u?"equal":"hug"),F="fill"===D,P="equal"===D&&A,L=(H=r).charAt(0).toUpperCase()+H.slice(1);var H;const N="var(--Buttons-"+L+"-Border)",M="var(--Buttons-"+L+"-Button)",O="var(--Buttons-"+L+"-Text)",E="default"===r?void 0:L,Q=e.Children.toArray(b).filter(Boolean),V=Q.length,j=(e,t)=>a=>{const r=p?T.includes(e)?T.filter(t=>t!==e):[...T,e]:e;B||k(r),f?.(r,a),t?.(a)},U=Q.map((t,a)=>{if(!e.isValidElement(t))return t;const i=0===a,s=a===V-1,d=t.props.value??a,c=(u=d,p?T.includes(u):C===u);var u;let m;if(I&&V>1){const e="var(--Style-Border-Radius)";m=A?i&&s?e:i?e+" 0 0 "+e:s?"0 "+e+" "+e+" 0":"0":i&&s?e:i?e+" "+e+" 0 0":s?"0 0 "+e+" "+e:"0"}const g=I&&V>1?{borderRadius:m,...!i&&(A?{marginLeft:"calc(-1 * var(--Button-Border-Width))"}:{marginTop:"calc(-1 * var(--Button-Border-Width))"}),position:"relative","&:hover, &:focus-visible":{zIndex:1}}:{},f=W?{backgroundColor:"var(--Background) !important",color:"var(--Text) !important",borderColor:N+" !important"}:{backgroundColor:M+" !important",color:O+" !important",borderColor:N+" !important"},b=c?{...f,"&:hover, &:active, &.Mui-focusVisible, &:focus-visible":f}:{},v={...F&&A&&{flex:"1 1 0",minWidth:0},...g,transform:"none !important","&:hover, &:active, &:focus-visible":{transform:"none !important"},...b,...c?{}:{color:"var(--Quiet)",backgroundColor:"transparent","&:hover":{backgroundColor:"var(--Hover)",color:"var(--Text)",zIndex:1},"&:active":{backgroundColor:"var(--Pressed)",color:"var(--Text)"}},...W&&!c?{border:"none !important","&:hover":{border:"none !important"}}:{},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px",zIndex:2},...t.props.sx};!function(e={},t=!1){if("production"===process.env.NODE_ENV)return;const a=[];(e.avatar||"avatar"===e.contentType)&&a.push("an Avatar segment — Button-Group-Segments has only text, iconOnly and letterNumber");const r=String(e.variant||"");r&&!/-outline$/.test(r)&&"ghost"!==r&&"text"!==r&&a.push(`a solid segment (variant="${r}") — segments are outline or ghost; the GROUP paints the selected one`),t&&(e.iconOnly||e.letterNumber||e.contentType)&&a.push("a typed SEPARATED segment — Separated-Button-Segments has no Type axis");for(const e of a)Ss.has(e)||(Ss.add(e),console.warn("[ButtonGroup] "+e+"."))}(t.props,l);const x=e.cloneElement(t,{variant:t.props.variant??(W?c?r+"-outline":"ghost":c?r:r+"-outline"),size:t.props.size??n,disabled:t.props.disabled??o,onClick:j(d,t.props.onClick),"aria-pressed":c,sx:v});return R&&!c?de(h,{"data-theme":E,"data-surface":"Surface-Brightest",sx:{display:"contents"},children:x},a):e.cloneElement(x,{key:a})});return de(h,{role:"group","aria-label":y,className:"btn-group btn-group-"+a+" btn-group-"+r+" "+v,sx:{...P?{display:F?"grid":"inline-grid",gridAutoFlow:"column",gridAutoColumns:"1fr",justifyItems:"stretch",alignItems:"stretch",width:F?"100%":"fit-content"}:{display:F?"flex":"inline-flex",flexDirection:A?"row":"column",alignItems:"stretch",width:F?"100%":"auto"},gap:I?0:z,border:"none",borderRadius:"var(--Style-Border-Radius)",...x},...w,children:U})}const Bs={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"}},Cs=s({variant:"solid",color:"default",size:"medium",spacing:0}),Ts=s({expanded:!1,toggle:()=>{},disabled:!1,accordionId:""}),As="var(--Accordion-Radius, var(--Button-Radius))";function zs({children:e,variant:t="solid",surface:a,color:r="default",size:n="medium",spacing:o=0,className:i="",sx:l={},...s}){const d="default"===r?"Default":(c=r).charAt(0).toUpperCase()+c.slice(1);var c;const u=0===o,p="default"===r?"Default":d,m=a||("dark"===t?"Surface-Dimmest":"light"===t?"Surface-Brightest":"Surface");return de(Cs.Provider,u?{value:{variant:t,color:r,size:n,spacing:o,dataTheme:p,dataSurface:m},children:de(h,{role:"presentation",className:"accordion-group accordion-group-connected accordion-group-"+t+" "+i,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:As,borderTopRightRadius:As},"& > .accordion-segment:first-of-type .accordion-summary":{borderTopLeftRadius:As,borderTopRightRadius:As},"& > .accordion-segment:last-of-type":{borderBottomLeftRadius:As,borderBottomRightRadius:As,marginBottom:0},"& > .accordion-segment:last-of-type .accordion-summary:not(.accordion-summary-expanded)":{borderBottomLeftRadius:As,borderBottomRightRadius:As},...l},...s,children:e})}:{value:{variant:t,color:r,size:n,spacing:o,dataTheme:p,dataSurface:m},children:de(h,{role:"presentation",className:"accordion-group accordion-group-"+t+" accordion-group-spaced "+i,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 Is({children:e,expanded:a,defaultExpanded:r=!1,onChange:n,disabled:o=!1,className:i="",sx:s={},...d}){const[c,u]=t(r),p=void 0!==a,m=p?a:c,{dataTheme:g,dataSurface:f}=l(Cs),[b]=t(()=>"accordion-"+Math.random().toString(36).substring(2,9));return de(Ts.Provider,{value:{expanded:m,toggle:()=>{if(o)return;const e=!m;p||u(e),n?.(e)},disabled:o,accordionId:b},children:de(h,{className:"accordion-segment accordion"+(m?" accordion-expanded":"")+(o?" accordion-disabled":"")+" "+i,"data-theme":g,"data-surface":f,sx:{border:"1px solid var(--Border-Variant)",borderRadius:As,backgroundColor:"var(--Background)",overflow:"hidden",boxShadow:Dn,opacity:o?"var(--Disabled, 0.38)":1,...s},...d,children:e})})}const Rs={small:dr,medium:hr,large:br},Ws={small:sr,medium:ur,large:fr};function Ds({children:e,startDecorator:t,endDecorator:a,eyebrow:r,overline:n,secondary:o,expandIcon:i,className:s="",sx:d={},...c}){const{expanded:u,toggle:p,disabled:m,accordionId:g}=l(Ts),{size:f}=l(Cs),b=Bs[f]||Bs.medium,v=Rs[f]||Rs.medium,x=i||de(un,{size:b.iconSize,sx:{color:u?"var(--Text)":"var(--Quiet)",transition:"color 0.15s ease"},children:de(ge,{})}),y={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block"};return ue(h,{component:"button",role:"button","aria-expanded":u,"aria-controls":g+"-content",id:g+"-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:b.gap,padding:b.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?As+" "+As+" 0 0":As,"&: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:[t&&de(h,{className:"accordion-summary-start",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:t}),ue(h,{sx:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)"},children:[(r??n)&&de(Ar,{style:{...y,color:"var(--Text-Quiet)"},children:r??n}),null!=e&&de(v,{style:{...y,color:"inherit"},children:e}),o&&de(sr,{style:{...y,color:"var(--Text-Quiet)"},children:o})]}),a&&de(h,{className:"accordion-summary-end",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:a}),de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",transform:u?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.25s ease",flexShrink:0},children:x})]})}function Fs({children:e,className:t="",sx:a={},...r}){const{expanded:n,accordionId:o}=l(Ts),{size:i}=l(Cs),s=Bs[i]||Bs.medium,d=Ws[i]||Ws.medium;return n?de(h,{role:"region",id:o+"-content","aria-labelledby":o+"-header",className:"accordion-details "+t,sx:{padding:"0 "+s.detailsPx+" "+s.detailsPy+" "+s.detailsPx,color:"var(--Text)",fontFamily:"inherit",lineHeight:1.6,...a},...r,children:"string"==typeof e||"number"==typeof e?de(d,{children:e}):e}):null}const Ps=["Link","Chip","Badge","Caption","Label","Tag","BodySmall","LegalSemibold","Legal","LabelSmall","LabelExtraSmall","EyebrowSmall","ButtonSmall"];function Ls(t){let a=!1;return e.Children.forEach(t,t=>{(function(t){if(!e.isValidElement(t))return!1;const a=t.props||{};if("small"===a.size)return!0;if("small"===a["data-size"])return!0;if(24===a.height||24===a.minHeight)return!0;if("24px"===a.height||"24px"===a.minHeight)return!0;if(a.sx){const e=a.sx.minHeight||a.sx.height;if(24===e||"24px"===e)return!0}const r=t.type;if(r){const e=r.displayName||r.name||"";if(Ps.some(t=>e.includes(t)))return!0}return!1})(t)&&(a=!0)}),a}function Hs({children:e,gap:t,spacing:a,direction:r="column",enforceMinGap:n=!0,minGapToken:o="--min-stack-gap",divider:i,flexWrap:l,useFlexGap:s=!0,alignItems:d,justifyContent:c,sx:h={},className:p="",...m}){const g=void 0!==t?t:a,f=n&&Ls(e),b=u(()=>{if(!f)return g;const e=function(e,t=8){return null==e?0:"number"==typeof e?e*t:"string"==typeof e?e.endsWith("px")?parseFloat(e):e.endsWith("rem")?parseFloat(e)*parseFloat(getComputedStyle(document.documentElement).fontSize||"16"):parseFloat(e)*t||0:0}(g),t=function(e,t=8){if("undefined"==typeof window)return t;const a=getComputedStyle(document.documentElement).getPropertyValue(e).trim();return a?a.endsWith("rem")?parseFloat(a)*parseFloat(getComputedStyle(document.documentElement).fontSize):parseFloat(a)||t:t}(o,8);return e>=t?g:"var("+o+", "+t+"px)"},[f,g,o]);return de(S,{direction:r,spacing:s?void 0:b,gap:s?b:void 0,divider:i,flexWrap:l,useFlexGap:s,alignItems:d,justifyContent:c,className:"omni-stack"+(f?" omni-stack-min-gap-enforced":"")+(p?" "+p:""),sx:{...m["data-surface"]||m["data-theme"]?{background:"var(--Background)"}:{},boxSizing:"border-box",...f?{"&::before":{display:"none"}}:{},...h},"data-min-gap-enforced":f?"true":void 0,...m,children:e})}const Ns=e=>de(Hs,{direction:"row",alignItems:"center",...e}),Ms=e=>de(Hs,{direction:"column",...e}),Os=e=>de(Hs,{direction:"column",alignItems:"center",justifyContent:"center",...e}),Es=e=>de(Hs,{direction:"row",alignItems:"center",justifyContent:"space-between",...e}),Qs=e=>de(Hs,{direction:"row",flexWrap:"wrap",...e}),Vs=({breakpoint:e="sm",...t})=>de(Hs,{direction:{xs:"column",[e]:"row"},...t}),js=Hs,Us=Qs,Gs=e=>de(h,{sx:{borderBottom:"1px solid var(--Border)",width:"100%"},...e}),Xs=({sx:e,...t})=>de(Hs,{sx:{px:2,...e},...t}),qs=({sx:e,...t})=>de(Hs,{sx:{overflowY:"auto",...e},...t});function Ys({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"primary":"primary-outline",size:"small",onClick:a,children:e})}function Zs({code:e}){return de(Zo,{code:e,language:"JSX",wrap:!0,sx:{mt:1}})}function Js({passes:e}){return ue(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:[de(e?Be:Ce,{sx:{fontSize:14}}),e?"WCAG Pass":"WCAG Fail"]})}function $s({leftLabel:e,rightLabel:t,leftContent:a,rightContent:r,leftCode:n,rightCode:o,leftPasses:i,rightPasses:l}){return ue(w,{container:!0,spacing:3,children:[de(w,{item:!0,xs:12,md:6,children:ue(h,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[ue(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[de(sr,{style:{fontWeight:600},children:e}),de(Js,{passes:i})]}),de(h,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:a}),de(Zs,{code:n})]})}),de(w,{item:!0,xs:12,md:6,children:ue(h,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[ue(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[de(sr,{style:{fontWeight:600},children:t}),de(Js,{passes:l})]}),de(h,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:r}),de(Zs,{code:o})]})})]})}function Ks(){const[e,a]=t("column"),[r,n]=t(.5),[o,i]=t("small"),[l,s]=t(!0),[d,c]=t(!1),[u,p]=t(null),[m,g]=t("Surface"),f={small:{label:"Small links ⚡",content:ue(ce,{children:[de(Al,{href:"#",size:"small",children:"Terms of Service"}),de(Al,{href:"#",size:"small",children:"Privacy Policy"}),de(Al,{href:"#",size:"small",children:"Cookie Settings"})]})},chips:{label:"Chips ⚡",content:ue(ce,{children:[de(fo,{label:"React",size:"small"}),de(fo,{label:"TypeScript",size:"small"}),de(fo,{label:"Design System",size:"small"})]})},normal:{label:"Normal buttons",content:ue(ce,{children:[de(oo,{variant:"primary",size:"medium",children:"Primary"}),de(oo,{variant:"secondary",size:"medium",children:"Secondary"})]})},mixed:{label:"Mixed ⚡",content:ue(ce,{children:[de(oo,{variant:"primary",size:"medium",children:"Save changes"}),de(Al,{href:"#",size:"small",children:"Or discard"})]})}},b=["small","chips","mixed"].includes(o),v=l&&b;return ue(w,{container:!0,spacing:3,sx:{mt:1},children:[ue(w,{item:!0,xs:12,md:7,children:[de(Ai,{theme:u,children:ue(h,{sx:{width:"100%"},children:[v&&ue(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:[de(Ce,{sx:{fontSize:16}}),"Small child detected — gap raised to var(--min-stack-gap)"]}),de(Hs,{direction:e,gap:r,enforceMinGap:l,flexWrap:d?"wrap":void 0,children:f[o].content})]})}),de(Zs,{code:(()=>{const t=["<OmniStack"];return"column"!==e&&t.push(' direction="'+e+'"'),t.push(" gap={"+r+"}"),l||t.push(" enforceMinGap={false}"),d&&t.push(' flexWrap="wrap"'),t.push(">"),t.push(" {children}"),t.push("</OmniStack>"),t.join("\n")})()})]}),de(w,{item:!0,xs:12,md:5,children:ue(h,{sx:{display:"flex",flexDirection:"column",gap:3},children:[de(Li,{theme:u,onThemeChange:p,surface:m,onSurfaceChange:g}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CHILDREN"}),de(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:Object.entries(f).map(([e,{label:t}])=>de(Ys,{label:t,selected:o===e,onClick:()=>i(e)},e))})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),de(h,{sx:{display:"flex",gap:1},children:["row","column"].map(t=>{return de(Ys,{label:(r=t,r?r.charAt(0).toUpperCase()+r.slice(1):""),selected:e===t,onClick:()=>a(t)},t);var r})})]}),ue(h,{children:[ue(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["GAP — ",r," unit",v?" → raised to var(--min-stack-gap)":""]}),ue(h,{sx:{display:"flex",alignItems:"center",gap:2},children:[de(h,{component:"input",type:"range",min:0,max:6,step:.5,value:r,onChange:e=>n(Number(e.target.value)),sx:{flex:1,accentColor:"var(--Primary-Color-10)"}}),de(xr,{style:{color:"var(--Text)",minWidth:24,textAlign:"right"},children:r})]})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ue(h,{sx:{display:"flex",flexDirection:"column",gap:1.5},children:[ue(h,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[ue(h,{children:[de(sr,{children:"Enforce min gap"}),de(xr,{style:{color:v?"var(--Tags-Warning-Text)":"var(--Text-Quiet)",display:"block"},children:v?"⚡ Active — small child detected":b?"Off — WCAG 2.5.8 risk":"No small children detected"})]}),de(ci,{checked:l,onChange:e=>s(e.target.checked),size:"small"})]}),ue(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[de(sr,{children:"Flex wrap"}),de(ci,{checked:d,onChange:e=>c(e.target.checked),size:"small"})]})]})]})]})})]})}function _s(){return ue(h,{sx:{pb:8},children:[de($a,{children:"Stack"}),de(ur,{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."}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Why it matters"}),de(Ci,{children:"Playground"}),de(Ci,{children:"API"})]}),de(Ti,{value:0,children:ue(h,{sx:{pt:3,display:"flex",flexDirection:"column",gap:4},children:[ue(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[de($a,{children:"The problem"}),de(ur,{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."}),de($s,{leftLabel:"Plain MUI Stack — gap too small",rightLabel:"OmniStack — gap auto-enforced",leftPasses:!1,rightPasses:!0,leftContent:ue(h,{sx:{display:"flex",flexDirection:"column",gap:"4px"},children:[de(Al,{href:"#",size:"small",children:"Terms of Service"}),de(Al,{href:"#",size:"small",children:"Privacy Policy"}),de(Al,{href:"#",size:"small",children:"Cookie Settings"})]}),rightContent:ue(Hs,{gap:.5,children:[de(Al,{href:"#",size:"small",children:"Terms of Service"}),de(Al,{href:"#",size:"small",children:"Privacy Policy"}),de(Al,{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'})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[de($a,{children:"Mixed component sizes"}),de(ur,{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."}),de($s,{leftLabel:"Without enforcement",rightLabel:"With enforcement",leftPasses:!1,rightPasses:!0,leftContent:ue(h,{sx:{display:"flex",flexDirection:"column",gap:"2px"},children:[de(oo,{variant:"primary",size:"medium",children:"Save changes"}),de(Al,{href:"#",size:"small",children:"Or discard"})]}),rightContent:ue(Hs,{gap:.25,children:[de(oo,{variant:"primary",size:"medium",children:"Save changes"}),de(Al,{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'})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[de($a,{children:"How detection works"}),de(ur,{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."}),de(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:t},a,r)=>ue(h,{sx:{display:"flex",alignItems:"center",gap:2,py:1.5,borderBottom:a<r.length-1?"1px solid var(--Border)":"none"},children:[de(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Primary-Color-10)",flexShrink:0}}),de(sr,{style:{flex:"0 0 200px"},children:e}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[de($a,{children:"Token-driven minimum"}),de(ur,{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."}),de(Zs,{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. */"})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[de($a,{children:"Auditable opt-out"}),ue(ur,{style:{color:"var(--Text-Quiet)",marginTop:8,marginBottom:16},children:["Use ",de("code",{children:"enforceMinGap={false}"})," to opt out. This creates a searchable pattern accessibility audits can grep for — a conscious waiver, not a silent violation."]}),de(Zs,{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>'})]})]})}),de(Ti,{value:1,children:de(Ks,{})}),de(Ti,{value:2,children:ue(h,{sx:{pt:3},children:[de($a,{children:"OmniStack props"}),de(ur,{style:{color:"var(--Text-Quiet)",marginTop:4,marginBottom:16},children:"All standard MUI Stack props are supported. These are OmniStack additions:"}),de(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:t,default:a,desc:r},n,o)=>ue(h,{sx:{display:"grid",gridTemplateColumns:"160px 160px 1fr",gap:2,px:2,py:1.5,alignItems:"start",borderBottom:n<o.length-1?"1px solid var(--Border)":"none",backgroundColor:n%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[de(xr,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t}),ue(h,{children:[de(xr,{style:{color:"var(--Text)"},children:r}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:["Default: ",a]})]})]},e))}),de($a,{children:"Convenience exports"}),de(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:t},a,r)=>ue(h,{sx:{display:"grid",gridTemplateColumns:"200px 1fr",gap:2,px:2,py:1.5,borderBottom:a<r.length-1?"1px solid var(--Border)":"none",backgroundColor:a%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[de(xr,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),de(xr,{style:{color:"var(--Text-Quiet)"},children:t})]},e))}),de($a,{children:"Debug attributes"}),de(Zs,{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 ed={Button:()=>de(oo,{children:"Button"}),ButtonGroup:()=>ue(ks,{value:"a",onChange:()=>{},size:"small",children:[de(oo,{value:"a",size:"small",children:"Day"}),de(oo,{value:"b",size:"small",children:"Week"}),de(oo,{value:"c",size:"small",children:"Month"})]}),Chip:()=>ue(Ns,{gap:"var(--Sizing-1)",children:[de(fo,{label:"Unselected"}),de(fo,{label:"Selected",selected:!0}),de(fo,{label:"Dismissible",onDelete:()=>{}})]}),Badge:()=>ue(Ns,{gap:"var(--Sizing-3)",children:[de(An,{badgeContent:3,children:de(un,{children:de("span",{children:"✉"})})}),de(An,{dot:!0,children:de(un,{children:de("span",{children:"🔔"})})})]}),Alert:()=>ue(Ms,{gap:"var(--Sizing-1)",children:[de(ni,{color:"info",children:"Something worth knowing."}),de(ni,{color:"error",children:"Something went wrong."})]}),Card:()=>de(Gi,{padding:"medium",children:ue(Ms,{gap:"var(--Sizing-1)",children:[de($a,{children:"Card title"}),de(ur,{children:"What a card looks like in this design system."})]})}),Avatar:()=>ue(Ns,{gap:"var(--Sizing-1)",children:[de(vn,{initials:"LN"}),de(vn,{})]}),Icon:()=>ue(Ns,{gap:"var(--Sizing-1)",children:[de(un,{color:"primary",children:de("span",{children:"★"})}),de(un,{color:"success",children:de("span",{children:"✓"})}),de(un,{color:"error",children:de("span",{children:"✕"})})]}),Link:()=>de(Al,{href:"#example",children:"A link, which thickens rather than recolours on hover"}),Divider:()=>de(Dl,{indicatorText:"OR"}),Checkbox:()=>ue(Ms,{gap:"var(--Sizing-Half)",children:[de(ol,{label:"Unchecked"}),de(ol,{label:"Checked",defaultChecked:!0}),de(ol,{label:"Indeterminate",indeterminate:!0})]}),Radio:()=>ue(ql,{defaultValue:"a",name:"docs-radio",children:[de(Xl,{value:"a",label:"First"}),de(Xl,{value:"b",label:"Second"})]}),Input:()=>de(Ql,{label:"Email",placeholder:"you@example.com"}),SwitchInput:()=>ue(Ms,{gap:"var(--Sizing-Half)",children:[de(ui,{label:"Off"}),de(ui,{label:"On",defaultChecked:!0})]}),Slider:()=>de($l,{defaultValue:40}),Rating:()=>de(as,{defaultValue:3}),Breadcrumbs:()=>ue(ns,{children:[de(Al,{href:"#a",children:"Home"}),de(Al,{href:"#b",children:"Products"}),de(ur,{children:"Current"})]}),Pagination:()=>de(cs,{count:8,defaultPage:3}),Accordion:()=>de(Is,{children:de(ur,{children:"An accordion segment, open."})}),Tabs:()=>ue(ki,{defaultValue:0,children:[ue(Bi,{children:[de(Ci,{value:0,children:"Overview"}),de(Ci,{value:1,children:"Details"})]}),de(Ti,{value:0,children:de(ur,{children:"The first panel."})}),de(Ti,{value:1,children:de(ur,{children:"The second panel."})})]})};function td(e){return e in ed}const ad={Button:{variant:()=>ue(Ns,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap"},children:[de(oo,{children:"solid"}),de(oo,{variant:"outline",children:"outline"}),de(oo,{variant:"ghost",children:"ghost"})]}),size:()=>ue(Ns,{gap:"var(--Sizing-1)",style:{alignItems:"center",flexWrap:"wrap"},children:[de(oo,{size:"small",children:"small"}),de(oo,{size:"medium",children:"medium"}),de(oo,{size:"large",children:"large"})]}),disabled:()=>ue(Ns,{gap:"var(--Sizing-1)",children:[de(oo,{children:"enabled"}),de(oo,{disabled:!0,children:"disabled"})]}),"startDecorator / endDecorator":()=>ue(Ms,{gap:"var(--Sizing-1)",children:[ue(Ns,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[de(oo,{startDecorator:de(un,{children:de(Wt,{})}),children:"start icon"}),de(oo,{endDecorator:de(un,{children:de(Dt,{})}),children:"end icon"})]}),ue(Ns,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[de(oo,{startDecorator:de(vn,{}),children:"start avatar"}),de(oo,{endDecorator:de(vn,{}),children:"end avatar"})]})]}),iconOnly:()=>ue(Ns,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[de(oo,{children:"text"}),de(oo,{iconOnly:!0,"aria-label":"Delete item",children:de(We,{})}),de(oo,{letterNumber:!0,"aria-label":"3 unread",children:"3"}),de(oo,{avatar:!0,"aria-label":"Jane Doe",children:de(vn,{})})]}),elevated:()=>ue(Ns,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[de(oo,{children:"standard"}),de(oo,{elevated:!0,children:"raised"})]}),fullWidth:()=>ue(Ms,{gap:"var(--Sizing-1)",style:{width:"100%",maxWidth:320},children:[de(oo,{children:"default fit"}),de(oo,{fullWidth:!0,children:"full width"})]})}};const rd="https://omni-design.netlify.app";function nd(e){return e.trim().replace(/\s+/g,"-")}function od(e,t,a=rd){return`${a.replace(/\/+$/,"")}/docs/${encodeURIComponent(e)}/${nd(t)}`}function id(e,t=rd){return`${t.replace(/\/+$/,"")}/docs/${encodeURIComponent(e)}`}const ld="https://github.com/lwnoble/DinoDesign/issues/new";function sd(e){const t=nd(String(e||"")).toLowerCase();return ln.find(e=>nd(e.name).toLowerCase()===t)||null}const dd=({component:e,what:t})=>de(h,{sx:{p:3},children:ue(ur,{color:"quiet",children:["No ",t," written for ",e," yet."]})}),cd=({title:e,children:t})=>ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:e.toUpperCase()}),t]}),ud=({items:e})=>de(S,{spacing:0,children:e.map((e,t)=>ue(h,{sx:{py:1.25,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:e.head}),e.sub?de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:e.sub}):null]},t))});function hd({component:e,theme:t=null,surface:a="Surface"}){const r=sd(e);if(!r)return de(dd,{component:e,what:"reference"});const n=td(r.name)?ed[r.name]:null;return de(h,{sx:{p:3},children:ue(S,{spacing:3,children:[n?de(Ai,{theme:t,surface:a,minHeight:120,children:de(h,{sx:{p:3,display:"flex",alignItems:"center",justifyContent:"center"},children:n({theme:t,surface:a})})}):null,de(ur,{children:r.summary}),r.insteadUse.length>0&&de(cd,{title:"Reach for something else when",children:de(ud,{items:r.insteadUse.map(e=>({head:e.when,sub:`Use ${e.use}`}))})}),r.props.length>0&&de(cd,{title:"Props",children:de(S,{spacing:0,children:r.props.map((e,n)=>{const o=function(e,t){return Boolean(ad[e]&&ad[e][t])}(r.name,e.name)?ad[r.name][e.name]:null,i=[e.values&&e.values.length?e.values.join(" | "):null,e.default?`default: ${e.default}`:null,e.note].filter(Boolean).join(" · ");return ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e.name," — ",e.type]}),i?de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:i}):null,o?de(h,{sx:{mt:1.5},children:de(Ai,{theme:t,surface:a,minHeight:0,children:de(h,{sx:{p:2},children:o({theme:t,surface:a})})})}):null]},n)})})}),r.states.length>0&&de(cd,{title:"States",children:de(ud,{items:r.states.map(e=>({head:e.state,sub:[`set by ${e.setBy}`,e.note].filter(Boolean).join(" · ")}))})}),r.theming.length>0&&ue(cd,{title:"Theming",children:[de(ud,{items:r.theming.map(e=>({head:e.collection,sub:`In code: ${e.inCode}\nIn Figma: ${e.inFigma}`}))}),(r.themingNotes||[]).map((e,t)=>de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:e},t))]}),r.tokens.length>0&&de(cd,{title:"Tokens",children:de(ud,{items:r.tokens.map(e=>({head:e.name,sub:[e.sets,e.variesWith?`varies with ${e.variesWith}`:null,e.figma].filter(Boolean).join(" · ")}))})}),r.composition.length>0&&de(cd,{title:"Composition",children:de(ud,{items:r.composition.map(e=>({head:e}))})}),r.gotchas.length>0&&de(cd,{title:"Gotchas",children:de(ud,{items:r.gotchas.map(e=>({head:e}))})})]})})}function pd({component:e}){const t=sd(e),a=t&&t.changes||[],r=encodeURIComponent(`[${e}] `);return de(h,{sx:{p:3},children:ue(S,{spacing:3,children:[0===a.length?ue(ur,{color:"quiet",children:["No breaking changes recorded for ",e,". Only changes that break, or that silently change meaning, are listed here — not every fix."]}):de(S,{spacing:0,children:a.map((e,t)=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(S,{direction:"row",spacing:1,useFlexGap:!0,sx:{alignItems:"center",flexWrap:"wrap"},children:[de(sr,{style:{fontWeight:700},children:e.version}),e.silent?de(xr,{style:{color:"var(--Text-Warning)",fontWeight:600},children:"SILENT — old code still renders"}):null]}),de(ur,{children:e.change}),e.migrate?ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Instead: ",e.migrate]}):null]},t))}),ue(h,{children:[de(_a,{children:"Something wrong or missing?"}),de(sr,{color:"quiet",children:"Report it against this component and it arrives with the name already filled in."}),de(h,{sx:{mt:1},children:ue(Al,{href:`${ld}?title=${r}`,target:"_blank",rel:"noreferrer",children:["Report an issue with ",e]})})]})]})})}const md={"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 gd(){const e=({color:e})=>ue(h,{sx:{textAlign:"center"},children:[de(h,{sx:{width:"80px",height:"80px",backgroundColor:`var(${e.var})`,borderRadius:"8px",border:"1px solid var(--Border)",mb:1,mx:"auto"}}),de(P,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",mb:.5,wordBreak:"break-word"},children:e.name}),de(P,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",fontSize:"10px",fontFamily:"monospace",wordBreak:"break-all"},children:e.var})]});return ue(S,{spacing:6,children:[ue(h,{children:[de(P,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Brand Colors (Static)"}),de(S,{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(t=>de(e,{color:t},t.var))})]}),ue(h,{children:[de(P,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Background Colors (Dynamic)"}),de(P,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Update based on selected Background variant and Mode"}),de(w,{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=>de(w,{item:!0,sx:{display:"flex",justifyContent:"center"},children:ue(h,{sx:{textAlign:"center"},children:[de(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}}),de(P,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",wordBreak:"break-word"},children:e.name})]})},e.name))})]}),ue(h,{children:[de(P,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Dynamic Colors (Update with Mode, Background & Surface)"}),de(L,{severity:"info",sx:{backgroundColor:"var(--Container-Low)",mb:3,border:"1px solid var(--Border)"},children:ue(P,{variant:"body2",children:["Most colors update automatically based on the current"," ",de("strong",{children:"Mode"})," (Light/Dark), ",de("strong",{children:"Background"})," ","variant, and ",de("strong",{children:"Surface"})," theme. Only Primary, Secondary, and Tertiary colors are fixed brand colors."]})}),de(P,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"These colors automatically adapt based on:"}),ue(S,{spacing:1,sx:{mb:4},children:[ue(h,{sx:{display:"flex",gap:2},children:[de(P,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Mode:"}),de(P,{variant:"body2",children:"Light or Dark theme"})]}),ue(h,{sx:{display:"flex",gap:2},children:[de(P,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Background:"}),de(P,{variant:"body2",children:"Default, Primary, Secondary, Tertiary, Neutral, or Neutral-Variant"})]}),ue(h,{sx:{display:"flex",gap:2},children:[de(P,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Surface:"}),de(P,{variant:"body2",children:"Theme surface layer selection"})]})]}),de(S,{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(t=>ue(h,{children:[de(P,{variant:"h6",sx:{mb:2,fontWeight:600},children:t.name}),de(w,{container:!0,spacing:2,sx:{justifyContent:"center"},children:t.colors.map(t=>de(w,{item:!0,sx:{display:"flex",justifyContent:"center"},children:de(e,{color:t})},t.var))})]},t.name))})]}),ue(h,{sx:{pt:4,borderTop:"1px solid var(--Border)"},children:[de(P,{variant:"h5",sx:{mb:2,fontWeight:700},children:"How to Use"}),ue(S,{spacing:2,children:[ue(h,{children:[de(P,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Static Colors"}),ue(P,{variant:"body2",sx:{color:"var(--Text-Secondary)"},children:["Use brand colors (",de("code",{style:{backgroundColor:"var(--Container)",padding:"2px 4px",borderRadius:"4px"},children:"--Primary-Color-11"}),","," ",de("code",{style:{backgroundColor:"var(--Container)",padding:"2px 4px",borderRadius:"4px"},children:"--Secondary-Color-11"}),","," ",de("code",{style:{backgroundColor:"var(--Container)",padding:"2px 4px",borderRadius:"4px"},children:"--Tertiary-Color-11"}),") for brand elements that should never change."]})]}),ue(h,{children:[de(P,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Dynamic Colors"}),de(P,{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."})]}),ue(h,{children:[de(P,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Example Usage"}),de(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 fd(){const e=({name:e,varName:t,baseValue:a})=>de(h,{sx:{mb:2},children:ue(h,{sx:{display:"flex",alignItems:"center",gap:2,mb:1},children:[de(h,{"aria-hidden":"true",sx:{width:`var(${t})`,minWidth:20,height:24,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:.5,border:"1px solid var(--Border)"}}),ue(S,{spacing:.5,children:[de(P,{variant:"subtitle2",sx:{fontWeight:600},children:e}),de(P,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:t}),ue(P,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Base: ",a," (with cognitive multiplier)"]})]})]})}),t=({name:e,varName:t,value:a})=>ue(h,{sx:{mb:2},children:[de(h,{"aria-hidden":"true",sx:{width:100,height:a,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:1,border:"1px solid var(--Border)",mb:1}}),de(P,{variant:"subtitle2",sx:{fontWeight:600},children:e}),de(P,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:t}),de(P,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:a})]});return ue(S,{spacing:3,sx:{p:2},children:[ue("section",{children:[de(P,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Spacing Scale"}),de(P,{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."}),de(S,{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(t=>de(e,{name:t.name,varName:t.var,baseValue:t.baseValue},t.var))})]}),ue("section",{children:[de(P,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Sizing Scale"}),de(P,{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."}),de(w,{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=>de(w,{item:!0,xs:12,sm:6,md:4,lg:3,children:de(t,{name:e.name,varName:e.var,value:e.value})},e.var))})]}),ue("section",{children:[de(P,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Negative Sizing"}),de(P,{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."}),de(w,{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=>de(w,{item:!0,xs:12,sm:6,md:4,lg:3,children:ue(h,{children:[de(P,{variant:"subtitle2",sx:{fontWeight:600},children:e.name}),de(P,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:e.var}),de(P,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:e.value})]})},e.var))})]}),ue("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[de(P,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Container Padding"}),ue(h,{sx:{p:"var(--Spacing-3)",backgroundColor:"var(--Container-Low)",border:"2px dashed var(--Buttons-Primary-Button)",borderRadius:1},children:[ue(P,{variant:"body2",children:["Default container padding: ",de("strong",{children:"var(--Spacing-3)"})," = 24px"]}),de(P,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",mt:1},children:"Use this variable for consistent padding around main content areas."})]})]}),ue("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[de(P,{variant:"h5",component:"h2",sx:{mb:3,fontWeight:700},children:"Practical Examples"}),ue("article",{children:[de(P,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Padding Examples"}),de(P,{variant:"caption",sx:{color:"var(--Text-Secondary)",mb:2,display:"block"},children:"Different padding values create different visual breathing room."}),de(w,{container:!0,spacing:2,sx:{mb:4},children:["var(--Spacing-1)","var(--Spacing-2)","var(--Spacing-3)","var(--Spacing-4)"].map(e=>de(w,{item:!0,xs:12,sm:6,children:ue(h,{sx:{p:e,backgroundColor:"var(--Container)",border:"1px solid var(--Border)",borderRadius:1},children:[ue(P,{variant:"subtitle2",children:["Padding: ",e]}),de(P,{variant:"caption",sx:{display:"block",mt:1,color:"var(--Text-Secondary)"},children:"Content with spacing applied"})]})},e))})]}),ue("article",{children:[de(P,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Gap Examples"}),de(P,{variant:"caption",sx:{color:"var(--Text-Secondary)",mb:2,display:"block"},children:"Gap controls spacing between flex/grid children without adding extra elements."}),de(S,{spacing:3,children:["var(--Spacing-1)","var(--Spacing-2)","var(--Spacing-3)"].map(e=>ue(h,{children:[de(S,{direction:"row",spacing:e,sx:{mb:1},children:[1,2,3].map(e=>de(h,{"aria-hidden":"true",sx:{width:60,height:60,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:1,flexShrink:0}},e))}),ue(P,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Gap: ",e]})]},e))})]})]}),ue(h,{role:"note",sx:{p:2,backgroundColor:"var(--Container-Low)",borderRadius:1,borderLeft:"4px solid var(--Buttons-Primary-Button)",mt:3},children:[de(P,{variant:"subtitle2",sx:{fontWeight:600,mb:1},children:"✓ Accessibility Best Practices Used"}),ue("ul",{style:{margin:"0.5rem 0",paddingLeft:"1.5rem"},children:[de("li",{children:ue(P,{variant:"caption",children:[de("strong",{children:'aria-hidden="true"'})," on purely decorative visual elements"]})}),de("li",{children:de(P,{variant:"caption",children:"All spacing information conveyed through text labels and values"})}),de("li",{children:ue(P,{variant:"caption",children:["No empty decorative ",de("code",{children:"<div>"})," elements in DOM"]})}),de("li",{children:ue(P,{variant:"caption",children:["Semantic HTML: ",de("code",{children:"<section>"})," and ",de("code",{children:"<article>"})," for structure"]})}),de("li",{children:de(P,{variant:"caption",children:"CSS-based spacing (padding/margin) for actual layout, not decorative divs"})}),de("li",{children:de(P,{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,t])=>({label:e,options:t.map(e=>({value:e,label:md[e]}))}));const bd={small:"var(--Small-Button-Height, 24px)",medium:"var(--Button-Height, 32px)",large:"var(--Large-Button-Height, 56px)"},vd={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"50%",height:"50%",borderRadius:"50%",backgroundColor:"var(--Background)",display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},xd={content:'""',position:"absolute",inset:"-3px",borderRadius:"50%",border:"2px solid var(--Focus-Visible)",pointerEvents:"none"};function yd({color:e,label:t,size:a="medium",selected:r=!1,disabled:n=!1,radio:o=!1,onClick:i,className:l="",sx:s={},"aria-label":d,...c}){const u=Boolean(i)&&!n,p=bd[a]||bd.medium,m=d||t||e,g=de(h,{className:"swatch-chip",sx:{position:"relative",width:p,height:p,flexShrink:0,borderRadius:"50%",backgroundColor:e,border:"var(--Button-Border-Width, 1px) solid var(--Border)",boxSizing:"border-box",boxShadow:"var(--Effect-Level-0)",transition:"box-shadow 120ms ease",display:"flex",alignItems:"center",justifyContent:"center",...u&&{cursor:"pointer","&:hover":{boxShadow:"var(--Effect-Level-1)",backgroundImage:"linear-gradient(var(--Hover), var(--Hover))"},"&:active":{boxShadow:"var(--Effect-Level-0)",backgroundImage:"linear-gradient(var(--Pressed), var(--Pressed))"}}},children:r&&!o?de(h,{className:"swatch-check",sx:vd,children:de(me,{"aria-hidden":"true",sx:{width:"80%",height:"80%",color:"var(--Icon, var(--Text))"}})}):null});return ue(h,{component:u?"button":"div",type:u?"button":void 0,onClick:u?i:void 0,disabled:!(!u||!n)||void 0,"aria-pressed":u?r:void 0,"aria-label":m,className:`swatch ${r?"swatch-selected":""} ${l}`.trim(),sx:{position:"relative",display:"inline-flex",flexDirection:"column",alignItems:"center",gap:"var(--Sizing-Half, 4px)",width:"var(--Sizing-7, 56px)",padding:0,background:"none",border:"none",font:"inherit",color:"var(--Text)",...n&&{opacity:.38,pointerEvents:"none"},"&:focus":{outline:"none"},...u&&{"&:focus-visible":{outline:"none","& .swatch-chip::before":xd}},...s},...c,children:[g,o&&u?de(Xl,{checked:r,disabled:n,tabIndex:-1,"aria-hidden":"true",onChange:()=>{},sx:{pointerEvents:"none"}}):null,t?de(h,{component:"span",className:"swatch-label",sx:{fontFamily:"var(--Legal-Font-Family, inherit)",fontSize:"var(--Legal-Font-Size, 10px)",fontWeight:"var(--Legal-Font-Weight, 400)",lineHeight:"var(--Legal-Line-Height, 1.4)",letterSpacing:"var(--Legal-Letter-Spacing, 0)",color:"var(--Text)",textAlign:"center",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t}):null]})}function wd({color:e,className:t="",sx:a={},...r}){return de(h,{className:`mini-swatch ${t}`.trim(),"aria-hidden":"true",sx:{width:"var(--Menu-Swatch, 20px)",height:"var(--Menu-Swatch, 20px)",flexShrink:0,borderRadius:"var(--Sizing-Half, 4px)",backgroundColor:e,...a},...r})}const Sd={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},kd={size:40,iconSize:"24px",borderRadius:"8px"},Bd=new Set;function Cd({children:e,color:t="primary",variant:a="solid",size:r,className:n="",sx:o={},...i}){!function(e){void 0!==e&&("production"===process.env.NODE_ENV||Bd.has(e)||(Bd.add(e),console.warn('[IconBadge] size="'+e+'" — IconBadge has one size (40px) and the prop was removed. Figma draws exactly one, and component sizing comes from the Component-Size modes rather than a per-component ladder.')))}(r);const l=kd,s=Sd[t]||Sd.primary;let d,c;switch(a){case"light":d=s,c="Surface-Brightest";break;case"dark":d=s,c="Surface-Dimmest";break;default:d=s,c="Surface"}return de(h,{"data-theme":d,"data-surface":c,className:"icon-badge icon-badge-"+a+" icon-badge-"+t+" "+n,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},...i,children:e})}const Td=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Ad=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary"]},{label:"State",colors:["info","success","warning","error"]}],zd=[Re,Mt,Be,Pe,Ot,Et];function Id(){const[e,a]=t("primary"),[r,n]=t("solid"),[o,i]=t("medium"),l=zd[0];return ue(Ms,{spacing:4,style:{paddingBottom:64},children:[de($a,{children:"Icon Badge"}),ue("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24},children:[de(Gi,{padding:"medium",children:ue(Ms,{spacing:4,alignItems:"center",children:[de("div",{style:{padding:40},children:de(Cd,{color:e,variant:r,size:o,children:de(l,{})})}),de(Ns,{spacing:4,alignItems:"flex-end",children:["small","medium","large"].map(t=>ue(Ms,{spacing:1,alignItems:"center",children:[de(Cd,{color:e,variant:r,size:t,children:de(l,{})}),de(sr,{style:{color:"var(--Quiet)"},children:Td(t)})]},t))}),ue(Ms,{spacing:1,alignItems:"center",children:[de(sr,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"Variants"}),de(Ns,{spacing:3,children:["solid","light","dark"].map(t=>ue(Ms,{spacing:1,alignItems:"center",children:[de(Cd,{color:e,variant:t,size:"medium",children:de(l,{})}),de(sr,{style:{color:"var(--Quiet)",fontSize:"0.65rem"},children:Td(t)})]},t))})]}),ue(Ms,{spacing:1,alignItems:"center",children:[de(sr,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"All Colors"}),de(Ns,{spacing:2,style:{flexWrap:"wrap",justifyContent:"center"},children:Ad.flatMap(e=>e.colors).map(e=>ue(Ms,{spacing:0,alignItems:"center",children:[de(Cd,{color:e,variant:r,size:"small",children:de(l,{})}),de(sr,{style:{color:"var(--Quiet)",fontSize:"0.55rem"},children:Td(e)})]},e))})]})]})}),de(Gi,{padding:"medium",children:ue(Ms,{spacing:4,children:[de($a,{style:{fontSize:"1rem"},children:"Playground"}),ue(Ms,{spacing:2,children:[de(kr,{children:"Color"}),Ad.map(t=>ue(Ms,{spacing:1,children:[de(sr,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:t.label}),de(Ns,{spacing:1,children:t.colors.map(t=>de(oo,{variant:e===t?"default":"outline",size:"small",onClick:()=>a(t),children:Td(t)},t))})]},t.label))]}),ue(Ms,{spacing:1,children:[de(kr,{children:"Variant"}),de(ks,{size:"small",children:["solid","light","dark"].map(e=>de(oo,{variant:r===e?"default":"outline",size:"small",onClick:()=>n(e),children:Td(e)},e))})]}),ue(Ms,{spacing:1,children:[de(kr,{children:"Size"}),de(ks,{size:"small",children:["small","medium","large"].map(e=>de(oo,{variant:o===e?"default":"outline",size:"small",onClick:()=>i(e),children:Td(e)},e))})]}),ue(Ms,{spacing:0,children:[ue(sr,{style:{color:"var(--Quiet)"},children:["data-theme: ",Td(e),"light"===r?"-Light":""]}),ue(sr,{style:{color:"var(--Quiet)"},children:["data-surface: ","dark"===r?"Surface-Dimmest":"Surface"]}),de(sr,{style:{color:"var(--Quiet)"},children:"bg: var(--Background)"}),de(sr,{style:{color:"var(--Quiet)"},children:"icon: var(--Text)"})]})]})})]})]})}const Rd={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Wd={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 Dd({children:e,icon:t,label:a,variant:r="solid",color:n="primary",size:o="medium",extended:i=!1,animate:l=!1,disabled:s=!1,onClick:d,ariaLabel:c,className:u="",sx:p={},...m}){"production"!==process.env.NODE_ENV&&"solid"!==r&&console.warn('[Fab] variant="'+r+'" 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 g=function(e){const t=Rd[e]||"Primary";return{bg:"var(--Buttons-"+t+"-Button)",text:"var(--Buttons-"+t+"-Text)",border:"var(--Buttons-"+t+"-Border)",hover:"var(--Buttons-"+t+"-Hover)",active:"var(--Buttons-"+t+"-Pressed)"}}(n),f=Wd[o]||Wd.medium,b=t||e||de(Wt,{sx:{fontSize:f.iconSize}}),v=c||a||"Action";return ue(ce,{children:[l&&de("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"}),ue(h,{component:"button",type:"button",role:"button","aria-label":v,onClick:d,disabled:s,className:"fab fab-solid fab-"+n+" fab-"+o+(i?" fab-extended":"")+(l?" fab-animate":"")+(s?" fab-disabled":"")+(u?" "+u:""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:i?f.gap+"px":0,...i?{height:f.size+"px",borderRadius:f.size/2+"px",px:f.px+"px"}:{width:f.size+"px",height:f.size+"px",borderRadius:"50%"},backgroundColor:g.bg,color:g.text,border:"var(--Button-Border-Width) solid "+g.border,"--_height":f.size+"px","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))",boxShadow:`${En(n)}, ${Fn}`,fontSize:f.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:g.hover,boxShadow:`${En(n)}, ${Pn}`},"&:active":s?{}:{backgroundColor:g.active,transform:"scale(0.96)",boxShadow:En(n)},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"},...l&&!s&&{animation:"fab-pulse 2s infinite"},...p},...m,children:[de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",fontSize:f.iconSize+"px",color:"inherit","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}},children:b}),i&&a&&de(h,{component:"span",sx:{whiteSpace:"nowrap",lineHeight:1},children:a})]})]})}const Fd=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"]}],Ld={default:"Tertiary",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function Hd({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Nd({color:e,selected:t,onClick:a}){const r=Ld[e]||"Primary";return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+Fd(e),"aria-pressed":t,title:Fd(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Md({value:e,onChange:t,placeholder:a,label:r}){return ue(h,{children:[r&&de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4},children:r}),de(h,{component:"input",type:"text",value:e,onChange:e=>t(e.target.value),placeholder:a,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 Od(){const[e,a]=t("default"),[r,n]=t("medium"),[o,i]=t("Add"),[l,s]=t(!1),[d,c]=t("Create"),[u,p]=t(!1),[m,g]=t(!1),[f,b]=t(null),[v,x]=t("Surface"),y="default"===e?"tertiary":e;return ue(h,{sx:{pb:8},children:[de($a,{children:"Floating Action Button"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:f,children:de(Dd,{color:y,size:r,icon:(()=>{const e=be[o]||be.Add;return de(un,{size:"medium",children:de(e,{})})})(),extended:l,label:d,animate:u,disabled:m,ariaLabel:l?d:o})}),de(Zo,{code:(()=>{const t=[];return"default"!==e&&t.push('color="'+e+'"'),"medium"!==r&&t.push('size="'+r+'"'),t.push("icon={<"+o+"Icon />}"),l&&(t.push("extended"),t.push('label="'+d+'"')),u&&t.push("animate"),m&&t.push("disabled"),t.push('ariaLabel="'+(l?d:o)+'"'),"<Fab\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:de(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"})]}),de(Ti,{value:0,children:ue(h,{sx:{p:3},children:[de(h,{sx:{mb:3},children:de(Li,{theme:f,onThemeChange:b,surface:v,onSurfaceChange:x})}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:Pd.map(t=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:t.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:t.colors.map(t=>de(Nd,{color:t,selected:e===t,onClick:a},t))})]},t.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(Hd,{label:Fd(e),selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Md,{label:"Icon Name",value:o,onChange:i,placeholder:"Add"}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:[de("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)"]})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ue(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Extended"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pill shape with icon + text label"})]}),de(ci,{checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Extended"})]}),l&&de(h,{sx:{mt:1.5},children:de(Md,{label:"Label Text",value:d,onChange:c,placeholder:"Create"})}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Animation"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pulse ring effect to draw attention"})]}),de(ci,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Animation"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Disabled"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),de(ci,{checked:m,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]})]})]})}),de(Ti,{value:1,children:de(h,{sx:{p:3},children:ue(S,{spacing:3,children:[ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),ue(S,{spacing:0,children:[ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Role:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<button role="button" aria-label="...">'})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Label:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:l?"Extended: visible label provides accessible name.":"Icon-only: aria-label is required."})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Focus:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) with 2px offset."})]}),ue(h,{sx:{py:1.5},children:[de(sr,{children:"Disabled:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"HTML disabled attribute. 50% opacity, removed from tab order."})]})]})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Best Practices"}),ue(S,{spacing:0,children:[ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"One per screen:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"FABs represent the primary action. Use at most one per view."})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Extended for clarity:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"Use extended variant when the icon alone may be ambiguous."})]}),ue(h,{sx:{py:1.5},children:[de(sr,{children:"Animation:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"Use sparingly. Respect prefers-reduced-motion."})]})]})]})]})})})]})})})]})]})}const Ed={small:"var(--Sm-Rail-Width, 72px)",medium:"var(--Rail-Width, 80px)",large:"var(--Lg-Rail-Width, 96px)"},Qd="var(--Icon-Size, 24px)",Vd="var(--Sizing-Half, 4px)",jd="var(--Button-Height, 32px)";function Ud({items:e=[],sections:a,value:r,defaultValue:n=0,onChange:i,expandable:l=!1,expandedWidth:s="partial",defaultExpanded:d=!1,fabAction:c,labelStyle:u="contained",size:p="medium",className:m="",sx:g={},...f}){const[b,v]=t(n),[x,y]=t(d),w=void 0!==r,S=w?r:b,k=o(e=>{w||v(e),i?.(e)},[w,i]),B=l&&x;return ue(h,{component:"nav",role:"navigation","aria-label":"Navigation rail","data-theme":"Default","data-surface":"Surface-Dim",className:"rail"+(l?" rail-expandable":" rail-fixed")+(B?" rail-expanded":" rail-collapsed")+" rail-label-"+("outside"===u?"outside":"contained")+" rail-"+(Ed[p]?p:"medium")+" "+m,sx:{display:"flex",flexDirection:"column",width:B?("full"===s?320:240)+"px":Ed[p]||Ed.medium,minHeight:"100%",gap:B?0:"var(--Sizing-1, 8px)",backgroundColor:"var(--Background)",borderRight:"1px solid var(--Border)",fontFamily:"inherit",transition:"width 0.25s ease",overflow:"hidden",flexShrink:0,...g},...f,children:[l&&de(h,{sx:{display:"flex",justifyContent:B?"flex-start":"center",px:B?1.5:0,height:56,alignItems:"center"},children:de(oo,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>y(e=>!e),"aria-label":B?"Collapse menu":"Expand menu",children:de(un,{size:"small",sx:{color:"inherit"},children:de(B?Vt:Qt,{})})})}),c&&de(h,{sx:{px:B?2:1,py:1,flexShrink:0},children:de(oo,{variant:"primary-light",size:"medium",onClick:c.onClick,"aria-label":c.label||"Action",startIcon:c.icon?de(un,{size:"small",sx:{color:"inherit"},children:c.icon}):void 0,sx:{width:B?"100%":56,borderRadius:B?"28px":"var(--Style-Border-Radius)",justifyContent:B?"flex-start":"center",transition:"all 0.2s ease"},children:B?c.label:null})}),de(h,{role:"tablist","aria-orientation":"vertical",sx:{flex:1,overflowY:"auto",overflowX:"hidden",display:"flex",flexDirection:"column",alignItems:"center",gap:B?0:"var(--Sizing-1-and-Half, 12px)",px:B?0:"var(--Sizing-1, 8px)",width:"100%",boxSizing:"border-box"},children:(()=>{if(a&&a.length>0){const e=[];let t=0;return a.forEach((a,r)=>{r>0&&e.push(de(h,{"aria-hidden":"true",sx:{height:"1px",width:"100%",backgroundColor:"var(--Border-Variant)"}},"divider-"+r)),a.items.forEach(a=>{const r=t;e.push(de(Gd,{item:a,selected:S===r,expanded:B,labelStyle:u,onClick:()=>k(r)},"item-"+r)),t++})}),e}return e.map((e,t)=>de(Gd,{item:e,selected:S===t,expanded:B,labelStyle:u,onClick:()=>k(t)},t))})()})]})}function Gd({item:e,selected:t,expanded:a,labelStyle:r,onClick:n}){const{icon:o,avatar:i,label:l,badge:s,disabled:d}=e,c=t?"var(--Button)":"transparent",u=t||a?"var(--Text)":"var(--Quiet)",p="outside"!==r,m=p&&!a,g=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 ue(h,{component:"button",type:"button",role:"tab","aria-selected":t,"aria-label":l,"aria-disabled":d||void 0,disabled:d||void 0,onClick:d?void 0:n,className:"rail-item"+(t?" rail-item-selected":""),sx:{display:"flex",flexDirection:a?"row":"column",alignItems:"center",justifyContent:a?"flex-start":"center",gap:a?"var(--Sizing-1-and-Half, 12px)":"2px",width:a?"100%":44,minWidth:a?void 0:Qd,minHeight:Qd,px:a?2.5:0,py:m?Vd:0,border:t&&m?"1px solid var(--Border)":"1px solid transparent",borderRadius:a?0:"8px",backgroundColor:m||a?c:"transparent",boxShadow:t&&m?"var(--Shadow-1, none)":"none",color:"inherit",cursor:d?"not-allowed":"pointer",opacity:d?"var(--Disabled, 0.38)":1,fontFamily:"inherit",textAlign:a?"left":"center",transition:"background-color 0.15s ease, color 0.15s ease",outline:"none",...m||a?g:{}},children:[ue(h,{sx:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",...a?{flexShrink:0}:{width:p?"100%":jd,height:p?"auto":jd,py:p?Vd:0,borderRadius:p?"8px":jd,backgroundColor:p?"transparent":c,border:!p&&t?"1px solid var(--Border)":void 0,transition:"background-color 0.2s ease",...p?{}:g}},children:[i?de(h,{sx:{display:"flex",width:Qd,height:Qd},children:i}):de(un,{size:"small",sx:{color:"inherit"},children:o}),s&&de(Xd,{value:s})]}),l&&de(h,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"center",width:"100%"},children:de(wr,{className:"rail-item-label",style:{color:u,textAlign:"center",whiteSpace:a?"nowrap":"normal",overflow:"hidden",textOverflow:"ellipsis",...a?{flex:1}:{maxWidth:"100%"}},children:l})})]})}function Xd({value:e}){return de(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 qd=[{icon:de(Re,{}),label:"Home"},{icon:de(Fe,{}),label:"Search"},{icon:de(Ie,{}),label:"Favorites",badge:3},{icon:de(Le,{}),label:"Profile"},{icon:de(De,{}),label:"Settings"}];function Yd({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Zd(){const[e,a]=t(!0),[r,n]=t("partial"),[o,i]=t(!1),[l,s]=t(null),[d,c]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Rail"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[ue(Ai,{theme:l,surface:d,sx:{minHeight:400,alignItems:"stretch",p:0},children:[de(Ud,{items:qd,expandable:e,expandedWidth:r,fabAction:o?{icon:de(Wt,{}),label:"Create",onClick:()=>{}}:void 0}),de(h,{sx:{flex:1,p:3},children:de(sr,{style:{color:"var(--Quiet)"},children:"Main content area"})})]}),de(Zo,{code:(()=>{const t=["items={items}"];return e&&(t.push("expandable"),"partial"!==r&&t.push('expandedWidth="full"')),o&&t.push('fabAction={{ icon: <AddIcon />, label: "Create", onClick: handleCreate }}'),t.push("value={activeIndex}"),t.push("onChange={setActiveIndex}"),"<Rail\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Rail",theme:l,surface:d})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"EXPANDED WIDTH"}),de(S,{direction:"row",spacing:1,children:["partial","full"].map(e=>{return de(Yd,{label:(t=e,t?t.charAt(0).toUpperCase()+t.slice(1):""),selected:r===e,onClick:()=>n(e)},e);var t})})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Expandable"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Toggle between collapsed and expanded"})]}),de(ci,{variant:"default-outline",checked:e,onChange:e=>a(e.target.checked),size:"small","aria-label":"Expandable"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"FAB Action"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show create button at top"})]}),de(ci,{variant:"default-outline",checked:o,onChange:e=>i(e.target.checked),size:"small","aria-label":"FAB action"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Rail"})})]})]})})]})]})}const Jd={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 $d({items:e=[],value:a,defaultValue:r,onChange:n,type:i="floating",orientation:l="horizontal",color:s="default",fab:d,className:c="",sx:u={},...p}){const[m,g]=t(r??null),f=void 0!==a,b=f?a:m,v=o(e=>{const t=b===e?null:e;f||g(t),n?.(t)},[f,b,n]),x=Jd[s]||Jd.default,y=x.theme,w=x.surface,S="vertical"===l,k="floating"===i,B=de(h,{role:"toolbar","aria-orientation":l,"aria-label":"Toolbar","data-theme":y,"data-surface":w||"Surface",className:"toolbar toolbar-"+i+" toolbar-"+l+" toolbar-"+s+" "+c,sx:{display:"inline-flex",flexDirection:S?"column":"row",alignItems:"center",gap:"4px",backgroundColor:"var(--Background)",border:"1px solid var(--Border-Variant)",borderRadius:k?"56px":"var(--Style-Border-Radius)",padding:k?"8px 16px":"8px",fontFamily:"inherit",flexShrink:0,...k&&{boxShadow:Dn},...u},...p,children:e.map((e,t)=>{const a=b===t;return de(oo,{iconOnly:!0,variant:a?"default":"ghost",size:"small",onClick:()=>v(t),"aria-label":e.label,"aria-checked":a,role:"radio",children:de(un,{size:"small",sx:{color:"inherit"},children:e.icon})},e.key||t)})});return d&&k?ue(h,{sx:{display:"inline-flex",flexDirection:S?"column":"row",alignItems:"center",gap:1},children:[B,de(oo,{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:de(un,{size:"medium",sx:{color:"inherit"},children:d.icon})})]}):B}const Kd=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",_d=[{icon:de(jt,{}),label:"Bold"},{icon:de(Ut,{}),label:"Italic"},{icon:de(Gt,{}),label:"Underline"},{icon:de(Xt,{}),label:"Align left"},{icon:de(qt,{}),label:"Align center"}];function ec({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function tc(){const[e,a]=t("floating"),[r,n]=t("default"),[o,i]=t("horizontal"),[l,s]=t(!1),[d,c]=t(null),[u,p]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Toolbar"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:d,surface:u,sx:{minHeight:200},children:de($d,{items:_d,type:e,color:r,orientation:o,fab:l&&"floating"===e?{icon:de(Wt,{}),label:"Create",onClick:()=>{}}:void 0})}),de(Zo,{code:(()=>{const t=["items={items}"];return"floating"!==e&&t.push('type="contextual"'),"default"!==r&&t.push('color="'+r+'"'),"horizontal"!==o&&t.push('orientation="vertical"'),l&&t.push('fab={{ icon: <AddIcon />, label: "Create", onClick: handleCreate }}'),t.push("value={selected}"),t.push("onChange={setSelected}"),"<Toolbar\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Toolbar",theme:d,surface:u})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPE"}),de(S,{direction:"row",spacing:1,children:["floating","contextual"].map(t=>de(ec,{label:Kd(t),selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["default","primary","primary-light","white","black"].map(e=>de(ec,{label:Kd(e),selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),de(S,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>de(ec,{label:Kd(e),selected:o===e,onClick:()=>i(e)},e))})]}),"floating"===e&&ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"FAB Button"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Add FAB to the right of toolbar"})]}),de(ci,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"FAB button"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Toolbar"})})]})]})})]})]})}const ac={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 rc({value:e,defaultValue:a=0,onChange:i,min:l,max:s,step:d=1,variant:c="outlined",style:u="outline",color:p="default",size:m="medium",label:g,labelPosition:f="top",placeholder:b,helperText:v,disabled:x=!1,fullWidth:y=!1,className:w="",sx:S={},...k}){const[B,C]=t(a),[T,A]=t(!1),z=n(null),I=void 0!==e,R=I?e:B,W=""!==R&&null!=R,D=(F="default"===p?"primary":p).charAt(0).toUpperCase()+F.slice(1);var F;"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 P="default"===p?"var(--Border)":"var(--Buttons-"+D+"-Border)",L="default"===p?"var(--Text)":"var(--Text-"+D+")",H="outlined"===c,N="floating"===f,M="top"===f,O=ac[m]||ac.medium,E="small"===m?sr:ur,Q=o(e=>{let t="number"==typeof e?e:parseFloat(e);isNaN(t)&&(t=0),void 0!==l&&t<l&&(t=l),void 0!==s&&t>s&&(t=s),I||C(t),i?.(t)},[I,i,l,s]),V=n(R);V.current=R;const j=o(e=>{if(x)return;const t="number"==typeof V.current?V.current:parseFloat(V.current)||0;void 0!==l&&e<0&&t<=l||void 0!==s&&e>0&&t>=s||Q(t+e*d)},[x,d,l,s,Q]),U=void 0!==l&&R<=l,G=void 0!==s&&R>=s,X=n(null),q=n(null),Y=o(()=>{X.current&&(clearTimeout(X.current),X.current=null),q.current&&(clearInterval(q.current),q.current=null)},[]),Z=o(e=>{x||(Y(),j(e),X.current=setTimeout(()=>{let t=120,a=0;const r=()=>{j(e),a+=1,10===a&&t>60?(clearInterval(q.current),t=60,q.current=setInterval(r,t)):30===a&&t>30&&(clearInterval(q.current),t=30,q.current=setInterval(r,t))};q.current=setInterval(r,t)},400))},[x,j,Y]);r(()=>Y,[Y]);const J=n(!1),$=e=>({onPointerDown:t=>{if(void 0===t.button||0===t.button){t.preventDefault();try{t.currentTarget.setPointerCapture?.(t.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){}Y()},onPointerCancel:Y,onPointerLeave:Y,onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||t.repeat||(t.preventDefault(),Z(e))},onKeyUp:e=>{"Enter"!==e.key&&" "!==e.key||Y()},onBlur:Y}),K=e=>{const t=e.target.value;if(""===t||"-"===t)return void(I||C(t));const a=parseFloat(t);isNaN(a)||Q(a)},_=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"}},te={},ae=()=>M&&g?de(E,{component:"label",style:{display:"block",marginBottom:"6px",color:x?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:x?"var(--Disabled, 0.38)":1},children:g}):null;return ue(h,H?{className:"numberfield numberfield-outlined"+(x?" numberfield-disabled":"")+(w?" "+w:""),sx:{width:y?"100%":"auto",fontFamily:"inherit",...S},...k,children:[ae(),de(h,{sx:{border:"1px solid "+P,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:x?"var(--Disabled, 0.38)":1,"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:de(h,{...te,children:ue(h,{sx:{position:"relative",display:"flex",alignItems:"stretch",minHeight:"max("+O.height+", calc(var(--Sizing-3, 24px) * 2 + 1px))",backgroundColor:"var(--Background)"},children:[N&&g&&de(h,{sx:{position:"absolute",top:W||T?"6px":"50%",left:O.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(--"+(Nl[m]||Nl.medium).shrunk+"-Font-Size)",fontWeight:"var(--"+(Nl[m]||Nl.medium).shrunk+"-Font-Weight)",letterSpacing:"var(--"+(Nl[m]||Nl.medium).shrunk+"-Letter-Spacing)"}:{fontSize:"var(--"+(Nl[m]||Nl.medium).resting+"-Font-Size)",fontWeight:"var(--"+(Nl[m]||Nl.medium).resting+"-Font-Weight)",letterSpacing:"var(--"+(Nl[m]||Nl.medium).resting+"-Letter-Spacing)"},pointerEvents:"none",transition:"top 0.15s ease, font-size 0.15s ease, color 0.15s ease",zIndex:1},children:g}),de(h,{component:"input",ref:z,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof R?R:void 0,"aria-valuemin":l,"aria-valuemax":s,"aria-label":g||"Number",value:R,onChange:K,onKeyDown:_,onFocus:()=>A(!0),onBlur:()=>A(!1),disabled:x,placeholder:N?void 0:b||"",sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:W||T?L:"var(--Quiet)",fontSize:O.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)",padding:N?"22px 14px 6px":O.padding,minWidth:0,"&::placeholder":{color:"var(--Quiet)",opacity:1},"&:disabled":{cursor:"not-allowed"}}}),ue(h,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"stretch",borderLeft:"1px solid "+P,flexShrink:0},children:[de(h,{component:"button",type:"button","aria-label":"Increase",...$(1),disabled:x||G,sx:{...ee,width:"var(--Sizing-4, 32px)",height:"var(--Sizing-3, 24px)"},children:de(un,{size:"medium",children:de(Yt,{})})}),de(h,{"aria-hidden":"true",sx:{height:"1px",backgroundColor:P,flexShrink:0}}),de(h,{component:"button",type:"button","aria-label":"Decrease",...$(-1),disabled:x||U,sx:{...ee,width:"var(--Sizing-4, 32px)",height:"var(--Sizing-3, 24px)"},children:de(un,{size:"medium",children:de(Zt,{})})})]})]})})}),v&&de(sr,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:v})]}:{className:"numberfield numberfield-spinner"+(x?" numberfield-disabled":"")+(w?" "+w:""),sx:{fontFamily:"inherit",...S},...k,children:[ae(),ue(h,{sx:{display:"inline-flex",alignItems:"center",gap:"small"===m?.5:1,opacity:x?"var(--Disabled, 0.38)":1},children:[de(h,{component:"button",type:"button","aria-label":"Decrease",...$(-1),disabled:x||U,sx:{...ee,width:O.btnSize,height:O.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 "+P},children:de(un,{size:"small",children:de(ze,{})})}),de(h,{sx:{border:"1px solid "+P,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:de(h,{...te,children:de(h,{component:"input",ref:z,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof R?R:void 0,"aria-valuemin":l,"aria-valuemax":s,"aria-label":g||"Number",value:R,onChange:K,onKeyDown:_,onFocus:()=>A(!0),onBlur:()=>A(!1),disabled:x,sx:{width:"small"===m?40:56,minHeight:O.height,textAlign:"center",border:"none",outline:"none",backgroundColor:"var(--Hover)",color:"var(--Text)",fontSize:O.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:600,"&:disabled":{cursor:"not-allowed"}}})})}),de(h,{component:"button",type:"button","aria-label":"Increase",...$(1),disabled:x||G,sx:{...ee,width:O.btnSize,height:O.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 "+P},children:de(un,{size:"small",children:de(Wt,{})})})]}),v&&de(sr,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:v})]})}const nc=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",oc=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function ic({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function lc({color:e,selected:t,onClick:a}){const r=nc(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function sc(){const[e,a]=t("outlined"),[r,n]=t("outline"),[o,i]=t("default"),[l,s]=t("medium"),[d,c]=t("top"),[u,p]=t(!0),[m,g]=t(!1),[f,b]=t(!1),[v,x]=t(null),[y,k]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Number Field"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:v,surface:y,children:de(h,{sx:{width:"100%",maxWidth:"outlined"===e?300:"auto"},children:de(rc,{variant:e,style:r,color:o,size:l,label:u?"Quantity":void 0,labelPosition:d,min:0,max:100,disabled:m,fullWidth:f&&"outlined"===e})})}),de(Zo,{code:(()=>{const t=['variant="'+e+'"'];return"outline"!==r&&t.push('style="'+r+'"'),"default"!==o&&t.push('color="'+o+'"'),"medium"!==l&&t.push('size="'+l+'"'),u&&t.push('label="Quantity"'),"top"!==d&&t.push('labelPosition="'+d+'"'),t.push("min={0}"),t.push("max={100}"),m&&t.push("disabled"),f&&"outlined"===e&&t.push("fullWidth"),t.push("value={value}"),t.push("onChange={setValue}"),"<NumberField\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:v,onThemeChange:x,surface:y,onSurfaceChange:k})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"NumberField",theme:v,surface:y})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),de(S,{direction:"row",spacing:1,children:["outlined","spinner"].map(t=>de(ic,{label:nc(t),selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(S,{direction:"row",spacing:1,children:["outline","light"].map(e=>de(ic,{label:nc(e),selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:oc.map(e=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>de(lc,{color:e,selected:o===e,onClick:i},e))})]},e.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(ic,{label:nc(e),selected:l===e,onClick:()=>s(e)},e))})]}),"outlined"===e&&ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),de(S,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>de(ic,{label:"none"===e?"None":nc(e),selected:d===e,onClick:()=>c(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Show Label"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Text label above field"})]}),de(ci,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show label"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Disabled"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),de(ci,{variant:"default-outline",checked:m,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),"outlined"===e&&ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Full Width"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container"})]}),de(ci,{variant:"default-outline",checked:f,onChange:e=>b(e.target.checked),size:"small","aria-label":"Full width"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"NumberField"})})]})]})})]})]})}const dc={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 cc({children:e,selected:t=!1,onChange:a,value:r,sx:n={},...o}){return de(H,{value:r,selected:t,onChange:a,sx:{border:"1px solid var(--Border)",...dc,...n},...o,children:e})}let uc=!1;function hc({variant:e="default",exclusive:t=!0,onChange:a,...r}){return uc||"production"===process.env.NODE_ENV||(uc=!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).')),de(ks,{variant:"outlined",color:e,multiple:!t,onChange:a?(e,t)=>a(t,e):void 0,...r})}const pc=e=>{const t=t=>de(hc,{variant:e,...t});return t.displayName=`${e}ToggleButtonGroup`,t},mc=pc("default"),gc=pc("primary"),fc=pc("secondary"),bc=pc("tertiary"),vc=pc("neutral"),xc=pc("black-white"),yc=pc("info"),wc=pc("success"),Sc=pc("warning"),kc=pc("error");function Bc({label:e,value:a="",onChange:r,placeholder:n,error:o=!1,errorMessage:i="",disabled:l=!1,helperText:s="",variant:d="outlined",size:c="medium",type:u="text",required:p=!1,fullWidth:m=!0,startAdornment:g,endAdornment:f,sx:b={},"aria-label":v,"aria-labelledby":x,onFocus:y,onBlur:w,...S}){const[B,C]=t(!1),T=o?"var(--Buttons-Error-Border)":B?"var(--Buttons-Primary-Border)":"var(--Border)",I=o||B?"var(--Text)":"var(--Text-Quiet)",R="var(--Text)";return ue(h,{sx:{width:m?"100%":"auto"},children:[de(k,{label:e,value:a,onChange:r,placeholder:n,disabled:l,variant:d,size:c,type:u,required:p,onFocus:e=>{C(!0),y?.(e)},onBlur:e=>{C(!1),w?.(e)},error:o,fullWidth:m,slotProps:{htmlInput:{...v?{"aria-label":v}:{},...x?{"aria-labelledby":x}:{}},input:{"data-surface":l?"Container-Low":"Container",style:{color:R},startAdornment:g?de(A,{position:"start",children:g}):void 0,endAdornment:f?de(A,{position:"end",children:f}):void 0}},sx:{width:m?"100%":"auto","& .MuiOutlinedInput-root":{backgroundColor:"var(--Background)",transition:"all 0.2s ease-in-out",color:R,"& fieldset":{borderColor:T,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"},...b},...S}),o&&i&&de(z,{error:!0,sx:{color:"var(--Buttons-Error-Border)",marginTop:"4px",fontSize:"12px",fontWeight:500},children:i})]})}function Cc({label:e="Email",...t}){return de(Bc,{label:e,type:"email",placeholder:"user@example.com",...t})}function Tc({label:e="Password",...t}){return de(Bc,{label:e,type:"password",...t})}function Ac({label:e="Search",placeholder:t="Type to search...",...a}){return de(Bc,{label:e,type:"search",placeholder:t,...a})}function zc({label:e="Number",...t}){return de(Bc,{label:e,type:"number",...t})}function Ic({label:e="Phone",placeholder:t="(555) 123-4567",...a}){return de(Bc,{label:e,type:"tel",placeholder:t,...a})}function Rc({label:e="Website",placeholder:t="https://example.com",...a}){return de(Bc,{label:e,type:"url",placeholder:t,...a})}function Wc({error:e=!1,errorMessage:t="",rows:a=4,fullWidth:r=!0,...n}){return de(Ql,{multiline:!0,rows:a,fullWidth:r,...e&&{validation:"error",validationMessage:t},...n})}function Dc({fields:e=[],spacing:t=2,sx:a={},...r}){return de(h,{sx:{display:"flex",flexDirection:"column",gap:`var(--Spacing-${t})`,width:"100%",...a},...r,children:e.map(e=>de(Bc,{...e},e.id))})}const Fc=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Pc=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Lc=[{value:"apple",label:"Apple"},{value:"banana",label:"Banana"},{value:"cherry",label:"Cherry"},{value:"date",label:"Date"},{value:"elderberry",label:"Elderberry"}],Hc=[{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 Nc({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Mc({color:e,selected:t,onClick:a}){const r=Fc(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Oc(){const[e,a]=t("outline"),[r,n]=t("default"),[o,i]=t("medium"),[l,s]=t("top"),[d,c]=t("Fruit"),[u,p]=t(!1),[m,g]=t(!1),[f,b]=t(!0),[v,x]=t(!1),[y,k]=t("Search"),[B,C]=t(""),[T,A]=t(null),[z,I]=t("Surface"),[R,W]=t(!1),[D,F]=t(!0);return ue(h,{sx:{pb:8},children:[de($a,{children:"Select"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:T,surface:z,children:de(h,{sx:{width:"100%",maxWidth:360},children:de(Wi,{variant:e,color:r,size:o,label:d,labelPosition:l,mode:R?"color":void 0,showColorLabels:R?D:void 0,options:R?Hc:Lc,value:B,onChange:C,showDividers:u,disabled:m,fullWidth:f,startDecoration:v?(()=>{const e=be[y]||be.Search;return de(un,{size:"small",children:de(e,{})})})():void 0})})}),de(Zo,{code:(()=>{const t=[];return"outline"!==e&&t.push('variant="'+e+'"'),"default"!==r&&t.push('color="'+r+'"'),"medium"!==o&&t.push('size="'+o+'"'),d&&t.push('label="'+d+'"'),"top"!==l&&t.push('labelPosition="'+l+'"'),R&&t.push('mode="color"'),R&&!D&&t.push("showColorLabels={false}"),u&&t.push("showDividers"),m&&t.push("disabled"),f&&t.push("fullWidth"),v&&t.push("startDecoration={<Icon><"+y+"Icon /></Icon>}"),t.push("options={options}"),t.push("value={value}"),t.push("onChange={setValue}"),"<Select\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:T,onThemeChange:A,surface:z,onSurfaceChange:I})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Select",theme:T,surface:z})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(S,{direction:"row",spacing:1,children:["outline","light"].map(t=>de(Nc,{label:Fc(t),selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:Pc.map(e=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>de(Mc,{color:e,selected:r===e,onClick:n},e))})]},e.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(Nc,{label:Fc(e),selected:o===e,onClick:()=>i(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),de(S,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>de(Nc,{label:"none"===e?"None":Fc(e),selected:l===e,onClick:()=>s(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Start Icon"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Icon rendered before the value"})]}),de(ci,{checked:v,onChange:e=>x(e.target.checked),size:"small","aria-label":"Start icon"})]}),v&&ue(h,{sx:{mt:2},children:[de(Ql,{label:"Icon Name",value:y,onChange:e=>k(e.target.value),placeholder:"Search",variant:"primary-outline",size:"small",fullWidth:!0}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:4},children:[de("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)"]})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Dividers"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Lines between options"})]}),de(ci,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show dividers"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Disabled"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),de(ci,{checked:m,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Color Mode"}),de(xr,{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."})]}),de(ci,{checked:R,onChange:e=>W(e.target.checked),size:"small","aria-label":"Color mode"})]}),R&&ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Show Color Labels"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Hide to render a swatch-only trigger (no text). Useful for compact color pickers."})]}),de(ci,{checked:D,onChange:e=>F(e.target.checked),size:"small","aria-label":"Show color labels"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Full Width"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),de(ci,{checked:f,onChange:e=>b(e.target.checked),size:"small","aria-label":"Full width"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Select"})})]})]})})]})]})}const Ec={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}},Qc={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 Vc({options:e=[],value:a,defaultValue:i=null,onChange:l,inputValue:s,onInputChange:d,label:c,labelPosition:u="top",placeholder:p="Type to search",helperText:m,size:g="medium",variant:f="outline",color:b="primary",loading:v=!1,loadingText:x="Loading…",noOptionsText:y="No options",freeSolo:w=!1,clearable:S=!0,disabled:k=!1,fullWidth:B=!1,className:C="",sx:T={},...A}){const z=(I="default"===b?"primary":b).charAt(0).toUpperCase()+I.slice(1);var I;"production"!==process.env.NODE_ENV&&"light"===f&&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"===f?"outline":f,W="var(--Buttons-"+z+"-Border)",D="default"===b?"var(--Text)":"var(--Text-"+z+")",[F,P]=t(i),[L,H]=t(i?"string"==typeof i?i:i.label||"":""),[N,M]=t(!1),[O,E]=t(!1),[Q,V]=t(-1),j=n(null),U=n(null),G=void 0!==a,X=void 0!==s,q=G?a:F,Y=X?s:L,Z="floating"===u,J="top"===u,$=""!==Y,K=Z?Qc[g]||Qc.medium:Ec[g]||Ec.medium,_=Y?e.filter(e=>("string"==typeof e?e:e.label).toLowerCase().includes(Y.toLowerCase())):e,ee=o(e=>{X||H(e),d?.(e)},[X,d]),te=o(e=>{const t="string"==typeof e?e:e.label;G||P(e),ee(t),l?.(e),M(!1),V(-1),U.current?.focus()},[G,l,ee]);r(()=>{if(!N)return;const e=e=>{j.current&&!j.current.contains(e.target)&&M(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[N]);return ue(h,{ref:j,className:"autocomplete autocomplete-"+g+" autocomplete-variant-"+R+(N?" autocomplete-open":"")+(k?" autocomplete-disabled":"")+(C?" "+C:""),sx:{position:"relative",width:B?"100%":"auto",display:"inline-block",fontFamily:"inherit",...T},...A,children:[J&&c&&de("small"===g?sr:ur,{component:"label",style:{display:"block",marginBottom:"6px",color:k?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:k?"var(--Disabled, 0.38)":1},children:c}),de(h,{sx:{border:"1px solid "+W,borderRadius:"small"===g?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===g?"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:k?"var(--Disabled, 0.38)":1,"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:de(h,{children:ue(h,{sx:{position:"relative",display:"flex",alignItems:"center",minHeight:K.height,backgroundColor:"var(--Hover)"},children:[Z&&c&&de(h,{sx:{position:"absolute",top:$||O?"6px":"50%",left:(K.leftPad||14)+"px",transform:$||O?"scale(0.75)":"translateY(-50%)",transformOrigin:"top left",color:O?D:"var(--Quiet)",fontSize:K.fontSize,fontWeight:400,pointerEvents:"none",zIndex:1,transition:"top 0.15s ease, transform 0.15s ease, color 0.15s ease"},children:c}),de(h,{component:"input",ref:U,type:"text",role:"combobox","aria-expanded":N,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-label":c||p,autoComplete:"off",value:Y,onChange:e=>{ee(e.target.value),N||M(!0),V(-1)},onKeyDown:e=>{if("Escape"!==e.key){if("ArrowDown"===e.key){if(e.preventDefault(),!N)return void M(!0);V(e=>Math.min(e+1,_.length-1))}"ArrowUp"===e.key&&(e.preventDefault(),V(e=>Math.max(e-1,0))),"Enter"===e.key&&N&&Q>=0&&_[Q]&&(e.preventDefault(),te(_[Q]))}else M(!1)},onFocus:()=>{E(!0),M(!0)},onBlur:()=>E(!1),disabled:k,placeholder:Z?void 0:p,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:$||O?D:"var(--Quiet)",fontSize:K.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)",padding:K.padding,minWidth:0,"&::placeholder":{color:"var(--Quiet)",opacity:1,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)"},"&:disabled":{cursor:"not-allowed"}}}),v&&N&&de(Jt,{size:16,sx:{mr:1,color:"var(--Quiet)"}}),S&&Y&&!k&&de(h,{component:"button",type:"button","aria-label":"Clear",onClick:()=>{G||P(null),ee(""),l?.(null),U.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:de(Vt,{sx:{fontSize:14}})}),de(h,{component:"button",type:"button","aria-label":N?"Close":"Open",tabIndex:-1,onClick:()=>{k||M(!N)},sx:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:"100%",border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:k?"not-allowed":"pointer"},children:de(ge,{sx:{fontSize:(K.iconSize||18)+"px",transform:N?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})})]})})}),m&&de(h,{sx:{fontSize:"12px",color:"var(--Quiet)",mt:"4px",ml:"2px"},children:m}),N&&de(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:v?de(h,{sx:{px:1.5,py:2,textAlign:"center",fontSize:K.fontSize,color:"var(--Quiet)"},children:x}):0===_.length?de(h,{sx:{px:1.5,py:2,textAlign:"center",fontSize:K.fontSize,color:"var(--Quiet)"},children:y}):_.map((e,t)=>{const a="string"==typeof e?e:e.label,r="string"==typeof e?e:e.value,n=a===(q?"string"==typeof q?q:q.label:null),o=function(e,t){return t?{backgroundColor:"transparent",color:"var(--Text)",fontWeight:600}:e?{backgroundColor:"var(--Hover)",color:"var(--Text)"}:{backgroundColor:"transparent",color:"var(--Text-Quiet)"}}(t===Q,n);return ue(h,{role:"option","aria-selected":n,onClick:()=>te(e),onMouseEnter:()=>V(t),sx:{display:"flex",alignItems:"center",gap:1,px:1.5,py:0,mx:.5,minHeight:K.height,borderRadius:"4px",cursor:"pointer",fontSize:K.fontSize,fontFamily:"inherit",...o,transition:"background-color 0.1s ease","&:active":{backgroundColor:"var(--Pressed)"}},children:[de(sr,{style:{flex:1,color:"inherit",fontWeight:"inherit"},children:a}),n&&de(un,{size:"small",sx:{opacity:.6,flexShrink:0},children:de(me,{})})]},r||a)})})]})}const jc=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Uc=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Gc=[{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 Xc({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function qc({color:e,selected:t,onClick:a}){const r=jc(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Yc(){const[e,a]=t("outline"),[r,n]=t("default"),[o,i]=t("medium"),[l,s]=t("top"),[d,c]=t("Fruit"),[u,p]=t(!0),[m,g]=t(!1),[f,b]=t(!0),[v,x]=t(null),[y,k]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Autocomplete"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:v,surface:y,children:de(h,{sx:{width:"100%",maxWidth:360},children:de(Vc,{variant:e,color:r,size:o,label:d,labelPosition:l,options:Gc,clearable:u,disabled:m,fullWidth:f})})}),de(Zo,{code:(()=>{const t=[];return"outline"!==e&&t.push('variant="'+e+'"'),"default"!==r&&t.push('color="'+r+'"'),"medium"!==o&&t.push('size="'+o+'"'),d&&t.push('label="'+d+'"'),"top"!==l&&t.push('labelPosition="'+l+'"'),u||t.push("clearable={false}"),m&&t.push("disabled"),f&&t.push("fullWidth"),t.push("options={options}"),t.push("onChange={handleChange}"),"<Autocomplete\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:v,onThemeChange:x,surface:y,onSurfaceChange:k})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Autocomplete",theme:v,surface:y})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(S,{direction:"row",spacing:1,children:["outline","light"].map(t=>de(Xc,{label:jc(t),selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:Uc.map(e=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>de(qc,{color:e,selected:r===e,onClick:n},e))})]},e.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(Xc,{label:jc(e),selected:o===e,onClick:()=>i(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),de(S,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>de(Xc,{label:"none"===e?"None":jc(e),selected:l===e,onClick:()=>s(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Clearable"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear button when has value"})]}),de(ci,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clearable"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Disabled"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),de(ci,{checked:m,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Full Width"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),de(ci,{checked:f,onChange:e=>b(e.target.checked),size:"small","aria-label":"Full width"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Autocomplete"})})]})]})})]})]})}const Zc={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 Jc({value:e,defaultValue:a="",onChange:r,onFocus:o,onBlur:i,onClear:l,onSubmit:s,placeholder:d="Search…",size:c="medium",color:u="default",showClearButton:p=!0,disabled:m=!1,ariaLabel:g="Search",className:f="",sx:b={},...v}){const[x,y]=t(a),[w,S]=t(!1),k=n(null),B=void 0!==e,C=B?e:x,T=C.length>0,A=w||T,z=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===u?"primary":u),I="default"===u?"var(--Text)":"var(--Text-"+z+")",R=Zc[c]||Zc.medium,W=()=>{B||y(""),r?.(""),l?.(),k.current?.focus()};return de(h,{className:"search-field search-field-"+c+(w?" search-field-focused":"")+(T?" search-field-filled":"")+(m?" search-field-disabled":"")+(f?" "+f:""),sx:{display:"flex",boxSizing:"border-box",...b},...v,children:de(h,{sx:{border:"1px solid "+("var(--Buttons-"+z+"-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-"+z+"-Hover)"},"&:active":{borderColor:"var(--Buttons-"+z+"-Pressed)"}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:ue(h,{sx:{display:"flex",alignItems:"center",gap:1,width:"100%",boxSizing:"border-box",minHeight:R.height,px:R.px+"px",backgroundColor:"var(--Hover)"},children:[de(un,{size:"small",sx:{color:A?I:"var(--Quiet)",flexShrink:0,transition:"color 0.15s ease"},children:de(Fe,{})}),de(h,{component:"input",ref:k,type:"text",role:"searchbox","aria-label":g,value:C,onChange:e=>{const t=e.target.value;B||y(t),r?.(t,e)},onFocus:e=>{S(!0),o?.(e)},onBlur:e=>{S(!1),i?.(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:A?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&&de(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:de(un,{size:"small",children:de(Vt,{})})})]})})})}const $c=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Kc=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function _c({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function eu({color:e,selected:t,onClick:a}){const r=$c(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function tu(){const[e,a]=t("default"),[r,n]=t("medium"),[o,i]=t(!1),[l,s]=t(!0),[d,c]=t(null),[u,p]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Search Field"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:d,surface:u,children:de(h,{sx:{width:"100%",maxWidth:400},children:de(Jc,{color:e,size:r,disabled:o,showClearButton:l,placeholder:"Search..."})})}),de(Zo,{code:(()=>{const t=[];return"default"!==e&&t.push('color="'+e+'"'),"medium"!==r&&t.push('size="'+r+'"'),l||t.push("showClearButton={false}"),o&&t.push("disabled"),t.push('placeholder="Search..."'),t.push("onChange={handleSearch}"),"<SearchField\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"SearchField",theme:d,surface:u})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:Kc.map(t=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:t.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:t.colors.map(t=>de(eu,{color:t,selected:e===t,onClick:a},t))})]},t.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(_c,{label:$c(e),selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Clear Button"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear when has value"})]}),de(ci,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Clear button"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Disabled"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),de(ci,{variant:"default-outline",checked:o,onChange:e=>i(e.target.checked),size:"small","aria-label":"Disabled"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"SearchField"})})]})]})})]})]})}const au=["default","primary","secondary","tertiary","neutral","info","success","warning","error"],ru={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function nu({color:e="primary",width:t="hug",allCaps:a=!1,children:r,className:n="",sx:o={},...i}){const l="fill"===t,s=ru[e]||"Primary";return de(h,{component:"span",className:"tag tag-"+e+(n?" "+n:""),sx:{display:l?"flex":"inline-flex",alignItems:"center",justifyContent:l?"center":"flex-start",height:"24px",px:"8px",borderRadius:0,backgroundColor:"var(--Tag-"+s+"-BG)",color:"var(--Tag-"+s+"-Text)",width:l?"100%":"auto",flexShrink:0,userSelect:"none",...o},...i,children:de(sr,{component:"span",sx:{color:"inherit",lineHeight:"24px",whiteSpace:"nowrap",fontWeight:600,textTransform:a?"uppercase":"none"},children:r})})}const ou=e=>de(nu,{color:"primary",...e}),iu=e=>de(nu,{color:"secondary",...e}),lu=e=>de(nu,{color:"tertiary",...e}),su=e=>de(nu,{color:"neutral",...e}),du=e=>de(nu,{color:"info",...e}),cu=e=>de(nu,{color:"success",...e}),uu=e=>de(nu,{color:"warning",...e}),hu=e=>de(nu,{color:"error",...e}),pu=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function mu({ratio:e,threshold:t}){if(!e)return de(xr,{style:{color:"var(--Text-Quiet)"},children:"--"});const a=parseFloat(e)>=t;return ue(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ue(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:[e,":1"]}),de(xr,{style:{color:a?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:a?"Pass":"Fail"})]})}function gu({label:e,ratio:t,threshold:a,note:r}){return ue(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(h,{sx:{flex:1},children:[de(sr,{style:{color:"var(--Text)"},children:e}),r&&de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),de(mu,{ratio:t,threshold:a})]})}function fu({color:e,selected:t,onClick:a}){const r=ru[e]||((n=e)?n.charAt(0).toUpperCase()+n.slice(1):"");var n;return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height, 36px)",height:"var(--Button-Height, 36px)",borderRadius:"4px",backgroundColor:"var(--Tag-"+r+"-BG)",border:t?"2px solid var(--Text)":"2px 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&&de(me,{sx:{fontSize:16,color:"var(--Tag-"+r+"-Text)",pointerEvents:"none"}})})}function bu(){const[e,a]=t("primary"),[n,o]=t("New"),[i,l]=t(!1),[s,d]=t(null),[c,u]=t("Surface"),[p,m]=t({}),g=ru[e]||"Primary";return r(()=>{m({tagText:wo("--Tag-"+g+"-Text"),tagBg:wo("--Tag-"+g+"-BG"),pageBg:wo("--Background")})},[e,g]),ue(h,{sx:{pb:8},children:[de($a,{children:"Tag"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:s,children:ue(h,{sx:{width:"100%",maxWidth:480},children:[de(h,{sx:{display:"flex",alignItems:"center",gap:2,mb:3},children:de(nu,{color:e,allCaps:i,children:n})}),de(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:au.map(e=>de(nu,{color:e,allCaps:i,children:ru[e]},e))})]})}),de(Zo,{code:(()=>{const t=[];"primary"!==e&&t.push('color="'+e+'"'),i&&t.push("allCaps");return"<Tag"+(t.length?" "+t.join(" "):"")+">"+n+"</Tag>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:s,onThemeChange:d,surface:c,onSurfaceChange:u})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Tag",theme:s,surface:c})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:pu.map(t=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:t.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:t.colors.map(t=>de(fu,{color:t,selected:e===t,onClick:a},t))})]},t.label))}),ue(xr,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:["bg: var(--Tag-",g,"-BG) · text: var(--Tag-",g,"-Text)"]})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL TEXT"}),de(h,{component:"input",type:"text",value:n,onChange:e=>o(e.target.value),placeholder:"Tag label…",sx:{width:"100%",height:"40px",px:"12px",backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",color:"var(--Text)",fontSize:"14px",fontFamily:"inherit",outline:"none",boxSizing:"border-box","&:focus":{borderColor:"var(--Buttons-Default-Border)"},"&::placeholder":{color:"var(--Text-Quiet)"}}})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(sr,{children:"All caps"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"text-transform: uppercase"})]}),de(ci,{checked:i,onChange:e=>l(e.target.checked),size:"small","aria-label":"All caps"})]})]})}),de(Ti,{value:2,children:ue(h,{sx:{p:3},children:[ue(sr,{color:"quiet",style:{marginBottom:24},children:['color="',e,'" — var(--Tag-',g,"-BG) / var(--Tag-",g,"-Text)"]}),ue(S,{spacing:3,children:[ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),de(sr,{color:"quiet",style:{marginBottom:16},children:"Tag text must have 4.5:1 contrast against the tag background. Tags are 24px tall — text is considered small text."}),de(gu,{label:"var(--Tag-"+g+"-Text) vs. var(--Tag-"+g+"-BG)",ratio:yo(p.tagText,p.tagBg),threshold:4.5,note:"Tag text on tag background for "+e+" color"}),de(gu,{label:"var(--Tag-"+g+"-BG) vs. var(--Background)",ratio:yo(p.tagBg,p.pageBg),threshold:3,note:"Tag background against page background (non-text contrast, WCAG 1.4.11)"})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Touch Target (WCAG 2.5.8)"}),de(sr,{color:"quiet",style:{marginBottom:16},children:"Tags are non-interactive display elements — they do not require a touch target. If used inside a clickable parent (e.g. a card or row), the parent element must meet touch target requirements."}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{style:{color:"var(--Text)"},children:"Tag height — 24px"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive. No touch target requirement on the Tag itself."})]})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{spacing:0,children:[{label:"Element",value:"<span> — inline, non-interactive"},{label:"Role",value:"None — presentational label"},{label:"Screen reader",value:"Text content is read as inline text"},{label:"Color alone",value:"Never rely on color alone — always include text label"},{label:"All caps",value:"Uses text-transform: uppercase — screen readers read the original casing"},{label:"WCAG 1.4.1",value:"Text content ensures color-blind accessibility"}].map(({label:e,value:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"All Colors"}),de(sr,{color:"quiet",style:{marginBottom:16},children:"Visual overview of all tag colors in the current theme."}),de(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:au.map(e=>de(nu,{color:e,allCaps:i,children:ru[e]},e))})]})]})]})}),de(Ti,{value:3,children:de(pd,{component:"Tag"})})]})]})})]})]})}const vu={none:void 0,small:"var(--Sm-Card-Radius, var(--Card-Radius))",medium:"var(--Card-Radius)",large:"var(--Lg-Card-Radius, var(--Card-Radius))"};function xu({children:e,theme:t,surface:a,radius:r="none",elevation:n=0,component:o="div",className:i="",sx:l={},style:s,...d}){const c=Math.max(0,Math.min(5,0|n)),u=vu[r];if(!c)return de(h,{component:o,"data-theme":t||void 0,"data-surface":a||void 0,className:"omni-box"+(i?" "+i:""),sx:{background:"var(--Background)",boxSizing:"border-box",...u?{borderRadius:u}:{},...l},style:s,...d,children:e});const p=s||{},{width:m,height:g,minWidth:f,minHeight:b,maxWidth:v,maxHeight:x,borderRadius:y,margin:w,marginTop:S,marginRight:k,marginBottom:B,marginLeft:C,...T}=p,A={width:m,height:g,minWidth:f,minHeight:b,maxWidth:v,maxHeight:x,borderRadius:y,margin:w,marginTop:S,marginRight:k,marginBottom:B,marginLeft:C},{width:z,height:I,borderRadius:R,...W}=l;return de(h,{component:o,className:"omni-box-elevation"+(i?" "+i:""),"data-elevation":c,sx:{boxShadow:Hn[c],boxSizing:"border-box",width:z,height:I,borderRadius:void 0!==R?R:u},style:A,...d,children:de(h,{"data-theme":t||void 0,"data-surface":a||void 0,className:"omni-box",sx:{width:"100%",height:"100%",background:"var(--Background)",borderRadius:"inherit",boxSizing:"border-box",...W},style:T,children:e})})}const yu=["Surface","Surface-Dim","Surface-Bright","Container","Container-Low","Container-Lowest","Container-High"],wu=["Default","Primary","Primary","Secondary","Secondary","Tertiary","Tertiary","Neutral","Neutral","Info","Success","Warning","Error"];function Su({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function ku(){const[e,a]=t(""),[r,n]=t(""),[o,i]=t(null),[l,s]=t("Surface");return ue(xu,{sx:{pb:8},children:[de($a,{children:"Box"}),ue(ur,{color:"quiet",style:{marginTop:8,marginBottom:24,maxWidth:720},children:["Bare layout primitive — a slot that participates in the design-system cascade (",de("code",{children:"data-theme"})," / ",de("code",{children:"data-surface"}),") without carrying any chrome. Reach for ",de("code",{children:"<Ratio>"})," or",de("code",{children:" <Card>"})," when you need padding, borders, or shadow."]}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:o,surface:l,children:de(xu,{sx:{width:"100%",maxWidth:400},children:de(xu,{theme:e||void 0,surface:r||void 0,children:ue(xu,{sx:{padding:3,backgroundColor:"var(--Background)",color:"var(--Text)",borderRadius:"var(--Style-Border-Radius)",border:"1px dashed var(--Border-Variant)"},children:[de(_a,{children:"Box content"}),de(ur,{style:{color:"var(--Text-Quiet)",marginTop:6},children:"Anything dropped inside resolves tokens against the Box's theme / surface, if you set them."})]})})})}),de(Zo,{code:(()=>{const t=[];e&&t.push('theme="'+e+'"'),r&&t.push('surface="'+r+'"');return"<Box"+(t.length?" "+t.join(" "):"")+">\n {/* anything */}\n</Box>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:de(xu,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Playground"}),de(Ci,{children:"When to use"})]}),de(Ti,{value:0,children:ue(xu,{sx:{p:3},children:[de(xu,{sx:{mb:3},children:de(Li,{theme:o,onThemeChange:i,surface:l,onSurfaceChange:s})}),ue(xu,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME (optional)"}),ue(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[de(Su,{label:"None",selected:!e,onClick:()=>a("")}),wu.map(t=>de(Su,{label:t,selected:e===t,onClick:()=>a(t)},t))]})]}),ue(xu,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE (optional)"}),ue(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[de(Su,{label:"None",selected:!r,onClick:()=>n("")}),yu.map(e=>de(Su,{label:e,selected:r===e,onClick:()=>n(e)},e))]}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Both props are pass-throughs to ",de("code",{children:"data-theme"})," ","and ",de("code",{children:"data-surface"}),". Leave empty to inherit from the parent zone."]})]})]})}),de(Ti,{value:1,children:de(xu,{sx:{p:3},children:ue(S,{spacing:2,children:[ue(xu,{children:[de(sr,{style:{fontWeight:700},children:"Reach for Box when…"}),de(xr,{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."})]}),ue(xu,{children:[de(sr,{style:{fontWeight:700},children:"Use Ratio when…"}),de(xr,{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."})]}),ue(xu,{children:[de(sr,{style:{fontWeight:700},children:"Use Card when…"}),de(xr,{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 Bu({children:e,maxWidth:t="lg",disableGutters:a=!1,sx:r={},...n}){return de(N,{maxWidth:t,disableGutters:a,"data-surface":"Surface",sx:{backgroundColor:"var(--Background)",color:"var(--Text)",transition:"all 0.2s ease-in-out",...r},...n,children:e})}function Cu({children:e,container:t=!1,item:a=!1,spacing:r=2,sx:n={},...o}){return de(w,{container:t,item:a,spacing:r,sx:{transition:"all 0.2s ease-in-out",...n},...o,children:e})}function Tu({theme:e,surface:t="Surface",as:a="section",padding:r,className:n,style:o,children:i,...l}){return de(a,{...e?{"data-theme":e}:{},"data-surface":t,className:n,style:{background:"var(--Background)",color:"var(--Text)",...void 0!==r?{padding:r}:{},...o},...l,children:i})}function Au(){return ue("div",{children:[de($a,{style:{marginBottom:12},children:"Section"}),ue(ur,{color:"quiet",style:{marginBottom:32,maxWidth:720},children:[de("code",{children:"<Section>"})," bundles ",de("code",{children:"data-theme"})," +"," ",de("code",{children:"data-surface"})," + background paint into one component. Use anywhere you'd otherwise reach for"," ",de("code",{children:"<section data-theme data-surface style={{ background: var(--Background) }}>"}),". For wrapping without painting (e.g. AppBar's themed zone), use"," ",de("code",{children:"<ThemedZone>"}),"."]}),de($a,{style:{marginTop:24,marginBottom:12},children:"Theme + surface"}),de(sr,{color:"quiet",style:{marginBottom:16,display:"block"},children:'Sets data-theme="Primary" + data-surface="Surface", paints --Background.'}),ue(Tu,{theme:"Primary",surface:"Surface",padding:"32px",style:{borderRadius:8},children:[de($a,{children:"Primary-Light surface"}),de(ur,{children:"Body text picks up --Text automatically."}),de(sr,{color:"quiet",children:"Quiet text picks up --Text-Quiet."}),de("div",{style:{marginTop:12},children:de(oo,{variant:"primary",children:"Primary button"})})]}),de($a,{style:{marginTop:32,marginBottom:12},children:"Container surface"}),ue(Tu,{surface:"Container",padding:"32px",style:{borderRadius:8},children:[de($a,{children:"Container surface (inherits theme)"}),de(ur,{children:"Useful for card-like regions."})]}),de($a,{style:{marginTop:32,marginBottom:12},children:"Different element"}),ue(sr,{color:"quiet",style:{marginBottom:16,display:"block"},children:["Pass ",de("code",{children:'as="article"'}),", ",de("code",{children:'as="footer"'}),", etc."]}),ue(Tu,{as:"article",theme:"Neutral",surface:"Surface-Dimmest",padding:"32px",style:{borderRadius:8},children:[de($a,{children:"Neutral / Surface-Dimmest article"}),de(ur,{children:"Renders as an <article> element."})]})]})}const zu=["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"],Iu="1.618034",Ru={"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":Iu+" / 1","Golden-Vertical":"1 / "+Iu},Wu={none:0,xs:1,sm:2,md:3,lg:4,xl:6};function Du({ratio:t="1:1",children:a,variant:r="default",color:n="default",padding:o="none",fit:i="width",placeholder:l=!0,elevated:s=!1,clickable:d=!1,onClick:c,maxWidth:u,maxHeight:p,component:m="div",className:g="",sx:f={},...b}){const v=Ru[t]||Ru["1:1"],x=(y="default"===n?"Default":n).charAt(0).toUpperCase()+y.slice(1);var y;const w=l&&0===e.Children.count(a),S="default"===n?void 0:x,k="dark"===r?"Surface-Dimmest":"light"===r?"Surface-Brightest":void 0,B=void 0!==Wu[o]?Wu[o]:Wu.none,C=d||!!c,T="default"===r,A=s?Fn:Dn,z=s?Pn:Fn;return de(h,{component:m,onClick:C?c:void 0,role:C?"button":void 0,tabIndex:C?0:void 0,className:"ratio ratio-"+t.toLowerCase()+" ratio-"+r+(C?" ratio-clickable":"")+(s?" ratio-elevated":"")+(g?" "+g:""),sx:{aspectRatio:v,flex:"0 0 auto",..."height"===i?{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":A,overflow:"hidden",transition:"box-shadow 0.2s ease, border-color 0.2s ease",...C&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:z},"&:active":{transform:"scale(0.995)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...!C&&!T&&{"&:hover":{boxShadow:z}},...f},...b,children:de(h,{"data-theme":S||void 0,"data-surface":k,sx:{width:"100%",height:"100%",padding:B,backgroundColor:w?"var(--Border)":"var(--Background)",color:"var(--Text)",fontFamily:"inherit",borderRadius:T?0:"calc(var(--Style-Border-Radius) - 1px)",...w?{display:"flex",alignItems:"center",justifyContent:"center"}:{"& > *":{width:"100%",height:"100%"}}},children:w?de(un,{size:"large",sx:{color:"var(--Background)"},children:de($t,{})}):a})})}const Fu=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Pu=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Lu=["default","solid","light","dark"],Hu=["none","xs","sm","md","lg","xl"];function Nu({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Mu({color:e,selected:t,onClick:a,variant:r}){const n=Fu(e);return de(xu,{component:"button","data-theme":{solid:n,light:n+"-Light",dark:n,default:void 0}[r],"data-surface":{solid:"Surface",light:"Surface",dark:"Surface-Dimmest",default:"Surface"}[r],onClick:()=>a(e),"aria-label":"Select "+n,"aria-pressed":t,title:n,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Background)",border:t?"2px solid var(--Text)":"2px 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&&de(me,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function Ou(){const[e,a]=t("1:1"),[r,n]=t("solid"),[o,i]=t("primary"),[l,s]=t("none"),[d,c]=t(!1),[u,h]=t(!1),[p,m]=t(null),[g,f]=t("Surface");return ue(xu,{sx:{pb:8},children:[de($a,{children:"Ratio"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:p,surface:g,children:de(xu,{sx:{width:"100%",maxWidth:480},children:de(Du,{ratio:e,variant:r,color:o,padding:l,elevated:d,clickable:u})})}),de(Zo,{code:(()=>{const t=['ratio="'+e+'"'];return"default"!==r&&t.push('variant="'+r+'"'),"default"!==o&&t.push('color="'+o+'"'),"none"!==l&&t.push('padding="'+l+'"'),d&&t.push("elevated"),u&&t.push("clickable onClick={handleClick}"),"<Ratio "+t.join(" ")+">\n {/* your content */}\n</Ratio>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:de(xu,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Playground"}),de(Ci,{children:"Reference"})]}),de(Ti,{value:0,children:ue(xu,{sx:{p:3},children:[de(xu,{sx:{mb:3},children:de(Li,{theme:p,onThemeChange:m,surface:g,onSurfaceChange:f})}),ue(xu,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Lu.map(e=>de(Nu,{label:Fu(e),selected:r===e,onClick:()=>n(e)},e))})]}),ue(xu,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:Pu.map(e=>ue(xu,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>de(Mu,{color:e,selected:o===e,onClick:i,variant:"default"===r?"solid":r},e))})]},e.label))})]}),ue(xu,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PADDING"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Hu.map(e=>de(Nu,{label:"none"===e?"None":e.toUpperCase(),selected:l===e,onClick:()=>s(e)},e))})]}),ue(xu,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"RATIO"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:zu.map(t=>de(Nu,{label:t,selected:e===t,onClick:()=>a(t)},t))})]}),ue(xu,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(xu,{children:[de(kr,{children:"Elevated"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Bumps the shadow up one level"})]}),de(ci,{checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Elevated"})]}),ue(xu,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(xu,{children:[de(kr,{children:"Clickable"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds hover, press, and focus-visible"})]}),de(ci,{checked:u,onChange:e=>h(e.target.checked),size:"small","aria-label":"Clickable"})]})]})}),de(Ti,{value:1,children:de(xu,{sx:{p:3},children:ue(S,{spacing:3,children:[ue(xu,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Common use cases"}),de(S,{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:t})=>ue(xu,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:e}),de(xr,{style:{color:"var(--Text-Quiet)"},children:t})]},e))})]}),ue(ur,{color:"quiet",children:["Built on native CSS ",de("code",{children:"aspect-ratio"}),". The themed shell mirrors Box — pick a variant + color to paint the frame, or keep ",de("code",{children:'variant="default"'}),"for a borderless ratio container."]})]})})})]})})})]})]})}const Eu=e=>e.charAt(0).toUpperCase()+e.slice(1),Qu={small:sr,medium:ur,large:fr},Vu={small:nr,medium:rr,large:ar},ju={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"}},Uu=s({open:!1,setOpen:()=>{},anchorRef:{current:null},menuId:"",buttonId:"",variant:"outline",color:"default",size:"medium"}),Gu=()=>l(Uu);function Xu({children:e,variant:a="outline",color:r="default",size:l="medium",open:s,onOpenChange:d,...c}){const[u,p]=t(!1),m=void 0!==s,g=m?s:u,f=n(null),b=i(),v="menu-"+b,x="menubtn-"+b,y=o(e=>{const t="function"==typeof e?e(g):e;m?d?.(t):p(t)},[m,g,d]);return de(Uu.Provider,{value:{open:g,setOpen:y,anchorRef:f,menuId:v,buttonId:x,variant:a,color:r,size:l},children:de(h,{sx:{display:"inline-flex",position:"relative"},...c,children:e})})}function qu({children:t,className:a="",sx:r={},...n}){const{open:o,setOpen:i,anchorRef:l,menuId:s,buttonId:d,size:c,color:u}=Gu(),p=ju[c]||ju.medium,m=Eu("default"===u?"Default":u);return ue(h,{component:"button",ref:l,id:d,"aria-haspopup":"true","aria-expanded":o,"aria-controls":o?s:void 0,onClick:()=>i(e=>!e),className:"menu-button "+a,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"},...r},onKeyDown:e=>{"ArrowDown"!==e.key&&"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),i(!0))},...n,children:["string"==typeof t?e.createElement(Qu[c]||Qu.medium,{style:{color:"inherit",fontWeight:600}},t):t,de(un,{size:"small",sx:{color:"var(--Quiet)",transition:"transform 0.2s ease",transform:o?"rotate(180deg)":"rotate(0deg)"},children:de(ge,{})})]})}function Yu({children:e,className:t="",placement:a="bottom-start",sx:o={},...i}){const{open:l,setOpen:s,anchorRef:d,menuId:c,buttonId:u,variant:p,color:m,size:g}=Gu(),f=n(null),b=ju[g]||ju.medium,v=Eu("default"===m?"Default":m),x="var(--Buttons-"+v+"-Border)",y="light"===p?"default"===m?"Default":v:"solid"===p?v:void 0,w="light"===p?"Surface-Brightest":"solid"===p?"Surface":void 0;return r(()=>{if(l&&f.current){const e=f.current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');e&&e.focus()}},[l]),r(()=>{if(!l)return;const e=e=>{f.current&&!f.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]),r(()=>{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?de(h,{className:"menu menu-"+p+" "+t,sx:{position:"absolute",top:"100%",left:"bottom-end"===a?"auto":0,right:"bottom-end"===a?0:"auto",zIndex:99999,marginTop:"4px",border:"1px solid "+x,borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:"none",overflow:"hidden",...o},children:de(h,{ref:f,id:c,role:"menu","aria-labelledby":u,"data-theme":y,"data-surface":w,sx:{minWidth:b.minWidth,backgroundColor:"var(--Background)",color:"var(--Text)",fontSize:b.fontSize,fontFamily:"inherit",padding:b.py+" 0",outline:"none",borderRadius:"calc(var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px))) - 1px)"},onKeyDown:e=>{const t=f.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');if(!t?.length)return;const a=Array.from(t).indexOf(document.activeElement);"ArrowDown"===e.key?(e.preventDefault(),t[(a+1)%t.length].focus()):"ArrowUp"===e.key?(e.preventDefault(),t[(a-1+t.length)%t.length].focus()):"Home"===e.key?(e.preventDefault(),t[0].focus()):"End"===e.key?(e.preventDefault(),t[t.length-1].focus()):"Tab"===e.key&&s(!1)},...i,children:e})}):null}function Zu({children:e,onClick:t,selected:a=!1,disabled:r=!1,className:n="",sx:o={},...i}){const{setOpen:l,size:s}=Gu(),d=ju[s]||ju.medium,c=a?Vu[s]||Vu.medium:Qu[s]||Qu.medium,u=()=>{r||(t?.(),l(!1))};return de(h,{role:"menuitem",tabIndex:r?-1:0,"aria-disabled":r||void 0,"aria-selected":a||void 0,onClick:u,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),u())},className:"menu-item"+(a?" menu-item-selected":"")+" "+n,sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-Half)",padding:d.itemPy+" "+d.itemPx,fontSize:d.fontSize,color:r?"var(--Quiet)":a?"var(--Text)":"var(--Quiet)",backgroundColor:a?"var(--Hover)":"transparent",cursor:r?"not-allowed":"pointer",opacity:r?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.1s ease, color 0.1s ease",userSelect:"none",...!r&&{"&: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},...i,children:de(h,{className:"menu-item-slot",sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-Half)",paddingLeft:"var(--Sizing-Half)",paddingRight:"var(--Sizing-Half)",minWidth:0,flex:1},children:de(c,{color:"standard",style:{color:"inherit"},children:e})})})}function Ju({className:e="",sx:t={},...a}){return de(h,{component:"hr",role:"separator",className:"menu-divider "+e,sx:{border:"none",borderTop:"1px solid var(--Border)",margin:"4px 0",...t},...a})}const $u=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Ku=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function _u({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function eh({color:e,selected:t,onClick:a}){const r=$u(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function th(){const[e,a]=t("outline"),[r,n]=t("default"),[o,i]=t("medium"),[l,s]=t(null),[d,c]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Menu"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:l,surface:d,sx:{minHeight:250,alignItems:"flex-start",pt:6},children:ue(Xu,{variant:e,color:r,size:o,children:[de(qu,{children:"Actions"}),ue(Yu,{children:[de(Zu,{children:"Edit"}),de(Zu,{children:"Duplicate"}),de(Zu,{selected:!0,children:"Archive"}),de(Ju,{}),de(Zu,{disabled:!0,children:"Delete"})]})]})}),de(Zo,{code:(()=>{const t=[];return"outline"!==e&&t.push('variant="'+e+'"'),"default"!==r&&t.push('color="'+r+'"'),"medium"!==o&&t.push('size="'+o+'"'),"<Dropdown "+t.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}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Menu",theme:l,surface:d})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(S,{direction:"row",spacing:1,children:["outline","solid","light"].map(t=>de(_u,{label:$u(t),selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:Ku.map(e=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>de(eh,{color:e,selected:r===e,onClick:n},e))})]},e.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(_u,{label:$u(e),selected:o===e,onClick:()=>i(e)},e))})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Menu"})})]})]})})]})]})}let ah=0;const rh={default:"Nav-Bar",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},nh="var(--Sizing-1, 8px)",oh="40px",ih="var(--Icon-Size, 24px)",lh="var(--Sizing-Half, 4px)",sh={horizontal:{px:"var(--Button-Height, 32px)",py:"12px"},vertical:{px:"var(--Sizing-1-and-Half, 12px)",py:"var(--Sizing-2, 16px)"}},dh={px:0,py:0};function ch({items:e=[],value:a,defaultValue:r=0,onChange:i,showLabels:l=!0,variant:s="fixed",orientation:d="horizontal",barColor:c="default",fabAction:u,fabPosition:p="end",fixed:m=!0,"aria-label":g="Bottom navigation",className:f="",sx:b={},...v}){const[x,y]=t(r),w=void 0!==a,S=w?a:x,k=o(e=>{w||y(e),i?.(e)},[w,i]),B="vertical"===d,C="floating"===s,T=rh[c]||rh.default,A=C?B?sh.vertical:sh.horizontal:dh,z=n(null);null===z.current&&(z.current="bottom-nav-"+ah++);const I=e=>z.current+"-tab-"+e,R=!!u;return ue(h,{component:"nav","data-theme":T,"data-surface":"Surface-Dim","aria-label":g,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":"")+(f?" "+f:""),sx:{display:"flex",flexDirection:B?"column":"row",alignItems:"center",justifyContent:"center",backgroundColor:"var(--Background)",borderRadius:C?"83px":0,fontFamily:"inherit",width:B?"fit-content":"100%",px:A.px,py:A.py,...m&&{position:"fixed",zIndex:1100,...B?{top:"50%",left:0,transform:"translateY(-50%)"}:{bottom:0,left:0,right:0}},...b},...v,children:[R&&de(h,{role:"tablist","aria-orientation":B?"vertical":"horizontal","aria-owns":e.map((e,t)=>I(t)).join(" "),sx:{position:"absolute",width:0,height:0,overflow:"hidden"}}),ue(h,{role:R?void 0:"tablist","aria-orientation":R?void 0:B?"vertical":"horizontal",sx:{display:"flex",flexDirection:B?"column":"row",alignItems:"center",justifyContent:B?"flex-start":"space-between",gap:B?"10px":0,width:B?"auto":"100%",maxWidth:B?void 0:600},children:[e.map((e,t)=>de(uh,{id:R?I(t):void 0,icon:e.icon,label:e.label,selected:t===S,showLabel:l,onClick:()=>k(t),ariaLabel:e.label||e.ariaLabel,disabled:e.disabled},e.key||t)).flatMap((e,t,a)=>{if(!u)return[e];return t===("center"===p?Math.ceil(a.length/2):a.length)-1?[e,de(ph,{...u,showLabel:l,position:p},"fab")]:[e]}),u&&0===e.length&&de(ph,{...u,showLabel:l,position:p},"fab")]})]})}function uh({id:e,icon:t,label:a,selected:r,showLabel:n,onClick:o,ariaLabel:i,disabled:l}){return ue(h,{component:"button",type:"button",role:"tab",id:e,"aria-selected":r,"aria-label":i,onClick:o,disabled:l,"aria-disabled":l||void 0,className:"bottom-nav-item"+(r?" bottom-nav-item-selected":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:lh,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:[de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",minWidth:32,minHeight:32,padding:nh,borderRadius:oh,backgroundColor:r?"var(--Text)":"transparent",color:r?"var(--Background)":"var(--Quiet)",fontSize:ih,transition:"background-color 0.2s ease, color 0.15s ease","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"},".bottom-nav-item:hover &":r?{backgroundColor:"var(--Text)"}:{color:"var(--Text)",backgroundColor:"var(--Hover)"},".bottom-nav-item:active &":r?{backgroundColor:"var(--Text)"}:{color:"var(--Text)",backgroundColor:"var(--Pressed)"},".bottom-nav-item:disabled:hover &":{backgroundColor:"transparent"}},children:t}),n&&a&&de(wr,{className:"bottom-nav-label",style:{color:r?"var(--Text)":"var(--Quiet)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:a})]})}const hh=32;function ph({icon:e,label:a,onClick:o,showLabel:i,actions:l,position:s="end"}){const d=Array.isArray(l)&&l.length>0,[c,u]=t(!1),p=n(null);r(()=>{if(!c)return;const e=e=>{p.current&&!p.current.contains(e.target)&&u(!1)},t=e=>{"Escape"===e.key&&u(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",t),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",t)}},[c]);const m=e=>({display:"flex",alignItems:"center",justifyContent:"center",minWidth:e,minHeight:e,boxSizing:"border-box",borderRadius:oh,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"}}),g="center"!==s;return ue(h,{ref:p,sx:{position:"relative",display:"flex",flexShrink:0},children:[ue(h,{component:"button",type:"button","aria-label":a||"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:lh,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:[de(h,{sx:{...m(32),padding:nh,fontSize:ih,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||de(Wt,{})}),i&&a&&de(wr,{className:"bottom-nav-label",style:{color:"var(--Buttons-Default-Border)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:a})]}),d&&c&&de(h,{role:"menu","aria-label":a||"Actions",className:"bottom-nav-dial","data-surface":"Surface-Brightest",sx:{position:"absolute",bottom:"calc(100% + var(--Sizing-1, 8px))",...g?{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,t)=>ue(h,{component:"button",type:"button",role:"menuitem","aria-label":e.label,className:"bottom-nav-dial-item",onClick:t=>{u(!1),e.onClick?.(t)},sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-1, 8px)",flexDirection:g?"row-reverse":"row",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0,fontFamily:"inherit",color:"inherit",outline:"none",borderRadius:oh,"&: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:[de(h,{sx:{width:40,display:"flex",justifyContent:"center",flexShrink:0},children:de(h,{sx:{...m(hh),fontSize:"var(--Icon-Size-Small, 16px)"},children:e.icon||de(Wt,{})})}),de(Sr,{style:{color:"inherit"},children:e.label})]},e.key||t))})]})}const mh={Home:de(Re,{sx:{fontSize:"inherit"}}),Explore:de(Kt,{sx:{fontSize:"inherit"}}),Radio:de(_t,{sx:{fontSize:"inherit"}}),Library:de(ea,{sx:{fontSize:"inherit"}}),Favorite:de(Ie,{sx:{fontSize:"inherit"}}),Person:de(Le,{sx:{fontSize:"inherit"}}),Search:de(Fe,{sx:{fontSize:"inherit"}}),Settings:de(De,{sx:{fontSize:"inherit"}}),Notifications:de(we,{sx:{fontSize:"inherit"}}),Cart:de(Se,{sx:{fontSize:"inherit"}}),Star:de(Pe,{sx:{fontSize:"inherit"}}),Bookmark:de(ta,{sx:{fontSize:"inherit"}})},gh=Object.keys(mh),fh=[{icon:"Home",label:"Home"},{icon:"Explore",label:"Browse"},{icon:"Radio",label:"Radio"},{icon:"Library",label:"Library"}],bh=[{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"'},{value:"primary-medium",label:"Primary Medium",desc:'data-theme="Primary"'},{value:"primary-dark",label:"Primary Dark",desc:'data-theme="Primary"'},{value:"white",label:"White",desc:'data-theme="White"'},{value:"black",label:"Black",desc:'data-theme="Black"'}];function vh({label:e,selected:t,onClick:a,disabled:r}){return de(h,{component:"button",onClick:a,disabled:r,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:r?"not-allowed":"pointer",border:"2px solid var(--Buttons-Primary-Button)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:t?"var(--Buttons-Primary-Button)":"transparent",color:t?"var(--Buttons-Primary-Text)":"var(--Text)",padding:"4px 12px",fontSize:"14px",fontFamily:"inherit",fontWeight:500,whiteSpace:"nowrap",flexShrink:0,opacity:r?.4:1,transition:"background-color 0.15s ease, color 0.15s ease","&:hover":{backgroundColor:r?"transparent":t?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function xh({value:e,onChange:t,placeholder:a,sx:r}){return de(h,{component:"input",type:"text",value:e,onChange:e=>t(e.target.value),placeholder:a,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)"},...r}})}function yh({value:e,onChange:t,options:a,label:r}){return de(h,{component:"select",value:e,onChange:e=>t(e.target.value),"aria-label":r,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:a.map(e=>de("option",{value:"string"==typeof e?e:e.value,children:"string"==typeof e?e:e.label},"string"==typeof e?e:e.value))})}function wh({value:e,onChange:t,min:a,max:r,label:n}){return ue(h,{sx:{display:"flex",alignItems:"center",gap:1},children:[de(xr,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:90},children:n}),de("button",{type:"button",onClick:()=>{e>a&&t(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:"−"}),de(h,{sx:{fontWeight:700,fontSize:"14px",minWidth:24,textAlign:"center"},children:e}),de("button",{type:"button",onClick:()=>{e<r&&t(e+1)},disabled:e>=r,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>=r?"not-allowed":"pointer",fontSize:"14px",opacity:e>=r?.4:1,fontFamily:"inherit"},children:"+"})]})}function Sh({label:e,checked:t,onChange:a,caption:r,disabled:n}){return ue(h,{sx:{py:.5,opacity:n?.4:1},children:[de(B,{control:de(C,{checked:t,onChange:e=>a(e.target.checked),size:"small",disabled:n,sx:{color:"var(--Text-Quiet)","&.Mui-checked":{color:"var(--Buttons-Primary-Button)"}}}),label:de(kr,{children:e}),sx:{m:0}}),r&&de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginLeft:32},children:r})]})}function kh(){const[e,a]=t(0),[n,o]=t(0),[i,l]=t(!0),[s,d]=t(!0),[c,u]=t("fixed"),[p,m]=t("horizontal"),[g,f]=t("default"),[b,v]=t(4),[k,B]=t(fh.map(e=>({icon:e.icon,label:e.label})));r(()=>{B(e=>{const t=[],a=[{icon:"Favorite",label:"Favorites"},{icon:"Person",label:"Profile"}];for(let r=0;r<b;r++)if(e[r])t.push(e[r]);else{const e=a[r-fh.length]||{icon:gh[r%gh.length],label:gh[r%gh.length]};t.push(e)}return t}),o(e=>Math.min(e,b-1))},[b]);const C=(e,t,a)=>{B(r=>{const n=[...r];return n[e]={...n[e],[t]:a},n})},T=k.slice(0,b).map(e=>({icon:mh[e.icon]||mh.Home,label:e.label}));return ue(h,{sx:{pb:8},children:[de($a,{children:"Bottom Navigation"}),ue(x,{value:e,onChange:(e,t)=>a(t),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:[de(y,{label:"Playground"}),de(y,{label:"Accessibility"})]}),0===e&&ue(w,{container:!0,sx:{minHeight:400},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[ue(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:[de(h,{sx:{width:"100%",maxWidth:500,overflow:"hidden",boxShadow:"0 2px 12px rgba(0,0,0,0.08)"},children:de(ch,{items:T,value:n,onChange:o,showLabels:s,variant:c,orientation:p,barColor:g,fixed:!1},"bn-"+b+"-"+c+"-"+p+"-"+s+"-"+g)}),ue(xr,{style:{color:"var(--Text-Quiet)",textAlign:"center"},children:[b," items · ",s?"Labels":"Icons only"," · ","floating"===c?"Floating":"Fixed"," · ","vertical"===p?"Vertical":"Horizontal"," · ",(bh.find(e=>e.value===g)||bh[0]).label]})]}),de(Zo,{code:(()=>{const e=[];e.push("const items = ["),T.forEach((t,a)=>{const r=k[a];e.push(" { icon: <"+r.icon+"Icon />, label: '"+r.label+"' },")}),e.push("];"),e.push("");const t=[];return t.push("items={items}"),"default"!==g&&t.push('barColor="'+g+'"'),s||t.push("showLabels={false}"),"fixed"!==c&&t.push('variant="'+c+'"'),"horizontal"!==p&&t.push('orientation="'+p+'"'),i||t.push("fixed={false}"),e.push("<BottomNavigation"),t.forEach(t=>e.push(" "+t)),e.push("/>"),e.join("\n")})(),language:"JSX",sx:{borderRadius:0,borderBottom:"1px solid var(--Border)"}})]}),ue(w,{item:!0,sx:{width:{xs:"calc(100vw - 432px)",md:"calc((100vw - 432px) / 2)"},flexShrink:0,p:3,backgroundColor:"var(--Container)",overflowY:"auto"},children:[de(Ka,{children:"Playground"}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:bh.map(e=>de(vh,{label:e.label,selected:g===e.value,onClick:()=>f(e.value)},e.value))}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:[(bh.find(e=>e.value===g)||bh[0]).desc,' · data-surface="Surface-Dim" · bg: var(--Background)']})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ue(S,{spacing:0,children:[de(Sh,{label:"Fixed",checked:i,onChange:l,caption:"Position fixed to bottom of viewport."}),de(Sh,{label:"Labels",checked:s,onChange:d,caption:"Show text labels with icons."}),de(xr,{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."})]})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),ue(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[de(vh,{label:"Fixed",selected:"fixed"===c,onClick:()=>u("fixed")}),de(vh,{label:"Floating",selected:"floating"===c,onClick:()=>u("floating")})]}),de(xr,{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."}),de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",margin:"16px 0 8px"},children:"ORIENTATION"}),ue(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[de(vh,{label:"Horizontal",selected:"horizontal"===p,onClick:()=>m("horizontal")}),de(vh,{label:"Vertical",selected:"vertical"===p,onClick:()=>m("vertical")})]}),de(xr,{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."})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"NAVIGATION ITEMS"}),de(wh,{label:"Count",value:b,onChange:v,min:3,max:6}),de(S,{spacing:1.5,sx:{mt:2},children:k.slice(0,b).map((e,t)=>ue(h,{sx:{display:"flex",alignItems:"center",gap:1,flexWrap:"nowrap"},children:[de(xr,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:16,textAlign:"right"},children:t+1}),de(yh,{value:e.icon,onChange:e=>C(t,"icon",e),options:gh,label:"Item "+(t+1)+" icon"}),s&&de(xh,{value:e.label,onChange:e=>C(t,"label",e),placeholder:"Label"})]},t))})]})]})]}),1===e&&ue(h,{sx:{p:4},children:[de(Ka,{children:"Accessibility Requirements"}),ue(sr,{color:"quiet",style:{marginBottom:32},children:[b," items · ",s?"Labels":"Icons only"," · ","floating"===c?"Floating":"Fixed"," · ","vertical"===p?"Vertical":"Horizontal"," · ",(bh.find(e=>e.value===g)||bh[0]).label]}),ue(S,{spacing:4,children:[ue(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),ue(S,{spacing:0,children:[ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Landmark:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav role="navigation" aria-label="Bottom navigation">'})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Tab list:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tablist"'})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Tab items:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tab", aria-selected, aria-label'})]}),ue(h,{sx:{py:1.5},children:[de(sr,{children:"Focus:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) on :focus-visible."})]})]})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Token Reference"}),ue(S,{spacing:0,children:[ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Bar:"}),de(xr,{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.).'})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Unselected icon/label:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text-Quiet)"})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Selected:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Selected pill:"}),de(xr,{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)"})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Backfill + horizontal label:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label inside pill: var(--Buttons-Primary-Text)"})]}),ue(h,{sx:{py:1.5},children:[de(sr,{children:"Backfill + vertical label:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label below pill: var(--Text)"})]})]})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Best Practices"}),ue(S,{spacing:0,children:[ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Item count:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"3–5 recommended. 6 maximum."})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Horizontal layout:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"Only available with 4 or fewer items."})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Labels:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"Always recommended for clarity."})]}),ue(h,{sx:{py:1.5},children:[de(sr,{children:"Fixed:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"Add bottom padding to main content to avoid overlap."})]})]})]})]})]})]})}const Bh={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Ch={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}},Th=s({orientation:"horizontal",size:"medium",color:"primary",activeStep:0,clickable:!1,onStepClick:null,dashedIncomplete:!1,totalSteps:0,variant:"count"}),Ah=()=>l(Th);function zh({theme:t,surface:a,children:r,orientation:n="horizontal",size:o="medium",color:i="primary",activeStep:l=0,clickable:s=!1,onStepClick:d,dashedIncomplete:c=!1,variant:u="count",className:p="",sx:m={},...g}){const f=e.Children.toArray(r).filter(e.isValidElement),b=f.length,v="horizontal"===n;return de(Th.Provider,{value:{orientation:n,size:o,color:i,activeStep:l,clickable:s,onStepClick:d,dashedIncomplete:c,totalSteps:b,variant:u},children:de(h,{component:"ol",role:"list","aria-label":"Progress","data-theme":t||void 0,"data-surface":a||void 0,className:"stepper stepper-"+n+" stepper-"+o+" stepper-"+i+" "+p,sx:{display:"flex",flexDirection:v?"row":"column",alignItems:v?"flex-start":"stretch",listStyle:"none",margin:0,padding:0,width:"100%",gap:0,...m},...g,children:f.map((t,a)=>e.cloneElement(t,{_index:a,key:t.key||a}))})})}function Ih({children:e,icon:t,label:a,disabled:r=!1,_index:n=0,className:o="",sx:i={},...l}){const{orientation:s,size:d,color:c,activeStep:u,clickable:p,onStepClick:m,dashedIncomplete:g,totalSteps:f,variant:b}=Ah(),v=p&&!r,x=Ch[d]||Ch.medium,y=Bh[c]||"Primary",w="horizontal"===s,S=n===u,k=n<u,B=n>u,C=n===f-1,T=t||n+1,A=a||e,z=B?"var(--Quiet)":"var(--Buttons-"+y+"-Border)",I=S?"var(--Buttons-"+y+"-Button)":"transparent",R=S?"var(--Buttons-"+y+"-Text)":B?"var(--Quiet)":"var(--Text)",W=S?"var(--Buttons-"+y+"-Hover)":"var(--Hover)",D=S?"var(--Buttons-"+y+"-Pressed)":"var(--Pressed)",F="noCount"===b,P=de(h,{component:v?"button":"div",onClick:v?()=>m?.(n):void 0,onKeyDown:v?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),m?.(n))}:void 0,tabIndex:v?0:void 0,role:v?"button":void 0,"aria-label":v?"Go to step "+(n+1):void 0,"aria-current":S?"step":void 0,"aria-disabled":r||void 0,className:"step-indicator step-indicator-"+d+(S?" step-indicator-active":"")+(k?" step-indicator-completed":"")+(B?" step-indicator-incomplete":"")+(v?" step-indicator-clickable":""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:F?x.dot:x.indicator+"px",height:F?x.dot:x.indicator+"px",minWidth:F?x.dot:x.indicator+"px",minHeight:F?x.dot:x.indicator+"px",borderRadius:"50%",border:"var(--Button-Border-Width, 1px) solid "+z,backgroundColor:I,color:R,fontSize:x.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:r?"not-allowed":v?"pointer":"default",outline:"none",padding:0,...r&&{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%"}},...v&&{"&:hover":{backgroundColor:W},"&:active":{backgroundColor:D},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"}}},children:F?null:T}),L=n<u,H=C?null:de(h,{className:"step-connector"+(L?" step-connector-completed":" step-connector-incomplete")+(g&&!L?" step-connector-dashed":""),"aria-hidden":"true",sx:{flex:1,...w?{height:x.connectorThickness,minWidth:"20px",alignSelf:"flex-start",marginTop:`calc(${x.indicator/2}px - ${x.connectorThickness} / 2)`,marginLeft:"8px",marginRight:"8px"}:{width:x.connectorThickness,minHeight:"24px",marginLeft:`calc(${x.indicator/2}px - ${x.connectorThickness} / 2)`,marginTop:"4px",marginBottom:"4px"},backgroundColor:L?"var(--Buttons-"+y+"-Button)":"var(--Border)",...g&&!L&&{backgroundColor:"transparent",backgroundImage:w?"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:w?"12px 100%":"100% 12px"},transition:"background-color 0.15s ease"}}),N=A?de("small"===d?xr:sr,{style:{fontWeight:S?600:400,color:S||k?"var(--Text)":"var(--Quiet)",textAlign:w?"center":"left",whiteSpace:"nowrap",lineHeight:1.3},children:A}):null;return ue(h,w?{component:"li",className:"step step-"+d+" step-horizontal"+(S?" step-active":"")+(k?" step-completed":"")+(B?" step-incomplete":"")+" "+o,sx:{display:"flex",alignItems:"center",flex:C?"none":1,...i},...l,children:[ue(h,{sx:{display:"flex",flexDirection:"column",alignItems:"center",flexShrink:0},children:[P,N&&de(h,{sx:{mt:"4px"},children:N})]}),H]}:{component:"li",className:"step step-"+d+" step-vertical"+(S?" step-active":"")+(k?" step-completed":"")+(B?" step-incomplete":"")+" "+o,sx:{display:"flex",flexDirection:"column",alignItems:"flex-start",...i},...l,children:[ue(h,{sx:{display:"flex",alignItems:"center",gap:"8px"},children:[P,N]}),H]})}const Rh=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"]}],Dh=["Account","Details","Review","Confirm","Complete","Done"];function Fh({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Ph({color:e,selected:t,onClick:a}){const r=Rh(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Lh(){const[e,a]=t("default"),[r,n]=t("medium"),[o,i]=t("horizontal"),[l,s]=t(4),[d,c]=t(1),[u,p]=t(!1),[m,g]=t(!1),[f,b]=t(null),[v,x]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Stepper"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:f,surface:v,children:de(h,{sx:{width:"100%",maxWidth:"vertical"===o?300:"100%"},children:de(zh,{color:e,size:r,orientation:o,activeStep:d,clickable:u,onStepClick:u?c:void 0,dashedIncomplete:m,children:Dh.slice(0,l).map(e=>de(Ih,{label:e},e))})})}),de(Zo,{code:(()=>{const t=[];return"default"!==e&&t.push('color="'+e+'"'),"medium"!==r&&t.push('size="'+r+'"'),"horizontal"!==o&&t.push('orientation="vertical"'),t.push("activeStep={"+d+"}"),u&&t.push("clickable onStepClick={setActiveStep}"),m&&t.push("dashedIncomplete"),"<Stepper "+t.join(" ")+">\n"+Dh.slice(0,l).map(e=>' <Step label="'+e+'" />').join("\n")+"\n</Stepper>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:f,onThemeChange:b,surface:v,onSurfaceChange:x})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Stepper",theme:f,surface:v})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STEPS"}),de(S,{direction:"row",spacing:1,children:[2,3,4,5,6].map(e=>de(Fh,{label:String(e),selected:l===e,onClick:()=>{s(e),d>=e&&c(e-1)}},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ACTIVE STEP"}),de(S,{direction:"row",spacing:1,children:Dh.slice(0,l).map((e,t)=>de(Fh,{label:String(t+1),selected:d===t,onClick:()=>c(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:Wh.map(t=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:t.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:t.colors.map(t=>de(Ph,{color:t,selected:e===t,onClick:a},t))})]},t.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(Fh,{label:Rh(e),selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),de(S,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>de(Fh,{label:Rh(e),selected:o===e,onClick:()=>i(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Clickable"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Steps are interactive buttons"})]}),de(ci,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clickable"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Dashed Incomplete"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Dashed connector for future steps"})]}),de(ci,{variant:"default-outline",checked:m,onChange:e=>g(e.target.checked),size:"small","aria-label":"Dashed incomplete"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Stepper"})})]})]})})]})]})}function Hh({actions:e=[],variant:a="solid",color:i="default",direction:l="up",speed:s=50,showTooltips:d=!0,open:c,onOpen:u,onClose:p,icon:m,ariaLabel:g="Speed Dial",className:f="",sx:b={},...x}){const[y,w]=t(!1),S=void 0!==c,k=S?c:y,B=n(null),C=a,T=o(()=>{k?(S||w(!1),p?.()):(S||w(!0),u?.())},[k,S,u,p]),A=o((e,t)=>{e.onClick?.(t),S||w(!1),p?.()},[S,p]);r(()=>{if(!k)return;const e=e=>{B.current&&!B.current.contains(e.target)&&(S||w(!1),p?.())};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[k,S,p]),r(()=>{if(!k)return;const e=e=>{"Escape"===e.key&&(S||w(!1),p?.())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[k,S,p]);const z="up"===l||"down"===l,I="up"===l||"down"===l?"left":"top";return ue(h,{ref:B,className:"speed-dial speed-dial-"+a+" speed-dial-"+i+" speed-dial-"+l+" "+f,sx:{position:"relative",display:"inline-flex",overflow:"visible",width:z?"56px":"auto",height:z?"auto":"56px",...b},...x,children:[de(Dd,{size:"large",variant:C,color:i,onClick:T,"aria-label":g,"aria-expanded":k,"aria-haspopup":"menu",sx:{position:"relative",zIndex:2},children:de(h,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",transition:"transform 0.3s ease",transform:k?"rotate(45deg)":"rotate(0deg)"},children:m||de(Wt,{})})}),de(h,{role:"menu",sx:{position:"absolute",inset:0,pointerEvents:"none",overflow:"visible"},children:e.map((e,t)=>{const a=(e=>{const t=56+44*e;switch(l){case"up":default:return{bottom:t+"px",left:"12px"};case"down":return{top:t+"px",left:"12px"};case"left":return{right:t+"px",top:"12px"};case"right":return{left:t+"px",top:"12px"}}})(t),r=t*s,n=de(Dd,{size:"small",variant:C,color:i,role:"menuitem","aria-label":e.name||"Action "+(t+1),onClick:()=>A(e,t),sx:{position:"absolute",...a,opacity:k?1:0,transform:k?"scale(1)":"scale(0.3)",transition:"opacity 0.2s ease, transform 0.2s ease",transitionDelay:k?r+"ms":"0ms",pointerEvents:k?"auto":"none"},children:e.icon||de(Wt,{})},e.key||t);return d&&e.name?de(v,{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:n},e.key||t):n})})]})}const Nh=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Mh=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Oh=[{name:"Edit",icon:de(un,{size:"small",sx:{color:"inherit"},children:de(aa,{})})},{name:"Share",icon:de(un,{size:"small",sx:{color:"inherit"},children:de(ra,{})})},{name:"Delete",icon:de(un,{size:"small",sx:{color:"inherit"},children:de(We,{})})},{name:"Favorite",icon:de(un,{size:"small",sx:{color:"inherit"},children:de(Ie,{})})}];function Eh({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Qh({color:e,selected:t,onClick:a}){const r=Nh(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Vh(){const[e,a]=t("solid"),[r,n]=t("default"),[o,i]=t("up"),[l,s]=t(!0),[d,c]=t(null),[u,p]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Speed Dial"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:d,surface:u,sx:{minHeight:300,alignItems:"flex-end",justifyContent:"center"},children:de(Hh,{variant:e,color:r,direction:o,showTooltips:l,actions:Oh,ariaLabel:"Quick actions"})}),de(Zo,{code:(()=>{const t=[];return"solid"!==e&&t.push('variant="'+e+'"'),"default"!==r&&t.push('color="'+r+'"'),"up"!==o&&t.push('direction="'+o+'"'),l||t.push("showTooltips={false}"),t.push("actions={actions}"),t.push('ariaLabel="Quick actions"'),"<SpeedDial\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"SpeedDial",theme:d,surface:u})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(S,{direction:"row",spacing:1,children:["solid","outline"].map(t=>de(Eh,{label:Nh(t),selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:Mh.map(e=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>de(Qh,{color:e,selected:r===e,onClick:n},e))})]},e.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["up","down","left","right"].map(e=>de(Eh,{label:Nh(e),selected:o===e,onClick:()=>i(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Tooltips"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show labels beside actions"})]}),de(ci,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Show tooltips"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"SpeedDial"})})]})]})})]})]})}const jh={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",black:"BW",white:"BW"};function Uh(e,t){return"var(--"+(jh[e]||"Primary")+"-Color-"+t+")"}const Gh={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 Xh(e,t){const a=Gh[e]||Gh.primary;return(a[t]||a.linear).map(e=>({...e}))}function qh({variant:e="linear",color:t="primary",angle:a=135,stops:r=null,position:n=null,blobs:o=null,cardProps:i={},minHeight:l=300,children:s,className:d="",sx:c={},...u}){const p="meshCard"===e,m="mesh"===e||p,g="radial"===e,f="linear"===e||g,b=r||Xh(t,g?"radial":"linear"),v=o||Xh(t,p?"meshCard":"mesh"),x=m?function(e){if(!e||0===e.length)return"none";const t=e.map(e=>{const t=Uh(e.family,e.tone),a=e.spread||40;return"radial-gradient(circle at "+e.x+"% "+e.y+"%, "+t+" 0%, transparent "+a+"%)"}),a=Uh(e[0].family,e[0].tone);return t.push(a),t.join(", ")}(v):g?function(e,t){if(!e||0===e.length)return"none";const a=[...e].sort((e,t)=>e.position-t.position).map(e=>Uh(e.family,e.tone)+" "+e.position+"%"),r=t||{x:50,y:50};return"radial-gradient(circle at "+r.x+"% "+r.y+"%, "+a.join(", ")+")"}(b,n||{x:50,y:50}):function(e,t){return e&&0!==e.length?"linear-gradient("+t+"deg, "+[...e].sort((e,t)=>e.position-t.position).map(e=>Uh(e.family,e.tone)+" "+e.position+"%").join(", ")+")":"none"}(b,a),y=f?b[0]:v[0];var w,S;const k=function(e){return"dark"===e?"var(--BW-Color-1)":"var(--BW-Color-6)"}((w=y?.tone||8,"black"===(S=y?.family||"primary")||"white"===S?w<=5?"light":"dark":w<=5?"dark":"light"));return de(h,p?{className:"gradient gradient-mesh-card "+d,sx:{background:x,minHeight:l,borderRadius:"var(--Card-Radius)",display:"flex",alignItems:"center",justifyContent:"center",padding:"var(--Card-Padding)",position:"relative",overflow:"hidden",...c},...u,children:de(Gi,{variant:"solid",...i,children:de(Xi,{children:s})})}:{className:"gradient gradient-"+e+" "+d,sx:{background:x,minHeight:l,borderRadius:"var(--Card-Radius)",color:k,display:"flex",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden",...c},...u,children:s})}const Yh=e=>de(qh,{variant:"linear",...e}),Zh=e=>de(qh,{variant:"radial",...e}),Jh=e=>de(qh,{variant:"mesh",...e}),$h=e=>de(qh,{variant:"meshCard",...e});function Kh({children:e,surface:t="Container",outlined:a=!1,variant:r=(a?"outlined":"elevation"),sx:n={},...o}){const{dataSurface:i,elevation:l}=function(e="Container"){const t={"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}},a=t[e]||t.Container;return{dataSurface:e,elevation:a.elevation,zIndex:a.zIndex}}(t);return de(M,{variant:r,elevation:a?0:l,"data-surface":i,sx:{padding:2,borderRadius:"8px",transition:"all 0.2s ease-in-out",...n},...o,children:e})}function _h({open:e=!1,onClose:a,anchorRef:o,placement:i="bottom-end",theme:l="Default",surface:s="Surface-Bright",width:d=320,maxHeight:c=400,children:u,sx:p={}}){const m=n(null),[g,f]=t({top:0,left:0,right:"auto"});return r(()=>{if(!e||!o?.current)return;const t=o.current.getBoundingClientRect();f("bottom-end"===i?{top:t.bottom+6,right:window.innerWidth-t.right,left:"auto"}:{top:t.bottom+6,left:t.left,right:"auto"})},[e,o,i]),r(()=>{if(!e)return;const t=e=>{m.current?.contains(e.target)||o?.current?.contains(e.target)||a?.()};return document.addEventListener("pointerdown",t),()=>document.removeEventListener("pointerdown",t)},[e,a,o]),r(()=>{if(!e)return;const t=e=>{"Escape"===e.key&&a?.()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[e,a]),e?Ae.createPortal(de(h,{ref:m,"data-theme":l,"data-surface":s,sx:{position:"fixed",top:g.top,left:g.left,right:g.right,zIndex:2e9,width:d,maxHeight:c,overflowY:"auto",backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:Pn,...p},children:u}),document.body):null}["default","primary","secondary","tertiary","neutral"].map(e=>{return{value:e,label:(t=e,t?t.charAt(0).toUpperCase()+t.slice(1):"")};var t});const ep=s(null),tp=["Default","Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error","App-Bar","Nav-Bar","Status"],ap=["Professional","Modern","Bold","Playful"],rp=["Surface-Dimmest","Surface-Dim","Surface","Surface-Bright","Surface-Brightest","Container","Container-Low","Container-Lowest","Container-High","Container-Highest"],np={"light-tonal":{theme:"Primary",rootSurface:"Surface-Brightest"},"grey-professional":{theme:"Neutral",rootSurface:"Surface"},"dark-professional":{theme:"Neutral",rootSurface:"Surface-Dimmest"}},op="omni-foundation",ip="omni-core",lp="omni-typography",sp="omni-mode",dp="omni-base",cp="omni-styles";function up(e){document.getElementById(e)?.remove()}function hp(e,t,a){return t?function(e){return!(!e||"string"!=typeof e)&&(e.startsWith("http")||e.startsWith("/")||e.endsWith(".css"))}(t)?function(e,t,a){const r=document.getElementById(e);return r?"LINK"===r.tagName&&r.getAttribute("href")!==t?new Promise((e,a)=>{r.onload=()=>e(r),r.onerror=()=>a(new Error(`OmniDesignProvider: failed to load ${t}`)),r.setAttribute("href",t)}):Promise.resolve(r):new Promise((r,n)=>{const o=document.createElement("link");o.id=e,o.rel="stylesheet",o.setAttribute("data-omni","true"),o.onload=()=>r(o),o.onerror=()=>n(new Error(`OmniDesignProvider: failed to load ${t}`)),o.href=t;const i=a?document.getElementById(a):null;i?document.head.insertBefore(o,i):document.head.appendChild(o)})}(e,t,a):function(e,t,a){if(!t)return Promise.resolve(null);const r=document.getElementById(e);if(r)return r.textContent=t,Promise.resolve(r);const n=document.createElement("style");n.id=e,n.setAttribute("data-omni","true"),n.textContent=t;const o=a?document.getElementById(a):null;return o?document.head.insertBefore(n,o):document.head.appendChild(n),Promise.resolve(n)}(e,t,a):Promise.resolve(null)}function pp({themeURL:e,foundationCSS:a,coreCSS:i,typographyCSS:l,lightModeCSS:s,darkModeCSS:d,baseCSS:c,stylesCSS:h,defaultTheme:p="Default",defaultStyle:m="Modern",defaultSurface:g="Surface",surfaceStyle:f,defaultDarkMode:b=!1,darkTheme:v="Neutral",darkMode:x,onDarkModeChange:y,className:w,style:S,fullHeight:k=!0,children:B}){const[C,T]=t(b),A=void 0!==x,z=A?x:C,[I,R]=t({foundation:a??null,core:i??null,typography:l??null,lightMode:s??null,darkMode:d??null,base:c??null,styles:h??null}),[W,D]=t({}),F=n(!0);r(()=>(F.current=!0,()=>{F.current=!1}),[]),r(()=>{e&&(X("loading"),async function(e){const t=/\.json(\?|$)/.test(e)?e:`${e.replace(/\/$/,"")}/theme.json`,a=e.replace(/\/$/,"").replace(/\/theme\.json(\?.*)?$/,""),r=await fetch(t);if(!r.ok)throw new Error(`OmniDesignProvider: could not load theme manifest from ${t} (${r.status})`);const n=await r.json(),o=e=>e?/^https?:\/\//i.test(e)?e:`${a}/${e}`:null;return{foundationURL:o(n.foundation),coreURL:o(n.core),typographyURL:o(n.typography),lightModeURL:o(n.lightMode),darkModeURL:o(n.darkMode),baseURL:o(n.base),stylesURL:o(n.styles),defaultTheme:n.defaultTheme??null,defaultStyle:n.defaultStyle??null,defaultSurface:n.defaultSurface??null,darkTheme:n.darkTheme??null,name:n.name??null}}(e).then(e=>{F.current&&(R({foundation:a??e.foundationURL,core:i??e.coreURL,typography:l??e.typographyURL,lightMode:s??e.lightModeURL,darkMode:d??e.darkModeURL,base:c??e.baseURL,styles:h??e.stylesURL}),D({defaultTheme:e.defaultTheme,defaultStyle:e.defaultStyle,defaultSurface:e.defaultSurface,darkTheme:e.darkTheme,name:e.name}))}).catch(e=>{F.current&&(console.error("OmniDesignProvider: manifest error:",e),Y(e.message),X("error"))}))},[e]);const P=f?np[f]?.theme??p:"Default"!==p?p:W.defaultTheme??p,L=f?np[f]?.rootSurface??g:W.defaultSurface??g,H=W.defaultStyle??m,N="Neutral"!==v?v:W.darkTheme??v,[M,O]=t(P),[E,Q]=t(H),[V,j]=t(L),U=!!(e||a||i||l||s||d||c||h),[G,X]=t(U?"loading":"ready"),[q,Y]=t(null);r(()=>{const{foundation:e,core:t,typography:a,base:r,styles:n}=I;if(e||t||a||r||n)return X("loading"),Y(null),Promise.all([hp(op,e),hp(ip,t),hp(lp,a).catch(e=>{console.warn("OmniDesignProvider: typography CSS did not load —",e.message)}),hp(dp,r),hp(cp,n)]).then(()=>{F.current&&X("ready")}).catch(e=>{F.current&&(console.error("OmniDesignProvider CSS error:",e),Y(e.message),X("error"))}),()=>{up(op),up(ip),up(lp),up(dp),up(cp)};X("ready")},[I.foundation,I.core,I.typography,I.base,I.styles]),r(()=>{const e=z?I.darkMode:I.lightMode;e&&hp(sp,e,dp).catch(e=>console.error("OmniDesignProvider mode CSS error:",e))},[z,I.lightMode,I.darkMode]),r(()=>()=>up(sp),[]);const Z=z?N:M,J=o(()=>{A?y?.(!z):T(e=>!e)},[A,z,y]),$=o(e=>{tp.includes(e)||console.warn(`OmniDesignProvider: unknown theme "${e}"`),O(e)},[]),K=o(e=>{ap.includes(e)||console.warn(`OmniDesignProvider: unknown style "${e}"`),Q(e)},[]),_=o(e=>{rp.includes(e)||console.warn(`OmniDesignProvider: unknown surface "${e}"`),j(e)},[]),ee=u(()=>({theme:Z,style:E,surface:V,isDark:z,cssStatus:G,cssError:q,setTheme:$,setStyle:K,setSurface:_,toggleDarkMode:J,themes:tp,styles:ap,surfaces:rp,name:W.name??null}),[Z,E,V,z,G,q,$,K,_,J,W.name]);return ue(ep.Provider,{value:ee,children:[de("style",{"data-omni":"hide-during-load",children:'[data-omni-css="loading"]{visibility:hidden}'}),de("div",{"data-theme":Z,"data-style":E,"data-surface":V,"data-omni-css":G,className:w,style:{...k?{minHeight:"100vh"}:{},...S},children:B})]})}function mp(){const e=l(ep);if(!e)throw new Error("useOmniDesign must be used inside a <OmniDesignProvider>");return e}function gp({theme:e,surface:t,as:a="div",children:r,className:n,style:o,...i}){return de(a,{"data-theme":e,"data-surface":t,className:n,style:o,...i,children:r})}function fp({surface:e,as:t="div",children:a,className:r,style:n,...o}){return de(t,{"data-surface":e,className:r,style:n,...o,children:a})}const bp=e=>a(function(t,a){return de(q,{direction:e,ref:a,...t})}),vp={fade:a(function(e,t){return de(X,{ref:t,...e})}),grow:a(function(e,t){return de(G,{ref:t,...e})}),zoom:a(function(e,t){return de(U,{ref:t,...e})}),"slide-up":bp("up"),"slide-down":bp("down"),"slide-left":bp("left"),"slide-right":bp("right")},xp={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)"},yp={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},wp={color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6,py:3,px:3},Sp={borderTop:"1px solid var(--Border)",px:3,py:1.5,gap:1},kp={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"}},Bp={primary:{...kp,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:{...kp,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 Cp({open:e=!1,onClose:t,title:a,children:r,actions:n,maxWidth:o="sm",fullScreen:i=!1,scroll:l="body",alert:s=!1,nonModal:d=!1,transition:c,transitionDuration:u=300,titleId:p="dialog-title",contentId:m="dialog-description",className:g="",sx:f={},PaperProps:b={},...v}){const x=c?vp[c]:void 0;let y;try{y=mp()}catch{y=null}const w=y?.theme||"Default",S=y?.style||"Modern",k=y?.surface||"Surface";return ue(O,{open:e,onClose:(e,a)=>{s&&"backdropClick"===a||s&&"escapeKeyDown"===a||t?.(e,a)},maxWidth:!i&&o,fullScreen:i,fullWidth:!i,scroll:l,hideBackdrop:d,disableEnforceFocus:d,disableEscapeKeyDown:s,TransitionComponent:x,transitionDuration:u,"aria-labelledby":p,"aria-describedby":m,className:"dialog dialog-"+o+(i?" dialog-fullscreen":"")+(s?" dialog-alert":"")+(g?" "+g:""),style:{zIndex:1e7},slotProps:{backdrop:{sx:{backgroundColor:d?"transparent":"rgba(0,0,0,0.5)"}}},PaperProps:{...b,"data-theme":w,"data-style":S,"data-surface":k,sx:{...xp,...i&&{borderRadius:0,border:"none"},...b.sx},role:s?"alertdialog":"dialog"},...v,children:[a&&ue(E,{id:p,sx:yp,children:[a,!s&&t&&de(io,{"aria-label":"Close dialog",onClick:e=>t(e,"closeButton"),size:"small",variant:"ghost",sx:{color:"var(--Text-Quiet)"},children:de(Vt,{fontSize:"small"})})]}),de(Q,{dividers:"paper"===l,sx:{...wp,..."paper"===l&&{maxHeight:i?"none":"400px",overflowY:"auto",borderColor:"var(--Border)"}},children:s?de(V,{id:m,sx:{color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6},children:r}):de(h,{id:m,children:r})}),n&&de(j,{sx:Sp,children:n})]})}function Tp({open:e,onClose:t,title:a,children:r,confirmText:n="Confirm",cancelText:o="Cancel",onConfirm:i,onCancel:l,...s}){return de(Cp,{open:e,onClose:t,title:a,alert:!0,...s,actions:ue(ce,{children:[de(h,{component:"button",type:"button",onClick:l||t,sx:Bp.outline,children:o}),de(h,{component:"button",type:"button",onClick:i||t,sx:Bp.primary,children:n})]}),children:r})}function Ap({open:e,onClose:t,title:a,children:r,submitText:n="Submit",cancelText:o="Cancel",onSubmit:i,...l}){return de(Cp,{open:e,onClose:t,title:a,...l,actions:ue(ce,{children:[de(h,{component:"button",type:"button",onClick:t,sx:Bp.outline,children:o}),de(h,{component:"button",type:"button",onClick:i,sx:Bp.primary,children:n})]}),children:r})}function zp({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Ip(){const[e,a]=t(!1),[r,n]=t("sm"),[o,i]=t(!1),[l,s]=t("none"),[d,c]=t(!1),[u,p]=t(!1),[m,g]=t(null),[f,b]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Dialog"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:m,surface:f,children:de(oo,{variant:"default",onClick:()=>a(!0),children:"Open Dialog"})}),de(Zo,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"sm"!==r&&e.push('maxWidth="'+r+'"'),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}}),de(Cp,{open:e,onClose:(e,t)=>{d&&"backdropClick"===t||a(!1)},maxWidth:r,fullScreen:o,alert:d,nonModal:u,transition:"none"!==l?l:void 0,title:"Dialog Title",actions:ue(ce,{children:[de(oo,{variant:"default-outline",size:"small",onClick:()=>a(!1),children:"Cancel"}),de(oo,{variant:"default",size:"small",onClick:()=>a(!1),children:"Confirm"})]}),children:de(ur,{children:"This is the dialog content. You can put any information here that requires user attention or action."})})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:m,onThemeChange:g,surface:f,onSurfaceChange:b})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Dialog",theme:m,surface:f})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),ue(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[["xs","sm","md","lg","xl"].map(e=>de(zp,{label:e.toUpperCase(),selected:r===e,onClick:()=>{n(e),i(!1)}},e)),de(zp,{label:"Full Screen",selected:o,onClick:()=>i(!o)})]})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TRANSITION"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["none","slide-up","slide-down","grow","fade","zoom"].map(e=>{return de(zp,{label:(t=e,t?t.charAt(0).toUpperCase()+t.slice(1):""),selected:l===e,onClick:()=>s(e)},e);var t})})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Alert"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop dismiss, no Escape"})]}),de(ci,{variant:"default-outline",checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Alert mode"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Non-Modal"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop, interact with content behind"})]}),de(ci,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Non-modal"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Dialog"})})]})]})})]})]})}const Rp={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Wp={default:"Container-High",solid:"Container-High",soft:"Surface-Brightest"},Dp={small:{maxWidth:400,padding:"24px"},medium:{maxWidth:560,padding:"32px"},large:{maxWidth:720,padding:"40px"}},Fp={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 Pp(e){const t=Fp[e];if(!t)return"";const{from:a,to:r}=t.enter,n=Object.entries(a).map(([e,t])=>e+":"+t).join(";"),o=Object.entries(r).map(([e,t])=>e+":"+t).join(";");return"@keyframes "+t.name+" { from {"+n+"} to {"+o+"} }@keyframes "+t.name+"-backdrop { from { opacity: 0 } to { opacity: 1 } }"}function Lp({open:e,onClose:a,children:o,title:i,variant:l="default",color:s="primary",size:d="medium",layout:c="center",transition:u="fade",transitionSpeed:p=250,closeOnBackdrop:m=!0,showCloseButton:g=!0,className:f="",sx:b={},...v}){const x=n(null),y=n(null),[w,S]=t(!1);let k;try{k=mp()}catch{k=null}const B=k?.style||"Modern",C="soft"===l,T="solid"===l,A="fullscreen"===c,z=T||C?Rp[s]:null,I=Wp[l]||Wp.default,R=Dp[d]||Dp.medium,W=Fp[u],D=W?W.name:void 0,F=p+"ms";return r(()=>(e?(y.current=document.activeElement,S(!0),requestAnimationFrame(()=>{x.current?.focus()}),document.body.style.overflow="hidden"):(S(!1),document.body.style.overflow="",y.current?.focus()),()=>{document.body.style.overflow=""}),[e]),r(()=>{if(!e)return;const t=e=>{"Escape"===e.key&&a?.()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[e,a]),e||w?ue(ce,{children:["none"!==u&&de("style",{children:Pp(u)}),de(h,{"aria-hidden":"true",onClick:m?a:void 0,sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0,0,0,0.5)",...D&&{animation:D+"-backdrop "+F+" ease-out forwards"}}}),ue(h,{role:"dialog","aria-modal":"true","aria-label":i||"Modal",ref:x,tabIndex:-1,"data-surface":I,"data-theme":z||void 0,"data-style":B,className:"modal modal-"+l+" modal-"+d+" modal-"+c+(C||T?" modal-"+s:"")+(f?" "+f:""),sx:{position:"fixed",zIndex:10000001,outline:"none",fontFamily:"inherit",...A?{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+" "+F+" ease-out forwards"},...b},...v,children:[(i||g)&&ue(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",px:A?4:R.padding,pt:A?3:R.padding,pb:0,flexShrink:0},children:[i&&de(h,{sx:{fontSize:"small"===d?"18px":"large"===d?"24px":"20px",fontWeight:700,color:"var(--Text)",flex:1},children:i}),g&&de(h,{component:"button",type:"button","aria-label":"Close modal",onClick:a,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:de(Vt,{sx:{fontSize:20}})})]}),de(h,{sx:{flex:1,overflowY:"auto",px:A?4:R.padding,pt:A?3:"16px",pb:A?3:R.padding,color:"var(--Text)",fontSize:"small"===d?"13px":"14px",lineHeight:1.6},children:o})]})]}):null}const Hp={small:{width:"240px",height:"200px"},medium:{width:"320px",height:"280px"},large:{width:"420px",height:"380px"}},Np={left:{borderRight:"1px solid var(--Border)"},right:{borderLeft:"1px solid var(--Border)"},top:{borderBottom:"1px solid var(--Border)"},bottom:{borderTop:"1px solid var(--Border)"}},Mp={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}},Op={left:"translateX(-100%)",right:"translateX(100%)",top:"translateY(-100%)",bottom:"translateY(100%)"};function Ep({children:e,open:t=!1,onClose:a,size:i="medium",anchor:l="left",hideBackdrop:s=!1,className:d="",sx:c={},...u}){const p=n(null),m=n(null),g="left"===l||"right"===l;let f;try{f=mp()}catch{f=null}const b=f?.theme||"Default",v=f?.style||"Modern",x=Hp[i]||Hp.medium;r(()=>{if(!t)return;const e=e=>{"Escape"===e.key&&a?.()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[t,a]),r(()=>{t?(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)},[t]),r(()=>{if(t){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}},[t]);const y=o(e=>{if("Tab"!==e.key||!p.current)return;const t=p.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(!t.length)return;const a=t[0],r=t[t.length-1];e.shiftKey?document.activeElement===a&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),a.focus())},[]);return t?ue(ce,{children:[!s&&de(h,{onClick:()=>a?.(),"aria-hidden":"true",sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0, 0, 0, 0.5)",transition:"opacity 0.3s ease"}}),de(h,{ref:p,role:"dialog","aria-modal":"true",tabIndex:-1,"data-theme":b,"data-style":v,"data-surface":"Surface-Dim",onKeyDown:y,className:"drawer drawer-"+i+" drawer-"+l+" "+d,sx:{position:"fixed",zIndex:10000001,...Mp[l],...g?{width:x.width,height:"100%"}:{height:x.height,width:"100%"},backgroundColor:"var(--Background)",color:"var(--Text)",...Np[l],boxShadow:Fn,display:"flex",flexDirection:"column",outline:"none",overflow:"hidden",animation:"drawer-slide-in 0.3s ease forwards","@keyframes drawer-slide-in":{from:{transform:Op[l]},to:{transform:"translate(0, 0)"}},...c},...u,children:e})]}):null}function Qp({onClick:e,className:t="",sx:a={},...r}){return de(h,{sx:{position:"absolute",top:"12px",right:"12px",zIndex:1,...a},className:t,...r,children:de(oo,{iconOnly:!0,variant:"ghost",size:"small",onClick:e,"aria-label":"Close drawer",children:de(un,{size:"small",children:de(Vt,{})})})})}function Vp({children:e,className:t="",sx:a={},...r}){return de(h,{className:"drawer-header "+t,sx:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px",borderBottom:"1px solid var(--Border)",flexShrink:0,...a},...r,children:e})}function jp({children:e,className:t="",sx:a={},...r}){return de(h,{className:"drawer-content "+t,sx:{flex:1,overflowY:"auto",padding:"16px",...a},...r,children:e})}const Up={compact:{minHeight:"24px",fontSize:"13px",iconSize:16,gap:"6px"},default:{minHeight:"32px",fontSize:"14px",iconSize:18,gap:"8px"}},Gp={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)"},Xp={"@keyframes omni-tree-slide":{from:{opacity:0,transform:"translateY(-4px)"},to:{opacity:1,transform:"none"}}};function qp(e,t,a=1,r=[]){return e.forEach((n,o)=>{r.push({item:n,level:a,index:o,siblings:e.length}),n.children?.length&&t.includes(n.id)&&qp(n.children,t,a+1,r)}),r}function Yp(e,t,a=null){for(const r of e){if(r.id===t)return a;if(r.children?.length){const e=Yp(r.children,t,r.id);if(null!=e)return e;if(null===e&&r.children.some(e=>e.id===t))return r.id}}return null}function Zp({node:e,density:t,expanded:a,selected:r,focusedId:n,multiSelect:o,checkboxSelection:i,disableSelection:l,disabledItemsFocusable:s,collapseIcon:d,expandIcon:c,animation:u,onToggle:p,onSelect:m,onFocusItem:g,registerRef:f}){const{item:b,level:v,index:x,siblings:y}=e,w=Up[t]||Up.default,S="compact"===t?xr:sr,k=!!b.children?.length,B=k&&a.includes(b.id),C=r.includes(b.id),T=!!b.disabled,A=!T||s;return ue(h,{component:"li",role:"treeitem","aria-expanded":k?B:void 0,"aria-selected":l?void 0:C,"aria-disabled":T||void 0,"aria-level":v,"aria-setsize":y,"aria-posinset":x+1,tabIndex:n===b.id&&A?0:-1,ref:e=>f(b.id,e),onFocus:e=>{e.stopPropagation(),g(b.id)},sx:{outline:"none",listStyle:"none",...b.sx||{}},children:[ue(h,{className:"omni-tree-content",onClick:e=>{T||(e.stopPropagation(),k&&p(e,b.id),l||m(e,b.id))},sx:{display:"flex",alignItems:"center",gap:w.gap,minHeight:w.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:[de(h,{"aria-hidden":"true",sx:{width:w.iconSize,height:w.iconSize,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",color:"inherit"},children:k&&(B?d:c)}),i&&!l&&de(ol,{checked:C,disabled:T,size:"small","aria-hidden":"true",tabIndex:-1,onChange:()=>{}}),b.icon&&de(un,{size:"small",sx:{color:"inherit",flexShrink:0},children:b.icon}),de(S,{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:"inherit",fontWeight:"inherit"},children:b.label}),b.badge&&de(h,{sx:{flexShrink:0},children:b.badge})]}),k&&B&&de(h,{component:"ul",role:"group",sx:{margin:0,padding:0,paddingLeft:"8px",marginLeft:"12px",borderLeft:"1px solid var(--Border)",listStyle:"none",animation:Gp[u]},children:b.children.map((e,h)=>de(Zp,{node:{item:e,level:v+1,index:h,siblings:b.children.length},density:t,expanded:a,selected:r,focusedId:n,multiSelect:o,checkboxSelection:i,disableSelection:l,disabledItemsFocusable:s,collapseIcon:d,expandIcon:c,animation:u,onToggle:p,onSelect:m,onFocusItem:g,registerRef:f},e.id))})]})}function Jp({color:e="default",variant:a="solid",surface:r,density:i="default",animation:l="slide",selectionStyle:s,items:d=$p,selectionMode:c="single",checkboxSelection:p=!1,disableSelection:m=!1,disabledItemsFocusable:g=!1,defaultExpandedItems:f,expandedItems:b,onExpandedItemsChange:v,selectedItems:x,onSelectedItemsChange:y,onItemExpansionToggle:w,onItemSelectionToggle:S,slots:k,"aria-label":B="Tree view",className:C="",sx:T={},...A}){const z=s||a,I="multi"===c,[R,W]=t(f||[]),D=void 0!==b?b:R,[F,P]=t(x||(I?[]:null)),L=void 0!==x?x:F,H=Array.isArray(L)?L:L?[L]:[],N=u(()=>qp(d,D),[d,D]),[M,O]=t(null),E=M??N[0]?.item.id??null,Q=n({}),V=o((e,t)=>{t?Q.current[e]=t:delete Q.current[e]},[]),j=o(e=>{O(e),Q.current[e]?.focus()},[]),U=o((e,t)=>{const a=D.includes(t),r=a?D.filter(e=>e!==t):[...D,t];void 0===b&&W(r),v?.(e,r),w?.(e,t,!a)},[D,b,v,w]),G=o((e,t)=>{const a=H.includes(t),r=I?a?H.filter(e=>e!==t):[...H,t]:[t],n=I?r:r[0]??null;void 0===x&&P(n),y?.(e,n),S?.(e,t,!I||!a)},[H,I,x,y,S]),X=o(e=>{const t=N.filter(e=>!e.item.disabled||g),a=t.findIndex(e=>e.item.id===E),r=t[a];if(!r)return;const{item:n}=r,o=!!n.children?.length,i=o&&D.includes(n.id),l=a=>{const r=t[Math.max(0,Math.min(t.length-1,a))];r&&(e.preventDefault(),j(r.item.id))};switch(e.key){case"ArrowDown":l(a+1);break;case"ArrowUp":l(a-1);break;case"Home":l(0);break;case"End":l(t.length-1);break;case"ArrowRight":o&&!i?(e.preventDefault(),U(e,n.id)):i&&l(a+1);break;case"ArrowLeft":if(i)e.preventDefault(),U(e,n.id);else{const t=Yp(d,n.id);t&&(e.preventDefault(),j(t))}break;case"Enter":case" ":e.preventDefault(),m?o&&U(e,n.id):G(e,n.id)}},[N,E,D,d,g,m,j,U,G]),q=(Y=e).charAt(0).toUpperCase()+Y.slice(1);var Y;const Z="default"===z?void 0:q,J=r||("light"===z?"Surface-Brightest":"Surface-Dim"),$=k?.collapseIcon?de(k.collapseIcon,{}):de(un,{size:"small",sx:{color:"inherit",transform:"rotate(90deg)"},children:de(Lt,{})}),K=k?.expandIcon?de(k.expandIcon,{}):de(un,{size:"small",sx:{color:"inherit"},children:de(Lt,{})});return de(h,{"data-theme":Z,"data-surface":J,className:"omni-treeview omni-treeview-"+z+" omni-treeview-"+e+" omni-treeview-"+i+(C?" "+C:""),sx:{backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",...Xp,...T},children:de(h,{component:"ul",role:"tree","aria-label":B,"aria-multiselectable":I||void 0,onKeyDown:X,sx:{margin:0,padding:"8px",listStyle:"none",fontFamily:"inherit"},...A,children:d.map((e,t)=>de(Zp,{node:{item:e,level:1,index:t,siblings:d.length},density:i,expanded:D,selected:H,focusedId:E,multiSelect:I,checkboxSelection:p,disableSelection:m,disabledItemsFocusable:g,collapseIcon:$,expandIcon:K,animation:l,onToggle:U,onSelect:G,onFocusItem:O,registerRef:V},e.id))})})}const $p=[{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"}],Kp=e=>de(Jp,{variant:"solid",...e}),_p=e=>de(Jp,{variant:"light",...e}),em=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",tm=[{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 am({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function rm(){const[e,a]=t(!1),[r,n]=t("medium"),[o,i]=t("left"),[l,s]=t(null),[d,c]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Drawer"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:l,surface:d,children:de(oo,{variant:"default",onClick:()=>a(!0),children:"Open Drawer"})}),de(Zo,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"medium"!==r&&e.push('size="'+r+'"'),"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}}),ue(Ep,{open:e,onClose:()=>a(!1),size:r,anchor:o,children:[ue(Vp,{children:[de(_a,{children:"Navigation"}),de(Qp,{onClick:()=>a(!1)})]}),de(jp,{children:de(Jp,{items:tm,variant:"solid",color:"default",defaultExpandedItems:["products"],sx:{border:"none",borderRadius:0}})})]})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:l,onThemeChange:s,surface:d,onSurfaceChange:c})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Drawer",theme:l,surface:d})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(am,{label:em(e),selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["left","right","top","bottom"].map(e=>de(am,{label:em(e),selected:o===e,onClick:()=>i(e)},e))})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Drawer"})})]})]})})]})]})}const nm={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 om({onFiles:e,accept:a,multiple:r=!1,size:i="medium",disabled:l=!1,icon:s,label:d,sublabel:c,children:u,className:p="",sx:m={},...g}){const[f,b]=t(!1),v=n(null),x=n(0),y=nm[i]||nm.medium,w=o(t=>{!l&&t?.length&&e?.(Array.from(t))},[l,e]),S=o(e=>{e.preventDefault(),e.stopPropagation(),x.current=0,b(!1),l||w(e.dataTransfer.files)},[l,w]),k=o(e=>{e.preventDefault(),e.stopPropagation()},[]),B=o(e=>{e.preventDefault(),e.stopPropagation(),x.current++,l||b(!0)},[l]),C=o(e=>{e.preventDefault(),e.stopPropagation(),x.current--,0===x.current&&b(!1)},[]),T=o(()=>{l||v.current?.click()},[l]),A=o(e=>{l||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),v.current?.click())},[l]),z=o(e=>{w(e.target.files),e.target.value=""},[w]),I=s||na,R=r?"Drag and drop files here":"Drag and drop file here";return ue(h,{role:"button",tabIndex:l?-1:0,"aria-label":d||R,"aria-disabled":l||void 0,onClick:T,onKeyDown:A,onDrop:S,onDragOver:k,onDragEnter:B,onDragLeave:C,className:"drop-zone drop-zone-"+i+(f?" 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:f?"var(--Buttons-Primary-Border)":"var(--Buttons-Default-Border)",borderRadius:"32px",backgroundColor:f?"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},...g,children:[de("input",{ref:v,type:"file",accept:a,multiple:r,onChange:z,style:{display:"none"},"aria-hidden":"true",tabIndex:-1}),u||ue(ce,{children:[de(I,{sx:{fontSize:y.iconSize,color:"var(--Text-Quiet)"}}),de(sr,{style:{color:"var(--Text)"},children:d||R}),de(xr,{style:{color:"var(--Text-Quiet)"},children:c||"or click to browse"})]})]})}const im={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 lm=!1;function sm({children:e,open:t=!1,onClose:a,variant:i="light",surface:l,color:s="info",size:d="medium",anchor:c="bottom",autoHideDuration:u,startDecorator:p,endDecorator:m,action:g,className:f="",sx:b={},...v}){const x=n(null),y=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===s?"Default":s),w=im[d]||im.medium,S="small"===d?sr:ur,k="default"===s?"Default":y;"production"===process.env.NODE_ENV||"solid"!==i||lm||(lm=!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 B=l||"Surface-Brightest",C="var(--Buttons-"+y+"-Border)";r(()=>{if(t&&u&&u>0)return x.current=setTimeout(()=>{a?.({},"timeout")},u),()=>clearTimeout(x.current)},[t,u,a]),r(()=>{if(!t)return;const e=e=>{"Escape"===e.key&&a?.(e,"escapeKeyDown")};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[t,a]);const T=o(()=>{x.current&&clearTimeout(x.current)},[]),A=o(()=>{t&&u&&u>0&&(x.current=setTimeout(()=>{a?.({},"timeout")},u))},[t,u,a]),z="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 t?de(h,{role:"alert","aria-live":"polite","aria-atomic":"true",onMouseEnter:T,onMouseLeave:A,className:"snackbar snackbar-"+i+" snackbar-"+d+" snackbar-"+c+" snackbar-"+s+" "+f,sx:{position:"fixed",left:"50%",transform:"translateX(-50%)",..."top"===c?{top:"var(--SnackBar-Top, 24px)"}:{bottom:"var(--SnackBar-Bottom, 24px)"},zIndex:1400,minWidth:w.minWidth,maxWidth:"min(560px, calc(100vw - 32px))",border:"1px solid "+C,borderRadius:"var(--Style-Border-Radius)",boxShadow:Fn,overflow:"hidden",animation:"snackbar-slide-in 0.3s ease forwards","@keyframes snackbar-slide-in":z,...b},...v,children:ue(h,{"data-theme":k,"data-surface":B,sx:{display:"flex",alignItems:"center",gap:w.gap,padding:w.py+" "+w.px,fontSize:w.fontSize,fontFamily:"inherit",lineHeight:1.4,color:"var(--Text)",backgroundColor:"var(--Background)",borderRadius:"calc(var(--Style-Border-Radius) - 1px)"},children:[p&&de(h,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:p}),de(h,{sx:{flex:1,minWidth:0},children:"string"==typeof e?de(S,{children:e}):e}),g&&de(h,{sx:{display:"inline-flex",flexShrink:0},children:g}),m&&de(h,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:m}),a&&de(oo,{iconOnly:!0,variant:"ghost",size:"small",onClick:e=>a(e,"closeClick"),"aria-label":"Close notification",sx:{flexShrink:0,ml:"4px"},children:de(un,{size:"small",children:de(Vt,{})})})]})}):null}const dm=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",cm=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],um={info:de(ke,{}),success:de(Be,{}),warning:de(Ce,{}),error:de(Te,{})};function hm({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function pm({color:e,selected:t,onClick:a}){const r=dm(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function mm(){const[e,a]=t("light"),[r,n]=t("info"),[o,i]=t("medium"),[l,s]=t("bottom"),[d,c]=t(!0),[u,p]=t(!0),[m,g]=t(!1),[f,b]=t(null),[v,x]=t("Surface"),y=d&&um[r]?de(un,{size:"small",sx:{color:"inherit"},children:um[r]}):void 0;return ue(h,{sx:{pb:8},children:[de($a,{children:"Snackbar"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:f,surface:v,children:de(oo,{variant:"default",onClick:()=>g(!0),children:"Show Snackbar"})}),de(Zo,{code:(()=>{const t=["open={open}"];return t.push('variant="'+e+'"'),"info"!==r&&t.push('color="'+r+'"'),"medium"!==o&&t.push('size="'+o+'"'),"bottom"!==l&&t.push('anchor="top"'),u&&t.push("onClose={handleClose}"),d&&um[r]&&t.push("startDecorator={<Icon><"+dm(r)+"Icon /></Icon>}"),"<Snackbar\n "+t.join("\n ")+"\n>\n Operation completed successfully.\n</Snackbar>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),de(sm,{open:m,onClose:u?()=>g(!1):void 0,variant:e,color:r,size:o,anchor:l,autoHideDuration:4e3,startDecorator:y,children:"Operation completed successfully."})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:f,onThemeChange:b,surface:v,onSurfaceChange:x})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Snackbar",theme:f,surface:v})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),de(S,{direction:"row",spacing:1,children:["solid","light"].map(t=>de(hm,{label:dm(t),selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:cm.map(e=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>de(pm,{color:e,selected:r===e,onClick:n},e))})]},e.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(hm,{label:dm(e),selected:o===e,onClick:()=>i(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),de(S,{direction:"row",spacing:1,children:["top","bottom"].map(e=>de(hm,{label:dm(e),selected:l===e,onClick:()=>s(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Show Icon"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),de(ci,{variant:"default-outline",checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Show icon"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Close Button"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show dismiss button"})]}),de(ci,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Close button"})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"Snackbar"})})]})]})})]})]})}const gm={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",white:"Neutral",black:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},fm={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 bm({value:e,color:t="primary",size:a="medium",thickness:r,showValue:n=!1,children:o,className:l="",sx:s={},...d}){const c=gm[t]||"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"}:fm[a]||fm.medium,p=r||u.thickness,m=null!=e,g=m?Math.min(100,Math.max(0,e)):0,f=(u.diameter-p)/2,b=2*Math.PI*f,v=m?b-g/100*b:.75*b,x="var(--Buttons-"+c+"-Border)",y="cp-grad-"+i().replace(/:/g,"");return ue(h,{role:"progressbar","aria-valuenow":m?Math.round(g):void 0,"aria-valuemin":m?0:void 0,"aria-valuemax":m?100:void 0,"aria-label":m?Math.round(g)+"% progress":"Loading",className:"circular-progress circular-progress-"+a+" circular-progress-"+t+(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:[ue("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:[de("defs",{children:ue("linearGradient",{id:y,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[de("stop",{offset:"0%",stopColor:x,stopOpacity:"0"}),de("stop",{offset:"100%",stopColor:x,stopOpacity:"1"})]})}),de("circle",{cx:u.diameter/2,cy:u.diameter/2,r:f,fill:"none",stroke:"var(--Border-Variant)",strokeWidth:p,className:"circular-progress-track"}),de("circle",{cx:u.diameter/2,cy:u.diameter/2,r:f,fill:"none",stroke:"url(#"+y+")",strokeWidth:p,strokeDasharray:b,strokeDashoffset:v,strokeLinecap:"round",className:"circular-progress-indicator",style:{transition:m?"stroke-dashoffset 0.4s ease":"none"}})]}),(n||o)&&m&&de(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:o||Math.round(g)+"%"})]})}const vm=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",xm=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function ym({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function wm({color:e,selected:t,onClick:a}){const r=vm(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Sm(){const[e,a]=t("default"),[r,n]=t("medium"),[o,i]=t(!1),[l,s]=t(65),[d,c]=t(!1),[u,p]=t(null),[m,g]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Circular Progress"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:u,children:de(bm,{color:e,size:r,value:o?l:void 0,showValue:o&&d})}),de(Zo,{code:(()=>{const t=[];return"default"!==e&&t.push('color="'+e+'"'),"medium"!==r&&t.push('size="'+r+'"'),o&&(t.push("value={"+l+"}"),d&&t.push("showValue")),0===t.length?"<CircularProgress />":"<CircularProgress\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:u,onThemeChange:p,surface:m,onSurfaceChange:g})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"CircularProgress",theme:u,surface:m})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:xm.map(t=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:t.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:t.colors.map(t=>de(wm,{color:t,selected:e===t,onClick:a},t))})]},t.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(ym,{label:vm(e),selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Determinate"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static arc at a specific value"})]}),de(ci,{checked:o,onChange:e=>i(e.target.checked),size:"small","aria-label":"Determinate"})]}),o&&ue(ce,{children:[de(h,{sx:{mt:2},children:de($l,{label:"Value",min:0,max:100,value:l,onChange:(e,t)=>s(t),size:"small",valueLabelDisplay:"auto"})}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Show Label"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Center percentage text"})]}),de(ci,{checked:d,onChange:e=>c(e.target.checked),size:"small","aria-label":"Show label"})]})]})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:ue(S,{spacing:3,children:[ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),ue(S,{spacing:0,children:[ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Role:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="progressbar"'})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Determinate:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-valuenow, aria-valuemin="0", aria-valuemax="100"'})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Indeterminate:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-label="Loading" (no value attributes)'})]}),ue(h,{sx:{py:1.5},children:[de(sr,{children:"Label:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"Center percentage label is aria-hidden — screen readers use aria-valuenow."})]})]})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Token Reference"}),ue(S,{spacing:0,children:[ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Track (back circle):"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Border-Variant)"})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Fill (progress arc):"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Buttons-{Color}-Border)"})]}),ue(h,{sx:{py:1.5},children:[de(sr,{children:"Center label:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]})]})]})]})})}),de(Ti,{value:3,children:de(pd,{component:"CircularProgress"})})]})]})})]})]})}const km={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Bm={small:{height:"4px",borderRadius:"2px"},medium:{height:"6px",borderRadius:"3px"},large:{height:"8px",borderRadius:"4px"}};function Cm({value:e,color:t="primary",size:a="medium",className:r="",sx:n={},...o}){const i=km[t]||"Primary",l=Bm[a]||Bm.medium,s=null!=e,d=s?Math.min(100,Math.max(0,e)):0,c="var(--Buttons-"+i+"-Border)";return de(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-"+a+" linear-progress-"+t+(s?" linear-progress-determinate":" linear-progress-indeterminate")+" "+r,sx:{position:"relative",width:"100%",height:l.height,borderRadius:l.borderRadius,backgroundColor:"var(--Border-Variant)",overflow:"hidden",flexShrink:0,...n},...o,children:de(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 Tm=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Am=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function zm({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Im({color:e,selected:t,onClick:a}){const r=Tm(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Rm(){const[e,a]=t("default"),[r,n]=t("medium"),[o,i]=t(!1),[l,s]=t(65),[d,c]=t(null),[u,p]=t("Surface");return ue(h,{sx:{pb:8},children:[de($a,{children:"Linear Progress"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:d,surface:u,children:de(h,{sx:{width:"100%",maxWidth:400},children:de(Cm,{color:e,size:r,value:o?l:void 0})})}),de(Zo,{code:(()=>{const t=[];return"default"!==e&&t.push('color="'+e+'"'),"medium"!==r&&t.push('size="'+r+'"'),o&&t.push("value={"+l+"}"),0===t.length?"<LinearProgress />":"<LinearProgress\n "+t.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:d,onThemeChange:c,surface:u,onSurfaceChange:p})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"LinearProgress",theme:d,surface:u})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:Am.map(t=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:t.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:t.colors.map(t=>de(Im,{color:t,selected:e===t,onClick:a},t))})]},t.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),de(S,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>de(zm,{label:Tm(e),selected:r===e,onClick:()=>n(e)},e))})]}),ue(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Determinate"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static bar at a specific value"})]}),de(ci,{variant:"default-outline",checked:o,onChange:e=>i(e.target.checked),size:"small","aria-label":"Determinate"})]}),o&&de(h,{sx:{mt:2},children:de($l,{label:"Value",min:0,max:100,value:l,onChange:(e,t)=>s(t),size:"small",valueLabelDisplay:"auto"})})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:de(S,{spacing:3,children:ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})})})}),de(Ti,{value:3,children:de(pd,{component:"LinearProgress"})})]})]})})]})]})}const Wm={small:16,medium:24,large:32};function Dm({theme:e,surface:t,size:a="medium",color:r="primary",message:n="Loading...",sx:o={},"aria-label":i="Loading","aria-labelledby":l,...s}){return ue(S,{alignItems:"center",justifyContent:"center",spacing:2,sx:{py:4,...o},...s,"data-theme":e||void 0,"data-surface":t||void 0,children:[de(bm,{size:"number"==typeof a?a:Wm[a]??Wm.medium,color:r,"aria-label":l?void 0:i,"aria-labelledby":l}),n&&de(P,{sx:{color:"var(--Text-Secondary)",fontWeight:500},children:n})]})}function Fm({value:e,label:t,sx:a={},...r}){return ue(S,{spacing:1,sx:{...a},...r,children:[t&&ue(S,{direction:"row",justifyContent:"space-between",children:[de(P,{variant:"body2",sx:{color:"var(--Text)",fontWeight:500},children:t}),void 0!==e&&ue(P,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:[e,"%"]})]}),de(Y,{variant:void 0!==e?"determinate":"indeterminate",value:e,sx:{backgroundColor:"var(--Border-Variant)","& .MuiLinearProgress-bar":{backgroundColor:"var(--Primary-Color-11)"},height:4,borderRadius:2}})]})}function Pm({rows:e=3,height:t=100,spacing:a=2,sx:r={},...n}){return de(S,{spacing:a,sx:{...r},...n,children:Array.from({length:e}).map((e,a)=>de(Z,{variant:"rectangular",height:t,sx:{backgroundColor:"var(--Container-Low)",borderRadius:"8px"}},a))})}function Lm({message:e="Loading",sx:t={},...a}){return ue(S,{alignItems:"center",justifyContent:"center",spacing:2,sx:{py:4,...t},...a,children:[de(h,{sx:{display:"flex",gap:1},children:[0,1,2].map(e=>de(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Primary-Color-11)",animation:"pulse 1.4s infinite",animationDelay:.2*e+"s","@keyframes pulse":{"0%":{opacity:1},"50%":{opacity:.5},"100%":{opacity:1}}}},e))}),e&&de(P,{sx:{color:"var(--Text-Secondary)",fontWeight:500},children:e})]})}function Hm({message:e="Loading page...",size:t=60,sx:a={},...r}){return de(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",minHeight:"100vh",backgroundColor:"var(--Background)",...a},...r,children:de(Dm,{size:t,message:e})})}function Nm({lines:e=3,showImage:t=!0,sx:a={},...r}){return de(M,{sx:{p:2,backgroundColor:"var(--Container)",...a},...r,children:ue(S,{spacing:2,children:[t&&de(Z,{variant:"rectangular",height:200,sx:{backgroundColor:"var(--Container-Low)",borderRadius:1}}),de(S,{spacing:1,children:Array.from({length:e}).map((e,t)=>de(Z,{variant:"text",height:0===t?24:16,sx:{backgroundColor:"var(--Container-Low)"}},t))})]})})}function Mm({isLoading:e=!1,message:t="Loading...",children:a,sx:r={},...n}){return ue(h,{sx:{position:"relative",...r},...n,children:[a,e&&de(h,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.3)",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"inherit",zIndex:1e3,backdropFilter:"blur(4px)"},children:de(Dm,{size:40,message:t})})]})}const Om={eyebrow:Ar,title:ur,secondary:dr},Em={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Qm={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 Vm({children:e,size:t="medium",isButton:a=!1,onAction:r,ariaLabel:n}){return de(h,a?{component:"button",role:"button",tabIndex:0,"aria-label":n||"Action",onClick:e=>{e.stopPropagation(),r?.(e)},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),r?.(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 jm({children:e,startDecorator:t,endDecorator:a,startDecoratorIsButton:r=!1,endDecoratorIsButton:n=!1,onStartDecoratorAction:o,onEndDecoratorAction:i,startDecoratorAriaLabel:l,endDecoratorAriaLabel:s,size:d="medium",variant:c="default",color:u,eyebrow:p,overline:m,secondary:g,clickable:f=!1,disabled:b=!1,selected:v=!1,selectionMode:x="none",onSelect:y,onClick:w,bottomBorder:S=!1,rightBorder:k=!1,sx:B={},...T}){const A=Qm[d]||Qm.medium,z=f||!!w,R="checkbox"===x||"radio"===x,W=(z||R)&&!b,D=e=>{b||(R&&y?.(e),w?.(e))};return ue(h,{component:"li",role:R?"option":z?"button":"listitem",tabIndex:W?0:void 0,"aria-disabled":b||void 0,"aria-selected":R?v:v||void 0,"aria-checked":"checkbox"===x?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":"")+(z?" list-item-clickable":"")+(R?" 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:A.py,px:A.px,minHeight:"32px",fontSize:A.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",...z?{border:"1px solid var(--Border)",boxShadow:"var(--Effect-Level-1)",padding:"var(--Sizing-1)",borderRadius:"var(--Input-Radius)"}:{},...!z&&S?{borderBottom:"1px solid var(--Border-Variant)"}:{},...!z&&k?{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"},...B},...T,children:["checkbox"===x&&de(C,{checked:v,disabled:b,size:A.checkSize,tabIndex:-1,onClick:e=>e.stopPropagation(),onChange:()=>y?.(),sx:{p:0,mr:0,color:"inherit","&.Mui-checked":{color:"inherit"}},inputProps:{"aria-label":"Select "+("string"==typeof e?e:"item")}}),"radio"===x&&de(I,{checked:v,disabled:b,size:A.checkSize,tabIndex:-1,onClick:e=>e.stopPropagation(),onChange:()=>y?.(),sx:{p:0,mr:0,color:"inherit","&.Mui-checked":{color:"inherit"}},inputProps:{"aria-label":"Select "+("string"==typeof e?e:"item")}}),t&&de(Vm,{size:d,isButton:r,onAction:o,ariaLabel:l,children:t}),(()=>{const t=Om,a=p??m,r={display:"block",width:"100%",wordBreak:"break-word",overflowWrap:"anywhere"};return ue(h,{sx:{flex:"1 1 auto",width:"100%",minWidth:0,display:"flex",flexDirection:"column",gap:0},children:[a&&de(t.eyebrow,{style:{...r,color:"var(--Quiet)"},children:a}),null!=e&&de(t.title,{style:{...r,color:"var(--Text)"},children:e}),g&&de(t.secondary,{style:{...r,color:"var(--Quiet)"},children:g})]})})(),a&&de(Vm,{size:d,isButton:n,onAction:i,ariaLabel:s,children:a})]})}function Um({children:t,items:a,variant:r="default",color:n="primary",size:o="medium",orientation:i="vertical",dividers:l=!1,selectionMode:s="none",loading:d=!1,skeletonRows:c=3,empty:u,error:p,selectedIndices:m=[],onSelectionChange:g,clickable:f=!1,component:b="ul",className:v="",sx:x={},...y}){const w="horizontal"===i,S="checkbox"===s||"radio"===s,k="light"===r,B="default"===r,C={};("solid"===r||k)&&Em[n]&&(C["data-theme"]=Em[n],k&&(C["data-surface"]="Surface-Brightest"));const T=p?"error":d?"loading":a&&0===a.length&&u?"empty":null;return de(h,{component:b,role:S?"listbox":"list","aria-busy":"loading"===T?"true":void 0,"aria-multiselectable":"checkbox"===s||void 0,...C,className:"list-container list-"+r+" list-"+n+" "+v,sx:{display:"flex",flexDirection:w?"row":"column",boxSizing:"border-box",alignItems:"stretch",gap:f?"var(--Sizing-1)":0,m:0,p:B?0:1,backgroundColor:B?"transparent":"var(--Background)",color:"var(--Text)",borderRadius:B?0:"var(--Style-Border-Radius)",width:"100%",listStyle:"none",...w?{"& > .list-item":{flex:"1 1 0",width:"auto"}}:{},...x},...y,children:(()=>{if("loading"===T)return de(h,{component:"li",sx:{listStyle:"none"},children:de(Sa,{label:"Loading",children:Array.from({length:c}).map((e,t)=>de(jm,{size:o,variant:r,color:n,children:"        "},"sk-"+t))})});if("error"===T)return de(h,{component:"li",sx:{listStyle:"none"},children:p});if("empty"===T)return de(h,{component:"li",sx:{listStyle:"none"},children:u});if(a&&a.length>0){const e=[];return a.forEach((t,i)=>{e.push(de(jm,{size:o,variant:r,color:n,startDecorator:t.startDecorator,endDecorator:t.endDecorator,startDecoratorIsButton:t.startDecoratorIsButton,endDecoratorIsButton:t.endDecoratorIsButton,onStartDecoratorAction:t.onStartDecoratorAction,onEndDecoratorAction:t.onEndDecoratorAction,startDecoratorAriaLabel:t.startDecoratorAriaLabel,endDecoratorAriaLabel:t.endDecoratorAriaLabel,eyebrow:t.eyebrow??t.overline,secondary:t.secondary,clickable:f||t.clickable,disabled:t.disabled,bottomBorder:t.bottomBorder,rightBorder:t.rightBorder,selected:S?m.includes(i):t.selected,selectionMode:s,onSelect:()=>(e=>{if(g)if("radio"===s)g([e]);else{const t=m.includes(e)?m.filter(t=>t!==e):[...m,e];g(t)}})(i),onClick:t.onClick,children:t.label||t.children},"item-"+i)),l&&i<a.length-1&&e.push(de(h,{component:"li",role:"separator","aria-hidden":"true",sx:w?{width:"1px",alignSelf:"stretch",backgroundColor:"var(--Border)",flexShrink:0}:{height:"1px",backgroundColor:"var(--Border)"}},"div-"+i))}),e}if(t){const a=e.Children.toArray(t);if(!l)return a;const r=[];return a.forEach((e,t)=>{r.push(e),t<a.length-1&&r.push(de(h,{component:"li",role:"separator","aria-hidden":"true",sx:w?{width:"1px",alignSelf:"stretch",backgroundColor:"var(--Border)",flexShrink:0}:{height:"1px",backgroundColor:"var(--Border)"}},"div-"+t))}),r}return null})()})}const Gm={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Xm={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 qm({children:e,columns:t,rows:a,footerRows:r,variant:n="default",color:o="primary",loading:i=!1,skeletonRows:l=3,empty:s,error:d,size:c="medium",stripe:u="none",stickyHeader:p=!1,stickyFooter:m=!1,className:g="",sx:f={},...b}){const v=Xm[c]||Xm.medium,x="solid"===n,y="outlined"===n,w="light"===n,S=(e=>e.charAt(0).toUpperCase()+e.slice(1))(o),k=y?"1px solid var(--Buttons-"+S+"-Border)":"none",B={};x&&Gm[o]&&(B["data-theme"]=Gm[o]);const C=()=>{const e={fontWeight:600,fontSize:v.headerFontSize,textAlign:"left",padding:v.py+" "+v.px,borderBottom:"2px solid var(--Border)",color:"var(--Text)",whiteSpace:"nowrap"};return w?(e.backgroundColor="var(--Buttons-"+S+"-Button)",e.color="var(--Buttons-"+S+"-Text)"):e.backgroundColor=x?"var(--Hover)":"var(--Background)",p&&(e.position="sticky",e.top=0,e.zIndex=2),e},T=()=>{const e={fontWeight:600,fontSize:v.headerFontSize,textAlign:"left",padding:v.py+" "+v.px,borderTop:"2px solid var(--Border)",color:"var(--Text)",whiteSpace:"nowrap"};return w?(e.backgroundColor="var(--Buttons-"+S+"-Button)",e.color="var(--Buttons-"+S+"-Text)"):e.backgroundColor=x?"var(--Hover)":"var(--Background)",m&&(e.position="sticky",e.bottom=0,e.zIndex=2),e},A=e=>"none"===u?"Surface":"odd"===u?e%2==0?"Surface":"Surface-Dim":"even"===u&&e%2==0?"Surface-Dim":"Surface",z=()=>({padding:v.py+" "+v.px,fontSize:v.fontSize,color:"var(--Text)",borderBottom:"1px solid var(--Border)",textAlign:"left"}),I=d?"error":i?"loading":a&&0===a.length&&s?"empty":null,R=Boolean(r&&r.length>0)&&"error"!==I,W=e=>de(h,{component:"tbody",children:de(h,{component:"tr",children:de(h,{component:"td",colSpan:t?t.length:1,sx:{padding:0,border:"none"},children:e})})});return de(h,{className:"table-wrapper table-"+n+(x||w||y?" table-"+o:"")+" "+g,...B,"aria-busy":"loading"===I?"true":void 0,sx:{width:"100%",overflow:"auto",border:k,borderRadius:y||w?"var(--Style-Border-Radius)":0,...f},children:de(h,{component:"table",sx:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed",fontFamily:"inherit","& thead th":C(),"& tbody td":z(),"& 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}}:{}},...b,children:t&&a?t&&(a||I)?ue(ce,{children:[de(h,{component:"thead",children:de(h,{component:"tr",children:t.map((e,t)=>de(h,{component:"th",sx:{...C(),...e.width?{width:e.width}:{},...e.align?{textAlign:e.align}:{}},children:e.label||e.header||e},"h-"+t))})}),"loading"===I&&W(de(Sa,{label:"Loading",children:de(h,{component:"table",sx:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed"},children:de(h,{component:"tbody",children:Array.from({length:l}).map((e,a)=>de(h,{component:"tr","data-surface":A(a),children:t.map((e,t)=>de(h,{component:"td",sx:z(),children:"        "},"skc-"+a+"-"+t))},"sk-"+a))})})})),"error"===I&&W(d),"empty"===I&&W(s),!I&&a&&de(h,{component:"tbody",children:a.map((e,a)=>de(h,{component:"tr","data-surface":A(a),sx:{backgroundColor:"var(--"+A(a)+")"},children:(Array.isArray(e)?e:t.map(t=>e[t.field||t.key])).map((e,r)=>de(h,{component:"td",sx:{...z(),...t[r]&&t[r].align?{textAlign:t[r].align}:{}},children:e},"c-"+a+"-"+r))},"r-"+a))}),'/* 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&&de(h,{component:"tfoot",children:r.map((e,a)=>de(h,{component:"tr",children:(Array.isArray(e)?e:t.map(t=>e[t.field||t.key])).map((e,r)=>de(h,{component:"td",sx:{...T(),...t[r]&&t[r].align?{textAlign:t[r].align}:{},..."loading"===I?wa():{}},children:e},"fc-"+a+"-"+r))},"f-"+a))})]}):null:e})})}const Ym=Mn,Zm={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Jm={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},$m={small:{fontSize:"12px",py:"var(--Sm-Tooltip-Padding, 4px)",px:"var(--Sm-Tooltip-Padding, 4px)",gap:"var(--Sm-Tooltip-Gap, 2px)",arrowW:"var(--Sm-Tooltip-Arrow-Width, 12px)",arrowH:"var(--Sm-Tooltip-Arrow-Height, 6px)",arrowVisible:"var(--Sm-Tooltip-Visible-Arrow-Height, 4px)",maxWidth:200},medium:{fontSize:"13px",py:"var(--Tooltip-Padding, 8px)",px:"var(--Tooltip-Padding, 8px)",gap:"var(--Tooltip-Gap, 4px)",arrowW:"var(--Tooltip-Arrow-Width, 16px)",arrowH:"var(--Tooltip-Arrow-Height, 8px)",arrowVisible:"var(--Tooltip-Visible-Arrow-Height, 6px)",maxWidth:280},large:{fontSize:"14px",py:"var(--Lg-Tooltip-Padding, 12px)",px:"var(--Lg-Tooltip-Padding, 12px)",gap:"var(--Lg-Tooltip-Gap, 8px)",arrowW:"var(--Lg-Tooltip-Arrow-Width, 20px)",arrowH:"var(--Lg-Tooltip-Arrow-Height, 10px)",arrowVisible:"var(--Lg-Tooltip-Visible-Arrow-Height, 7px)",maxWidth:360}};function Km({children:e,title:t,variant:a="solid",color:r="black-white",size:n="medium",placement:o="bottom",arrow:i=!0,open:l,enterDelay:s=100,leaveDelay:d=0,describeChild:c=!1,className:u="",sx:p={},...m}){const g=$m[n]||$m.medium,f="solid"===a,b="light"===a,x="outline"===a,y=Ym(r),w=(e=>String(e).startsWith("left")||String(e).startsWith("right"))(o),S="var(--Buttons-"+y+"-Button)",k=S,B=void 0===l?{}:{open:l};return de(v,{title:t?de(h,{"data-theme":(f?Zm[r]:b?Jm[r]:null)||void 0,"data-surface":b?"Surface-Brightest":f?"Surface":void 0,className:"tooltip-content tooltip-"+a+" tooltip-"+r+" tooltip-"+n+" "+u,sx:{backgroundColor:S,color:"var(--Buttons-"+y+"-Text)",border:x?"1px solid var(--Buttons-"+y+"-Border)":"none",borderRadius:"var(--Tooltip-Radius, var(--Style-Border-Radius))",fontSize:g.fontSize,lineHeight:1.5,fontFamily:"inherit",padding:g.py+" "+g.px,maxWidth:g.maxWidth+"px",display:"flex",alignItems:"center",gap:g.gap,boxShadow:"var(--Effect-Level-2)",...p},children:t}):"",placement:o,arrow:i,enterDelay:s,leaveDelay:d,describeChild:c,...B,componentsProps:{tooltip:{sx:{backgroundColor:"transparent",padding:0,maxWidth:"none",boxShadow:"none"}},arrow:{sx:{color:k,width:w?g.arrowVisible:g.arrowW,height:w?g.arrowW:g.arrowVisible,"&::before":{border:x?"1px solid var(--Buttons-"+y+"-Border)":"none",backgroundColor:k,boxSizing:"border-box",width:"100%",height:"100%"}}}},...m,children:e})}const _m={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 eg({children:e,onClick:t,ariaLabel:a}){return de(oo,{iconOnly:!0,variant:"ghost",size:"medium",onClick:t,"aria-label":a,children:e})}function tg({barColor:a="default",surface:r="Surface",loginType:n="login",menuType:o="hamburger",brandType:i="name",searchPosition:l="right",companyName:s="Company",navLinks:d=["Home","Products","About"],rightButtons:c=[],showRightButtons:u=!1,onMenuClick:p,user:m,onLogin:g,onSignOut:f,brand:b,onBrandClick:v,centerSlot:x,endSlot:y,searchValue:w,onSearchChange:S,searchPlaceholder:k="Search...",children:B,className:C="",sx:T={}}){const[A,z]=t(!1),I=_m[a]||_m.default,R=I.theme,W=I.surface||r,D="expanded"===o&&d.length>3?"hamburger":o,F=de(Jc,{placeholder:k,size:"medium",value:w,onChange:S,sx:{flex:"left"===l?"0 1 400px":"0 1 280px",minWidth:0}});return ue(ce,{children:[de(h,{component:"header",role:"banner","data-theme":R,"data-surface":W,className:"appbar appbar-desktop appbar-"+a+(C?" "+C:""),sx:{display:"flex",alignItems:"center",height:64,px:2,gap:2,backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:Wn,fontFamily:"inherit",...T},children:B||ue(ce,{children:["hamburger"===D&&de(eg,{ariaLabel:"Open navigation menu",onClick:p||(()=>z(!0)),children:de(Qt,{sx:{fontSize:"inherit"}})}),de(h,void 0!==b?v?{component:"button",type:"button",onClick:v,sx:{background:"transparent",border:"none",padding:0,cursor:"pointer",color:"inherit",font:"inherit",fontWeight:700,fontSize:"18px",whiteSpace:"nowrap",flexShrink:0},children:b}:{sx:{fontWeight:700,fontSize:"18px",whiteSpace:"nowrap",flexShrink:0},children:b}:"logo"===i?{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}),ue(ce,void 0!==x?{children:[de(h,{sx:{flex:1}}),de(h,{sx:{display:"flex",alignItems:"center",flexShrink:0},children:x}),de(h,{sx:{flex:1}})]}:{children:["left"===l&&F,"expanded"===D&&de(ki,{defaultValue:0,variant:"standard",color:"default",sx:{ml:2,minHeight:0},children:de(Bi,{"aria-label":"Main navigation",children:d.map(e=>de(Ci,{children:e},e))})}),de(h,{sx:{flex:1}}),"right"===l&&F]}),void 0!==y?de(h,{sx:{display:"flex",alignItems:"center",gap:1},children:y}):ue(ce,{children:[u&&c.length>0&&de(h,{sx:{display:"flex",alignItems:"center",gap:.5},children:c.map((t,a)=>t.raw?de(e.Fragment,{children:t.icon},a):de(eg,{ariaLabel:t.label||"Action "+(a+1),children:t.icon},a))}),m?de(oo,{variant:"ghost",size:"small",onClick:f,"aria-label":"Sign out",startIcon:m.photoURL?de(h,{component:"img",src:m.photoURL,alt:"",sx:{width:24,height:24,borderRadius:"50%"}}):de(la,{sx:{fontSize:24}}),children:m.displayName?.split(" ")[0]||"Account"}):g?de(oo,{variant:"default-outline",size:"small",onClick:g,children:"Login"}):"avatar"===n?de(oo,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:de(la,{sx:{fontSize:28}})}):null]})]})}),de(Ep,{open:A,onClose:()=>z(!1),anchor:"left",size:"small",children:de(h,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:d.map(e=>de(oo,{variant:"ghost",size:"medium",onClick:()=>z(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})})]})}function ag({mobileVariant:e="search",barColor:a="default",surface:r="Surface",title:n="Page Title",subtitle:o="Subtitle text",actionIcon:i,companyName:l="Company",navLinks:s=["Home","Products","About"],className:d="",sx:c={}}){const[u,p]=t(!1),m=_m[a]||_m.default,g=m.theme,f=m.surface||r,b={backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:Wn,fontFamily:"inherit",width:"100%",maxWidth:420,...c},v={"data-theme":g,"data-surface":f},x=de(Ep,{open:u,onClose:()=>p(!1),anchor:"left",size:"small",children:de(h,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:s.map(e=>de(oo,{variant:"ghost",size:"medium",onClick:()=>p(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})});return"search"===e?ue(ce,{children:[ue(h,{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-search appbar-"+a+" "+d,...v,sx:{...b,display:"flex",alignItems:"center",height:64,px:1.5,gap:1.5},children:[de(eg,{ariaLabel:"Open navigation menu",onClick:()=>p(!0),children:de(Qt,{sx:{fontSize:"inherit"}})}),de(Jc,{placeholder:"Search "+l,size:"small",sx:{flex:1,minWidth:0}}),de(oo,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:de(la,{sx:{fontSize:28}})})]}),x]}):ue(h,"small"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-small appbar-"+a+" "+d,...v,sx:{...b,display:"flex",alignItems:"center",height:64,px:1.5,gap:1},children:[de(eg,{ariaLabel:"Back",children:de(ia,{sx:{fontSize:"inherit"}})}),ue(h,{sx:{flex:1,minWidth:0},children:[de(h,{sx:{fontWeight:600,fontSize:"16px",lineHeight:1.3,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:n}),o&&de(h,{sx:{fontSize:"12px",opacity:.7,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:o})]}),i&&de(eg,{ariaLabel:"Action",children:i})]}:"medium"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-medium appbar-"+a+" "+d,...v,sx:{...b,px:1.5,pb:2},children:[ue(h,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[de(eg,{ariaLabel:"Back",children:de(ia,{sx:{fontSize:"inherit"}})}),de(h,{sx:{flex:1}}),i&&de(eg,{ariaLabel:"Action",children:i})]}),ue(h,{sx:{px:1.5},children:[de(h,{sx:{fontWeight:600,fontSize:"24px",lineHeight:1.2},children:n}),o&&de(h,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:o})]})]}:{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-large appbar-"+a+" "+d,...v,sx:{...b,px:1.5,pb:3},children:[ue(h,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[de(eg,{ariaLabel:"Back",children:de(ia,{sx:{fontSize:"inherit"}})}),de(h,{sx:{flex:1}}),i&&de(eg,{ariaLabel:"Action",children:i})]}),ue(h,{sx:{px:1.5,mt:1},children:[de(h,{sx:{fontWeight:600,fontSize:"36px",lineHeight:1.1},children:n}),o&&de(h,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:o})]})]})}function rg({mode:e="desktop",...t}){return de("mobile"===e?ag:tg,{...t})}const ng=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",og=["default","primary","primary-light","white","black"],ig=["Surface","Surface-Bright","Surface-Dim","Surface-Dimmest"],lg={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 sg({ratio:e,threshold:t}){if(!e)return de(xr,{style:{color:"var(--Text-Quiet)"},children:"--"});const a=parseFloat(e)>=t;return ue(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ue(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:[e,":1"]}),de(xr,{style:{color:a?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:a?"Pass":"Fail"})]})}function dg({label:e,ratio:t,threshold:a,note:r}){return ue(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(h,{sx:{flex:1},children:[de(sr,{style:{color:"var(--Text)"},children:e}),r&&de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),de(sg,{ratio:t,threshold:a})]})}function cg({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function ug({color:e,selected:t,onClick:a}){const r=lg[e]||lg.default;return de(h,{component:"button","data-theme":r.theme,"data-surface":r.surface||"Surface",onClick:()=>a(e),"aria-label":"Select "+e,"aria-pressed":t,title:e,sx:{width:"var(--Button-Height, 36px)",height:"var(--Button-Height, 36px)",borderRadius:"4px",backgroundColor:"var(--Background)",border:t?"2px solid var(--Text)":"2px 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&&de(me,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function hg(){const[e,a]=t("desktop"),[n,o]=t("default"),[i,l]=t("Surface"),[s,d]=t("login"),[c,u]=t("hamburger"),[p,m]=t("name"),[g,f]=t("right"),[b,v]=t("search"),[x,y]=t(null),[k,B]=t("Surface"),[C,T]=t({}),A="desktop"===e,z=lg[n]||lg.default,I=z.theme,R=z.surface||i;return r(()=>{const e={};e.text=wo("--Text"),e.textQuiet=wo("--Text-Quiet"),e.background=wo("--Background"),e.border=wo("--Border"),e.focusVisible=wo("--Focus-Visible"),e.hover=wo("--Hover"),e.active=wo("--Pressed"),T(e)},[n,i,e]),ue(h,{sx:{pb:8},children:[de($a,{children:"App Bar"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{theme:x,children:de(h,{sx:{width:"100%",maxWidth:A?"100%":420,overflow:"hidden"},children:A?de(tg,{barColor:n,surface:i,loginType:s,menuType:c,brandType:p,searchPosition:g,companyName:"My App",navLinks:["Home","Products","About"]}):de(ag,{barColor:n,surface:i,mobileVariant:b,companyName:"My App",title:"Page Title",subtitle:"Subtitle text"})})}),de(Zo,{code:(()=>{if(A){const e=[];"default"!==n&&e.push('barColor="'+n+'"'),"Surface"!==i&&e.push('surface="'+i+'"'),"login"!==s&&e.push('loginType="'+s+'"'),"hamburger"!==c&&e.push('menuType="'+c+'"'),"name"!==p&&e.push('brandType="'+p+'"'),"right"!==g&&e.push('searchPosition="'+g+'"');const t=e.length?"\n "+e.join("\n ")+"\n":"";return'<AppBar mode="desktop"'+(t||" ")+'companyName="My App" />'}{const e=['mode="mobile"','mobileVariant="'+b+'"'];return"default"!==n&&e.push('barColor="'+n+'"'),"Surface"!==i&&e.push('surface="'+i+'"'),"<AppBar\n "+e.join("\n ")+'\n title="Page Title"\n/>'}})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:x,onThemeChange:y,surface:k,onSurfaceChange:B})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"AppBar",theme:x,surface:k})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MODE"}),de(S,{direction:"row",spacing:1,children:["desktop","mobile"].map(t=>de(cg,{label:ng(t),selected:e===t,onClick:()=>a(t)},t))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:og.map(e=>de(ug,{color:e,selected:n===e,onClick:o},e))}),ue(xr,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-theme="',I,'"']})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:ig.map(e=>de(cg,{label:e.replace("Surface-","").replace("Surface","Default"),selected:i===e,onClick:()=>l(e)},e))}),ue(xr,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-surface="',i,'"']})]}),A&&ue(ce,{children:[ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MENU TYPE"}),de(S,{direction:"row",spacing:1,children:["hamburger","expanded"].map(e=>de(cg,{label:ng(e),selected:c===e,onClick:()=>u(e)},e))}),de(xr,{style:{color:"var(--Text-Quiet)",marginTop:4,display:"block"},children:"Expanded auto-falls back to hamburger when nav > 3 links"})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BRAND"}),de(S,{direction:"row",spacing:1,children:["name","logo"].map(e=>de(cg,{label:ng(e),selected:p===e,onClick:()=>m(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEARCH POSITION"}),de(S,{direction:"row",spacing:1,children:["left","right"].map(e=>de(cg,{label:ng(e),selected:g===e,onClick:()=>f(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LOGIN TYPE"}),de(S,{direction:"row",spacing:1,children:["login","avatar"].map(e=>de(cg,{label:ng(e),selected:s===e,onClick:()=>d(e)},e))})]})]}),!A&&ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MOBILE VARIANT"}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["search","small","medium","large"].map(e=>de(cg,{label:ng(e),selected:b===e,onClick:()=>v(e)},e))})]})]})}),de(Ti,{value:2,children:ue(h,{sx:{p:3},children:[ue(sr,{color:"quiet",style:{marginBottom:24},children:[e," / ",n," / ",i,A?"":" / "+b,' — data-theme="',I,'" data-surface="',R,'"']}),ue(S,{spacing:3,children:[ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),de(sr,{color:"quiet",style:{marginBottom:16},children:"All text and icons must have 4.5:1 contrast against the AppBar background."}),de(dg,{label:"Resting: var(--Text) vs. var(--Background)",ratio:yo(C.text,C.background),threshold:4.5,note:'data-theme="'+I+'" data-surface="'+R+'"'}),de(dg,{label:"On hover: var(--Text) vs. var(--Hover)",ratio:yo(C.text,C.hover),threshold:4.5,note:"Icon buttons use var(--Hover) on hover"}),de(dg,{label:"On active: var(--Text) vs. var(--Pressed)",ratio:yo(C.text,C.active),threshold:4.5,note:"Icon buttons use var(--Pressed) on press"})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),de(dg,{label:"var(--Focus-Visible) vs. var(--Background)",ratio:yo(C.focusVisible,C.background),threshold:3,note:"outline: 3px solid var(--Focus-Visible); outline-offset: 1px"})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{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:t,note:a})=>{const r=t>=24,n=t>=44,o=t>=48;return ue(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(h,{sx:{flex:1},children:[ue(sr,{style:{color:"var(--Text)"},children:[e," — ",t,"px"]}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:a})]}),ue(h,{sx:{display:"flex",gap:.5,flexWrap:"wrap",justifyContent:"flex-end"},children:[ue(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:r?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:r?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:["Desktop ",r?"Y":"N"]}),ue(h,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:n?"var(--Tags-Success-BG)":"var(--Tags-Warning-BG)",color:n?"var(--Tags-Success-Text)":"var(--Tags-Warning-Text)"},children:["iOS ",n?"Y":"~"]}),ue(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)})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),ue(S,{spacing:0,children:[ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Landmark:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<header role="banner">'})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Navigation (expanded menu):"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav aria-label="Main navigation">'})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Theme + Surface:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'data-theme="'+I+'" data-surface="'+R+'"'})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Shadow:"}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"box-shadow: var(--Effect-Level-1)"})]}),ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[de(sr,{children:"Icon buttons:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"All icon buttons have aria-label. Focus visible on keyboard navigation."})]}),ue(h,{sx:{py:1.5},children:[de(sr,{children:"Keyboard:"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"Tab navigates all interactive elements. Enter/Space activates buttons."})]})]})]})]})]})}),de(Ti,{value:3,children:de(pd,{component:"AppBar"})})]})]})})]})]})}const pg={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 mg({color:e="default",companyName:t="",year:a=(new Date).getFullYear(),rights:r="All rights reserved",children:n,className:o,style:i,...l}){const s=n??`© ${a}${t?" "+t:""}.${r?" "+r+".":""}`,d=pg[e]||pg.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 de("div",{...c,className:["dino-copyright",o].filter(Boolean).join(" "),style:{padding:"14px 24px",textAlign:"center",...u,...i},...l,children:de(sr,{style:{color:"inherit",opacity:.85},children:s})})}const gg={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 fg({color:e="default",brand:t,address:a,columns:r=[],socialLinks:n=[],subscribe:o,copyrightName:i,copyrightYear:l,className:s,style:d,...c}){const u=r.slice(0,3),h=gg[e]||gg.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 ue("footer",{...p,className:["dino-footer",s].filter(Boolean).join(" "),style:{...m,...d},...c,children:[ue("div",{style:{maxWidth:1200,margin:"0 auto",padding:"40px 24px 56px"},children:[t&&de("div",{style:{marginBottom:36},children:t}),ue("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))",gap:40},children:[de(bg,{address:a}),u.map((e,t)=>de(vg,{...e},t))]}),(n.length>0||o)&&ue("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:[n.length>0&&de(xg,{links:n}),o&&de(yg,{...o})]})]}),de(mg,{color:e,companyName:i,year:l})]})}function bg({address:e}){if(!e)return de("div",{});const{company:t,lines:a=[],email:r,phone:n}=e,o=[...t?[t]:[],...a,...n?[n]:[]];return ue("div",{children:[o.map((e,t)=>de(sr,{style:{color:"inherit",opacity:.85,display:"block"},children:e},t)),r&&de("div",{style:{marginTop:12},children:de(sr,{style:{color:"inherit",opacity:.85,display:"block"},children:de(Al,{href:"mailto:"+r,color:"standard",style:{color:"inherit"},children:r})})})]})}function vg({title:e,links:t=[]}){return ue("div",{children:[e&&de(Ka,{style:{color:"inherit",marginBottom:12},children:e}),de("ul",{style:{listStyle:"none",margin:0,padding:0},children:t.map((e,t)=>de("li",{style:{marginBottom:8},children:de(Al,{href:e.href,onClick:e.onClick,color:"standard",style:{color:"inherit",opacity:.85},children:e.label})},t))})]})}function xg({links:e}){return de("div",{style:{display:"flex",gap:16,alignItems:"center"},children:e.map((e,t)=>de("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},t))})}function yg({title:e="Stay in the loop",description:a,placeholder:r="your@email.com",buttonLabel:n="Subscribe",onSubscribe:o}){const[i,l]=t(""),[s,d]=t(!1);return ue("form",{onSubmit:async e=>{if(e&&e.preventDefault(),i&&!s){d(!0);try{await(o?.(i)),l("")}finally{d(!1)}}},style:{minWidth:260,maxWidth:360,flex:"1 1 260px"},children:[de(Ka,{style:{color:"inherit",marginBottom:6},children:e}),a&&de(sr,{style:{color:"inherit",opacity:.85,marginBottom:12,display:"block"},children:a}),ue("div",{style:{display:"flex",gap:8},children:[de(Bc,{type:"email",value:i,onChange:e=>l(e.target.value),placeholder:r,size:"small",fullWidth:!0,"aria-label":"Email address"}),de(oo,{type:"submit",variant:"primary",size:"small",disabled:s||!i,children:n})]})]})}function wg(e){const t=e.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);return t?[Number(t[1]),Number(t[2]),Number(t[3])]:null}function Sg(e){return e?"#"+e.map(e=>e.toString(16).padStart(2,"0")).join(""):"—"}function kg([e,t,a]){const r=[e,t,a].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*r[0]+.7152*r[1]+.0722*r[2]}function Bg({targetRef:e,label:a,deps:n=[]}){const[o,i]=t(null),[l,s]=t(null);r(()=>{if(!e.current)return;const t=requestAnimationFrame(()=>{if(!e.current)return;const t=getComputedStyle(e.current);i(wg(t.backgroundColor)),s(wg(t.color))});return()=>cancelAnimationFrame(t)},n);const d=function(e,t){if(!e||!t)return null;const a=kg(e),r=kg(t);return(Math.max(a,r)+.05)/(Math.min(a,r)+.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 ue("div",{style:{display:"flex",alignItems:"center",gap:16,padding:"12px 16px",borderRadius:8,background:"var(--Container)",border:"1px solid var(--Border)"},children:[ue("div",{style:{flex:1,minWidth:0},children:[de(sr,{style:{fontWeight:600},children:a}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Background ",Sg(o)," · Text ",Sg(l)]})]}),ue("div",{style:{display:"flex",alignItems:"center",gap:6,borderRadius:999,padding:"4px 10px",background:"var(--Background)",border:"1px solid var(--Border)"},children:[de("span",{style:{fontWeight:700,fontSize:12,color:h},children:u}),de(xr,{style:{color:"var(--Text-Quiet)"},children:null!==d?d.toFixed(2)+":1":"—"})]})]})}const Cg={company:"DinoDesign",lines:["123 Market Street","San Francisco, CA 94103"],email:"hello@dinodesign.dev",phone:"+1 (555) 010-0000"},Tg=[{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:"#"}]}],Ag=[{icon:de(sa,{fontSize:"small"}),url:"https://twitter.com",label:"Twitter"},{icon:de(da,{fontSize:"small"}),url:"https://github.com",label:"GitHub"},{icon:de(ca,{fontSize:"small"}),url:"https://linkedin.com",label:"LinkedIn"}],zg=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function Ig({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Rg(){const[e,a]=t(4),[o,i]=t(!0),[l,s]=t(!0),[d,c]=t("default"),u=n(null),[p,m]=t(null),[g,f]=t(null);r(()=>{u.current&&(m({current:u.current.querySelector(".dino-footer")}),f({current:u.current.querySelector(".dino-copyright")}))},[d,e,o,l]);const b=Tg.slice(0,Math.max(0,e-1)),v=o?Ag:[],x=l?{title:"Stay in the loop",description:"Monthly updates on new components and tips.",onSubscribe:async e=>console.log("subscribed:",e)}:void 0;return ue(h,{children:[de($a,{style:{marginBottom:12},children:"Footer"}),ue(ur,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:["Configurable 1–4 column footer. The first column is always the company address / contact. Optional ",de("code",{children:"socialLinks"})," and"," ",de("code",{children:"subscribe"})," sit above the auto-generated copyright strip."]}),de(h,{ref:u,sx:{borderRadius:1,overflow:"hidden",mb:4},children:de(fg,{color:d,address:Cg,columns:b,socialLinks:v,subscribe:x,copyrightName:"DinoDesign"})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Footer"})}),de(Ti,{value:1,children:ue(S,{spacing:3,sx:{p:3,maxWidth:560},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLUMNS"}),de(S,{direction:"row",spacing:1,children:[1,2,3,4].map(t=>de(Ig,{label:String(t),selected:e===t,onClick:()=>a(t)},t))}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"First column is always the address / contact. Up to 3 more link columns."})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:zg.map(e=>de(Ig,{label:e.label,selected:d===e.value,onClick:()=>c(e.value)},e.value))}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:'"Default" hardcodes Primary tone 2 (auto-derived in a future iteration).'})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SOCIAL LINKS"}),de(ui,{label:"Show social media row",checked:o,onChange:e=>i(e.target.checked)}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["When on, the Footer renders the ",de("code",{children:"socialLinks"})," row (icons linking out). In your app, supply the icon + url pairs from your data store."]})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SUBSCRIBE"}),de(ui,{label:"Show email subscribe form",checked:l,onChange:e=>s(e.target.checked)}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["When on, the Footer renders an email subscribe form. Hook it up via"," ",de("code",{children:"subscribe.onSubscribe(email)"}),"."]})]})]})}),de(Ti,{value:2,children:ue(S,{spacing:2,sx:{p:3,maxWidth:560},children:[de(xr,{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&&de(Bg,{targetRef:p,label:"Footer body",deps:[d,e,o,l]}),g&&de(Bg,{targetRef:g,label:"Copyright strip",deps:[d,e,o,l]})]})}),de(Ti,{value:3,children:de(pd,{component:"Footer"})})]})]})}const Wg=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function Dg({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Fg(){const[e,a]=t("DinoDesign"),[o,i]=t((new Date).getFullYear()),[l,s]=t("All rights reserved"),[d,c]=t(""),[u,p]=t(!1),[m,g]=t("default"),f=n(null),[b,v]=t(null);return r(()=>{f.current&&v({current:f.current.querySelector(".dino-copyright")})},[m,u,e,o,l,d]),ue(h,{children:[de($a,{style:{marginBottom:12},children:"Copyright"}),ue(ur,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:["Standalone copyright strip used at the bottom of pages. Defaults to"," ",ue("code",{children:["© ","{year}"," ","{companyName}",". ","{rights}","."]})," Pass"," ",de("code",{children:"children"})," to override the entire text."]}),de(h,{ref:f,sx:{borderRadius:1,overflow:"hidden",mb:4},children:de(mg,u?{color:m,children:d||"Type a custom message →"}:{color:m,companyName:e,year:Number(o)||(new Date).getFullYear(),rights:l})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"Copyright"})}),de(Ti,{value:1,children:ue(S,{spacing:3,sx:{p:3,maxWidth:560},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TEXT MODE"}),ue(S,{direction:"row",spacing:1,children:[de(Dg,{label:"Auto-generated",selected:!u,onClick:()=>p(!1)}),de(Dg,{label:"Custom",selected:u,onClick:()=>p(!0)})]})]}),!u&&ue(ce,{children:[de(Ql,{label:"Company name",value:e,onChange:e=>a(e.target.value),placeholder:"DinoDesign",size:"medium"}),de(rc,{label:"Year",value:Number(o),onChange:e=>i(e),min:1900,max:2100}),de(Ql,{label:"Rights text",value:l,onChange:e=>s(e.target.value),placeholder:"All rights reserved",size:"medium"}),de(xr,{style:{color:"var(--Text-Quiet)"},children:'Leave Rights blank to omit "All rights reserved." entirely.'})]}),u&&ue(ce,{children:[de(Ql,{label:"Custom text",value:d,onChange:e=>c(e.target.value),placeholder:"© 2026 DinoDesign · MIT License · Built with love",size:"medium",multiline:!0}),de(xr,{style:{color:"var(--Text-Quiet)"},children:"Pass any string (or React node) as children to fully override the auto text."})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Wg.map(e=>de(Dg,{label:e.label,selected:m===e.value,onClick:()=>g(e.value)},e.value))}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Matches the Footer color presets so the two stack cleanly."})]})]})}),de(Ti,{value:2,children:ue(S,{spacing:2,sx:{p:3,maxWidth:560},children:[de(xr,{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."}),b&&de(Bg,{targetRef:b,label:"Copyright strip",deps:[m,u,e,o,l,d]})]})}),de(Ti,{value:3,children:de(pd,{component:"Copyright"})})]})]})}const Pg=["Default","Primary","Secondary","Tertiary","Neutral"],Lg={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}},Hg=Object.keys(Lg);function Ng(e,t){if("custom"===e)return{...Lg.Classic,name:"Custom",description:"Custom",...t||{}};const a=Lg[e];return a?{...a}:{...Lg.Classic}}function Mg(e,t){const a=e||"Primary";return"base"===t?"var(--Buttons-"+a+"-Button)":"highlight"===t?"rgb(var(--Buttons-"+a+"-Highlight))":"lowlight"===t?"rgb(var(--Buttons-"+a+"-Lowlight))":void 0}function Og(e){const t=e||"Primary";return"Default"===t?"var(--Text)":"var(--Text-"+t+")"}function Eg(e,t){const a=(e-90)*Math.PI/180;return{dx:Math.cos(a)*t,dy:Math.sin(a)*t}}const Qg={"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 Vg({text:t="Your Brand. Perfected.",curves:a,arc:r=160,radius:n=300,direction:o="up",rotation:i=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:g="Primary",bevelPreset:f,bevelCustom:b,className:v,style:x,...y}){const w=f?Ng(f,b):null,S=w?!!w.bevel:!!m,k=Qg[s]||Qg["display-large"],B=c??k.fontFamily,C=d??k.fontSize,T=u??k.fontWeight,A=h??k.letterSpacing,z="number"==typeof d?d:k.pxHint,I=a&&a.length>0?a:[{arc:r,radius:n,direction:o}],{d:R,width:W,upMax:D,downMax:F,pathId:P}=function(t){return e.useMemo(()=>{const e="dino-curved-text-"+Math.random().toString(36).slice(2,9);let a=0;const r=0;let n="M "+a+" "+r,o=0,i=0;for(const{arc:e,radius:l,direction:s}of t){const t=jg(e,1,359),d=Math.max(10,l),c=t*Math.PI/180,u=2*d*Math.sin(c/2),h=d*(1-Math.cos(c/2));a+=u,n+=" A "+d+" "+d+" 0 "+(t>180?1:0)+" "+("up"===s?1:0)+" "+a+" "+r,"up"===s?o=Math.max(o,h):i=Math.max(i,h)}return{d:n,width:a,upMax:o,downMax:i,pathId:e}},[JSON.stringify(t)])}(I),L=Math.ceil(D+z),H=Math.ceil(F+z),N=Math.ceil(z),M=Math.ceil(W+2*N),O=L+H,E=N,Q=L,V=i?"rotate("+i+" "+M/2+" "+O/2+")":void 0,j=e.useRef(null),[U,G]=e.useState(null),[X,q]=e.useState(z);e.useEffect(()=>{if(!j.current||"undefined"==typeof ResizeObserver)return;const e=j.current,t=()=>{const t=e.getBoundingClientRect(),a=U?U.width:M;if(!a||!t.width)return;const r=t.width/a;q(z*r)};t();const a=new ResizeObserver(t);return a.observe(e),()=>a.disconnect()},[M,z,U]);const Y=S&&X>=19;e.useLayoutEffect(()=>{if(!l)return void G(null);const e=j.current;if(!e)return;const t=e.querySelector("text");if(!t)return;let a;try{a=t.getBBox()}catch(e){return}if(!a||!a.width||!a.height)return;const r=M/2,n=O/2,o=i*Math.PI/180,s=Math.cos(o),d=Math.sin(o),c=(e,t)=>{const a=e-r,o=t-n;return{x:r+a*s-o*d,y:n+a*d+o*s}},u=[c(a.x,a.y),c(a.x+a.width,a.y),c(a.x,a.y+a.height),c(a.x+a.width,a.y+a.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)),g=Math.max(...u.map(e=>e.y)),f=.12*z,b={x:h-f,y:m-f,width:p-h+2*f,height:g-m+2*f};G(e=>e&&Math.abs(e.x-b.x)<.5&&Math.abs(e.y-b.y)<.5&&Math.abs(e.width-b.width)<.5&&Math.abs(e.height-b.height)<.5?e:b)},[l,t,JSON.stringify(I),i,z,A,B,T,S,g,f,JSON.stringify(b)]);const Z=U?U.x+" "+U.y+" "+U.width+" "+U.height:"0 0 "+M+" "+O,J=U?U.width:M,$=U?U.height:O;return ue("svg",{ref:j,viewBox:Z,width:J,height:$,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...x},"aria-label":t,role:"img",className:["dino-curved-text",v].filter(Boolean).join(" "),...y,children:[de("defs",{children:de("path",{id:P,d:R,transform:"translate("+E+" "+Q+")"})}),ue("g",{transform:V,children:[Y&&(()=>{const e=w?w.depth/96:.045,a=Math.max(2,Math.round(z*e)),r=Math.max(1,Math.round(z*e*.67)),n={fontFamily:B,fontSize:"number"==typeof C?C+"px":C,fontWeight:T,letterSpacing:"number"==typeof A?A+"px":A};return ue(ce,{children:[de("text",{className:"dino-bevel-layer dino-bevel-layer--lowlight",fill:"rgb(var(--Buttons-"+g+"-Lowlight))",transform:"translate(0 "+a+")",style:n,children:de("textPath",{href:"#"+P,startOffset:"50%",textAnchor:"middle",children:t})}),de("text",{className:"dino-bevel-layer dino-bevel-layer--highlight",fill:"rgb(var(--Buttons-"+g+"-Highlight))",transform:"translate(0 -"+r+")",style:n,children:de("textPath",{href:"#"+P,startOffset:"50%",textAnchor:"middle",children:t})})]})})(),de("text",{className:"dino-curved-text__base",fill:Y?"var(--Buttons-"+g+"-Button)":S?Og(g):p,style:{fontFamily:B,fontSize:"number"==typeof C?C+"px":C,fontWeight:T,letterSpacing:"number"==typeof A?A+"px":A},children:de("textPath",{href:"#"+P,startOffset:"50%",textAnchor:"middle",children:t})})]})]})}function jg(e,t,a){return Math.max(t,Math.min(a,e))}const Ug=[{value:"display-large",label:"Display Large"},{value:"display-small",label:"Display Small"}],Gg=[{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)"}],Xg=Pg.map(e=>({value:e,label:e}));function qg({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function Yg(){const[e,a]=t("Your Brand. Perfected."),[o,i]=t("display-large"),[l,s]=t("primary"),[d,c]=t([(u="up",{arc:140,radius:340,direction:u})]);var u;const[p,m]=t(0),[g,f]=t(8),[b,v]=t(700),[x,y]=t(!1),[w,k]=t("Primary"),[B,C]=t("Classic"),T=n(null),[A,z]=t(null);r(()=>{T.current&&z({current:T.current.querySelector("text")})},[l,o,d,p,g,b,x,w,B]);const I=Gg.find(e=>e.value===l)?.css||Gg[0].css;function R(e,t){c(a=>a.map((a,r)=>r===e?{...a,...t}:a))}return ue(h,{children:[de($a,{style:{marginBottom:12},children:"Curved Display Text"}),de(ur,{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."}),ue(h,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(360px, 1fr))",gap:3,alignItems:"start"},children:[de(h,{sx:{minWidth:0},children:de(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:de(Vg,{text:e,curves:d,textStyle:o,rotation:p,letterSpacing:g,fontWeight:b,bevel:x,bevelTheme:w,bevelPreset:x?B:void 0,color:I})})}),de(h,{sx:{minWidth:0,alignSelf:"flex-start"},children:de(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"CurvedText"})}),de(Ti,{value:1,children:ue(S,{spacing:3,sx:{p:3,maxWidth:720},children:[de(Ql,{label:"Text",value:e,onChange:e=>a(e.target.value),placeholder:"Your headline…",size:"medium"}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CURVES"}),de(S,{direction:"row",spacing:1,children:[1,2].map(e=>de(qg,{label:String(e),selected:d.length===e,onClick:()=>function(e){c(t=>{if(e===t.length)return t;if(e>t.length){const a=[...t];for(;a.length<e;){const e=a[a.length-1];a.push({arc:e.arc,radius:e.radius,direction:"up"===e.direction?"down":"up"})}return a}return t.slice(0,e)})}(e)},e))}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"One curve is an arch. Two curves chain end-to-end for a wave."})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"PER-CURVE SETTINGS"}),de(S,{spacing:2,children:d.map((e,t)=>ue(h,{"data-surface":"Container",style:{background:"var(--Background)",border:"1px solid var(--Border)",borderRadius:8,padding:12},children:[ue(S,{direction:"row",alignItems:"center",spacing:2,sx:{mb:1},children:[ue(xr,{style:{fontWeight:700},children:["Curve ",t+1]}),de("div",{style:{flex:1}}),ue(S,{direction:"row",spacing:1,children:[de(qg,{label:"⌢ Up",selected:"up"===e.direction,onClick:()=>R(t,{direction:"up"})}),de(qg,{label:"⌣ Down",selected:"down"===e.direction,onClick:()=>R(t,{direction:"down"})})]})]}),ue(S,{spacing:1,children:[ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Radius",ue("span",{style:{float:"right"},children:[e.radius,"px"]})]}),de($l,{min:100,max:600,step:10,value:e.radius,onChange:(e,a)=>R(t,{radius:a})})]}),ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Arc sweep",ue("span",{style:{float:"right"},children:[e.arc,"°"]})]}),de($l,{min:40,max:280,step:5,value:e.arc,onChange:(e,a)=>R(t,{arc:a})})]})]})]},t))})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),de(S,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Ug.map(e=>de(qg,{label:e.label,selected:o===e.value,onClick:()=>i(e.value)},e.value))}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Uses the lib's DisplayLarge / DisplaySmall tokens (font-family, size, weight, letter-spacing)."})]}),ue(h,{children:[ue(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["LETTER SPACING",ue("span",{style:{float:"right"},children:[g,"px"]})]}),de($l,{min:-4,max:40,step:1,value:g,onChange:(e,t)=>f(t)}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Adjusts the gap between characters along the wave."})]}),ue(h,{children:[ue(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["FONT WEIGHT",de("span",{style:{float:"right"},children:b})]}),de($l,{min:100,max:900,step:100,value:b,onChange:(e,t)=>v(t)}),de(xr,{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."})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BEVEL"}),de(ui,{label:"3D bevel effect",checked:x,onChange:e=>y(e.target.checked)}),x&&ue(h,{sx:{mt:1.5},children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Preset"}),de(S,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1,mb:1.5},children:Hg.map(e=>de(qg,{label:e,selected:B===e,onClick:()=>C(e)},e))}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Bevel theme"}),de(S,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Xg.map(e=>de(qg,{label:e.label,selected:w===e.value,onClick:()=>k(e.value)},e.value))})]}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Bevel layers use ",ue("code",{children:["--Buttons-","{Theme}","-Button"]})," for the fill, with ",de("code",{children:"Highlight"})," + ",de("code",{children:"Lowlight"}),"tokens for the bright/shadow stripes. CurvedText honors a preset's ",de("em",{children:"depth"})," only — angle, softness, and drop-shadow fields are stacked-rendering limitations and are ignored here (the full filter pipeline lives in ",de("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."]})]}),ue(h,{children:[ue(S,{direction:"row",alignItems:"center",sx:{mb:1},children:[ue(Ar,{style:{color:"var(--Text-Quiet)",flex:1},children:["ROTATION",ue("span",{style:{float:"right",marginRight:12},children:[p,"°"]})]}),de(oo,{variant:"default-outline",size:"small",onClick:function(){const t=T.current?.querySelector("svg");if(!t)return;const a=t.querySelector("path"),r=t.querySelector("text");if(!a||!r)return;const n=a.getTotalLength();if(!n)return;let o=0;try{o=r.getComputedTextLength?.()||0}catch(e){}o||(o=Math.min(n,18*e.length));const i=Math.max(0,(n-o)/2),l=Math.min(n,i+o),s=a.getPointAtLength(i),d=a.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"})]}),de($l,{min:-45,max:45,step:1,value:p,onChange:(e,t)=>m(t)}),de(xr,{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.'})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Gg.map(e=>de(qg,{label:e.label,selected:l===e.value,onClick:()=>s(e.value)},e.value))})]})]})}),de(Ti,{value:2,children:ue(S,{spacing:2,sx:{p:3,maxWidth:560},children:[de(xr,{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."}),A&&de(Bg,{targetRef:A,label:"Curved text",deps:[l,o,JSON.stringify(d),p,g]}),ue(sr,{color:"quiet",children:["The SVG sets ",de("code",{children:'role="img"'})," and"," ",de("code",{children:"aria-label"})," to the rendered text so screen readers announce it as a labeled image, not a stream of individual glyphs."]})]})}),de(Ti,{value:3,children:de(pd,{component:"CurvedText"})})]})})})]})]})}const Zg={"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 Jg({text:t="DinoDesign",theme:a="Primary",preset:r="Classic",custom:n,textStyle:o="display-large",fontSize:i,fontFamily:l,fontWeight:s,letterSpacing:d,className:c,style:u,...h}){const p=Zg[o]||Zg["display-large"],m=l??p.fontFamily,g=i??p.fontSize,f=s??p.fontWeight,b=d??p.letterSpacing,v="number"==typeof i?i:p.pxHint,x=Ng(r,n),y="dino-bevel-"+e.useId().replace(/:/g,""),w=y+"-s",S=e.useRef(null),[k,B]=e.useState(v),C=.6*v,T=Math.max(400,t.length*C+80),A=1.9*v,z=T/2,I=.7*A;e.useEffect(()=>{if(!S.current||"undefined"==typeof ResizeObserver)return;const e=S.current,t=()=>{const t=e.getBoundingClientRect();T&&t.width&&B(v*(t.width/T))};t();const a=new ResizeObserver(t);return a.observe(e),()=>a.disconnect()},[T,v]);const R=k>=19,W=x.bevel?Eg(x.angle+180,x.depth):{dx:0,dy:0},D=x.bevel?Eg(x.angle,x.depth):{dx:0,dy:0},F=x.shadow?Eg(x.angle,x.shadowDistance??6):{dx:0,dy:0},P=R?Mg(a,"base"):Og(a),L=Mg(a,"highlight"),H=Mg(a,"lowlight"),N={fontFamily:m,fontSize:"number"==typeof g?g+"px":g,fontWeight:f,letterSpacing:"number"==typeof b?b+"px":b},M=x.bevel&&R?"url(#"+y+")":void 0,O=x.shadow&&R?"url(#"+w+")":void 0;return ue("svg",{ref:S,viewBox:"0 0 "+T+" "+A,width:T,height:A,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...u},"aria-label":t,role:"img",className:["dino-bevel-text",c].filter(Boolean).join(" "),...h,children:[ue("defs",{children:[x.shadow&&de("filter",{id:w,x:"-30%",y:"-30%",width:"160%",height:"160%",children:de("feDropShadow",{dx:F.dx.toFixed(2),dy:F.dy.toFixed(2),stdDeviation:x.shadowBlur??8,style:{floodColor:H,floodOpacity:x.shadowOpacity??.6}})}),x.bevel&&ue("filter",{id:y,x:"-5%",y:"-5%",width:"110%",height:"110%",colorInterpolationFilters:"sRGB",children:[de("feGaussianBlur",{in:"SourceAlpha",stdDeviation:(x.softness??1)+.5,result:"blur-alpha"}),de("feOffset",{in:"blur-alpha",dx:D.dx.toFixed(2),dy:D.dy.toFixed(2),result:"shadow-offset"}),de("feFlood",{style:{floodColor:H,floodOpacity:.95},result:"shadow-flood"}),de("feComposite",{in:"shadow-flood",in2:"shadow-offset",operator:"in",result:"shadow-shaped"}),de("feComposite",{in:"shadow-shaped",in2:"SourceAlpha",operator:"in",result:"shadow-clipped"}),de("feOffset",{in:"blur-alpha",dx:W.dx.toFixed(2),dy:W.dy.toFixed(2),result:"hi-offset"}),de("feFlood",{style:{floodColor:L,floodOpacity:.95},result:"hi-flood"}),de("feComposite",{in:"hi-flood",in2:"hi-offset",operator:"in",result:"hi-shaped"}),de("feComposite",{in:"hi-shaped",in2:"SourceAlpha",operator:"in",result:"hi-clipped"}),ue("feMerge",{children:[de("feMergeNode",{in:"SourceGraphic"}),de("feMergeNode",{in:"shadow-clipped"}),de("feMergeNode",{in:"hi-clipped"})]})]})]}),x.shadow&&R&&de("text",{className:"dino-bevel-layer dino-bevel-layer--shadow",x:z,y:I,textAnchor:"middle",fill:P,filter:O,style:N,"aria-hidden":"true",children:t}),de("text",{className:x.bevel?"dino-bevel-text__base dino-bevel-layer":"dino-bevel-text__base",x:z,y:I,textAnchor:"middle",fill:P,filter:M,style:N,children:t})]})}const $g=[...Hg.map(e=>({value:e,label:e,description:Lg[e].description})),{value:"custom",label:"Custom",description:"Tune every knob"}],Kg=[{value:"light",label:"Light",css:"var(--Surface)"},{value:"warm",label:"Warm",css:"var(--Surface-Dim)"},{value:"dark",label:"Dark",css:"var(--Container-High)"}];function _g({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function ef({option:e,active:t,onClick:a}){return ue(h,{onClick:a,role:"button",tabIndex:0,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),a())},sx:{flex:"1 1 140px",minWidth:130,cursor:"pointer",border:"1.5px solid",borderColor:t?"var(--Buttons-Primary-Border)":"var(--Border)",background:t?"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:[de(xr,{style:{fontWeight:600,color:"var(--Text)"},children:e.label}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:e.description})]})}function tf(){const[e,a]=t("DinoDesign"),[r,n]=t("Primary"),[o,i]=t("Classic"),[l,s]=t("light"),[d,c]=t(135),[u,p]=t(5),[m,g]=t(1),[f,b]=t(!0),[v,x]=t(!0),[y,w]=t(6),[k,B]=t(8),[C,T]=t(60),[A,z]=t(96),[I,R]=t(900),[W,D]=t(0),F="custom"===o,P=F?{angle:d,depth:u,softness:m,bevel:f,shadow:v,shadowDistance:y,shadowBlur:k,shadowOpacity:C/100}:void 0;const L=Kg.find(e=>e.value===l)?.css||Kg[0].css;return ue(h,{children:[de($a,{style:{marginBottom:12},children:"Bevel Display Text"}),de(ur,{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."}),ue(h,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(360px, 1fr))",gap:3,alignItems:"start"},children:[de(h,{sx:{minWidth:0},children:de(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:de(Jg,{text:e,theme:r,preset:o,custom:P,fontSize:A,fontWeight:I,letterSpacing:W})})}),de(h,{sx:{minWidth:0,alignSelf:"flex-start"},children:de(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"BevelText"})}),de(Ti,{value:1,children:ue(S,{spacing:3,sx:{p:3,maxWidth:720},children:[de(Ql,{label:"Text",value:e,onChange:e=>a(e.target.value),placeholder:"Your headline…",size:"medium"}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME"}),de(S,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Pg.map(e=>de(_g,{label:e,selected:r===e,onClick:()=>n(e)},e))}),ue(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Resolves to ",ue("code",{children:["--Buttons-","{Theme}","-Button"]})," ","(fill), ",de("code",{children:"-Highlight"})," (light edge), and"," ",de("code",{children:"-Lowlight"})," (shadow edge)."]})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PRESETS"}),de(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:$g.map(e=>de(ef,{option:e,active:o===e.value,onClick:()=>function(e){if(i(e),"custom"!==e){const t=Ng(e);c(t.angle),p(t.depth??5),g(t.softness??1),b(t.bevel),x(t.shadow),w(t.shadowDistance??6),B(t.shadowBlur??8),T(Math.round(100*(t.shadowOpacity??.6)))}}(e.value)},e.value))})]}),F&&ue(h,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",p:2},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"CUSTOM"}),ue(S,{spacing:2,children:[ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Light angle",ue("span",{style:{float:"right"},children:[d,"°"]})]}),de($l,{min:0,max:360,step:5,value:d,onChange:(e,t)=>c(t)})]}),ue(h,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[de(ui,{label:"Inset bevel",checked:f,onChange:e=>b(e.target.checked)}),f&&ue(S,{spacing:1.5,sx:{mt:1.5},children:[ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Depth",ue("span",{style:{float:"right"},children:[u,"px"]})]}),de($l,{min:1,max:16,step:1,value:u,onChange:(e,t)=>p(t)})]}),ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Softness",ue("span",{style:{float:"right"},children:[m,"px"]})]}),de($l,{min:0,max:6,step:.5,value:m,onChange:(e,t)=>g(t)})]})]})]}),ue(h,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[de(ui,{label:"Drop shadow",checked:v,onChange:e=>x(e.target.checked)}),v&&ue(S,{spacing:1.5,sx:{mt:1.5},children:[ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Distance",ue("span",{style:{float:"right"},children:[y,"px"]})]}),de($l,{min:1,max:24,step:1,value:y,onChange:(e,t)=>w(t)})]}),ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Blur",ue("span",{style:{float:"right"},children:[k,"px"]})]}),de($l,{min:0,max:24,step:1,value:k,onChange:(e,t)=>B(t)})]}),ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Opacity",ue("span",{style:{float:"right"},children:[C,"%"]})]}),de($l,{min:10,max:100,step:5,value:C,onChange:(e,t)=>T(t)})]})]})]})]})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),ue(S,{spacing:2,children:[ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font size",ue("span",{style:{float:"right"},children:[A,"px"]})]}),de($l,{min:32,max:160,step:4,value:A,onChange:(e,t)=>z(t)})]}),ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font weight",de("span",{style:{float:"right"},children:I})]}),de($l,{min:400,max:900,step:100,value:I,onChange:(e,t)=>R(t)})]}),ue("div",{children:[ue(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Letter spacing",ue("span",{style:{float:"right"},children:[W,"px"]})]}),de($l,{min:-2,max:20,step:1,value:W,onChange:(e,t)=>D(t)})]})]})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PREVIEW BACKGROUND"}),de(S,{direction:"row",spacing:1,children:Kg.map(e=>de(_g,{label:e.label,selected:l===e.value,onClick:()=>s(e.value)},e.value))}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Showcase-only — doesn't affect the emitted code."})]})]})}),de(Ti,{value:2,children:ue(S,{spacing:2,sx:{p:3,maxWidth:560},children:[ue(xr,{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"," ",de("code",{children:'role="img"'})," and ",de("code",{children:"aria-label"})," to the rendered string so screen readers announce it as a labeled image, not a stream of glyphs."]}),de(sr,{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."})]})}),de(Ti,{value:3,children:de(pd,{component:"BevelText"})})]})})})]})]})}const af={outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},rf={opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"};function nf(e={}){const{selectedBg:t,selectedText:a,selectedHover:r,selectedPressed:n,muiPrefix:o}=e,i=o?"&.Mui-disabled":"&:disabled",l=o?"&.Mui-focusVisible":"&:focus-visible",s={"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},[l]:af,[i]:{...rf,color:"var(--Quiet)"}};return t?{...s,"&.Mui-selected":{backgroundColor:t,...a?{color:a}:{},"&:hover":{backgroundColor:r||"var(--Hover)"},"&:active":{backgroundColor:n||"var(--Pressed)"}}}:s}function of({open:e,onClose:a,items:r=[],onItemClick:n,width:o=280,variant:i="temporary",header:l,footer:s,sx:d={},...c}){const[u,m]=t(null),[g,f]=t({}),b=(e,t)=>{m(t),n?.(e),"temporary"===i&&a?.()},x="permanent"===i?"permanent":"standard"===i?"standard":"temporary",y=ue(h,{sx:{display:"flex",flexDirection:"column",height:"100%",backgroundColor:"var(--Container)",color:"var(--Text)"},children:[l&&de(h,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:"string"==typeof l?de(P,{variant:"h6",sx:{fontWeight:700},children:l}):l}),de(J,{sx:{flex:1,overflow:"auto",py:1},children:r.map((e,t)=>{const a=u===t,r=e.submenu&&e.submenu.length>0,n=g[t];return ue(h,{children:[de(v,{title:e.tooltip||"",placement:"right",children:de($,{disablePadding:!0,children:ue(K,{onClick:()=>{r?(e=>{f(t=>({...t,[e]:!t[e]}))})(t):b(e,t)},selected:a&&!r,sx:{backgroundColor:a&&!r?"var(--Buttons-Primary-Button)":"transparent",color:a&&!r?"var(--Buttons-Primary-Text)":"var(--Text)",...nf({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&&de(_,{sx:{color:a&&!r?"var(--Buttons-Primary-Text)":"var(--Icons-Primary)",minWidth:40},children:e.badge?de(p,{badgeContent:e.badge,variant:"error",children:e.icon}):e.icon}),de(ee,{primary:e.label,primaryTypographyProps:{variant:"body2",fontWeight:a&&!r?600:500}}),r&&de(h,{sx:{ml:1},children:de(n?fe:ge,{})})]})})}),r&&de(te,{in:n,timeout:"auto",unmountOnExit:!0,children:de(J,{component:"div",disablePadding:!0,children:e.submenu.map((e,t)=>de($,{disablePadding:!0,children:ue(K,{onClick:()=>b(e,t),sx:{pl:4,backgroundColor:"transparent",color:"var(--Text)",...nf({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&&de(_,{sx:{color:"var(--Icons-Primary)",minWidth:40},children:e.icon}),de(ee,{primary:e.label})]})},t))})}),e.divider&&de(ae,{sx:{my:1,borderColor:"var(--Border-Variant)"}})]},t)})}),s&&de(h,{sx:{borderTop:"1px solid var(--Border-Variant)",p:2},children:"string"==typeof s?de(P,{variant:"caption",sx:{color:"var(--Text-Quiet)"},children:s}):s})]});return"permanent"===i?de(h,{sx:{width:o,flexShrink:0,...d},children:y}):de(re,{variant:x,open:e,onClose:a,PaperProps:{sx:{width:o,backgroundColor:"var(--Container)",color:"var(--Text)",...d}},...c,children:y})}function lf({layout:e="side",navItems:a=[{label:"Home",icon:de(Re,{}),path:"/"},{label:"About",icon:de(Me,{}),path:"/about"},{label:"Settings",icon:de(De,{}),path:"/settings"},{label:"Help",icon:de(ua,{}),path:"/help"}],title:r="My App",children:n,onLayoutChange:o,onNavigate:i,sx:l={},...s}){const d=ne(),c=oe(d.breakpoints.down("md"));oe(d.breakpoints.down("lg"));const[u,p]=t(!1),[m,g]=t(!1),f=c?"top":e,b=({compact:e=!1})=>de(J,{sx:{py:1},children:a.map((t,a)=>de(v,{title:e?t.label:"",placement:"right",children:ue(K,{onClick:()=>{i?.(t),p(!1)},sx:{color:"var(--Text)",...nf({muiPrefix:!0}),transition:"all 0.2s ease-in-out",justifyContent:e?"center":"flex-start",px:e?1:2},children:[de(_,{sx:{color:"var(--Icons-Primary)",minWidth:e?"auto":40,mr:e?0:1},children:t.icon}),!e&&de(ee,{primary:t.label})]})},a))});return ue(h,{sx:{minHeight:"100vh",backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",flexDirection:"column",...l},...s,children:[de(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:ue(le,{children:[c&&"rail"!==f&&de(io,{variant:"ghost",onClick:()=>p(!u),"aria-label":u?"Close navigation":"Open navigation",sx:{mr:2},children:de(u?Vt:Qt,{})}),de(P,{variant:"h6",sx:{flex:1,fontWeight:700},children:r}),!c&&o&&ue(se,{value:e,exclusive:!0,onChange:(e,t)=>{t&&o(t)},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:[de(H,{value:"side","aria-label":"side nav",children:"☰ Side"}),de(H,{value:"rail","aria-label":"rail nav",children:"⫷ Rail"}),de(H,{value:"side-rail","aria-label":"side-rail nav",children:"☰⫷ Both"})]})]})}),ue(h,{sx:{display:"flex",flex:1},children:[("rail"===f||"side-rail"===f)&&!c&&de(h,{sx:{width:80,backgroundColor:"var(--Container)",borderRight:"1px solid var(--Border-Variant)",display:"flex",flexDirection:"column",py:2},children:de(b,{compact:!0})}),("side"===f||"side-rail"===f)&&!c&&ue(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:[ue(h,{sx:{p:2,display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid var(--Border-Variant)",minHeight:64},children:[!m&&de(P,{variant:"h6",sx:{fontWeight:700,color:"var(--Text)"},children:"Menu"}),de(io,{size:"small",variant:"ghost",onClick:()=>g(!m),"aria-label":m?"Expand navigation":"Collapse navigation",sx:{color:"var(--Icons-Primary)"},children:m?"›":"‹"})]}),de(b,{compact:m})]}),c&&ue(re,{anchor:"left",open:u,onClose:()=>p(!1),sx:{"& .MuiDrawer-paper":{backgroundColor:"var(--Container)",width:280}},children:[de(h,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:de(P,{variant:"h6",sx:{fontWeight:700},children:"Menu"})}),de(b,{compact:!1})]}),de(h,{sx:{flex:1,overflow:"auto",backgroundColor:"var(--Background)"},children:de(N,{maxWidth:"lg",sx:{py:4},children:n})})]})]})}const sf={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}},df={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 cf({label:e,icon:t,level:a=0,toggle:r="none",onToggle:n,disabled:o=!1,size:i="small",className:l="",sx:s={},children:d,...c}){const u=6===a&&"none"!==r?"none":r,p="on"===u,m="none"!==u,g=m?sf[a]||{padLeft:0,togglePadLeft:0}:df[a]||df[0],f={paddingTop:"8px",paddingRight:"8px",paddingBottom:"8px",paddingLeft:(g.padLeft??8)+"px"};return ue(h,{className:"tree-branch tree-branch-"+i+" tree-branch-level-"+a+" tree-branch-toggle-"+u+(o?" tree-branch-disabled":"")+(l?" "+l:""),sx:{width:"100%",...s},...c,children:[ue(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(),n?.(p?"off":"on"))},disabled:o,sx:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px",width:"100%",minHeight:"24px",...f,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&&de(h,{className:"tree-branch-toggle",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,paddingLeft:(g.togglePadLeft??0)+"px"},children:de(h,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",transition:"transform 0.2s ease",transform:p?"rotate(-90deg)":"rotate(0deg)"},children:de(un,{size:"small",children:de(Lt,{})})})}),ue(h,{className:"tree-branch-slot",sx:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px",flex:1,minWidth:0,...void 0!==g.slotPadLeft&&{paddingLeft:g.slotPadLeft+"px"}},children:[t&&de(h,{sx:{display:"inline-flex",alignItems:"center",flexShrink:0},children:de(un,{size:"small",children:t})}),null!=e&&de(dr,{style:{color:"inherit",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block",flex:1,minWidth:0},children:e})]})]}),p&&d&&de(h,{role:"group",sx:{display:"flex",flexDirection:"column"},children:d})]})}const uf=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",hf=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],pf=e=>de(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:e,flexShrink:0}}),mf=[{id:"1",label:"Documents",icon:de(oa,{}),badge:pf("var(--Warning-Text, orange)"),children:[{id:"1-1",label:"Company",icon:de(ha,{}),badge:pf("var(--Warning-Text, orange)"),children:[{id:"1-1-1",label:"Invoice",icon:de(ma,{})},{id:"1-1-2",label:"Meeting notes",icon:de(pa,{})},{id:"1-1-3",label:"Tasks list",icon:de(pa,{})},{id:"1-1-4",label:"Equipment",icon:de(ma,{})},{id:"1-1-5",label:"Video conference",icon:de(ga,{})}]},{id:"1-2",label:"Personal",icon:de(oa,{})},{id:"1-3",label:"Group photo",icon:de($t,{})}]},{id:"2",label:"Bookmarked",icon:de(ta,{}),children:[{id:"2-1",label:"Favourites",icon:de(pa,{})}]},{id:"3",label:"History",icon:de(oa,{})},{id:"4",label:"Trash",icon:de(We,{}),disabled:!0}],gf=JSON.stringify($p,null,2);function ff({ratio:e,threshold:t}){if(!e)return de(xr,{style:{color:"var(--Text-Quiet)"},children:"--"});const a=parseFloat(e)>=t;return ue(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ue(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:[e,":1"]}),de(xr,{style:{color:a?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:a?"Pass":"Fail"})]})}function bf({label:e,ratio:t,threshold:a,note:r}){return ue(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(h,{sx:{flex:1},children:[de(sr,{style:{color:"var(--Text)"},children:e}),r&&de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),de(ff,{ratio:t,threshold:a})]})}function vf({label:e,selected:t,onClick:a}){return de(oo,{selected:t,variant:t?"default":"default-outline",size:"small",onClick:a,children:e})}function xf({color:e,selected:t,onClick:a}){const r=uf(e);return de(h,{component:"button",onClick:()=>a(e),"aria-label":"Select "+r,"aria-pressed":t,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&de(me,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function yf({value:e,onChange:a}){const[r,n]=t(e),[o,i]=t(null);return ue(h,{children:[ue(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:1},children:[de(Ar,{style:{color:"var(--Text-Quiet)"},children:"TREE DATA (JSON)"}),de(oo,{variant:"ghost",size:"small",onClick:()=>{n(gf),i(null),a($p)},children:"Reset"})]}),de(h,{component:"textarea",value:r,onChange:e=>{n(e.target.value);try{const t=JSON.parse(e.target.value);i(null),a(t)}catch(e){i(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&&ue(xr,{style:{color:"#f87171",display:"block",marginTop:4},children:["JSON error: ",o]})]})}function wf(){const[e,a]=t("solid"),[i,l]=t("primary"),[s,d]=t("default"),[c,u]=t("slide"),[p,m]=t("single"),[g,f]=t(!1),[b,v]=t(!1),[x,y]=t(!1),[k,B]=t($p),[C,T]=t(null),[A,z]=t("Surface"),[I,R]=t({}),W=n(null),D=uf(i),F=x?mf:k,P=o((e,t)=>e&&getComputedStyle(e).getPropertyValue(t).trim()||null,[]);r(()=>{const e=setTimeout(()=>{const e=W.current;R({text:P(e,"--Text"),textQuiet:P(e,"--Text-Quiet"),background:P(e,"--Background"),border:P(e,"--Border"),focusVisible:P(e,"--Focus-Visible"),activeBtn:P(e,"--Buttons-"+D+"-Button"),activeBorder:P(e,"--Buttons-"+D+"-Border")})},50);return()=>clearTimeout(e)},[i,C,P,D]);return ue(h,{sx:{pb:8},children:[de($a,{children:"Tree View"}),ue(w,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ue(w,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[de(Ai,{ref:W,theme:C,children:de(h,{sx:{width:"100%",maxWidth:360},children:de(Jp,{color:i,variant:e,density:s,animation:c,selectionMode:p,checkboxSelection:g,disableSelection:b,items:F,defaultExpandedItems:["1","1-1","2"]})})}),de(Zo,{code:(()=>{const t=["<OmniTreeView"];return"default"!==i&&t.push(' color="'+i+'"'),"default"!==e&&t.push(' variant="'+e+'"'),"default"!==s&&t.push(' density="'+s+'"'),"slide"!==c&&t.push(' animation="'+c+'"'),"single"!==p&&t.push(' selectionMode="'+p+'"'),g&&t.push(" checkboxSelection"),b&&t.push(" disableSelection"),t.push(" items={treeData}"),t.push("/>"),t.join("\n")})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),de(w,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,alignSelf:"flex-start",minWidth:0,overflow:"hidden"},children:ue(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:[de(h,{sx:{mb:2},children:de(Li,{theme:C,onThemeChange:T,surface:A,onSurfaceChange:z})}),ue(ki,{defaultValue:0,variant:"standard",color:"primary",children:[ue(Bi,{children:[de(Ci,{children:"Summary"}),de(Ci,{children:"Playground"}),de(Ci,{children:"Accessibility"}),de(Ci,{children:"Change Log"})]}),de(Ti,{value:0,children:de(hd,{component:"TreeView",theme:C,surface:A})}),de(Ti,{value:1,children:ue(h,{sx:{p:3},children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),ue(S,{direction:"row",spacing:1,children:[de(vf,{label:"Solid",selected:"solid"===e,onClick:()=>a("solid")}),de(vf,{label:"Light",selected:"light"===e,onClick:()=>a("light")})]})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),de(S,{spacing:1.5,children:hf.map(e=>ue(h,{children:[de(xr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),de(S,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>de(xf,{color:e,selected:i===e,onClick:l},e))})]},e.label))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DENSITY"}),ue(S,{direction:"row",spacing:1,children:[de(vf,{label:"Compact",selected:"compact"===s,onClick:()=>d("compact")}),de(vf,{label:"Default",selected:"default"===s,onClick:()=>d("default")})]})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANIMATION"}),de(S,{direction:"row",spacing:1,children:["none","slide","spring"].map(e=>de(vf,{label:uf(e),selected:c===e,onClick:()=>u(e)},e))})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SELECTION MODE"}),ue(S,{direction:"row",spacing:1,children:[de(vf,{label:"Single",selected:"single"===p,onClick:()=>m("single")}),de(vf,{label:"Multi",selected:"multi"===p,onClick:()=>m("multi")})]})]}),ue(h,{sx:{mt:3},children:[de(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ue(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Show Icons"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Load sample data with icons and badges"})]}),de(ci,{checked:x,onChange:e=>y(e.target.checked),size:"small","aria-label":"Show icons"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Checkbox Selection"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show checkboxes for each item"})]}),de(ci,{checked:g,onChange:e=>f(e.target.checked),size:"small","aria-label":"Checkbox selection"})]}),ue(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ue(h,{children:[de(kr,{children:"Disable Selection"}),de(xr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Items are not selectable"})]}),de(ci,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Disable selection"})]})]}),!x&&de(h,{sx:{mt:3},children:de(yf,{value:gf,onChange:B})})]})}),de(Ti,{value:2,children:de(h,{sx:{p:3},children:ue(S,{spacing:3,children:[ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),de(bf,{label:"Resting: var(--Text-Quiet) vs. background",ratio:yo(I.textQuiet,I.background),threshold:4.5,note:"Unselected items use Text-Quiet"}),de(bf,{label:"Hover: var(--Text) vs. background",ratio:yo(I.text,I.background),threshold:4.5,note:"Hovered items use var(--Text)"}),de(bf,{label:"Active (solid): var(--Text) vs. var(--Buttons-"+D+"-Button)",ratio:yo(I.text,I.activeBtn),threshold:4.5,note:"Selected item with solid fill"})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),de(bf,{label:"var(--Focus-Visible) vs. background",ratio:yo(I.focusVisible,I.background),threshold:3,note:"outline: 2px solid var(--Focus-Visible); outline-offset: -2px"})]}),ue(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[de(_a,{children:"ARIA and Semantics"}),de(S,{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:t})=>ue(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ue(sr,{children:[e,":"]}),de(xr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:t})]},e))})]})]})})}),de(Ti,{value:3,children:de(pd,{component:"TreeView"})})]})]})})]})]})}function Sf(e,t){if(document.getElementById(t))return;const a=document.createElement("link");a.rel="stylesheet",a.href=e,a.id=t,document.head.appendChild(a)}const kf=[{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)"}],Bf={desktop:"32px","ios-mobile":"44px","ios-tablet":"44px",android:"48px"};function Cf(){const{mode:e,switchMode:a}=function(e="light"){const[a,n]=t(e);return r(()=>{Sf("/styles/foundation.css","css-foundation"),Sf("/styles/core.css","css-core"),Sf("/styles/Light-Mode.css","css-mode"),Sf("/styles/base.css","css-base"),Sf("/styles/typography-tokens.css","css-typography-tokens")},[]),{mode:a,switchMode:e=>{const t=document.getElementById("css-mode");t&&(t.href="dark"===e?"/styles/Dark-Mode.css":"/styles/Light-Mode.css"),n(e),localStorage.setItem("themeMode",e)}}}("light"),[n,o]=t(!1),[i,l]=t("desktop");r(()=>{const e=localStorage.getItem("dino-platform")||"desktop",t=localStorage.getItem("themeMode")||"light";l(e),document.documentElement.style.setProperty("--Button-Height",Bf[e]||"32px"),"dark"===t&&a("dark")},[]);const s=e=>{l(e),localStorage.setItem("dino-platform",e),document.documentElement.style.setProperty("--Button-Height",Bf[e]||"32px")};return ue(ce,{children:[de(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:de(ve,{sx:{fontSize:24}})}),de(Ep,{anchor:"right",open:n,onClose:()=>o(!1),hideBackdrop:!0,size:"small",sx:{width:320,zIndex:99999999},children:ue(h,{sx:{p:3,height:"100%",display:"flex",flexDirection:"column"},children:[ue(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:2},children:[de(_a,{children:"Settings"}),de(oo,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>o(!1),"aria-label":"Close settings",children:de(xe,{fontSize:"small"})})]}),de(ae,{sx:{mb:3,borderColor:"var(--Border)"}}),de(h,{sx:{flex:1,overflowY:"auto"},children:ue(S,{spacing:4,children:[ue(h,{children:[de(Ar,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"MODE"}),ue(S,{direction:"row",spacing:1,children:[de(oo,{variant:"light"===e?"primary":"primary-outline",size:"small",onClick:()=>a("light"),sx:{flex:1},children:"Light"}),de(oo,{variant:"dark"===e?"primary":"primary-outline",size:"small",onClick:()=>a("dark"),sx:{flex:1},children:"Dark"})]})]}),ue(h,{children:[de(Ar,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"PLATFORM"}),de(S,{spacing:1,children:kf.map(({value:e,label:t,note:a})=>{const r=i===e;return ue(h,{onClick:()=>s(e),sx:{p:1.5,borderRadius:"var(--Style-Border-Radius)",cursor:"pointer",border:r?"2px solid var(--Buttons-Primary-Button)":"1px solid var(--Border)",backgroundColor:r?"var(--Background)":"transparent",display:"flex",justifyContent:"space-between",alignItems:"center",transition:"all 0.15s ease","&:hover":{backgroundColor:"var(--Hover)"}},children:[ue(h,{children:[de(sr,{style:{color:r?"var(--Buttons-Primary-Button)":"var(--Text)",fontWeight:r?600:400},children:t}),de(xr,{style:{color:"var(--Text)",opacity:.7},children:a})]}),r&&de(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Buttons-Primary-Button)",flexShrink:0}})]},e)})})]})]})}),de(ae,{sx:{my:3,borderColor:"var(--Border)"}}),de(oo,{variant:"primary-outline",size:"small",onClick:()=>{s("desktop"),a("light")},sx:{width:"100%"},children:"Reset to Defaults"})]})})]})}const Tf=e=>(e||[]).map(e=>{const t="number"==typeof e?e:Number(e?.value);return Number.isFinite(t)?t:0}),Af=e=>(e||[]).map((e,t)=>"number"==typeof e?String(t+1):e?.label??String(t+1));function zf(e,{fromZero:t=!0}={}){if(!e.length)return{min:0,max:1};let a=Math.min(...e),r=Math.max(...e);return t&&(a=Math.min(0,a)),r===a&&(r=a+1),{min:a,max:r}}const If=(e,{min:t,max:a},r,n)=>r+n-(e-t)/(a-t)*n;function Rf(e,t,a,{inset:r=0}={}){if(e<=0)return[];if(1===e)return[t+a/2];const n=(a-2*r)/(e-1);return Array.from({length:e},(e,a)=>t+r+a*n)}function Wf(e,t,a,{gapRatio:r=.4}={}){if(e<=0)return{centres:[],bandWidth:0};const n=a/e,o=n*(1-r);return{centres:Array.from({length:e},(e,a)=>t+n*a+n/2),bandWidth:o}}const Df=e=>e.length?e.map((e,t)=>`${t?"L":"M"}${e.x} ${e.y}`).join(" "):"";function Ff(e,{tension:t=0}={}){if(e.length<2)return Df(e);const a=(1-t)/6;let r=`M${e[0].x} ${e[0].y}`;for(let t=0;t<e.length-1;t++){const n=e[t-1]||e[t],o=e[t],i=e[t+1],l=e[t+2]||i,s={x:o.x+(i.x-n.x)*a,y:o.y+(i.y-n.y)*a},d={x:i.x-(l.x-o.x)*a,y:i.y-(l.y-o.y)*a};r+=` C${s.x} ${s.y} ${d.x} ${d.y} ${i.x} ${i.y}`}return r}const Pf=(e,t,a)=>e&&t.length?`${e} L${t[t.length-1].x} ${a} L${t[0].x} ${a} Z`:"";function Lf(e,t,a,r,n,o){const i=o-n;if(i>=2*Math.PI-1e-9){const o=n+Math.PI;return Lf(e,t,a,r,n,o)+" "+Lf(e,t,a,r,o,n+2*Math.PI)}const l=(a,r)=>({x:e+a*Math.sin(r),y:t-a*Math.cos(r)}),s=i>Math.PI?1:0,d=l(r,n),c=l(r,o);if(a<=0)return`M${e} ${t} L${d.x} ${d.y} A${r} ${r} 0 ${s} 1 ${c.x} ${c.y} Z`;const u=l(a,o),h=l(a,n);return`M${d.x} ${d.y} A${r} ${r} 0 ${s} 1 ${c.x} ${c.y} L${u.x} ${u.y} A${a} ${a} 0 ${s} 0 ${h.x} ${h.y} Z`}function Hf(e,{startAngle:t=0}={}){const a=e.map(e=>e>0?e:0),r=a.reduce((e,t)=>e+t,0),n=e.filter(e=>e<=0).length;if(r<=0)return{slices:[],total:0,dropped:n};let o=t;return{slices:a.map(e=>{const t=e/r*Math.PI*2,a={start:o,end:o+t,value:e,fraction:e/r};return o+=t,a}),total:r,dropped:n}}function Nf({min:e,max:t},a=4){if(a<1)return[];const r=(t-e)/a,n=Math.pow(10,Math.floor(Math.log10(Math.abs(r)||1))),o=[1,2,2.5,5,10].map(e=>e*n).find(e=>e>=r)??10*n,i=[];for(let a=Math.ceil(e/o)*o;a<=t+1e-9;a+=o)i.push(Number(a.toFixed(10)));return i}var Mf=Object.freeze({__proto__:null,arcPath:Lf,areaPath:Pf,bands:Rf,extent:zf,linePath:Df,scaleY:If,sliceAngles:Hf,slots:Wf,smoothPath:Ff,ticks:Nf,toLabels:Af,toNumbers:Tf});const Of={fill:"var(--Icons-Primary)",track:"var(--Border-Variant)",line:"var(--Border-Variant)",quietLabel:"var(--Quiet)",label:"var(--Text)",gradient:"var(--Icons-Primary-Variant)"},Ef=["Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error"],Qf={fontFamily:"var(--Label-Small-Font-Family)",fontSize:"var(--Label-Small-Font-Size)",fontWeight:"var(--Label-Small-Font-Weight)",letterSpacing:"var(--Label-Small-Letter-Spacing)"},Vf={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 jf({caption:e,labels:t,values:a,valueHeader:r="Value"}){return ue(h,{component:"table",sx:Vf,children:[de("caption",{children:e}),de("thead",{children:ue("tr",{children:[de("th",{scope:"col",children:"Category"}),de("th",{scope:"col",children:r})]})}),de("tbody",{children:a.map((e,a)=>ue("tr",{children:[de("th",{scope:"row",children:t[a]}),de("td",{children:e})]},a))})]})}const Uf="var(--Motion-Duration-Slow, 300ms) var(--Motion-Easing-Enter, cubic-bezier(0, 0, 0, 1))",Gf="var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))";function Xf(t){const[a,r]=e.useState(-1),n=e.useCallback(e=>({onMouseEnter:()=>r(e),onMouseLeave:()=>r(t=>t===e?-1:t),onFocus:()=>r(e),onBlur:()=>r(t=>t===e?-1:t)}),[]);return e.useEffect(()=>{r(e=>e>=t?-1:e)},[t]),{active:a,setActive:r,handlers:n}}function qf({count:e,width:t,centres:a,bandWidth:r,labels:n,values:o,handlers:i}){return e?de(h,{sx:{position:"absolute",inset:0,display:"block",pointerEvents:"none"},children:Array.from({length:e},(e,l)=>de(h,{component:"button",type:"button","aria-label":`${n[l]}: ${o[l]}`,...i(l),sx:{position:"absolute",top:0,height:"100%",left:(a[l]-r/2)/t*100+"%",width:r/t*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:t,text:a,width:r,tokens:n}){if(null==a)return null;const o=Math.max(28,8*String(a).length+14),i=Math.min(Math.max(e,o/2+2),r-o/2-2),l=t-26>=2?t-26:t+6;return ue("g",{pointerEvents:"none",children:[de("rect",{x:i-o/2,y:l,width:o,height:20,rx:6,fill:n.fill}),de("text",{x:i,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:a})]})}function Zf({data:e=[],showTrack:a=!0,rounded:n=!0,showValues:o=!1,showLabels:i=!0,animate:l=!0,interactive:s=!0,height:d=200,gapRatio:c=.4,label:u,className:p="",sx:m={},...g}){const f=Tf(e),b=Af(e),{active:v,handlers:x}=Xf(f.length),[y,w]=t(!l);r(()=>{if(!l)return;const e=requestAnimationFrame(()=>w(!0));return()=>cancelAnimationFrame(e)},[l]);const S=320,k=o?20:8,B=i?22:8,C=Math.max(0,d-k-B),T=zf(f,{fromZero:!0}),{centres:A,bandWidth:z}=Wf(f.length,0,S,{gapRatio:c}),I=k+C,R=n?z/2:0,W=f.length?S/f.length:0;return ue(h,{component:"figure",className:"bar-chart "+p,sx:{display:"block",width:"100%",m:0,position:"relative",...m},...g,children:[ue("svg",{viewBox:`0 0 320 ${d}`,width:"100%",height:d,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[s&&v>=0&&de("rect",{x:A[v]-W/2,y:0,width:W,height:d,fill:"var(--Hover)",rx:6}),f.map((e,t)=>{const r=A[t]-z/2,n=If(e,T,k,C),o=Math.max(0,I-n);return ue("g",{children:[a&&de("rect",{x:r,y:k,width:z,height:C,rx:R,ry:R,fill:Of.track}),o>0&&de("rect",{x:r,y:n,width:z,height:o,rx:Math.min(R,o/2),ry:Math.min(R,o/2),fill:Of.fill,style:{transformBox:"fill-box",transformOrigin:"bottom",transform:y?"scaleY(1)":"scaleY(0)",transition:`transform ${Uf}`}})]},t)}),o&&f.map((e,t)=>de("text",{x:A[t],y:If(e,T,k,C)-6,textAnchor:"middle",fill:Of.label,...Qf,children:e},"v"+t)),i&&b.map((e,t)=>de("text",{x:A[t],y:d-6,textAnchor:"middle",fill:Of.quietLabel,...Qf,children:e},"l"+t)),s&&v>=0&&!o&&de(Yf,{x:A[v],y:If(f[v],T,k,C),text:f[v],width:S,tokens:Of})]}),s&&de(qf,{count:f.length,width:S,centres:A,bandWidth:W,labels:b,values:f,handlers:x}),de(jf,{caption:u||`Bar chart, ${f.length} values`,labels:b,values:f})]})}function Jf({data:e=[],curve:a="smooth",gradient:n=!0,fromZero:o=!1,showGrid:l=!1,showLabels:s=!1,animate:d=!0,interactive:c=!0,height:u=200,strokeWidth:p=3,tension:m=0,label:g,className:f="",sx:b={},...v}){const x="lc-"+i().replace(/:/g,""),y=Tf(e),w=Af(e),{active:S,handlers:k}=Xf(y.length),[B,C]=t(!d);r(()=>{if(!d)return;const e=requestAnimationFrame(()=>C(!0));return()=>cancelAnimationFrame(e)},[d]);const T=320,A=s?22:8,z=Math.max(0,u-8-A),I=zf(y,{fromZero:o}),R=Rf(y.length,0,T,{inset:p}),W=y.map((e,t)=>({x:R[t],y:If(e,I,8,z)})),D="straight"===a?Df(W):Ff(W,{tension:m}),F=8+z;return ue(h,{component:"figure",className:"line-chart "+f,sx:{display:"block",width:"100%",m:0,position:"relative",...b},...v,children:[ue("svg",{viewBox:`0 0 320 ${u}`,width:"100%",height:u,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[n&&de("defs",{children:ue("linearGradient",{id:x,x1:"0",y1:"0",x2:"0",y2:"1",children:[de("stop",{offset:"0%",stopColor:Of.gradient,stopOpacity:"1"}),de("stop",{offset:"100%",stopColor:Of.gradient,stopOpacity:"0"})]})}),l&&Nf(I,4).map(e=>de("line",{x1:0,x2:T,y1:If(e,I,8,z),y2:If(e,I,8,z),stroke:Of.line,strokeWidth:"1"},e)),n&&W.length>1&&de("path",{d:Pf(D,W,F),fill:`url(#${x})`,style:{opacity:B?1:0,transition:`opacity ${Uf}`}}),W.length>1&&de("path",{d:D,fill:"none",stroke:Of.fill,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",pathLength:"1",style:{strokeDasharray:1,strokeDashoffset:B?0:1,transition:`stroke-dashoffset ${Uf}`}}),1===W.length&&de("circle",{cx:W[0].x,cy:W[0].y,r:p,fill:Of.fill}),c&&S>=0&&ue(ce,{children:[de("line",{x1:R[S],x2:R[S],y1:8,y2:F,stroke:Of.line,strokeWidth:"1"}),de("circle",{cx:W[S].x,cy:W[S].y,r:p+1,fill:Of.fill,stroke:"var(--Background)",strokeWidth:"2"}),de(Yf,{x:W[S].x,y:W[S].y,text:y[S],width:T,tokens:Of})]}),s&&w.map((e,t)=>de("text",{x:R[t],y:u-6,textAnchor:"middle",fill:Of.quietLabel,...Qf,children:e},t))]}),c&&de(qf,{count:y.length,width:T,centres:R,bandWidth:y.length?T/y.length:0,labels:w,values:y,handlers:k}),de(jf,{caption:g||`Line chart, ${y.length} points`,labels:w,values:y})]})}function $f({data:e=[],donut:a=!1,donutRatio:n=.6,colors:o=Ef,separatorWidth:i=2,size:l=200,showLabels:s=!1,animate:d=!0,interactive:c=!0,label:u,className:p="",sx:m={},...g}){const f=Tf(e),b=Af(e),{slices:v,total:x,dropped:y}=Hf(f),{active:w,handlers:S}=Xf(f.length),[k,B]=t(!d);r(()=>{if(!d)return;const e=requestAnimationFrame(()=>B(!0));return()=>cancelAnimationFrame(e)},[d]);const C=l/2,T=l/2,A=l/2-1,z=a?A*n:0,I=e=>{return{fill:`var(--Icons-${t=o[e%o.length]})`,onFill:`var(--Icons-On-${t})`};var t};return ue(h,{component:"figure",className:"pie-chart "+p,sx:{display:"block",m:0,position:"relative",...m},...g,children:[ue("svg",{viewBox:`0 0 ${l} ${l}`,width:l,height:l,focusable:"false","aria-hidden":"true",children:[v.map((e,t)=>{const a=(e.start+e.end)/2,r=c&&w===t?4:0;return de("path",{d:Lf(C,T,z,A,e.start,e.end),fill:I(t).fill,stroke:"var(--Background)",strokeWidth:i,strokeLinejoin:"round",...c?S(t):{},style:{transform:`translate(${r*Math.sin(a)}px, ${-r*Math.cos(a)}px) scale(${k?1:0})`,transformOrigin:`${C}px ${T}px`,transformBox:"view-box",transition:`transform ${k?Gf:Uf}`}},t)}),s&&v.map((e,t)=>{const a=(e.start+e.end)/2,r=z+.62*(A-z);return e.fraction<.07?null:de("text",{x:C+r*Math.sin(a),y:T-r*Math.cos(a),textAnchor:"middle",dominantBaseline:"middle",fill:I(t).onFill,...Qf,children:b[t]},t)})]}),de(jf,{caption:(u||`${a?"Donut":"Pie"} chart, ${v.length} segments`)+(y?`, ${y} non-positive values omitted`:""),labels:b,values:f})]})}const Kf={empty:{icon:de(fa,{}),iconColor:"quiet",titleColor:"header",role:void 0},"no-results":{icon:de(ba,{}),iconColor:"quiet",titleColor:"header",role:void 0},error:{icon:de(va,{}),iconColor:"error",titleColor:"error",role:"alert"}},_f={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 eb({type:e="empty",icon:t,title:a,body:r,action:n,size:o="medium",className:l="",sx:s={},...d}){const c=Kf[e]||Kf.empty,u=_f[o]||_f.medium,p="small"===o?sr:ur,m=i(),g=a?m+"-title":void 0,f=r?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."),ue(h,{className:"state-message state-message-"+e+" state-message-"+o+" "+l,role:c.role||"group","aria-labelledby":g,"aria-describedby":f,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:[de(un,{size:u.icon,color:c.iconColor,"aria-hidden":"true",children:t||c.icon}),a&&de(rr,{id:g,color:c.titleColor,children:a}),r&&de(p,{id:f,color:"quiet",sx:{maxWidth:u.maxWidth},children:r}),n&&de(h,{sx:{marginTop:"4px"},children:n})]})}const tb=[{name:"Theme",moves:"the whole surface — background, text, border, quiet, hover, pressed",inCode:"`data-theme` on the element or any ancestor",inFigma:"set the Theme mode on a `Theme-*` layer"},{name:"Buttons",moves:"an accent fill and its border, hover and pressed",inCode:'the `variant` / `color` prop — `variant="success"`',inFigma:"set the Buttons mode on a `Button-Theme-*` layer"},{name:"Icons",moves:"an icon or badge colour, plus its variant and on-colour",inCode:'the `color` prop on `Icon` — `<Icon color="primary">`',inFigma:"set the Icons mode on an `Icon-Theme-*` layer"}];function ab(){const e=["## How colour works","","Three mode collections carry colour, and they are not interchangeable.","Changing the right node in the wrong collection appears to do nothing —","it does not error.",""];e.push("| Collection | What it moves | In code | In Figma |"),e.push("| --- | --- | --- | --- |");for(const t of tb)e.push(`| **${t.name}** | ${t.moves} | ${t.inCode} | ${t.inFigma} |`);return e.push("","A `Theme-*`, `Button-Theme-*` or `Icon-Theme-*` layer marks **where** a","mode goes. Most are unpinned, which means the component inherits — set the","mode on the frame around it. A pinned one is a deliberate choice: Alert","pins Error and Warning because there the colour *is* the message.","","A component with no such layer has nothing of its own to recolour.",""),e.join("\n")}const rb=e=>e.replace(/\|/g,"\\|"),nb=(e,t)=>[`| ${e.join(" | ")} |`,`| ${e.map(()=>"---").join(" | ")} |`,...t.map(e=>`| ${e.map(rb).join(" | ")} |`)],ob=(e,t)=>t.length?[`### ${e}`,"",...t.map(e=>`- ${e}`),""]:[];function ib(e,t=""){const a=[`## ${e.name}`,"",e.summary,""];if(e.insteadUse.length&&(a.push("### Reach for something else when",""),a.push(...e.insteadUse.map(e=>`- ${e.when} → \`${e.use}\``)),a.push("")),e.props.length){a.push("### Props",""),a.push(...nb(["Prop","Type","Values","Default"],e.props.map(e=>[`\`${e.name}\``,e.type,e.values?.length?e.values.map(e=>`\`${e}\``).join(" · "):"—",`\`${e.default}\``])));const t=e.props.filter(e=>e.note);t.length&&(a.push(""),a.push(...t.map(e=>`- \`${e.name}\` — ${e.note}`))),a.push("")}if(e.states.length){a.push("### States",""),a.push(...nb(["State","Set by"],e.states.map(e=>[e.state,"interaction"===e.setBy?"interaction — not a prop":e.setBy])));const t=e.states.filter(e=>e.note);t.length&&(a.push(""),a.push(...t.map(e=>`- ${e.state} — ${e.note}`))),a.push("")}e.theming.length&&(a.push("### Theming",""),a.push(...nb(["Collection","In code","In Figma"],e.theming.map(e=>["—"===e.collection?"—":`**${e.collection}**`,e.inCode,e.inFigma]))),e.themingNotes?.length&&(a.push(""),a.push(...e.themingNotes.map(e=>`- ${e}`))),a.push("")),e.tokens.length&&(a.push("### Tokens it reads",""),a.push(...nb(["Token","Sets","Varies with","Figma variable"],e.tokens.map(e=>[`\`${e.name}\``,e.sets,e.variesWith,"—"===e.figma?"—":`\`${e.figma}\``]))),a.push("")),a.push(...ob("Composition",e.composition)),a.push(...ob("Accessibility",e.accessibility)),a.push(...ob("Gotchas",e.gotchas));const r=t;return r.length&&a.push(...r,""),a.join("\n").replace(/\n{3,}/g,"\n\n").trimEnd()+"\n"}const lb=[{title:"Platforms, not breakpoints",lede:"There are no media queries in this system. Not one.",body:["Responsive behaviour comes from a `data-platform` attribute on the root element, not from viewport width. Set it and every metric changes at once — the type ramp, button heights, icon sizes, touch targets, bar heights.","The reason is that these are not width decisions. A 28px Android button and a 44px iOS one are the two vendors' published minimums, not two points on a curve; a media query would have to invent a width at which one becomes the other."],table:{head:["Attribute","Covers"],rows:[['`[data-platform="Desktop"]`',"desktop, and the default"],['`[data-platform="IOS-Mobile"]`',"iPhone"],['`[data-platform="IOS-Tablet"]`',"iPad, both orientations"],['`[data-platform="Android"]`',"Android phone and tablet"]]},trap:"Do not write `@media (min-width: …)` against these tokens. A breakpoint cannot change them — they are attribute-scoped — so the rule will appear to do nothing, and adding your own values fights the attribute rather than extending it."},{title:"Surfaces",lede:"Ten levels, and `data-theme` + `data-surface` is how you paint anything.",body:["Setting both attributes exposes a whole matched set — `--Background`, `--Text`, `--Quiet`, `--Header`, `--Border`, `--Border-Variant`, `--Hover`, `--Pressed`, `--Hotlink` — all tuned for that surface's tone.","Writing `background: var(--Surface)` paints the box and leaves the text, borders and states on the PARENT's tone. It looks right until the surface flips dark or moves a level, and then the contrast breaks with nothing to point at.",'Use `<Section theme="Primary" surface="Surface">` where you want the attributes AND the paint; `<ThemedZone>` where you want the attributes only, because something inside paints itself.'],table:{head:["Group","Levels"],rows:[["Surface","`Surface` · `Surface-Dim` · `Surface-Dimmest` · `Surface-Bright` · `Surface-Brightest`"],["Container","`Container` · `Container-Low` · `Container-Lowest` · `Container-High` · `Container-Highest`"]]},trap:"Never `background: var(--Surface)` or `var(--Container)`. Those exist so the system can COMPUTE `--Background`; components read `--Background`, which is what `data-surface` resolves to."},{title:"Static and dynamic typography",lede:"Two type systems, and which one applies depends on the platform.",body:["STATIC type is the brand's own ramp: one set of sizes, generated from the type scale, used on Desktop. Its line heights come out of the generated block and are already a clean ramp — `max(size × 1.15, size + 8)` holds exactly for H1 through H5 without anyone having written that rule down.","DYNAMIC type is the platform's. On iOS the sizes and line heights come from Apple's Dynamic Type table; on Android from Material 3. These are published tables, not curves, so they are transcribed rather than derived — running a brand ratio over them produces numbers neither vendor specifies.","Line height on the mobile platforms is COMPUTED from the platform table rather than read from the stylesheet. The static mobile blocks set every heading solid at 1.0, which clips in Figma — a text box IS its line height and a descender has nowhere to go — and carried two values that could not be right at all.","Desktop is deliberately left alone: its block is generated rather than static and is already correct. Running the platform curve over it would have loosened Legal to 1.80 and Label-ExtraSmall to 1.73, because the `+8` was fitted to the middle of the range where the platforms add 2–5px at the bottom."],trap:'Do not "fix" a mobile line height by editing the static block. On iOS and Android it is derived from the platform table at generate time and your value will be replaced — which is the point, because it is what stops the two impossible numbers recurring.'},{title:"Spacing",lede:"One scale, in 8px steps with two fractions below it.",body:["Everything that is a gap or a padding comes from here. A radius does NOT: a corner is a different axis, and binding one to a spacing token welds two independent things together — which is exactly what happened to the list row, whose radius and padding were both `Sizing-1` and could not move apart.","The 24px minimum touch target is `--Sizing-3`, not a control-specific token. It already exists on this scale, and a second name for one number is how two numbers appear."],table:{head:["Token","px","Typical use"],rows:[["`--Sizing-Quarter`","2","hairlines, the tab indicator track"],["`--Sizing-Half`","4","tight internal gaps"],["`--Sizing-1`","8","the default gap and row padding"],["`--Sizing-1-and-Half`","12","a row's internal gap"],["`--Sizing-2`","16","card padding"],["`--Sizing-3`","24","**the minimum touch target** (WCAG 2.5.8)"],["`--Sizing-4` … `--Sizing-12`","32 … 96","section and layout spacing"]]},trap:"If you are reaching for a spacing token to set a radius, stop. Radii have their own tokens per component — `--Card-Radius`, `--Button-Radius`, `--List-Item-Radius` — and they derive from the brand's corner setting, not from the spacing scale."},{title:"Elevation",lede:"Five levels, and a component's level is a property of the component.",body:["A shadow's alpha is FLAT per level — `alpha = TOTAL[level] / N` — so raising the resolution of a shadow redistributes its opacity without changing it. A slider cannot make a shadow heavier; elevation lives in the total and the geometry.","A bevel and a drop shadow are different things. A bevel lights the component's OWN surface and follows its theme; a drop shadow falls on the PAGE and must read the page's theme. That is why a themed component puts its theme on an inner `Theme-*` layer and leaves the shadow on an outer node that inherits."],table:{head:["Component","Rest","Hover"],rows:[["Button, outlined Card","0","1"],["Handle, Accordion","1","—"],["Card, Bottom Sheet","1","2"],["AppBar, Toolbar, Menu","2","—"],["FAB","3","4"],["Dialog, Modal","5","—"]]},trap:"A button is flat at rest and earns its shadow by being hovered. A Dialog is already at the top of the stack and cannot be raised — `elevated` on one does nothing."},{title:"The Alt Display",lede:"A decorative display face with a gradient, and every brand gets one.",body:["The gradient comes in two kinds, and the palette decides which — not whether. Denying the treatment to the roughly half of brands whose Primary and Secondary sit far apart on the wheel would make it a lottery.","**duo** — Header-Primary to Header-Secondary, when the two hues are near enough to blend.","**mono** — Header-Primary to a lighter or darker shade of ITSELF, chosen against the background. One hue, so it cannot collide.","A brand whose palette cannot be read at all lands on `mono`, because that is the treatment that needs only one hue to be known. A grey Secondary counts as maximally distant rather than as zero — a grey blended into a coloured Primary looks like a rendering fault, and zero would be the one answer that turns the gradient on.","Solid Header-Secondary is the sibling VARIANT, not the failure case: a designer picks between them. Two values are fine when something selects between them, and here the selector is a person.","Its WEIGHT is a contrast with Display's, in whichever direction has room — a drop alone cannot work at both ends, because a Display already at 600 has nowhere light to go without becoming thin at Alt-Display-Small."],trap:"The gradient is not a brand choice to override with two colours of your own. It is derived from the palette, and hand-picking the stops produces a pair nothing guarantees is legible against the background."},{title:"States are generated, not chosen",lede:"Hover, pressed, focus and disabled are computed to stay accessible.",body:["Every clickable thing needs all four. They come from curated per-surface tables tuned to WCAG rather than from a formula applied blindly, so they are accessible by construction — a hover tone is picked to move AWAY from the text sitting on it, not by stepping an index.","Direction is decided by the LABEL, not by the tone number. The index is a proxy that assumes every palette's text flips at tone 6, and the one palette where it does not took a 4.54:1 button to 2.17:1.","A narrow pass is a pass. Do not pad a value that already meets its threshold."],trap:"Never invent a hover or focus colour. Links in particular have NO hover tone — the underline thickens instead — and any value you supply would be unverified against a 4.5:1 requirement."}];function sb(){const e=["# Foundations",""];for(const t of lb)e.push(`## ${t.title}`,"",`*${t.lede}*`,""),e.push(...t.body.map(e=>e+"\n")),t.table&&(e.push(`| ${t.table.head.join(" | ")} |`),e.push(`| ${t.table.head.map(()=>"---").join(" | ")} |`),e.push(...t.table.rows.map(e=>`| ${e.join(" | ")} |`)),e.push("")),t.trap&&e.push(`> **Trap.** ${t.trap}`,"");return e.join("\n").replace(/\n{3,}/g,"\n\n").trimEnd()+"\n"}var db={};export{Is as Accordion,Fs as AccordionDetails,zs as AccordionGroup,Ds as AccordionSummary,ni as Alert,Tp as AlertDialog,Qi as AlertShowcase,rg as AppBar,hg as AppBarShowcase,Vc as Autocomplete,Yc as AutocompleteShowcase,vn as Avatar,xn as AvatarGroup,pl as AvatarShowcase,An as Badge,ai as BadgeShowcase,Zf as BarChart,Jg as BevelText,tf as BevelTextShowcase,xc as BlackWhiteToggleButtonGroup,ur as Body,mr as Body1,gr as Body2,pr as BodyBold,fr as BodyLarge,vr as BodyLargeBold,br as BodyLargeSemibold,hr as BodySemibold,sr as BodySmall,cr as BodySmallBold,dr as BodySmallSemibold,ch as BottomNavigation,kh as BottomNavigationShowcase,xu as Box,ku as BoxShowcase,os as BreadcrumbItem,ns as Breadcrumbs,ss as BreadcrumbsShowcase,oo as Button,ks as ButtonGroup,Or as ButtonSmall,Er as ButtonText,Ga as CAP_HEIGHT_TRIM,Qf as CHART_LABEL_TYPE,Of as CHART_TOKENS,tb as COLOUR_COLLECTIONS,ln as COMPONENT_DOCS,xr as Caption,yr as CaptionBold,Gi as Card,Os as CenteredStack,ol as Checkbox,fo as Chip,bm as CircularProgress,Sm as CircularProgressShowcase,Zo as CodeBlock,gd as Colors,Bu as Container,Yo as CopyButton,mg as Copyright,Fg as CopyrightShowcase,Vg as CurvedText,Yg as CurvedTextShowcase,hn as DEFAULT_AVATAR_SRC,$p as DEFAULT_ITEMS,rd as DOCS_ORIGIN,mc as DefaultToggleButtonGroup,tg as DesktopAppBar,Cp as Dialog,Ip as DialogShowcase,Xa as DisplayLarge,qa as DisplayMedium,Ya as DisplaySmall,Dl as Divider,Lm as DotsLoader,Ep as Drawer,Qp as DrawerClose,jp as DrawerContent,Vp as DrawerHeader,rm as DrawerShowcase,om as DropZone,Xu as Dropdown,Hs as DynoStack,Jp as DynoTreeView,ed as EXAMPLES,Cc as EmailTextField,hu as ErrorTag,kc as ErrorToggleButtonGroup,zr as Eyebrow,Rr as EyebrowLarge,Ir as EyebrowMedium,Ar as EyebrowSmall,lb as FOUNDATIONS,Dd as Fab,Od as FabShowcase,fg as Footer,Rg as FooterShowcase,Ap as FormDialog,Sa as Ghost,qh as Gradient,Cu as Grid,Us as GridStack,Za as H1,Ja as H2,$a as H3,Ka as H4,_a as H5,er as H6,Ns as HStack,tr as Heading,un as Icon,Cd as IconBadge,Id as IconBadgeShowcase,kl as IconShowcase,du as InfoTag,yc as InfoToggleButtonGroup,Xs as InsetStack,kr as Label,wr as LabelExtraSmall,Br as LabelLarge,Sr as LabelSmall,Cr as Legal,Tr as LegalSemibold,_p as LightTreeView,Jf as LineChart,Yh as LinearGradient,Fm as LinearLoader,Cm as LinearProgress,Rm as LinearProgressShowcase,Al as Link,Um as List,jm as ListItem,Vm as ListItemDecorator,Dm as Loader,lf as MainLayout,Yu as Menu,qu as MenuButton,Ju as MenuDivider,Zu as MenuItem,th as MenuShowcase,$h as MeshCardGradient,Jh as MeshGradient,wd as MiniSwatch,ag as MobileAppBar,Lp as Modal,su as NeutralTag,vc as NeutralToggleButtonGroup,rc as NumberField,sc as NumberFieldShowcase,Nr as NumberLarge,Hr as NumberMedium,Lr as NumberSmall,zc as NumberTextField,pp as OmniDesignProvider,Hs as OmniStack,Jp as OmniTreeView,Mm as OverlayLoader,Dr as Overline,Pr as OverlineLarge,Fr as OverlineMedium,Wr as OverlineSmall,Hm as PageLoader,cs as Pagination,gs as PaginationShowcase,Kh as Paper,Tc as PasswordTextField,Ic as PhoneTextField,$f as PieChart,_h as Popover,ou as PrimaryTag,gc as PrimaryToggleButtonGroup,zu as RATIO_NAMES,Zh as RadialGradient,Xl as Radio,ql as RadioGroup,Yl as RadioInput,Ud as Rail,Zd as RailShowcase,_l as RangeSlider,as as Rating,as as RatingInput,Du as Ratio,Ou as RatioShowcase,Vs as ResponsiveStack,qs as ScrollStack,Jc as SearchField,tu as SearchFieldShowcase,Ac as SearchTextField,iu as SecondaryTag,fc as SecondaryToggleButtonGroup,Tu as Section,Au as SectionShowcase,Wi as Select,Oc as SelectShowcase,qi as SelectableCard,Cf as SettingsPanel,of as Sidebar,Nm as SkeletonCard,Pm as SkeletonLoader,Kl as Slider,Kl as SliderInput,sm as Snackbar,mm as SnackbarShowcase,Kp as SolidTreeView,Es as SpaceBetweenStack,fd as Spacing,Hh as SpeedDial,Vh as SpeedDialShowcase,js as Stack,Gs as StackDivider,_s as StackShowcase,eb as StateMessage,Ih as Step,zh as Stepper,Lh as StepperShowcase,rr as Subtitle,ir as Subtitle1,lr as Subtitle2,ar as SubtitleLarge,or as SubtitleMedium,nr as SubtitleSmall,cu as SuccessTag,wc as SuccessToggleButtonGroup,fp as Surfaced,yd as Swatch,ui as Switch,ui as SwitchInput,au as TAG_COLORS,ru as TAG_COLOR_TOKEN_MAP,Ci as Tab,Bi as TabList,Ti as TabPanel,qm as Table,ki as Tabs,ws as TabsShowcase,nu as Tag,bu as TagShowcase,lu as TertiaryTag,bc as TertiaryToggleButtonGroup,Wc as TextArea,Bc as TextField,Dc as TextFieldGroup,Ql as TextInput,gp as ThemedZone,cc as ToggleButton,hc as ToggleButtonGroup,$d as Toolbar,tc as ToolbarShowcase,Km as Tooltip,cf as TreeBranch,wf as TreeViewShowcase,Ua as Typography,Rc as URLTextField,Ms as VStack,uu as WarningTag,Sc as WarningToggleButtonGroup,Qs as WrapStack,Mf as chartGeometry,id as componentDocsIndexUrl,od as componentDocsUrl,db as default,nd as docsSlug,wa as ghostBlockSx,td as hasExample,ab as renderColourSystem,ib as renderComponentDoc,sb as renderFoundations,ya as useGhost,mp as useOmniDesign,Ah as useStepperContext,Si as useTabsContext};
15
15
  //# sourceMappingURL=index.esm.js.map