@omni-design/components 0.14.0 → 0.14.1

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 (6) hide show
  1. package/dist/index.esm.js +1 -1
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/public/styles/base.css +5 -0
package/dist/index.esm.js CHANGED
@@ -16,5 +16,5 @@ import e,{useState as a,useEffect as t,useRef as r,useCallback as i,forwardRef a
16
16
  object-assign
17
17
  (c) Sindre Sorhus
18
18
  @license MIT
19
- */function Qb(){if(Ab)return Tb;Ab=1;var e=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;return Tb=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 a={},t=0;t<10;t++)a["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(a).map(function(e){return a[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,i){for(var n,o,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(r),c=1;c<arguments.length;c++){for(var s in n=Object(arguments[c]))a.call(n,s)&&(l[s]=n[s]);if(e){o=e(n);for(var d=0;d<o.length;d++)t.call(n,o[d])&&(l[o[d]]=n[o[d]])}}return l},Tb}function jb(){if(Ib)return Lb;Ib=1;return Lb="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}function qb(){return Wb?Nb:(Wb=1,Nb=Function.call.bind(Object.prototype.hasOwnProperty))}if("production"!==process.env.NODE_ENV){var Gb=Vb();wb.exports=function(){if(Pb)return Fb;Pb=1;var e=Vb(),a=Qb(),t=jb(),r=qb(),i=function(){if(Rb)return Db;Rb=1;var e=function(){};if("production"!==process.env.NODE_ENV){var a=jb(),t={},r=qb();e=function(e){var a="Warning: "+e;"undefined"!=typeof console&&console.error(a);try{throw new Error(a)}catch(e){}}}function i(i,n,o,l,c){if("production"!==process.env.NODE_ENV)for(var s in i)if(r(i,s)){var d;try{if("function"!=typeof i[s]){var u=Error((l||"React class")+": "+o+" type `"+s+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof i[s]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw u.name="Invariant Violation",u}d=i[s](n,s,l,o,null,a)}catch(e){d=e}if(!d||d instanceof Error||e((l||"React class")+": type specification of "+o+" `"+s+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof d+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),d instanceof Error&&!(d.message in t)){t[d.message]=!0;var h=c?c():"";e("Failed "+o+" type: "+d.message+(null!=h?h:""))}}}return i.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(t={})},Db=i}(),n=function(){};function o(){return null}return"production"!==process.env.NODE_ENV&&(n=function(e){var a="Warning: "+e;"undefined"!=typeof console&&console.error(a);try{throw new Error(a)}catch(e){}}),Fb=function(l,c){var s="function"==typeof Symbol&&Symbol.iterator,d="<<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:p(o),arrayOf:function(e){return p(function(a,r,i,n,o){if("function"!=typeof e)return new m("Property `"+o+"` of component `"+i+"` has invalid PropType notation inside arrayOf.");var l=a[r];if(!Array.isArray(l))return new m("Invalid "+n+" `"+o+"` of type `"+v(l)+"` supplied to `"+i+"`, expected an array.");for(var c=0;c<l.length;c++){var s=e(l,c,i,n,o+"["+c+"]",t);if(s instanceof Error)return s}return null})},element:p(function(e,a,t,r,i){var n=e[a];return l(n)?null:new m("Invalid "+r+" `"+i+"` of type `"+v(n)+"` supplied to `"+t+"`, expected a single ReactElement.")}),elementType:p(function(a,t,r,i,n){var o=a[t];return e.isValidElementType(o)?null:new m("Invalid "+i+" `"+n+"` of type `"+v(o)+"` supplied to `"+r+"`, expected a single ReactElement type.")}),instanceOf:function(e){return p(function(a,t,r,i,n){if(!(a[t]instanceof e)){var o=e.name||d;return new m("Invalid "+i+" `"+n+"` of type `"+((l=a[t]).constructor&&l.constructor.name?l.constructor.name:d)+"` supplied to `"+r+"`, expected instance of `"+o+"`.")}var l;return null})},node:p(function(e,a,t,r,i){return b(e[a])?null:new m("Invalid "+r+" `"+i+"` supplied to `"+t+"`, expected a ReactNode.")}),objectOf:function(e){return p(function(a,i,n,o,l){if("function"!=typeof e)return new m("Property `"+l+"` of component `"+n+"` has invalid PropType notation inside objectOf.");var c=a[i],s=v(c);if("object"!==s)return new m("Invalid "+o+" `"+l+"` of type `"+s+"` supplied to `"+n+"`, expected an object.");for(var d in c)if(r(c,d)){var u=e(c,d,n,o,l+"."+d,t);if(u instanceof Error)return u}return null})},oneOf:function(e){return Array.isArray(e)?p(function(a,t,r,i,n){for(var o=a[t],l=0;l<e.length;l++)if(h(o,e[l]))return null;var c=JSON.stringify(e,function(e,a){return"symbol"===x(a)?String(a):a});return new m("Invalid "+i+" `"+n+"` of value `"+String(o)+"` supplied to `"+r+"`, expected one of "+c+".")}):("production"!==process.env.NODE_ENV&&n(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."),o)},oneOfType:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&n("Invalid argument supplied to oneOfType, expected an instance of array."),o;for(var a=0;a<e.length;a++){var i=e[a];if("function"!=typeof i)return n("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+y(i)+" at index "+a+"."),o}return p(function(a,i,n,o,l){for(var c=[],s=0;s<e.length;s++){var d=(0,e[s])(a,i,n,o,l,t);if(null==d)return null;d.data&&r(d.data,"expectedType")&&c.push(d.data.expectedType)}return new m("Invalid "+o+" `"+l+"` supplied to `"+n+"`"+(c.length>0?", expected one of type ["+c.join(", ")+"]":"")+".")})},shape:function(e){return p(function(a,r,i,n,o){var l=a[r],c=v(l);if("object"!==c)return new m("Invalid "+n+" `"+o+"` of type `"+c+"` supplied to `"+i+"`, expected `object`.");for(var s in e){var d=e[s];if("function"!=typeof d)return g(i,n,o,s,x(d));var u=d(l,s,i,n,o+"."+s,t);if(u)return u}return null})},exact:function(e){return p(function(i,n,o,l,c){var s=i[n],d=v(s);if("object"!==d)return new m("Invalid "+l+" `"+c+"` of type `"+d+"` supplied to `"+o+"`, expected `object`.");var u=a({},i[n],e);for(var h in u){var p=e[h];if(r(e,h)&&"function"!=typeof p)return g(o,l,c,h,x(p));if(!p)return new m("Invalid "+l+" `"+c+"` key `"+h+"` supplied to `"+o+"`.\nBad object: "+JSON.stringify(i[n],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var f=p(s,h,o,l,c+"."+h,t);if(f)return f}return null})}};function h(e,a){return e===a?0!==e||1/e==1/a:e!=e&&a!=a}function m(e,a){this.message=e,this.data=a&&"object"==typeof a?a:{},this.stack=""}function p(e){if("production"!==process.env.NODE_ENV)var a={},r=0;function i(i,o,l,s,u,h,p){if(s=s||d,h=h||l,p!==t){if(c){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=s+":"+l;!a[g]&&r<3&&(n("You are manually calling a React.PropTypes validation function for the `"+h+"` prop on `"+s+"`. 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."),a[g]=!0,r++)}}return null==o[l]?i?null===o[l]?new m("The "+u+" `"+h+"` is marked as required in `"+s+"`, but its value is `null`."):new m("The "+u+" `"+h+"` is marked as required in `"+s+"`, but its value is `undefined`."):null:e(o,l,s,u,h)}var o=i.bind(null,!1);return o.isRequired=i.bind(null,!0),o}function f(e){return p(function(a,t,r,i,n,o){var l=a[t];return v(l)!==e?new m("Invalid "+i+" `"+n+"` of type `"+x(l)+"` supplied to `"+r+"`, expected `"+e+"`.",{expectedType:e}):null})}function g(e,a,t,r,i){return new m((e||"React class")+": "+a+" type `"+t+"."+r+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+i+"`.")}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 a=function(e){var a=e&&(s&&e[s]||e["@@iterator"]);if("function"==typeof a)return a}(e);if(!a)return!1;var t,r=a.call(e);if(a!==e.entries){for(;!(t=r.next()).done;)if(!b(t.value))return!1}else for(;!(t=r.next()).done;){var i=t.value;if(i&&!b(i[1]))return!1}return!0;default:return!1}}function v(e){var a=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,a){return"symbol"===e||!!a&&("Symbol"===a["@@toStringTag"]||"function"==typeof Symbol&&a instanceof Symbol)}(a,e)?"symbol":a}function x(e){if(null==e)return""+e;var a=v(e);if("object"===a){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return a}function y(e){var a=x(e);switch(a){case"array":case"object":return"an "+a;case"boolean":case"date":case"regexp":return"a "+a;default:return a}}return m.prototype=Error.prototype,u.checkPropTypes=i,u.resetWarningCache=i.resetWarningCache,u.PropTypes=u,u},Fb}()(Gb.isElement,!0)}else wb.exports=function(){if(Ob)return Hb;Ob=1;var e=jb();function a(){}function t(){}return t.resetWarningCache=a,Hb=function(){function r(a,t,r,i,n,o){if(o!==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 r}r.isRequired=r;var n={array:r,bigint:r,bool:r,func:r,number:r,object:r,string:r,symbol:r,any:r,arrayOf:i,element:r,elementType:r,instanceOf:i,node:r,objectOf:i,oneOf:i,oneOfType:i,shape:i,exact:i,checkPropTypes:t,resetWarningCache:a};return n.PropTypes=n,n}}()();var Ub=zb(wb.exports);function Xb({code:e,label:t="Copy code"}){const[r,i]=a(!1);return le(x,{title:r?"Copied!":t,children:le(Zg,{variant:"ghost",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":r?"Copied":t,sx:{color:r?"var(--Icons-Success, var(--Text))":"var(--Quiet)"},children:le(r?he:pe,{fontSize:"small"})})})}Xb.propTypes={code:Ub.string.isRequired,label:Ub.string};function Yb({code:e="",language:a="JSX",showCopy:t=!0,showHeader:r=!0,maxHeight:i,wrap:n=!1,sx:o={},...l}){const c=r&&t&&!!e,s=!r&&t&&!!e;return se(h,{"data-theme":"Neutral","data-surface":"Surface-Dimmest",sx:{backgroundColor:"var(--Background)",borderRadius:"min(var(--Card-Radius, var(--Style-Border-Radius)), 12px)",overflow:"hidden",...o},...l,children:[r&&(a||t)&&se(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,px:2,py:1,borderBottom:"1px solid var(--Border)",minHeight:40},children:[le(zr,{color:"quiet",children:a}),c?le(Xb,{code:e}):null]}),se(h,{sx:{display:"flex",alignItems:"flex-start",gap:1,p:2},children:[le(h,{component:"pre",sx:{margin:0,fontFamily:"inherit",flex:1,minWidth:0,overflow:"auto",maxHeight:i},children:le(h,{component:"code",sx:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:"13px",lineHeight:1.6,color:"var(--Text)",whiteSpace:n?"pre-wrap":"pre",wordBreak:n?"break-word":"normal",display:"block"},children:e})}),s?le(Xb,{code:e}):null]})]})}Yb.propTypes={code:Ub.string,language:Ub.string,showCopy:Ub.bool,showHeader:Ub.bool,maxHeight:Ub.oneOfType([Ub.number,Ub.string]),wrap:Ub.bool,sx:Ub.object};const Jb=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Zb=["primary","secondary","tertiary","neutral","info","success","warning","error"];function $b({ratio:e,threshold:a}){if(!e)return le(zr,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return se(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[se(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(zr,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Kb({label:e,ratio:a,threshold:t,note:r}){return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[le(dr,{style:{color:"var(--Text)"},children:e}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),le($b,{ratio:a,threshold:t})]})}function _b({color:e,selected:a,onClick:t}){const r=Jb(e);return le(x,{title:r,arrow:!0,children:le(h,{onClick:()=>t(e),role:"button","aria-label":"Select "+r+" color","aria-pressed":a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",border:a?"2px solid var(--Text)":"1px solid var(--Border)",outline:a?"2px solid var(--Focus-Visible)":"2px solid transparent",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center","&:hover":{transform:"scale(1.1)"}},children:a&&le(he,{sx:{fontSize:24,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})})}function ev({label:e,selected:a,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:a?"var(--Buttons-Primary-Button)":"transparent",color:a?"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:a?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function av(){const[e,r]=a("Default"),[i,n]=a("Surface"),[o,l]=a("solid"),[c,s]=a("primary"),[d,u]=a("5"),[p,f]=a(!1),[g,b]=a(!1),[v,x]=a({}),k=()=>"solid"===o?c:c+"-"+o,C=()=>{if(p)return;const e=parseInt(d,10);return isNaN(e)||String(e)!==d.trim()?d||void 0:e};return t(()=>{const e=Jb(c),a={};"solid"===o?(a.badgeBg=Xr("--Icons-"+e),a.badgeText=Xr("--Icons-On-"+e),a.badgeBorder=null):"outline"===o&&(a.badgeBg=Xr("--Background"),a.badgeText=Xr("--Text"),a.badgeBorder=Xr("--Buttons-"+e+"-Border")),a.background=Xr("--Background"),a.focusVisible=Xr("--Focus-Visible"),x(a)},[o,c]),se(h,{sx:{width:"100%"},children:[le(yM,{title:"Badge",component:"Badge"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:r,surface:i,onSurfaceChange:n})}),le(mr,{color:"quiet",style:{marginBottom:24},children:"Small label attached to an element showing status or count. Solid and outline variants across all 8 colors."}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Badge",theme:e,surface:i})}),le(yb,{value:1,children:se(y,{container:!0,sx:{minHeight:400},children:[se(y,{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:se(m,{direction:"row",spacing:6,alignItems:"center",children:[le(Ag,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(xe,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(Ag,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(ye,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(Ag,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(ze,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})})]})}),le(Yb,{code:(()=>{const e=['variant="'+k()+'"'];if(p)e.push("dot");else{const a=C();"number"==typeof a?e.push("badgeContent={"+a+"}"):a&&e.push('badgeContent="'+a+'"')}return g&&e.push("showZero"),"<Badge "+e.join(" ")+">\n <MailIcon />\n</Badge>"})(),language:"JSX",sx:{borderRadius:0,borderBottom:"1px solid var(--Border)"}})]}),se(y,{item:!0,sx:{width:{xs:"calc(100vw - 432px)",md:"calc((100vw - 432px) / 2)"},flexShrink:0,p:3,backgroundColor:"var(--Container)",overflowY:"auto"},children:[le(er,{children:"Playground"}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,flexWrap:"wrap",sx:{gap:1},children:["solid","outline"].map(e=>le(ev,{label:Jb(e),selected:o===e,onClick:()=>l(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Zb.map(e=>le(_b,{color:e,selected:c===e,onClick:s},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Counter 16px · Dot 8px · Padding 4px · Digits 11px"})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BADGE CONTENT"}),le(z,{size:"small",value:d,onChange:e=>u(e.target.value),placeholder:"Number or text",disabled:p,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"}}})]}),se(h,{sx:{mt:3},children:[le(S,{control:le(w,{checked:p,onChange:e=>f(e.target.checked),size:"small"}),label:le(dr,{children:"Dot (no content)"})}),le(S,{control:le(w,{checked:g,onChange:e=>b(e.target.checked),size:"small"}),label:le(dr,{children:"Show zero"})})]})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(h,{sx:{p:4},children:[le(er,{children:"Accessibility Requirements"}),se(dr,{color:"quiet",style:{marginBottom:32},children:["Based on current Playground settings: ",o," · ",c]}),se(m,{spacing:4,children:[se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Badge Text Contrast"}),le(dr,{color:"quiet",style:{marginBottom:16},children:"Badge text must have ≥ 4.5:1 contrast against badge background (WCAG 1.4.3 AA)"}),le(Kb,{label:"Badge Text vs. Badge Background",ratio:Ur(v.badgeText,v.badgeBg),threshold:4.5,note:"solid"===o?"var(--Buttons-{C}-Text) vs var(--Buttons-{C}-Button)":"outline"===o?"var(--Text) vs var(--Background)":"var(--Buttons-{C}-Text) vs var(--Buttons-{C}-Button)"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Badge Visibility"}),le(dr,{color:"quiet",style:{marginBottom:16},children:"Badge background (or border) must have ≥ 3:1 contrast against page background (WCAG 1.4.11)"}),(()=>{const e=Ur(v.badgeBg,v.background),a=v.badgeBorder?Ur(v.badgeBorder,v.background):null;return le(Kb,{label:"Badge vs. Page Background",ratio:(t=e,r=a,t||r?t?r?parseFloat(t)>=parseFloat(r)?t:r:t:r:null),threshold:3.1,note:"outline"===o?"Border "+(a||"--")+":1 — outline relies on border contrast":"BG "+(e||"--")+":1"});var t,r})()]}),se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Badge Sizing"}),le(dr,{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:se(h,{children:[le(dr,{children:"Counter"}),le(zr,{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:se(h,{children:[le(dr,{children:"Status dot"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"8px diameter circle"})]})})]}),se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA & Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{style:{display:"block",marginBottom:2},children:"Screenreader support:"}),le(zr,{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").'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{style:{display:"block",marginBottom:2},children:"Dot variant:"}),le(zr,{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."})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{style:{display:"block",marginBottom:2},children:"Max overflow:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:'When content exceeds max (default 99), displays "99+" visually but announces the actual number to screenreaders.'})]})]})]})]})]})]}),le(yb,{value:3,children:le(gM,{component:"Badge"})})]})]})}const tv={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 rv({children:e,variant:a="light",surface:t,color:r="info",size:i="medium",startDecorator:n,endDecorator:o,className:l="",sx:c={},...s}){const d=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===r?"Default":r),u=tv[i]||tv.medium,m="default"===r?"Default":d,p=t||("light"===a?"Surface-Brightest":"Surface"),f="var(--Buttons-"+d+"-Border)",g=se(ce,{children:[n&&le(h,{className:"alert-start-decorator",sx:{display:"inline-flex",alignItems:"center",fontSize:u.iconSize,lineHeight:1,flexShrink:0,mt:"2px"},children:n}),le(h,{className:"alert-message",sx:{flex:1,minWidth:0},children:"string"==typeof e?le("small"===i?dr:mr,{children:e}):e}),o&&le(h,{className:"alert-end-decorator",sx:{display:"inline-flex",alignItems:"flex-start",flexShrink:0,gap:u.gap,paddingTop:"2px"},children:o})]});return le(h,{role:"alert",className:"alert alert-"+a+" alert-"+i+" alert-"+r+" "+l,sx:{border:"1px solid "+f,borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",boxShadow:If,...c},...s,children:le(h,{"data-theme":m,"data-surface":p,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 iv=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];function nv(e){const a=(t=e).charAt(0).toUpperCase()+t.slice(1);var t;return{type:"outline",color:a,trackOff:"var(--Background)",trackOffBorder:"var(--Border)",trackOn:"var(--Icons-"+a+")",trackOnBorder:"var(--Icons-"+a+")",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-"+a+")",iconOff:"var(--Background)",iconOn:"var(--Icons-"+a+")"}}const ov=/-light$/,lv=new Set;const cv={small:{trackW:35,trackH:20,dotRadius:"var(--Sizing-2, 16px)",icon:8},medium:{trackW:42,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 sv({variant:e="default",size:a="medium",checked:t,defaultChecked:r,onChange:i,disabled:n=!1,label:o,labelPlacement:l="end",name:c,value:s,icon:d,iconOn:u,iconOff:h,className:m="",sx:p={},"aria-label":f,"aria-labelledby":g,...b}){const v=function(){const e={};return iv.forEach(a=>{e[a+"-outline"]=nv(a)}),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=nv("primary"),e}(),x=function(e){const a=String(e||"default");if("light"!==a&&!ov.test(a))return a;const t="light"===a?"primary":a.replace(ov,"");return"production"===process.env.NODE_ENV||lv.has(a)||(lv.add(a),console.warn('[Switch] variant="'+a+'" — the -light shape was removed. Rendering variant="'+t+'". The on state takes its color from the Icons collection (--Icons-<Color> / --Icons-On-<Color>).')),t}(e),y=v[x]||v.default,z=cv[a]||cv.medium,w="small"===a?dr:mr,C=z.trackH-4,B=Math.max(24,z.trackW),M=Math.max(24,z.trackH),T=(M-z.trackH)/2,A={width:C,height:C,borderRadius:z.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:z.icon,height:z.icon,display:"block"}},L={width:z.trackW,minWidth:24,height:M,minHeight:24,padding:0,overflow:"visible",opacity:n?"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:B-z.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:Nf},"&:active + .MuiSwitch-track":{boxShadow:If},"&.Mui-focusVisible + .MuiSwitch-track":{outline:"1px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled + .MuiSwitch-track":{opacity:1}},"& .MuiSwitch-track":{width:z.trackW,height:z.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))"},...p},I=void 0!==h?h:d,N=void 0!==u?u:d,W=e=>le("span",{className:"MuiSwitch-thumb",children:e}),D=le(k,{...void 0!==I||void 0!==N?{icon:W(I),checkedIcon:W(N)}:{},checked:t,defaultChecked:r,onChange:i,disabled:n,name:c,value:s,slotProps:{input:{...f?{"aria-label":f}:{},...g?{"aria-labelledby":g}:{}}},className:"switch-"+x+" "+m,sx:L,disableRipple:!0,...b});return o?le(S,{control:D,label:le(w,{component:"span",sx:{color:n?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===a?"13px":"15px",fontWeight:500,opacity:n?"var(--Disabled, 0.38)":1},children:o}),labelPlacement:l,sx:{gap:"8px",marginLeft:0,marginRight:0}}):D}const dv=sv,uv=e.forwardRef(function({theme:e=null,surface:a="Surface",children:t,minHeight:r=160,sx:i={}},n){return le(h,{ref:n,"data-theme":e||void 0,"data-surface":a,sx:{p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:r,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",...i},children:t})}),hv=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",mv=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],pv={info:le(Se,{}),success:le(we,{}),warning:le(ke,{}),error:le(Ce,{})};function fv({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function gv({color:e,selected:a,onClick:t}){const r=hv(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function bv(){const[e,t]=a("light"),[r,i]=a("info"),[n,o]=a("medium"),[l,c]=a(!0),[s,d]=a("Default"),[u,p]=a("Surface"),f=l&&pv[r]?le(Bf,{size:"small",sx:{color:"inherit"},children:pv[r]}):void 0;return se(h,{sx:{pb:8},children:[le(yM,{title:"Alert",component:"Alert"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Alert",theme:s,surface:u})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,children:le(h,{sx:{width:"100%",maxWidth:480},children:le(rv,{variant:e,color:r,size:n,startDecorator:f,children:"This is an alert message. Check the details for more information."})})}),le(Yb,{code:(()=>{const a=['variant="'+e+'"'];return"info"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),l&&pv[r]&&a.push("startDecorator={<Icon><"+hv(r)+"Icon /></Icon>}"),"<Alert "+a.join(" ")+">\n This is an alert message.\n</Alert>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["solid","light"].map(a=>le(fv,{label:hv(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:mv.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(gv,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(fv,{label:hv(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Icon"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>c(e.target.checked),size:"small","aria-label":"Show icon"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Alert"})})]})]})}const vv={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},xv={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)"}},yv=l({variant:"default",color:"primary",size:"medium",orientation:"vertical"});function zv({children:e,variant:a="solid",color:t="default",surface:r,size:i="medium",orientation:n="vertical",clickable:o=!1,selected:l=!1,elevated:c=!1,draggable:s=!1,onClick:d,disabled:u=!1,href:m,className:p="",sx:f={},...g}){const b="default"===t,v=b?"":vv[t],x=r||(b?"Container":"dark"===a?"Surface-Dimmest":"light"===a?"Surface-Brightest":"Surface"),y=xv[i]||xv.medium,z="horizontal"===n,S=!!s,w=!u&&(o||!!d||!!m||l||S),k=m?"a":"div",C=l?`var(--Buttons-${(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===t?"Default":t)}-Border)`:"var(--Buttons-Default-Border)",B=w?l?`2px solid ${C}`:"1px solid var(--Buttons-Default-Border)":"1px solid var(--Border-Variant)",M=c?Nf:If,T=c?Wf:Nf,A=c?If:Lf;return le(yv.Provider,{value:{variant:a,color:t,size:i,orientation:n},children:le(h,{component:k,href:m||void 0,onClick:w?d:void 0,role:w?"button":void 0,tabIndex:w?0:void 0,"aria-pressed":!!l||void 0,"aria-disabled":u||void 0,draggable:S||void 0,className:"card card-"+a+" card-"+i+" card-"+n+(w?" card-clickable":"")+(l?" card-selected":"")+(c?" card-elevated":"")+(S?" card-draggable":"")+" "+p,sx:{display:"flex",border:B,borderRadius:"var(--Card-Radius)",boxShadow:M,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"},...w&&!S&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:T,transform:"translateY(-1px)"},"&:active":{transform:"translateY(0) scale(0.995)",boxShadow:A},"&: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:T},"&:active":{cursor:"grabbing",zIndex:10,boxShadow:Wf,transform:"scale(1.02)",borderWidth:"2px",borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...f},onKeyDown:w?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),d?.())}:void 0,...g,children:le(h,{"data-theme":v||void 0,"data-surface":x,sx:{display:"flex",flexDirection:z?"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 Sv({children:e,className:a="",sx:t={},...r}){const{size:i}=c(yv);return le(h,{className:"card-content "+a,sx:{display:"flex",flexDirection:"column",gap:(xv[i]||xv.medium).gap,flex:1,minWidth:0,...t},...r,children:e})}const wv=e=>le(zv,{clickable:!0,selected:e.selected,...e}),kv=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],Cv=e=>"Default"===e?"var(--Quiet)":"var(--Buttons-"+e+"-Border)";function Bv(){const e={};return kv.forEach(a=>{e[a]=function(e){const a=Hf(e);return{color:a,borderToken:Cv(a),icon:"var(--Buttons-"+a+"-Border)"}}(a)}),e}const Mv=/-(outline|light|solid)$/,Tv=new Set;function Av(e){const a=Bv();return a[function(e){const a=String(e||"default");if(!Mv.test(a))return a;const t=a.replace(Mv,"");return"production"===process.env.NODE_ENV||Tv.has(a)||(Tv.add(a),console.warn('[Checkbox] variant="'+a+'" — the -outline/-light/-solid shapes were removed; a Checkbox has one look and `variant` selects color only. Rendering variant="'+t+'". Update the call site.')),t}(e)]||a.default}const Lv={small:{box:16,icon:12,gap:4,touchTarget:24,LabelComp:dr},medium:{box:20,icon:14,gap:8,touchTarget:24,LabelComp:mr},large:{box:24,icon:18,gap:12,touchTarget:24,LabelComp:vr}};function Iv({size:e,variant:a,checked:t,indeterminate:r}){const i=Av(a),n=Lv[e]||Lv.medium,o=t||r,l=i.borderToken,c="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:n.box,height:n.box,boxSizing:"border-box",borderRadius:c,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:o&&le(r?Be:he,{sx:{fontSize:n.icon,color:i.icon}})})})}function Nv({size:e,variant:a}){return le(Iv,{size:e,variant:a,checked:!1,indeterminate:!1})}function Wv({size:e,variant:a}){return le(Iv,{size:e,variant:a,checked:!0,indeterminate:!1})}function Dv({size:e,variant:a}){return le(Iv,{size:e,variant:a,checked:!1,indeterminate:!0})}function Rv({variant:e="primary",size:a="medium",label:t,checked:r,defaultChecked:i,indeterminate:n=!1,disabled:o=!1,onChange:l,name:c,value:s,className:d="",sx:u={},"aria-label":h,"aria-labelledby":m,"aria-describedby":p,inputProps:f={},...g}){Av(e);const b=Lv[a]||Lv.medium,v=b.LabelComp,x={...f,...h&&{"aria-label":h},...m&&{"aria-labelledby":m},...p&&{"aria-describedby":p}},y=le(w,{checked:r,defaultChecked:i,indeterminate:n,disabled:o,onChange:l,name:c,value:s,icon:le(Nv,{size:a,variant:e}),checkedIcon:le(Wv,{size:a,variant:e}),indeterminateIcon:le(Dv,{size:a,variant:e}),className:"chk-"+e+" "+d,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},...g});return t?le(S,{control:y,label:le(v,{component:"span",sx:{color:o?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:t}),disabled:o,sx:{marginLeft:0,marginRight:0,gap:b.gap+"px",alignItems:"center","&.Mui-disabled .MuiTypography-root":{color:"var(--Text-Quiet)",opacity:.6}}}):y}const Fv=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]}],Pv=["photo","icon","initials"],Hv={photo:"Photo",icon:"Icon",initials:"Initials"},Ov=["xx-small","x-small","small","medium","large","x-large","xx-large"],Ev={"xx-small":"XXS","x-small":"XS",small:"Small",medium:"Medium",large:"Large","x-large":"XL","xx-large":"XXL"};function Vv({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Qv({color:e,selected:a,onClick:t}){const r=(i=e)?i.charAt(0).toUpperCase()+i.slice(1):"";var i;return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function jv(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a("initials"),[l,c]=a(!1),[s,d]=a(!1),[u,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface"),x="photo"===n,z=()=>{const a={size:r,clickable:l,insideButton:s};return x||(a.color=e),"initials"===n&&(a.initials="LN"),"photo"===n&&(a.src="https://i.pravatar.cc/150?img=3",a.alt="User avatar"),a};return se(h,{sx:{pb:8},children:[le(yM,{title:"Avatar",component:"Avatar"}),le(h,{sx:{mt:1},children:le(Xf,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Avatar",theme:f,surface:b})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:f,surface:b,children:u?se(zg,{max:3,size:r,children:[le(yg,{...z()}),le(yg,{color:e,size:r,initials:"AB"}),le(yg,{color:e,size:r,initials:"CD"}),le(yg,{color:e,size:r,initials:"EF"})]}):le(yg,{...z()})}),le(Yb,{code:(()=>{const a=[];return x||"default"===e||a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),"initials"===n&&a.push('initials="LN"'),"photo"===n&&a.push('src="..." alt="User avatar"'),l&&a.push("clickable onClick={handleClick}"),s&&a.push("insideButton"),u?"<AvatarGroup max={3}>\n <Avatar "+a.join(" ")+' />\n <Avatar initials="AB" />\n <Avatar initials="CD" />\n <Avatar initials="EF" />\n</AvatarGroup>':"<Avatar "+a.join(" ")+" />"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{sx:{opacity:x?.4:1,pointerEvents:x?"none":"auto"},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Fv.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(Qv,{color:a,selected:e===a,onClick:t},a))})]},a.label))}),x&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:"Color is ignored when the avatar shows a photo — the image carries the visual."})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Ov.map(e=>le(Vv,{label:Ev[e],selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CONTENT"}),le(m,{direction:"row",spacing:1,children:Pv.map(e=>le(Vv,{label:Hv[e],selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Clickable"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Interactive with hover/focus states"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>c(e.target.checked),size:"small","aria-label":"Clickable"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Inside Button"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds 2px horizontal margin so the avatar sits cleanly in a Button"})]}),le(sv,{variant:"default-outline",checked:s,onChange:e=>d(e.target.checked),size:"small","aria-label":"Inside Button"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Group"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show as AvatarGroup with overflow"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show group"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Avatar"})})]})]})}const qv=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Gv={default:"Default",quiet:"Quiet",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Uv=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Xv=["filled","outlined","rounded","twotone","sharp"],Yv={filled:"Filled",outlined:"Outlined",rounded:"Rounded",twotone:"Two Tone",sharp:"Sharp"},Jv={Home:{filled:Te,outlined:Pe,rounded:Xe,twotone:na,sharp:ba},Favorite:{filled:Me,outlined:He,rounded:Ye,twotone:oa,sharp:va},Delete:{filled:Ae,outlined:Oe,rounded:Je,twotone:la,sharp:xa},Settings:{filled:Le,outlined:Ee,rounded:Ze,twotone:ca,sharp:ya},Search:{filled:Ie,outlined:Ie,rounded:$e,twotone:sa,sharp:za},Star:{filled:Ne,outlined:Ve,rounded:Ke,twotone:da,sharp:Sa},Person:{filled:We,outlined:Qe,rounded:_e,twotone:ua,sharp:wa},Notifications:{filled:ye,outlined:je,rounded:ea,twotone:ha,sharp:ka},Visibility:{filled:De,outlined:qe,rounded:aa,twotone:ma,sharp:Ca},ShoppingCart:{filled:ze,outlined:Ge,rounded:ta,twotone:pa,sharp:Ba},Lock:{filled:Re,outlined:Ue,rounded:ra,twotone:fa,sharp:Ma},Info:{filled:Fe,outlined:Se,rounded:ia,twotone:ga,sharp:Ta}};function Zv({ratio:e,threshold:a}){if(!e)return le(zr,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return se(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[se(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(zr,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function $v({label:e,ratio:a,threshold:t,note:r}){return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[le(dr,{style:{color:"var(--Text)"},children:e}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),le(Zv,{ratio:a,threshold:t})]})}function Kv({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"primary":"primary-outline",size:"small",onClick:t,children:e})}function _v(){const[e,r]=a("Default"),[i,n]=a("Surface"),[o,l]=a("filled"),[c,s]=a("default"),[d,u]=a("medium"),[p,f]=a("40"),[g,b]=a(!1),[v,x]=a("Home"),[z,S]=a(""),[w,k]=a({}),C=Gv[c]||"Default",B="twotone"===o,M="custom"===d?(parseInt(p,10)||40)+"px":{xs:"12px",small:"16px",medium:"24px",large:"36px"}[d]||"24px",T=function(e,a){return Jv[e]?.[a]||Jv[e]?.filled||Te}(v,o),A=function(e){return{outlined:"Outlined",rounded:"Rounded",twotone:"TwoTone",sharp:"Sharp"}[e]||""}(o),L=v+A+"Icon",I=z.trim().length>0,N="<Icon>\n <"+L+' />\n</Icon>\n{/* aria-hidden="true" by default */}',W='<Icon aria-label="'+(I?z.trim():v+" icon")+'">\n <'+L+' />\n</Icon>\n{/* role="img" added automatically */}';return t(()=>{k({background:Xr("--Background"),iconColor:Xr("--Icons-"+C),iconVariant:Xr("--Icons-Variant-"+C)})},[c,C]),se(h,{sx:{pb:8},children:[le(yM,{title:"Icon",component:"Icon"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:r,surface:i,onSurfaceChange:n})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Icon",theme:e,surface:i})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{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(Bf,{color:c,size:d,fontSize:"custom"===d?parseInt(p,10)||40:void 0,disabled:g,twoTone:B,"aria-label":I?z.trim():void 0,children:le(T,{})})}),le(Yb,{code:(()=>{const e=[];"default"!==c&&e.push('color="'+c+'"'),"custom"===d?(e.push('size="custom"'),e.push("fontSize={"+(parseInt(p,10)||40)+"}")):"medium"!==d&&e.push('size="'+d+'"'),B&&e.push("twoTone"),g&&e.push("disabled"),I&&e.push('aria-label="'+z.trim()+'"');const a=e.length?" "+e.join(" "):"";return"import "+L+" from '@mui/icons-material/"+v+(A||"")+"';\n\n<Icon"+a+">\n <"+L+" />\n</Icon>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ICON"}),le(h,{component:"input",type:"text",value:v,onChange:e=>x(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)"}}}),se(zr,{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 ↗"})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Xv.map(e=>le(Kv,{label:Yv[e],selected:o===e,onClick:()=>l(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Uv.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>{const a=Gv[e],t=c===e;return le(h,{component:"button",onClick:()=>s(e),"aria-label":"Select "+qv(e),"aria-pressed":t,title:qv(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Icons-"+a+")",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(he,{sx:{fontSize:16,color:"var(--Background)",pointerEvents:"none"}})},e)})})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["small","medium","large","custom"].map(e=>le(Kv,{label:qv(e),selected:d===e,onClick:()=>u(e)},e))}),"custom"===d&&se(h,{sx:{display:"flex",alignItems:"center",gap:1,mt:1.5},children:[le(h,{component:"input",type:"number",value:p,onChange:e=>f(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(zr,{style:{color:"var(--Text-Quiet)"},children:"px"})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ARIA LABEL"}),le(h,{component:"input",type:"text",value:z,onChange:e=>S(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(zr,{style:{color:I?"var(--Tags-Success-Text)":"var(--Text-Quiet)",display:"block",marginTop:6},children:I?'✓ Meaningful — role="img" aria-label="'+z.trim()+'"':'Decorative — aria-hidden="true" (invisible to screen readers)'})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Reduces opacity to 0.38"})]}),le(sv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Toggle disabled"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),se(h,{sx:{p:3},children:[se(dr,{color:"quiet",style:{marginBottom:24},children:[Yv[o]," / ",qv(c)," / ","custom"===d?p+"px":d,I?" / meaningful":" / decorative"]}),se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Icon Contrast (WCAG 1.4.11 — 3:1)"}),le(dr,{color:"quiet",style:{marginBottom:16},children:"Non-text elements must contrast 3:1 against the page background."}),le($v,{label:"var(--Icons-"+C+") vs. var(--Background)",ratio:Ur(w.iconColor,w.background),threshold:3,note:L+" at "+M+" in "+qv(c)+" color"}),B&&le($v,{label:"var(--Icons-Variant-"+C+") vs. var(--Background)",ratio:Ur(w.iconVariant,w.background),threshold:3,note:"Two-tone secondary fill — must also meet 3:1"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)",backgroundColor:I?"var(--Tags-Success-BG, rgba(0,200,0,0.05))":"transparent",px:1,borderRadius:"4px"},children:[se(dr,{style:{fontWeight:600},children:["Current icon — ",I?"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:I?W:N})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Decorative (no aria-label):"}),le(zr,{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:N})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Meaningful (with aria-label):"}),le(zr,{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:W})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:["Disabled state",g?" ← current":"",":"]}),le(zr,{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."})]}),B&&se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:["Two-tone",B?" ← current":"",":"]}),se(zr,{style:{color:"var(--Text-Quiet)"},children:["Secondary fill uses var(--Icons-Variant-",C,"). Both the primary and secondary fills must meet 3:1 contrast independently."]})]}),se(h,{sx:{py:1.5},children:[se(dr,{children:["Touch target — ",M," icon","small"===d?" ⚠":" ✓",":"]}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"small"===d?"Small icons (20px) need a 24px minimum target area around them (WCAG 2.5.5). Wrap in a button with padding.":"Icon is "+M+" — meets 24px minimum. Ensure the wrapping interactive element also meets 24×24px."})]})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Size Reference"}),le(m,{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:a,px:t,note:r},i,n)=>se(h,{sx:{py:1.5,borderBottom:i<n.length-1?"1px solid var(--Border)":"none",display:"flex",justifyContent:"space-between",alignItems:"flex-start"},children:[se(h,{children:[se(dr,{children:[e," — ",t]}),le(zr,{style:{color:"var(--Text-Quiet)"},children:r})]}),d===a&&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))})]})]})]})]}),le(yb,{value:3,children:le(gM,{component:"Icon"})})]})]})}const ex={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:32,fontSize:"15px",px:20,gap:10}};function ax({children:e,icon:a,label:t,variant:r="solid",color:i="default",size:n="medium",extended:o=!1,animate:l=!1,disabled:c=!1,onClick:s,ariaLabel:d,className:u="",sx:m={},...p}){"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 f=function(e){const a=Hf("default"===e?"tertiary":e);return{bg:"var(--Buttons-"+a+"-Button)",text:"var(--Buttons-"+a+"-Text)",border:"var(--Buttons-"+a+"-Border)",hover:"var(--Buttons-"+a+"-Hover)",active:"var(--Buttons-"+a+"-Pressed)"}}(i),g=ex[n]||ex.medium,b=a||e||le(Aa,{sx:{fontSize:g.iconSize}}),v=d||t||"Action";return se(ce,{children:[l&&le("style",{children:"\n@keyframes fab-pulse {\n 0% { box-shadow: 0 0 0 0 var(--fab-pulse-color); }\n 50% { box-shadow: 0 0 0 8px var(--fab-pulse-color); }\n 100% { box-shadow: 0 0 0 8px transparent; }\n}\n"}),se(h,{component:"button",type:"button",role:"button","aria-label":v,onClick:s,disabled:c,className:"fab fab-solid fab-"+i+" fab-"+n+(o?" fab-extended":"")+(l?" fab-animate":"")+(c?" fab-disabled":"")+(u?" "+u:""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:o?g.gap+"px":0,...o?{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:`${Ef(i)}, ${Wf}`,fontSize:g.fontSize,fontFamily:"inherit",fontWeight:600,cursor:c?"not-allowed":"pointer",opacity:c?"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":c?{}:{backgroundColor:f.hover,boxShadow:`${Ef(i)}, ${Df}`},"&:active":c?{}:{backgroundColor:f.active,transform:"scale(0.96)",boxShadow:Ef(i)},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"},...l&&!c&&{"--fab-pulse-color":`color-mix(in srgb, ${f.bg} 50%, transparent)`,animation:"fab-pulse 2s var(--Motion-Easing-Standard, ease) infinite","@media (prefers-reduced-motion: reduce)":{animation:"none"}},...m},...p,children:[le(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",fontSize:g.iconSize+"px",color:"inherit","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}},children:b}),o&&t&&le(h,{component:"span",sx:{whiteSpace:"nowrap",lineHeight:1},children:t})]})]})}const tx=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",rx=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],ix={default:"Tertiary",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function nx({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function ox({color:e,selected:a,onClick:t}){const r=ix[e]||"Primary";return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+tx(e),"aria-pressed":a,title:tx(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function lx({value:e,onChange:a,placeholder:t,label:r}){return se(h,{children:[r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4},children:r}),le(h,{component:"input",type:"text",value:e,onChange:e=>a(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 cx(){const[e,t]=a("default"),[i,n]=a("medium"),[o,l]=a("Add"),[c,s]=a(!1),[d,u]=a("Create"),[p,f]=a(!1),[g,b]=a(!1),[v,x]=a("Default"),[z,S]=a("Surface"),w=e,k=r(null),C={small:32,medium:48,large:56},B=Kr(k,a=>{const t=e.charAt(0).toUpperCase()+e.slice(1).replace(/-([a-z])/g,(e,a)=>a.toUpperCase());return{background:a("--Background"),focusVisible:a("--Focus-Visible"),fabBg:a("--Buttons-"+t+"-Button"),fabIcon:a("--Buttons-"+t+"-Text"),fabBorder:a("--Buttons-"+t+"-Border"),hover:a("--Buttons-"+t+"-Hover"),pressed:a("--Buttons-"+t+"-Pressed")}},[e,v,z]);return se(h,{sx:{pb:8},children:[le(yM,{title:"Floating Action Button",component:"Fab"}),le(h,{sx:{mt:1},children:le(Xf,{theme:v,onThemeChange:x,surface:z,onSurfaceChange:S})}),le(h,{ref:k,...v?{"data-theme":v}:{},"data-surface":z,sx:{position:"absolute",width:0,height:0,overflow:"hidden"},"aria-hidden":"true"}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Fab",theme:v,surface:z})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:v,surface:z,children:le(ax,{color:w,size:i,icon:(()=>{const e=ge[o]||ge.Add;return le(Bf,{size:"medium",children:le(e,{})})})(),extended:c,label:d,animate:p,disabled:g,ariaLabel:c?d:o})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),a.push("icon={<"+o+"Icon />}"),c&&(a.push("extended"),a.push('label="'+d+'"')),p&&a.push("animate"),g&&a.push("disabled"),a.push('ariaLabel="'+(c?d:o)+'"'),"<Fab\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[le(h,{sx:{mb:3}}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:rx.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(ox,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(nx,{label:tx(e),selected:i===e,onClick:()=>n(e)},e))})]}),se(h,{sx:{mt:3},children:[le(lx,{label:"Icon Name",value:o,onChange:l,placeholder:"Add"}),se(zr,{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)"]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Extended"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pill shape with icon + text label"})]}),le(sv,{checked:c,onChange:e=>s(e.target.checked),size:"small","aria-label":"Extended"})]}),c&&le(h,{sx:{mt:1.5},children:le(lx,{label:"Label Text",value:d,onChange:u,placeholder:"Create"})}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Animation"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pulse ring effect to draw attention"})]}),le(sv,{checked:p,onChange:e=>f(e.target.checked),size:"small","aria-label":"Animation"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Disabled"})]})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[se(ar,{children:["Contrast — ",e," on ",z,v?" / "+v:""]}),se(m,{spacing:0,children:[le(Zr,{label:"FAB fill vs. page background",note:"Non-text contrast, 3:1 — the FAB has to be findable against what it floats over.",ratio:Ur(B.fabBg,B.background),threshold:3}),le(Zr,{label:"Icon vs. FAB fill — resting",note:"The glyph carries the meaning, so it is held to text contrast.",ratio:Ur(B.fabIcon,B.fabBg),threshold:4.5}),le(Zr,{label:"Icon vs. FAB fill — hover",ratio:Ur(B.fabIcon,B.hover,B.fabBg),threshold:4.5}),le(Zr,{label:"Icon vs. FAB fill — pressed",ratio:Ur(B.fabIcon,B.pressed,B.fabBg),threshold:4.5}),le(Zr,{label:"Focus ring vs. page background",note:"3:1. The ring sits outside the FAB, so it is measured against what is behind it, not against the fill.",ratio:Ur(B.focusVisible,B.background),threshold:3}),le($r,{label:"Target size",note:"WCAG 2.5.8 asks 24x24 CSS px minimum; 44x44 is the AAA / platform figure.",pass:C[i]>=44,detail:C[i]+"px"})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Role:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<button role="button" aria-label="...">'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Label:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:c?"Extended: visible label provides accessible name.":"Icon-only: aria-label is required."})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Focus:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) with 2px offset."})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Disabled:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"HTML disabled attribute. 50% opacity, removed from tab order."})]})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Best Practices"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"One per screen:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"FABs represent the primary action. Use at most one per view."})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Extended for clarity:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Use extended variant when the icon alone may be ambiguous."})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Animation:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Use sparingly. Respect prefers-reduced-motion."})]})]})]})]})})]}),le(yb,{value:3,children:le(gM,{component:"Fab"})})]})]})}const sx=e=>e.charAt(0).toUpperCase()+e.slice(1);function dx(e){return e&&"default"!==e&&"border-variant"!==e?"border"===e?"var(--Border)":"var(--Icons-"+sx(e)+")":"var(--Border-Variant)"}function ux(e,a){const t=e&&!["default","border","border-variant"].includes(e)?sx(e):"Default",r=dx(e);return"light"===a?{bg:"var(--Tag-"+t+"-BG)",text:"var(--Tag-"+t+"-Text)",border:"1px solid "+r}:{bg:"var(--Background)",text:"var(--Text)",border:"1px solid "+r}}const hx={small:"var(--Sm-Divider, 0.5px)",medium:"var(--Divider, 1px)",large:"var(--Lg-Divider, 2px)"};function mx({color:e="default",orientation:a="horizontal",size:t="small",children:r,indicatorText:i,indicatorStyle:n="outline",textAlign:o="center",className:l="",sx:c={},...s}){const d=dx(e),u=hx[t]||hx.small,m=!(!r&&!i),p=r||i,f="vertical"===a;if(f&&!m)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:d,flexShrink:0,...c},...s});if(f&&m){const a=ux(e,n),t="top"===o?"0 0 10%":"1 1 auto",r="top"===o?"1 1 auto":"bottom"===o?"0 0 10%":"1 1 auto";return se(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,...c},...s,children:[le(h,{sx:{flex:t,width:u,backgroundColor:d}}),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:a.bg,color:a.text,border:a.border,boxSizing:"border-box"},children:p}),le(h,{sx:{flex:r,width:u,backgroundColor:d}})]})}if(!m)return le(h,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" "+l,sx:{width:"100%",height:u,backgroundColor:d,flexShrink:0,...c},...s});const g=ux(e,n),b="left"===o?"0 0 10%":"1 1 auto",v="left"===o?"1 1 auto":"right"===o?"0 0 10%":"1 1 auto";return se(h,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" divider-indicator "+l,sx:{display:"flex",alignItems:"center",width:"100%",...c},...s,children:[le(h,{sx:{flex:b,height:u,backgroundColor:d}}),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:p}),le(h,{sx:{flex:v,height:u,backgroundColor:d}})]})}const px=["primary","secondary","tertiary","neutral","info","success","warning","error"];function fx(e){const a=(t=e).charAt(0).toUpperCase()+t.slice(1);var t;return{bg:"var(--Hover)",border:"var(--Buttons-"+a+"-Border)",hoverBorder:"var(--Buttons-"+a+"-Hover)",pressedBorder:"var(--Buttons-"+a+"-Pressed)",text:"var(--Text)",focusBg:"var(--Hover)"}}const gx={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}},bx={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}},vx={small:{resting:"Body-Small",shrunk:"Label-ExtraSmall"},medium:{resting:"Body-Medium",shrunk:"Label-Small"},large:{resting:"Body-Large",shrunk:"Label-Medium"}},xx=e=>({fontSize:"var(--"+e+"-Font-Size)",fontWeight:"var(--"+e+"-Font-Weight)",letterSpacing:"var(--"+e+"-Letter-Spacing)"});const yx={info:Se,success:we,warning:ke,error:Ce},zx={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 Sx({variant:e="primary-outline",size:a="medium",label:t,labelPosition:r="standard",placeholder:i,helperText:n,validation:l,validationMessage:c,disabled:s=!1,id:d,value:u,defaultValue:m,onChange:p,name:f,type:g="text",multiline:b=!1,rows:v,maxRows:x,resize:y="vertical",startAdornment:S,endAdornment:w,fullWidth:k=!1,className:M="",sx:T={},"aria-label":A,"aria-labelledby":L,"aria-describedby":I,"aria-required":N,"aria-invalid":W,inputProps:D={},...R}){const F=function(){const e={};return px.forEach(a=>{e[a+"-outline"]=fx(a)}),e.outline=fx("primary"),e}(),P=F[e]||F["primary-outline"],H="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=H?bx[a]||bx.medium:gx[a]||gx.medium,E=o(),V=d||E,{labelX:Q,padX:j,restingY:q,shrunkY:G}=function(e,a){const t=parseInt(e.height,10)||56,r=parseInt(e.fontSize,10)||15,i="var(--Input-Padding, "+(e.leftPad||14)+"px)",n=(e.iconSize||18)+8;return{labelX:a?"calc("+i+" + "+n+"px)":i,padX:i,clearance:a?n:0,restingY:Math.round((t-1.4375*r)/2),shrunkY:6}}(O,!!S),U=vx[a]||vx.medium,X="var(--Text)",Y=l?zx[l]:null,J=l?yx[l]:null,Z=Y||P,$=Z.border,K={...D,...A&&{"aria-label":A},...L&&{"aria-labelledby":L},...I&&{"aria-describedby":I},...N&&{"aria-required":N},...W&&{"aria-invalid":W}};return se(h,{className:"inp-"+e+" "+M,sx:{width:k?"100%":"auto",...T},children:[(()=>{if(!t||H)return null;return le("small"===a?dr:mr,{component:"label",htmlFor:V,sx:{display:"block",marginBottom:"6px",color:s?"var(--Quiet)":"var(--Text)",fontSize:O.labelSize,fontWeight:500,opacity:s?"var(--Disabled, 0.38)":1},children:t})})(),le(h,{sx:{border:"1px solid "+$,borderRadius:"small"===a?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===a?"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",...!s&&{"&:hover":{borderColor:Z.hoverBorder},"&:active":{borderColor:Z.pressedBorder}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{children:le(z,{value:u,defaultValue:m,onChange:p,name:f,type:g,disabled:s,placeholder:i,id:V,multiline:b,rows:v,maxRows:x,fullWidth:!0,label:H?t:void 0,variant:"outlined",size:"small"===a?"small":"medium",inputProps:K,InputProps:{startAdornment:S?le(C,{position:"start",children:S}):void 0,endAdornment:(()=>{if(w)return le(C,{position:"end",children:w})})()},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",...H&&{alignItems:"stretch"},"& fieldset":{border:"none"},"&.Mui-focused":{color:X},"&:not(.Mui-focused) .MuiOutlinedInput-input:not(:placeholder-shown)":{color:X},"&.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)"},...H&&{"& .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"},...S&&{"& input":{paddingLeft:0},"& textarea":{paddingLeft:0}}}},"& .MuiInputLabel-root":{color:"var(--Quiet)",fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",...xx(U.resting),transformOrigin:"top left",transition:"transform 0.15s ease, font-size 0.15s ease, color 0.15s ease",transform:"translate("+Q+", "+q+"px)","&.MuiInputLabel-shrink":{transform:"translate("+Q+", "+G+"px)",...xx(U.shrunk),color:"var(--Quiet)"},"&.Mui-focused":{color:X},"&.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"}},...R})})}),l&&c?se(h,{sx:{display:"flex",alignItems:"center",gap:"6px",marginTop:"4px",marginLeft:"2px"},children:[J&&le(J,{sx:{fontSize:O.iconSize,color:Y.icon,flexShrink:0}}),le(B,{sx:{color:Y.text,fontSize:"small"===a?"11px":"12px",margin:0},children:c})]}):n?le(B,{sx:{color:"var(--Quiet)",fontSize:"small"===a?"11px":"12px",marginTop:"4px",marginLeft:"2px"},children:n}):null]})}const wx=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],kx=Hf,Cx={small:{touchTarget:24,box:16,dot:8,gap:4,LabelComp:dr},medium:{touchTarget:24,box:20,dot:10,gap:8,LabelComp:mr},large:{touchTarget:24,box:24,dot:12,gap:12,LabelComp:vr}};function Bx({size:e,color:a,checked:t}){const r=kx(a),i="Default"===r?"var(--Quiet)":"var(--Buttons-"+r+"-Border)",n="var(--Buttons-"+r+"-Border)",o=Cx[e]||Cx.medium;return le(h,{className:"radio-circle-icon",sx:{width:o.box,height:o.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:o.dot,height:o.dot,borderRadius:"50%",backgroundColor:n,transition:"transform 0.15s ease-in-out"}})})}function Mx({theme:e,surface:a,color:t="primary",size:r="medium",label:i,labelPlacement:n="end",checked:o,disabled:l=!1,onChange:c,name:s,value:d,className:u="",sx:h={},"aria-label":m,"aria-labelledby":p,"aria-describedby":f,inputProps:g={},...b}){const v=wx.includes(t)?t:"primary",x=Cx[r]||Cx.medium,y=x.LabelComp,z=(x.touchTarget-x.box)/2,w={...g,...m&&{"aria-label":m},...p&&{"aria-labelledby":p},...f&&{"aria-describedby":f}},k=le(M,{checked:o,disabled:l,onChange:c,name:s,value:d,icon:le(Bx,{size:r,color:v,checked:!1}),checkedIcon:le(Bx,{size:r,color:v,checked:!0}),"data-theme":e||void 0,"data-surface":a||void 0,className:"radio-"+v+" "+u,inputProps:w,disableRipple:!0,sx:{padding:z+"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 i?le(S,{control:k,label:le(y,{component:"span",sx:{color:l?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:i}),labelPlacement:n,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 Tx({color:e="primary",size:a="medium",label:t,options:r=[],value:i,onChange:n,orientation:o="vertical",labelPlacement:l="end",disabled:c=!1,spacing:s=1,name:d,className:u="",sx:h={},"aria-label":m,"aria-labelledby":p,...f}){return se(T,{component:"fieldset",disabled:c,className:"radio-group-"+e+" "+u,sx:h,children:[t&&le(A,{component:"legend",sx:{color:c?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===a?"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(L,{value:i,onChange:n,name:d,"aria-label":m,"aria-labelledby":p,row:"horizontal"===o,sx:{display:"flex",flexDirection:"horizontal"===o?"row":"column",flexWrap:"horizontal"===o?"wrap":"nowrap",alignItems:"horizontal"===o?"center":"flex-start",gap:s},...f,children:r.map(t=>le(Mx,{color:e,size:a,label:t.label,labelPlacement:l,value:t.value,disabled:t.disabled||c},t.value))})]})}const Ax=Mx,Lx=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];const Ix={small:{visual:12,track:2,labelSize:11},medium:{visual:16,track:4,labelSize:12},large:{visual:20,track:6,labelSize:13}};function Nx({theme:e,surface:a,variant:t="default",size:r="medium",value:i,defaultValue:n,onChange:o,onChangeCommitted:l,min:c=0,max:s=100,step:d=1,marks:u=!1,valueLabelDisplay:m="off",orientation:p="horizontal",fill:f,track:g="standard",disabled:b=!1,label:v,name:x,className:y="",sx:z={},"aria-label":S,"aria-labelledby":w,...k}){const C=function(){const e={};return Lx.forEach(a=>{e[a]=function(e){const a=(t=e).charAt(0).toUpperCase()+t.slice(1);var t;return{thumb:"var(--Buttons-"+a+"-Border)",thumbBorder:"1px solid var(--Background)",track:"var(--Buttons-"+a+"-Button)",trackBorder:"1px solid var(--Buttons-"+a+"-Border)",rail:"var(--Background)",railBorder:"1px solid var(--Buttons-"+a+"-Border)",valueLabel:"var(--Text)",valueLabelText:"var(--Background)"}}(a)}),e}(),B=C[t]||C.default,M=Ix[r]||Ix.medium,T=null===d,A=(!T||!0!==u)&&u;if("production"!==process.env.NODE_ENV&&T&&!0===u&&console.warn("[OmniDesign] <Slider step={null} marks> — restricted values needs the ARRAY of values to snap to. `marks={true}` names none, and MUI throws on it. Pass marks={[{ value, label }, …]}."),"production"!==process.env.NODE_ENV&&!0===u&&d){const e=Math.floor((s-c)/d)+1;e>20&&console.warn(`[OmniDesign] <Slider marks> with step=${d} over ${c}–${s} draws ${e} ticks, which reads as a hatched band rather than a scale. Pass a marks ARRAY for the values worth showing, or raise \`step\` so the ticks match where the thumb can land. Marks are code-only — the design has no mark element.`)}const L="vertical"===p,N=Array.isArray(i)||Array.isArray(n),W=void 0!==f?f:g,D="inverted"===W,R=!1===W,F="small"===r?dr:mr,P=M.track+2,H=D?B.track:B.rail,O=B.railBorder,E=D?B.rail:B.track,V=B.trackBorder,Q={color:"transparent"===B.track?B.thumb:B.track,height:L?void 0:P,width:L?P:void 0,"& .MuiSlider-rail":{backgroundColor:H,border:O||"none",boxSizing:O?"content-box":"border-box",opacity:1,height:L?void 0:O?M.track:P,width:L?O?M.track:P:void 0,borderRadius:P/2},"& .MuiSlider-track":{boxSizing:V?"content-box":"border-box",backgroundColor:E,border:V||"none",height:L?void 0:V?M.track:P,width:L?V?M.track:P:void 0,borderRadius:P/2},"& .MuiSlider-thumb":{width:24,height:24,backgroundColor:"transparent",border:"none",boxShadow:"none",transition:"none","--_height":M.visual+"px","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))","&::after":{display:"none"},"&::before":{content:'""',position:"absolute",width:M.visual,height:M.visual,borderRadius:"50%",backgroundColor:B.thumb,border:B.thumbBorder||"none",boxShadow:`${Ef(t)}, ${If}`,transition:"box-shadow 0.15s ease-in-out",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},"&:hover::before":{boxShadow:`${Ef(t)}, ${Nf}`},"&.Mui-focusVisible::before, &:focus-visible::before":{boxShadow:`${Ef(t)}, ${Nf}, 0 0 0 1px var(--Focus-Visible)`},"&.Mui-active::before":{boxShadow:Ef(t)},"&.Mui-focusVisible":{outline:"none",borderRadius:"50%"},"&.Mui-focusVisible::before":{boxShadow:`${Ef(t)}, ${Nf}`}},...N?L?{'& .MuiSlider-thumb[data-index="0"]::before':{top:0,left:"50%",transform:"translateX(-50%)"},'& .MuiSlider-thumb[data-index="1"]::before':{top:"auto",bottom:0,left:"50%",transform:"translateX(-50%)"}}:{'& .MuiSlider-thumb[data-index="0"]::before':{left:"auto",right:0,top:"50%",transform:"translateY(-50%)"},'& .MuiSlider-thumb[data-index="1"]::before':{left:0,right:"auto",top:"50%",transform:"translateY(-50%)"}}:{},"& .MuiSlider-valueLabel":{backgroundColor:B.valueLabel,color:B.valueLabelText,fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",fontSize:"var(--Label-ExtraSmall-Font-Size)",fontWeight:"var(--Label-ExtraSmall-Font-Weight)",letterSpacing:"var(--Label-ExtraSmall-Letter-Spacing)",lineHeight:"var(--Label-ExtraSmall-Line-Height)",borderRadius:"var(--Sizing-1, 8px)",padding:"var(--Sizing-Half, 4px) var(--Sizing-1, 8px)","&::before":{backgroundColor:B.valueLabel}},"& .MuiSlider-mark":{backgroundColor:"var(--Quiet)",width:2,height:2,borderRadius:"50%"},"& .MuiSlider-markActive":{backgroundColor:"var(--Background)",opacity:1},"& .MuiSlider-markLabel":{color:"var(--Text-Quiet)",fontSize:M.labelSize},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none","& .MuiSlider-thumb::before":{boxShadow:"none"}},...z},j=le(I,{value:i,defaultValue:n,onChange:o,onChangeCommitted:l,min:c,max:s,step:d,marks:A,valueLabelDisplay:m,orientation:p,track:D?"inverted":!R&&"normal",disabled:b,name:x,"aria-label":S,"aria-labelledby":w,slotProps:b?{input:{"aria-disabled":"true"}}:void 0,className:"slider-"+t+" "+y,"data-theme":e||void 0,"data-surface":a||void 0,sx:Q,...k});return v?se(h,{sx:{width:L?"auto":"100%",height:L?"100%":"auto",display:"flex",flexDirection:"column",gap:"4px"},children:[le(F,{component:"label",sx:{color:b?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===r?"13px":"15px",fontWeight:500,opacity:b?"var(--Disabled, 0.38)":1},children:v}),j]}):j}const Wx=Nx,Dx=Nx,Rx={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Fx={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 Px({theme:e,surface:t,value:r,defaultValue:i,onChange:n,max:o=5,precision:l=1,color:c="default",size:s="medium",readOnly:d=!1,disabled:u=!1,emptyLabel:m="No rating",className:p="",sx:f={},...g}){const[b,v]=a(i??null),[x,y]=a(null),z=void 0!==r,S=z?r:b,w=null!==x?x:S,k=.5===l,C=!d&&!u,B=Rx[c]||Rx.default,M=Fx[s]||Fx.medium,T="var(--Buttons-"+B+"-Button)",A="var(--Buttons-"+B+"-Border)",L=e=>{if(!C)return;const a=e===S?null:e;z||v(a),n?.(a)},I=(e,a)=>{if(!C||!k)return;y(a?e+.5:e+1)},N=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-"+B+"-Border)",strokeWidth:1}}}:{},W=e=>{const a=e+1,t=e+.5,r=null!==w&&a<=w,i=null!==w&&!r&&k&&t<=w,n=i?Na:Ne,c=((e,a)=>e||a?{color:T,filter:"drop-shadow(0 1px 2px rgba(var(--Dropshadow-Color), 0.28))",transition:"filter 0.15s ease","& .MuiSvgIcon-root":{stroke:A,strokeWidth:.5}}:{color:"transparent","& .MuiSvgIcon-root":{stroke:"var(--Quiet)",strokeWidth:1}})(r,i);return k&&C?se(h,{sx:{position:"relative",display:"inline-flex",cursor:"pointer",...c,...N},onMouseLeave:()=>y(null),children:[le(h,{sx:{position:"absolute",left:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>I(e,!0),onClick:()=>L(t)}),le(h,{sx:{position:"absolute",right:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>I(e,!1),onClick:()=>L(a)}),le(n,{sx:{fontSize:M.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":r,"aria-label":a+" star"+(1!==a?"s":""),tabIndex:C?0:-1,onClick:()=>L(a),onMouseEnter:()=>C&&y(a),onMouseLeave:()=>C&&y(null),onKeyDown:e=>{if(C&&("ArrowRight"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),L(Math.min((S||0)+l,o))),"ArrowLeft"===e.key||"ArrowDown"===e.key)){e.preventDefault();const a=Math.max((S||0)-l,0);L(a||null)}},sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",padding:0,...M.minHit&&{minWidth:M.minHit+"px",minHeight:M.minHit+"px"},cursor:u?"not-allowed":C?"pointer":"default",outline:"none",transition:"transform 0.1s ease",...c,...N,"&:active":C?{transform:"scale(0.95)"}:{},"&:focus-visible":C?{outline:M.focusWidth+"px solid var(--Focus-Visible)",outlineOffset:M.focusInset+"px",borderRadius:"2px"}:{},"&:disabled":{cursor:"not-allowed",opacity:"var(--Disabled, 0.38)"}},children:le(n,{sx:{fontSize:M.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})},e)};return se(h,{role:C?"radiogroup":"img","aria-label":"Rating"+(null!==S?": "+S+" of "+o+" stars":": "+m),"data-theme":e||void 0,"data-surface":t||void 0,className:"rating rating-"+c+" rating-"+s+(d?" rating-readonly":"")+(u?" rating-disabled":"")+(null===S?" rating-empty":"")+(p?" "+p:""),sx:{display:"inline-flex",alignItems:"center",gap:M.gap+"px",opacity:u?"var(--Disabled, 0.38)":1,fontFamily:"inherit",...f},...g,children:[Array.from({length:o},(e,a)=>W(a)),null===S&&!x&&le(zr,{style:{color:"var(--Quiet)",marginLeft:4},children:m})]})}const Hx={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 Ox({children:a,separator:t="/",size:r="medium",condense:i=!1,maxItems:n=4,itemsBeforeCollapse:o=1,itemsAfterCollapse:l=1,backOnlyMobile:c=!1,onExpand:u,className:m="",sx:p={},...f}){const g=Hx[r]||Hx.medium,b=s.toArray(a).filter(d),v=b.length,x=i&&v>n;let y=b;const[z,S]=e.useState(!1);if(x&&!z){const e=b.slice(0,o),a=b.slice(v-l);y=[...e,le(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"),...a]}const w=[];y.forEach((e,a)=>{const r=x&&!z?a===y.length-1:a===v-1;w.push(le(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-"+a)),a<y.length-1&&w.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-"+a))});const k=v>=2?b[v-2]:null;return se(h,{component:"nav","aria-label":"Breadcrumb",className:"breadcrumbs breadcrumbs-"+r+" "+m,sx:{fontSize:g.fontSize,fontFamily:"var(--Body-Font-Family)",lineHeight:1.5,...p},...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,...c&&{"@media (max-width: 600px)":{display:"none"}}},children:w}),c&&k&&se(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(k,{style:{...k.props?.style||{},textDecoration:"underline",textUnderlineOffset:"3px"}})]})]})}function Ex({children:e,href:a,className:t="",sx:r={},...i}){const n=!!a;return le(h,{component:n?"a":"span",href:a||void 0,className:"breadcrumb-link "+t,sx:{color:"inherit",textDecoration:n?"underline":"none",textUnderlineOffset:"3px",textDecorationThickness:"1px",cursor:n?"pointer":"default",transition:"color 0.15s ease",...n&&{"&:hover":{textDecorationThickness:"2px"},"&:active":{textDecorationThickness:"3px"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"2px"}},...r},...i,children:e})}const Vx=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"";function Qx({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function jx(){const[e,t]=a("medium"),[r,i]=a("/"),[n,o]=a(!1),[l,c]=a("Default"),[s,d]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Breadcrumbs",component:"Breadcrumbs"}),le(h,{sx:{mt:1},children:le(Xf,{theme:l,onThemeChange:c,surface:s,onSurfaceChange:d})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Breadcrumbs",theme:l,surface:s})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:l,surface:s,children:se(Ox,{size:e,separator:r,condense:n,maxItems:3,children:[le(Ex,{href:"#",children:"Home"}),le(Ex,{href:"#",children:"Products"}),le(Ex,{href:"#",children:"Shoes"}),le(Ex,{children:"Running Shoes"})]})}),le(Yb,{code:(()=>{const a=[];return"medium"!==e&&a.push('size="'+e+'"'),"/"!==r&&a.push('separator="'+r+'"'),n&&a.push("condense maxItems={3}"),"<Breadcrumbs"+(a.length?" "+a.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(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(a=>le(Qx,{label:Vx(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEPARATOR"}),le(m,{direction:"row",spacing:1,children:["/","›","→","·","|"].map(e=>le(Qx,{label:e,selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Condense"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Collapse middle items into ellipsis"})]}),le(sv,{variant:"default-outline",checked:n,onChange:e=>o(e.target.checked),size:"small","aria-label":"Condense"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Breadcrumbs"})})]})]})}const qx={small:{btnSize:"small",fontSize:"13px",gap:"2px"},medium:{btnSize:"medium",fontSize:"14px",gap:"4px"},large:{btnSize:"large",fontSize:"16px",gap:"4px"}};function Gx({theme:e,surface:t,count:r=10,page:n,defaultPage:o=1,onChange:l,color:c="default",size:s="medium",siblingCount:d=1,boundaryCount:u=1,disabled:m=!1,showFirstButton:p=!1,showLastButton:f=!1,className:g="",sx:b={},...v}){const[x,y]=a(o),z=void 0!==n,S=z?n:x;(e=>{e.charAt(0).toUpperCase(),e.slice(1)})("default"===c?"Default":c);const w=qx[s]||qx.medium,k=i(e=>{const a=Math.max(1,Math.min(r,e));z||y(a),l?.(a)},[r,z,l]),C=function({count:e,page:a,siblingCount:t=1,boundaryCount:r=1}){const i=(e,a)=>Array.from({length:a-e+1},(a,t)=>e+t);if(2*t+3+2*r>=e)return i(1,e);const n=Math.max(a-t,r+1),o=Math.min(a+t,e-r),l=n>r+2,c=o<e-r-1;if(!l&&c)return[...i(1,Math.min(3+2*t+r,e)),"ellipsis-right",...i(e-r+1,e)];if(l&&!c){const a=i(Math.max(e-(3+2*t+r)+1,1),e);return[...i(1,r),"ellipsis-left",...a]}return l&&c?[...i(1,r),"ellipsis-left",...i(n,o),"ellipsis-right",...i(e-r+1,e)]:i(1,e)}({count:r,page:S,siblingCount:d,boundaryCount:u}),B="default"===c?"default":c;return le(h,{component:"nav","aria-label":"Pagination","data-theme":e||void 0,"data-surface":t||void 0,className:"pagination pagination-"+c+" pagination-"+s+" "+g,sx:{display:"inline-flex",...b},...v,children:se(h,{component:"ul",sx:{display:"flex",alignItems:"center",gap:w.gap,listStyle:"none",m:0,p:0,flexWrap:"wrap"},children:[p&&le(h,{component:"li",children:le(Yg,{iconOnly:!0,variant:B+"-outline",size:w.btnSize,disabled:m||1===S,onClick:()=>k(1),"aria-label":"Go to first page",children:le(Bf,{size:"small",children:le(Ra,{})})})}),le(h,{component:"li",children:le(Yg,{iconOnly:!0,variant:B+"-outline",size:w.btnSize,disabled:m||1===S,onClick:()=>k(S-1),"aria-label":"Go to previous page",children:le(Bf,{size:"small",children:le(Wa,{})})})}),C.map((e,a)=>{if("string"==typeof e)return le(h,{component:"li",children:le(zr,{style:{color:"var(--Quiet)",padding:"0 4px"},"aria-hidden":"true",children:"…"})},e+"-"+a);const t=e===S;return le(h,{component:"li",children:le(Yg,{variant:t?B:B+"-outline",size:w.btnSize,disabled:m,onClick:()=>k(e),"aria-label":"Page "+e,"aria-current":t?"page":void 0,letterNumber:!0,children:e})},e)}),le(h,{component:"li",children:le(Yg,{iconOnly:!0,variant:B+"-outline",size:w.btnSize,disabled:m||S===r,onClick:()=>k(S+1),"aria-label":"Go to next page",children:le(Bf,{size:"small",children:le(Da,{})})})}),f&&le(h,{component:"li",children:le(Yg,{iconOnly:!0,variant:B+"-outline",size:w.btnSize,disabled:m||S===r,onClick:()=>k(r),"aria-label":"Go to last page",children:le(Bf,{size:"small",children:le(Fa,{})})})})]})})}const Ux=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Xx=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Yx({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Jx({color:e,selected:a,onClick:t}){const r=Ux(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Zx(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a(10),[l,c]=a(!1),[s,d]=a(!1),[u,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Pagination",component:"Pagination"}),le(h,{sx:{mt:1},children:le(Xf,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Pagination",theme:f,surface:b})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:f,surface:b,children:le(Gx,{color:e,size:r,count:n,showFirstButton:l,showLastButton:s,disabled:u})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),10!==n&&a.push("count={"+n+"}"),l&&a.push("showFirstButton"),s&&a.push("showLastButton"),u&&a.push("disabled"),a.push("onChange={handlePageChange}"),1===a.length?"<Pagination onChange={handlePageChange} />":"<Pagination\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Xx.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(Jx,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Yx,{label:Ux(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PAGES"}),le(m,{direction:"row",spacing:1,children:[5,10,20,50].map(e=>le(Yx,{label:String(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"First/Last Buttons"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show jump to first/last page"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>{c(e.target.checked),d(e.target.checked)},size:"small","aria-label":"First/last buttons"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Disabled"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Pagination"})})]})]})}const $x=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Kx=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],_x=[{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function ey({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function ay({color:e,selected:a,onClick:t}){const r=$x(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function ty(){const[e,t]=a("standard"),[r,i]=a("default"),[n,o]=a("medium"),[l,c]=a("horizontal"),[s,d]=a("Default"),[u,p]=a("Surface"),[f,g]=a(!1),b="standard"===e?Kx:_x;return se(h,{sx:{pb:8},children:[le(yM,{title:"Tabs",component:"Tabs"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(y,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,children:le(h,{sx:{width:"100%",maxWidth:"vertical"===l?500:"100%",display:"flex",flexDirection:"vertical"===l?"row":"column"},children:se(bb,{defaultValue:0,variant:e,color:r,size:n,orientation:l,children:[se(vb,{rounded:f,children:[le(xb,{children:"Overview"}),le(xb,{children:"Features"}),le(xb,{children:"Pricing"})]}),le(yb,{value:0,children:le(h,{sx:{p:2},children:le(mr,{style:{color:"var(--Quiet)"},children:"Overview content goes here."})})}),le(yb,{value:1,children:le(h,{sx:{p:2},children:le(mr,{style:{color:"var(--Quiet)"},children:"Features content goes here."})})}),le(yb,{value:2,children:le(h,{sx:{p:2},children:le(mr,{style:{color:"var(--Quiet)"},children:"Pricing content goes here."})})})]})})}),le(Yb,{code:(()=>{const a=[];return"standard"!==e&&a.push('variant="'+e+'"'),"default"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),"horizontal"!==l&&a.push('orientation="vertical"'),"<Tabs defaultValue={0}"+(a.length?" "+a.join(" "):"")+">\n <TabList"+(f?" 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(y,{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:se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"})]}),le(yb,{value:0,children:se(h,{sx:{p:3},children:[le(h,{sx:{mb:3}}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["standard","solid","light","dark"].map(a=>le(ey,{label:$x("standard"===a?"default":a),selected:e===a,onClick:()=>(e=>{t(e),"standard"!==e&&"default"===r&&i("primary")})(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:b.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(ay,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(ey,{label:$x(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(ey,{label:$x(e),selected:l===e,onClick:()=>c(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SHAPE"}),le(sv,{label:"Rounded corners",checked:f,onChange:e=>g(e.target.checked)}),se(zr,{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)."]})]})]})}),se(yb,{value:1,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]})]})})})]})]})}let ry=!1;let iy=!1;const ny=new Set;function oy({variant:t="outlined",color:r="default",size:i="medium",disabled:n=!1,orientation:o="horizontal",separated:l=!0,spacing:c,fit:s,fullWidth:d=!1,equalWidth:u=!1,multiple:m=!1,allowEmpty:p=!0,__selectionOwner:f=!1,value:g,defaultValue:b,onChange:v,children:x,className:y="",sx:z={},"aria-label":S,...w}){const k=void 0!==g||void 0!==b||void 0!==v||m;!f&&k&&(iy||"production"===process.env.NODE_ENV||(iy=!0,console.warn("[OmniDesign] ButtonGroup is a group of buttons — selection moved to ToggleButtonGroup, where at least one segment is always on. `value` / `onChange` / `multiple` still work here and will be removed in the next major. Swap <ButtonGroup> for <ToggleButtonGroup>; every other prop is the same.")));const C=f||k;f||!1!==l||ry||"production"===process.env.NODE_ENV||(ry=!0,console.warn("[OmniDesign] ButtonGroup is separated — a row of actions, spaced. `separated={false}` joins the segments into one control, which is ToggleButtonGroup's Style=Default and not a shape Figma's ButtonGroup has. It still renders and will be removed in the next major. If the segments are a choice rather than three actions, use <ToggleButtonGroup>."));const[B,M]=a(b??(m?[]:null)),T=void 0!==g,A=T?g:B,L=m?Array.isArray(A)?A:null==A?[]:[A]:null,I="horizontal"===o,N=void 0!==c?c:l?"var(--Platform-Spacer)":0,W=!l&&0===N,D="light"===t,R="ghost"===t,F=s??(d?"fill":u?"equal":"hug"),P="fill"===F,H="equal"===F&&I,O=(E=r).charAt(0).toUpperCase()+E.slice(1);var E;const V="var(--Buttons-"+O+"-Border)",Q="var(--Buttons-"+O+"-Button)",j="var(--Buttons-"+O+"-Text)",q="var(--Buttons-"+O+"-Outline-Quiet)",G="var(--Buttons-"+O+"-Outline-Text)",U="default"===r?void 0:O,X=e.Children.toArray(x).filter(Boolean),Y=X.length,J=(e,a)=>t=>{const r=m?L.includes(e)?L.filter(a=>a!==e):[...L,e]:e;!m||p||0!==r.length?(T||M(r),v?.(r,t),a?.(t)):a?.(t)},Z=X.map((a,t)=>{if(!e.isValidElement(a))return a;const o=0===t,c=t===Y-1,s=a.props.value??t,d=(u=s,m?L.includes(u):A===u);var u;let p,f;if(W&&Y>1){const e=I?"var(--Button-Radius)":"var(--Vertical-Button-Radius)";p=I?o&&c?e:o?e+" 0 0 "+e:c?"0 "+e+" "+e+" 0":"0":o&&c?e:o?e+" "+e+" 0 0":c?"0 0 "+e+" "+e:"0"}if(W&&Y>1){const e=I?"var(--Button-Focus-Radius)":"var(--Vertical-Button-Focus-Radius)";f=I?o&&c?e:o?e+" 0 0 "+e:c?"0 "+e+" "+e+" 0":"0":o&&c?e:o?e+" "+e+" 0 0":c?"0 0 "+e+" "+e:"0"}const g=W&&Y>1?{borderRadius:p,...!o&&(I?{marginLeft:"calc(-1 * var(--Button-Border-Width))"}:{marginTop:"calc(-1 * var(--Button-Border-Width))"}),position:"relative","&:hover, &:focus-visible":{zIndex:1}}:{},b=R?{backgroundColor:"var(--Background) !important",borderColor:V+" !important"}:{backgroundColor:Q+" !important",borderColor:V+" !important"},v=R?G:j,x=v,y=d?{...b,color:v+" !important","&:hover, &:active, &.Mui-focusVisible, &:focus-visible":{...b,color:x+" !important"}}:{},z={...P&&I&&{flex:"1 1 0",minWidth:0},...g,transform:"none !important","&:hover, &:active, &:focus-visible":{transform:"none !important"},...y,...d?{}:{color:q,backgroundColor:"transparent","&:hover":{backgroundColor:"var(--Hover)",color:G,zIndex:1},"&:active":{backgroundColor:"var(--Pressed)",color:G},"&.Mui-focusVisible, &:focus-visible":{color:G}},...R&&!d?{border:"none !important","&:hover":{border:"none !important"}}:{},"&:focus-visible, &.Mui-focusVisible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px",zIndex:2,...f?{borderRadius:f}:{}},...a.props.sx};!function(e={},a=!1){if("production"===process.env.NODE_ENV)return;const t=[];(e.avatar||"avatar"===e.contentType)&&t.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&&t.push(`a solid segment (variant="${r}") — segments are outline or ghost; the GROUP paints the selected one`),a&&(e.iconOnly||e.letterNumber||e.contentType)&&t.push("a typed SEPARATED segment — Separated-Button-Segments has no Type axis");for(const e of t)ny.has(e)||(ny.add(e),console.warn("[ButtonGroup] "+e+"."))}(a.props,l);const S=e.cloneElement(a,{variant:a.props.variant??(C?R?d?r+"-outline":"ghost":d?r:r+"-outline":R?"ghost":r),size:a.props.size??i,disabled:a.props.disabled??n,onClick:J(s,a.props.onClick),...C?{"aria-pressed":d}:{},sx:z});return D&&!d?le(h,{"data-theme":U,"data-surface":"Surface-Brightest",sx:{display:"contents"},children:S},t):e.cloneElement(S,{key:t})});return le(h,{role:"group","aria-label":S,className:"btn-group btn-group-"+t+" btn-group-"+r+" "+y,sx:{...H?{display:P?"grid":"inline-grid",gridAutoFlow:"column",gridAutoColumns:"1fr",justifyItems:"stretch",alignItems:"stretch",width:P?"100%":"fit-content"}:{display:P?"flex":"inline-flex",flexDirection:I?"row":"column",alignItems:"stretch",width:P?"100%":"auto"},gap:W?0:N,border:"none",borderRadius:"var(--Style-Border-Radius)",...z},...w,children:Z})}const ly={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"}},cy=l({variant:"solid",color:"default",size:"medium",spacing:0}),sy=l({expanded:!1,toggle:()=>{},disabled:!1,accordionId:""}),dy="var(--Accordion-Radius, var(--Button-Radius))";function uy({children:e,variant:a="solid",surface:t,color:r="default",size:i="medium",spacing:n=0,className:o="",sx:l={},...c}){const s="default"===r?"Default":(d=r).charAt(0).toUpperCase()+d.slice(1);var d;const u=0===n,m="default"===r?"Default":s,p=t||("dark"===a?"Surface-Dimmest":"light"===a?"Surface-Brightest":"Surface");return le(cy.Provider,u?{value:{variant:a,color:r,size:i,spacing:n,dataTheme:m,dataSurface:p},children:le(h,{role:"presentation",className:"accordion-group accordion-group-connected accordion-group-"+a+" "+o,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:dy,borderTopRightRadius:dy},"& > .accordion-segment:first-of-type .accordion-summary":{borderTopLeftRadius:dy,borderTopRightRadius:dy},"& > .accordion-segment:last-of-type":{borderBottomLeftRadius:dy,borderBottomRightRadius:dy,marginBottom:0},"& > .accordion-segment:last-of-type .accordion-summary:not(.accordion-summary-expanded)":{borderBottomLeftRadius:dy,borderBottomRightRadius:dy},...l},...c,children:e})}:{value:{variant:a,color:r,size:i,spacing:n,dataTheme:m,dataSurface:p},children:le(h,{role:"presentation",className:"accordion-group accordion-group-"+a+" accordion-group-spaced "+o,sx:{display:"flex",flexDirection:"column",gap:.5===n?"var(--Sizing-Half)":1===n?"var(--Sizing-1)":1.5===n?"var(--Sizing-1-and-Half)":2===n?"var(--Sizing-2)":8*n+"px",...l},...c,children:e})})}function hy({children:e,expanded:t,defaultExpanded:r=!1,onChange:i,disabled:n=!1,className:o="",sx:l={},...s}){const[d,u]=a(r),m=void 0!==t,p=m?t:d,{dataTheme:f,dataSurface:g}=c(cy),[b]=a(()=>"accordion-"+Math.random().toString(36).substring(2,9));return le(sy.Provider,{value:{expanded:p,toggle:()=>{if(n)return;const e=!p;m||u(e),i?.(e)},disabled:n,accordionId:b},children:le(h,{className:"accordion-segment accordion"+(p?" accordion-expanded":"")+(n?" accordion-disabled":"")+" "+o,"data-theme":f,"data-surface":g,sx:{border:"1px solid var(--Border-Variant)",borderRadius:dy,backgroundColor:"var(--Background)",overflow:"hidden",boxShadow:If,opacity:n?"var(--Disabled, 0.38)":1,...l},...s,children:e})})}const my={small:ur,medium:pr,large:xr},py={small:dr,medium:mr,large:vr};function fy({children:e,startDecorator:a,endDecorator:t,eyebrow:r,overline:i,secondary:n,expandIcon:o,className:l="",sx:s={},...d}){const{expanded:u,toggle:m,disabled:p,accordionId:f}=c(sy),{size:g}=c(cy),b=ly[g]||ly.medium,v=my[g]||my.medium,x=o||le(Bf,{size:b.iconSize,sx:{color:u?"var(--Text)":"var(--Quiet)",transition:"color 0.15s ease"},children:le(ue,{})}),y={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block"};return se(h,{component:"button",role:"button","aria-expanded":u,"aria-controls":f+"-content",id:f+"-header",tabIndex:p?-1:0,onClick:m,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),m())},className:"accordion-summary"+(u?" accordion-summary-expanded":"")+" "+l,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:p?"not-allowed":"pointer",textAlign:"left",transition:"color 0.2s ease, background-color 0.15s ease",borderRadius:u?dy+" "+dy+" 0 0":dy,"&:hover":p?{}:{color:"var(--Text)",backgroundColor:"var(--Hover)","& .omni-icon":{color:"var(--Text)"}},"&:active":p?{}:{color:"var(--Text)",backgroundColor:"var(--Pressed)","& .omni-icon":{color:"var(--Text)"}},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"},...s},...d,children:[a&&le(h,{className:"accordion-summary-start",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:a}),se(h,{sx:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)"},children:[(r??i)&&le(Ar,{style:{...y,color:"var(--Text-Quiet)"},children:r??i}),null!=e&&le(v,{style:{...y,color:"inherit"},children:e}),n&&le(dr,{style:{...y,color:"var(--Text-Quiet)"},children:n})]}),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:x})]})}function gy({children:e,className:a="",sx:t={},...r}){const{expanded:i,accordionId:n}=c(sy),{size:o}=c(cy),l=ly[o]||ly.medium,s=py[o]||py.medium;return i?le(h,{role:"region",id:n+"-content","aria-labelledby":n+"-header",className:"accordion-details "+a,sx:{padding:"0 "+l.detailsPx+" "+l.detailsPy+" "+l.detailsPx,color:"var(--Text)",fontFamily:"inherit",lineHeight:1.6,...t},...r,children:"string"==typeof e||"number"==typeof e?le(s,{children:e}):e}):null}const by=["Link","Chip","Badge","Caption","Label","Tag","BodySmall","LegalSemibold","Legal","LabelSmall","LabelExtraSmall","EyebrowSmall","ButtonSmall"];function vy(a){let t=!1;return e.Children.forEach(a,a=>{(function(a){if(!e.isValidElement(a))return!1;const t=a.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 r=a.type;if(r){const e=r.displayName||r.name||"";if(by.some(a=>e.includes(a)))return!0}return!1})(a)&&(t=!0)}),t}function xy({children:e,gap:a,spacing:t,direction:r="column",enforceMinGap:i=!0,minGapToken:n="--min-stack-gap",divider:o,flexWrap:l,useFlexGap:c=!0,alignItems:s,justifyContent:d,sx:h={},className:p="",...f}){const g=void 0!==a?a:t,b=i&&vy(e),v=u(()=>{if(!b)return g;const e=function(e,a=8){return null==e?0:"number"==typeof e?e*a:"string"==typeof e?e.endsWith("px")?parseFloat(e):e.endsWith("rem")?parseFloat(e)*parseFloat(getComputedStyle(document.documentElement).fontSize||"16"):parseFloat(e)*a||0:0}(g),a=function(e,a=8){if("undefined"==typeof window)return a;const t=getComputedStyle(document.documentElement).getPropertyValue(e).trim();return t?t.endsWith("rem")?parseFloat(t)*parseFloat(getComputedStyle(document.documentElement).fontSize):parseFloat(t)||a:a}(n,8);return e>=a?g:"var("+n+", "+a+"px)"},[b,g,n]);return le(m,{direction:r,spacing:c?void 0:v,gap:c?v:void 0,divider:o,flexWrap:l,useFlexGap:c,alignItems:s,justifyContent:d,className:"omni-stack"+(b?" omni-stack-min-gap-enforced":"")+(p?" "+p:""),sx:{...f["data-surface"]||f["data-theme"]?{background:"var(--Background)"}:{},boxSizing:"border-box",...b?{"&::before":{display:"none"}}:{},...h},"data-min-gap-enforced":b?"true":void 0,...f,children:e})}const yy=e=>le(xy,{direction:"row",alignItems:"center",...e}),zy=e=>le(xy,{direction:"column",...e}),Sy=e=>le(xy,{direction:"column",alignItems:"center",justifyContent:"center",...e}),wy=e=>le(xy,{direction:"row",alignItems:"center",justifyContent:"space-between",...e}),ky=e=>le(xy,{direction:"row",flexWrap:"wrap",...e}),Cy=({breakpoint:e="sm",...a})=>le(xy,{direction:{xs:"column",[e]:"row"},...a}),By=xy,My=ky,Ty=e=>le(h,{sx:{borderBottom:"1px solid var(--Border)",width:"100%"},...e}),Ay=({sx:e,...a})=>le(xy,{sx:{px:2,...e},...a}),Ly=({sx:e,...a})=>le(xy,{sx:{overflowY:"auto",...e},...a});function Iy({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"primary":"primary-outline",size:"small",onClick:t,children:e})}function Ny({code:e}){return le(Yb,{code:e,language:"JSX",wrap:!0,sx:{mt:1}})}function Wy({passes:e}){return se(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?we:ke,{sx:{fontSize:14}}),e?"WCAG Pass":"WCAG Fail"]})}function Dy({leftLabel:e,rightLabel:a,leftContent:t,rightContent:r,leftCode:i,rightCode:n,leftPasses:o,rightPasses:l}){return se(y,{container:!0,spacing:3,children:[le(y,{item:!0,xs:12,md:6,children:se(h,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[se(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(dr,{style:{fontWeight:600},children:e}),le(Wy,{passes:o})]}),le(h,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:t}),le(Ny,{code:i})]})}),le(y,{item:!0,xs:12,md:6,children:se(h,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[se(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(dr,{style:{fontWeight:600},children:a}),le(Wy,{passes:l})]}),le(h,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:r}),le(Ny,{code:n})]})})]})}function Ry(){const[e,t]=a("column"),[r,i]=a(.5),[n,o]=a("small"),[l,c]=a(!0),[s,d]=a(!1),[u,m]=a("Default"),[p,f]=a("Surface"),g={small:{label:"Small links ⚡",content:se(ce,{children:[le(ti,{href:"#",size:"small",children:"Terms of Service"}),le(ti,{href:"#",size:"small",children:"Privacy Policy"}),le(ti,{href:"#",size:"small",children:"Cookie Settings"})]})},chips:{label:"Chips ⚡",content:se(ce,{children:[le(nb,{label:"React",size:"small"}),le(nb,{label:"TypeScript",size:"small"}),le(nb,{label:"Design System",size:"small"})]})},normal:{label:"Normal buttons",content:se(ce,{children:[le(Yg,{variant:"primary",size:"medium",children:"Primary"}),le(Yg,{variant:"secondary",size:"medium",children:"Secondary"})]})},mixed:{label:"Mixed ⚡",content:se(ce,{children:[le(Yg,{variant:"primary",size:"medium",children:"Save changes"}),le(ti,{href:"#",size:"small",children:"Or discard"})]})}},b=["small","chips","mixed"].includes(n),v=l&&b;return se(y,{container:!0,spacing:3,sx:{mt:1},children:[se(y,{item:!0,xs:12,md:7,children:[le(uv,{theme:u,surface:p,children:se(h,{sx:{width:"100%"},children:[v&&se(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(ke,{sx:{fontSize:16}}),"Small child detected — gap raised to var(--min-stack-gap)"]}),le(xy,{direction:e,gap:r,enforceMinGap:l,flexWrap:s?"wrap":void 0,children:g[n].content})]})}),le(Ny,{code:(()=>{const a=["<OmniStack"];return"column"!==e&&a.push(' direction="'+e+'"'),a.push(" gap={"+r+"}"),l||a.push(" enforceMinGap={false}"),s&&a.push(' flexWrap="wrap"'),a.push(">"),a.push(" {children}"),a.push("</OmniStack>"),a.join("\n")})()})]}),le(y,{item:!0,xs:12,md:5,children:se(h,{sx:{display:"flex",flexDirection:"column",gap:3},children:[se(h,{children:[le(Ar,{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:a}])=>le(Iy,{label:a,selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),le(h,{sx:{display:"flex",gap:1},children:["row","column"].map(a=>{return le(Iy,{label:(r=a,r?r.charAt(0).toUpperCase()+r.slice(1):""),selected:e===a,onClick:()=>t(a)},a);var r})})]}),se(h,{children:[se(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["GAP — ",r," unit",v?" → raised to var(--min-stack-gap)":""]}),se(h,{sx:{display:"flex",alignItems:"center",gap:2},children:[le(h,{component:"input",type:"range",min:0,max:6,step:.5,value:r,onChange:e=>i(Number(e.target.value)),sx:{flex:1,accentColor:"var(--Primary-Color-10)"}}),le(zr,{style:{color:"var(--Text)",minWidth:24,textAlign:"right"},children:r})]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),se(h,{sx:{display:"flex",flexDirection:"column",gap:1.5},children:[se(h,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[se(h,{children:[le(dr,{children:"Enforce min gap"}),le(zr,{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"})]}),le(sv,{checked:l,onChange:e=>c(e.target.checked),size:"small"})]}),se(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[le(dr,{children:"Flex wrap"}),le(sv,{checked:s,onChange:e=>d(e.target.checked),size:"small"})]})]})]})]})})]})}function Fy(){const[e,t]=a("Default"),[r,i]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Stack",component:"Stack"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:t,surface:r,onSurfaceChange:i})}),le(mr,{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."}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Why it matters"}),le(xb,{children:"Playground"}),le(xb,{children:"API"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Stack",theme:e,surface:r})}),le(yb,{value:1,children:se(h,{sx:{pt:3,display:"flex",flexDirection:"column",gap:4},children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(_t,{children:"The problem"}),le(mr,{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(Dy,{leftLabel:"Plain MUI Stack — gap too small",rightLabel:"OmniStack — gap auto-enforced",leftPasses:!1,rightPasses:!0,leftContent:se(h,{sx:{display:"flex",flexDirection:"column",gap:"4px"},children:[le(ti,{href:"#",size:"small",children:"Terms of Service"}),le(ti,{href:"#",size:"small",children:"Privacy Policy"}),le(ti,{href:"#",size:"small",children:"Cookie Settings"})]}),rightContent:se(xy,{gap:.5,children:[le(ti,{href:"#",size:"small",children:"Terms of Service"}),le(ti,{href:"#",size:"small",children:"Privacy Policy"}),le(ti,{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'})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(_t,{children:"Mixed component sizes"}),le(mr,{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(Dy,{leftLabel:"Without enforcement",rightLabel:"With enforcement",leftPasses:!1,rightPasses:!0,leftContent:se(h,{sx:{display:"flex",flexDirection:"column",gap:"2px"},children:[le(Yg,{variant:"primary",size:"medium",children:"Save changes"}),le(ti,{href:"#",size:"small",children:"Or discard"})]}),rightContent:se(xy,{gap:.25,children:[le(Yg,{variant:"primary",size:"medium",children:"Save changes"}),le(ti,{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'})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(_t,{children:"How detection works"}),le(mr,{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:a},t,r)=>se(h,{sx:{display:"flex",alignItems:"center",gap:2,py:1.5,borderBottom:t<r.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(dr,{style:{flex:"0 0 200px"},children:e}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(_t,{children:"Token-driven minimum"}),le(mr,{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(Ny,{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. */"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(_t,{children:"Auditable opt-out"}),se(mr,{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(Ny,{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(yb,{value:2,children:le(Ry,{})}),le(yb,{value:3,children:se(h,{sx:{pt:3},children:[le(_t,{children:"OmniStack props"}),le(mr,{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:a,default:t,desc:r},i,n)=>se(h,{sx:{display:"grid",gridTemplateColumns:"160px 160px 1fr",gap:2,px:2,py:1.5,alignItems:"start",borderBottom:i<n.length-1?"1px solid var(--Border)":"none",backgroundColor:i%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(zr,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a}),se(h,{children:[le(zr,{style:{color:"var(--Text)"},children:r}),se(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:["Default: ",t]})]})]},e))}),le(_t,{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:a},t,r)=>se(h,{sx:{display:"grid",gridTemplateColumns:"200px 1fr",gap:2,px:2,py:1.5,borderBottom:t<r.length-1?"1px solid var(--Border)":"none",backgroundColor:t%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(zr,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(zr,{style:{color:"var(--Text-Quiet)"},children:a})]},e))}),le(_t,{children:"Debug attributes"}),le(Ny,{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"]\')'})]})}),le(yb,{value:4,children:le(gM,{component:"Stack"})})]})]})}const Py=["primary","secondary","tertiary","neutral","info","success","warning","error"],Hy=["small","medium","large"],Oy=({label:e,emphasis:a=!1,width:t,children:r})=>se(zy,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start",width:t},children:[le("div",{children:r}),le(zr,{color:a?"standard":"quiet",children:e})]}),Ey=({values:e,render:a,defaultValue:t,width:r})=>{const i=e.filter(e=>e!==t),n=e=>le(Oy,{label:String(e),emphasis:e===t,width:r,children:a(e)},String(e));return se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"flex-end",flexWrap:"wrap"},children:[void 0!==t?n(t):null,void 0!==t&&i.length?le(mx,{orientation:"vertical",style:{alignSelf:"stretch"}}):null,i.map(n)]})},Vy=({values:e,render:a,defaultValue:t,width:r="100%"})=>{const i=void 0!==t?[t,...e.filter(e=>e!==t)]:e;return le(zy,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:420},children:i.map(e=>se(zy,{gap:"var(--Sizing-Half)",style:{width:r},children:[le(zr,{color:e===t?"standard":"quiet",children:String(e)}),a(e)]},String(e)))})},Qy=({render:e,offLabel:a="false",onLabel:t="true",width:r})=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Oy,{label:a,emphasis:!0,width:r,children:e(!1)}),le(Oy,{label:t,width:r,children:e(!0)})]}),jy=180,qy=(e,a=180)=>le("div",{style:{width:a},children:e}),Gy={variant:()=>le(Ey,{values:["default",...Py],defaultValue:"default",width:jy,render:e=>qy(le(Nx,{variant:e,defaultValue:60,"aria-label":e}))}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",width:jy,render:e=>qy(le(Nx,{size:e,defaultValue:60,"aria-label":e}))}),"value / defaultValue":()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"a number — one thumb"}),qy(le(Nx,{defaultValue:60,"aria-label":"single"}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"an array — two thumbs, a range"}),qy(le(Nx,{defaultValue:[25,75],getAriaLabel:()=>"range"}))]})]}),fill:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-1)",children:[le(zr,{color:"standard",children:"one thumb — Figma: single / single-inverted"}),se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"standard",emphasis:!0,width:jy,children:qy(le(Nx,{defaultValue:60,"aria-label":"standard"}))}),le(Oy,{label:"inverted",width:jy,children:qy(le(Nx,{defaultValue:60,fill:"inverted","aria-label":"inverted"}))}),le(Oy,{label:"false — no fill",width:jy,children:qy(le(Nx,{defaultValue:60,fill:!1,"aria-label":"no fill"}))})]})]}),se(zy,{gap:"var(--Sizing-1)",children:[le(zr,{color:"quiet",children:"two thumbs — Figma: double / double-inverted"}),se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"standard — fills between",width:jy,children:qy(le(Nx,{defaultValue:[25,75],getAriaLabel:()=>"between"}))}),le(Oy,{label:"inverted — fills outside",width:jy,children:qy(le(Nx,{defaultValue:[25,75],fill:"inverted",getAriaLabel:()=>"outside"}))})]})]})]}),orientation:()=>se(yy,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Oy,{label:"horizontal",emphasis:!0,width:jy,children:qy(le(Nx,{defaultValue:60,"aria-label":"horizontal"}))}),le(Oy,{label:"vertical",width:60,children:le("div",{style:{height:160},children:le(Nx,{orientation:"vertical",defaultValue:60,"aria-label":"vertical"})})}),le(Oy,{label:"vertical range",width:60,children:le("div",{style:{height:160},children:le(Nx,{orientation:"vertical",defaultValue:[25,75],getAriaLabel:()=>"vertical range"})})}),le(Oy,{label:"vertical, inverted",width:60,children:le("div",{style:{height:160},children:le(Nx,{orientation:"vertical",fill:"inverted",defaultValue:60,"aria-label":"vertical inverted"})})})]}),marks:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — no marks"}),qy(le(Nx,{defaultValue:60,"aria-label":"none"}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — a dot at every step"}),qy(le(Nx,{defaultValue:60,step:10,marks:!0,"aria-label":"every step"}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"an array — dots where you say, with labels"}),qy(le(Nx,{defaultValue:60,marks:[{value:0,label:"0"},{value:50,label:"50"},{value:100,label:"100"}],"aria-label":"labelled marks"}),260)]})]}),step:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"1 — every whole number"}),qy(le(Nx,{defaultValue:60,"aria-label":"step 1"}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"25 — a fixed increment"}),qy(le(Nx,{defaultValue:50,step:25,marks:!0,"aria-label":"step 25"}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"null — restricted to the marks, which need not be even"}),qy(le(Nx,{defaultValue:40,step:null,marks:[{value:0,label:"0"},{value:10,label:"10"},{value:40,label:"40"},{value:100,label:"100"}],"aria-label":"restricted"}),260)]})]}),valueLabelDisplay:()=>le(Ey,{values:["off","auto","on"],defaultValue:"off",width:jy,render:e=>qy(le(Nx,{valueLabelDisplay:e,defaultValue:60,"aria-label":e}))}),label:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"with a visible label"}),qy(le(Nx,{label:"Volume",defaultValue:60}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"without one it needs aria-label"}),qy(le(Nx,{defaultValue:60,"aria-label":"Volume"}))]}),le(dr,{color:"quiet",children:"A RANGE slider needs `getAriaLabel` instead of either — one name per thumb. MUI warns in development if it is given `aria-label`."})]}),disabled:()=>le(Qy,{width:jy,offLabel:"enabled",onLabel:"disabled",render:e=>qy(le(Nx,{disabled:e,defaultValue:60,"aria-label":"x"}))})},Uy={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 Xy({value:e,defaultValue:t="",onChange:i,onFocus:n,onBlur:o,onClear:l,onSubmit:c,placeholder:s="Search…",size:d="medium",color:u="default",showClearButton:m=!0,disabled:p=!1,ariaLabel:f="Search",className:g="",sx:b={},...v}){const[x,y]=a(t),[z,S]=a(!1),w=r(null),k=void 0!==e,C=k?e:x,B=C.length>0,M=z||B,T=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===u?"primary":u),A="default"===u?"var(--Text)":"var(--Text-"+T+")",L=Uy[d]||Uy.medium,I=()=>{k||y(""),i?.(""),l?.(),w.current?.focus()};return le(h,{className:"search-field search-field-"+d+(z?" search-field-focused":"")+(B?" search-field-filled":"")+(p?" search-field-disabled":"")+(g?" "+g:""),sx:{display:"flex",boxSizing:"border-box",...b},...v,children:le(h,{sx:{border:"1px solid "+("var(--Buttons-"+T+"-Border)"),borderRadius:"small"===d?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===d?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",opacity:p?"var(--Disabled, 0.38)":1,transition:"border-color 0.15s ease, box-shadow 0.15s ease",boxShadow:"none",width:"100%",...!p&&{"&:hover":{borderColor:"var(--Buttons-"+T+"-Hover)"},"&:active":{borderColor:"var(--Buttons-"+T+"-Pressed)"}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:se(h,{sx:{display:"flex",alignItems:"center",gap:1,width:"100%",boxSizing:"border-box",minHeight:L.height,px:L.px+"px",backgroundColor:"var(--Hover)"},children:[le(Bf,{size:"small",sx:{color:M?A:"var(--Quiet)",flexShrink:0,transition:"color 0.15s ease"},children:le(Ie,{})}),le(h,{component:"input",ref:w,type:"text",role:"searchbox","aria-label":f,value:C,onChange:e=>{const a=e.target.value;k||y(a),i?.(a,e)},onFocus:e=>{S(!0),n?.(e)},onBlur:e=>{S(!1),o?.(e)},onKeyDown:e=>{"Enter"===e.key&&c?.(C,e),"Escape"===e.key&&B&&I()},placeholder:s,disabled:p,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:M?A:"var(--Quiet)",fontSize:L.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"}}}),m&&B&&!p&&le(h,{component:"button",type:"button","aria-label":"Clear search",onClick:I,sx:{display:"flex",alignItems:"center",justifyContent:"center",width:L.iconSize+4,height:L.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:A},"&:active":{backgroundColor:"var(--Pressed)",color:A},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"}},children:le(Bf,{size:"small",children:le(Ea,{})})})]})})})}const Yy=l(null),Jy=["Default","Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error","App-Bar","Nav-Bar","Status"],Zy=["Professional","Modern","Bold","Playful"],$y=["Surface-Dimmest","Surface-Dim","Surface","Surface-Bright","Surface-Brightest","Container","Container-Low","Container-Lowest","Container-High","Container-Highest"],Ky={"light-tonal":{theme:"Primary",rootSurface:"Surface-Brightest"},"grey-professional":{theme:"Neutral",rootSurface:"Surface"},"dark-professional":{theme:"Neutral",rootSurface:"Surface-Dimmest"}},_y="omni-foundation",ez="omni-core",az="omni-typography",tz="omni-mode",rz="omni-base",iz="omni-styles";function nz(e){document.getElementById(e)?.remove()}function oz(e,a,t){return a?function(e){return!(!e||"string"!=typeof e)&&(e.startsWith("http")||e.startsWith("/")||e.endsWith(".css"))}(a)?function(e,a,t){const r=document.getElementById(e);return r?"LINK"===r.tagName&&r.getAttribute("href")!==a?new Promise((e,t)=>{r.onload=()=>e(r),r.onerror=()=>t(new Error(`OmniDesignProvider: failed to load ${a}`)),r.setAttribute("href",a)}):Promise.resolve(r):new Promise((r,i)=>{const n=document.createElement("link");n.id=e,n.rel="stylesheet",n.setAttribute("data-omni","true"),n.onload=()=>r(n),n.onerror=()=>i(new Error(`OmniDesignProvider: failed to load ${a}`)),n.href=a;const o=t?document.getElementById(t):null;o?document.head.insertBefore(n,o):document.head.appendChild(n)})}(e,a,t):function(e,a,t){if(!a)return Promise.resolve(null);const r=document.getElementById(e);if(r)return r.textContent=a,Promise.resolve(r);const i=document.createElement("style");i.id=e,i.setAttribute("data-omni","true"),i.textContent=a;const n=t?document.getElementById(t):null;return n?document.head.insertBefore(i,n):document.head.appendChild(i),Promise.resolve(i)}(e,a,t):Promise.resolve(null)}function lz({themeURL:e,foundationCSS:n,coreCSS:o,typographyCSS:l,lightModeCSS:c,darkModeCSS:s,baseCSS:d,stylesCSS:h,defaultTheme:m="Default",defaultStyle:p="Modern",defaultSurface:f="Surface",surfaceStyle:g,defaultDarkMode:b=!1,darkTheme:v=null,darkMode:x,onDarkModeChange:y,className:z,style:S,fullHeight:w=!0,children:k}){const[C,B]=a(b),M=void 0!==x,T=M?x:C,[A,L]=a({foundation:n??null,core:o??null,typography:l??null,lightMode:c??null,darkMode:s??null,base:d??null,styles:h??null}),[I,N]=a({}),W=r(!0);t(()=>(W.current=!0,()=>{W.current=!1}),[]),t(()=>{e&&(U("loading"),async function(e){const a=/\.json(\?|$)/.test(e)?e:`${e.replace(/\/$/,"")}/theme.json`,t=e.replace(/\/$/,"").replace(/\/theme\.json(\?.*)?$/,""),r=await fetch(a);if(!r.ok)throw new Error(`OmniDesignProvider: could not load theme manifest from ${a} (${r.status})`);const i=await r.json(),n=e=>e?/^https?:\/\//i.test(e)?e:`${t}/${e}`:null;return{foundationURL:n(i.foundation),coreURL:n(i.core),typographyURL:n(i.typography),lightModeURL:n(i.lightMode),darkModeURL:n(i.darkMode),baseURL:n(i.base),stylesURL:n(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=>{W.current&&(L({foundation:n??e.foundationURL,core:o??e.coreURL,typography:l??e.typographyURL,lightMode:c??e.lightModeURL,darkMode:s??e.darkModeURL,base:d??e.baseURL,styles:h??e.stylesURL}),N({defaultTheme:e.defaultTheme,defaultStyle:e.defaultStyle,defaultSurface:e.defaultSurface,darkTheme:e.darkTheme,name:e.name}))}).catch(e=>{W.current&&(console.error("OmniDesignProvider: manifest error:",e),Y(e.message),U("error"))}))},[e]);const D=g?Ky[g]?.theme??m:"Default"!==m?m:I.defaultTheme??m,R=g?Ky[g]?.rootSurface??f:I.defaultSurface??f,F=I.defaultStyle??p,P=v??I.darkTheme??null,[H,O]=a(D),[E,V]=a(F),[Q,j]=a(R),q=!!(e||n||o||l||c||s||d||h),[G,U]=a(q?"loading":"ready"),[X,Y]=a(null);t(()=>{const{foundation:e,core:a,typography:t,base:r,styles:i}=A;if(e||a||t||r||i)return U("loading"),Y(null),Promise.all([oz(_y,e),oz(ez,a),oz(az,t).catch(e=>{console.warn("OmniDesignProvider: typography CSS did not load —",e.message)}),oz(rz,r),oz(iz,i)]).then(()=>{W.current&&U("ready")}).catch(e=>{W.current&&(console.error("OmniDesignProvider CSS error:",e),Y(e.message),U("error"))}),()=>{nz(_y),nz(ez),nz(az),nz(rz),nz(iz)};U("ready")},[A.foundation,A.core,A.typography,A.base,A.styles]),t(()=>{const e=T?A.darkMode:A.lightMode;e&&oz(tz,e,rz).catch(e=>console.error("OmniDesignProvider mode CSS error:",e))},[T,A.lightMode,A.darkMode]),t(()=>()=>nz(tz),[]);const J=T&&P?P:H,Z=i(()=>{M?y?.(!T):B(e=>!e)},[M,T,y]),$=i(e=>{Jy.includes(e)||console.warn(`OmniDesignProvider: unknown theme "${e}"`),O(e)},[]),K=i(e=>{Zy.includes(e)||console.warn(`OmniDesignProvider: unknown style "${e}"`),V(e)},[]),_=i(e=>{$y.includes(e)||console.warn(`OmniDesignProvider: unknown surface "${e}"`),j(e)},[]),ee=u(()=>({theme:J,style:E,surface:Q,isDark:T,cssStatus:G,cssError:X,setTheme:$,setStyle:K,setSurface:_,toggleDarkMode:Z,themes:Jy,styles:Zy,surfaces:$y,name:I.name??null}),[J,E,Q,T,G,X,$,K,_,Z,I.name]);return se(Yy.Provider,{value:ee,children:[le("style",{"data-omni":"hide-during-load",children:'[data-omni-css="loading"]{visibility:hidden}'}),le("div",{"data-theme":J,"data-style":E,"data-surface":Q,"data-omni-css":G,className:z,style:{...w?{minHeight:"100vh"}:{},...S},children:k})]})}function cz(){const e=c(Yy);if(!e)throw new Error("useOmniDesign must be used inside a <OmniDesignProvider>");return e}function sz({theme:e,surface:a,as:t="div",children:r,className:i,style:n,...o}){return le(t,{"data-theme":e,"data-surface":a,className:i,style:n,...o,children:r})}function dz({surface:e,as:a="div",children:t,className:r,style:i,...n}){return le(a,{"data-surface":e,className:r,style:i,...n,children:t})}const uz={small:{width:"240px",height:"200px"},medium:{width:"320px",height:"280px"},large:{width:"420px",height:"380px"}},hz={left:{borderRight:"1px solid var(--Border)"},right:{borderLeft:"1px solid var(--Border)"},top:{borderBottom:"1px solid var(--Border)"},bottom:{borderTop:"1px solid var(--Border)"}},mz={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}},pz={left:"translateX(-100%)",right:"translateX(100%)",top:"translateY(-100%)",bottom:"translateY(100%)"};function fz({children:e,open:a=!1,onClose:n,size:o="medium",anchor:l="left",hideBackdrop:c=!1,className:s="",sx:d={},...u}){const m=r(null),p=r(null),f="left"===l||"right"===l;let g;try{g=cz()}catch{g=null}const b=g?.theme||"Default",v=g?.style||"Modern",x=uz[o]||uz.medium;t(()=>{if(!a)return;const e=e=>{"Escape"===e.key&&n?.()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[a,n]),t(()=>{a?(p.current=document.activeElement,requestAnimationFrame(()=>{const e=m.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');e?e.focus():m.current?.focus()})):p.current&&(p.current.focus(),p.current=null)},[a]),t(()=>{if(a){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}},[a]);const y=i(e=>{if("Tab"!==e.key||!m.current)return;const a=m.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(!a.length)return;const t=a[0],r=a[a.length-1];e.shiftKey?document.activeElement===t&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),t.focus())},[]);return a?se(ce,{children:[!c&&le(h,{onClick:()=>n?.(),"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:m,role:"dialog","aria-modal":"true",tabIndex:-1,"data-theme":b,"data-style":v,"data-surface":"Surface-Dim",onKeyDown:y,className:"drawer drawer-"+o+" drawer-"+l+" "+s,sx:{position:"fixed",zIndex:10000001,...mz[l],...f?{width:x.width,height:"100%"}:{height:x.height,width:"100%"},backgroundColor:"var(--Background)",color:"var(--Text)",...hz[l],boxShadow:Wf,display:"flex",flexDirection:"column",outline:"none",overflow:"hidden",animation:"drawer-slide-in 0.3s ease forwards","@keyframes drawer-slide-in":{from:{transform:pz[l]},to:{transform:"translate(0, 0)"}},...d},...u,children:e})]}):null}function gz({onClick:e,className:a="",sx:t={},...r}){return le(h,{sx:{position:"absolute",top:"12px",right:"12px",zIndex:1,...t},className:a,...r,children:le(Yg,{iconOnly:!0,variant:"ghost",size:"small",onClick:e,"aria-label":"Close drawer",children:le(Bf,{size:"small",children:le(Ea,{})})})})}function bz({children:e,className:a="",sx:t={},...r}){return le(h,{className:"drawer-header "+a,sx:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px",borderBottom:"1px solid var(--Border)",flexShrink:0,...t},...r,children:e})}function vz({children:e,className:a="",sx:t={},...r}){return le(h,{className:"drawer-content "+a,sx:{flex:1,overflowY:"auto",padding:"16px",...t},...r,children:e})}const xz={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 yz({children:e,onClick:a,ariaLabel:t}){return le(Yg,{iconOnly:!0,variant:"ghost",size:"medium",onClick:a,"aria-label":t,children:e})}function zz({barColor:t="default",surface:r="Surface",loginType:i="login",menuType:n="hamburger",brandType:o="name",searchPosition:l="right",companyName:c="Company",navLinks:s=["Home","Products","About"],rightButtons:d=[],showRightButtons:u=!1,onMenuClick:m,user:p,onLogin:f,onSignOut:g,brand:b,onBrandClick:v,centerSlot:x,endSlot:y,searchValue:z,onSearchChange:S,searchPlaceholder:w="Search...",children:k,className:C="",sx:B={}}){const[M,T]=a(!1),A=xz[t]||xz.default,L=A.theme,I=A.surface||r,N="expanded"===n&&s.length>3?"hamburger":n,W=le(Xy,{placeholder:w,size:"medium",value:z,onChange:S,sx:{flex:"left"===l?"0 1 400px":"0 1 280px",minWidth:0}});return se(ce,{children:[le(h,{component:"header",role:"banner","data-theme":L,"data-surface":I,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:Nf,fontFamily:"inherit",...B},children:k||se(ce,{children:["hamburger"===N&&le(yz,{ariaLabel:"Open navigation menu",onClick:m||(()=>T(!0)),children:le(Pa,{sx:{fontSize:"inherit"}})}),void 0!==b?le(_t,v?{component:"button",type:"button",onClick:v,sx:{background:"transparent",border:"none",padding:0,cursor:"pointer",whiteSpace:"nowrap",flexShrink:0},children:b}:{component:"span",sx:{whiteSpace:"nowrap",flexShrink:0},children:b}):"logo"===o?le(h,{sx:{width:32,height:32,borderRadius:"6px",backgroundColor:"var(--Text)",opacity:.8,flexShrink:0},"aria-label":"Company logo"}):le(_t,{component:"span",sx:{whiteSpace:"nowrap",flexShrink:0},children:c}),se(ce,void 0!==x?{children:[le(h,{sx:{flex:1}}),le(h,{sx:{display:"flex",alignItems:"center",flexShrink:0},children:x}),le(h,{sx:{flex:1}})]}:{children:["left"===l&&W,"expanded"===N&&le(bb,{defaultValue:0,variant:"standard",color:"default",sx:{ml:2,minHeight:0},children:le(vb,{"aria-label":"Main navigation",children:s.map(e=>le(xb,{children:e},e))})}),le(h,{sx:{flex:1}}),"right"===l&&W]}),void 0!==y?le(h,{sx:{display:"flex",alignItems:"center",gap:1},children:y}):se(ce,{children:[u&&d.length>0&&le(h,{sx:{display:"flex",alignItems:"center",gap:.5},children:d.map((a,t)=>a.raw?le(e.Fragment,{children:a.icon},t):le(yz,{ariaLabel:a.label||"Action "+(t+1),children:a.icon},t))}),p?le(Yg,{variant:"ghost",size:"small",onClick:g,"aria-label":"Sign out",startIcon:p.photoURL?le(h,{component:"img",src:p.photoURL,alt:"",sx:{width:24,height:24,borderRadius:"50%"}}):le(Oa,{sx:{fontSize:24}}),children:p.displayName?.split(" ")[0]||"Account"}):f?le(Yg,{variant:"default-outline",size:"small",onClick:f,children:"Login"}):"avatar"===i?le(Yg,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(Oa,{sx:{fontSize:28}})}):null]})]})}),le(fz,{open:M,onClose:()=>T(!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(Yg,{variant:"ghost",size:"medium",onClick:()=>T(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})})]})}function Sz({mobileVariant:e="search",barColor:t="default",surface:r="Surface",title:i="Page Title",subtitle:n="Subtitle text",actionIcon:o,companyName:l="Company",navLinks:c=["Home","Products","About"],className:s="",sx:d={}}){const[u,m]=a(!1),p=xz[t]||xz.default,f=p.theme,g=p.surface||r,b={backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:Nf,fontFamily:"inherit",width:"100%",maxWidth:420,...d},v={"data-theme":f,"data-surface":g},x=le(fz,{open:u,onClose:()=>m(!1),anchor:"left",size:"small",children:le(h,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:c.map(e=>le(Yg,{variant:"ghost",size:"medium",onClick:()=>m(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})});return"search"===e?se(ce,{children:[se(h,{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-search appbar-"+t+" "+s,...v,sx:{...b,display:"flex",alignItems:"center",height:64,px:1.5,gap:1.5},children:[le(yz,{ariaLabel:"Open navigation menu",onClick:()=>m(!0),children:le(Pa,{sx:{fontSize:"inherit"}})}),le(Xy,{placeholder:"Search "+l,size:"small",sx:{flex:1,minWidth:0}}),le(Yg,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(Oa,{sx:{fontSize:28}})})]}),x]}):se(h,"small"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-small appbar-"+t+" "+s,...v,sx:{...b,display:"flex",alignItems:"center",height:64,px:1.5,gap:1},children:[le(yz,{ariaLabel:"Back",children:le(Ha,{sx:{fontSize:"inherit"}})}),se(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}),n&&le(h,{sx:{fontSize:"12px",opacity:.7,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:n})]}),o&&le(yz,{ariaLabel:"Action",children:o})]}:"medium"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-medium appbar-"+t+" "+s,...v,sx:{...b,px:1.5,pb:2},children:[se(h,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(yz,{ariaLabel:"Back",children:le(Ha,{sx:{fontSize:"inherit"}})}),le(h,{sx:{flex:1}}),o&&le(yz,{ariaLabel:"Action",children:o})]}),se(h,{sx:{px:1.5},children:[le(h,{sx:{fontWeight:600,fontSize:"24px",lineHeight:1.2},children:i}),n&&le(h,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:n})]})]}:{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-large appbar-"+t+" "+s,...v,sx:{...b,px:1.5,pb:3},children:[se(h,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(yz,{ariaLabel:"Back",children:le(Ha,{sx:{fontSize:"inherit"}})}),le(h,{sx:{flex:1}}),o&&le(yz,{ariaLabel:"Action",children:o})]}),se(h,{sx:{px:1.5,mt:1},children:[le(h,{sx:{fontWeight:600,fontSize:"36px",lineHeight:1.1},children:i}),n&&le(h,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:n})]})]})}function wz({mode:e="desktop",...a}){return le("mobile"===e?Sz:zz,{...a})}const kz=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Cz=["default","primary","primary-light","white","black"],Bz=["Surface","Surface-Bright","Surface-Dim","Surface-Dimmest"],Mz={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 Tz({ratio:e,threshold:a}){if(!e)return le(zr,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return se(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[se(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(zr,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Az({label:e,ratio:a,threshold:t,note:r}){return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[le(dr,{style:{color:"var(--Text)"},children:e}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),le(Tz,{ratio:a,threshold:t})]})}function Lz({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Iz({color:e,selected:a,onClick:t}){const r=Mz[e]||Mz.default;return le(h,{component:"button","data-theme":r.theme,"data-surface":r.surface||"Surface",onClick:()=>t(e),"aria-label":"Select "+e,"aria-pressed":a,title:e,sx:{width:"var(--Button-Height, 36px)",height:"var(--Button-Height, 36px)",borderRadius:"4px",backgroundColor:"var(--Background)",border:a?"2px solid var(--Text)":"2px 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&&le(he,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function Nz(){const[e,r]=a("desktop"),[i,n]=a("default"),[o,l]=a("Surface"),[c,s]=a("login"),[d,u]=a("hamburger"),[p,f]=a("name"),[g,b]=a("right"),[v,x]=a("search"),[z,S]=a("Default"),[w,k]=a("Surface"),[C,B]=a({}),M="desktop"===e,T=Mz[i]||Mz.default,A=T.theme,L=T.surface||o;return t(()=>{const e={};e.text=Xr("--Text"),e.textQuiet=Xr("--Text-Quiet"),e.background=Xr("--Background"),e.border=Xr("--Border"),e.focusVisible=Xr("--Focus-Visible"),e.hover=Xr("--Hover"),e.active=Xr("--Pressed"),B(e)},[i,o,e]),se(h,{sx:{pb:8},children:[le(yM,{title:"App Bar",component:"AppBar"}),le(h,{sx:{mt:1},children:le(Xf,{theme:z,onThemeChange:S,surface:w,onSurfaceChange:k})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"AppBar",theme:z,surface:w})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:z,surface:w,children:le(h,{sx:{width:"100%",maxWidth:M?"100%":420,overflow:"hidden"},children:M?le(zz,{barColor:i,surface:o,loginType:c,menuType:d,brandType:p,searchPosition:g,companyName:"My App",navLinks:["Home","Products","About"]}):le(Sz,{barColor:i,surface:o,mobileVariant:v,companyName:"My App",title:"Page Title",subtitle:"Subtitle text"})})}),le(Yb,{code:(()=>{if(M){const e=[];"default"!==i&&e.push('barColor="'+i+'"'),"Surface"!==o&&e.push('surface="'+o+'"'),"login"!==c&&e.push('loginType="'+c+'"'),"hamburger"!==d&&e.push('menuType="'+d+'"'),"name"!==p&&e.push('brandType="'+p+'"'),"right"!==g&&e.push('searchPosition="'+g+'"');const a=e.length?"\n "+e.join("\n ")+"\n":"";return'<AppBar mode="desktop"'+(a||" ")+'companyName="My App" />'}{const e=['mode="mobile"','mobileVariant="'+v+'"'];return"default"!==i&&e.push('barColor="'+i+'"'),"Surface"!==o&&e.push('surface="'+o+'"'),"<AppBar\n "+e.join("\n ")+'\n title="Page Title"\n/>'}})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MODE"}),le(m,{direction:"row",spacing:1,children:["desktop","mobile"].map(a=>le(Lz,{label:kz(a),selected:e===a,onClick:()=>r(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Cz.map(e=>le(Iz,{color:e,selected:i===e,onClick:n},e))}),se(zr,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-theme="',A,'"']})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Bz.map(e=>le(Lz,{label:e.replace("Surface-","").replace("Surface","Default"),selected:o===e,onClick:()=>l(e)},e))}),se(zr,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-surface="',o,'"']})]}),M&&se(ce,{children:[se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MENU TYPE"}),le(m,{direction:"row",spacing:1,children:["hamburger","expanded"].map(e=>le(Lz,{label:kz(e),selected:d===e,onClick:()=>u(e)},e))}),le(zr,{style:{color:"var(--Text-Quiet)",marginTop:4,display:"block"},children:"Expanded auto-falls back to hamburger when nav > 3 links"})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BRAND"}),le(m,{direction:"row",spacing:1,children:["name","logo"].map(e=>le(Lz,{label:kz(e),selected:p===e,onClick:()=>f(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEARCH POSITION"}),le(m,{direction:"row",spacing:1,children:["left","right"].map(e=>le(Lz,{label:kz(e),selected:g===e,onClick:()=>b(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LOGIN TYPE"}),le(m,{direction:"row",spacing:1,children:["login","avatar"].map(e=>le(Lz,{label:kz(e),selected:c===e,onClick:()=>s(e)},e))})]})]}),!M&&se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MOBILE VARIANT"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["search","small","medium","large"].map(e=>le(Lz,{label:kz(e),selected:v===e,onClick:()=>x(e)},e))})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),se(h,{sx:{p:3},children:[se(dr,{color:"quiet",style:{marginBottom:24},children:[e," / ",i," / ",o,M?"":" / "+v,' — data-theme="',A,'" data-surface="',L,'"']}),se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(dr,{color:"quiet",style:{marginBottom:16},children:"All text and icons must have 4.5:1 contrast against the AppBar background."}),le(Az,{label:"Resting: var(--Text) vs. var(--Background)",ratio:Ur(C.text,C.background),threshold:4.5,note:'data-theme="'+A+'" data-surface="'+L+'"'}),le(Az,{label:"On hover: var(--Text) vs. var(--Hover)",ratio:Ur(C.text,C.hover),threshold:4.5,note:"Icon buttons use var(--Hover) on hover"}),le(Az,{label:"On active: var(--Text) vs. var(--Pressed)",ratio:Ur(C.text,C.active),threshold:4.5,note:"Icon buttons use var(--Pressed) on press"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(Az,{label:"var(--Focus-Visible) vs. var(--Background)",ratio:Ur(C.focusVisible,C.background),threshold:3,note:"outline: 3px solid var(--Focus-Visible); outline-offset: 1px"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{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:a,note:t})=>{const r=a>=24,i=a>=44,n=a>=48;return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[se(dr,{style:{color:"var(--Text)"},children:[e," — ",a,"px"]}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:t})]}),se(h,{sx:{display:"flex",gap:.5,flexWrap:"wrap",justifyContent:"flex-end"},children:[se(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"]}),se(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":"~"]}),se(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:["Android ",n?"Y":"~"]})]})]},e)})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Landmark:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<header role="banner">'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Navigation (expanded menu):"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav aria-label="Main navigation">'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Theme + Surface:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'data-theme="'+A+'" data-surface="'+L+'"'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Shadow:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"box-shadow: var(--Effect-Level-1)"})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Icon buttons:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"All icon buttons have aria-label. Focus visible on keyboard navigation."})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Keyboard:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Tab navigates all interactive elements. Enter/Space activates buttons."})]})]})]})]})]})]}),le(yb,{value:3,children:le(gM,{component:"AppBar"})})]})]})}const Wz={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}},Dz={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 Rz({options:e=[],value:n,defaultValue:o=null,onChange:l,inputValue:c,onInputChange:s,label:d,labelPosition:u="top",placeholder:m="Type to search",helperText:p,size:f="medium",variant:g="outline",color:b="primary",loading:v=!1,loadingText:x="Loading…",noOptionsText:y="No options",freeSolo:z=!1,clearable:S=!0,disabled:w=!1,fullWidth:k=!1,className:C="",sx:B={},...M}){const T=(A="default"===b?"primary":b).charAt(0).toUpperCase()+A.slice(1);var A;"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 L="light"===g?"outline":g,I="var(--Buttons-"+T+"-Border)",N="default"===b?"var(--Text)":"var(--Text-"+T+")",[W,D]=a(o),[R,F]=a(o?"string"==typeof o?o:o.label||"":""),[P,H]=a(!1),[O,E]=a(!1),[V,Q]=a(-1),j=r(null),q=r(null),G=void 0!==n,U=void 0!==c,X=G?n:W,Y=U?c:R,J="floating"===u,Z="top"===u,$=""!==Y,K=J?Dz[f]||Dz.medium:Wz[f]||Wz.medium,_=Y?e.filter(e=>("string"==typeof e?e:e.label).toLowerCase().includes(Y.toLowerCase())):e,ee=i(e=>{U||F(e),s?.(e)},[U,s]),ae=i(e=>{const a="string"==typeof e?e:e.label;G||D(e),ee(a),l?.(e),H(!1),Q(-1),q.current?.focus()},[G,l,ee]);t(()=>{if(!P)return;const e=e=>{j.current&&!j.current.contains(e.target)&&H(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[P]);return se(h,{ref:j,className:"autocomplete autocomplete-"+f+" autocomplete-variant-"+L+(P?" autocomplete-open":"")+(w?" autocomplete-disabled":"")+(C?" "+C:""),sx:{position:"relative",width:k?"100%":"auto",display:"inline-block",fontFamily:"inherit",...B},...M,children:[Z&&d&&le("small"===f?dr:mr,{component:"label",style:{display:"block",marginBottom:"6px",color:w?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:w?"var(--Disabled, 0.38)":1},children:d}),le(h,{sx:{border:"1px solid "+I,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:w?"var(--Disabled, 0.38)":1,"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{children:se(h,{sx:{position:"relative",display:"flex",alignItems:"center",minHeight:K.height,backgroundColor:"var(--Hover)"},children:[J&&d&&le(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?N:"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:d}),le(h,{component:"input",ref:q,type:"text",role:"combobox","aria-expanded":P,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-label":d||m,autoComplete:"off",value:Y,onChange:e=>{ee(e.target.value),P||H(!0),Q(-1)},onKeyDown:e=>{if("Escape"!==e.key){if("ArrowDown"===e.key){if(e.preventDefault(),!P)return void H(!0);Q(e=>Math.min(e+1,_.length-1))}"ArrowUp"===e.key&&(e.preventDefault(),Q(e=>Math.max(e-1,0))),"Enter"===e.key&&P&&V>=0&&_[V]&&(e.preventDefault(),ae(_[V]))}else H(!1)},onFocus:()=>{E(!0),H(!0)},onBlur:()=>E(!1),disabled:w,placeholder:J?void 0:m,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:$||O?N:"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&&P&&le(Va,{size:16,sx:{mr:1,color:"var(--Quiet)"}}),S&&Y&&!w&&le(h,{component:"button",type:"button","aria-label":"Clear",onClick:()=>{G||D(null),ee(""),l?.(null),q.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(Ea,{sx:{fontSize:14}})}),le(h,{component:"button",type:"button","aria-label":P?"Close":"Open",tabIndex:-1,onClick:()=>{w||H(!P)},sx:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:"100%",border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:w?"not-allowed":"pointer"},children:le(ue,{sx:{fontSize:(K.iconSize||18)+"px",transform:P?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})})]})})}),p&&le(h,{sx:{fontSize:"12px",color:"var(--Quiet)",mt:"4px",ml:"2px"},children:p}),P&&le(h,{role:"listbox","aria-label":d||"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?le(h,{sx:{px:1.5,py:2,textAlign:"center",fontSize:K.fontSize,color:"var(--Quiet)"},children:x}):0===_.length?le(h,{sx:{px:1.5,py:2,textAlign:"center",fontSize:K.fontSize,color:"var(--Quiet)"},children:y}):_.map((e,a)=>{const t="string"==typeof e?e:e.label,r="string"==typeof e?e:e.value,i=t===(X?"string"==typeof X?X:X.label:null),n=function(e,a){return a?{backgroundColor:"transparent",color:"var(--Text)",fontWeight:600}:e?{backgroundColor:"var(--Hover)",color:"var(--Text)"}:{backgroundColor:"transparent",color:"var(--Text-Quiet)"}}(a===V,i);return se(h,{role:"option","aria-selected":i,onClick:()=>ae(e),onMouseEnter:()=>Q(a),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",...n,transition:"background-color 0.1s ease","&:active":{backgroundColor:"var(--Pressed)"}},children:[le(dr,{style:{flex:1,color:"inherit",fontWeight:"inherit"},children:t}),i&&le(Bf,{size:"small",sx:{opacity:.6,flexShrink:0},children:le(he,{})})]},r||t)})})]})}const Fz=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Pz=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Hz=[{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 Oz({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Ez({color:e,selected:a,onClick:t}){const r=Fz(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Vz(){const[e,t]=a("outline"),[r,i]=a("default"),[n,o]=a("medium"),[l,c]=a("top"),[s,d]=a("Fruit"),[u,p]=a(!0),[f,g]=a(!1),[b,v]=a(!0),[x,z]=a("Default"),[S,w]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Autocomplete",component:"Autocomplete"}),le(h,{sx:{mt:1},children:le(Xf,{theme:x,onThemeChange:z,surface:S,onSurfaceChange:w})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Autocomplete",theme:x,surface:S})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:x,surface:S,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(Rz,{variant:e,color:r,size:n,label:s,labelPosition:l,options:Hz,clearable:u,disabled:f,fullWidth:b})})}),le(Yb,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),s&&a.push('label="'+s+'"'),"top"!==l&&a.push('labelPosition="'+l+'"'),u||a.push("clearable={false}"),f&&a.push("disabled"),b&&a.push("fullWidth"),a.push("options={options}"),a.push("onChange={handleChange}"),"<Autocomplete\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(a=>le(Oz,{label:Fz(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Pz.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Ez,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Oz,{label:Fz(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(Oz,{label:"none"===e?"None":Fz(e),selected:l===e,onClick:()=>c(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Clearable"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear button when has value"})]}),le(sv,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clearable"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Full Width"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(sv,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Autocomplete"})})]})]})}let Qz=0;const jz={default:"Nav-Bar",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},qz="var(--Sizing-1, 8px)",Gz="40px",Uz="var(--Icon-Size, 24px)",Xz="var(--Sizing-Half, 4px)",Yz={horizontal:{px:"var(--Button-Height, 32px)",py:"12px"},vertical:{px:"var(--Sizing-1-and-Half, 12px)",py:"var(--Sizing-2, 16px)"}},Jz={px:0,py:0};function Zz({items:e=[],value:t,defaultValue:n=0,onChange:o,showLabels:l=!0,variant:c="fixed",orientation:s="horizontal",barColor:d="default",fabAction:u,fabPosition:m="end",fixed:p=!0,"aria-label":f="Bottom navigation",className:g="",sx:b={},...v}){const[x,y]=a(n),z=void 0!==t,S=z?t:x,w=i(e=>{z||y(e),o?.(e)},[z,o]),k="vertical"===s,C="floating"===c,B=jz[d]||jz.default,M=C?k?Yz.vertical:Yz.horizontal:Jz,T=r(null);null===T.current&&(T.current="bottom-nav-"+Qz++);const A=e=>T.current+"-tab-"+e,L=!!u;return se(h,{component:"nav","data-theme":B,"data-surface":"Surface-Dim","aria-label":f,className:"bottom-nav bottom-nav-"+d+" bottom-nav-style-"+(C?"floating":"fixed")+" bottom-nav-bar-"+s+(l?" bottom-nav-labels":" bottom-nav-no-labels")+(p?" bottom-nav-fixed":"")+(g?" "+g:""),sx:{display:"flex",flexDirection:k?"column":"row",alignItems:"center",justifyContent:"center",backgroundColor:"var(--Background)",borderRadius:C?"83px":0,fontFamily:"inherit",width:k?"fit-content":"100%",px:M.px,py:M.py,...p&&{position:"fixed",zIndex:1100,...k?{top:"50%",left:0,transform:"translateY(-50%)"}:{bottom:0,left:0,right:0}},...b},...v,children:[L&&le(h,{role:"tablist","aria-orientation":k?"vertical":"horizontal","aria-owns":e.map((e,a)=>A(a)).join(" "),sx:{position:"absolute",width:0,height:0,overflow:"hidden"}}),se(h,{role:L?void 0:"tablist","aria-orientation":L?void 0:k?"vertical":"horizontal",sx:{display:"flex",flexDirection:k?"column":"row",alignItems:"center",justifyContent:k?"flex-start":"space-between",gap:k?"10px":0,width:k?"auto":"100%",maxWidth:k?void 0:600},children:[e.map((e,a)=>le($z,{id:L?A(a):void 0,icon:e.icon,label:e.label,selected:a===S,showLabel:l,onClick:()=>w(a),ariaLabel:e.label||e.ariaLabel,disabled:e.disabled},e.key||a)).flatMap((e,a,t)=>{if(!u)return[e];return a===("center"===m?Math.ceil(t.length/2):t.length)-1?[e,le(_z,{...u,showLabel:l,position:m},"fab")]:[e]}),u&&0===e.length&&le(_z,{...u,showLabel:l,position:m},"fab")]})]})}function $z({id:e,icon:a,label:t,selected:r,showLabel:i,onClick:n,ariaLabel:o,disabled:l}){return se(h,{component:"button",type:"button",role:"tab",id:e,"aria-selected":r,"aria-label":o,onClick:n,disabled:l,"aria-disabled":l||void 0,className:"bottom-nav-item"+(r?" bottom-nav-item-selected":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:Xz,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:qz,borderRadius:Gz,backgroundColor:r?"var(--Text)":"transparent",color:r?"var(--Background)":"var(--Quiet)",fontSize:Uz,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:a}),i&&t&&le(wr,{className:"bottom-nav-label",style:{color:r?"var(--Text)":"var(--Quiet)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:t})]})}const Kz=32;function _z({icon:e,label:i,onClick:n,showLabel:o,actions:l,position:c="end"}){const s=Array.isArray(l)&&l.length>0,[d,u]=a(!1),m=r(null);t(()=>{if(!d)return;const e=e=>{m.current&&!m.current.contains(e.target)&&u(!1)},a=e=>{"Escape"===e.key&&u(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",a),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",a)}},[d]);const p=e=>({display:"flex",alignItems:"center",justifyContent:"center",minWidth:e,minHeight:e,boxSizing:"border-box",borderRadius:Gz,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"!==c;return se(h,{ref:m,sx:{position:"relative",display:"flex",flexShrink:0},children:[se(h,{component:"button",type:"button","aria-label":i||"Action",onClick:e=>{s&&u(e=>!e),n?.(e)},...s?{"aria-haspopup":"menu","aria-expanded":d}:{},className:"bottom-nav-fab"+(d?" bottom-nav-fab-open":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:Xz,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:{...p(32),padding:qz,fontSize:Uz,transition:"background-color 0.15s ease, transform 0.2s ease",transform:d?"rotate(45deg)":"none",".bottom-nav-fab:hover &":{backgroundColor:"var(--Hover)"},".bottom-nav-fab:active &":{backgroundColor:"var(--Pressed)"}},children:e||le(Aa,{})}),o&&i&&le(wr,{className:"bottom-nav-label",style:{color:"var(--Buttons-Default-Border)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:i})]}),s&&d&&le(h,{role:"menu","aria-label":i||"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,a)=>se(h,{component:"button",type:"button",role:"menuitem","aria-label":e.label,className:"bottom-nav-dial-item",onClick:a=>{u(!1),e.onClick?.(a)},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:Gz,"&: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:{...p(Kz),fontSize:"var(--Icon-Size-Small, 16px)"},children:e.icon||le(Aa,{})})}),le(kr,{style:{color:"inherit"},children:e.label})]},e.key||a))})]})}const eS={Home:le(Te,{sx:{fontSize:"inherit"}}),Explore:le(Qa,{sx:{fontSize:"inherit"}}),Radio:le(ja,{sx:{fontSize:"inherit"}}),Library:le(qa,{sx:{fontSize:"inherit"}}),Favorite:le(Me,{sx:{fontSize:"inherit"}}),Person:le(We,{sx:{fontSize:"inherit"}}),Search:le(Ie,{sx:{fontSize:"inherit"}}),Settings:le(Le,{sx:{fontSize:"inherit"}}),Notifications:le(ye,{sx:{fontSize:"inherit"}}),Cart:le(ze,{sx:{fontSize:"inherit"}}),Star:le(Ne,{sx:{fontSize:"inherit"}}),Bookmark:le(Ga,{sx:{fontSize:"inherit"}})},aS=Object.keys(eS),tS=[{icon:"Home",label:"Home"},{icon:"Explore",label:"Browse"},{icon:"Radio",label:"Radio"},{icon:"Library",label:"Library"}],rS=[{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 iS({label:e,selected:a,onClick:t,disabled:r}){return le(h,{component:"button",onClick:t,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:a?"var(--Buttons-Primary-Button)":"transparent",color:a?"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":a?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function nS({value:e,onChange:a,placeholder:t,sx:r}){return le(h,{component:"input",type:"text",value:e,onChange:e=>a(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)"},...r}})}function oS({value:e,onChange:a,options:t,label:r}){return le(h,{component:"select",value:e,onChange:e=>a(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: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 lS({value:e,onChange:a,min:t,max:r,label:i}){return se(h,{sx:{display:"flex",alignItems:"center",gap:1},children:[le(zr,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:90},children:i}),le("button",{type:"button",onClick:()=>{e>t&&a(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<r&&a(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 cS({label:e,checked:a,onChange:t,caption:r,disabled:i}){return se(h,{sx:{py:.5,opacity:i?.4:1},children:[le(S,{control:le(w,{checked:a,onChange:e=>t(e.target.checked),size:"small",disabled:i,sx:{color:"var(--Text-Quiet)","&.Mui-checked":{color:"var(--Buttons-Primary-Button)"}}}),label:le(Cr,{children:e}),sx:{m:0}}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginLeft:32},children:r})]})}function sS(){const[e,r]=a("Default"),[i,n]=a("Surface"),[o,l]=a(0),[c,s]=a(!0),[d,u]=a(!0),[p,f]=a("fixed"),[g,b]=a("horizontal"),[v,x]=a("default"),[z,S]=a(4),[w,k]=a(tS.map(e=>({icon:e.icon,label:e.label})));t(()=>{k(e=>{const a=[],t=[{icon:"Favorite",label:"Favorites"},{icon:"Person",label:"Profile"}];for(let r=0;r<z;r++)if(e[r])a.push(e[r]);else{const e=t[r-tS.length]||{icon:aS[r%aS.length],label:aS[r%aS.length]};a.push(e)}return a}),l(e=>Math.min(e,z-1))},[z]);const C=(e,a,t)=>{k(r=>{const i=[...r];return i[e]={...i[e],[a]:t},i})},B=w.slice(0,z).map(e=>({icon:eS[e.icon]||eS.Home,label:e.label}));return se(h,{sx:{pb:8},children:[le(yM,{title:"Bottom Navigation",component:"BottomNavigation"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:r,surface:i,onSurfaceChange:n})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"BottomNavigation",theme:e,surface:i})}),le(yb,{value:1,children:se(y,{container:!0,sx:{minHeight:400},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[se(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(Zz,{items:B,value:o,onChange:l,showLabels:d,variant:p,orientation:g,barColor:v,fixed:!1},"bn-"+z+"-"+p+"-"+g+"-"+d+"-"+v)}),se(zr,{style:{color:"var(--Text-Quiet)",textAlign:"center"},children:[z," items · ",d?"Labels":"Icons only"," · ","floating"===p?"Floating":"Fixed"," · ","vertical"===g?"Vertical":"Horizontal"," · ",(rS.find(e=>e.value===v)||rS[0]).label]})]}),le(Yb,{code:(()=>{const e=[];e.push("const items = ["),B.forEach((a,t)=>{const r=w[t];e.push(" { icon: <"+r.icon+"Icon />, label: '"+r.label+"' },")}),e.push("];"),e.push("");const a=[];return a.push("items={items}"),"default"!==v&&a.push('barColor="'+v+'"'),d||a.push("showLabels={false}"),"fixed"!==p&&a.push('variant="'+p+'"'),"horizontal"!==g&&a.push('orientation="'+g+'"'),c||a.push("fixed={false}"),e.push("<BottomNavigation"),a.forEach(a=>e.push(" "+a)),e.push("/>"),e.join("\n")})(),language:"JSX",sx:{borderRadius:0,borderBottom:"1px solid var(--Border)"}})]}),se(y,{item:!0,sx:{width:{xs:"calc(100vw - 432px)",md:"calc((100vw - 432px) / 2)"},flexShrink:0,p:3,backgroundColor:"var(--Container)",overflowY:"auto"},children:[le(er,{children:"Playground"}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:rS.map(e=>le(iS,{label:e.label,selected:v===e.value,onClick:()=>x(e.value)},e.value))}),se(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:[(rS.find(e=>e.value===v)||rS[0]).desc,' · data-surface="Surface-Dim" · bg: var(--Background)']})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),se(m,{spacing:0,children:[le(cS,{label:"Fixed",checked:c,onChange:s,caption:"Position fixed to bottom of viewport."}),le(cS,{label:"Labels",checked:d,onChange:u,caption:"Show text labels with icons."}),le(zr,{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."})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),se(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(iS,{label:"Fixed",selected:"fixed"===p,onClick:()=>f("fixed")}),le(iS,{label:"Floating",selected:"floating"===p,onClick:()=>f("floating")})]}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"floating"===p?"A pill, rounded to its own height so the ends stay semicircular at any length.":"A square band, edge to edge."}),le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",margin:"16px 0 8px"},children:"ORIENTATION"}),se(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(iS,{label:"Horizontal",selected:"horizontal"===g,onClick:()=>b("horizontal")}),le(iS,{label:"Vertical",selected:"vertical"===g,onClick:()=>b("vertical")})]}),le(zr,{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."})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"NAVIGATION ITEMS"}),le(lS,{label:"Count",value:z,onChange:S,min:3,max:6}),le(m,{spacing:1.5,sx:{mt:2},children:w.slice(0,z).map((e,a)=>se(h,{sx:{display:"flex",alignItems:"center",gap:1,flexWrap:"nowrap"},children:[le(zr,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:16,textAlign:"right"},children:a+1}),le(oS,{value:e.icon,onChange:e=>C(a,"icon",e),options:aS,label:"Item "+(a+1)+" icon"}),d&&le(nS,{value:e.label,onChange:e=>C(a,"label",e),placeholder:"Label"})]},a))})]})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(h,{sx:{p:4},children:[le(er,{children:"Accessibility Requirements"}),se(dr,{color:"quiet",style:{marginBottom:32},children:[z," items · ",d?"Labels":"Icons only"," · ","floating"===p?"Floating":"Fixed"," · ","vertical"===g?"Vertical":"Horizontal"," · ",(rS.find(e=>e.value===v)||rS[0]).label]}),se(m,{spacing:4,children:[se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Landmark:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav role="navigation" aria-label="Bottom navigation">'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Tab list:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tablist"'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Tab items:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tab", aria-selected, aria-label'})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Focus:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) on :focus-visible."})]})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Token Reference"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Bar:"}),le(zr,{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.).'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Unselected icon/label:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text-Quiet)"})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Selected:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Selected pill:"}),le(zr,{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)"})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Backfill + horizontal label:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label inside pill: var(--Buttons-Primary-Text)"})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Backfill + vertical label:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label below pill: var(--Text)"})]})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Best Practices"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Item count:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"3–5 recommended. 6 maximum."})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Horizontal layout:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Only available with 4 or fewer items."})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Labels:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Always recommended for clarity."})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Fixed:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Add bottom padding to main content to avoid overlap."})]})]})]})]})]})]}),le(yb,{value:3,children:le(gM,{component:"BottomNavigation"})})]})]})}const dS=e=>n(function(a,t){return le(E,{direction:e,ref:t,...a})}),uS={fade:n(function(e,a){return le(O,{ref:a,...e})}),grow:n(function(e,a){return le(H,{ref:a,...e})}),zoom:n(function(e,a){return le(P,{ref:a,...e})}),"slide-up":dS("up"),"slide-down":dS("down"),"slide-left":dS("left"),"slide-right":dS("right")},hS={backgroundColor:"var(--Background)",color:"var(--Text)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:Rf},mS={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},pS={color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6,py:3,px:3},fS={borderTop:"1px solid var(--Border)",px:3,py:1.5,gap:1},gS={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"}},bS={primary:{...gS,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:{...gS,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 vS({open:e=!1,onClose:a,title:t,children:r,actions:i,maxWidth:n="sm",fullScreen:o=!1,scroll:l="body",alert:c=!1,nonModal:s=!1,transition:d,transitionDuration:u=300,titleId:m="dialog-title",contentId:p="dialog-description",className:f="",sx:g={},PaperProps:b={},...v}){const x=d?uS[d]:void 0;let y;try{y=cz()}catch{y=null}const z=y?.theme||"Default",S=y?.style||"Modern",w=y?.surface||"Surface";return se(N,{open:e,onClose:(e,t)=>{c&&"backdropClick"===t||c&&"escapeKeyDown"===t||a?.(e,t)},maxWidth:!o&&n,fullScreen:o,fullWidth:!o,scroll:l,hideBackdrop:s,disableEnforceFocus:s,disableEscapeKeyDown:c,TransitionComponent:x,transitionDuration:u,"aria-labelledby":m,"aria-describedby":p,className:"dialog dialog-"+n+(o?" dialog-fullscreen":"")+(c?" dialog-alert":"")+(f?" "+f:""),style:{zIndex:1e7},slotProps:{backdrop:{sx:{backgroundColor:s?"transparent":"rgba(0,0,0,0.5)"}}},PaperProps:{...b,"data-theme":z,"data-style":S,"data-surface":w,sx:{...hS,...o&&{borderRadius:0,border:"none"},...b.sx},role:c?"alertdialog":"dialog"},...v,children:[t&&se(W,{id:m,sx:mS,children:[t,!c&&a&&le(Zg,{"aria-label":"Close dialog",onClick:e=>a(e,"closeButton"),size:"small",variant:"ghost",sx:{color:"var(--Text-Quiet)"},children:le(Ea,{fontSize:"small"})})]}),le(D,{dividers:"paper"===l,sx:{...pS,..."paper"===l&&{maxHeight:o?"none":"400px",overflowY:"auto",borderColor:"var(--Border)"}},children:c?le(R,{id:p,sx:{color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6},children:r}):le(h,{id:p,children:r})}),i&&le(F,{sx:fS,children:i})]})}function xS({open:e,onClose:a,title:t,children:r,confirmText:i="Confirm",cancelText:n="Cancel",onConfirm:o,onCancel:l,...c}){return le(vS,{open:e,onClose:a,title:t,alert:!0,...c,actions:se(ce,{children:[le(h,{component:"button",type:"button",onClick:l||a,sx:bS.outline,children:n}),le(h,{component:"button",type:"button",onClick:o||a,sx:bS.primary,children:i})]}),children:r})}function yS({open:e,onClose:a,title:t,children:r,submitText:i="Submit",cancelText:n="Cancel",onSubmit:o,...l}){return le(vS,{open:e,onClose:a,title:t,...l,actions:se(ce,{children:[le(h,{component:"button",type:"button",onClick:a,sx:bS.outline,children:n}),le(h,{component:"button",type:"button",onClick:o,sx:bS.primary,children:i})]}),children:r})}function zS({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function SS(){const[e,t]=a(!1),[r,i]=a("sm"),[n,o]=a(!1),[l,c]=a("none"),[s,d]=a(!1),[u,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Dialog",component:"Dialog"}),le(h,{sx:{mt:1},children:le(Xf,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Dialog",theme:f,surface:b})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:f,surface:b,children:le(Yg,{variant:"default",onClick:()=>t(!0),children:"Open Dialog"})}),le(Yb,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"sm"!==r&&e.push('maxWidth="'+r+'"'),n&&e.push("fullScreen"),s&&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(vS,{open:e,onClose:(e,a)=>{s&&"backdropClick"===a||t(!1)},maxWidth:r,fullScreen:n,alert:s,nonModal:u,transition:"none"!==l?l:void 0,title:"Dialog Title",actions:se(ce,{children:[le(Yg,{variant:"default-outline",size:"small",onClick:()=>t(!1),children:"Cancel"}),le(Yg,{variant:"default",size:"small",onClick:()=>t(!1),children:"Confirm"})]}),children:le(mr,{children:"This is the dialog content. You can put any information here that requires user attention or action."})})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),se(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[["xs","sm","md","lg","xl"].map(e=>le(zS,{label:e.toUpperCase(),selected:r===e,onClick:()=>{i(e),o(!1)}},e)),le(zS,{label:"Full Screen",selected:n,onClick:()=>o(!n)})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TRANSITION"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["none","slide-up","slide-down","grow","fade","zoom"].map(e=>{return le(zS,{label:(a=e,a?a.charAt(0).toUpperCase()+a.slice(1):""),selected:l===e,onClick:()=>c(e)},e);var a})})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Alert"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop dismiss, no Escape"})]}),le(sv,{variant:"default-outline",checked:s,onChange:e=>d(e.target.checked),size:"small","aria-label":"Alert mode"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Non-Modal"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop, interact with content behind"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Non-modal"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Dialog"})})]})]})}const wS={compact:{minHeight:"24px",fontSize:"13px",iconSize:16,gap:"6px"},default:{minHeight:"32px",fontSize:"14px",iconSize:18,gap:"8px"}},kS={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)"},CS={"@keyframes omni-tree-slide":{from:{opacity:0,transform:"translateY(-4px)"},to:{opacity:1,transform:"none"}}};function BS(e,a,t=1,r=[]){return e.forEach((i,n)=>{r.push({item:i,level:t,index:n,siblings:e.length}),i.children?.length&&a.includes(i.id)&&BS(i.children,a,t+1,r)}),r}function MS(e,a,t=null){for(const r of e){if(r.id===a)return t;if(r.children?.length){const e=MS(r.children,a,r.id);if(null!=e)return e;if(null===e&&r.children.some(e=>e.id===a))return r.id}}return null}function TS({node:e,density:a,expanded:t,selected:r,focusedId:i,multiSelect:n,checkboxSelection:o,disableSelection:l,disabledItemsFocusable:c,collapseIcon:s,expandIcon:d,animation:u,onToggle:m,onSelect:p,onFocusItem:f,registerRef:g}){const{item:b,level:v,index:x,siblings:y}=e,z=wS[a]||wS.default,S="compact"===a?zr:dr,w=!!b.children?.length,k=w&&t.includes(b.id),C=r.includes(b.id),B=!!b.disabled,M=!B||c;return se(h,{component:"li",role:"treeitem","aria-expanded":w?k:void 0,"aria-selected":l?void 0:C,"aria-disabled":B||void 0,"aria-level":v,"aria-setsize":y,"aria-posinset":x+1,tabIndex:i===b.id&&M?0:-1,ref:e=>g(b.id,e),onFocus:e=>{e.stopPropagation(),f(b.id)},sx:{outline:"none",listStyle:"none",...b.sx||{}},children:[se(h,{className:"omni-tree-content",onClick:e=>{B||(e.stopPropagation(),w&&m(e,b.id),l||p(e,b.id))},sx:{display:"flex",alignItems:"center",gap:z.gap,minHeight:z.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:B?"not-allowed":"pointer",opacity:B?"var(--Disabled, 0.38)":1,transition:"color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease",...B?{}:{"&: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:z.iconSize,height:z.iconSize,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",color:"inherit"},children:w&&(k?s:d)}),o&&!l&&le(Rv,{checked:C,disabled:B,size:"small","aria-hidden":"true",tabIndex:-1,onChange:()=>{}}),b.icon&&le(Bf,{size:"small",sx:{color:"inherit",flexShrink:0},children:b.icon}),le(S,{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:"inherit",fontWeight:"inherit"},children:b.label}),b.badge&&le(h,{sx:{flexShrink:0},children:b.badge})]}),w&&k&&le(h,{component:"ul",role:"group",sx:{margin:0,padding:0,paddingLeft:"9px",marginLeft:"12px",listStyle:"none",animation:kS[u]},children:b.children.map((e,h)=>le(TS,{node:{item:e,level:v+1,index:h,siblings:b.children.length},density:a,expanded:t,selected:r,focusedId:i,multiSelect:n,checkboxSelection:o,disableSelection:l,disabledItemsFocusable:c,collapseIcon:s,expandIcon:d,animation:u,onToggle:m,onSelect:p,onFocusItem:f,registerRef:g},e.id))})]})}function AS({color:e="default",variant:t="solid",surface:n,density:o="default",animation:l="slide",selectionStyle:c,items:s=LS,selectionMode:d="single",checkboxSelection:m=!1,disableSelection:p=!1,disabledItemsFocusable:f=!1,defaultExpandedItems:g,expandedItems:b,onExpandedItemsChange:v,selectedItems:x,onSelectedItemsChange:y,onItemExpansionToggle:z,onItemSelectionToggle:S,slots:w,"aria-label":k="Tree view",className:C="",sx:B={},...M}){const T=c||t,A="multi"===d,[L,I]=a(g||[]),N=void 0!==b?b:L,[W,D]=a(x||(A?[]:null)),R=void 0!==x?x:W,F=Array.isArray(R)?R:R?[R]:[],P=u(()=>BS(s,N),[s,N]),[H,O]=a(null),E=H??P[0]?.item.id??null,V=r({}),Q=i((e,a)=>{a?V.current[e]=a:delete V.current[e]},[]),j=i(e=>{O(e),V.current[e]?.focus()},[]),q=i((e,a)=>{const t=N.includes(a),r=t?N.filter(e=>e!==a):[...N,a];void 0===b&&I(r),v?.(e,r),z?.(e,a,!t)},[N,b,v,z]),G=i((e,a)=>{const t=F.includes(a),r=A?t?F.filter(e=>e!==a):[...F,a]:[a],i=A?r:r[0]??null;void 0===x&&D(i),y?.(e,i),S?.(e,a,!A||!t)},[F,A,x,y,S]),U=i(e=>{const a=P.filter(e=>!e.item.disabled||f),t=a.findIndex(e=>e.item.id===E),r=a[t];if(!r)return;const{item:i}=r,n=!!i.children?.length,o=n&&N.includes(i.id),l=t=>{const r=a[Math.max(0,Math.min(a.length-1,t))];r&&(e.preventDefault(),j(r.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(a.length-1);break;case"ArrowRight":n&&!o?(e.preventDefault(),q(e,i.id)):o&&l(t+1);break;case"ArrowLeft":if(o)e.preventDefault(),q(e,i.id);else{const a=MS(s,i.id);a&&(e.preventDefault(),j(a))}break;case"Enter":case" ":e.preventDefault(),p?n&&q(e,i.id):G(e,i.id)}},[P,E,N,s,f,p,j,q,G]),X=(Y=e).charAt(0).toUpperCase()+Y.slice(1);var Y;const J="default"===T?void 0:X,Z=n||("light"===T?"Surface-Brightest":"Surface-Dim"),$=w?.collapseIcon?le(w.collapseIcon,{}):le(Bf,{size:"small",sx:{color:"inherit",transform:"rotate(90deg)"},children:le(Da,{})}),K=w?.expandIcon?le(w.expandIcon,{}):le(Bf,{size:"small",sx:{color:"inherit"},children:le(Da,{})});return le(h,{"data-theme":J,"data-surface":Z,className:"omni-treeview omni-treeview-"+T+" omni-treeview-"+e+" omni-treeview-"+o+(C?" "+C:""),sx:{backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",...CS,...B},children:le(h,{component:"ul",role:"tree","aria-label":k,"aria-multiselectable":A||void 0,onKeyDown:U,sx:{margin:0,padding:"8px",listStyle:"none",fontFamily:"inherit"},...M,children:s.map((e,a)=>le(TS,{node:{item:e,level:1,index:a,siblings:s.length},density:o,expanded:N,selected:F,focusedId:E,multiSelect:A,checkboxSelection:m,disableSelection:p,disabledItemsFocusable:f,collapseIcon:$,expandIcon:K,animation:l,onToggle:q,onSelect:G,onFocusItem:O,registerRef:Q},e.id))})})}const LS=[{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"}],IS=e=>le(AS,{variant:"solid",...e}),NS=e=>le(AS,{variant:"light",...e}),WS=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",DS=[{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 RS({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function FS(){const[e,t]=a(!1),[r,i]=a("medium"),[n,o]=a("left"),[l,c]=a("Default"),[s,d]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Drawer",component:"Drawer"}),le(h,{sx:{mt:1},children:le(Xf,{theme:l,onThemeChange:c,surface:s,onSurfaceChange:d})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Drawer",theme:l,surface:s})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:l,surface:s,children:le(Yg,{variant:"default",onClick:()=>t(!0),children:"Open Drawer"})}),le(Yb,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"medium"!==r&&e.push('size="'+r+'"'),"left"!==n&&e.push('anchor="'+n+'"'),"<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}}),se(fz,{open:e,onClose:()=>t(!1),size:r,anchor:n,children:[se(bz,{children:[le(ar,{children:"Navigation"}),le(gz,{onClick:()=>t(!1)})]}),le(vz,{children:le(AS,{items:DS,variant:"solid",color:"default",defaultExpandedItems:["products"],sx:{border:"none",borderRadius:0}})})]})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(RS,{label:WS(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["left","right","top","bottom"].map(e=>le(RS,{label:WS(e),selected:n===e,onClick:()=>o(e)},e))})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Drawer"})})]})]})}const PS={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 HS({onFiles:e,accept:t,multiple:n=!1,size:o="medium",disabled:l=!1,icon:c,label:s,sublabel:d,children:u,className:m="",sx:p={},...f}){const[g,b]=a(!1),v=r(null),x=r(0),y=PS[o]||PS.medium,z=i(a=>{!l&&a?.length&&e?.(Array.from(a))},[l,e]),S=i(e=>{e.preventDefault(),e.stopPropagation(),x.current=0,b(!1),l||z(e.dataTransfer.files)},[l,z]),w=i(e=>{e.preventDefault(),e.stopPropagation()},[]),k=i(e=>{e.preventDefault(),e.stopPropagation(),x.current++,l||b(!0)},[l]),C=i(e=>{e.preventDefault(),e.stopPropagation(),x.current--,0===x.current&&b(!1)},[]),B=i(()=>{l||v.current?.click()},[l]),M=i(e=>{l||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),v.current?.click())},[l]),T=i(e=>{z(e.target.files),e.target.value=""},[z]),A=c||Ua,L=n?"Drag and drop files here":"Drag and drop file here";return se(h,{role:"button",tabIndex:l?-1:0,"aria-label":s||L,"aria-disabled":l||void 0,onClick:B,onKeyDown:M,onDrop:S,onDragOver:w,onDragEnter:k,onDragLeave:C,className:"drop-zone drop-zone-"+o+(g?" drop-zone-dragging":"")+(l?" drop-zone-disabled":"")+" "+m,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)"}},...p},...f,children:[le("input",{ref:v,type:"file",accept:t,multiple:n,onChange:T,style:{display:"none"},"aria-hidden":"true",tabIndex:-1}),u||se(ce,{children:[le(A,{sx:{fontSize:y.iconSize,color:"var(--Text-Quiet)"}}),le(dr,{style:{color:"var(--Text)"},children:s||L}),le(zr,{style:{color:"var(--Text-Quiet)"},children:d||"or click to browse"})]})]})}const OS={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},ES={size:40,iconSize:"24px",borderRadius:"8px"},VS=new Set;function QS({children:e,color:a="primary",variant:t="solid",size:r,className:i="",sx:n={},...o}){!function(e){void 0!==e&&("production"===process.env.NODE_ENV||VS.has(e)||(VS.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=ES,c=OS[a]||OS.primary;let s,d;switch(t){case"light":s=c,d="Surface-Brightest";break;case"dark":s=c,d="Surface-Dimmest";break;default:s=c,d="Surface"}return le(h,{"data-theme":s,"data-surface":d,className:"icon-badge icon-badge-"+t+" icon-badge-"+a+" "+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"},...n},...o,children:e})}const jS={eyebrow:Ar,title:mr,secondary:ur},qS={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},GS={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 US({children:e,size:a="medium",isButton:t=!1,onAction:r,ariaLabel:i}){return le(h,t?{component:"button",role:"button",tabIndex:0,"aria-label":i||"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 XS({children:e,startDecorator:a,endDecorator:t,startDecoratorIsButton:r=!1,endDecoratorIsButton:i=!1,onStartDecoratorAction:n,onEndDecoratorAction:o,startDecoratorAriaLabel:l,endDecoratorAriaLabel:c,size:s="medium",variant:d="default",color:u,eyebrow:m,overline:p,secondary:f,clickable:g=!1,disabled:b=!1,selected:v=!1,selectionMode:x="none",onSelect:y,onClick:z,bottomBorder:S=!1,rightBorder:k=!1,component:C="li",sx:B={},...T}){const A=GS[s]||GS.medium,L=g||!!z,I="checkbox"===x||"radio"===x,N=(L||I)&&!b,W=e=>{b||(I&&y?.(e),z?.(e))};return se(h,{component:C,role:I?"option":L?"button":"listitem",tabIndex:N?0:void 0,"aria-disabled":b||void 0,"aria-selected":I?v:v||void 0,"aria-checked":"checkbox"===x?v:void 0,onClick:W,onKeyDown:N?e=>{b||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),W(e))}:void 0,className:"list-item"+(v?" list-item-selected":"")+(b?" list-item-disabled":"")+(L?" list-item-clickable":"")+(I?" list-item-selectable":""),sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",width:"100%",boxSizing:"border-box",gap:"var(--Sizing-1-and-Half)",py:A.py,px:A.px,minHeight:"32px",fontSize:A.fontSize,fontFamily:"inherit",color:"var(--Text)",listStyle:"none",cursor:N?"pointer":"default",opacity:b?"var(--Disabled, 0.38)":1,position:"relative",transition:"background-color 0.15s ease, box-shadow 0.15s ease",...L?{border:"1px solid var(--Border)",boxShadow:"var(--Effect-Level-1)",padding:"var(--Sizing-1)",borderRadius:"var(--Input-Radius)"}:{},...!L&&S?{borderBottom:"1px solid var(--Border-Variant)"}:{},...!L&&k?{borderRight:"1px solid var(--Border-Variant)"}:{},backgroundColor:"transparent",...v?{"&::before":{content:'""',position:"absolute",inset:"-1px",border:"1px solid var(--Border)",borderRadius:"var(--Menu-Item-Radius, var(--Input-Radius))",pointerEvents:"none"}}:{},"&:hover":N?{backgroundColor:"var(--Hover)",boxShadow:"var(--Effect-Level-2)"}:{},"&:active":N?{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&&le(w,{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&&le(M,{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")}}),a&&le(US,{size:s,isButton:r,onAction:n,ariaLabel:l,children:a}),(()=>{const a=jS,t=m??p,r={display:"block",width:"100%",wordBreak:"break-word",overflowWrap:"anywhere"};return se(h,{sx:{flex:"1 1 auto",width:"100%",minWidth:0,display:"flex",flexDirection:"column",gap:0},children:[t&&le(a.eyebrow,{style:{...r,color:"var(--Quiet)"},children:t}),null!=e&&le(a.title,{style:{...r,color:"var(--Text)"},children:e}),f&&le(a.secondary,{style:{...r,color:"var(--Quiet)"},children:f})]})})(),t&&le(US,{size:s,isButton:i,onAction:o,ariaLabel:c,children:t})]})}function YS({children:a,items:t,variant:r="default",color:i="primary",size:n="medium",orientation:o="vertical",dividers:l=!1,selectionMode:c="none",loading:s=!1,skeletonRows:d=3,empty:u,error:m,selectedIndices:p=[],onSelectionChange:f,clickable:g=!1,component:b="ul",className:v="",sx:x={},...y}){const z="horizontal"===o,S="checkbox"===c||"radio"===c,w="light"===r,k="default"===r,C={};("solid"===r||w)&&qS[i]&&(C["data-theme"]=qS[i],w&&(C["data-surface"]="Surface-Brightest"));const B=m?"error":s?"loading":t&&0===t.length&&u?"empty":null;return le(h,{component:b,role:S?"listbox":"list","aria-busy":"loading"===B?"true":void 0,"aria-multiselectable":"checkbox"===c||void 0,...C,className:"list-container list-"+r+" list-"+i+" "+v,sx:{display:"flex",flexDirection:z?"row":"column",boxSizing:"border-box",alignItems:"stretch",gap:g?"var(--Sizing-1)":0,m:0,p:k?0:1,backgroundColor:k?"transparent":"var(--Background)",color:"var(--Text)",borderRadius:k?0:"var(--Style-Border-Radius)",width:"100%",listStyle:"none",...z?{"& > .list-item":{flex:"1 1 0",width:"auto"}}:{},...x},...y,children:(()=>{if("loading"===B)return le(h,{component:"li",sx:{listStyle:"none"},children:le(zt,{label:"Loading",children:Array.from({length:d}).map((e,a)=>le(XS,{component:"div",size:n,variant:r,color:i,children:"        "},"sk-"+a))})});if("error"===B)return le(h,{component:"li",sx:{listStyle:"none"},children:m});if("empty"===B)return le(h,{component:"li",sx:{listStyle:"none"},children:u});if(t&&t.length>0){const e=[];return t.forEach((a,o)=>{e.push(le(XS,{size:n,variant:r,color:i,startDecorator:a.startDecorator,endDecorator:a.endDecorator,startDecoratorIsButton:a.startDecoratorIsButton,endDecoratorIsButton:a.endDecoratorIsButton,onStartDecoratorAction:a.onStartDecoratorAction,onEndDecoratorAction:a.onEndDecoratorAction,startDecoratorAriaLabel:a.startDecoratorAriaLabel,endDecoratorAriaLabel:a.endDecoratorAriaLabel,eyebrow:a.eyebrow??a.overline,secondary:a.secondary,clickable:g||a.clickable,disabled:a.disabled,bottomBorder:a.bottomBorder,rightBorder:a.rightBorder,selected:S?p.includes(o):a.selected,selectionMode:c,onSelect:()=>(e=>{if(f)if("radio"===c)f([e]);else{const a=p.includes(e)?p.filter(a=>a!==e):[...p,e];f(a)}})(o),onClick:a.onClick,children:a.label||a.children},"item-"+o)),l&&o<t.length-1&&e.push(le(h,{component:"li",role:"separator","aria-hidden":"true",sx:z?{width:"1px",alignSelf:"stretch",backgroundColor:"var(--Border)",flexShrink:0}:{height:"1px",backgroundColor:"var(--Border)"}},"div-"+o))}),e}if(a){const t=e.Children.toArray(a);if(!l)return t;const r=[];return t.forEach((e,a)=>{r.push(e),a<t.length-1&&r.push(le(h,{component:"li",role:"separator","aria-hidden":"true",sx:z?{width:"1px",alignSelf:"stretch",backgroundColor:"var(--Border)",flexShrink:0}:{height:"1px",backgroundColor:"var(--Border)"}},"div-"+a))}),r}return null})()})}const JS=["default","primary","secondary","tertiary","neutral","info","success","warning","error"],ZS={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function $S({color:e="primary",width:a="hug",allCaps:t=!1,children:r,className:i="",sx:n={},...o}){const l="fill"===a,c=ZS[e]||"Primary";return le(h,{component:"span",className:"tag tag-"+e+(i?" "+i:""),sx:{display:l?"flex":"inline-flex",alignItems:"center",justifyContent:l?"center":"flex-start",height:"24px",px:"8px",borderRadius:0,backgroundColor:"var(--Tag-"+c+"-BG)",color:"var(--Tag-"+c+"-Text)",width:l?"100%":"auto",flexShrink:0,userSelect:"none",...n},...o,children:le(dr,{component:"span",sx:{color:"inherit",lineHeight:"24px",whiteSpace:"nowrap",fontWeight:600,textTransform:t?"uppercase":"none"},children:r})})}const KS=e=>le($S,{color:"primary",...e}),_S=e=>le($S,{color:"secondary",...e}),ew=e=>le($S,{color:"tertiary",...e}),aw=e=>le($S,{color:"neutral",...e}),tw=e=>le($S,{color:"info",...e}),rw=e=>le($S,{color:"success",...e}),iw=e=>le($S,{color:"warning",...e}),nw=e=>le($S,{color:"error",...e}),ow=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function lw({ratio:e,threshold:a}){if(!e)return le(zr,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return se(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[se(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(zr,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function cw({label:e,ratio:a,threshold:t,note:r}){return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[le(dr,{style:{color:"var(--Text)"},children:e}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),le(lw,{ratio:a,threshold:t})]})}function sw({color:e,selected:a,onClick:t}){const r=ZS[e]||((i=e)?i.charAt(0).toUpperCase()+i.slice(1):"");var i;return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height, 36px)",height:"var(--Button-Height, 36px)",borderRadius:"4px",backgroundColor:"var(--Tag-"+r+"-BG)",border:a?"2px solid var(--Text)":"2px 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&&le(he,{sx:{fontSize:16,color:"var(--Tag-"+r+"-Text)",pointerEvents:"none"}})})}function dw(){const[e,r]=a("primary"),[i,n]=a("New"),[o,l]=a(!1),[c,s]=a("Default"),[d,u]=a("Surface"),[p,f]=a({}),g=ZS[e]||"Primary";return t(()=>{f({tagText:Xr("--Tag-"+g+"-Text"),tagBg:Xr("--Tag-"+g+"-BG"),pageBg:Xr("--Background")})},[e,g]),se(h,{sx:{pb:8},children:[le(yM,{title:"Tag",component:"Tag"}),le(h,{sx:{mt:1},children:le(Xf,{theme:c,onThemeChange:s,surface:d,onSurfaceChange:u})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Tag",theme:c,surface:d})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:c,surface:d,children:se(h,{sx:{width:"100%",maxWidth:480},children:[le(h,{sx:{display:"flex",alignItems:"center",gap:2,mb:3},children:le($S,{color:e,allCaps:o,children:i})}),le(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:JS.map(e=>le($S,{color:e,allCaps:o,children:ZS[e]},e))})]})}),le(Yb,{code:(()=>{const a=[];"primary"!==e&&a.push('color="'+e+'"'),o&&a.push("allCaps");return"<Tag"+(a.length?" "+a.join(" "):"")+">"+i+"</Tag>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:ow.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(sw,{color:a,selected:e===a,onClick:r},a))})]},a.label))}),se(zr,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:["bg: var(--Tag-",g,"-BG) · text: var(--Tag-",g,"-Text)"]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL TEXT"}),le(h,{component:"input",type:"text",value:i,onChange:e=>n(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)"}}})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(dr,{children:"All caps"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"text-transform: uppercase"})]}),le(sv,{checked:o,onChange:e=>l(e.target.checked),size:"small","aria-label":"All caps"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),se(h,{sx:{p:3},children:[se(dr,{color:"quiet",style:{marginBottom:24},children:['color="',e,'" — var(--Tag-',g,"-BG) / var(--Tag-",g,"-Text)"]}),se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(dr,{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."}),le(cw,{label:"var(--Tag-"+g+"-Text) vs. var(--Tag-"+g+"-BG)",ratio:Ur(p.tagText,p.tagBg),threshold:4.5,note:"Tag text on tag background for "+e+" color"}),le(cw,{label:"var(--Tag-"+g+"-BG) vs. var(--Background)",ratio:Ur(p.tagBg,p.pageBg),threshold:3,note:"Tag background against page background (non-text contrast, WCAG 1.4.11)"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Touch Target (WCAG 2.5.8)"}),le(dr,{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."}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{style:{color:"var(--Text)"},children:"Tag height — 24px"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive. No touch target requirement on the Tag itself."})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"All Colors"}),le(dr,{color:"quiet",style:{marginBottom:16},children:"Visual overview of all tag colors in the current theme."}),le(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:JS.map(e=>le($S,{color:e,allCaps:o,children:ZS[e]},e))})]})]})]})]}),le(yb,{value:3,children:le(gM,{component:"Tag"})})]})]})}const uw={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",white:"Neutral",black:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},hw={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 mw({value:e,color:a="primary",size:t="medium",thickness:r,showValue:i=!1,children:n,className:l="",sx:c={},...s}){const d=uw[a]||"Primary",u="number"==typeof t?{diameter:t,thickness:Math.max(2,Math.round(t/11)),fontSize:Math.max(8,Math.round(t/3.3))+"px"}:hw[t]||hw.medium,m=r||u.thickness,p=null!=e,f=p?Math.min(100,Math.max(0,e)):0,g=(u.diameter-m)/2,b=2*Math.PI*g,v=p?b-f/100*b:.75*b,x="var(--Buttons-"+d+"-Border)",y="cp-grad-"+o().replace(/:/g,"");return se(h,{role:"progressbar","aria-valuenow":p?Math.round(f):void 0,"aria-valuemin":p?0:void 0,"aria-valuemax":p?100:void 0,"aria-label":p?Math.round(f)+"% progress":"Loading",className:"circular-progress circular-progress-"+t+" circular-progress-"+a+(p?" 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,...!p&&{animation:"circular-progress-spin 1.2s linear infinite","@keyframes circular-progress-spin":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}},...c},...s,children:[se("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:se("linearGradient",{id:y,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[le("stop",{offset:"0%",stopColor:x,stopOpacity:"0"}),le("stop",{offset:"100%",stopColor:x,stopOpacity:"1"})]})}),le("circle",{cx:u.diameter/2,cy:u.diameter/2,r:g,fill:"none",stroke:"var(--Border-Variant)",strokeWidth:m,className:"circular-progress-track"}),le("circle",{cx:u.diameter/2,cy:u.diameter/2,r:g,fill:"none",stroke:"url(#"+y+")",strokeWidth:m,strokeDasharray:b,strokeDashoffset:v,strokeLinecap:"round",className:"circular-progress-indicator",style:{transition:p?"stroke-dashoffset 0.4s ease":"none"}})]}),(i||n)&&p&&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 pw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",fw=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function gw({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function bw({color:e,selected:a,onClick:t}){const r=pw(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function vw(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a(!1),[l,c]=a(65),[s,d]=a(!1),[u,p]=a("Default"),[f,g]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Circular Progress",component:"CircularProgress"}),le(h,{sx:{mt:1},children:le(Xf,{theme:u,onThemeChange:p,surface:f,onSurfaceChange:g})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"CircularProgress",theme:u,surface:f})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:u,surface:f,children:le(mw,{color:e,size:r,value:n?l:void 0,showValue:n&&s})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),n&&(a.push("value={"+l+"}"),s&&a.push("showValue")),0===a.length?"<CircularProgress />":"<CircularProgress\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:fw.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(bw,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(gw,{label:pw(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Determinate"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static arc at a specific value"})]}),le(sv,{checked:n,onChange:e=>o(e.target.checked),size:"small","aria-label":"Determinate"})]}),n&&se(ce,{children:[le(h,{sx:{mt:2},children:le(Nx,{label:"Value",min:0,max:100,value:l,onChange:(e,a)=>c(a),size:"small",valueLabelDisplay:"auto"})}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Label"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Center percentage text"})]}),le(sv,{checked:s,onChange:e=>d(e.target.checked),size:"small","aria-label":"Show label"})]})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Role:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="progressbar"'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Determinate:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-valuenow, aria-valuemin="0", aria-valuemax="100"'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Indeterminate:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-label="Loading" (no value attributes)'})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Label:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Center percentage label is aria-hidden — screen readers use aria-valuenow."})]})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Token Reference"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Track (back circle):"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Border-Variant)"})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Fill (progress arc):"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Buttons-{Color}-Border)"})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Center label:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]})]})]})]})})]}),le(yb,{value:3,children:le(gM,{component:"CircularProgress"})})]})]})}const xw={small:16,medium:24,large:32};function yw({theme:e,surface:a,size:t="medium",color:r="primary",message:i="Loading...",sx:n={},"aria-label":o="Loading","aria-labelledby":l,...c}){return se(m,{alignItems:"center",justifyContent:"center",spacing:2,sx:{py:4,...n},...c,"data-theme":e||void 0,"data-surface":a||void 0,children:[le(mw,{size:"number"==typeof t?t:xw[t]??xw.medium,color:r,"aria-label":l?void 0:o,"aria-labelledby":l}),i&&le(V,{sx:{color:"var(--Text-Secondary)",fontWeight:500},children:i})]})}function zw({value:e,label:a,sx:t={},...r}){return se(m,{spacing:1,sx:{...t},...r,children:[a&&se(m,{direction:"row",justifyContent:"space-between",children:[le(V,{variant:"body2",sx:{color:"var(--Text)",fontWeight:500},children:a}),void 0!==e&&se(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:[e,"%"]})]}),le(Q,{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 Sw({rows:e=3,height:a=100,spacing:t=2,sx:r={},...i}){return le(m,{spacing:t,sx:{...r},...i,children:Array.from({length:e}).map((e,t)=>le(q,{variant:"rectangular",height:a,sx:{backgroundColor:"var(--Container-Low)",borderRadius:"8px"}},t))})}function ww({message:e="Loading",sx:a={},...t}){return se(m,{alignItems:"center",justifyContent:"center",spacing:2,sx:{py:4,...a},...t,children:[le(h,{sx:{display:"flex",gap:1},children:[0,1,2].map(e=>le(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&&le(V,{sx:{color:"var(--Text-Secondary)",fontWeight:500},children:e})]})}function kw({message:e="Loading page...",size:a=60,sx:t={},...r}){return le(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",minHeight:"100vh",backgroundColor:"var(--Background)",...t},...r,children:le(yw,{size:a,message:e})})}function Cw({lines:e=3,showImage:a=!0,sx:t={},...r}){return le(j,{sx:{p:2,backgroundColor:"var(--Container)",...t},...r,children:se(m,{spacing:2,children:[a&&le(q,{variant:"rectangular",height:200,sx:{backgroundColor:"var(--Container-Low)",borderRadius:1}}),le(m,{spacing:1,children:Array.from({length:e}).map((e,a)=>le(q,{variant:"text",height:0===a?24:16,sx:{backgroundColor:"var(--Container-Low)"}},a))})]})})}function Bw({isLoading:e=!1,message:a="Loading...",children:t,sx:r={},...i}){return se(h,{sx:{position:"relative",...r},...i,children:[t,e&&le(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:le(yw,{size:40,message:a})})]})}const Mw=e=>e.charAt(0).toUpperCase()+e.slice(1),Tw={small:dr,medium:mr,large:vr},Aw={small:or,medium:nr,large:ir},Lw={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"}},Iw=l({open:!1,setOpen:()=>{},anchorRef:{current:null},menuId:"",buttonId:"",variant:"outline",color:"default",size:"medium"}),Nw=()=>c(Iw);function Ww({children:e,variant:t="outline",color:n="default",size:l="medium",open:c,onOpenChange:s,...d}){const[u,m]=a(!1),p=void 0!==c,f=p?c:u,g=r(null),b=o(),v="menu-"+b,x="menubtn-"+b,y=i(e=>{const a="function"==typeof e?e(f):e;p?s?.(a):m(a)},[p,f,s]);return le(Iw.Provider,{value:{open:f,setOpen:y,anchorRef:g,menuId:v,buttonId:x,variant:t,color:n,size:l},children:le(h,{sx:{display:"inline-flex",position:"relative"},...d,children:e})})}function Dw({children:a,className:t="",sx:r={},...i}){const{open:n,setOpen:o,anchorRef:l,menuId:c,buttonId:s,size:d,color:u}=Nw(),m=Lw[d]||Lw.medium,p=Mw("default"===u?"Default":u);return se(h,{component:"button",ref:l,id:s,"aria-haspopup":"true","aria-expanded":n,"aria-controls":n?c:void 0,onClick:()=>o(e=>!e),className:"menu-button "+t,sx:{display:"inline-flex",alignItems:"center",gap:"6px",padding:m.itemPy+" "+m.itemPx,fontSize:m.fontSize,fontFamily:"inherit",fontWeight:600,color:"var(--Text)",backgroundColor:"var(--Background)",border:"1px solid var(--Buttons-"+p+"-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(),o(!0))},...i,children:["string"==typeof a?e.createElement(Tw[d]||Tw.medium,{style:{color:"inherit",fontWeight:600}},a):a,le(Bf,{size:"small",sx:{color:"var(--Quiet)",transition:"transform 0.2s ease",transform:n?"rotate(180deg)":"rotate(0deg)"},children:le(ue,{})})]})}function Rw({children:e,className:a="",placement:i="bottom-start",sx:n={},...o}){const{open:l,setOpen:c,anchorRef:s,menuId:d,buttonId:u,variant:m,color:p,size:f}=Nw(),g=r(null),b=Lw[f]||Lw.medium,v=Mw("default"===p?"Default":p),x="var(--Buttons-"+v+"-Border)",y="light"===m?"default"===p?"Default":v:"solid"===m?v:void 0,z="light"===m?"Surface-Brightest":"solid"===m?"Surface":void 0;return t(()=>{if(l&&g.current){const e=g.current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');e&&e.focus()}},[l]),t(()=>{if(!l)return;const e=e=>{g.current&&!g.current.contains(e.target)&&s.current&&!s.current.contains(e.target)&&c(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[l,c,s]),t(()=>{if(!l)return;const e=e=>{"Escape"===e.key&&(c(!1),s.current?.focus())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[l,c,s]),l?le(h,{className:"menu menu-"+m+" "+a,sx:{position:"absolute",top:"100%",left:"bottom-end"===i?"auto":0,right:"bottom-end"===i?0:"auto",zIndex:99999,marginTop:"4px",border:"1px solid "+x,borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:Nf,overflow:"hidden",...n},children:le(h,{ref:g,id:d,role:"menu","aria-labelledby":u,"data-theme":y,"data-surface":z,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 a=g.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');if(!a?.length)return;const t=Array.from(a).indexOf(document.activeElement);"ArrowDown"===e.key?(e.preventDefault(),a[(t+1)%a.length].focus()):"ArrowUp"===e.key?(e.preventDefault(),a[(t-1+a.length)%a.length].focus()):"Home"===e.key?(e.preventDefault(),a[0].focus()):"End"===e.key?(e.preventDefault(),a[a.length-1].focus()):"Tab"===e.key&&c(!1)},...o,children:e})}):null}function Fw({children:e,onClick:a,selected:t=!1,disabled:r=!1,className:i="",sx:n={},...o}){const{setOpen:l,size:c}=Nw(),s=Lw[c]||Lw.medium,d=t?Aw[c]||Aw.medium:Tw[c]||Tw.medium,u=()=>{r||(a?.(),l(!1))};return le(h,{role:"menuitem",tabIndex:r?-1:0,"aria-disabled":r||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-Half)",padding:s.itemPy+" "+s.itemPx,fontSize:s.fontSize,color:r?"var(--Quiet)":t?"var(--Text)":"var(--Quiet)",backgroundColor:t?"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"}},...n},...o,children:le(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:le(d,{color:"standard",style:{color:"inherit"},children:e})})})}function Pw({className:e="",sx:a={},...t}){return le(h,{component:"hr",role:"separator",className:"menu-divider "+e,sx:{border:"none",borderTop:"1px solid var(--Border)",margin:"4px 0",...a},...t})}const Hw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Ow=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Ew({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Vw({color:e,selected:a,onClick:t}){const r=Hw(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Qw(){const[e,t]=a("outline"),[r,i]=a("default"),[n,o]=a("medium"),[l,c]=a("Default"),[s,d]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Menu",component:"Menu"}),le(h,{sx:{mt:1},children:le(Xf,{theme:l,onThemeChange:c,surface:s,onSurfaceChange:d})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Menu",theme:l,surface:s})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:l,surface:s,sx:{minHeight:250,alignItems:"flex-start",pt:6},children:se(Ww,{variant:e,color:r,size:n,children:[le(Dw,{children:"Actions"}),se(Rw,{children:[le(Fw,{children:"Edit"}),le(Fw,{children:"Duplicate"}),le(Fw,{selected:!0,children:"Archive"}),le(Pw,{}),le(Fw,{disabled:!0,children:"Delete"})]})]})}),le(Yb,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),"<Dropdown "+a.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(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","solid","light"].map(a=>le(Ew,{label:Hw(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Ow.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Vw,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Ew,{label:Hw(e),selected:n===e,onClick:()=>o(e)},e))})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Menu"})})]})]})}const jw={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},qw={default:"Container-High",solid:"Container-High",soft:"Surface-Brightest"},Gw={small:{maxWidth:400,padding:"24px"},medium:{maxWidth:560,padding:"32px"},large:{maxWidth:720,padding:"40px"}},Uw={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 Xw(e){const a=Uw[e];if(!a)return"";const{from:t,to:r}=a.enter,i=Object.entries(t).map(([e,a])=>e+":"+a).join(";"),n=Object.entries(r).map(([e,a])=>e+":"+a).join(";");return"@keyframes "+a.name+" { from {"+i+"} to {"+n+"} }@keyframes "+a.name+"-backdrop { from { opacity: 0 } to { opacity: 1 } }"}function Yw({open:e,onClose:i,children:n,title:o,variant:l="default",color:c="primary",size:s="medium",layout:d="center",transition:u="fade",transitionSpeed:m=250,closeOnBackdrop:p=!0,showCloseButton:f=!0,className:g="",sx:b={},...v}){const x=r(null),y=r(null),[z,S]=a(!1);let w;try{w=cz()}catch{w=null}const k=w?.style||"Modern",C="soft"===l,B="solid"===l,M="fullscreen"===d,T=B||C?jw[c]:null,A=qw[l]||qw.default,L=Gw[s]||Gw.medium,I=Uw[u],N=I?I.name:void 0,W=m+"ms";return t(()=>(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]),t(()=>{if(!e)return;const a=e=>{"Escape"===e.key&&i?.()};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[e,i]),e||z?se(ce,{children:["none"!==u&&le("style",{children:Xw(u)}),le(h,{"aria-hidden":"true",onClick:p?i:void 0,sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0,0,0,0.5)",...N&&{animation:N+"-backdrop "+W+" ease-out forwards"}}}),se(h,{role:"dialog","aria-modal":"true","aria-label":o||"Modal",ref:x,tabIndex:-1,"data-surface":A,"data-theme":T||void 0,"data-style":k,className:"modal modal-"+l+" modal-"+s+" modal-"+d+(C||B?" modal-"+c:"")+(g?" "+g:""),sx:{position:"fixed",zIndex:10000001,outline:"none",fontFamily:"inherit",...M?{inset:0,borderRadius:0}:{top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:L.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:Rf,display:"flex",flexDirection:"column",overflow:"hidden",...N&&{animation:N+" "+W+" ease-out forwards"},...b},...v,children:[(o||f)&&se(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",px:M?4:L.padding,pt:M?3:L.padding,pb:0,flexShrink:0},children:[o&&le(h,{sx:{fontSize:"small"===s?"18px":"large"===s?"24px":"20px",fontWeight:700,color:"var(--Text)",flex:1},children:o}),f&&le(h,{component:"button",type:"button","aria-label":"Close modal",onClick:i,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(Ea,{sx:{fontSize:20}})})]}),le(h,{sx:{flex:1,overflowY:"auto",px:M?4:L.padding,pt:M?3:"16px",pb:M?3:L.padding,color:"var(--Text)",fontSize:"small"===s?"13px":"14px",lineHeight:1.6},children:n})]})]}):null}function Jw({children:e,surface:a="Container",outlined:t=!1,variant:r=(t?"outlined":"elevation"),sx:i={},...n}){const{dataSurface:o,elevation:l}=function(e="Container"){const a={"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=a[e]||a.Container;return{dataSurface:e,elevation:t.elevation,zIndex:t.zIndex}}(a);return le(j,{variant:r,elevation:"outlined"===r||t?0:l,"data-surface":o,sx:{padding:2,borderRadius:"8px",transition:"all 0.2s ease-in-out",...i},...n,children:e})}function Zw({open:e=!1,onClose:i,anchorRef:n,placement:o="bottom-end",theme:l="Default",surface:c="Surface-Bright",width:s=320,maxHeight:d=400,children:u,sx:m={}}){const p=r(null),[f,g]=a({top:0,left:0,right:"auto"});return t(()=>{if(!e||!n?.current)return;const a=n.current.getBoundingClientRect();g("bottom-end"===o?{top:a.bottom+6,right:window.innerWidth-a.right,left:"auto"}:{top:a.bottom+6,left:a.left,right:"auto"})},[e,n,o]),t(()=>{if(!e)return;const a=e=>{p.current?.contains(e.target)||n?.current?.contains(e.target)||i?.()};return document.addEventListener("pointerdown",a),()=>document.removeEventListener("pointerdown",a)},[e,i,n]),t(()=>{if(!e)return;const a=e=>{"Escape"===e.key&&i?.()};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[e,i]),e?de.createPortal(le(h,{ref:p,"data-theme":l,"data-surface":c,sx:{position:"fixed",top:f.top,left:f.left,right:f.right,zIndex:2e9,width:s,maxHeight:d,overflowY:"auto",backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:Nf,...m},children:u}),document.body):null}const $w={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error","black-white":"BlackWhite"},Kw={small:"var(--Sm-Rail-Width, 72px)",medium:"var(--Rail-Width, 80px)",large:"var(--Lg-Rail-Width, 96px)"},_w="var(--Icon-Size, 24px)",ek="var(--Sizing-Half, 4px)",ak="var(--Button-Height, 32px)";function tk({items:e=[],sections:t,value:r,defaultValue:n=0,onChange:o,expandable:l=!1,expandedWidth:c="partial",defaultExpanded:s=!1,fabAction:d,labelStyle:u="contained",variant:m="default",size:p="medium",className:f="",sx:g={},...b}){const[v,x]=a(n),[y,z]=a(s),S=void 0!==r,w=S?r:v,k=i(e=>{S||x(e),o?.(e)},[S,o]),C=l&&y;return se(h,{component:"nav",role:"navigation","aria-label":"Navigation rail","data-theme":"Default","data-surface":"Surface-Dim",className:"rail"+(l?" rail-expandable":" rail-fixed")+(C?" rail-expanded":" rail-collapsed")+" rail-label-"+("outside"===u?"outside":"contained")+" rail-"+(Kw[p]?p:"medium")+" "+f,sx:{display:"flex",flexDirection:"column",width:C?("full"===c?320:240)+"px":Kw[p]||Kw.medium,minHeight:"100%",gap:C?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},...b,children:[l&&le(h,{sx:{display:"flex",justifyContent:C?"flex-start":"center",px:C?1.5:0,height:56,alignItems:"center"},children:le(Yg,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>z(e=>!e),"aria-label":C?"Collapse menu":"Expand menu",children:le(Bf,{size:"small",sx:{color:"inherit"},children:le(C?Ea:Pa,{})})})}),d&&le(h,{sx:{px:C?2:1,py:1,flexShrink:0},children:le(Yg,{variant:"primary-light",size:"medium",onClick:d.onClick,"aria-label":d.label||"Action",startIcon:d.icon?le(Bf,{size:"small",sx:{color:"inherit"},children:d.icon}):void 0,sx:{width:C?"100%":56,borderRadius:C?"28px":"var(--Style-Border-Radius)",justifyContent:C?"flex-start":"center",transition:"all 0.2s ease"},children:C?d.label:null})}),le(h,{role:"tablist","aria-orientation":"vertical",sx:{flex:1,overflowY:"auto",overflowX:"hidden",display:"flex",flexDirection:"column",alignItems:"center",gap:C?0:"var(--Sizing-1-and-Half, 12px)",px:C?0:"var(--Sizing-1, 8px)",width:"100%",boxSizing:"border-box"},children:(()=>{if(t&&t.length>0){const e=[];let a=0;return t.forEach((t,r)=>{r>0&&e.push(le(h,{"aria-hidden":"true",sx:{height:"1px",width:"100%",backgroundColor:"var(--Border-Variant)"}},"divider-"+r)),t.items.forEach(t=>{const r=a;e.push(le(rk,{item:t,variant:m,selected:w===r,expanded:C,labelStyle:u,onClick:()=>k(r)},"item-"+r)),a++})}),e}return e.map((e,a)=>le(rk,{item:e,variant:m,selected:w===a,expanded:C,labelStyle:u,onClick:()=>k(a)},a))})()})]})}function rk({item:e,selected:a,expanded:t,labelStyle:r,variant:i="default",onClick:n}){const{icon:o,avatar:l,label:c,badge:s,disabled:d}=e,u=$w[i]||"Default";const m=a?`var(--Buttons-${u}-Button)`:"transparent",p="outside"!==r,f=p&&!t,g=d?{}:{...a?{}:{"&: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",...a?{}:{"& .rail-item-label":{color:"var(--Text)"}}}};return se(h,{component:"button",type:"button",role:"tab","aria-selected":a,"aria-label":c,"aria-disabled":d||void 0,disabled:d||void 0,onClick:d?void 0:n,className:"rail-item"+(a?" 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:_w,minHeight:_w,px:t?2.5:0,py:f?ek:0,border:a&&f?"1px solid var(--Border)":"1px solid transparent",borderRadius:t?0:"8px",backgroundColor:f||t?m:"transparent",boxShadow:a&&f?"var(--Shadow-1, none)":"none",color:a?`var(--Buttons-${u}-Text)`:t?"var(--Text)":"var(--Quiet)",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",...f||t?g:{}},children:[se(h,{sx:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",...t?{flexShrink:0}:{width:p?"100%":ak,height:p?"auto":ak,py:p?ek:0,borderRadius:p?"8px":ak,backgroundColor:p?"transparent":m,border:!p&&a?"1px solid var(--Border)":void 0,transition:"background-color 0.2s ease",...p?{}:g}},children:[l?le(h,{sx:{display:"flex",width:_w,height:_w},children:l}):le(Bf,{size:"small",sx:{color:"inherit"},children:o}),s&&le(ik,{value:s})]}),c&&le(h,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"center",width:"100%"},children:le(wr,{className:"rail-item-label",color:"inherit",style:{textAlign:"center",whiteSpace:t?"nowrap":"normal",overflow:"hidden",textOverflow:"ellipsis",...t?{flex:1}:{maxWidth:"100%"}},children:c})})]})}function ik({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 nk=[{icon:le(Te,{}),label:"Home"},{icon:le(Ie,{}),label:"Search"},{icon:le(Me,{}),label:"Favorites",badge:3},{icon:le(We,{}),label:"Profile"},{icon:le(Le,{}),label:"Settings"}];function ok({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function lk(){const[e,t]=a(!0),[r,i]=a("partial"),[n,o]=a(!1),[l,c]=a("Default"),[s,d]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Rail",component:"Rail"}),le(h,{sx:{mt:1},children:le(Xf,{theme:l,onThemeChange:c,surface:s,onSurfaceChange:d})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Rail",theme:l,surface:s})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[se(uv,{theme:l,surface:s,sx:{minHeight:400,alignItems:"stretch",p:0},children:[le(tk,{items:nk,expandable:e,expandedWidth:r,fabAction:n?{icon:le(Aa,{}),label:"Create",onClick:()=>{}}:void 0}),le(h,{sx:{flex:1,p:3},children:le(dr,{style:{color:"var(--Quiet)"},children:"Main content area"})})]}),le(Yb,{code:(()=>{const a=["items={items}"];return e&&(a.push("expandable"),"partial"!==r&&a.push('expandedWidth="full"')),n&&a.push('fabAction={{ icon: <AddIcon />, label: "Create", onClick: handleCreate }}'),a.push("value={activeIndex}"),a.push("onChange={setActiveIndex}"),"<Rail\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"EXPANDED WIDTH"}),le(m,{direction:"row",spacing:1,children:["partial","full"].map(e=>{return le(ok,{label:(a=e,a?a.charAt(0).toUpperCase()+a.slice(1):""),selected:r===e,onClick:()=>i(e)},e);var a})})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Expandable"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Toggle between collapsed and expanded"})]}),le(sv,{variant:"default-outline",checked:e,onChange:e=>t(e.target.checked),size:"small","aria-label":"Expandable"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"FAB Action"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show create button at top"})]}),le(sv,{variant:"default-outline",checked:n,onChange:e=>o(e.target.checked),size:"small","aria-label":"FAB action"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Rail"})})]})]})}const ck=["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"],sk="1.618034",dk={"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":sk+" / 1","Golden-Vertical":"1 / "+sk},uk={none:0,xs:1,sm:2,md:3,lg:4,xl:6};function hk({ratio:a="1:1",children:t,variant:r="default",color:i="default",padding:n="none",fit:o="width",placeholder:l=!0,elevated:c=!1,clickable:s=!1,onClick:d,maxWidth:u,maxHeight:m,component:p="div",className:f="",sx:g={},...b}){const v=dk[a]||dk["1:1"],x=(y="default"===i?"Default":i).charAt(0).toUpperCase()+y.slice(1);var y;const z=l&&0===e.Children.count(t),S="default"===i?void 0:x,w="dark"===r?"Surface-Dimmest":"light"===r?"Surface-Brightest":void 0,k=void 0!==uk[n]?uk[n]:uk.none,C=s||!!d,B="default"===r,M=c?Nf:If,T=c?Wf:Nf;return le(h,{component:p,onClick:C?d:void 0,role:C?"button":void 0,tabIndex:C?0:void 0,className:"ratio ratio-"+a.toLowerCase()+" ratio-"+r+(C?" ratio-clickable":"")+(c?" ratio-elevated":"")+(f?" "+f:""),sx:{aspectRatio:v,flex:"0 0 auto",..."height"===o?{height:"100%",width:"auto",minHeight:24}:{width:"100%",height:"auto",minWidth:24},...void 0!==u&&{maxWidth:u},...void 0!==m&&{maxHeight:m},border:B?"none":"1px solid var(--Border-Variant)",borderRadius:B?0:"var(--Style-Border-Radius)",boxShadow:B?"none":M,overflow:"hidden",transition:"box-shadow 0.2s ease, border-color 0.2s ease",...C&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:T},"&:active":{transform:"scale(0.995)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...!C&&!B&&{"&:hover":{boxShadow:T}},...g},...b,children:le(h,{"data-theme":S||void 0,"data-surface":w,sx:{width:"100%",height:"100%",padding:k,backgroundColor:z?"var(--Border)":"var(--Background)",color:"var(--Text)",fontFamily:"inherit",borderRadius:B?0:"calc(var(--Style-Border-Radius) - 1px)",...z?{display:"flex",alignItems:"center",justifyContent:"center"}:{"& > *":{width:"100%",height:"100%"}}},children:z?le(Bf,{size:"large",sx:{color:"var(--Background)"},children:le(Ya,{})}):t})})}const mk={none:void 0,small:"var(--Sm-Card-Radius, var(--Card-Radius))",medium:"var(--Card-Radius)",large:"var(--Lg-Card-Radius, var(--Card-Radius))"};function pk({children:e,theme:a,surface:t,radius:r="none",elevation:i=0,component:n="div",className:o="",sx:l={},style:c,...s}){const d=Math.max(0,Math.min(5,0|i)),u=mk[r];if(!d)return le(h,{component:n,"data-theme":a||void 0,"data-surface":t||void 0,className:"omni-box"+(o?" "+o:""),sx:{background:"var(--Background)",boxSizing:"border-box",...u?{borderRadius:u}:{},...l},style:c,...s,children:e});const m=c||{},{width:p,height:f,minWidth:g,minHeight:b,maxWidth:v,maxHeight:x,borderRadius:y,margin:z,marginTop:S,marginRight:w,marginBottom:k,marginLeft:C,...B}=m,M={width:p,height:f,minWidth:g,minHeight:b,maxWidth:v,maxHeight:x,borderRadius:y,margin:z,marginTop:S,marginRight:w,marginBottom:k,marginLeft:C},{width:T,height:A,borderRadius:L,...I}=l;return le(h,{component:n,className:"omni-box-elevation"+(o?" "+o:""),"data-elevation":d,sx:{boxShadow:Ff[d],boxSizing:"border-box",width:T,height:A,borderRadius:void 0!==L?L:u},style:M,...s,children:le(h,{"data-theme":a||void 0,"data-surface":t||void 0,className:"omni-box",sx:{width:"100%",height:"100%",background:"var(--Background)",borderRadius:"inherit",boxSizing:"border-box",...I},style:B,children:e})})}const fk=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",gk=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],bk=["default","solid","light","dark"],vk=["none","xs","sm","md","lg","xl"];function xk({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function yk({color:e,selected:a,onClick:t,variant:r}){const i=fk(e);return le(pk,{component:"button","data-theme":{solid:i,light:i+"-Light",dark:i,default:void 0}[r],"data-surface":{solid:"Surface",light:"Surface",dark:"Surface-Dimmest",default:"Surface"}[r],onClick:()=>t(e),"aria-label":"Select "+i,"aria-pressed":a,title:i,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Background)",border:a?"2px solid var(--Text)":"2px 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&&le(he,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function zk(){const[e,t]=a("1:1"),[r,i]=a("solid"),[n,o]=a("primary"),[l,c]=a("none"),[s,d]=a(!1),[u,h]=a(!1),[p,f]=a("Default"),[g,b]=a("Surface");return se(pk,{sx:{pb:8},children:[le(yM,{title:"Ratio",component:"Ratio"}),le(pk,{sx:{mt:1},children:le(Xf,{theme:p,onThemeChange:f,surface:g,onSurfaceChange:b})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Reference"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Ratio",theme:p,surface:g})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:p,surface:g,children:le(pk,{sx:{width:"100%",maxWidth:480},children:le(hk,{ratio:e,variant:r,color:n,padding:l,elevated:s,clickable:u})})}),le(Yb,{code:(()=>{const a=['ratio="'+e+'"'];return"default"!==r&&a.push('variant="'+r+'"'),"default"!==n&&a.push('color="'+n+'"'),"none"!==l&&a.push('padding="'+l+'"'),s&&a.push("elevated"),u&&a.push("clickable onClick={handleClick}"),"<Ratio "+a.join(" ")+">\n {/* your content */}\n</Ratio>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(pk,{sx:{p:3},children:[le(pk,{sx:{mb:3}}),se(pk,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:bk.map(e=>le(xk,{label:fk(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(pk,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:gk.map(e=>se(pk,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(yk,{color:e,selected:n===e,onClick:o,variant:"default"===r?"solid":r},e))})]},e.label))})]}),se(pk,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PADDING"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:vk.map(e=>le(xk,{label:"none"===e?"None":e.toUpperCase(),selected:l===e,onClick:()=>c(e)},e))})]}),se(pk,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"RATIO"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:ck.map(a=>le(xk,{label:a,selected:e===a,onClick:()=>t(a)},a))})]}),se(pk,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(pk,{children:[le(Cr,{children:"Elevated"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Bumps the shadow up one level"})]}),le(sv,{checked:s,onChange:e=>d(e.target.checked),size:"small","aria-label":"Elevated"})]}),se(pk,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(pk,{children:[le(Cr,{children:"Clickable"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds hover, press, and focus-visible"})]}),le(sv,{checked:u,onChange:e=>h(e.target.checked),size:"small","aria-label":"Clickable"})]})]})})]})}),le(yb,{value:2,children:le(pk,{sx:{p:3},children:se(m,{spacing:3,children:[se(pk,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Common use cases"}),le(m,{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:a})=>se(pk,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:e}),le(zr,{style:{color:"var(--Text-Quiet)"},children:a})]},e))})]}),se(mr,{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."]})]})})}),le(yb,{value:3,children:le(gM,{component:"Ratio"})})]})]})}const Sk=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",wk=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function kk({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Ck({color:e,selected:a,onClick:t}){const r=Sk(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Bk(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a(!1),[l,c]=a(!0),[s,d]=a("Default"),[u,p]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Search Field",component:"SearchField"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"SearchField",theme:s,surface:u})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,children:le(h,{sx:{width:"100%",maxWidth:400},children:le(Xy,{color:e,size:r,disabled:n,showClearButton:l,placeholder:"Search..."})})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),l||a.push("showClearButton={false}"),n&&a.push("disabled"),a.push('placeholder="Search..."'),a.push("onChange={handleSearch}"),"<SearchField\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:wk.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(Ck,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(kk,{label:Sk(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Clear Button"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear when has value"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>c(e.target.checked),size:"small","aria-label":"Clear button"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{variant:"default-outline",checked:n,onChange:e=>o(e.target.checked),size:"small","aria-label":"Disabled"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"SearchField"})})]})]})}const Mk=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Tk=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Ak=[{value:"apple",label:"Apple"},{value:"banana",label:"Banana"},{value:"cherry",label:"Cherry"},{value:"date",label:"Date"},{value:"elderberry",label:"Elderberry"}],Lk=[{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 Ik({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Nk({color:e,selected:a,onClick:t}){const r=Mk(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Wk(){const[e,t]=a("outline"),[r,i]=a("default"),[n,o]=a("medium"),[l,c]=a("top"),[s,d]=a("Fruit"),[u,p]=a(!1),[f,g]=a(!1),[b,v]=a(!0),[x,z]=a(!1),[S,w]=a("Search"),[k,C]=a(""),[B,M]=a("Default"),[T,A]=a("Surface"),[L,I]=a(!1),[N,W]=a(!0);return se(h,{sx:{pb:8},children:[le(yM,{title:"Select",component:"Select"}),le(h,{sx:{mt:1},children:le(Xf,{theme:B,onThemeChange:M,surface:T,onSurfaceChange:A})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Select",theme:B,surface:T})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:B,surface:T,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(qf,{variant:e,color:r,size:n,label:s,labelPosition:l,mode:L?"color":void 0,showColorLabels:L?N:void 0,options:L?Lk:Ak,value:k,onChange:C,showDividers:u,disabled:f,fullWidth:b,startDecoration:x?(()=>{const e=ge[S]||ge.Search;return le(Bf,{size:"small",children:le(e,{})})})():void 0})})}),le(Yb,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),s&&a.push('label="'+s+'"'),"top"!==l&&a.push('labelPosition="'+l+'"'),L&&a.push('mode="color"'),L&&!N&&a.push("showColorLabels={false}"),u&&a.push("showDividers"),f&&a.push("disabled"),b&&a.push("fullWidth"),x&&a.push("startDecoration={<Icon><"+S+"Icon /></Icon>}"),a.push("options={options}"),a.push("value={value}"),a.push("onChange={setValue}"),"<Select\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(a=>le(Ik,{label:Mk(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Tk.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Nk,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Ik,{label:Mk(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(Ik,{label:"none"===e?"None":Mk(e),selected:l===e,onClick:()=>c(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Start Icon"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Icon rendered before the value"})]}),le(sv,{checked:x,onChange:e=>z(e.target.checked),size:"small","aria-label":"Start icon"})]}),x&&se(h,{sx:{mt:2},children:[le(Sx,{label:"Icon Name",value:S,onChange:e=>w(e.target.value),placeholder:"Search",variant:"primary-outline",size:"small",fullWidth:!0}),se(zr,{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)"]})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Dividers"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Lines between options"})]}),le(sv,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show dividers"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Color Mode"}),le(zr,{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(sv,{checked:L,onChange:e=>I(e.target.checked),size:"small","aria-label":"Color mode"})]}),L&&se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Color Labels"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Hide to render a swatch-only trigger (no text). Useful for compact color pickers."})]}),le(sv,{checked:N,onChange:e=>W(e.target.checked),size:"small","aria-label":"Show color labels"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Full Width"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(sv,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Select"})})]})]})}const Dk={outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},Rk={opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"};function Fk(e={}){const{selectedBg:a,selectedText:t,selectedHover:r,selectedPressed:i,muiPrefix:n}=e,o=n?"&.Mui-disabled":"&:disabled",l=n?"&.Mui-focusVisible":"&:focus-visible",c={"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},[l]:Dk,[o]:{...Rk,color:"var(--Quiet)"}};return a?{...c,"&.Mui-selected":{backgroundColor:a,...t?{color:t}:{},"&:hover":{backgroundColor:r||"var(--Hover)"},"&:active":{backgroundColor:i||"var(--Pressed)"}}}:c}function Pk({open:e,onClose:t,items:r=[],onItemClick:i,width:n=280,variant:o="temporary",header:l,footer:c,sx:s={},...d}){const[u,m]=a(null),[f,g]=a({}),b=(e,a)=>{m(a),i?.(e),"temporary"===o&&t?.()},v="permanent"===o?"permanent":"standard"===o?"standard":"temporary",y=se(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(V,{variant:"h6",sx:{fontWeight:700},children:l}):l}),le(G,{sx:{flex:1,overflow:"auto",py:1},children:r.map((e,a)=>{const t=u===a,r=e.submenu&&e.submenu.length>0,i=f[a];return se(h,{children:[le(x,{title:e.tooltip||"",placement:"right",children:le(U,{disablePadding:!0,children:se(X,{onClick:()=>{r?(e=>{g(a=>({...a,[e]:!a[e]}))})(a):b(e,a)},selected:t&&!r,sx:{backgroundColor:t&&!r?"var(--Buttons-Primary-Button)":"transparent",color:t&&!r?"var(--Buttons-Primary-Text)":"var(--Text)",...Fk({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(Y,{sx:{color:t&&!r?"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(J,{primary:e.label,primaryTypographyProps:{variant:"body2",fontWeight:t&&!r?600:500}}),r&&le(h,{sx:{ml:1},children:le(i?fe:ue,{})})]})})}),r&&le(Z,{in:i,timeout:"auto",unmountOnExit:!0,children:le(G,{component:"div",disablePadding:!0,children:e.submenu.map((e,a)=>le(U,{disablePadding:!0,children:se(X,{onClick:()=>b(e,a),sx:{pl:4,backgroundColor:"transparent",color:"var(--Text)",...Fk({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(Y,{sx:{color:"var(--Icons-Primary)",minWidth:40},children:e.icon}),le(J,{primary:e.label})]})},a))})}),e.divider&&le($,{sx:{my:1,borderColor:"var(--Border-Variant)"}})]},a)})}),c&&le(h,{sx:{borderTop:"1px solid var(--Border-Variant)",p:2},children:"string"==typeof c?le(V,{variant:"caption",sx:{color:"var(--Text-Quiet)"},children:c}):c})]});return"permanent"===o?le(h,{sx:{width:n,flexShrink:0,...s},children:y}):le(K,{variant:v,open:e,onClose:t,PaperProps:{sx:{width:n,backgroundColor:"var(--Container)",color:"var(--Text)",...s}},...d,children:y})}const Hk={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 Ok=!1;function Ek({children:e,open:a=!1,onClose:n,variant:o="light",surface:l,color:c="info",size:s="medium",anchor:d="bottom",autoHideDuration:u,startDecorator:m,endDecorator:p,action:f,className:g="",sx:b={},...v}){const x=r(null),y=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===c?"Default":c),z=Hk[s]||Hk.medium,S="small"===s?dr:mr,w="default"===c?"Default":y;"production"===process.env.NODE_ENV||"solid"!==o||Ok||(Ok=!0,console.warn('[Snackbar] variant="solid" is retired and now renders as "light". A solid fill makes the label carry the semantic color as its own background, doubling the contrast combinations to verify. Use the default, or pass `surface` to reach a specific level.'));const k=l||"Surface-Brightest",C="var(--Buttons-"+y+"-Border)";t(()=>{if(a&&u&&u>0)return x.current=setTimeout(()=>{n?.({},"timeout")},u),()=>clearTimeout(x.current)},[a,u,n]),t(()=>{if(!a)return;const e=e=>{"Escape"===e.key&&n?.(e,"escapeKeyDown")};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[a,n]);const B=i(()=>{x.current&&clearTimeout(x.current)},[]),M=i(()=>{a&&u&&u>0&&(x.current=setTimeout(()=>{n?.({},"timeout")},u))},[a,u,n]),T="top"===d?{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 a?le(h,{role:"alert","aria-live":"polite","aria-atomic":"true",onMouseEnter:B,onMouseLeave:M,className:"snackbar snackbar-"+o+" snackbar-"+s+" snackbar-"+d+" snackbar-"+c+" "+g,sx:{position:"fixed",left:"50%",transform:"translateX(-50%)",..."top"===d?{top:"var(--SnackBar-Top, 24px)"}:{bottom:"var(--SnackBar-Bottom, 24px)"},zIndex:1400,minWidth:z.minWidth,maxWidth:"min(560px, calc(100vw - 32px))",border:"1px solid "+C,borderRadius:"var(--Style-Border-Radius)",boxShadow:Wf,overflow:"hidden",animation:"snackbar-slide-in 0.3s ease forwards","@keyframes snackbar-slide-in":T,...b},...v,children:se(h,{"data-theme":w,"data-surface":k,sx:{display:"flex",alignItems:"center",gap:z.gap,padding:z.py+" "+z.px,fontSize:z.fontSize,fontFamily:"inherit",lineHeight:1.4,color:"var(--Text)",backgroundColor:"var(--Background)",borderRadius:"calc(var(--Style-Border-Radius) - 1px)"},children:[m&&le(h,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:m}),le(h,{sx:{flex:1,minWidth:0},children:"string"==typeof e?le(S,{children:e}):e}),f&&le(h,{sx:{display:"inline-flex",flexShrink:0},children:f}),p&&le(h,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:p}),n&&le(Yg,{iconOnly:!0,variant:"ghost",size:"small",onClick:e=>n(e,"closeClick"),"aria-label":"Close notification",sx:{flexShrink:0,ml:"4px"},children:le(Bf,{size:"small",children:le(Ea,{})})})]})}):null}const Vk=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Qk=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],jk={info:le(Se,{}),success:le(we,{}),warning:le(ke,{}),error:le(Ce,{})};function qk({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Gk({color:e,selected:a,onClick:t}){const r=Vk(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Uk(){const[e,t]=a("light"),[r,i]=a("info"),[n,o]=a("medium"),[l,c]=a("bottom"),[s,d]=a(!0),[u,p]=a(!0),[f,g]=a(!1),[b,v]=a("Default"),[x,z]=a("Surface"),S=s&&jk[r]?le(Bf,{size:"small",sx:{color:"inherit"},children:jk[r]}):void 0;return se(h,{sx:{pb:8},children:[le(yM,{title:"Snackbar",component:"Snackbar"}),le(h,{sx:{mt:1},children:le(Xf,{theme:b,onThemeChange:v,surface:x,onSurfaceChange:z})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Snackbar",theme:b,surface:x})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:b,surface:x,children:le(Yg,{variant:"default",onClick:()=>g(!0),children:"Show Snackbar"})}),le(Yb,{code:(()=>{const a=["open={open}"];return a.push('variant="'+e+'"'),"info"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),"bottom"!==l&&a.push('anchor="top"'),u&&a.push("onClose={handleClose}"),s&&jk[r]&&a.push("startDecorator={<Icon><"+Vk(r)+"Icon /></Icon>}"),"<Snackbar\n "+a.join("\n ")+"\n>\n Operation completed successfully.\n</Snackbar>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),le(Ek,{open:f,onClose:u?()=>g(!1):void 0,variant:e,color:r,size:n,anchor:l,autoHideDuration:4e3,startDecorator:S,children:"Operation completed successfully."})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["solid","light"].map(a=>le(qk,{label:Vk(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Qk.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Gk,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(qk,{label:Vk(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),le(m,{direction:"row",spacing:1,children:["top","bottom"].map(e=>le(qk,{label:Vk(e),selected:l===e,onClick:()=>c(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Icon"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(sv,{variant:"default-outline",checked:s,onChange:e=>d(e.target.checked),size:"small","aria-label":"Show icon"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Close Button"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show dismiss button"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Close button"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Snackbar"})})]})]})}const Xk={empty:{icon:le(Ja,{}),iconColor:"quiet",titleColor:"header",role:void 0},"no-results":{icon:le(Za,{}),iconColor:"quiet",titleColor:"header",role:void 0},error:{icon:le($a,{}),iconColor:"error",titleColor:"error",role:"alert"}},Yk={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 Jk({type:e="empty",icon:a,title:t,body:r,action:i,size:n="medium",className:l="",sx:c={},...s}){const d=Xk[e]||Xk.empty,u=Yk[n]||Yk.medium,m="small"===n?dr:mr,p=o(),f=t?p+"-title":void 0,g=r?p+"-body":void 0;return"production"===process.env.NODE_ENV||t||console.warn("[StateMessage] needs a `title`. A state message with no words is an empty box, which is the thing it exists to replace."),se(h,{className:"state-message state-message-"+e+" state-message-"+n+" "+l,role:d.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",...c},...s,children:[le(Bf,{size:u.icon,color:d.iconColor,"aria-hidden":"true",children:a||d.icon}),t&&le(nr,{id:f,color:d.titleColor,children:t}),r&&le(m,{id:g,color:"quiet",sx:{maxWidth:u.maxWidth},children:r}),i&&le(h,{sx:{marginTop:"4px"},children:i})]})}const Zk={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},$k={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}},Kk=l({orientation:"horizontal",size:"medium",color:"primary",activeStep:0,clickable:!1,onStepClick:null,dashedIncomplete:!1,totalSteps:0,variant:"count"}),_k=()=>c(Kk);function eC({theme:a,surface:t,children:r,orientation:i="horizontal",size:n="medium",color:o="primary",activeStep:l=0,clickable:c=!1,onStepClick:s,dashedIncomplete:d=!1,variant:u="count",className:m="",sx:p={},...f}){const g=e.Children.toArray(r).filter(e.isValidElement),b=g.length,v="horizontal"===i;return le(Kk.Provider,{value:{orientation:i,size:n,color:o,activeStep:l,clickable:c,onStepClick:s,dashedIncomplete:d,totalSteps:b,variant:u},children:le(h,{component:"ol",role:"list","aria-label":"Progress","data-theme":a||void 0,"data-surface":t||void 0,className:"stepper stepper-"+i+" stepper-"+n+" stepper-"+o+" "+m,sx:{display:"flex",flexDirection:v?"row":"column",alignItems:v?"flex-start":"stretch",listStyle:"none",margin:0,padding:0,width:"100%",gap:0,...p},...f,children:g.map((a,t)=>e.cloneElement(a,{_index:t,key:a.key||t}))})})}function aC({children:e,icon:a,label:t,disabled:r=!1,_index:i=0,className:n="",sx:o={},...l}){const{orientation:c,size:s,color:d,activeStep:u,clickable:m,onStepClick:p,dashedIncomplete:f,totalSteps:g,variant:b}=_k(),v=m&&!r,x=$k[s]||$k.medium,y=Zk[d]||"Primary",z="horizontal"===c,S=i===u,w=i<u,k=i>u,C=i===g-1,B=a||i+1,M=t||e,T=k?"var(--Quiet)":"var(--Buttons-"+y+"-Border)",A=S?"var(--Buttons-"+y+"-Button)":"transparent",L=S?"var(--Buttons-"+y+"-Text)":k?"var(--Quiet)":"var(--Text)",I=S?"var(--Buttons-"+y+"-Hover)":"var(--Hover)",N=S?"var(--Buttons-"+y+"-Pressed)":"var(--Pressed)",W="noCount"===b,D=le(h,{component:v?"button":"div",onClick:v?()=>p?.(i):void 0,onKeyDown:v?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),p?.(i))}:void 0,tabIndex:v?0:void 0,role:v?"button":void 0,"aria-label":v?"Go to step "+(i+1):void 0,"aria-current":S?"step":void 0,"aria-disabled":r||void 0,className:"step-indicator step-indicator-"+s+(S?" step-indicator-active":"")+(w?" step-indicator-completed":"")+(k?" step-indicator-incomplete":"")+(v?" step-indicator-clickable":""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:W?x.dot:x.indicator+"px",height:W?x.dot:x.indicator+"px",minWidth:W?x.dot:x.indicator+"px",minHeight:W?x.dot:x.indicator+"px",borderRadius:"50%",border:"var(--Button-Border-Width, 1px) solid "+T,backgroundColor:A,color:L,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"===s&&{"&::after":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"24px",height:"24px",borderRadius:"50%"}},...v&&{"&:hover":{backgroundColor:I},"&:active":{backgroundColor:N},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"}}},children:W?null:B}),R=i<u,F=C?null:le(h,{className:"step-connector"+(R?" step-connector-completed":" step-connector-incomplete")+(f&&!R?" step-connector-dashed":""),"aria-hidden":"true",sx:{flex:1,...z?{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:R?"var(--Buttons-"+y+"-Button)":"var(--Border)",...f&&!R&&{backgroundColor:"transparent",backgroundImage:z?"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:z?"12px 100%":"100% 12px"},transition:"background-color 0.15s ease"}}),P=M?le("small"===s?zr:dr,{style:{fontWeight:S?600:400,color:S||w?"var(--Text)":"var(--Quiet)",textAlign:z?"center":"left",whiteSpace:"nowrap",lineHeight:1.3},children:M}):null;return se(h,z?{component:"li",className:"step step-"+s+" step-horizontal"+(S?" step-active":"")+(w?" step-completed":"")+(k?" step-incomplete":"")+" "+n,sx:{display:"flex",alignItems:"center",flex:C?"none":1,...o},...l,children:[se(h,{sx:{display:"flex",flexDirection:"column",alignItems:"center",flexShrink:0},children:[D,P&&le(h,{sx:{mt:"4px"},children:P})]}),F]}:{component:"li",className:"step step-"+s+" step-vertical"+(S?" step-active":"")+(w?" step-completed":"")+(k?" step-incomplete":"")+" "+n,sx:{display:"flex",flexDirection:"column",alignItems:"flex-start",...o},...l,children:[se(h,{sx:{display:"flex",alignItems:"center",gap:"8px"},children:[D,P]}),F]})}const tC=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",rC=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],iC=["Account","Details","Review","Confirm","Complete","Done"];function nC({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function oC({color:e,selected:a,onClick:t}){const r=tC(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function lC(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a("horizontal"),[l,c]=a(4),[s,d]=a(1),[u,p]=a(!1),[f,g]=a(!1),[b,v]=a("Default"),[x,z]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Stepper",component:"Stepper"}),le(h,{sx:{mt:1},children:le(Xf,{theme:b,onThemeChange:v,surface:x,onSurfaceChange:z})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Stepper",theme:b,surface:x})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:b,surface:x,children:le(h,{sx:{width:"100%",maxWidth:"vertical"===n?300:"100%"},children:le(eC,{color:e,size:r,orientation:n,activeStep:s,clickable:u,onStepClick:u?d:void 0,dashedIncomplete:f,children:iC.slice(0,l).map(e=>le(aC,{label:e},e))})})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),"horizontal"!==n&&a.push('orientation="vertical"'),a.push("activeStep={"+s+"}"),u&&a.push("clickable onStepClick={setActiveStep}"),f&&a.push("dashedIncomplete"),"<Stepper "+a.join(" ")+">\n"+iC.slice(0,l).map(e=>' <Step label="'+e+'" />').join("\n")+"\n</Stepper>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STEPS"}),le(m,{direction:"row",spacing:1,children:[2,3,4,5,6].map(e=>le(nC,{label:String(e),selected:l===e,onClick:()=>{c(e),s>=e&&d(e-1)}},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ACTIVE STEP"}),le(m,{direction:"row",spacing:1,children:iC.slice(0,l).map((e,a)=>le(nC,{label:String(a+1),selected:s===a,onClick:()=>d(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:rC.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(oC,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(nC,{label:tC(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(nC,{label:tC(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Clickable"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Steps are interactive buttons"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clickable"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Dashed Incomplete"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Dashed connector for future steps"})]}),le(sv,{variant:"default-outline",checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Dashed incomplete"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Stepper"})})]})]})}const cC={small:"var(--Small-Button-Height, 24px)",medium:"var(--Button-Height, 32px)",large:"var(--Large-Button-Height, 56px)"},sC={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"},dC={content:'""',position:"absolute",inset:"-3px",borderRadius:"var(--Button-Focus-Radius, 5px)",border:"2px solid var(--Focus-Visible)",pointerEvents:"none"};function uC({color:e,label:a,size:t="medium",selected:r=!1,disabled:i=!1,radio:n=!1,onClick:o,className:l="",sx:c={},"aria-label":s,...d}){const u=Boolean(o)&&!i,m=cC[t]||cC.medium,p=s||a||e,f=le(h,{className:"swatch-chip",sx:{position:"relative",width:m,height:m,flexShrink:0,borderRadius:"var(--Button-Radius, 2px)",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(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))"},"&:active":{boxShadow:"var(--Effect-Level-0)",backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08))"}}},children:r&&!n?le(h,{className:"swatch-check",sx:sC,children:le(he,{"aria-hidden":"true",sx:{width:"80%",height:"80%",color:"var(--Icon, var(--Text))"}})}):null});return se(h,{component:u?"button":"div",type:u?"button":void 0,onClick:u?o:void 0,disabled:!(!u||!i)||void 0,"aria-pressed":u?r:void 0,"aria-label":p,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)",...i&&{opacity:.38,pointerEvents:"none"},"&:focus":{outline:"none"},...u&&{"&:focus-visible":{outline:"none","& .swatch-chip::before":dC}},...c},...d,children:[f,n&&u?le(Mx,{checked:r,disabled:i,tabIndex:-1,"aria-hidden":"true",onChange:()=>{},sx:{pointerEvents:"none"}}):null,a?le(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:a}):null]})}const hC={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},mC={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 pC({children:e,columns:a,rows:t,footerRows:r,variant:i="default",color:n="primary",loading:o=!1,skeletonRows:l=3,empty:c,error:s,size:d="medium",stripe:u="none",stickyHeader:m=!1,stickyFooter:p=!1,className:f="",sx:g={},...b}){const v=mC[d]||mC.medium,x="solid"===i,y="outlined"===i,z="light"===i,S=(e=>e.charAt(0).toUpperCase()+e.slice(1))(n),w=y?"1px solid var(--Buttons-"+S+"-Border)":"none",k={};x&&hC[n]&&(k["data-theme"]=hC[n]);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 z?(e.backgroundColor="var(--Buttons-"+S+"-Button)",e.color="var(--Buttons-"+S+"-Text)"):e.backgroundColor=x?"var(--Hover)":"var(--Background)",m&&(e.position="sticky",e.top=0,e.zIndex=2),e},B=()=>{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 z?(e.backgroundColor="var(--Buttons-"+S+"-Button)",e.color="var(--Buttons-"+S+"-Text)"):e.backgroundColor=x?"var(--Hover)":"var(--Background)",p&&(e.position="sticky",e.bottom=0,e.zIndex=2),e},M=e=>"none"===u?"Surface":"odd"===u?e%2==0?"Surface":"Surface-Dim":"even"===u&&e%2==0?"Surface-Dim":"Surface",T=()=>({padding:v.py+" "+v.px,fontSize:v.fontSize,color:"var(--Text)",borderBottom:"1px solid var(--Border)",textAlign:"left"}),A=s?"error":o?"loading":t&&0===t.length&&c?"empty":null,L=Boolean(r&&r.length>0)&&"error"!==A,I=e=>le(h,{component:"tbody",children:le(h,{component:"tr",children:le(h,{component:"td",colSpan:a?a.length:1,sx:{padding:0,border:"none"},children:e})})});return le(h,{className:"table-wrapper table-"+i+(x||z||y?" table-"+n:"")+" "+f,...k,"aria-busy":"loading"===A?"true":void 0,sx:{width:"100%",overflow:"auto",border:w,borderRadius:y||z?"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":T(),"& tfoot td, & tfoot th":B(),...m?{"& thead th":{...C(),position:"sticky",top:0,zIndex:2}}:{},...p?{"& tfoot td, & tfoot th":{...B(),position:"sticky",bottom:0,zIndex:2}}:{}},...b,children:a&&t?a&&(t||A)?se(ce,{children:[le(h,{component:"thead",children:le(h,{component:"tr",children:a.map((e,a)=>le(h,{component:"th",sx:{...C(),...e.width?{width:e.width}:{},...e.align?{textAlign:e.align}:{}},children:e.label||e.header||e},"h-"+a))})}),"loading"===A&&I(le(zt,{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":M(t),children:a.map((e,a)=>le(h,{component:"td",sx:T(),children:"        "},"skc-"+t+"-"+a))},"sk-"+t))})})})),"error"===A&&I(s),"empty"===A&&I(c),!A&&t&&le(h,{component:"tbody",children:t.map((e,t)=>le(h,{component:"tr","data-surface":M(t),sx:{backgroundColor:"var(--"+M(t)+")"},children:(Array.isArray(e)?e:a.map(a=>e[a.field||a.key])).map((e,r)=>le(h,{component:"td",sx:{...T(),...a[r]&&a[r].align?{textAlign:a[r].align}:{}},children:e},"c-"+t+"-"+r))},"r-"+t))}),L&&le(h,{component:"tfoot",children:r.map((e,t)=>le(h,{component:"tr",children:(Array.isArray(e)?e:a.map(a=>e[a.field||a.key])).map((e,r)=>le(h,{component:"td",sx:{...B(),...a[r]&&a[r].align?{textAlign:a[r].align}:{},..."loading"===A?yt():{}},children:e},"fc-"+t+"-"+r))},"f-"+t))})]}):null:e})})}function fC({label:e,value:t="",onChange:r,placeholder:i,error:n=!1,errorMessage:o="",disabled:l=!1,helperText:c="",variant:s="outlined",size:d="medium",type:u="text",required:m=!1,fullWidth:p=!0,startAdornment:f,endAdornment:g,sx:b={},"aria-label":v,"aria-labelledby":x,onFocus:y,onBlur:S,...w}){const[k,M]=a(!1),T=n?"var(--Buttons-Error-Border)":k?"var(--Buttons-Primary-Border)":"var(--Border)",A=n||k?"var(--Text)":"var(--Text-Quiet)",L="var(--Text)";return se(h,{sx:{width:p?"100%":"auto"},children:[le(z,{label:e,value:t,onChange:r,placeholder:i,disabled:l,variant:s,size:d,type:u,required:m,onFocus:e=>{M(!0),y?.(e)},onBlur:e=>{M(!1),S?.(e)},error:n,fullWidth:p,slotProps:{htmlInput:{...v?{"aria-label":v}:{},...x?{"aria-labelledby":x}:{}},input:{"data-surface":l?"Container-Low":"Container",style:{color:L},startAdornment:f?le(C,{position:"start",children:f}):void 0,endAdornment:g?le(C,{position:"end",children:g}):void 0}},sx:{width:p?"100%":"auto","& .MuiOutlinedInput-root":{backgroundColor:"var(--Background)",transition:"all 0.2s ease-in-out",color:L,"& fieldset":{borderColor:T,transition:"border-color 0.2s ease-in-out"},"&:hover fieldset":{borderColor:n?"var(--Buttons-Error-Border)":"var(--Buttons-Primary-Border)"},"&.Mui-focused fieldset":{borderColor:n?"var(--Buttons-Error-Border)":"var(--Buttons-Primary-Border)",borderWidth:"2px"},"&.Mui-disabled":{backgroundColor:"var(--Background)",opacity:"var(--Disabled, 0.38)"}},"& .MuiInputLabel-root":{color:A,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:n?"var(--Buttons-Error-Border)":"var(--Text-Secondary)",marginTop:"4px",fontSize:"12px"},...b},...w}),n&&o&&le(B,{error:!0,sx:{color:"var(--Buttons-Error-Border)",marginTop:"4px",fontSize:"12px",fontWeight:500},children:o})]})}function gC({label:e="Email",...a}){return le(fC,{label:e,type:"email",placeholder:"user@example.com",...a})}function bC({label:e="Password",...a}){return le(fC,{label:e,type:"password",...a})}function vC({label:e="Search",placeholder:a="Type to search...",...t}){return le(fC,{label:e,type:"search",placeholder:a,...t})}function xC({label:e="Number",...a}){return le(fC,{label:e,type:"number",...a})}function yC({label:e="Phone",placeholder:a="(555) 123-4567",...t}){return le(fC,{label:e,type:"tel",placeholder:a,...t})}function zC({label:e="Website",placeholder:a="https://example.com",...t}){return le(fC,{label:e,type:"url",placeholder:a,...t})}function SC({error:e=!1,errorMessage:a="",rows:t=4,fullWidth:r=!0,...i}){return le(Sx,{multiline:!0,rows:t,fullWidth:r,...e&&{validation:"error",validationMessage:a},...i})}function wC({fields:e=[],spacing:a=2,sx:t={},...r}){return le(h,{sx:{display:"flex",flexDirection:"column",gap:`var(--Spacing-${a})`,width:"100%",...t},...r,children:e.map(e=>le(fC,{...e},e.id))})}const kC={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 CC({items:e=[],value:t,defaultValue:r,onChange:n,type:o="floating",orientation:l="horizontal",color:c="default",fab:s,className:d="",sx:u={},...m}){const[p,f]=a(r??null),g=void 0!==t,b=g?t:p,v=i(e=>{const a=b===e?null:e;g||f(a),n?.(a)},[g,b,n]),x=kC[c]||kC.default,y=x.theme,z=x.surface,S="vertical"===l,w="floating"===o,k=le(h,{role:"toolbar","aria-orientation":l,"aria-label":"Toolbar","data-theme":y,"data-surface":z||"Surface",className:"toolbar toolbar-"+o+" toolbar-"+l+" toolbar-"+c+" "+d,sx:{display:"inline-flex",flexDirection:S?"column":"row",alignItems:"center",gap:"4px",backgroundColor:"var(--Background)",border:"1px solid var(--Border-Variant)",borderRadius:w?"56px":"var(--Style-Border-Radius)",padding:w?"8px 16px":"8px",fontFamily:"inherit",flexShrink:0,...w&&{boxShadow:Nf},...u},...m,children:e.map((e,a)=>{const t=b===a;return le(Yg,{iconOnly:!0,variant:t?"default":"ghost",size:"small",onClick:()=>v(a),"aria-label":e.label,"aria-checked":t,role:"radio",children:le(Bf,{size:"small",sx:{color:"inherit"},children:e.icon})},e.key||a)})});return s&&w?se(h,{sx:{display:"inline-flex",flexDirection:S?"column":"row",alignItems:"center",gap:1},children:[k,le(Yg,{iconOnly:!0,variant:"default",size:"large",onClick:s.onClick,"aria-label":s.label||"Action",sx:{borderRadius:"50%",width:56,height:56,minWidth:"unset",minHeight:"unset"},children:le(Bf,{size:"medium",sx:{color:"inherit"},children:s.icon})})]}):k}const BC=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",MC=[{icon:le(Ka,{}),label:"Bold"},{icon:le(_a,{}),label:"Italic"},{icon:le(et,{}),label:"Underline"},{icon:le(at,{}),label:"Align left"},{icon:le(tt,{}),label:"Align center"}];function TC({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function AC(){const[e,t]=a("floating"),[r,i]=a("default"),[n,o]=a("horizontal"),[l,c]=a(!1),[s,d]=a("Default"),[u,p]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Toolbar",component:"Toolbar"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Toolbar",theme:s,surface:u})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,sx:{minHeight:200},children:le(CC,{items:MC,type:e,color:r,orientation:n,fab:l&&"floating"===e?{icon:le(Aa,{}),label:"Create",onClick:()=>{}}:void 0})}),le(Yb,{code:(()=>{const a=["items={items}"];return"floating"!==e&&a.push('type="contextual"'),"default"!==r&&a.push('color="'+r+'"'),"horizontal"!==n&&a.push('orientation="vertical"'),l&&a.push('fab={{ icon: <AddIcon />, label: "Create", onClick: handleCreate }}'),a.push("value={selected}"),a.push("onChange={setSelected}"),"<Toolbar\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPE"}),le(m,{direction:"row",spacing:1,children:["floating","contextual"].map(a=>le(TC,{label:BC(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["default","primary","primary-light","white","black"].map(e=>le(TC,{label:BC(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(TC,{label:BC(e),selected:n===e,onClick:()=>o(e)},e))})]}),"floating"===e&&se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"FAB Button"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Add FAB to the right of toolbar"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>c(e.target.checked),size:"small","aria-label":"FAB button"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Toolbar"})})]})]})}const LC=Hf,IC={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},NC={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},WC={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 DC({children:e,title:a,variant:t="solid",color:r="black-white",size:i="medium",placement:n="bottom",arrow:o=!0,open:l,enterDelay:c=100,leaveDelay:s=0,describeChild:d=!1,className:u="",sx:m={},...p}){const f=WC[i]||WC.medium,g="solid"===t,b="light"===t,v="outline"===t,y=LC(r),z=(e=>String(e).startsWith("left")||String(e).startsWith("right"))(n),S="var(--Buttons-"+y+"-Button)",w=S,k=void 0===l?{}:{open:l};return le(x,{title:a?le(h,{"data-theme":(g?IC[r]:b?NC[r]:null)||void 0,"data-surface":b?"Surface-Brightest":g?"Surface":void 0,className:"tooltip-content tooltip-"+t+" tooltip-"+r+" tooltip-"+i+" "+u,sx:{backgroundColor:S,color:"var(--Buttons-"+y+"-Text)",border:v?"1px solid var(--Buttons-"+y+"-Border)":"none",borderRadius:"var(--Tooltip-Radius, var(--Style-Border-Radius))",fontSize:f.fontSize,lineHeight:1.5,fontFamily:"inherit",padding:f.py+" "+f.px,maxWidth:f.maxWidth+"px",display:"flex",alignItems:"center",gap:f.gap,boxShadow:"var(--Effect-Level-2)",...m},children:a}):"",placement:n,arrow:o,enterDelay:c,leaveDelay:s,describeChild:d,...k,componentsProps:{tooltip:{sx:{backgroundColor:"transparent",padding:0,maxWidth:"none",boxShadow:"none"}},arrow:{sx:{color:w,width:z?f.arrowVisible:f.arrowW,height:z?f.arrowW:f.arrowVisible,"&::before":{border:v?"1px solid var(--Buttons-"+y+"-Border)":"none",backgroundColor:w,boxSizing:"border-box",width:"100%",height:"100%"}}}},...p,children:e})}const RC={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}},FC={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 PC({label:e,icon:a,level:t=0,toggle:r="none",onToggle:i,disabled:n=!1,size:o="small",className:l="",sx:c={},children:s,...d}){const u=6===t&&"none"!==r?"none":r,m="on"===u,p="none"!==u,f=p?RC[t]||{padLeft:0,togglePadLeft:0}:FC[t]||FC[0],g={paddingTop:"8px",paddingRight:"8px",paddingBottom:"8px",paddingLeft:(f.padLeft??8)+"px"};return se(h,{className:"tree-branch tree-branch-"+o+" tree-branch-level-"+t+" tree-branch-toggle-"+u+(n?" tree-branch-disabled":"")+(l?" "+l:""),sx:{width:"100%",...c},...d,children:[se(h,{component:"button",type:"button",role:"treeitem","aria-expanded":p?m:void 0,"aria-disabled":n||void 0,tabIndex:n?-1:0,onClick:e=>{n||p&&(e.stopPropagation(),i?.(m?"off":"on"))},disabled:n,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:n?"not-allowed":"pointer",opacity:n?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.15s ease, color 0.15s ease","&:hover":n?{}:{backgroundColor:"var(--Hover)"},"&:active":n?{}:{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-2px"}},children:[p&&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:m?"rotate(-90deg)":"rotate(0deg)"},children:le(Bf,{size:"small",children:le(Da,{})})})}),se(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:[a&&le(h,{sx:{display:"inline-flex",alignItems:"center",flexShrink:0},children:le(Bf,{size:"small",children:a})}),null!=e&&le(ur,{style:{color:"inherit",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block",flex:1,minWidth:0},children:e})]})]}),m&&s&&le(h,{role:"group",sx:{display:"flex",flexDirection:"column"},children:s})]})}const HC=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"]}],EC=e=>le(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:e,flexShrink:0}}),VC=[{id:"1",label:"Documents",icon:le(Xa,{}),badge:EC("var(--Warning-Text, orange)"),children:[{id:"1-1",label:"Company",icon:le(rt,{}),badge:EC("var(--Warning-Text, orange)"),children:[{id:"1-1-1",label:"Invoice",icon:le(nt,{})},{id:"1-1-2",label:"Meeting notes",icon:le(it,{})},{id:"1-1-3",label:"Tasks list",icon:le(it,{})},{id:"1-1-4",label:"Equipment",icon:le(nt,{})},{id:"1-1-5",label:"Video conference",icon:le(ot,{})}]},{id:"1-2",label:"Personal",icon:le(Xa,{})},{id:"1-3",label:"Group photo",icon:le(Ya,{})}]},{id:"2",label:"Bookmarked",icon:le(Ga,{}),children:[{id:"2-1",label:"Favourites",icon:le(it,{})}]},{id:"3",label:"History",icon:le(Xa,{})},{id:"4",label:"Trash",icon:le(Ae,{}),disabled:!0}],QC=JSON.stringify(LS,null,2);function jC({ratio:e,threshold:a}){if(!e)return le(zr,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return se(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[se(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(zr,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function qC({label:e,ratio:a,threshold:t,note:r}){return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[le(dr,{style:{color:"var(--Text)"},children:e}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),le(jC,{ratio:a,threshold:t})]})}function GC({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function UC({color:e,selected:a,onClick:t}){const r=HC(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function XC({value:e,onChange:t}){const[r,i]=a(e),[n,o]=a(null);return se(h,{children:[se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:1},children:[le(Ar,{style:{color:"var(--Text-Quiet)"},children:"TREE DATA (JSON)"}),le(Yg,{variant:"ghost",size:"small",onClick:()=>{i(QC),o(null),t(LS)},children:"Reset"})]}),le(h,{component:"textarea",value:r,onChange:e=>{i(e.target.value);try{const a=JSON.parse(e.target.value);o(null),t(a)}catch(e){o(e.message)}},spellCheck:!1,rows:10,sx:{width:"100%",fontFamily:"monospace",fontSize:"11px",backgroundColor:"#1e1e1e",color:n?"#f87171":"#e5e7eb",border:"1px solid "+(n?"#f87171":"#333"),borderRadius:"6px",padding:"10px",resize:"vertical",outline:"none",boxSizing:"border-box",lineHeight:1.5,"&:focus":{borderColor:"var(--Focus-Visible)"}}}),n&&se(zr,{style:{color:"#f87171",display:"block",marginTop:4},children:["JSON error: ",n]})]})}function YC(){const[e,n]=a("solid"),[o,l]=a("primary"),[c,s]=a("default"),[d,u]=a("slide"),[p,f]=a("single"),[g,b]=a(!1),[v,x]=a(!1),[z,S]=a(!1),[w,k]=a(LS),[C,B]=a("Default"),[M,T]=a("Surface"),[A,L]=a({}),I=r(null),N=HC(o),W=z?VC:w,D=i((e,a)=>e&&getComputedStyle(e).getPropertyValue(a).trim()||null,[]);t(()=>{const e=setTimeout(()=>{const e=I.current;L({text:D(e,"--Text"),textQuiet:D(e,"--Text-Quiet"),background:D(e,"--Background"),border:D(e,"--Border"),focusVisible:D(e,"--Focus-Visible"),activeBtn:D(e,"--Buttons-"+N+"-Button"),activeBorder:D(e,"--Buttons-"+N+"-Border")})},50);return()=>clearTimeout(e)},[o,C,D,N]);return se(h,{sx:{pb:8},children:[le(yM,{title:"Tree View",component:"TreeView"}),le(h,{sx:{mt:1},children:le(Xf,{theme:C,onThemeChange:B,surface:M,onSurfaceChange:T})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"TreeView",theme:C,surface:M})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{ref:I,theme:C,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(AS,{color:o,variant:e,density:c,animation:d,selectionMode:p,checkboxSelection:g,disableSelection:v,items:W,defaultExpandedItems:["1","1-1","2"]})})}),le(Yb,{code:(()=>{const a=["<OmniTreeView"];return"default"!==o&&a.push(' color="'+o+'"'),"default"!==e&&a.push(' variant="'+e+'"'),"default"!==c&&a.push(' density="'+c+'"'),"slide"!==d&&a.push(' animation="'+d+'"'),"single"!==p&&a.push(' selectionMode="'+p+'"'),g&&a.push(" checkboxSelection"),v&&a.push(" disableSelection"),a.push(" items={treeData}"),a.push("/>"),a.join("\n")})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),se(m,{direction:"row",spacing:1,children:[le(GC,{label:"Solid",selected:"solid"===e,onClick:()=>n("solid")}),le(GC,{label:"Light",selected:"light"===e,onClick:()=>n("light")})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:OC.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(UC,{color:e,selected:o===e,onClick:l},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DENSITY"}),se(m,{direction:"row",spacing:1,children:[le(GC,{label:"Compact",selected:"compact"===c,onClick:()=>s("compact")}),le(GC,{label:"Default",selected:"default"===c,onClick:()=>s("default")})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANIMATION"}),le(m,{direction:"row",spacing:1,children:["none","slide","spring"].map(e=>le(GC,{label:HC(e),selected:d===e,onClick:()=>u(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SELECTION MODE"}),se(m,{direction:"row",spacing:1,children:[le(GC,{label:"Single",selected:"single"===p,onClick:()=>f("single")}),le(GC,{label:"Multi",selected:"multi"===p,onClick:()=>f("multi")})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Icons"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Load sample data with icons and badges"})]}),le(sv,{checked:z,onChange:e=>S(e.target.checked),size:"small","aria-label":"Show icons"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Checkbox Selection"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show checkboxes for each item"})]}),le(sv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Checkbox selection"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disable Selection"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Items are not selectable"})]}),le(sv,{checked:v,onChange:e=>x(e.target.checked),size:"small","aria-label":"Disable selection"})]})]}),!z&&le(h,{sx:{mt:3},children:le(XC,{value:QC,onChange:k})})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(qC,{label:"Resting: var(--Text-Quiet) vs. background",ratio:Ur(A.textQuiet,A.background),threshold:4.5,note:"Unselected items use Text-Quiet"}),le(qC,{label:"Hover: var(--Text) vs. background",ratio:Ur(A.text,A.background),threshold:4.5,note:"Hovered items use var(--Text)"}),le(qC,{label:"Active (solid): var(--Text) vs. var(--Buttons-"+N+"-Button)",ratio:Ur(A.text,A.activeBtn),threshold:4.5,note:"Selected item with solid fill"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(qC,{label:"var(--Focus-Visible) vs. background",ratio:Ur(A.focusVisible,A.background),threshold:3,note:"outline: 2px solid var(--Focus-Visible); outline-offset: -2px"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})]})})]}),le(yb,{value:3,children:le(gM,{component:"TreeView"})})]})]})}const JC=["outlined","light","ghost"];let ZC=!1;function $C(e){ZC||"production"===process.env.NODE_ENV||(ZC=!0,console.warn(`[OmniDesign] ToggleButtonGroup: ${e} This is MUI's shape and still works; it will be removed in the next major. The native form is \`multiple\` (not \`exclusive\`), onChange(value, event), \`color\` for the palette and \`variant\` for the shape.`))}function KC({variant:e,color:a,exclusive:t,multiple:r,onChange:i,allowEmpty:n=!1,separated:o=!1,...l}){const c=void 0===e||JC.includes(e);c||$C(`variant="${e}" names a COLOR.`),void 0!==t&&$C("`exclusive` is `multiple` inverted.");return le(oy,{__selectionOwner:!0,variant:c&&e||"outlined",color:void 0!==a?a:c?void 0:e,multiple:void 0!==r?r:void 0!==t&&!t,allowEmpty:n,separated:o,onChange:i?!c||void 0!==t?(e,a)=>i(a,e):i:void 0,...l})}const _C=e=>{const a=a=>le(KC,{color:e,...a});return a.displayName=`${e}ToggleButtonGroup`,a},eB=_C("default"),aB=_C("primary"),tB=_C("secondary"),rB=_C("tertiary"),iB=_C("neutral"),nB=_C("black-white"),oB=_C("info"),lB=_C("success"),cB=_C("warning"),sB=_C("error"),dB=[{icon:le(Te,{}),label:"Home"},{icon:le(Ie,{}),label:"Search"},{icon:le(Me,{}),label:"Favorites",badge:3},{icon:le(We,{}),label:"Profile"},{icon:le(Le,{}),label:"Settings"}],uB=[{label:"Home"},{label:"Inbox"},{label:"Projects"},{label:"Settings"}],hB=[{label:"Dessert",field:"name",width:"50%"},{label:"Calories",field:"calories",align:"right"},{label:"Fat (g)",field:"fat",align:"right"}],mB=[{name:"Frozen yoghurt",calories:159,fat:6},{name:"Ice cream sandwich",calories:237,fat:9},{name:"Eclair",calories:262,fat:16}],pB=[{value:"light",label:"Light"},{value:"dark",label:"Dark"},{value:"system",label:"System"}],fB=[{icon:le(Ka,{}),label:"Bold"},{icon:le(_a,{}),label:"Italic"},{icon:le(et,{}),label:"Underline"}],gB=[{id:"src",label:"src",children:[{id:"components",label:"components",children:[{id:"button",label:"Button.js"},{id:"card",label:"Card.js"}]},{id:"index",label:"index.js"}]},{id:"readme",label:"README.md"}],bB=({w:e=320,h:a,children:t})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden"},children:t}),vB=()=>{const[e,t]=a(!1);return se(ce,{children:[le(Yg,{onClick:()=>t(!0),children:"Open modal"}),le(Yw,{open:e,onClose:()=>t(!1),title:"Rename project",children:se(zy,{gap:"var(--Sizing-2)",children:[le(mr,{children:"Modals take the whole screen's attention, so they owe the reader a way out."}),le(Yg,{onClick:()=>t(!1),children:"Done"})]})})]})},xB=()=>{const[e,t]=a(!1);return se(ce,{children:[le(Yg,{onClick:()=>t(!0),children:"Open dialog"}),le(vS,{open:e,onClose:()=>t(!1),title:"Discard changes?",actions:se(ce,{children:[le(Yg,{variant:"outline",onClick:()=>t(!1),children:"Keep editing"}),le(Yg,{variant:"error",onClick:()=>t(!1),children:"Discard"})]}),children:le(mr,{children:"This cannot be undone."})})]})},yB=()=>{const[e,t]=a(!1);return se(ce,{children:[le(Yg,{onClick:()=>t(!0),children:"Open drawer"}),le(fz,{open:e,onClose:()=>t(!1),children:se(zy,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(_t,{children:"Filters"}),le(YS,{items:uB,clickable:!0}),le(Yg,{onClick:()=>t(!1),children:"Close"})]})})]})},zB=()=>{const[e,t]=a(!1);return se(ce,{children:[le(Yg,{onClick:()=>t(!0),children:"Show snackbar"}),le(Ek,{open:e,onClose:()=>t(!1),color:"success",autoHideDuration:4e3,children:"Project saved."})]})},SB=()=>{const[e,t]=a(!1),i=r(null);return se(ce,{children:[le(Yg,{ref:i,onClick:()=>t(e=>!e),children:"Open popover"}),le(Zw,{open:e,onClose:()=>t(!1),anchorRef:i,width:260,children:le(zy,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-2)"},children:le(mr,{children:"A panel anchored to the thing that opened it, rendered through a portal so no ancestor can clip it."})})})]})};function wB(){const[e,t]=a("left");return se(KC,{value:e,onChange:t,"aria-label":"Alignment",children:[le(Yg,{value:"left",children:"Left"}),le(Yg,{value:"center",children:"Center"}),le(Yg,{value:"right",children:"Right"})]})}function kB(){return se(zy,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[se(zy,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(zr,{color:"quiet",children:"ButtonGroup — three things you can do"}),se(oy,{"aria-label":"Actions",children:[le(Yg,{onClick:()=>{},children:"Save"}),le(Yg,{onClick:()=>{},children:"Duplicate"}),le(Yg,{onClick:()=>{},children:"Delete"})]})]}),se(zy,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(zr,{color:"quiet",children:"ToggleButtonGroup — one answer, and never none"}),le(wB,{})]})]})}const CB={ButtonGroup:()=>le(kB,{}),ToggleButtonGroup:()=>le(wB,{}),AppBar:()=>le(bB,{w:"100%",children:le(wz,{navLinks:[{label:"Work"},{label:"Studio"},{label:"Contact"}]})}),Autocomplete:()=>le(bB,{children:le(Rz,{label:"Theme",options:["Light","Dark","System","High contrast"],placeholder:"Type to search"})}),BottomNavigation:()=>le(bB,{w:360,children:le(Zz,{items:dB.slice(0,4),defaultValue:0})}),CodeBlock:()=>le(bB,{w:"100%",children:le(Yb,{code:"npm install @omni-design/components",language:"bash"})}),Dialog:()=>le(xB,{}),Drawer:()=>le(yB,{}),DropZone:()=>le(bB,{w:360,children:le(HS,{label:"Drop a file here",sublabel:"PNG or SVG, up to 2 MB"})}),IconBadge:()=>le(QS,{color:"primary",children:le(ye,{})}),List:()=>le(bB,{children:le(YS,{items:uB,clickable:!0})}),Loader:()=>le(yw,{message:"Loading projects…"}),Menu:()=>se(Ww,{children:[le(Dw,{children:"Actions"}),se(Rw,{children:[le(Fw,{children:"Rename"}),le(Fw,{children:"Duplicate"}),le(Pw,{}),le(Fw,{disabled:!0,children:"Delete"})]})]}),Modal:()=>le(vB,{}),Paper:()=>le(Jw,{surface:"Container",children:se(zy,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-3)",minWidth:220},children:[le(_t,{children:"Paper"}),le(mr,{children:"A surface at one container level, with the elevation that level implies."})]})}),Popover:()=>le(SB,{}),Rail:()=>le(bB,{w:88,h:320,children:le(tk,{items:dB,defaultValue:0})}),Ratio:()=>le(bB,{w:240,children:le(hk,{ratio:"16:9"})}),SearchField:()=>le(bB,{children:le(Xy,{placeholder:"Search projects…"})}),Select:()=>le(bB,{children:le(qf,{label:"Appearance",options:pB,defaultValue:"system"})}),Sidebar:()=>le(bB,{w:280,h:320,children:le(Pk,{variant:"permanent",open:!0,items:uB,width:280})}),Snackbar:()=>le(zB,{}),StateMessage:()=>le(bB,{w:360,children:le(Jk,{type:"empty",title:"No projects yet",body:"Create one to get started.",action:le(Yg,{size:"small",children:"New project"})})}),Stepper:()=>le(bB,{w:360,children:se(eC,{activeStep:1,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})}),Swatch:()=>le(uC,{color:"#70947b",label:"Primary"}),Table:()=>le(bB,{w:"100%",children:le(pC,{columns:hB,rows:mB})}),Tag:()=>le($S,{color:"primary",children:"Beta"}),TextField:()=>le(bB,{children:le(fC,{label:"Project name",placeholder:"Untitled"})}),Toolbar:()=>le(CC,{items:fB,defaultValue:0}),Tooltip:()=>le(DC,{title:"Rename this project",children:le(Yg,{variant:"outline",children:"Hover me"})}),TreeView:()=>le(bB,{children:le(AS,{items:gB,defaultExpandedItems:["src","components"]})})},BB="npm install @omni-design/components",MB={Button:{selected:()=>le(Qy,{offLabel:"unselected",onLabel:"selected",render:e=>le(Yg,{variant:"outline",selected:e,children:"Bold"})}),avatar:()=>le(Qy,{offLabel:"text button",onLabel:"avatar",render:e=>le(Yg,e?{avatar:!0,"aria-label":"Jane Doe",children:le(yg,{})}:{children:"Jane Doe"})}),letterNumber:()=>le(Qy,{offLabel:"text button",onLabel:"letterNumber",render:e=>le(Yg,e?{letterNumber:!0,"aria-label":"3 unread",children:"3"}:{children:"3 unread"})}),swatch:()=>le(Qy,{offLabel:"ordinary button",onLabel:"swatch",render:e=>le(Yg,e?{swatch:!0,"aria-label":"Brand green",style:{background:"#70947b"}}:{children:"Brand green"})})},Chip:{variant:()=>le(Ey,{values:Py,defaultValue:"primary",render:e=>le(nb,{variant:e,label:e})}),selected:()=>le(Qy,{render:e=>le(nb,{label:"Design",selected:e,clickable:!0}),offLabel:"unselected",onLabel:"selected"}),clickable:()=>le(Qy,{render:e=>le(nb,{label:"Design",clickable:e}),offLabel:"static",onLabel:"clickable"}),disabled:()=>le(Qy,{render:e=>le(nb,{label:"Design",clickable:!0,disabled:e}),offLabel:"enabled",onLabel:"disabled"})},Badge:{variant:()=>le(Ey,{values:Py,defaultValue:"primary",render:e=>le(Ag,{variant:e,badgeContent:4,children:le(Bf,{children:le(xe,{})})})}),dot:()=>le(Qy,{render:e=>le(Ag,{dot:e,badgeContent:4,children:le(Bf,{children:le(xe,{})})}),offLabel:"count",onLabel:"dot"}),showZero:()=>le(Qy,{render:e=>le(Ag,{showZero:e,badgeContent:0,children:le(Bf,{children:le(xe,{})})}),offLabel:"0 hidden",onLabel:"0 shown"}),invisible:()=>le(Qy,{render:e=>le(Ag,{invisible:e,badgeContent:4,children:le(Bf,{children:le(xe,{})})}),offLabel:"visible",onLabel:"invisible"}),overlap:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"rectangular",emphasis:!0,children:le(Ag,{badgeContent:4,overlap:"rectangular",children:le(yg,{initials:"JD"})})}),le(Oy,{label:"circular",children:le(Ag,{badgeContent:4,overlap:"circular",children:le(yg,{initials:"JD"})})})]})},Alert:{color:()=>le(Vy,{values:["info","success","warning","error"],defaultValue:"info",render:e=>se(rv,{color:e,children:[e," — something worth saying."]})}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>se(rv,{color:"info",size:e,children:["Size ",e,"."]})})},Avatar:{defaultPhoto:()=>le(Qy,{render:e=>le(yg,{defaultPhoto:e}),offLabel:"no photo",onLabel:"default photo"}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(yg,{size:e,initials:"JD"})}),clickable:()=>le(Qy,{render:e=>le(yg,{initials:"JD",clickable:e,"aria-label":e?"Jane Doe, open menu":void 0}),offLabel:"static",onLabel:"clickable"})},Icon:{color:()=>le(Ey,{values:["default",...Py,"quiet"],defaultValue:"default",render:e=>le(Bf,{color:e,children:le(Me,{})})}),size:()=>le(Ey,{values:["xxs","xs","small","medium","large","xl","xxl"],defaultValue:"medium",render:e=>le(Bf,{size:e,color:"primary",children:le(Me,{})})}),twoTone:()=>le(Qy,{render:e=>le(Bf,{color:"primary",twoTone:e,size:"large",children:le(Me,{})}),offLabel:"solid",onLabel:"twoTone"}),disabled:()=>le(Qy,{render:e=>le(Bf,{color:"primary",disabled:e,children:le(Me,{})}),offLabel:"enabled",onLabel:"disabled"})},Swatch:{size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(uC,{color:"#70947b",size:e,label:e})}),selected:()=>le(Qy,{render:e=>le(uC,{color:"#70947b",label:"Primary",selected:e}),offLabel:"unselected",onLabel:"selected"}),disabled:()=>le(Qy,{render:e=>le(uC,{color:"#70947b",label:"Primary",disabled:e}),offLabel:"enabled",onLabel:"disabled"}),radio:()=>le(Qy,{render:e=>le(uC,{color:"#70947b",label:"Primary",radio:e,selected:!0}),offLabel:"chip carries it",onLabel:"radio carries it"})},Tag:{color:()=>le(Ey,{values:["default",...Py],defaultValue:"primary",render:e=>le($S,{color:e,children:e})}),width:()=>se(zy,{gap:"var(--Sizing-2)",style:{width:200},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"hug"}),le($S,{color:"primary",children:"Beta"})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"fill"}),le($S,{color:"primary",width:"fill",children:"Beta"})]})]}),allCaps:()=>le(Qy,{render:e=>le($S,{color:"primary",allCaps:e,children:"Beta"}),offLabel:"as written",onLabel:"allCaps"})},IconBadge:{color:()=>le(Ey,{values:["default",...Py],defaultValue:"primary",render:e=>le(QS,{color:e,children:le(xe,{})})}),size:()=>se(zy,{gap:"var(--Sizing-1)",children:[le(QS,{color:"primary",children:le(xe,{})}),le(mr,{color:"quiet",children:"One size. `size` was removed and the component warns if you pass it — the prop table above still lists three values, which is a doc bug."})]})},Link:{disabled:()=>le(Qy,{render:e=>le(ti,{href:"#",disabled:e,children:"Read the guide"}),offLabel:"enabled",onLabel:"disabled"})},Divider:{color:()=>le(Vy,{values:["border","border-variant",...Py],defaultValue:"border-variant",render:e=>le(mx,{color:e})}),orientation:()=>se(yy,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[le(Oy,{label:"horizontal",emphasis:!0,width:160,children:le("div",{style:{width:160},children:le(mx,{})})}),le(Oy,{label:"vertical",width:60,children:le("div",{style:{height:60,display:"flex"},children:le(mx,{orientation:"vertical",style:{alignSelf:"stretch"}})})})]}),size:()=>le(Vy,{values:Hy,defaultValue:"small",render:e=>le(mx,{size:e,color:"primary"})}),indicatorStyle:()=>le(Vy,{values:["outline","solid"],defaultValue:"outline",render:e=>le(mx,{indicatorText:"OR",indicatorStyle:e,color:"primary"})}),textAlign:()=>le(Vy,{values:["left","center","right"],defaultValue:"center",render:e=>le(mx,{indicatorText:"OR",textAlign:e})})},Loader:{color:()=>le(Ey,{values:["default",...Py],defaultValue:"primary",render:e=>le(yw,{color:e,size:"small",message:""})}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(yw,{size:e,message:""})})},StateMessage:{type:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:360},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"empty"}),le(Jk,{type:"empty",title:"No projects yet",body:"Create one to get started."})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"error"}),le(Jk,{type:"error",title:"Could not load",body:"Check your connection and try again."})]}),le(mr,{color:"quiet",children:"The prop table lists a third, `no-results`. The component defines only these two, so it resolves to `empty` — a doc bug rather than a type."})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>le(Jk,{type:"empty",size:e,title:"No projects yet",body:"Create one to get started."})})},Fab:{variant:()=>le(Ey,{values:["solid","outline","ghost"],defaultValue:"solid",render:e=>le(ax,{variant:e,icon:le(Bf,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add, "+e})})},Rating:{color:()=>le(Ey,{values:["default",...Py],defaultValue:"default",render:e=>le(Px,{color:e,defaultValue:3,readOnly:!0})}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(Px,{size:e,defaultValue:3,readOnly:!0})}),readOnly:()=>le(Qy,{render:e=>le(Px,{defaultValue:3,readOnly:e}),offLabel:"interactive",onLabel:"readOnly"})},CodeBlock:{showCopy:()=>le(Vy,{values:[!0,!1],defaultValue:!0,render:e=>le(Yb,{code:BB,language:"bash",showCopy:e})}),showHeader:()=>le(Vy,{values:[!0,!1],defaultValue:!0,render:e=>le(Yb,{code:BB,language:"bash",showHeader:e})}),wrap:()=>le(Vy,{values:[!1,!0],defaultValue:!1,render:e=>le(Yb,{language:"bash",wrap:e,code:"npx @omni-design/cli generate --theme primary --surface Surface-Bright --out ./tokens"})})}},TB=220,AB=(e,a=TB)=>le("div",{style:{width:a},children:e}),LB=["default",...Py,"black-white"],IB=["default",...Py],NB={Checkbox:{variant:()=>le(Ey,{values:LB,defaultValue:"primary",render:e=>le(Rv,{variant:e,defaultChecked:!0,label:e})}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(Rv,{size:e,defaultChecked:!0,label:e})}),"checked / defaultChecked":()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"unchecked",emphasis:!0,children:le(Rv,{label:"Unchecked"})}),le(Oy,{label:"checked",children:le(Rv,{defaultChecked:!0,label:"Checked"})})]}),indeterminate:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"false",emphasis:!0,children:le(Rv,{defaultChecked:!0,label:"All"})}),le(Oy,{label:"indeterminate",children:le(Rv,{indeterminate:!0,label:"Some"})})]}),disabled:()=>le(Qy,{render:e=>le(Rv,{defaultChecked:!0,disabled:e,label:"Email me"}),offLabel:"enabled",onLabel:"disabled"})},Radio:{color:()=>le(Ey,{values:LB,defaultValue:"primary",render:e=>le(Mx,{color:e,checked:!0,label:e,name:"c-"+e})}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(Mx,{size:e,checked:!0,label:e,name:"s-"+e})}),labelPlacement:()=>le(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["end","start","top","bottom"].map(e=>le(Oy,{label:e,emphasis:"end"===e,children:le(Mx,{checked:!0,labelPlacement:e,label:"Option",name:"p-"+e})},e))}),checked:()=>se(Tx,{defaultValue:"b",name:"demo",children:[le(Mx,{value:"a",label:"Light"}),le(Mx,{value:"b",label:"Dark"}),le(Mx,{value:"c",label:"System"})]}),disabled:()=>le(Qy,{render:e=>le(Mx,{checked:!0,disabled:e,label:"Dark",name:"d-"+e}),offLabel:"enabled",onLabel:"disabled"})},SwitchInput:{variant:()=>le(Ey,{values:IB,defaultValue:"default",render:e=>le(dv,{variant:e,defaultChecked:!0,label:e})}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(dv,{size:e,defaultChecked:!0,label:e})}),"checked / defaultChecked":()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"off",emphasis:!0,children:le(dv,{label:"Notifications"})}),le(Oy,{label:"on",children:le(dv,{defaultChecked:!0,label:"Notifications"})})]}),icon:()=>se(zy,{gap:"var(--Sizing-2)",children:[le(Ey,{values:["default","primary","secondary","tertiary"],defaultValue:"default",render:e=>le(dv,{variant:e,defaultChecked:!0,label:e,iconOn:le(he,{fontSize:"inherit"}),iconOff:le(Ea,{fontSize:"inherit"})})}),se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"off",children:le(dv,{label:"Sync",iconOn:le(he,{fontSize:"inherit"}),iconOff:le(Ea,{fontSize:"inherit"})})}),le(Oy,{label:"on",emphasis:!0,children:le(dv,{defaultChecked:!0,label:"Sync",iconOn:le(he,{fontSize:"inherit"}),iconOff:le(Ea,{fontSize:"inherit"})})}),le(Oy,{label:"same glyph both ways",children:le(dv,{defaultChecked:!0,label:"Sync",icon:le(he,{fontSize:"inherit"})})})]})]}),labelPlacement:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"end",emphasis:!0,children:le(dv,{defaultChecked:!0,label:"Dark mode"})}),le(Oy,{label:"start",children:le(dv,{defaultChecked:!0,labelPlacement:"start",label:"Dark mode"})})]}),disabled:()=>le(Qy,{render:e=>le(dv,{defaultChecked:!0,disabled:e,label:"Dark mode"}),offLabel:"enabled",onLabel:"disabled"})},Input:{variant:()=>le(Vy,{values:Py.map(e=>e+"-outline"),defaultValue:"primary-outline",render:e=>AB(le(Sx,{variant:e,label:e,placeholder:"Value"}))}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>AB(le(Sx,{size:e,label:e,placeholder:"Value"}))}),labelPosition:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"standard",emphasis:!0,width:TB,children:AB(le(Sx,{label:"Project name",placeholder:"Untitled"}))}),le(Oy,{label:"floating",width:TB,children:AB(le(Sx,{labelPosition:"floating",label:"Project name"}))})]}),validation:()=>le(Vy,{values:["none","error"],defaultValue:"none",render:e=>AB(le(Sx,{validation:e,label:"Email",defaultValue:"error"===e?"not-an-email":"jane@example.com",validationMessage:"error"===e?"Enter a valid email address.":void 0}))}),disabled:()=>le(Qy,{width:TB,offLabel:"enabled",onLabel:"disabled",render:e=>AB(le(Sx,{disabled:e,label:"Project name",defaultValue:"Untitled"}))})},TextField:{error:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false",emphasis:!0,width:TB,children:AB(le(fC,{label:"Email",value:"jane@example.com"}))}),le(Oy,{label:"true",width:TB,children:AB(le(fC,{label:"Email",value:"not-an-email",error:!0,errorMessage:"Enter a valid email address."}))})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>AB(le(fC,{size:e,label:e,placeholder:"Value"}))})},SearchField:{color:()=>le(Vy,{values:IB,defaultValue:"default",render:e=>AB(le(Xy,{color:e,defaultValue:"dinosaur"}))}),showClearButton:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"true",emphasis:!0,width:TB,children:AB(le(Xy,{defaultValue:"dinosaur"}))}),le(Oy,{label:"false",width:TB,children:AB(le(Xy,{defaultValue:"dinosaur",showClearButton:!1}))})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>AB(le(Xy,{size:e,placeholder:"Search — "+e}))})},Select:{labelPosition:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"top",emphasis:!0,width:TB,children:AB(le(qf,{label:"Appearance",options:pB,defaultValue:"system"}))}),le(Oy,{label:"floating",width:TB,children:AB(le(qf,{labelPosition:"floating",label:"Appearance",options:pB,defaultValue:"system"}))})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>AB(le(qf,{size:e,label:e,options:pB,defaultValue:"system"}))}),mode:()=>le(Vy,{values:["standard","multiselect","searchable"],defaultValue:"standard",render:e=>AB(le(qf,{mode:e,label:e,options:pB,defaultValue:"multiselect"===e?["system"]:"system"}))})},Autocomplete:{labelPosition:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"top",emphasis:!0,width:TB,children:AB(le(Rz,{label:"Theme",options:["Light","Dark","System"]}))}),le(Oy,{label:"floating",width:TB,children:AB(le(Rz,{labelPosition:"floating",label:"Theme",options:["Light","Dark","System"]}))})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>AB(le(Rz,{size:e,label:e,options:["Light","Dark","System"]}))})},DropZone:{multiple:()=>se(zy,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — one file"}),le(HS,{label:"Drop a file here",sublabel:"PNG or SVG"})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — several"}),le(HS,{multiple:!0,label:"Drop files here",sublabel:"PNG or SVG"})]})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>le(HS,{size:e,label:"Drop a file — "+e})}),disabled:()=>se(zy,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"enabled"}),le(HS,{label:"Drop a file here"})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"disabled"}),le(HS,{disabled:!0,label:"Drop a file here"})]})]})},Avatar:{color:()=>le(Ey,{values:["default","primary","secondary","tertiary","neutral"],defaultValue:"default",render:e=>le(yg,{color:e,initials:"JD"})})}},WB=({w:e=320,h:a,children:t})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden"},children:t}),DB=(e={})=>se(Ox,{...e,children:[le(Ex,{href:"/",children:"Home"}),le(Ex,{href:"/projects",children:"Projects"}),le(Ex,{href:"/projects/omni",children:"Omni"}),le(Ex,{children:"Tokens"})]}),RB=(e={})=>se(bb,{defaultValue:0,...e,children:[se(vb,{children:[le(xb,{value:0,children:"Overview"}),le(xb,{value:1,children:"Details"}),le(xb,{value:2,children:"History"})]}),le(yb,{value:0,children:le(mr,{children:"The first panel."})}),le(yb,{value:1,children:le(mr,{children:"The second panel."})}),le(yb,{value:2,children:le(mr,{children:"The third panel."})})]}),FB={Tabs:{orientation:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"horizontal"}),le(WB,{w:320,children:RB()})]}),se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"vertical-left",width:260,children:le(WB,{w:260,children:RB({orientation:"vertical-left"})})}),le(Oy,{label:"vertical-right",width:260,children:le(WB,{w:260,children:RB({orientation:"vertical-right"})})})]})]}),baseline:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"true"}),le(WB,{w:320,children:RB()})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"false"}),le(WB,{w:320,children:RB({baseline:!1})})]})]}),variant:()=>le(zy,{gap:"var(--Sizing-3)",children:["standard","solid","light","dark"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard"===e?"standard":"quiet",children:e}),le(WB,{w:320,children:RB({variant:e})})]},e))}),size:()=>le(zy,{gap:"var(--Sizing-3)",children:Hy.map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"medium"===e?"standard":"quiet",children:e}),le(WB,{w:320,children:RB({size:e})})]},e))}),scrollable:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — the strip wraps or clips"}),le(WB,{w:200,children:le(bb,{defaultValue:0,children:se(vb,{children:[le(xb,{value:0,children:"Overview"}),le(xb,{value:1,children:"Details"}),le(xb,{value:2,children:"History"}),le(xb,{value:3,children:"Settings"})]})})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — the strip scrolls"}),le(WB,{w:200,children:le(bb,{defaultValue:0,scrollable:!0,children:se(vb,{children:[le(xb,{value:0,children:"Overview"}),le(xb,{value:1,children:"Details"}),le(xb,{value:2,children:"History"}),le(xb,{value:3,children:"Settings"})]})})})]})]})},Breadcrumbs:{size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>DB({size:e})}),condense:()=>se(zy,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false"}),DB()]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — the middle collapses behind an ellipsis"}),DB({condense:!0,maxItems:3})]})]}),backOnlyMobile:()=>se(zy,{gap:"var(--Sizing-2)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"wide — the full trail, either way"}),le(WB,{w:360,children:DB({backOnlyMobile:!0})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"narrow — collapses to a single back link"}),le(WB,{w:180,children:DB({backOnlyMobile:!0})})]})]})},Pagination:{size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>le(Gx,{count:8,defaultPage:3,size:e})}),"showFirstButton / showLastButton":()=>se(zy,{gap:"var(--Sizing-2)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false"}),le(Gx,{count:20,defaultPage:9})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — first and last"}),le(Gx,{count:20,defaultPage:9,showFirstButton:!0,showLastButton:!0})]})]})},Stepper:{orientation:()=>se(yy,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"horizontal",emphasis:!0,width:300,children:le(WB,{w:300,children:se(eC,{activeStep:1,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})}),le(Oy,{label:"vertical",width:160,children:se(eC,{orientation:"vertical",activeStep:1,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]}),size:()=>le(zy,{gap:"var(--Sizing-3)",children:Hy.map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"medium"===e?"standard":"quiet",children:e}),le(WB,{w:320,children:se(eC,{size:e,activeStep:1,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]},e))}),clickable:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — display only"}),le(WB,{w:320,children:se(eC,{activeStep:2,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — completed steps go back"}),le(WB,{w:320,children:se(eC,{activeStep:2,clickable:!0,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]})]}),dashedIncomplete:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — one solid connector"}),le(WB,{w:320,children:se(eC,{activeStep:1,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — remaining steps dashed"}),le(WB,{w:320,children:se(eC,{activeStep:1,dashedIncomplete:!0,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]})]})},List:{orientation:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"vertical"}),le(WB,{w:240,children:le(YS,{items:uB})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"horizontal"}),le(WB,{w:360,children:le(YS,{items:uB,orientation:"horizontal"})})]})]}),dividers:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false",emphasis:!0,width:200,children:le(WB,{w:200,children:le(YS,{items:uB})})}),le(Oy,{label:"true",width:200,children:le(WB,{w:200,children:le(YS,{items:uB,dividers:!0})})})]}),clickable:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false — static",emphasis:!0,width:200,children:le(WB,{w:200,children:le(YS,{items:uB})})}),le(Oy,{label:"true — rows are buttons",width:200,children:le(WB,{w:200,children:le(YS,{items:uB,clickable:!0})})})]}),selectionMode:()=>le(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["none","single","multiple"].map(e=>le(Oy,{label:e,emphasis:"none"===e,width:190,children:le(WB,{w:190,children:le(YS,{items:uB,selectionMode:e,selectedIndices:"none"===e?[]:[1]})})},e))}),loading:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false",emphasis:!0,width:200,children:le(WB,{w:200,children:le(YS,{items:uB})})}),le(Oy,{label:"true",width:200,children:le(WB,{w:200,children:le(YS,{loading:!0,skeletonRows:4})})})]})},TreeView:{selectionMode:()=>le(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["none","single","multiple"].map(e=>le(Oy,{label:e,emphasis:"none"===e,width:190,children:le(WB,{w:190,children:le(AS,{items:gB,selectionMode:e,defaultExpandedItems:["src"]})})},e))})},AppBar:{mode:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"desktop"}),le(WB,{w:"100%",children:le(wz,{navLinks:[{label:"Work"},{label:"Studio"}]})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"mobile"}),le(WB,{w:360,children:le(wz,{mode:"mobile",navLinks:[{label:"Work"},{label:"Studio"}]})})]})]}),brandType:()=>le(zy,{gap:"var(--Sizing-3)",children:["name","logo","both"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"name"===e?"standard":"quiet",children:e}),le(WB,{w:"100%",children:le(wz,{brandType:e,navLinks:[{label:"Work"}]})})]},e))}),menuType:()=>le(zy,{gap:"var(--Sizing-3)",children:["hamburger","none"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"hamburger"===e?"standard":"quiet",children:e}),le(WB,{w:360,children:le(wz,{mode:"mobile",menuType:e,navLinks:[{label:"Work"}]})})]},e))})},Rail:{variant:()=>le(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["default","primary","secondary","tertiary"].map(e=>le(Oy,{label:e,emphasis:"default"===e,width:88,children:le(WB,{w:88,h:260,children:le(tk,{items:dB.slice(0,4),variant:e,defaultValue:0})})},e))}),expandable:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false",emphasis:!0,width:88,children:le(WB,{w:88,h:260,children:le(tk,{items:dB.slice(0,4),defaultValue:0})})}),le(Oy,{label:"true — gains a toggle",width:88,children:le(WB,{w:88,h:260,children:le(tk,{items:dB.slice(0,4),expandable:!0,defaultValue:0})})})]}),expandedWidth:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"partial",emphasis:!0,width:240,children:le(WB,{w:240,h:260,children:le(tk,{items:dB.slice(0,4),expandable:!0,defaultExpanded:!0,defaultValue:0})})}),le(Oy,{label:"full",width:300,children:le(WB,{w:300,h:260,children:le(tk,{items:dB.slice(0,4),expandable:!0,defaultExpanded:!0,expandedWidth:"full",defaultValue:0})})})]}),labelStyle:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"contained",emphasis:!0,width:88,children:le(WB,{w:88,h:260,children:le(tk,{items:dB.slice(0,4),defaultValue:0})})}),le(Oy,{label:"outside",width:88,children:le(WB,{w:88,h:260,children:le(tk,{items:dB.slice(0,4),labelStyle:"outside",defaultValue:0})})})]})},BottomNavigation:{showLabels:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"true"}),le(WB,{w:360,children:le(Zz,{items:dB.slice(0,4),defaultValue:0})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"false — icons only, so each needs a name"}),le(WB,{w:360,children:le(Zz,{items:dB.slice(0,4),showLabels:!1,defaultValue:0})})]})]}),variant:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"fixed — edge to edge"}),le(WB,{w:360,children:le(Zz,{items:dB.slice(0,4),defaultValue:0})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"floating — inset, with its own elevation"}),le(WB,{w:360,children:le(Zz,{items:dB.slice(0,4),variant:"floating",defaultValue:0})})]})]})},Sidebar:{variant:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"permanent",width:240,children:le(WB,{w:240,h:260,children:le(Pk,{variant:"permanent",open:!0,items:uB,width:240})})}),le(Oy,{label:"temporary — an overlay, shown open",emphasis:!0,width:240,children:le(WB,{w:240,h:260,children:le(Pk,{variant:"permanent",open:!0,items:uB,width:240})})})]})},Toolbar:{type:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"floating — its own surface and elevation"}),le(CC,{items:fB,defaultValue:0})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"docked — sits flush in the layout"}),le(CC,{items:fB,type:"docked",defaultValue:0})]})]}),orientation:()=>se(yy,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"horizontal",emphasis:!0,children:le(CC,{items:fB,defaultValue:0})}),le(Oy,{label:"vertical",children:le(CC,{items:fB,orientation:"vertical",defaultValue:0})})]})},Menu:{size:()=>le(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:Hy.map(e=>le(Oy,{label:e,emphasis:"medium"===e,children:se(Ww,{children:[le(Dw,{children:e}),se(Rw,{size:e,children:[le(Fw,{children:"Rename"}),le(Fw,{children:"Duplicate"})]})]})},e))})}},PB=({w:e=320,h:a,children:t})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden"},children:t}),HB=se(zy,{gap:"var(--Sizing-1)",children:[le(_t,{children:"Card title"}),le(mr,{children:"What a card looks like in this design system."})]});function OB({values:e,defaultValue:t,render:r,label:i=e=>String(e)}){const[n,o]=a(null),l=void 0!==t?[t,...e.filter(e=>e!==t)]:e;return se(ce,{children:[le(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:l.map(e=>le(Yg,{size:"small",variant:e===t?"default":"outline",onClick:()=>o(e),children:i(e)},String(e)))}),null!==n?r(n,()=>o(null)):null]})}function EB(){const[e,t]=a(!1),i=r(null);return se(ce,{children:[se(Yg,{ref:i,variant:"outline",onClick:()=>t(e=>!e),children:[e?"Close":"Open"," popover"]}),le(Zw,{open:e,onClose:()=>t(!1),anchorRef:i,width:240,children:le(zy,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-2)"},children:le(mr,{children:"Anchored to the button, portalled to the body so no ancestor can clip it."})})})]})}const VB=360;function QB({labels:e=["Save","Cancel","Delete"],variant:a="default",...t}){return le(oy,{"aria-label":"Actions",...t,children:e.map(e=>le(Yg,{variant:a,onClick:()=>{},children:e},e))})}function jB(e){return se(oy,{"aria-label":"Alignment",...e,children:[le(Yg,{iconOnly:!0,"aria-label":"Align left",onClick:()=>{},children:le(Bf,{children:le(at,{})})}),le(Yg,{iconOnly:!0,"aria-label":"Align center",onClick:()=>{},children:le(Bf,{children:le(tt,{})})}),le(Yg,{iconOnly:!0,"aria-label":"Align right",onClick:()=>{},children:le(Bf,{children:le(lt,{})})})]})}function qB({options:e=["Left","Center","Right"],initial:t="Left",...r}){const[i,n]=a(t);return le(KC,{value:i,onChange:n,"aria-label":"Align",...r,children:e.map(e=>le(Yg,{value:e,children:e},e))})}function GB({allowEmpty:e,...t}){const[r,i]=a(["Left"]);return se(KC,{multiple:!0,allowEmpty:e,value:r,onChange:i,"aria-label":"Align",...t,children:[le(Yg,{value:"Left",children:"Left"}),le(Yg,{value:"Center",children:"Center"}),le(Yg,{value:"Right",children:"Right"})]})}function UB(){const[a,t]=e.useState("left");return se(KC,{value:a,onChange:t,"aria-label":"Alignment",children:[le(Yg,{value:"left",children:"Left"}),le(Yg,{value:"center",children:"Center"}),le(Yg,{value:"right",disabled:!0,children:"Right"})]})}function XB(){const[e,t]=a(!0),[r,i]=a(!1);return se(yy,{gap:"var(--Sizing-1)",style:{alignItems:"center"},children:[le(nb,{label:"Unselected"}),le(nb,{label:"Selected",clickable:!0,selected:e,onClick:()=>t(e=>!e)}),r?le(zr,{color:"quiet",children:"dismissed"}):le(nb,{label:"Dismissible",onDelete:()=>i(!0)})]})}const YB={...CB,Button:()=>le(Yg,{children:"Button"}),BrandIcon:()=>le(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:["github","linkedin","instagram","dribbble","x-twitter"].map(e=>le(wf,{name:e,size:"24px"},e))}),Fab:()=>le(ax,{icon:le(Bf,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),Chip:()=>le(XB,{}),Badge:()=>se(yy,{gap:"var(--Sizing-3)",children:[le(Ag,{badgeContent:3,children:le(Bf,{children:le("span",{children:"✉"})})}),le(Ag,{dot:!0,children:le(Bf,{children:le("span",{children:"🔔"})})})]}),Alert:()=>se(zy,{gap:"var(--Sizing-1)",children:[le(rv,{color:"info",children:"Something worth knowing."}),le(rv,{color:"error",children:"Something went wrong."})]}),Card:()=>le(zv,{padding:"medium",children:se(zy,{gap:"var(--Sizing-1)",children:[le(_t,{children:"Card title"}),le(mr,{children:"What a card looks like in this design system."})]})}),Avatar:()=>se(yy,{gap:"var(--Sizing-1)",children:[le(yg,{initials:"LN"}),le(yg,{})]}),Icon:()=>se(yy,{gap:"var(--Sizing-1)",children:[le(Bf,{color:"primary",children:le("span",{children:"★"})}),le(Bf,{color:"success",children:le("span",{children:"✓"})}),le(Bf,{color:"error",children:le("span",{children:"✕"})})]}),Link:()=>le(ti,{href:"#example",children:"A link, which thickens rather than recolors on hover"}),Divider:()=>le(mx,{indicatorText:"OR"}),Checkbox:()=>se(zy,{gap:"var(--Sizing-Half)",children:[le(Rv,{label:"Unchecked"}),le(Rv,{label:"Checked",defaultChecked:!0}),le(Rv,{label:"Indeterminate",indeterminate:!0})]}),Radio:()=>se(Tx,{defaultValue:"a",name:"docs-radio",children:[le(Mx,{value:"a",label:"First"}),le(Mx,{value:"b",label:"Second"})]}),Input:()=>le(Sx,{label:"Email",placeholder:"you@example.com"}),SwitchInput:()=>se(zy,{gap:"var(--Sizing-Half)",children:[le(dv,{label:"Off"}),le(dv,{label:"On",defaultChecked:!0})]}),Slider:()=>le(Nx,{defaultValue:40}),Rating:()=>le(Px,{defaultValue:3}),Breadcrumbs:()=>se(Ox,{children:[le(ti,{href:"#a",children:"Home"}),le(ti,{href:"#b",children:"Products"}),le(mr,{children:"Current"})]}),Pagination:()=>le(Gx,{count:8,defaultPage:3}),Accordion:()=>le(hy,{children:le(mr,{children:"An accordion segment, open."})}),Tabs:()=>se(bb,{defaultValue:0,children:[se(vb,{children:[le(xb,{value:0,children:"Overview"}),le(xb,{value:1,children:"Details"})]}),le(yb,{value:0,children:le(mr,{children:"The first panel."})}),le(yb,{value:1,children:le(mr,{children:"The second panel."})})]})};function JB(e){return e in YB}const ZB={Fab:{size:()=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ax,{size:"small",icon:le(Bf,{size:"small",children:le(Aa,{})}),ariaLabel:"Add, small"}),le(ax,{size:"medium",icon:le(Bf,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add, medium"}),le(ax,{size:"large",icon:le(Bf,{size:"large",children:le(Aa,{})}),ariaLabel:"Add, large"})]}),color:()=>{const e=(e,a)=>se(zy,{gap:"var(--Sizing-Half)",style:{alignItems:"center"},children:[le(ax,{color:e,size:"small",icon:le(Bf,{size:"small",children:le(Aa,{})}),ariaLabel:"Add, "+e}),le(zr,{color:a?"standard":"quiet",children:e})]},e);return se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[e("default",!0),le(mx,{orientation:"vertical",style:{alignSelf:"stretch"}}),["primary","secondary","tertiary","neutral","info","success","warning","error","black-white"].map(a=>e(a,!1))]})},extended:()=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ax,{icon:le(Bf,{size:"medium",children:le(La,{})}),ariaLabel:"Edit"}),le(ax,{icon:le(Bf,{size:"medium",children:le(La,{})}),extended:!0,label:"Edit"})]}),animate:()=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ax,{icon:le(Bf,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),le(ax,{icon:le(Bf,{size:"medium",children:le(Aa,{})}),animate:!0,ariaLabel:"Add, animated"})]}),disabled:()=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ax,{icon:le(Bf,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),le(ax,{icon:le(Bf,{size:"medium",children:le(Aa,{})}),disabled:!0,ariaLabel:"Add, disabled"})]})},Button:{variant:()=>se(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap"},children:[le(Yg,{children:"solid"}),le(Yg,{variant:"outline",children:"outline"}),le(Yg,{variant:"ghost",children:"ghost"})]}),size:()=>se(yy,{gap:"var(--Sizing-1)",style:{alignItems:"center",flexWrap:"wrap"},children:[le(Yg,{size:"small",children:"small"}),le(Yg,{size:"medium",children:"medium"}),le(Yg,{size:"large",children:"large"})]}),variantColor:()=>{const e=["primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],a=a=>se(yy,{gap:"var(--Sizing-1)",style:{alignItems:"center",flexWrap:"wrap"},children:[le(Yg,{variant:a?"default"+a:"default",size:"small",children:"default"}),le(mx,{orientation:"vertical",style:{alignSelf:"stretch"}}),e.map(e=>le(Yg,{variant:a?e+a:e,size:"small",children:e},e))]});return se(zy,{gap:"var(--Sizing-2)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"solid"}),a("")]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"outline"}),a("-outline")]})]})},disabled:()=>se(yy,{gap:"var(--Sizing-1)",children:[le(Yg,{children:"enabled"}),le(Yg,{disabled:!0,children:"disabled"})]}),"startDecorator / endDecorator":()=>se(zy,{gap:"var(--Sizing-1)",children:[se(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Yg,{startDecorator:le(Bf,{children:le(Aa,{})}),children:"start icon"}),le(Yg,{endDecorator:le(Bf,{children:le(Ia,{})}),children:"end icon"})]}),se(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Yg,{startDecorator:le(yg,{}),children:"start avatar"}),le(Yg,{endDecorator:le(yg,{}),children:"end avatar"})]})]}),iconOnly:()=>se(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Yg,{children:"text"}),le(Yg,{iconOnly:!0,"aria-label":"Delete item",children:le(Ae,{})}),le(Yg,{letterNumber:!0,"aria-label":"3 unread",children:"3"}),le(Yg,{avatar:!0,"aria-label":"Jane Doe",children:le(yg,{})})]}),elevated:()=>se(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Yg,{children:"standard"}),le(Yg,{elevated:!0,children:"raised"})]}),fullWidth:()=>se(zy,{gap:"var(--Sizing-1)",style:{width:"100%",maxWidth:320},children:[le(Yg,{children:"default fit"}),le(Yg,{fullWidth:!0,children:"full width"})]})}};const $B=[{Slider:Gy},MB,NB,FB,{Card:{variant:()=>le(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["solid","outlined","ghost"].map(e=>le(Oy,{label:e,emphasis:"solid"===e,width:200,children:le(zv,{variant:e,padding:"medium",children:HB})},e))}),size:()=>le(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:Hy.map(e=>le(Oy,{label:e,emphasis:"medium"===e,width:200,children:le(zv,{size:e,padding:"medium",children:HB})},e))}),orientation:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"vertical"}),le(PB,{w:200,children:le(zv,{padding:"medium",children:HB})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"horizontal"}),le(PB,{w:360,children:le(zv,{orientation:"horizontal",padding:"medium",children:HB})})]})]}),clickable:()=>se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false — static",emphasis:!0,width:200,children:le(zv,{padding:"medium",children:HB})}),le(Oy,{label:"true — one control",width:200,children:le(zv,{padding:"medium",clickable:!0,children:HB})})]}),elevated:()=>se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"standard — level 1",emphasis:!0,width:200,children:le(zv,{padding:"medium",children:HB})}),le(Oy,{label:"elevated — level 2",width:200,children:le(zv,{padding:"medium",elevated:!0,children:HB})})]}),selected:()=>se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false",emphasis:!0,width:200,children:le(zv,{padding:"medium",clickable:!0,children:HB})}),le(Oy,{label:"true",width:200,children:le(zv,{padding:"medium",clickable:!0,selected:!0,children:HB})})]})},Accordion:{variant:()=>le(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:["solid","outlined","ghost"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"solid"===e?"standard":"quiet",children:e}),le(hy,{variant:e,title:"What is a design system?",defaultExpanded:!0,children:le(mr,{children:"A set of decisions, written down once."})})]},e))}),size:()=>le(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:Hy.map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"medium"===e?"standard":"quiet",children:e}),le(hy,{size:e,title:"Size "+e,defaultExpanded:!0,children:le(mr,{children:"A set of decisions, written down once."})})]},e))}),defaultExpanded:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — starts closed"}),le(hy,{title:"What is a design system?",children:le(mr,{children:"A set of decisions, written down once."})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — starts open"}),le(hy,{title:"What is a design system?",defaultExpanded:!0,children:le(mr,{children:"A set of decisions, written down once."})})]})]}),disabled:()=>se(zy,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:380},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"enabled"}),le(hy,{title:"What is a design system?",children:le(mr,{children:"A set of decisions, written down once."})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"disabled"}),le(hy,{title:"What is a design system?",disabled:!0,children:le(mr,{children:"A set of decisions, written down once."})})]})]})},Paper:{outlined:()=>se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false — elevation",emphasis:!0,width:180,children:le(Jw,{surface:"Container",children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(mr,{children:"Elevated"})})})}),le(Oy,{label:"true — a border, no shadow",width:180,children:le(Jw,{surface:"Container",outlined:!0,children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(mr,{children:"Outlined"})})})})]}),variant:()=>le(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["elevation","outlined"].map(e=>le(Oy,{label:e,emphasis:"elevation"===e,width:180,children:le(Jw,{surface:"Container",variant:e,children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(mr,{children:e})})})},e))})},Ratio:{fit:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"width — height follows the column"}),le("div",{style:{width:240},children:le(hk,{ratio:"16:9"})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"height — width follows the row"}),le("div",{style:{height:120},children:le(hk,{ratio:"16:9",fit:"height"})})]})]})},Table:{loading:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%"},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false"}),le(pC,{columns:hB,rows:mB})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — the shape is kept"}),le(pC,{columns:hB,rows:[],loading:!0,skeletonRows:3})]})]})},Modal:{open:()=>le(OB,{values:[!0],label:()=>"Open modal",render:(e,a)=>le(Yw,{open:!0,onClose:a,title:"Rename project",children:se(zy,{gap:"var(--Sizing-2)",children:[le(mr,{children:"A modal takes the whole screen`s attention, so it owes the reader a way out."}),le(Yg,{onClick:a,children:"Done"})]})})}),size:()=>le(OB,{values:Hy,defaultValue:"medium",render:(e,a)=>le(Yw,{open:!0,onClose:a,size:e,title:"Size "+e,children:le(mr,{children:"The modal`s width. Its height always follows its content."})})}),layout:()=>le(OB,{values:["center","top"],defaultValue:"center",render:(e,a)=>le(Yw,{open:!0,onClose:a,layout:e,title:"Layout "+e,children:le(mr,{children:"Where the modal sits in the viewport."})})}),closeOnBackdrop:()=>le(OB,{values:[!0,!1],defaultValue:!0,label:e=>e?"true — click outside closes":"false — click outside does nothing",render:(e,a)=>le(Yw,{open:!0,onClose:a,closeOnBackdrop:e,title:"Rename project",children:se(zy,{gap:"var(--Sizing-2)",children:[le(mr,{children:e?"Click the backdrop to close.":"The backdrop will not close this."}),le(Yg,{onClick:a,children:"Close"})]})})}),showCloseButton:()=>le(OB,{values:[!0,!1],defaultValue:!0,label:e=>e?"true":"false — needs its own way out",render:(e,a)=>le(Yw,{open:!0,onClose:a,showCloseButton:e,title:"Rename project",children:se(zy,{gap:"var(--Sizing-2)",children:[le(mr,{children:"A modal with no close button must give one in its content."}),le(Yg,{onClick:a,children:"Done"})]})})})},Dialog:{open:()=>le(OB,{values:[!0],label:()=>"Open dialog",render:(e,a)=>le(vS,{open:!0,onClose:a,title:"Discard changes?",actions:se(ce,{children:[le(Yg,{variant:"outline",onClick:a,children:"Keep editing"}),le(Yg,{variant:"error",onClick:a,children:"Discard"})]}),children:le(mr,{children:"This cannot be undone."})})}),maxWidth:()=>le(OB,{values:["xs","sm","md","lg"],defaultValue:"sm",render:(e,a)=>le(vS,{open:!0,onClose:a,maxWidth:e,title:"maxWidth "+e,actions:le(Yg,{onClick:a,children:"Close"}),children:le(mr,{children:"A ceiling, not a width — a short dialog stays narrow."})})}),fullScreen:()=>le(OB,{values:[!1,!0],defaultValue:!1,label:e=>e?"true":"false",render:(e,a)=>le(vS,{open:!0,onClose:a,fullScreen:e,title:"Edit tokens",actions:le(Yg,{onClick:a,children:"Close"}),children:le(mr,{children:"Full screen is for a dialog carrying a whole task on a small screen."})})}),alert:()=>le(OB,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — role=alertdialog":"false — role=dialog",render:(e,a)=>le(vS,{open:!0,onClose:a,alert:e,title:"Delete project?",actions:se(ce,{children:[le(Yg,{variant:"outline",onClick:a,children:"Cancel"}),le(Yg,{variant:"error",onClick:a,children:"Delete"})]}),children:le(mr,{children:"Every file in it goes too. This cannot be undone."})})}),nonModal:()=>le(OB,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — the page stays usable":"false — modal",render:(e,a)=>le(vS,{open:!0,onClose:a,nonModal:e,title:"Find in page",actions:le(Yg,{onClick:a,children:"Close"}),children:le(mr,{children:e?"The page behind this is still interactive.":"The page behind this is blocked."})})})},Drawer:{open:()=>le(OB,{values:[!0],label:()=>"Open drawer",render:(e,a)=>le(fz,{open:!0,onClose:a,children:se(zy,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(_t,{children:"Filters"}),le(YS,{items:uB,clickable:!0}),le(Yg,{onClick:a,children:"Close"})]})})}),anchor:()=>le(OB,{values:["left","right","top","bottom"],defaultValue:"left",render:(e,a)=>le(fz,{open:!0,onClose:a,anchor:e,children:se(zy,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[se(_t,{children:["anchor=",e]}),le(Yg,{onClick:a,children:"Close"})]})})}),size:()=>le(OB,{values:Hy,defaultValue:"medium",render:(e,a)=>le(fz,{open:!0,onClose:a,size:e,children:se(zy,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)"},children:[se(_t,{children:["size=",e]}),le(Yg,{onClick:a,children:"Close"})]})})}),hideBackdrop:()=>le(OB,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — no scrim":"false — scrim",render:(e,a)=>le(fz,{open:!0,onClose:a,hideBackdrop:e,children:se(zy,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(_t,{children:"Filters"}),le(Yg,{onClick:a,children:"Close"})]})})})},Snackbar:{open:()=>le(OB,{values:[!0],label:()=>"Show snackbar",render:(e,a)=>le(Ek,{open:!0,onClose:a,color:"success",autoHideDuration:4e3,children:"Project saved."})}),color:()=>le(OB,{values:["info","success","warning","error"],defaultValue:"info",render:(e,a)=>se(Ek,{open:!0,onClose:a,color:e,autoHideDuration:4e3,children:[e," — something happened."]})}),anchor:()=>le(OB,{values:["bottom","top"],defaultValue:"bottom",render:(e,a)=>se(Ek,{open:!0,onClose:a,anchor:e,color:"info",autoHideDuration:4e3,children:["anchor=",e]})})},Tooltip:{placement:()=>le(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:["bottom","top","left","right"].map(e=>le(Oy,{label:e,emphasis:"bottom"===e,children:le(DC,{title:"placement="+e,placement:e,children:le(Yg,{variant:"outline",size:"small",children:e})})},e))}),arrow:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Oy,{label:"true",emphasis:!0,children:le(DC,{title:"With an arrow",children:le(Yg,{variant:"outline",size:"small",children:"arrow"})})}),le(Oy,{label:"false",children:le(DC,{title:"No arrow",arrow:!1,children:le(Yg,{variant:"outline",size:"small",children:"no arrow"})})})]}),describeChild:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Oy,{label:"false — the tooltip is the name",emphasis:!0,children:le(DC,{title:"Delete item",children:le(Yg,{variant:"outline",size:"small",iconOnly:!0,"aria-label":"Delete item",children:"x"})})}),le(Oy,{label:"true — the tooltip describes it",children:le(DC,{title:"Removes it permanently",describeChild:!0,children:le(Yg,{variant:"outline",size:"small",children:"Delete"})})})]})},Popover:{open:()=>le(EB,{})}},{ButtonGroup:{separated:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"true — the default, and what Figma draws"}),le(QB,{})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"false — joins them, and warns"}),le(QB,{separated:!1})]}),le(mr,{color:"quiet",children:"A joined row of actions looks like a control with nothing selected. If the segments are a choice rather than three things to do, that is ToggleButtonGroup."})]}),fit:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:VB},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"hug — each button sizes to its label"}),le("div",{style:{width:VB,border:"1px dashed var(--Border-Variant)",padding:4},children:le(QB,{labels:["S","Medium","Extra large"]})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"fill — the group fills, buttons share it equally"}),le("div",{style:{width:VB,border:"1px dashed var(--Border-Variant)",padding:4},children:le(QB,{labels:["S","Medium","Extra large"],fit:"fill"})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"equal — hugs, but every button matches the widest (code only)"}),le("div",{style:{width:VB,border:"1px dashed var(--Border-Variant)",padding:4},children:le(QB,{labels:["S","Medium","Extra large"],fit:"equal"})})]})]}),orientation:()=>se(yy,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Oy,{label:"horizontal",emphasis:!0,children:le(QB,{})}),le(Oy,{label:"vertical",children:le(QB,{orientation:"vertical"})})]}),size:()=>le(zy,{gap:"var(--Sizing-3)",children:Hy.map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"medium"===e?"standard":"quiet",children:e}),le(QB,{size:e})]},e))}),variant:()=>se(zy,{gap:"var(--Sizing-3)",children:[["default","primary","secondary"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"default"===e?"standard":"quiet",children:`<Button variant="${e}">`}),le(QB,{variant:e})]},e)),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"outline, for a row of secondary actions"}),le(QB,{variant:"default-outline"})]})]}),disabled:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"enabled"}),le(QB,{})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"disabled — the whole group"}),le(QB,{disabled:!0})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"a single button takes its own `disabled`"}),se(oy,{"aria-label":"Actions",children:[le(Yg,{onClick:()=>{},children:"Save"}),le(Yg,{disabled:!0,onClick:()=>{},children:"Cancel"}),le(Yg,{onClick:()=>{},children:"Delete"})]})]})]}),"aria-label":()=>se(zy,{gap:"var(--Sizing-2)",children:[le(jB,{}),le(mr,{color:"quiet",children:'The group needs a name, and so does each icon-only button — naming the ACTION, not the glyph: "Align left", not "left".'})]})}},{ToggleButtonGroup:{allowEmpty:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — a toggle group. The last one stays on."}),le(GB,{allowEmpty:!1})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — clearable, with toggle styling"}),le(GB,{allowEmpty:!0})]}),le(mr,{color:"quiet",children:"The refused click fires no onChange — an unchanged array would make a controlled caller re-render for nothing and read as a bug in their own reducer."})]}),multiple:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — one answer, and it cannot be cleared"}),le(qB,{})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — any number, never none"}),le(GB,{allowEmpty:!1})]})]}),separated:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — joined (Figma: Style=Default)"}),le(qB,{})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — separated (Figma: Style=Separated)"}),le(qB,{separated:!0})]})]}),variant:()=>le(zy,{gap:"var(--Sizing-3)",children:["outlined","light","ghost"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"outlined"===e?"standard":"quiet",children:e}),le(qB,{variant:e,color:"primary"})]},e))}),color:()=>le(zy,{gap:"var(--Sizing-2)",children:["default",...Py].map(e=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le("div",{style:{width:84},children:le(zr,{color:"default"===e?"standard":"quiet",children:e})}),le(qB,{color:e})]},e))}),size:()=>le(zy,{gap:"var(--Sizing-3)",children:Hy.map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"medium"===e?"standard":"quiet",children:e}),le(qB,{size:e})]},e))}),fit:()=>le(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:VB},children:["hug","fill","equal"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"hug"===e?"standard":"quiet",children:e}),le("div",{style:{width:VB,border:"1px dashed var(--Border-Variant)",padding:4},children:le(qB,{options:["S","Medium","Extra large"],initial:"S",fit:e})})]},e))}),orientation:()=>se(yy,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Oy,{label:"horizontal",emphasis:!0,children:le(qB,{})}),le(Oy,{label:"vertical",children:le(qB,{orientation:"vertical"})})]}),"value / defaultValue":()=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"each child needs a `value`; the group matches against it"}),le(qB,{})]}),onChange:()=>se(zy,{gap:"var(--Sizing-2)",children:[le(qB,{}),le(mr,{color:"quiet",children:"Called (value, event) — the system`s order. A caller signalling MUI`s older API, with `exclusive` or a color in `variant`, still gets (event, value)."})]}),disabled:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"enabled"}),le(qB,{})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"disabled — the whole group"}),le(qB,{disabled:!0})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"one choice unavailable"}),le(UB,{})]})]})}}].reduce(function(e,a){for(const[t,r]of Object.entries(a))e[t]={...e[t]||{},...r};return e},ZB);const KB={Fab:{title:"Changing a FAB’s color",after:"color",node:"Theme-Container",collection:"Theme",body:"The FAB’s fill is pinned to Buttons/Default/Button, so the Buttons mode is not the axis — setting it on the frame does nothing. Color comes from the Theme mode on an inner frame called Theme-Container, which changes what Buttons/Default/* resolves to. Select Theme-Container, not the instance.",shot:"The right-hand panel with Theme-Container selected, cropped to the Theme dropdown open on its nine modes.",caveat:"Theme has nine modes and the `color` prop has ten: black-white exists in code only, so a FAB built in Figma cannot be that color."},Button:{title:"Changing a Button’s color",after:"variantColor",node:"Theme-Button-Fill",collection:"Buttons",body:"Fill and border are bound to Buttons::Button and Buttons::Border, so the color is the Buttons mode — all ten of them, and the names match the `variant` values exactly. Set it on Button-Container, not on Theme-Button-Fill.",shot:"The right-hand panel with Button-Container selected, cropped to the Buttons dropdown open on its ten modes.",caveat:"Theme-Button-Fill is a SIBLING of Button-Contents, not its parent, so a mode set there reaches the fill and border and never reaches the label — Buttons::Text resolves from the ancestor instead, and the button changes color while its text does not. Setting the mode on Button-Container, which is above both, is the working route until the layer is reparented."}},_B=e=>KB[e]||null,eM=/\.(mp4|mov|webm)$/i;function aM({src:e,title:a,shows:t,aspect:r="4 / 3",maxWidth:i=560}){const n={width:"100%",maxWidth:i,display:"block",borderRadius:"var(--Card-Radius, var(--Style-Border-Radius))",border:"1px solid var(--Border-Variant)"};return e&&eM.test(e)?le(h,{component:"video",src:e,controls:!0,preload:"metadata",playsInline:!0,sx:n}):le(h,e?{component:"img",src:e,alt:a||"",loading:"lazy",sx:n}:{"data-surface":"Container",sx:{width:"100%",maxWidth:i,aspectRatio:r,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--Background)",color:"var(--Text)",borderRadius:"var(--Card-Radius, var(--Style-Border-Radius))",border:"2px dashed var(--Border-Variant)",p:3,textAlign:"center"},children:se(zy,{gap:"var(--Sizing-1)",style:{alignItems:"center",maxWidth:440},children:[le(Ar,{children:"Screenshot to capture"}),le(dr,{children:a}),t&&le(zr,{color:"quiet",children:t})]})})}const tM="https://omni-design.netlify.app";function rM(e){return e.trim().replace(/\s+/g,"-")}function iM(e,a,t=tM){return`${t.replace(/\/+$/,"")}/docs/${encodeURIComponent(e)}/${rM(a)}`}function nM(e,a=tM){return`${a.replace(/\/+$/,"")}/docs/${encodeURIComponent(e)}`}const oM="https://github.com/lwnoble/DinoDesign/issues/new";function lM(e){const a=rM(String(e||"")).toLowerCase();return mg.find(e=>rM(e.name).toLowerCase()===a)||null}const cM=({component:e,what:a})=>le(h,{sx:{p:3},children:se(mr,{color:"quiet",children:["No ",a," written for ",e," yet."]})}),sM=({title:e,children:a})=>se(h,{sx:{pt:3,mt:3,borderTop:"1px solid var(--Border-Variant)","&:first-of-type":{borderTop:"none",pt:0,mt:0}},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:e.toUpperCase()}),a]}),dM=({items:e})=>le(m,{spacing:0,children:e.map((e,a)=>se(h,{sx:{py:.75},children:[le(dr,{children:e.head}),e.sub?le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:e.sub}):null]},a))}),uM=["variant","style","shape","type","contentType","size","color","variantColor","selected","checked","open","loading","disabled","elevated","label","children","icon","iconOnly","letterNumber","avatar","startDecorator","endDecorator","fullWidth","fit","orientation","placement"],hM=e=>e.sample||e.name,mM=e=>{const a=uM.indexOf(hM(e));return-1===a?uM.length:a},pM=e=>e.map((e,a)=>({pr:e,i:a})).sort((e,a)=>mM(e.pr)-mM(a.pr)||e.i-a.i).map(({pr:e})=>e);function fM({component:e,theme:a=null,surface:t="Surface"}){const r=lM(e);if(!r)return le(cM,{component:e,what:"reference"});const i=JB(r.name)?YB[r.name]:null,n=_B(r.name);return le(h,{sx:{p:3},children:se(m,{spacing:3,children:[i?le(uv,{theme:a,surface:t,minHeight:120,children:le(h,{sx:{width:"100%",p:3,display:"flex",justifyContent:"center"},children:le(h,{sx:{width:"100%",maxWidth:420,textAlign:"center"},children:i({theme:a,surface:t})})})}):null,le(mr,{children:r.summary}),r.links&&r.links.length?le(h,{sx:{display:"flex",gap:"var(--Sizing-3)",flexWrap:"wrap"},children:r.links.map((e,a)=>le(ti,{href:e.href,target:"_blank",rel:"noopener noreferrer",children:e.label},a))}):null,r.insteadUse.length>0&&le(sM,{title:"Reach for something else when",children:le(dM,{items:r.insteadUse.map(e=>({head:e.when,sub:`Use ${e.use}`}))})}),r.props.length>0&&le(sM,{title:"Props",children:le(m,{spacing:0,children:pM(r.props).map((e,i)=>{const o=hM(e),l=function(e,a){return Boolean($B[e]&&$B[e][a])}(r.name,o)?$B[r.name][o]:null,c=n&&n.after===o?n:null,s=[e.values&&e.values.length?e.values.join(" | "):null,e.default?`default: ${e.default}`:null,e.note].filter(Boolean).join(" · ");return se(h,{sx:{py:1},children:[se(dr,{children:[e.label||e.name," — ",e.type]}),s?le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:s}):null,l?le(h,{sx:{mt:1.5},children:le(uv,{theme:a,surface:t,minHeight:0,children:le(h,{sx:{p:2},children:l({theme:a,surface:t})})})}):null,c?le(h,{sx:{mt:2},children:se(m,{spacing:1.5,children:[le(Ar,{children:c.title}),le(dr,{children:c.body}),le(aM,{title:c.shot}),c.caveat?le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:c.caveat}):null]})}):null]},i)})})}),r.states.length>0&&le(sM,{title:"States",children:le(dM,{items:r.states.map(e=>({head:e.state,sub:[`set by ${e.setBy}`,e.note].filter(Boolean).join(" · ")}))})}),r.theming.length>0&&se(sM,{title:"Theming",children:[le(dM,{items:r.theming.map(e=>({head:e.collection,sub:`In code: ${e.inCode}\nIn Figma: ${e.inFigma}`}))}),(r.themingNotes||[]).map((e,a)=>le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:e},a))]}),r.tokens.length>0&&le(sM,{title:"Tokens",children:le(dM,{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&&le(sM,{title:"Composition",children:le(dM,{items:r.composition.map(e=>({head:e}))})}),r.gotchas.length>0&&le(sM,{title:"Gotchas",children:le(dM,{items:r.gotchas.map(e=>({head:e}))})})]})})}function gM({component:e}){const a=lM(e),t=a&&a.changes||[],r=encodeURIComponent(`[${e}] `);return le(h,{sx:{p:3},children:se(m,{spacing:3,children:[0===t.length?se(mr,{color:"quiet",children:["No breaking changes recorded for ",e,". Only changes that break, or that silently change meaning, are listed here — not every fix."]}):le(m,{spacing:0,children:t.map((e,a)=>se(h,{sx:{py:1},children:[se(m,{direction:"row",spacing:1,useFlexGap:!0,sx:{alignItems:"center",flexWrap:"wrap"},children:[le(dr,{style:{fontWeight:700},children:e.version}),e.silent?le(zr,{style:{color:"var(--Text-Warning)",fontWeight:600},children:"SILENT — old code still renders"}):null]}),le(mr,{children:e.change}),e.migrate?se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Instead: ",e.migrate]}):null]},a))}),se(h,{children:[le(ar,{children:"Something wrong or missing?"}),le(dr,{color:"quiet",children:"Report it against this component and it arrives with the name already filled in."}),le(h,{sx:{mt:1},children:se(ti,{href:`${oM}?title=${r}`,target:"_blank",rel:"noreferrer",children:["Report an issue with ",e]})})]})]})})}const bM="Qv2dqF7mYoAGY77EkdrwTv",vM="Omni-Designs-Aug12",xM={Typography:"2892:1220",Accordion:"3156:824",Alert:"8832:27566",AppBar:"7446:33121",Avatar:"3156:2682",Badge:"3156:4764",Box:"3156:5155",Breadcrumbs:"3156:5265",Button:"3492:3526",ButtonGroup:"9350:37170",ToggleButtonGroup:"6583:12058",Card:"7442:31014",Checkbox:"6729:509",Chip:"8927:14974",CodeBlock:"9150:18202",Dialog:"8122:6767",Divider:"6847:26729",Drawer:"6896:32544",Fab:"6778:14825",Icon:"5669:4784",IconBadge:"9189:26750",Input:"8574:17760",Link:"3156:5445",List:"6875:28869",Loader:"5859:1529",Menu:"9112:17981",Modal:"8117:6603",NumberField:"6850:28494",Pagination:"8379:6689",Radio:"6778:13564",Rail:"8224:2635",Ratio:"6241:11973",Rating:"6780:12084",SearchField:"8574:17760",Select:"8493:14435",Sheet:"8326:2799",Slider:"6791:13099",Snackbar:"8836:28082",Stepper:"8379:13798",SwitchInput:"3503:3820",Table:"8379:11736",Tabs:"8212:9163",Tag:"7442:32013",TextField:"8574:17760",Toolbar:"7446:33121",Tooltip:"8829:25532",TreeView:"6896:32593",BottomNavigation:"7446:33043"};function yM({title:e,component:a}){const t=a?function(e){const a=xM[e];return a?`https://www.figma.com/design/${bM}/${vM}?node-id=${a.replace(":","-")}`:null}(a):null;return se(h,{sx:{display:"flex",alignItems:"baseline",gap:2,flexWrap:"nowrap"},children:[le(h,{sx:{flex:"0 1 auto",minWidth:0},children:le(_t,{children:e})}),t&&se(ti,{href:t,target:"_blank",rel:"noopener noreferrer",sx:{ml:"auto",display:"inline-flex",alignItems:"center",gap:.75,flexShrink:0,whiteSpace:"nowrap"},children:[le(wf,{name:"figma"}),"Open in Figma"]})]})}const zM=[{title:"Platforms, not breakpoints",lede:"There are no media queries in this system. Not one.",body:["Responsive behaviour comes from a `data-device` 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-device="Desktop"]`',"desktop, and the default"],['`[data-device="IOS-Mobile"]`',"iPhone"],['`[data-device="IOS-Tablet"]`',"iPad, both orientations"],['`[data-device="Android-Tablet"]`',"Android tablet, both orientations"],['`[data-device="Android-Mobile"]`',"Android phone"]]},body2:[],trap:"The attribute was `data-platform` until the device modes were split; a system generated before that still selects on the old name, so the library sets BOTH until every system in Storage has been regenerated. 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:"Sizing",lede:"One scale, in 8px steps with two fractions below it. The tokens are --Sizing-*.",body:["There are NEGATIVES, four of them, mirroring the fractions and the first step. They exist for pulling something back over its neighbour — an overlap, a bevel's inward spread, cancelling a gap a parent already added. A negative margin written as a literal is the thing that stops tracking the scale when a brand changes it.","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-2-and-Half`","20","between 2 and 3 where 8px is too coarse"],["`--Sizing-3`","24","**the minimum touch target** (WCAG 2.5.8)"],["`--Sizing-4` … `--Sizing-16`","32 … 128","section and layout spacing"],["`--Sizing-20` · `--Sizing-30`","160 · 240","the large end — panel and column widths"],["`--Sizing-Negative-Quarter`","-2","pulling a hairline back over its neighbour"],["`--Sizing-Negative-Half`","-4","overlap, and a bevel's inward spread"],["`--Sizing-Negative-1`","-8","cancelling one step of gap"],["`--Sizing-Negative-1-and-Half`","-12","cancelling a row's internal gap"]]},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:"Component size",lede:"A third axis: small, medium and large, scaling a component's own internals.",body:["This is NOT the platform and NOT the spacing scale. The platform decides what a device needs — a 44px iOS target against a 48px Android one. The sizing scale is fixed pixels for gaps and padding. Component size is the `size` prop: the same component, asked to be bigger or smaller, with every internal measurement moving together.",'Figma holds it as the Component-Size collection, 154 variables across three modes. One `size="small"` moves the height, the radius, the icon, the gap, the padding, the focus ring and the type at once — which is why a component should take the prop rather than have its parts set individually.',"The three modes are not a simple multiplier. `Button-Padding` is 8 at small AND medium and 16 at large; `Checkbox-Gap` is 4 / 8 / 12; `Tooltip-Radius` is 8 at every size. Each value was chosen, so reading one off and scaling it produces numbers the system does not contain."],table:{head:["Variable","small","medium","large"],rows:[["`Button-Height`","24","32","56"],["`Button-Icon-Only`","16","24","40"],["`Input-Height`","32","40","48"],["`Checkbox-Width`","16","20","24"],["`Radio` · `Dot`","16 · 8","20 · 10","24 · 12"],["`Switch-Width` · `Height`","35 · 20","42 · 24","56 · 32"],["`FAB-Width` · `Icon`","32 · 16","48 · 24","56 · 32"],["`Card-Radius` · `Padding`","14 · 12","18 · 16","23 · 20"],["`Menu-Swatch`","16","24","32"]]},trap:"Do not set a component's parts to hit a size. Passing `size` moves all of them together and keeps the focus ring, the touch target and the type in step; setting a height by hand moves one and silently breaks the other three."},{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 colored 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 colors 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:"Theming a component",lede:"A theme is a variable mode on ONE layer, and that layer is named `Theme-*`.",body:["It is not a property of the component. A card themed Secondary has a `Theme-Container` frame inside it holding the Secondary mode, and everything under that frame inherits. Changing the card means changing the mode on that frame — not on the card, and not on the layers inside it.","When a component has no `Theme-*` child, the mode belongs on the instance itself. Those are the only two places it is allowed. A mode anywhere else stops that layer following the theme, which is invisible until the day the theme changes and one layer does not move.","Theme and Surface are separate axes. Theme picks the palette; Surface picks the level within it — so a Primary card and a Primary card at `Surface-Dimmest` are the same palette at two tones. Buttons and Icons are their own collections, with one mode per palette, and they are meant to move WITH the theme rather than be set separately.","Never set a mode on a main component. It edits the library: every instance that has not overridden it moves, in every file that has the component, and nobody whose file changed will know why. Place an instance and theme that."],table:{head:["Where the mode goes","When"],rows:[["the outermost `Theme-*` frame","whenever the component has one"],["the selected instance","only when it has no `Theme-*` child"],["a `Theme-Button` frame","buttons — it carries the Buttons palette and nothing else"],["anywhere else","**never** — it is drift, and it will go stale silently"]]},trap:"Setting the mode on the instance when a `Theme-*` child exists appears to do nothing: the child keeps its own value and wins. Both are now set, they drift apart, and the component looks correct until somebody re-themes it. The Omni Design plugin and the Omni Theme widget find the right layer for you, move Buttons and Icons with it, and name any mode sitting where it should not be."},{title:"Static colors",lede:"The raw tone ramp. For graphics and SVGs — never for a background or a component.",body:["Every palette publishes twelve numbered tones, `--Primary-Color-1` through `--Primary-Color-12`, nine palettes deep. They are STATIC: a tone is the same color whatever surface it sits on and whichever mode is active. That is what makes them useful for illustration, and what makes them wrong for anything else.","A background, a border or a component color must follow the cascade — `--Background`, `--Text`, `--Border`, `--Buttons-*` all resolve differently per surface and per mode, and they carry contrast guarantees that were measured. A numbered tone carries none: it is a color, not a role, and nothing checks what sits on it.","Reach for them when you are drawing — an SVG illustration, a chart series, a decorative shape — where there is no text to contrast against and no surface to follow. Everywhere else, name the role."],trap:"This is not theoretical. The Footer painted `background: var(--Primary-Color-2)` with the Copyright strip on `--Primary-Color-1`, a pair chosen to look one step apart. It worked, which is why it survived — and it left --Quiet, --Border, --Hotlink and every button override resolving against the PARENT surface while the box was painted from somewhere else. Both now declare a theme and a surface, which is what makes the rest of the set follow."},{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 color. 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 SM(){const e=["# Foundations",""];for(const a of zM)e.push(`## ${a.title}`,"",`*${a.lede}*`,""),e.push(...a.body.map(e=>e+"\n")),a.table&&(e.push(`| ${a.table.head.join(" | ")} |`),e.push(`| ${a.table.head.map(()=>"---").join(" | ")} |`),e.push(...a.table.rows.map(e=>`| ${e.join(" | ")} |`)),e.push("")),a.trap&&e.push(`> **Trap.** ${a.trap}`,"");return e.join("\n").replace(/\n{3,}/g,"\n\n").trimEnd()+"\n"}const wM={"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 kM(){const e=({color:e})=>se(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(V,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",mb:.5,wordBreak:"break-word"},children:e.name}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",fontSize:"10px",fontFamily:"monospace",wordBreak:"break-all"},children:e.var})]});return se(m,{spacing:6,children:[se(h,{children:[le(V,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Brand Colors (Static)"}),le(m,{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(a=>le(e,{color:a},a.var))})]}),se(h,{children:[le(V,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Background Colors (Dynamic)"}),le(V,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Update based on selected Background variant and Mode"}),le(y,{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(y,{item:!0,sx:{display:"flex",justifyContent:"center"},children:se(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(V,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",wordBreak:"break-word"},children:e.name})]})},e.name))})]}),se(h,{children:[le(V,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Dynamic Colors (Update with Mode, Background & Surface)"}),le(_,{severity:"info",sx:{backgroundColor:"var(--Container-Low)",mb:3,border:"1px solid var(--Border)"},children:se(V,{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(V,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"These colors automatically adapt based on:"}),se(m,{spacing:1,sx:{mb:4},children:[se(h,{sx:{display:"flex",gap:2},children:[le(V,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Mode:"}),le(V,{variant:"body2",children:"Light or Dark theme"})]}),se(h,{sx:{display:"flex",gap:2},children:[le(V,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Background:"}),le(V,{variant:"body2",children:"Default, Primary, Secondary, Tertiary, Neutral, or Neutral-Variant"})]}),se(h,{sx:{display:"flex",gap:2},children:[le(V,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Surface:"}),le(V,{variant:"body2",children:"Theme surface layer selection"})]})]}),le(m,{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(a=>se(h,{children:[le(V,{variant:"h6",sx:{mb:2,fontWeight:600},children:a.name}),le(y,{container:!0,spacing:2,sx:{justifyContent:"center"},children:a.colors.map(a=>le(y,{item:!0,sx:{display:"flex",justifyContent:"center"},children:le(e,{color:a})},a.var))})]},a.name))})]}),se(h,{sx:{pt:4,borderTop:"1px solid var(--Border)"},children:[le(V,{variant:"h5",sx:{mb:2,fontWeight:700},children:"How to Use"}),se(m,{spacing:2,children:[se(h,{children:[le(V,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Static Colors"}),se(V,{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."]})]}),se(h,{children:[le(V,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Dynamic Colors"}),le(V,{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."})]}),se(h,{children:[le(V,{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 CM(){const e=({name:e,varName:a,baseValue:t})=>le(h,{sx:{mb:2},children:se(h,{sx:{display:"flex",alignItems:"center",gap:2,mb:1},children:[le(h,{"aria-hidden":"true",sx:{width:`var(${a})`,minWidth:20,height:24,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:.5,border:"1px solid var(--Border)"}}),se(m,{spacing:.5,children:[le(V,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:a}),se(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Base: ",t," (with cognitive multiplier)"]})]})]})}),a=({name:e,varName:a,value:t})=>se(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(V,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:a}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:t})]});return se(m,{spacing:3,sx:{p:2},children:[se("section",{children:[le(V,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Spacing Scale"}),le(V,{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(m,{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(a=>le(e,{name:a.name,varName:a.var,baseValue:a.baseValue},a.var))})]}),se("section",{children:[le(V,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Sizing Scale"}),le(V,{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(y,{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(y,{item:!0,xs:12,sm:6,md:4,lg:3,children:le(a,{name:e.name,varName:e.var,value:e.value})},e.var))})]}),se("section",{children:[le(V,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Negative Sizing"}),le(V,{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(y,{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(y,{item:!0,xs:12,sm:6,md:4,lg:3,children:se(h,{children:[le(V,{variant:"subtitle2",sx:{fontWeight:600},children:e.name}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:e.var}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:e.value})]})},e.var))})]}),se("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(V,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Container Padding"}),se(h,{sx:{p:"var(--Spacing-3)",backgroundColor:"var(--Container-Low)",border:"2px dashed var(--Buttons-Primary-Button)",borderRadius:1},children:[se(V,{variant:"body2",children:["Default container padding: ",le("strong",{children:"var(--Spacing-3)"})," = 24px"]}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",mt:1},children:"Use this variable for consistent padding around main content areas."})]})]}),se("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(V,{variant:"h5",component:"h2",sx:{mb:3,fontWeight:700},children:"Practical Examples"}),se("article",{children:[le(V,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Padding Examples"}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",mb:2,display:"block"},children:"Different padding values create different visual breathing room."}),le(y,{container:!0,spacing:2,sx:{mb:4},children:["var(--Spacing-1)","var(--Spacing-2)","var(--Spacing-3)","var(--Spacing-4)"].map(e=>le(y,{item:!0,xs:12,sm:6,children:se(h,{sx:{p:e,backgroundColor:"var(--Container)",border:"1px solid var(--Border)",borderRadius:1},children:[se(V,{variant:"subtitle2",children:["Padding: ",e]}),le(V,{variant:"caption",sx:{display:"block",mt:1,color:"var(--Text-Secondary)"},children:"Content with spacing applied"})]})},e))})]}),se("article",{children:[le(V,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Gap Examples"}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",mb:2,display:"block"},children:"Gap controls spacing between flex/grid children without adding extra elements."}),le(m,{spacing:3,children:["var(--Spacing-1)","var(--Spacing-2)","var(--Spacing-3)"].map(e=>se(h,{children:[le(m,{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))}),se(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Gap: ",e]})]},e))})]})]}),se(h,{role:"note",sx:{p:2,backgroundColor:"var(--Container-Low)",borderRadius:1,borderLeft:"4px solid var(--Buttons-Primary-Button)",mt:3},children:[le(V,{variant:"subtitle2",sx:{fontWeight:600,mb:1},children:"✓ Accessibility Best Practices Used"}),se("ul",{style:{margin:"0.5rem 0",paddingLeft:"1.5rem"},children:[le("li",{children:se(V,{variant:"caption",children:[le("strong",{children:'aria-hidden="true"'})," on purely decorative visual elements"]})}),le("li",{children:le(V,{variant:"caption",children:"All spacing information conveyed through text labels and values"})}),le("li",{children:se(V,{variant:"caption",children:["No empty decorative ",le("code",{children:"<div>"})," elements in DOM"]})}),le("li",{children:se(V,{variant:"caption",children:["Semantic HTML: ",le("code",{children:"<section>"})," and ",le("code",{children:"<article>"})," for structure"]})}),le("li",{children:le(V,{variant:"caption",children:"CSS-based spacing (padding/margin) for actual layout, not decorative divs"})}),le("li",{children:le(V,{variant:"caption",children:"Full keyboard navigation and screen reader support"})})]})]})]})}function BM({color:e,className:a="",sx:t={},...r}){return le(h,{className:`mini-swatch ${a}`.trim(),"aria-hidden":"true",sx:{width:"var(--Menu-Swatch, 24px)",height:"var(--Menu-Swatch, 24px)",flexShrink:0,borderRadius:"var(--Sizing-Half, 4px)",backgroundColor:e,...t},...r})}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,a])=>({label:e,options:a.map(e=>({value:e,label:wM[e]}))}));const MM=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",TM=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary"]},{label:"State",colors:["info","success","warning","error"]}],AM=[Te,ct,we,Ne,st,dt];function LM(){const[e,t]=a("Default"),[r,i]=a("Surface"),[n,o]=a("primary"),[l,c]=a("solid"),[s,d]=a("medium"),u=AM[0];return se(zy,{spacing:4,style:{paddingBottom:64},children:[le(yM,{title:"Icon Badge",component:"IconBadge"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:t,surface:r,onSurfaceChange:i})}),se("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24},children:[le(zv,{padding:"medium",children:se(zy,{spacing:4,alignItems:"center",children:[le("div",{style:{padding:40},children:le(QS,{color:n,variant:l,size:s,children:le(u,{})})}),le(yy,{spacing:4,alignItems:"flex-end",children:["small","medium","large"].map(e=>se(zy,{spacing:1,alignItems:"center",children:[le(QS,{color:n,variant:l,size:e,children:le(u,{})}),le(dr,{style:{color:"var(--Quiet)"},children:MM(e)})]},e))}),se(zy,{spacing:1,alignItems:"center",children:[le(dr,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"Variants"}),le(yy,{spacing:3,children:["solid","light","dark"].map(e=>se(zy,{spacing:1,alignItems:"center",children:[le(QS,{color:n,variant:e,size:"medium",children:le(u,{})}),le(dr,{style:{color:"var(--Quiet)",fontSize:"0.65rem"},children:MM(e)})]},e))})]}),se(zy,{spacing:1,alignItems:"center",children:[le(dr,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"All Colors"}),le(yy,{spacing:2,style:{flexWrap:"wrap",justifyContent:"center"},children:TM.flatMap(e=>e.colors).map(e=>se(zy,{spacing:0,alignItems:"center",children:[le(QS,{color:e,variant:l,size:"small",children:le(u,{})}),le(dr,{style:{color:"var(--Quiet)",fontSize:"0.55rem"},children:MM(e)})]},e))})]})]})}),le(zv,{padding:"medium",children:se(zy,{spacing:4,children:[le(_t,{style:{fontSize:"1rem"},children:"Playground"}),se(zy,{spacing:2,children:[le(Cr,{children:"Color"}),TM.map(e=>se(zy,{spacing:1,children:[le(dr,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:e.label}),le(yy,{spacing:1,children:e.colors.map(e=>le(Yg,{variant:n===e?"default":"outline",size:"small",onClick:()=>o(e),children:MM(e)},e))})]},e.label))]}),se(zy,{spacing:1,children:[le(Cr,{children:"Variant"}),le(oy,{size:"small",children:["solid","light","dark"].map(e=>le(Yg,{variant:l===e?"default":"outline",size:"small",onClick:()=>c(e),children:MM(e)},e))})]}),se(zy,{spacing:1,children:[le(Cr,{children:"Size"}),le(oy,{size:"small",children:["small","medium","large"].map(e=>le(Yg,{variant:s===e?"default":"outline",size:"small",onClick:()=>d(e),children:MM(e)},e))})]}),se(zy,{spacing:0,children:[se(dr,{style:{color:"var(--Quiet)"},children:["data-theme: ",MM(n),"light"===l?"-Light":""]}),se(dr,{style:{color:"var(--Quiet)"},children:["data-surface: ","dark"===l?"Surface-Dimmest":"Surface"]}),le(dr,{style:{color:"var(--Quiet)"},children:"bg: var(--Background)"}),le(dr,{style:{color:"var(--Quiet)"},children:"icon: var(--Text)"})]})]})})]})]})}const IM={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 NM({value:e,defaultValue:n=0,onChange:o,min:l,max:c,step:s=1,variant:d="outlined",style:u="outline",color:m="default",size:p="medium",label:f,labelPosition:g="top",placeholder:b,helperText:v,disabled:x=!1,fullWidth:y=!1,className:z="",sx:S={},...w}){const[k,C]=a(n),[B,M]=a(!1),T=r(null),A=void 0!==e,L=A?e:k,I=""!==L&&null!=L,N=(W="default"===m?"primary":m).charAt(0).toUpperCase()+W.slice(1);var W;"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 D="default"===m?"var(--Border)":"var(--Buttons-"+N+"-Border)",R="default"===m?"var(--Text)":"var(--Text-"+N+")",F="outlined"===d,P="floating"===g,H="top"===g,O=IM[p]||IM.medium,E="small"===p?dr:mr,V=i(e=>{let a="number"==typeof e?e:parseFloat(e);isNaN(a)&&(a=0),void 0!==l&&a<l&&(a=l),void 0!==c&&a>c&&(a=c),A||C(a),o?.(a)},[A,o,l,c]),Q=r(L);Q.current=L;const j=i(e=>{if(x)return;const a="number"==typeof Q.current?Q.current:parseFloat(Q.current)||0;void 0!==l&&e<0&&a<=l||void 0!==c&&e>0&&a>=c||V(a+e*s)},[x,s,l,c,V]),q=void 0!==l&&L<=l,G=void 0!==c&&L>=c,U=r(null),X=r(null),Y=i(()=>{U.current&&(clearTimeout(U.current),U.current=null),X.current&&(clearInterval(X.current),X.current=null)},[]),J=i(e=>{x||(Y(),j(e),U.current=setTimeout(()=>{let a=120,t=0;const r=()=>{j(e),t+=1,10===t&&a>60?(clearInterval(X.current),a=60,X.current=setInterval(r,a)):30===t&&a>30&&(clearInterval(X.current),a=30,X.current=setInterval(r,a))};X.current=setInterval(r,a)},400))},[x,j,Y]);t(()=>Y,[Y]);const Z=r(!1),$=e=>({onPointerDown:a=>{if(void 0===a.button||0===a.button){a.preventDefault();try{a.currentTarget.setPointerCapture?.(a.pointerId)}catch(e){}Z.current=!0,J(e)}},onClick:()=>{Z.current?Z.current=!1:j(e)},onPointerUp:e=>{try{e.currentTarget.releasePointerCapture?.(e.pointerId)}catch(e){}Y()},onPointerCancel:Y,onPointerLeave:Y,onKeyDown:a=>{"Enter"!==a.key&&" "!==a.key||a.repeat||(a.preventDefault(),J(e))},onKeyUp:e=>{"Enter"!==e.key&&" "!==e.key||Y()},onBlur:Y}),K=e=>{const a=e.target.value;if(""===a||"-"===a)return void(A||C(a));const t=parseFloat(a);isNaN(t)||V(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"===m?"var(--Text)":"var(--Text-"+N+")",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"}},ae={},te=()=>H&&f?le(E,{component:"label",style:{display:"block",marginBottom:"6px",color:x?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:x?"var(--Disabled, 0.38)":1},children:f}):null;return se(h,F?{className:"numberfield numberfield-outlined"+(x?" numberfield-disabled":"")+(z?" "+z:""),sx:{width:y?"100%":"auto",fontFamily:"inherit",...S},...w,children:[te(),le(h,{sx:{border:"1px solid "+D,borderRadius:"small"===p?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===p?"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:le(h,{...ae,children:se(h,{sx:{position:"relative",display:"flex",alignItems:"stretch",minHeight:"max("+O.height+", calc(var(--Sizing-3, 24px) * 2 + 1px))",backgroundColor:"var(--Background)"},children:[P&&f&&le(h,{sx:{position:"absolute",top:I||B?"6px":"50%",left:O.padding.split(" ")[1]||"14px",transform:I||B?"none":"translateY(-50%)",transformOrigin:"top left",color:B?R:"var(--Quiet)",fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",...I||B?{fontSize:"var(--"+(vx[p]||vx.medium).shrunk+"-Font-Size)",fontWeight:"var(--"+(vx[p]||vx.medium).shrunk+"-Font-Weight)",letterSpacing:"var(--"+(vx[p]||vx.medium).shrunk+"-Letter-Spacing)"}:{fontSize:"var(--"+(vx[p]||vx.medium).resting+"-Font-Size)",fontWeight:"var(--"+(vx[p]||vx.medium).resting+"-Font-Weight)",letterSpacing:"var(--"+(vx[p]||vx.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:T,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof L?L:void 0,"aria-valuemin":l,"aria-valuemax":c,"aria-label":f||"Number",value:L,onChange:K,onKeyDown:_,onFocus:()=>M(!0),onBlur:()=>M(!1),disabled:x,placeholder:P?void 0:b||"",sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:I||B?R:"var(--Quiet)",fontSize:O.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)",padding:P?"22px 14px 6px":O.padding,minWidth:0,"&::placeholder":{color:"var(--Quiet)",opacity:1},"&:disabled":{cursor:"not-allowed"}}}),se(h,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"stretch",borderLeft:"1px solid "+D,flexShrink:0},children:[le(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:le(Bf,{size:"medium",children:le(ut,{})})}),le(h,{"aria-hidden":"true",sx:{height:"1px",backgroundColor:D,flexShrink:0}}),le(h,{component:"button",type:"button","aria-label":"Decrease",...$(-1),disabled:x||q,sx:{...ee,width:"var(--Sizing-4, 32px)",height:"var(--Sizing-3, 24px)"},children:le(Bf,{size:"medium",children:le(ht,{})})})]})]})})}),v&&le(dr,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:v})]}:{className:"numberfield numberfield-spinner"+(x?" numberfield-disabled":"")+(z?" "+z:""),sx:{fontFamily:"inherit",...S},...w,children:[te(),se(h,{sx:{display:"inline-flex",alignItems:"center",gap:"small"===p?.5:1,opacity:x?"var(--Disabled, 0.38)":1},children:[le(h,{component:"button",type:"button","aria-label":"Decrease",...$(-1),disabled:x||q,sx:{...ee,width:O.btnSize,height:O.btnSize,borderRadius:"small"===p?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"large"===p?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"var(--Button-Icon-Radius, var(--Style-Border-Radius))",border:"1px solid "+D},children:le(Bf,{size:"small",children:le(Be,{})})}),le(h,{sx:{border:"1px solid "+D,borderRadius:"small"===p?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===p?"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,{...ae,children:le(h,{component:"input",ref:T,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof L?L:void 0,"aria-valuemin":l,"aria-valuemax":c,"aria-label":f||"Number",value:L,onChange:K,onKeyDown:_,onFocus:()=>M(!0),onBlur:()=>M(!1),disabled:x,sx:{width:"small"===p?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"}}})})}),le(h,{component:"button",type:"button","aria-label":"Increase",...$(1),disabled:x||G,sx:{...ee,width:O.btnSize,height:O.btnSize,borderRadius:"small"===p?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"large"===p?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"var(--Button-Icon-Radius, var(--Style-Border-Radius))",border:"1px solid "+D},children:le(Bf,{size:"small",children:le(Aa,{})})})]}),v&&le(dr,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:v})]})}const WM=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",DM=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function RM({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function FM({color:e,selected:a,onClick:t}){const r=WM(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function PM(){const[e,t]=a("outlined"),[r,i]=a("outline"),[n,o]=a("default"),[l,c]=a("medium"),[s,d]=a("top"),[u,p]=a(!0),[f,g]=a(!1),[b,v]=a(!1),[x,z]=a("Default"),[S,w]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Number Field",component:"NumberField"}),le(h,{sx:{mt:1},children:le(Xf,{theme:x,onThemeChange:z,surface:S,onSurfaceChange:w})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"NumberField",theme:x,surface:S})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:x,surface:S,children:le(h,{sx:{width:"100%",maxWidth:"outlined"===e?300:"auto"},children:le(NM,{variant:e,style:r,color:n,size:l,label:u?"Quantity":void 0,labelPosition:s,min:0,max:100,disabled:f,fullWidth:b&&"outlined"===e})})}),le(Yb,{code:(()=>{const a=['variant="'+e+'"'];return"outline"!==r&&a.push('style="'+r+'"'),"default"!==n&&a.push('color="'+n+'"'),"medium"!==l&&a.push('size="'+l+'"'),u&&a.push('label="Quantity"'),"top"!==s&&a.push('labelPosition="'+s+'"'),a.push("min={0}"),a.push("max={100}"),f&&a.push("disabled"),b&&"outlined"===e&&a.push("fullWidth"),a.push("value={value}"),a.push("onChange={setValue}"),"<NumberField\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(m,{direction:"row",spacing:1,children:["outlined","spinner"].map(a=>le(RM,{label:WM(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(e=>le(RM,{label:WM(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:DM.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(FM,{color:e,selected:n===e,onClick:o},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(RM,{label:WM(e),selected:l===e,onClick:()=>c(e)},e))})]}),"outlined"===e&&se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(RM,{label:"none"===e?"None":WM(e),selected:s===e,onClick:()=>d(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Label"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Text label above field"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show label"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{variant:"default-outline",checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),"outlined"===e&&se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Full Width"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container"})]}),le(sv,{variant:"default-outline",checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"NumberField"})})]})]})}const HM={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 OM({children:e,selected:a=!1,onChange:t,value:r,sx:i={},...n}){return le(ee,{value:r,selected:a,onChange:t,sx:{border:"1px solid var(--Border)",...HM,...i},...n,children:e})}const EM=["Surface","Surface-Dim","Surface-Bright","Container","Container-Low","Container-Lowest","Container-High"],VM=["Default","Primary","Primary","Secondary","Secondary","Tertiary","Tertiary","Neutral","Neutral","Info","Success","Warning","Error"];function QM({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function jM(){const[e,t]=a(""),[r,i]=a(""),[n,o]=a("Default"),[l,c]=a("Surface");return se(pk,{sx:{pb:8},children:[le(yM,{title:"Box",component:"Box"}),le(pk,{sx:{mt:1},children:le(Xf,{theme:n,onThemeChange:o,surface:l,onSurfaceChange:c})}),se(mr,{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."]}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"When to use"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Box",theme:n,surface:l})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:n,surface:l,children:le(pk,{sx:{width:"100%",maxWidth:400},children:le(pk,{theme:e||void 0,surface:r||void 0,children:se(pk,{sx:{padding:3,backgroundColor:"var(--Background)",color:"var(--Text)",borderRadius:"var(--Style-Border-Radius)",border:"1px dashed var(--Border-Variant)"},children:[le(ar,{children:"Box content"}),le(mr,{style:{color:"var(--Text-Quiet)",marginTop:6},children:"Anything dropped inside resolves tokens against the Box's theme / surface, if you set them."})]})})})}),le(Yb,{code:(()=>{const a=[];e&&a.push('theme="'+e+'"'),r&&a.push('surface="'+r+'"');return"<Box"+(a.length?" "+a.join(" "):"")+">\n {/* anything */}\n</Box>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(pk,{sx:{p:3},children:[le(pk,{sx:{mb:3}}),se(pk,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME (optional)"}),se(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(QM,{label:"None",selected:!e,onClick:()=>t("")}),VM.map(a=>le(QM,{label:a,selected:e===a,onClick:()=>t(a)},a))]})]}),se(pk,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE (optional)"}),se(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(QM,{label:"None",selected:!r,onClick:()=>i("")}),EM.map(e=>le(QM,{label:e,selected:r===e,onClick:()=>i(e)},e))]}),se(zr,{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(yb,{value:2,children:le(pk,{sx:{p:3},children:se(m,{spacing:2,children:[se(pk,{children:[le(dr,{style:{fontWeight:700},children:"Reach for Box when…"}),le(zr,{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."})]}),se(pk,{children:[le(dr,{style:{fontWeight:700},children:"Use Ratio when…"}),le(zr,{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."})]}),se(pk,{children:[le(dr,{style:{fontWeight:700},children:"Use Card when…"}),le(zr,{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."})]})]})})}),le(yb,{value:3,children:le(gM,{component:"Box"})})]})]})}function qM({children:e,maxWidth:a="lg",disableGutters:t=!1,sx:r={},...i}){return le(ae,{maxWidth:a,disableGutters:t,"data-surface":"Surface",sx:{backgroundColor:"var(--Background)",color:"var(--Text)",transition:"all 0.2s ease-in-out",...r},...i,children:e})}function GM({children:e,container:a=!1,item:t=!1,spacing:r=2,sx:i={},...n}){return le(y,{container:a,item:t,spacing:r,sx:{transition:"all 0.2s ease-in-out",...i},...n,children:e})}function UM({theme:e,surface:a="Surface",as:t="section",padding:r,className:i,style:n,children:o,...l}){return le(t,{...e?{"data-theme":e}:{},"data-surface":a,className:i,style:{background:"var(--Background)",color:"var(--Text)",...void 0!==r?{padding:r}:{},...n},...l,children:o})}function XM(){return se("div",{children:[le(_t,{style:{marginBottom:12},children:"Section"}),se(mr,{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(_t,{style:{marginTop:24,marginBottom:12},children:"Theme + surface"}),le(dr,{color:"quiet",style:{marginBottom:16,display:"block"},children:'Sets data-theme="Primary" + data-surface="Surface", paints --Background.'}),se(UM,{theme:"Primary",surface:"Surface",padding:"32px",style:{borderRadius:8},children:[le(yM,{title:"Primary-Light surface",component:"Section"}),le(mr,{children:"Body text picks up --Text automatically."}),le(dr,{color:"quiet",children:"Quiet text picks up --Text-Quiet."}),le("div",{style:{marginTop:12},children:le(Yg,{variant:"primary",children:"Primary button"})})]}),le(_t,{style:{marginTop:32,marginBottom:12},children:"Container surface"}),se(UM,{surface:"Container",padding:"32px",style:{borderRadius:8},children:[le(_t,{children:"Container surface (inherits theme)"}),le(mr,{children:"Useful for card-like regions."})]}),le(_t,{style:{marginTop:32,marginBottom:12},children:"Different element"}),se(dr,{color:"quiet",style:{marginBottom:16,display:"block"},children:["Pass ",le("code",{children:'as="article"'}),", ",le("code",{children:'as="footer"'}),", etc."]}),se(UM,{as:"article",theme:"Neutral",surface:"Surface-Dimmest",padding:"32px",style:{borderRadius:8},children:[le(_t,{children:"Neutral / Surface-Dimmest article"}),le(mr,{children:"Renders as an <article> element."})]})]})}function YM({actions:e=[],variant:n="solid",color:o="default",direction:l="up",speed:c=50,showTooltips:s=!0,open:d,onOpen:u,onClose:m,icon:p,ariaLabel:f="Speed Dial",className:g="",sx:b={},...v}){const[y,z]=a(!1),S=void 0!==d,w=S?d:y,k=r(null),C=n,B=i(()=>{w?(S||z(!1),m?.()):(S||z(!0),u?.())},[w,S,u,m]),M=i((e,a)=>{e.onClick?.(a),S||z(!1),m?.()},[S,m]);t(()=>{if(!w)return;const e=e=>{k.current&&!k.current.contains(e.target)&&(S||z(!1),m?.())};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[w,S,m]),t(()=>{if(!w)return;const e=e=>{"Escape"===e.key&&(S||z(!1),m?.())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[w,S,m]);const T="up"===l||"down"===l,A="up"===l||"down"===l?"left":"top";return se(h,{ref:k,className:"speed-dial speed-dial-"+n+" speed-dial-"+o+" speed-dial-"+l+" "+g,sx:{position:"relative",display:"inline-flex",overflow:"visible",width:T?"56px":"auto",height:T?"auto":"56px",...b},...v,children:[le(ax,{size:"large",variant:C,color:o,onClick:B,"aria-label":f,"aria-expanded":w,"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:w?"rotate(45deg)":"rotate(0deg)"},children:p||le(Aa,{})})}),le(h,{role:"menu",sx:{position:"absolute",inset:0,pointerEvents:"none",overflow:"visible"},children:e.map((e,a)=>{const t=(e=>{const a=56+44*e;switch(l){case"up":default:return{bottom:a+"px",left:"12px"};case"down":return{top:a+"px",left:"12px"};case"left":return{right:a+"px",top:"12px"};case"right":return{left:a+"px",top:"12px"}}})(a),r=a*c,i=le(ax,{size:"small",variant:C,color:o,role:"menuitem","aria-label":e.name||"Action "+(a+1),onClick:()=>M(e,a),sx:{position:"absolute",...t,opacity:w?1:0,transform:w?"scale(1)":"scale(0.3)",transition:"opacity 0.2s ease, transform 0.2s ease",transitionDelay:w?r+"ms":"0ms",pointerEvents:w?"auto":"none"},children:e.icon||le(Aa,{})},e.key||a);return s&&e.name?le(x,{title:e.name,placement:A,arrow:!0,open:!!w&&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||a):i})})]})}const JM=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",ZM=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],$M=[{name:"Edit",icon:le(Bf,{size:"small",sx:{color:"inherit"},children:le(La,{})})},{name:"Share",icon:le(Bf,{size:"small",sx:{color:"inherit"},children:le(mt,{})})},{name:"Delete",icon:le(Bf,{size:"small",sx:{color:"inherit"},children:le(Ae,{})})},{name:"Favorite",icon:le(Bf,{size:"small",sx:{color:"inherit"},children:le(Me,{})})}];function KM({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function _M({color:e,selected:a,onClick:t}){const r=JM(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function eT(){const[e,t]=a("solid"),[r,i]=a("default"),[n,o]=a("up"),[l,c]=a(!0),[s,d]=a("Default"),[u,p]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Speed Dial",component:"SpeedDial"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"SpeedDial",theme:s,surface:u})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,sx:{minHeight:300,alignItems:"flex-end",justifyContent:"center"},children:le(YM,{variant:e,color:r,direction:n,showTooltips:l,actions:$M,ariaLabel:"Quick actions"})}),le(Yb,{code:(()=>{const a=[];return"solid"!==e&&a.push('variant="'+e+'"'),"default"!==r&&a.push('color="'+r+'"'),"up"!==n&&a.push('direction="'+n+'"'),l||a.push("showTooltips={false}"),a.push("actions={actions}"),a.push('ariaLabel="Quick actions"'),"<SpeedDial\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["solid","outline"].map(a=>le(KM,{label:JM(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:ZM.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(_M,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["up","down","left","right"].map(e=>le(KM,{label:JM(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Tooltips"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show labels beside actions"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>c(e.target.checked),size:"small","aria-label":"Show tooltips"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"SpeedDial"})})]})]})}const aT={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",black:"BW",white:"BW"};function tT(e,a){return"var(--"+(aT[e]||"Primary")+"-Color-"+a+")"}const rT={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 iT(e,a){const t=rT[e]||rT.primary;return(t[a]||t.linear).map(e=>({...e}))}function nT({variant:e="linear",color:a="primary",angle:t=135,stops:r=null,position:i=null,blobs:n=null,cardProps:o={},minHeight:l=300,children:c,className:s="",sx:d={},...u}){const m="meshCard"===e,p="mesh"===e||m,f="radial"===e,g="linear"===e||f,b=r||iT(a,f?"radial":"linear"),v=n||iT(a,m?"meshCard":"mesh"),x=p?function(e){if(!e||0===e.length)return"none";const a=e.map(e=>{const a=tT(e.family,e.tone),t=e.spread||40;return"radial-gradient(circle at "+e.x+"% "+e.y+"%, "+a+" 0%, transparent "+t+"%)"}),t=tT(e[0].family,e[0].tone);return a.push(t),a.join(", ")}(v):f?function(e,a){if(!e||0===e.length)return"none";const t=[...e].sort((e,a)=>e.position-a.position).map(e=>tT(e.family,e.tone)+" "+e.position+"%"),r=a||{x:50,y:50};return"radial-gradient(circle at "+r.x+"% "+r.y+"%, "+t.join(", ")+")"}(b,i||{x:50,y:50}):function(e,a){return e&&0!==e.length?"linear-gradient("+a+"deg, "+[...e].sort((e,a)=>e.position-a.position).map(e=>tT(e.family,e.tone)+" "+e.position+"%").join(", ")+")":"none"}(b,t),y=g?b[0]:v[0];var z,S;const w=function(e){return"dark"===e?"var(--BW-Color-1)":"var(--BW-Color-6)"}((z=y?.tone||8,"black"===(S=y?.family||"primary")||"white"===S?z<=5?"light":"dark":z<=5?"dark":"light"));return le(h,m?{className:"gradient gradient-mesh-card "+s,sx:{background:x,minHeight:l,borderRadius:"var(--Card-Radius)",display:"flex",alignItems:"center",justifyContent:"center",padding:"var(--Card-Padding)",position:"relative",overflow:"hidden",...d},...u,children:le(zv,{variant:"solid",...o,children:le(Sv,{children:c})})}:{className:"gradient gradient-"+e+" "+s,sx:{background:x,minHeight:l,borderRadius:"var(--Card-Radius)",color:w,display:"flex",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden",...d},...u,children:c})}const oT=e=>le(nT,{variant:"linear",...e}),lT=e=>le(nT,{variant:"radial",...e}),cT=e=>le(nT,{variant:"mesh",...e}),sT=e=>le(nT,{variant:"meshCard",...e});["default","primary","secondary","tertiary","neutral"].map(e=>{return{value:e,label:(a=e,a?a.charAt(0).toUpperCase()+a.slice(1):"")};var a});const dT={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},uT={small:{height:"4px",borderRadius:"2px"},medium:{height:"6px",borderRadius:"3px"},large:{height:"8px",borderRadius:"4px"}};function hT({value:e,color:a="primary",size:t="medium",className:r="",sx:i={},...n}){const o=dT[a]||"Primary",l=uT[t]||uT.medium,c=null!=e,s=c?Math.min(100,Math.max(0,e)):0,d="var(--Buttons-"+o+"-Border)";return le(h,{role:"progressbar","aria-valuenow":c?Math.round(s):void 0,"aria-valuemin":c?0:void 0,"aria-valuemax":c?100:void 0,"aria-label":c?Math.round(s)+"% progress":"Loading",className:"linear-progress linear-progress-"+t+" linear-progress-"+a+(c?" 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,...i},...n,children:le(h,{className:"linear-progress-bar",sx:{position:"absolute",top:0,left:0,height:"100%",borderRadius:"inherit",backgroundColor:d,...c?{width:s+"%",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 mT=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",pT=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function fT({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function gT({color:e,selected:a,onClick:t}){const r=mT(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function bT(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a(!1),[l,c]=a(65),[s,d]=a("Default"),[u,p]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Linear Progress",component:"LinearProgress"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"LinearProgress",theme:s,surface:u})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,children:le(h,{sx:{width:"100%",maxWidth:400},children:le(hT,{color:e,size:r,value:n?l:void 0})})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),n&&a.push("value={"+l+"}"),0===a.length?"<LinearProgress />":"<LinearProgress\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:pT.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(gT,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(fT,{label:mT(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Determinate"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static bar at a specific value"})]}),le(sv,{variant:"default-outline",checked:n,onChange:e=>o(e.target.checked),size:"small","aria-label":"Determinate"})]}),n&&le(h,{sx:{mt:2},children:le(Nx,{label:"Value",min:0,max:100,value:l,onChange:(e,a)=>c(a),size:"small",valueLabelDisplay:"auto"})})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"LinearProgress"})})]})]})}const vT={default:{theme:"Neutral",surface:"Surface-Dimmest"},primary:{theme:"Primary",surface:"Surface-Dim"},"primary-dark":{theme:"Primary",surface:"Surface-Dimmest"},white:{bg:"var(--Neutral-Color-11)",fg:"var(--Neutral-Color-3)"},black:{bg:"var(--Neutral-Color-1)",fg:"var(--Neutral-Color-12)"}};function xT({color:e="default",companyName:a="",year:t=(new Date).getFullYear(),rights:r="All rights reserved",children:i,className:n,style:o,...l}){const c=i??`© ${t}${a?" "+a:""}.${r?" "+r+".":""}`,s=vT[e]||vT.default,d=s.theme?{"data-theme":s.theme,"data-surface":s.surface||"Surface-Dim"}:{},u=s.theme?{background:"var(--Background)",color:"var(--Text)"}:{background:s.bg,color:s.fg};return le("div",{...d,className:["dino-copyright",n].filter(Boolean).join(" "),style:{padding:"var(--Sizing-2, 16px) 24px",textAlign:"center",...u,...o},...l,children:le(dr,{style:{color:"inherit",opacity:.85},children:c})})}const yT={default:{theme:"Primary",surface:"Surface-Dimmest"},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 zT({color:e="default",brand:a,address:t,columns:r=[],socialLinks:i=[],copyright:n=!0,children:o,subscribe:l,copyrightName:c,copyrightYear:s,className:d,style:u,...h}){const m=r.slice(0,3),p=yT[e]||yT.default,f=p.theme?{"data-theme":p.theme,"data-surface":p.surface||"Surface"}:{},g=p.theme?{background:"var(--Background)",color:"var(--Text)"}:{background:p.bg,color:p.fg};return se("footer",{...f,className:["dino-footer",d].filter(Boolean).join(" "),style:{...g,...u},...h,children:[se("div",{style:{maxWidth:1200,margin:"0 auto",padding:"40px 24px 56px"},children:[a&&le("div",{style:{marginBottom:36},children:a}),le("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))",gap:40},children:o||se(ce,{children:[le(ST,{address:t}),m.map((e,a)=>le(wT,{...e},a))]})}),(i.length>0||l)&&se("div",{style:{marginTop:48,paddingTop:32,borderTop:"1px solid var(--Border-Variant)",display:"flex",flexWrap:"wrap",gap:32,alignItems:"flex-start",justifyContent:"space-between"},children:[i.length>0&&le(kT,{links:i}),l&&le(CT,{...l})]})]}),n&&le(xT,{color:e,companyName:c,year:s})]})}function ST({address:e}){if(!e)return le("div",{});const{company:a,lines:t=[],email:r,phone:i}=e,n=[...a?[a]:[],...t,...i?[i]:[]];return se("div",{children:[n.map((e,a)=>le(dr,{style:{color:"inherit",opacity:.85,display:"block"},children:e},a)),r&&le("div",{style:{marginTop:12},children:le(dr,{style:{color:"inherit",opacity:.85,display:"block"},children:le(ti,{href:"mailto:"+r,color:"standard",style:{color:"inherit"},children:r})})})]})}function wT({title:e,links:a=[]}){return se(zy,{gap:"var(--Sizing-1)",children:[e&&le(er,{style:{color:"inherit"},children:e}),le(zy,{component:"ul",gap:"var(--Sizing-1)",sx:{listStyle:"none",m:0,p:0},children:a.map((e,a)=>le("li",{children:le(ti,{href:e.href,onClick:e.onClick,color:"standard",style:{color:"inherit",opacity:.85},children:e.label})},a))})]})}function kT({links:e}){return le(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:e.map((e,a)=>{const t=e.label||e.name;return"production"===process.env.NODE_ENV||t||console.warn('[Footer] a socialLinks entry has no `label`. Each one needs the service it points at ("GitHub", "LinkedIn") — the icon carries no text, so without it a screen reader announces only "link".'),le("a",{href:e.url,target:"_blank",rel:"noopener noreferrer","aria-label":t,className:"footer-social-link",style:{color:"inherit",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:6,textDecoration:"none",transition:"opacity var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, ease)"},children:e.brand?le(wf,{name:e.brand,size:"24px"}):e.icon},a)})})}function CT({title:e="Stay in the loop",description:t,placeholder:r="your@email.com",buttonLabel:i="Subscribe",onSubscribe:n}){const[o,l]=a(""),[c,s]=a(!1);return se("form",{onSubmit:async e=>{if(e&&e.preventDefault(),o&&!c){s(!0);try{await(n?.(o)),l("")}finally{s(!1)}}},style:{minWidth:260,maxWidth:360,flex:"1 1 260px"},children:[le(er,{style:{color:"inherit",marginBottom:6},children:e}),t&&le(dr,{style:{color:"inherit",opacity:.85,marginBottom:12,display:"block"},children:t}),se("div",{style:{display:"flex",gap:8},children:[le(Sx,{type:"email",value:o,onChange:e=>l(e.target.value),placeholder:r,size:"small",fullWidth:!0,"aria-label":"Email address"}),le(Yg,{type:"submit",size:"small",disabled:c||!o,children:i})]})]})}function BT(e){const a=e.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);return a?[Number(a[1]),Number(a[2]),Number(a[3])]:null}function MT(e){return e?"#"+e.map(e=>e.toString(16).padStart(2,"0")).join(""):"—"}function TT([e,a,t]){const r=[e,a,t].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 AT({targetRef:e,label:r,deps:i=[]}){const[n,o]=a(null),[l,c]=a(null);t(()=>{if(!e.current)return;const a=requestAnimationFrame(()=>{if(!e.current)return;const a=getComputedStyle(e.current);o(BT(a.backgroundColor)),c(BT(a.color))});return()=>cancelAnimationFrame(a)},i);const s=function(e,a){if(!e||!a)return null;const t=TT(e),r=TT(a);return(Math.max(t,r)+.05)/(Math.min(t,r)+.05)}(n,l),d=null!==s&&s>=4.5,u=null===s?"—":null!==s&&s>=7?"AAA":d?"AA":"Fail",h=null===s?"var(--Text-Quiet)":d?"var(--Text-Success)":"var(--Text-Error)";return se("div",{style:{display:"flex",alignItems:"center",gap:16,padding:"12px 16px",borderRadius:8,background:"var(--Container)",border:"1px solid var(--Border)"},children:[se("div",{style:{flex:1,minWidth:0},children:[le(dr,{style:{fontWeight:600},children:r}),se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Background ",MT(n)," · Text ",MT(l)]})]}),se("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(zr,{style:{color:"var(--Text-Quiet)"},children:null!==s?s.toFixed(2)+":1":"—"})]})]})}const LT={company:"DinoDesign",lines:["123 Market Street","San Francisco, CA 94103"],email:"hello@dinodesign.dev",phone:"+1 (555) 010-0000"},IT=[{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:"#"}]}],NT=[{icon:le(pt,{fontSize:"small"}),url:"https://twitter.com",label:"Twitter"},{icon:le(ft,{fontSize:"small"}),url:"https://github.com",label:"GitHub"},{icon:le(gt,{fontSize:"small"}),url:"https://linkedin.com",label:"LinkedIn"}],WT=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function DT({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function RT(){const[e,i]=a("Default"),[n,o]=a("Surface"),[l,c]=a(4),[s,d]=a(!0),[u,p]=a(!0),[f,g]=a("default"),b=r(null),[v,x]=a(null),[y,z]=a(null);t(()=>{b.current&&(x({current:b.current.querySelector(".dino-footer")}),z({current:b.current.querySelector(".dino-copyright")}))},[f,l,s,u]);const S=IT.slice(0,Math.max(0,l-1)),w=s?NT:[],k=u?{title:"Stay in the loop",description:"Monthly updates on new components and tips.",onSubscribe:async e=>console.log("subscribed:",e)}:void 0;return se(h,{children:[le(yM,{title:"Footer",component:"Footer"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:o})}),se(mr,{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:b,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(zT,{color:f,address:LT,columns:S,socialLinks:w,subscribe:k,copyrightName:"DinoDesign"})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Footer",theme:e,surface:n})}),le(yb,{value:1,children:se(m,{spacing:3,sx:{p:3,maxWidth:560},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLUMNS"}),le(m,{direction:"row",spacing:1,children:[1,2,3,4].map(e=>le(DT,{label:String(e),selected:l===e,onClick:()=>c(e)},e))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"First column is always the address / contact. Up to 3 more link columns."})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:WT.map(e=>le(DT,{label:e.label,selected:f===e.value,onClick:()=>g(e.value)},e.value))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:'"Default" hardcodes Primary tone 2 (auto-derived in a future iteration).'})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SOCIAL LINKS"}),le(dv,{label:"Show social media row",checked:s,onChange:e=>d(e.target.checked)}),se(zr,{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."]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SUBSCRIBE"}),le(dv,{label:"Show email subscribe form",checked:u,onChange:e=>p(e.target.checked)}),se(zr,{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)"}),"."]})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(zr,{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."}),v&&le(AT,{targetRef:v,label:"Footer body",deps:[f,l,s,u]}),y&&le(AT,{targetRef:y,label:"Copyright strip",deps:[f,l,s,u]})]})]}),le(yb,{value:3,children:le(gM,{component:"Footer"})})]})]})}const FT=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function PT({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function HT(){const[e,i]=a("Default"),[n,o]=a("Surface"),[l,c]=a("DinoDesign"),[s,d]=a((new Date).getFullYear()),[u,p]=a("All rights reserved"),[f,g]=a(""),[b,v]=a(!1),[x,y]=a("default"),z=r(null),[S,w]=a(null);return t(()=>{z.current&&w({current:z.current.querySelector(".dino-copyright")})},[x,b,l,s,u,f]),se(h,{children:[le(yM,{title:"Copyright",component:"Copyright"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:o})}),se(mr,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:["Standalone copyright strip used at the bottom of pages. Defaults to"," ",se("code",{children:["© ","{year}"," ","{companyName}",". ","{rights}","."]})," Pass"," ",le("code",{children:"children"})," to override the entire text."]}),le(h,{ref:z,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(xT,b?{color:x,children:f||"Type a custom message →"}:{color:x,companyName:l,year:Number(s)||(new Date).getFullYear(),rights:u})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Copyright",theme:e,surface:n})}),le(yb,{value:1,children:se(m,{spacing:3,sx:{p:3,maxWidth:560},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TEXT MODE"}),se(m,{direction:"row",spacing:1,children:[le(PT,{label:"Auto-generated",selected:!b,onClick:()=>v(!1)}),le(PT,{label:"Custom",selected:b,onClick:()=>v(!0)})]})]}),!b&&se(ce,{children:[le(Sx,{label:"Company name",value:l,onChange:e=>c(e.target.value),placeholder:"DinoDesign",size:"medium"}),le(NM,{label:"Year",value:Number(s),onChange:e=>d(e),min:1900,max:2100}),le(Sx,{label:"Rights text",value:u,onChange:e=>p(e.target.value),placeholder:"All rights reserved",size:"medium"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:'Leave Rights blank to omit "All rights reserved." entirely.'})]}),b&&se(ce,{children:[le(Sx,{label:"Custom text",value:f,onChange:e=>g(e.target.value),placeholder:"© 2026 DinoDesign · MIT License · Built with love",size:"medium",multiline:!0}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Pass any string (or React node) as children to fully override the auto text."})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:FT.map(e=>le(PT,{label:e.label,selected:x===e.value,onClick:()=>y(e.value)},e.value))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Matches the Footer color presets so the two stack cleanly."})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(zr,{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."}),S&&le(AT,{targetRef:S,label:"Copyright strip",deps:[x,b,l,s,u,f]})]})]}),le(yb,{value:3,children:le(gM,{component:"Copyright"})})]})]})}const OT=["Default","Primary","Secondary","Tertiary","Neutral"],ET={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}},VT=Object.keys(ET);function QT(e,a){if("custom"===e)return{...ET.Classic,name:"Custom",description:"Custom",...a||{}};const t=ET[e];return t?{...t}:{...ET.Classic}}function jT(e,a){const t=e||"Primary";return"base"===a?"var(--Buttons-"+t+"-Button)":"highlight"===a?"rgb(var(--Buttons-"+t+"-Highlight))":"lowlight"===a?"rgb(var(--Buttons-"+t+"-Lowlight))":void 0}function qT(e){const a=e||"Primary";return"Default"===a?"var(--Text)":"var(--Text-"+a+")"}function GT(e,a){const t=(e-90)*Math.PI/180;return{dx:Math.cos(t)*a,dy:Math.sin(t)*a}}const UT={"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 XT({text:a="Your Brand. Perfected.",curves:t,arc:r=160,radius:i=300,direction:n="up",rotation:o=0,autoCrop:l=!0,textStyle:c="display-large",fontSize:s,fontFamily:d,fontWeight:u,letterSpacing:h,color:m="var(--Text, #1a1a1a)",bevel:p=!1,bevelTheme:f="Primary",bevelPreset:g,bevelCustom:b,className:v,style:x,...y}){const z=g?QT(g,b):null,S=z?!!z.bevel:!!p,w=UT[c]||UT["display-large"],k=d??w.fontFamily,C=s??w.fontSize,B=u??w.fontWeight,M=h??w.letterSpacing,T="number"==typeof s?s:w.pxHint,A=t&&t.length>0?t:[{arc:r,radius:i,direction:n}],{d:L,width:I,upMax:N,downMax:W,pathId:D}=function(a){return e.useMemo(()=>{const e="dino-curved-text-"+Math.random().toString(36).slice(2,9);let t=0;const r=0;let i="M "+t+" "+r,n=0,o=0;for(const{arc:e,radius:l,direction:c}of a){const a=YT(e,1,359),s=Math.max(10,l),d=a*Math.PI/180,u=2*s*Math.sin(d/2),h=s*(1-Math.cos(d/2));t+=u,i+=" A "+s+" "+s+" 0 "+(a>180?1:0)+" "+("up"===c?1:0)+" "+t+" "+r,"up"===c?n=Math.max(n,h):o=Math.max(o,h)}return{d:i,width:t,upMax:n,downMax:o,pathId:e}},[JSON.stringify(a)])}(A),R=Math.ceil(N+T),F=Math.ceil(W+T),P=Math.ceil(T),H=Math.ceil(I+2*P),O=R+F,E=P,V=R,Q=o?"rotate("+o+" "+H/2+" "+O/2+")":void 0,j=e.useRef(null),[q,G]=e.useState(null),[U,X]=e.useState(T);e.useEffect(()=>{if(!j.current||"undefined"==typeof ResizeObserver)return;const e=j.current,a=()=>{const a=e.getBoundingClientRect(),t=q?q.width:H;if(!t||!a.width)return;const r=a.width/t;X(T*r)};a();const t=new ResizeObserver(a);return t.observe(e),()=>t.disconnect()},[H,T,q]);const Y=S&&U>=19;e.useLayoutEffect(()=>{if(!l)return void G(null);const e=j.current;if(!e)return;const a=e.querySelector("text");if(!a)return;let t;try{t=a.getBBox()}catch(e){return}if(!t||!t.width||!t.height)return;const r=H/2,i=O/2,n=o*Math.PI/180,c=Math.cos(n),s=Math.sin(n),d=(e,a)=>{const t=e-r,n=a-i;return{x:r+t*c-n*s,y:i+t*s+n*c}},u=[d(t.x,t.y),d(t.x+t.width,t.y),d(t.x,t.y+t.height),d(t.x+t.width,t.y+t.height)],h=Math.min(...u.map(e=>e.x)),m=Math.max(...u.map(e=>e.x)),p=Math.min(...u.map(e=>e.y)),f=Math.max(...u.map(e=>e.y)),g=.12*T,b={x:h-g,y:p-g,width:m-h+2*g,height:f-p+2*g};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,a,JSON.stringify(A),o,T,M,k,B,S,f,g,JSON.stringify(b)]);const J=q?q.x+" "+q.y+" "+q.width+" "+q.height:"0 0 "+H+" "+O,Z=q?q.width:H,$=q?q.height:O;return se("svg",{ref:j,viewBox:J,width:Z,height:$,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...x},"aria-label":a,role:"img",className:["dino-curved-text",v].filter(Boolean).join(" "),...y,children:[le("defs",{children:le("path",{id:D,d:L,transform:"translate("+E+" "+V+")"})}),se("g",{transform:Q,children:[Y&&(()=>{const e=z?z.depth/96:.045,t=Math.max(2,Math.round(T*e)),r=Math.max(1,Math.round(T*e*.67)),i={fontFamily:k,fontSize:"number"==typeof C?C+"px":C,fontWeight:B,letterSpacing:"number"==typeof M?M+"px":M};return se(ce,{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:"#"+D,startOffset:"50%",textAnchor:"middle",children:a})}),le("text",{className:"dino-bevel-layer dino-bevel-layer--highlight",fill:"rgb(var(--Buttons-"+f+"-Highlight))",transform:"translate(0 -"+r+")",style:i,children:le("textPath",{href:"#"+D,startOffset:"50%",textAnchor:"middle",children:a})})]})})(),le("text",{className:"dino-curved-text__base",fill:Y?"var(--Buttons-"+f+"-Button)":S?qT(f):m,style:{fontFamily:k,fontSize:"number"==typeof C?C+"px":C,fontWeight:B,letterSpacing:"number"==typeof M?M+"px":M},children:le("textPath",{href:"#"+D,startOffset:"50%",textAnchor:"middle",children:a})})]})]})}function YT(e,a,t){return Math.max(a,Math.min(t,e))}const JT=[{value:"display-large",label:"Display Large"},{value:"display-small",label:"Display Small"}],ZT=[{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)"}],$T=OT.map(e=>({value:e,label:e}));function KT({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function _T(){const[e,i]=a("Default"),[n,o]=a("Surface"),[l,c]=a("Your Brand. Perfected."),[s,d]=a("display-large"),[u,p]=a("primary"),[f,g]=a([(b="up",{arc:140,radius:340,direction:b})]);var b;const[v,x]=a(0),[y,z]=a(8),[S,w]=a(700),[k,C]=a(!1),[B,M]=a("Primary"),[T,A]=a("Classic"),L=r(null),[I,N]=a(null);t(()=>{L.current&&N({current:L.current.querySelector("text")})},[u,s,f,v,y,S,k,B,T]);const W=ZT.find(e=>e.value===u)?.css||ZT[0].css;function D(e,a){g(t=>t.map((t,r)=>r===e?{...t,...a}:t))}return se(h,{children:[le(yM,{title:"Curved Display Text",component:"CurvedText"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:o})}),le(mr,{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."}),se(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:L,"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(XT,{text:l,curves:f,textStyle:s,rotation:v,letterSpacing:y,fontWeight:S,bevel:k,bevelTheme:B,bevelPreset:k?T:void 0,color:W})})}),le(h,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"CurvedText",theme:e,surface:n})}),le(yb,{value:1,children:se(m,{spacing:3,sx:{p:3,maxWidth:720},children:[le(Sx,{label:"Text",value:l,onChange:e=>c(e.target.value),placeholder:"Your headline…",size:"medium"}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CURVES"}),le(m,{direction:"row",spacing:1,children:[1,2].map(e=>le(KT,{label:String(e),selected:f.length===e,onClick:()=>function(e){g(a=>{if(e===a.length)return a;if(e>a.length){const t=[...a];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 a.slice(0,e)})}(e)},e))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"One curve is an arch. Two curves chain end-to-end for a wave."})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"PER-CURVE SETTINGS"}),le(m,{spacing:2,children:f.map((e,a)=>se(h,{"data-surface":"Container",style:{background:"var(--Background)",border:"1px solid var(--Border)",borderRadius:8,padding:12},children:[se(m,{direction:"row",alignItems:"center",spacing:2,sx:{mb:1},children:[se(zr,{style:{fontWeight:700},children:["Curve ",a+1]}),le("div",{style:{flex:1}}),se(m,{direction:"row",spacing:1,children:[le(KT,{label:"⌢ Up",selected:"up"===e.direction,onClick:()=>D(a,{direction:"up"})}),le(KT,{label:"⌣ Down",selected:"down"===e.direction,onClick:()=>D(a,{direction:"down"})})]})]}),se(m,{spacing:1,children:[se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Radius",se("span",{style:{float:"right"},children:[e.radius,"px"]})]}),le(Nx,{min:100,max:600,step:10,value:e.radius,onChange:(e,t)=>D(a,{radius:t})})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Arc sweep",se("span",{style:{float:"right"},children:[e.arc,"°"]})]}),le(Nx,{min:40,max:280,step:5,value:e.arc,onChange:(e,t)=>D(a,{arc:t})})]})]})]},a))})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:JT.map(e=>le(KT,{label:e.label,selected:s===e.value,onClick:()=>d(e.value)},e.value))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Uses the lib's DisplayLarge / DisplaySmall tokens (font-family, size, weight, letter-spacing)."})]}),se(h,{children:[se(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["LETTER SPACING",se("span",{style:{float:"right"},children:[y,"px"]})]}),le(Nx,{min:-4,max:40,step:1,value:y,onChange:(e,a)=>z(a)}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Adjusts the gap between characters along the wave."})]}),se(h,{children:[se(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["FONT WEIGHT",le("span",{style:{float:"right"},children:S})]}),le(Nx,{min:100,max:900,step:100,value:S,onChange:(e,a)=>w(a)}),le(zr,{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."})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BEVEL"}),le(dv,{label:"3D bevel effect",checked:k,onChange:e=>C(e.target.checked)}),k&&se(h,{sx:{mt:1.5},children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Preset"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1,mb:1.5},children:VT.map(e=>le(KT,{label:e,selected:T===e,onClick:()=>A(e)},e))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Bevel theme"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:$T.map(e=>le(KT,{label:e.label,selected:B===e.value,onClick:()=>M(e.value)},e.value))})]}),se(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Bevel layers use ",se("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."]})]}),se(h,{children:[se(m,{direction:"row",alignItems:"center",sx:{mb:1},children:[se(Ar,{style:{color:"var(--Text-Quiet)",flex:1},children:["ROTATION",se("span",{style:{float:"right",marginRight:12},children:[v,"°"]})]}),le(Yg,{variant:"default-outline",size:"small",onClick:function(){const e=L.current?.querySelector("svg");if(!e)return;const a=e.querySelector("path"),t=e.querySelector("text");if(!a||!t)return;const r=a.getTotalLength();if(!r)return;let i=0;try{i=t.getComputedTextLength?.()||0}catch(e){}i||(i=Math.min(r,18*l.length));const n=Math.max(0,(r-i)/2),o=Math.min(r,n+i),c=a.getPointAtLength(n),s=a.getPointAtLength(o),d=180*Math.atan2(s.y-c.y,s.x-c.x)/Math.PI,u=Math.max(-45,Math.min(45,Math.round(-d)));x(u)},children:"Auto-level"})]}),le(Nx,{min:-45,max:45,step:1,value:v,onChange:(e,a)=>x(a)}),le(zr,{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.'})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:ZT.map(e=>le(KT,{label:e.label,selected:u===e.value,onClick:()=>p(e.value)},e.value))})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(zr,{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."}),I&&le(AT,{targetRef:I,label:"Curved text",deps:[u,s,JSON.stringify(f),v,y]}),se(dr,{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."]})]})]}),le(yb,{value:3,children:le(gM,{component:"CurvedText"})})]})})})]})]})}const eA={"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 aA({text:a="DinoDesign",theme:t="Primary",preset:r="Classic",custom:i,textStyle:n="display-large",fontSize:o,fontFamily:l,fontWeight:c,letterSpacing:s,className:d,style:u,...h}){const m=eA[n]||eA["display-large"],p=l??m.fontFamily,f=o??m.fontSize,g=c??m.fontWeight,b=s??m.letterSpacing,v="number"==typeof o?o:m.pxHint,x=QT(r,i),y="dino-bevel-"+e.useId().replace(/:/g,""),z=y+"-s",S=e.useRef(null),[w,k]=e.useState(v),C=.6*v,B=Math.max(400,a.length*C+80),M=1.9*v,T=B/2,A=.7*M;e.useEffect(()=>{if(!S.current||"undefined"==typeof ResizeObserver)return;const e=S.current,a=()=>{const a=e.getBoundingClientRect();B&&a.width&&k(v*(a.width/B))};a();const t=new ResizeObserver(a);return t.observe(e),()=>t.disconnect()},[B,v]);const L=w>=19,I=x.bevel?GT(x.angle+180,x.depth):{dx:0,dy:0},N=x.bevel?GT(x.angle,x.depth):{dx:0,dy:0},W=x.shadow?GT(x.angle,x.shadowDistance??6):{dx:0,dy:0},D=L?jT(t,"base"):qT(t),R=jT(t,"highlight"),F=jT(t,"lowlight"),P={fontFamily:p,fontSize:"number"==typeof f?f+"px":f,fontWeight:g,letterSpacing:"number"==typeof b?b+"px":b},H=x.bevel&&L?"url(#"+y+")":void 0,O=x.shadow&&L?"url(#"+z+")":void 0;return se("svg",{ref:S,viewBox:"0 0 "+B+" "+M,width:B,height:M,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...u},"aria-label":a,role:"img",className:["dino-bevel-text",d].filter(Boolean).join(" "),...h,children:[se("defs",{children:[x.shadow&&le("filter",{id:z,x:"-30%",y:"-30%",width:"160%",height:"160%",children:le("feDropShadow",{dx:W.dx.toFixed(2),dy:W.dy.toFixed(2),stdDeviation:x.shadowBlur??8,style:{floodColor:F,floodOpacity:x.shadowOpacity??.6}})}),x.bevel&&se("filter",{id:y,x:"-5%",y:"-5%",width:"110%",height:"110%",colorInterpolationFilters:"sRGB",children:[le("feGaussianBlur",{in:"SourceAlpha",stdDeviation:(x.softness??1)+.5,result:"blur-alpha"}),le("feOffset",{in:"blur-alpha",dx:N.dx.toFixed(2),dy:N.dy.toFixed(2),result:"shadow-offset"}),le("feFlood",{style:{floodColor:F,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:I.dx.toFixed(2),dy:I.dy.toFixed(2),result:"hi-offset"}),le("feFlood",{style:{floodColor:R,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"}),se("feMerge",{children:[le("feMergeNode",{in:"SourceGraphic"}),le("feMergeNode",{in:"shadow-clipped"}),le("feMergeNode",{in:"hi-clipped"})]})]})]}),x.shadow&&L&&le("text",{className:"dino-bevel-layer dino-bevel-layer--shadow",x:T,y:A,textAnchor:"middle",fill:D,filter:O,style:P,"aria-hidden":"true",children:a}),le("text",{className:x.bevel?"dino-bevel-text__base dino-bevel-layer":"dino-bevel-text__base",x:T,y:A,textAnchor:"middle",fill:D,filter:H,style:P,children:a})]})}const tA=[...VT.map(e=>({value:e,label:e,description:ET[e].description})),{value:"custom",label:"Custom",description:"Tune every knob"}],rA=[{value:"light",label:"Light",css:"var(--Surface)"},{value:"warm",label:"Warm",css:"var(--Surface-Dim)"},{value:"dark",label:"Dark",css:"var(--Container-High)"}];function iA({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function nA({option:e,active:a,onClick:t}){return se(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:a?"var(--Buttons-Primary-Border)":"var(--Border)",background:a?"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(zr,{style:{fontWeight:600,color:"var(--Text)"},children:e.label}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:e.description})]})}function oA(){const[e,t]=a("Default"),[r,i]=a("Surface"),[n,o]=a("DinoDesign"),[l,c]=a("Primary"),[s,d]=a("Classic"),[u,p]=a("light"),[f,g]=a(135),[b,v]=a(5),[x,y]=a(1),[z,S]=a(!0),[w,k]=a(!0),[C,B]=a(6),[M,T]=a(8),[A,L]=a(60),[I,N]=a(96),[W,D]=a(900),[R,F]=a(0),P="custom"===s,H=P?{angle:f,depth:b,softness:x,bevel:z,shadow:w,shadowDistance:C,shadowBlur:M,shadowOpacity:A/100}:void 0;const O=rA.find(e=>e.value===u)?.css||rA[0].css;return se(h,{children:[le(yM,{title:"Bevel Display Text",component:"BevelText"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:t,surface:r,onSurfaceChange:i})}),le(mr,{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."}),se(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:O,borderRadius:2,p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:240,overflow:"auto",position:"sticky",top:16,transition:"background 0.2s"},children:le(aA,{text:n,theme:l,preset:s,custom:H,fontSize:I,fontWeight:W,letterSpacing:R})})}),le(h,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"BevelText",theme:e,surface:r})}),le(yb,{value:1,children:se(m,{spacing:3,sx:{p:3,maxWidth:720},children:[le(Sx,{label:"Text",value:n,onChange:e=>o(e.target.value),placeholder:"Your headline…",size:"medium"}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:OT.map(e=>le(iA,{label:e,selected:l===e,onClick:()=>c(e)},e))}),se(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Resolves to ",se("code",{children:["--Buttons-","{Theme}","-Button"]})," ","(fill), ",le("code",{children:"-Highlight"})," (light edge), and"," ",le("code",{children:"-Lowlight"})," (shadow edge)."]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PRESETS"}),le(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:tA.map(e=>le(nA,{option:e,active:s===e.value,onClick:()=>function(e){if(d(e),"custom"!==e){const a=QT(e);g(a.angle),v(a.depth??5),y(a.softness??1),S(a.bevel),k(a.shadow),B(a.shadowDistance??6),T(a.shadowBlur??8),L(Math.round(100*(a.shadowOpacity??.6)))}}(e.value)},e.value))})]}),P&&se(h,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",p:2},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"CUSTOM"}),se(m,{spacing:2,children:[se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Light angle",se("span",{style:{float:"right"},children:[f,"°"]})]}),le(Nx,{min:0,max:360,step:5,value:f,onChange:(e,a)=>g(a)})]}),se(h,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(dv,{label:"Inset bevel",checked:z,onChange:e=>S(e.target.checked)}),z&&se(m,{spacing:1.5,sx:{mt:1.5},children:[se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Depth",se("span",{style:{float:"right"},children:[b,"px"]})]}),le(Nx,{min:1,max:16,step:1,value:b,onChange:(e,a)=>v(a)})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Softness",se("span",{style:{float:"right"},children:[x,"px"]})]}),le(Nx,{min:0,max:6,step:.5,value:x,onChange:(e,a)=>y(a)})]})]})]}),se(h,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(dv,{label:"Drop shadow",checked:w,onChange:e=>k(e.target.checked)}),w&&se(m,{spacing:1.5,sx:{mt:1.5},children:[se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Distance",se("span",{style:{float:"right"},children:[C,"px"]})]}),le(Nx,{min:1,max:24,step:1,value:C,onChange:(e,a)=>B(a)})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Blur",se("span",{style:{float:"right"},children:[M,"px"]})]}),le(Nx,{min:0,max:24,step:1,value:M,onChange:(e,a)=>T(a)})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Opacity",se("span",{style:{float:"right"},children:[A,"%"]})]}),le(Nx,{min:10,max:100,step:5,value:A,onChange:(e,a)=>L(a)})]})]})]})]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),se(m,{spacing:2,children:[se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font size",se("span",{style:{float:"right"},children:[I,"px"]})]}),le(Nx,{min:32,max:160,step:4,value:I,onChange:(e,a)=>N(a)})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font weight",le("span",{style:{float:"right"},children:W})]}),le(Nx,{min:400,max:900,step:100,value:W,onChange:(e,a)=>D(a)})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Letter spacing",se("span",{style:{float:"right"},children:[R,"px"]})]}),le(Nx,{min:-2,max:20,step:1,value:R,onChange:(e,a)=>F(a)})]})]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PREVIEW BACKGROUND"}),le(m,{direction:"row",spacing:1,children:rA.map(e=>le(iA,{label:e.label,selected:u===e.value,onClick:()=>p(e.value)},e.value))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Showcase-only — doesn't affect the emitted code."})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(m,{spacing:2,sx:{p:3,maxWidth:560},children:[se(zr,{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(dr,{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."})]})]}),le(yb,{value:3,children:le(gM,{component:"BevelText"})})]})})})]})]})}function lA({layout:e="side",navItems:t=[{label:"Home",icon:le(Te,{}),path:"/"},{label:"About",icon:le(Fe,{}),path:"/about"},{label:"Settings",icon:le(Le,{}),path:"/settings"},{label:"Help",icon:le(bt,{}),path:"/help"}],title:r="My App",children:i,onLayoutChange:n,onNavigate:o,sx:l={},...c}){const s=te(),d=re(s.breakpoints.down("md"));re(s.breakpoints.down("lg"));const[u,m]=a(!1),[p,f]=a(!1),g=d?"top":e,b=({compact:e=!1})=>le(G,{sx:{py:1},children:t.map((a,t)=>le(x,{title:e?a.label:"",placement:"right",children:se(X,{onClick:()=>{o?.(a),m(!1)},sx:{color:"var(--Text)",...Fk({muiPrefix:!0}),transition:"all 0.2s ease-in-out",justifyContent:e?"center":"flex-start",px:e?1:2},children:[le(Y,{sx:{color:"var(--Icons-Primary)",minWidth:e?"auto":40,mr:e?0:1},children:a.icon}),!e&&le(J,{primary:a.label})]})},t))});return se(h,{sx:{minHeight:"100vh",backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",flexDirection:"column",...l},...c,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:se(ne,{children:[d&&"rail"!==g&&le(Zg,{variant:"ghost",onClick:()=>m(!u),"aria-label":u?"Close navigation":"Open navigation",sx:{mr:2},children:le(u?Ea:Pa,{})}),le(V,{variant:"h6",sx:{flex:1,fontWeight:700},children:r}),!d&&n&&se(oe,{value:e,exclusive:!0,onChange:(e,a)=>{a&&n(a)},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(ee,{value:"side","aria-label":"side nav",children:"☰ Side"}),le(ee,{value:"rail","aria-label":"rail nav",children:"⫷ Rail"}),le(ee,{value:"side-rail","aria-label":"side-rail nav",children:"☰⫷ Both"})]})]})}),se(h,{sx:{display:"flex",flex:1},children:[("rail"===g||"side-rail"===g)&&!d&&le(h,{sx:{width:80,backgroundColor:"var(--Container)",borderRight:"1px solid var(--Border-Variant)",display:"flex",flexDirection:"column",py:2},children:le(b,{compact:!0})}),("side"===g||"side-rail"===g)&&!d&&se(h,{sx:{width:p?80:280,backgroundColor:"var(--Container)",borderRight:"1px solid var(--Border-Variant)",transition:"width 0.3s ease-in-out",display:"flex",flexDirection:"column"},children:[se(h,{sx:{p:2,display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid var(--Border-Variant)",minHeight:64},children:[!p&&le(V,{variant:"h6",sx:{fontWeight:700,color:"var(--Text)"},children:"Menu"}),le(Zg,{size:"small",variant:"ghost",onClick:()=>f(!p),"aria-label":p?"Expand navigation":"Collapse navigation",sx:{color:"var(--Icons-Primary)"},children:p?"›":"‹"})]}),le(b,{compact:p})]}),d&&se(K,{anchor:"left",open:u,onClose:()=>m(!1),sx:{"& .MuiDrawer-paper":{backgroundColor:"var(--Container)",width:280}},children:[le(h,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:le(V,{variant:"h6",sx:{fontWeight:700},children:"Menu"})}),le(b,{compact:!1})]}),le(h,{sx:{flex:1,overflow:"auto",backgroundColor:"var(--Background)"},children:le(ae,{maxWidth:"lg",sx:{py:4},children:i})})]})]})}const cA=[{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)"}],sA={desktop:"Desktop","ios-mobile":"IOS-Mobile","ios-tablet":"IOS-Tablet",android:"Android"};function dA(e){const a=sA[e]||"Desktop";document.documentElement.setAttribute("data-device",a),document.documentElement.setAttribute("data-platform",a)}function uA(){const{isDark:e,toggleDarkMode:r}=cz(),i=e?"dark":"light",n=a=>{"dark"===a!==e&&r();try{localStorage.setItem("themeMode",a)}catch{}},[o,l]=a(!1),[c,s]=a("desktop");t(()=>{const e=localStorage.getItem("dino-platform")||"desktop";s(e),dA(e)},[]);const d=e=>{s(e),localStorage.setItem("dino-platform",e),dA(e)};return se(ce,{children:[le(h,{onClick:()=>l(!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(be,{sx:{fontSize:24}})}),le(fz,{anchor:"right",open:o,onClose:()=>l(!1),hideBackdrop:!0,size:"small",sx:{width:320,zIndex:99999999},children:se(h,{sx:{p:3,height:"100%",display:"flex",flexDirection:"column"},children:[se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:2},children:[le(ar,{children:"Settings"}),le(Yg,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>l(!1),"aria-label":"Close settings",children:le(ve,{fontSize:"small"})})]}),le($,{sx:{mb:3,borderColor:"var(--Border)"}}),le(h,{sx:{flex:1,overflowY:"auto"},children:se(m,{spacing:4,children:[se(h,{children:[le(Ar,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"MODE"}),se(m,{direction:"row",spacing:1,children:[le(Yg,{variant:"light"===i?"primary":"primary-outline",size:"small",onClick:()=>n("light"),sx:{flex:1},children:"Light"}),le(Yg,{variant:"dark"===i?"primary":"primary-outline",size:"small",onClick:()=>n("dark"),sx:{flex:1},children:"Dark"})]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"PLATFORM"}),le(m,{spacing:1,children:cA.map(({value:e,label:a,note:t})=>{const r=c===e;return se(h,{onClick:()=>d(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:[se(h,{children:[le(dr,{style:{color:r?"var(--Buttons-Primary-Button)":"var(--Text)",fontWeight:r?600:400},children:a}),le(zr,{style:{color:"var(--Text)",opacity:.7},children:t})]}),r&&le(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Buttons-Primary-Button)",flexShrink:0}})]},e)})})]})]})}),le($,{sx:{my:3,borderColor:"var(--Border)"}}),le(Yg,{variant:"primary-outline",size:"small",onClick:()=>{d("desktop"),n("light")},sx:{width:"100%"},children:"Reset to Defaults"})]})})]})}const hA=e=>(e||[]).map(e=>{const a="number"==typeof e?e:Number(e?.value);return Number.isFinite(a)?a:0}),mA=e=>(e||[]).map((e,a)=>"number"==typeof e?String(a+1):e?.label??String(a+1));function pA(e,{fromZero:a=!0}={}){if(!e.length)return{min:0,max:1};let t=Math.min(...e),r=Math.max(...e);return a&&(t=Math.min(0,t)),r===t&&(r=t+1),{min:t,max:r}}const fA=(e,{min:a,max:t},r,i)=>r+i-(e-a)/(t-a)*i;function gA(e,a,t,{inset:r=0}={}){if(e<=0)return[];if(1===e)return[a+t/2];const i=(t-2*r)/(e-1);return Array.from({length:e},(e,t)=>a+r+t*i)}function bA(e,a,t,{gapRatio:r=.4}={}){if(e<=0)return{centres:[],bandWidth:0};const i=t/e,n=i*(1-r);return{centres:Array.from({length:e},(e,t)=>a+i*t+i/2),bandWidth:n}}const vA=e=>e.length?e.map((e,a)=>`${a?"L":"M"}${e.x} ${e.y}`).join(" "):"";function xA(e,{tension:a=0}={}){if(e.length<2)return vA(e);const t=(1-a)/6;let r=`M${e[0].x} ${e[0].y}`;for(let a=0;a<e.length-1;a++){const i=e[a-1]||e[a],n=e[a],o=e[a+1],l=e[a+2]||o,c={x:n.x+(o.x-i.x)*t,y:n.y+(o.y-i.y)*t},s={x:o.x-(l.x-n.x)*t,y:o.y-(l.y-n.y)*t};r+=` C${c.x} ${c.y} ${s.x} ${s.y} ${o.x} ${o.y}`}return r}const yA=(e,a,t)=>e&&a.length?`${e} L${a[a.length-1].x} ${t} L${a[0].x} ${t} Z`:"";function zA(e,a,t,r,i,n){const o=n-i;if(o>=2*Math.PI-1e-9){const n=i+Math.PI;return zA(e,a,t,r,i,n)+" "+zA(e,a,t,r,n,i+2*Math.PI)}const l=(t,r)=>({x:e+t*Math.sin(r),y:a-t*Math.cos(r)}),c=o>Math.PI?1:0,s=l(r,i),d=l(r,n);if(t<=0)return`M${e} ${a} L${s.x} ${s.y} A${r} ${r} 0 ${c} 1 ${d.x} ${d.y} Z`;const u=l(t,n),h=l(t,i);return`M${s.x} ${s.y} A${r} ${r} 0 ${c} 1 ${d.x} ${d.y} L${u.x} ${u.y} A${t} ${t} 0 ${c} 0 ${h.x} ${h.y} Z`}function SA(e,{startAngle:a=0}={}){const t=e.map(e=>e>0?e:0),r=t.reduce((e,a)=>e+a,0),i=e.filter(e=>e<=0).length;if(r<=0)return{slices:[],total:0,dropped:i};let n=a;return{slices:t.map(e=>{const a=e/r*Math.PI*2,t={start:n,end:n+a,value:e,fraction:e/r};return n+=a,t}),total:r,dropped:i}}function wA({min:e,max:a},t=4){if(t<1)return[];const r=(a-e)/t,i=Math.pow(10,Math.floor(Math.log10(Math.abs(r)||1))),n=[1,2,2.5,5,10].map(e=>e*i).find(e=>e>=r)??10*i,o=[];for(let t=Math.ceil(e/n)*n;t<=a+1e-9;t+=n)o.push(Number(t.toFixed(10)));return o}var kA=Object.freeze({__proto__:null,arcPath:zA,areaPath:yA,bands:gA,extent:pA,linePath:vA,scaleY:fA,sliceAngles:SA,slots:bA,smoothPath:xA,ticks:wA,toLabels:mA,toNumbers:hA});const CA={fill:"var(--Icons-Primary)",track:"var(--Border-Variant)",line:"var(--Border-Variant)",quietLabel:"var(--Quiet)",label:"var(--Text)",gradient:"var(--Icons-Primary-Variant)"},BA=["Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error"],MA={fontFamily:"var(--Label-Small-Font-Family)",fontSize:"var(--Label-Small-Font-Size)",fontWeight:"var(--Label-Small-Font-Weight)",letterSpacing:"var(--Label-Small-Letter-Spacing)"},TA={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 AA({caption:e,labels:a,values:t,valueHeader:r="Value"}){return se(h,{component:"table",sx:TA,children:[le("caption",{children:e}),le("thead",{children:se("tr",{children:[le("th",{scope:"col",children:"Category"}),le("th",{scope:"col",children:r})]})}),le("tbody",{children:t.map((e,t)=>se("tr",{children:[le("th",{scope:"row",children:a[t]}),le("td",{children:e})]},t))})]})}const LA="var(--Motion-Duration-Slow, 300ms) var(--Motion-Easing-Enter, cubic-bezier(0, 0, 0, 1))",IA="var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))";function NA(a){const[t,r]=e.useState(-1),i=e.useCallback(e=>({onMouseEnter:()=>r(e),onMouseLeave:()=>r(a=>a===e?-1:a),onFocus:()=>r(e),onBlur:()=>r(a=>a===e?-1:a)}),[]);return e.useEffect(()=>{r(e=>e>=a?-1:e)},[a]),{active:t,setActive:r,handlers:i}}function WA({count:e,width:a,centres:t,bandWidth:r,labels:i,values:n,handlers:o}){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]}: ${n[l]}`,...o(l),sx:{position:"absolute",top:0,height:"100%",left:(t[l]-r/2)/a*100+"%",width:r/a*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 DA({x:e,y:a,text:t,width:r,tokens:i}){if(null==t)return null;const n=Math.max(28,8*String(t).length+14),o=Math.min(Math.max(e,n/2+2),r-n/2-2),l=a-26>=2?a-26:a+6;return se("g",{pointerEvents:"none",children:[le("rect",{x:o-n/2,y:l,width:n,height:20,rx:6,fill:i.fill}),le("text",{x:o,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 RA({data:e=[],showTrack:r=!0,rounded:i=!0,showValues:n=!1,showLabels:o=!0,animate:l=!0,interactive:c=!0,height:s=200,gapRatio:d=.4,label:u,className:m="",sx:p={},...f}){const g=hA(e),b=mA(e),{active:v,handlers:x}=NA(g.length),[y,z]=a(!l);t(()=>{if(!l)return;const e=requestAnimationFrame(()=>z(!0));return()=>cancelAnimationFrame(e)},[l]);const S=320,w=n?20:8,k=o?22:8,C=Math.max(0,s-w-k),B=pA(g,{fromZero:!0}),{centres:M,bandWidth:T}=bA(g.length,0,S,{gapRatio:d}),A=w+C,L=i?T/2:0,I=g.length?S/g.length:0;return se(h,{component:"figure",className:"bar-chart "+m,sx:{display:"block",width:"100%",m:0,position:"relative",...p},...f,children:[se("svg",{viewBox:`0 0 320 ${s}`,width:"100%",height:s,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[c&&v>=0&&le("rect",{x:M[v]-I/2,y:0,width:I,height:s,fill:"var(--Hover)",rx:6}),g.map((e,a)=>{const t=M[a]-T/2,i=fA(e,B,w,C),n=Math.max(0,A-i);return se("g",{children:[r&&le("rect",{x:t,y:w,width:T,height:C,rx:L,ry:L,fill:CA.track}),n>0&&le("rect",{x:t,y:i,width:T,height:n,rx:Math.min(L,n/2),ry:Math.min(L,n/2),fill:CA.fill,style:{transformBox:"fill-box",transformOrigin:"bottom",transform:y?"scaleY(1)":"scaleY(0)",transition:`transform ${LA}`}})]},a)}),n&&g.map((e,a)=>le("text",{x:M[a],y:fA(e,B,w,C)-6,textAnchor:"middle",fill:CA.label,...MA,children:e},"v"+a)),o&&b.map((e,a)=>le("text",{x:M[a],y:s-6,textAnchor:"middle",fill:CA.quietLabel,...MA,children:e},"l"+a)),c&&v>=0&&!n&&le(DA,{x:M[v],y:fA(g[v],B,w,C),text:g[v],width:S,tokens:CA})]}),c&&le(WA,{count:g.length,width:S,centres:M,bandWidth:I,labels:b,values:g,handlers:x}),le(AA,{caption:u||`Bar chart, ${g.length} values`,labels:b,values:g})]})}function FA({data:e=[],curve:r="smooth",gradient:i=!0,fromZero:n=!1,showGrid:l=!1,showLabels:c=!1,animate:s=!0,interactive:d=!0,height:u=200,strokeWidth:m=3,tension:p=0,label:f,className:g="",sx:b={},...v}){const x="lc-"+o().replace(/:/g,""),y=hA(e),z=mA(e),{active:S,handlers:w}=NA(y.length),[k,C]=a(!s);t(()=>{if(!s)return;const e=requestAnimationFrame(()=>C(!0));return()=>cancelAnimationFrame(e)},[s]);const B=320,M=c?22:8,T=Math.max(0,u-8-M),A=pA(y,{fromZero:n}),L=gA(y.length,0,B,{inset:m}),I=y.map((e,a)=>({x:L[a],y:fA(e,A,8,T)})),N="straight"===r?vA(I):xA(I,{tension:p}),W=8+T;return se(h,{component:"figure",className:"line-chart "+g,sx:{display:"block",width:"100%",m:0,position:"relative",...b},...v,children:[se("svg",{viewBox:`0 0 320 ${u}`,width:"100%",height:u,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[i&&le("defs",{children:se("linearGradient",{id:x,x1:"0",y1:"0",x2:"0",y2:"1",children:[le("stop",{offset:"0%",stopColor:CA.gradient,stopOpacity:"1"}),le("stop",{offset:"100%",stopColor:CA.gradient,stopOpacity:"0"})]})}),l&&wA(A,4).map(e=>le("line",{x1:0,x2:B,y1:fA(e,A,8,T),y2:fA(e,A,8,T),stroke:CA.line,strokeWidth:"1"},e)),i&&I.length>1&&le("path",{d:yA(N,I,W),fill:`url(#${x})`,style:{opacity:k?1:0,transition:`opacity ${LA}`}}),I.length>1&&le("path",{d:N,fill:"none",stroke:CA.fill,strokeWidth:m,strokeLinecap:"round",strokeLinejoin:"round",pathLength:"1",style:{strokeDasharray:1,strokeDashoffset:k?0:1,transition:`stroke-dashoffset ${LA}`}}),1===I.length&&le("circle",{cx:I[0].x,cy:I[0].y,r:m,fill:CA.fill}),d&&S>=0&&se(ce,{children:[le("line",{x1:L[S],x2:L[S],y1:8,y2:W,stroke:CA.line,strokeWidth:"1"}),le("circle",{cx:I[S].x,cy:I[S].y,r:m+1,fill:CA.fill,stroke:"var(--Background)",strokeWidth:"2"}),le(DA,{x:I[S].x,y:I[S].y,text:y[S],width:B,tokens:CA})]}),c&&z.map((e,a)=>le("text",{x:L[a],y:u-6,textAnchor:"middle",fill:CA.quietLabel,...MA,children:e},a))]}),d&&le(WA,{count:y.length,width:B,centres:L,bandWidth:y.length?B/y.length:0,labels:z,values:y,handlers:w}),le(AA,{caption:f||`Line chart, ${y.length} points`,labels:z,values:y})]})}function PA({data:e=[],donut:r=!1,donutRatio:i=.6,colors:n=BA,separatorWidth:o=2,size:l=200,showLabels:c=!1,animate:s=!0,interactive:d=!0,label:u,className:m="",sx:p={},...f}){const g=hA(e),b=mA(e),{slices:v,total:x,dropped:y}=SA(g),{active:z,handlers:S}=NA(g.length),[w,k]=a(!s);t(()=>{if(!s)return;const e=requestAnimationFrame(()=>k(!0));return()=>cancelAnimationFrame(e)},[s]);const C=l/2,B=l/2,M=l/2-1,T=r?M*i:0,A=e=>{return{fill:`var(--Icons-${a=n[e%n.length]})`,onFill:`var(--Icons-On-${a})`};var a};return se(h,{component:"figure",className:"pie-chart "+m,sx:{display:"block",m:0,position:"relative",...p},...f,children:[se("svg",{viewBox:`0 0 ${l} ${l}`,width:l,height:l,focusable:"false","aria-hidden":"true",children:[v.map((e,a)=>{const t=(e.start+e.end)/2,r=d&&z===a?4:0;return le("path",{d:zA(C,B,T,M,e.start,e.end),fill:A(a).fill,stroke:"var(--Background)",strokeWidth:o,strokeLinejoin:"round",...d?S(a):{},style:{transform:`translate(${r*Math.sin(t)}px, ${-r*Math.cos(t)}px) scale(${w?1:0})`,transformOrigin:`${C}px ${B}px`,transformBox:"view-box",transition:`transform ${w?IA:LA}`}},a)}),c&&v.map((e,a)=>{const t=(e.start+e.end)/2,r=T+.62*(M-T);return e.fraction<.07?null:le("text",{x:C+r*Math.sin(t),y:B-r*Math.cos(t),textAnchor:"middle",dominantBaseline:"middle",fill:A(a).onFill,...MA,children:b[a]},a)})]}),le(AA,{caption:(u||`${r?"Donut":"Pie"} chart, ${v.length} segments`)+(y?`, ${y} non-positive values omitted`:""),labels:b,values:g})]})}const HA=[{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 color, plus its variant and on-color",inCode:'the `color` prop on `Icon` — `<Icon color="primary">`',inFigma:"set the Icons mode on an `Icon-Theme-*` layer"}];function OA(){const e=["## How color works","","Three mode collections carry color, 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 a of HA)e.push(`| **${a.name}** | ${a.moves} | ${a.inCode} | ${a.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 color *is* the message.","","A component with no such layer has nothing of its own to recolor.",""),e.join("\n")}const EA=e=>e.replace(/\|/g,"\\|"),VA=(e,a)=>[`| ${e.join(" | ")} |`,`| ${e.map(()=>"---").join(" | ")} |`,...a.map(e=>`| ${e.map(EA).join(" | ")} |`)],QA=(e,a)=>a.length?[`### ${e}`,"",...a.map(e=>`- ${e}`),""]:[];function jA(e,a=""){const t=[`## ${e.name}`,"",e.summary,""];if(e.insteadUse.length&&(t.push("### Reach for something else when",""),t.push(...e.insteadUse.map(e=>`- ${e.when} → \`${e.use}\``)),t.push("")),e.props.length){t.push("### Props",""),t.push(...VA(["Prop","Type","Values","Default"],e.props.map(e=>[`\`${e.name}\``,e.type,e.values?.length?e.values.map(e=>`\`${e}\``).join(" · "):"—",`\`${e.default}\``])));const a=e.props.filter(e=>e.note);a.length&&(t.push(""),t.push(...a.map(e=>`- \`${e.name}\` — ${e.note}`))),t.push("")}if(e.states.length){t.push("### States",""),t.push(...VA(["State","Set by"],e.states.map(e=>[e.state,"interaction"===e.setBy?"interaction — not a prop":e.setBy])));const a=e.states.filter(e=>e.note);a.length&&(t.push(""),t.push(...a.map(e=>`- ${e.state} — ${e.note}`))),t.push("")}e.theming.length&&(t.push("### Theming",""),t.push(...VA(["Collection","In code","In Figma"],e.theming.map(e=>["—"===e.collection?"—":`**${e.collection}**`,e.inCode,e.inFigma]))),e.themingNotes?.length&&(t.push(""),t.push(...e.themingNotes.map(e=>`- ${e}`))),t.push("")),e.tokens.length&&(t.push("### Tokens it reads",""),t.push(...VA(["Token","Sets","Varies with","Figma variable"],e.tokens.map(e=>[`\`${e.name}\``,e.sets,e.variesWith,"—"===e.figma?"—":`\`${e.figma}\``]))),t.push("")),t.push(...QA("Composition",e.composition)),t.push(...QA("Accessibility",e.accessibility)),t.push(...QA("Gotchas",e.gotchas));const r=a;return r.length&&t.push(...r,""),t.join("\n").replace(/\n{3,}/g,"\n\n").trimEnd()+"\n"}var qA={};export{hy as Accordion,gy as AccordionDetails,uy as AccordionGroup,fy as AccordionSummary,rv as Alert,xS as AlertDialog,bv as AlertShowcase,Yt as AltDisplayLarge,Jt as AltDisplayMedium,Zt as AltDisplaySmall,wz as AppBar,Nz as AppBarShowcase,Rz as Autocomplete,Vz as AutocompleteShowcase,yg as Avatar,zg as AvatarGroup,jv as AvatarShowcase,Ag as Badge,av as BadgeShowcase,RA as BarChart,aA as BevelText,oA as BevelTextShowcase,nB as BlackWhiteToggleButtonGroup,mr as Body,gr as Body1,br as Body2,fr as BodyBold,vr as BodyLarge,yr as BodyLargeBold,xr as BodyLargeSemibold,pr as BodySemibold,dr as BodySmall,hr as BodySmallBold,ur as BodySmallSemibold,Zz as BottomNavigation,sS as BottomNavigationShowcase,pk as Box,jM as BoxShowcase,wf as BrandIcon,Ex as BreadcrumbItem,Ox as Breadcrumbs,jx as BreadcrumbsShowcase,Yg as Button,oy as ButtonGroup,Vr as ButtonSmall,Qr as ButtonText,qt as CAP_HEIGHT_TRIM,MA as CHART_LABEL_TYPE,CA as CHART_TOKENS,HA as COLOR_COLLECTIONS,HA as COLOUR_COLLECTIONS,mg as COMPONENT_DOCS,zr as Caption,Sr as CaptionBold,zv as Card,Sy as CenteredStack,Rv as Checkbox,nb as Chip,mw as CircularProgress,vw as CircularProgressShowcase,Yb as CodeBlock,kM as Colors,qM as Container,Xb as CopyButton,xT as Copyright,HT as CopyrightShowcase,XT as CurvedText,_T as CurvedTextShowcase,fg as DEFAULT_AVATAR_SRC,LS as DEFAULT_ITEMS,tM as DOCS_ORIGIN,eB as DefaultToggleButtonGroup,zz as DesktopAppBar,vS as Dialog,SS as DialogShowcase,Gt as DisplayLarge,Ut as DisplayMedium,Xt as DisplaySmall,mx as Divider,ww as DotsLoader,fz as Drawer,gz as DrawerClose,vz as DrawerContent,bz as DrawerHeader,FS as DrawerShowcase,HS as DropZone,Ww as Dropdown,xy as DynoStack,AS as DynoTreeView,YB as EXAMPLES,gC as EmailTextField,nw as ErrorTag,sB as ErrorToggleButtonGroup,Lr as Eyebrow,Nr as EyebrowLarge,Ir as EyebrowMedium,Ar as EyebrowSmall,zM as FOUNDATIONS,ax as Fab,cx as FabShowcase,zT as Footer,RT as FooterShowcase,yS as FormDialog,zt as Ghost,nT as Gradient,GM as Grid,My as GridStack,$t as H1,Kt as H2,_t as H3,er as H4,ar as H5,tr as H6,yy as HStack,rr as Heading,Bf as Icon,QS as IconBadge,LM as IconBadgeShowcase,_v as IconShowcase,tw as InfoTag,oB as InfoToggleButtonGroup,Ay as InsetStack,Cr as Label,wr as LabelExtraSmall,Br as LabelLarge,kr as LabelSmall,Mr as Legal,Tr as LegalSemibold,NS as LightTreeView,FA as LineChart,oT as LinearGradient,zw as LinearLoader,hT as LinearProgress,bT as LinearProgressShowcase,ti as Link,YS as List,XS as ListItem,US as ListItemDecorator,yw as Loader,lA as MainLayout,Rw as Menu,Dw as MenuButton,Pw as MenuDivider,Fw as MenuItem,Qw as MenuShowcase,sT as MeshCardGradient,cT as MeshGradient,BM as MiniSwatch,Sz as MobileAppBar,Yw as Modal,aw as NeutralTag,iB as NeutralToggleButtonGroup,NM as NumberField,PM as NumberFieldShowcase,Or as NumberLarge,Hr as NumberMedium,Pr as NumberSmall,xC as NumberTextField,lz as OmniDesignProvider,xy as OmniStack,AS as OmniTreeView,Bw as OverlayLoader,Dr as Overline,Fr as OverlineLarge,Rr as OverlineMedium,Wr as OverlineSmall,kw as PageLoader,Gx as Pagination,Zx as PaginationShowcase,Jw as Paper,bC as PasswordTextField,yC as PhoneTextField,PA as PieChart,Zw as Popover,KS as PrimaryTag,aB as PrimaryToggleButtonGroup,ck as RATIO_NAMES,lT as RadialGradient,Mx as Radio,Tx as RadioGroup,Ax as RadioInput,tk as Rail,lk as RailShowcase,Dx as RangeSlider,Px as Rating,Px as RatingInput,hk as Ratio,zk as RatioShowcase,Cy as ResponsiveStack,Ly as ScrollStack,Xy as SearchField,Bk as SearchFieldShowcase,vC as SearchTextField,_S as SecondaryTag,tB as SecondaryToggleButtonGroup,UM as Section,XM as SectionShowcase,qf as Select,Wk as SelectShowcase,wv as SelectableCard,uA as SettingsPanel,Pk as Sidebar,Cw as SkeletonCard,Sw as SkeletonLoader,Wx as Slider,Wx as SliderInput,Ek as Snackbar,Uk as SnackbarShowcase,IS as SolidTreeView,wy as SpaceBetweenStack,CM as Spacing,YM as SpeedDial,eT as SpeedDialShowcase,By as Stack,Ty as StackDivider,Fy as StackShowcase,Jk as StateMessage,aC as Step,eC as Stepper,lC as StepperShowcase,nr as Subtitle,cr as Subtitle1,sr as Subtitle2,ir as SubtitleLarge,lr as SubtitleMedium,or as SubtitleSmall,rw as SuccessTag,lB as SuccessToggleButtonGroup,dz as Surfaced,uC as Swatch,dv as Switch,dv as SwitchInput,JS as TAG_COLORS,ZS as TAG_COLOR_TOKEN_MAP,xb as Tab,vb as TabList,yb as TabPanel,pC as Table,bb as Tabs,ty as TabsShowcase,$S as Tag,dw as TagShowcase,ew as TertiaryTag,rB as TertiaryToggleButtonGroup,SC as TextArea,fC as TextField,wC as TextFieldGroup,Sx as TextInput,sz as ThemedZone,OM as ToggleButton,KC as ToggleButtonGroup,CC as Toolbar,AC as ToolbarShowcase,DC as Tooltip,PC as TreeBranch,YC as TreeViewShowcase,jt as Typography,zC as URLTextField,zy as VStack,iw as WarningTag,cB as WarningToggleButtonGroup,ky as WrapStack,kA as chartGeometry,nM as componentDocsIndexUrl,iM as componentDocsUrl,qA as default,rM as docsSlug,yt as ghostBlockSx,JB as hasExample,OA as renderColorSystem,OA as renderColourSystem,jA as renderComponentDoc,SM as renderFoundations,xt as useGhost,cz as useOmniDesign,_k as useStepperContext,gb as useTabsContext};
19
+ */function Qb(){if(Ab)return Tb;Ab=1;var e=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;return Tb=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 a={},t=0;t<10;t++)a["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(a).map(function(e){return a[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,i){for(var n,o,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(r),c=1;c<arguments.length;c++){for(var s in n=Object(arguments[c]))a.call(n,s)&&(l[s]=n[s]);if(e){o=e(n);for(var d=0;d<o.length;d++)t.call(n,o[d])&&(l[o[d]]=n[o[d]])}}return l},Tb}function jb(){if(Ib)return Lb;Ib=1;return Lb="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}function qb(){return Wb?Nb:(Wb=1,Nb=Function.call.bind(Object.prototype.hasOwnProperty))}if("production"!==process.env.NODE_ENV){var Gb=Vb();wb.exports=function(){if(Pb)return Fb;Pb=1;var e=Vb(),a=Qb(),t=jb(),r=qb(),i=function(){if(Rb)return Db;Rb=1;var e=function(){};if("production"!==process.env.NODE_ENV){var a=jb(),t={},r=qb();e=function(e){var a="Warning: "+e;"undefined"!=typeof console&&console.error(a);try{throw new Error(a)}catch(e){}}}function i(i,n,o,l,c){if("production"!==process.env.NODE_ENV)for(var s in i)if(r(i,s)){var d;try{if("function"!=typeof i[s]){var u=Error((l||"React class")+": "+o+" type `"+s+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof i[s]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw u.name="Invariant Violation",u}d=i[s](n,s,l,o,null,a)}catch(e){d=e}if(!d||d instanceof Error||e((l||"React class")+": type specification of "+o+" `"+s+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof d+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),d instanceof Error&&!(d.message in t)){t[d.message]=!0;var h=c?c():"";e("Failed "+o+" type: "+d.message+(null!=h?h:""))}}}return i.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(t={})},Db=i}(),n=function(){};function o(){return null}return"production"!==process.env.NODE_ENV&&(n=function(e){var a="Warning: "+e;"undefined"!=typeof console&&console.error(a);try{throw new Error(a)}catch(e){}}),Fb=function(l,c){var s="function"==typeof Symbol&&Symbol.iterator,d="<<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:p(o),arrayOf:function(e){return p(function(a,r,i,n,o){if("function"!=typeof e)return new m("Property `"+o+"` of component `"+i+"` has invalid PropType notation inside arrayOf.");var l=a[r];if(!Array.isArray(l))return new m("Invalid "+n+" `"+o+"` of type `"+v(l)+"` supplied to `"+i+"`, expected an array.");for(var c=0;c<l.length;c++){var s=e(l,c,i,n,o+"["+c+"]",t);if(s instanceof Error)return s}return null})},element:p(function(e,a,t,r,i){var n=e[a];return l(n)?null:new m("Invalid "+r+" `"+i+"` of type `"+v(n)+"` supplied to `"+t+"`, expected a single ReactElement.")}),elementType:p(function(a,t,r,i,n){var o=a[t];return e.isValidElementType(o)?null:new m("Invalid "+i+" `"+n+"` of type `"+v(o)+"` supplied to `"+r+"`, expected a single ReactElement type.")}),instanceOf:function(e){return p(function(a,t,r,i,n){if(!(a[t]instanceof e)){var o=e.name||d;return new m("Invalid "+i+" `"+n+"` of type `"+((l=a[t]).constructor&&l.constructor.name?l.constructor.name:d)+"` supplied to `"+r+"`, expected instance of `"+o+"`.")}var l;return null})},node:p(function(e,a,t,r,i){return b(e[a])?null:new m("Invalid "+r+" `"+i+"` supplied to `"+t+"`, expected a ReactNode.")}),objectOf:function(e){return p(function(a,i,n,o,l){if("function"!=typeof e)return new m("Property `"+l+"` of component `"+n+"` has invalid PropType notation inside objectOf.");var c=a[i],s=v(c);if("object"!==s)return new m("Invalid "+o+" `"+l+"` of type `"+s+"` supplied to `"+n+"`, expected an object.");for(var d in c)if(r(c,d)){var u=e(c,d,n,o,l+"."+d,t);if(u instanceof Error)return u}return null})},oneOf:function(e){return Array.isArray(e)?p(function(a,t,r,i,n){for(var o=a[t],l=0;l<e.length;l++)if(h(o,e[l]))return null;var c=JSON.stringify(e,function(e,a){return"symbol"===x(a)?String(a):a});return new m("Invalid "+i+" `"+n+"` of value `"+String(o)+"` supplied to `"+r+"`, expected one of "+c+".")}):("production"!==process.env.NODE_ENV&&n(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."),o)},oneOfType:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&n("Invalid argument supplied to oneOfType, expected an instance of array."),o;for(var a=0;a<e.length;a++){var i=e[a];if("function"!=typeof i)return n("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+y(i)+" at index "+a+"."),o}return p(function(a,i,n,o,l){for(var c=[],s=0;s<e.length;s++){var d=(0,e[s])(a,i,n,o,l,t);if(null==d)return null;d.data&&r(d.data,"expectedType")&&c.push(d.data.expectedType)}return new m("Invalid "+o+" `"+l+"` supplied to `"+n+"`"+(c.length>0?", expected one of type ["+c.join(", ")+"]":"")+".")})},shape:function(e){return p(function(a,r,i,n,o){var l=a[r],c=v(l);if("object"!==c)return new m("Invalid "+n+" `"+o+"` of type `"+c+"` supplied to `"+i+"`, expected `object`.");for(var s in e){var d=e[s];if("function"!=typeof d)return g(i,n,o,s,x(d));var u=d(l,s,i,n,o+"."+s,t);if(u)return u}return null})},exact:function(e){return p(function(i,n,o,l,c){var s=i[n],d=v(s);if("object"!==d)return new m("Invalid "+l+" `"+c+"` of type `"+d+"` supplied to `"+o+"`, expected `object`.");var u=a({},i[n],e);for(var h in u){var p=e[h];if(r(e,h)&&"function"!=typeof p)return g(o,l,c,h,x(p));if(!p)return new m("Invalid "+l+" `"+c+"` key `"+h+"` supplied to `"+o+"`.\nBad object: "+JSON.stringify(i[n],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var f=p(s,h,o,l,c+"."+h,t);if(f)return f}return null})}};function h(e,a){return e===a?0!==e||1/e==1/a:e!=e&&a!=a}function m(e,a){this.message=e,this.data=a&&"object"==typeof a?a:{},this.stack=""}function p(e){if("production"!==process.env.NODE_ENV)var a={},r=0;function i(i,o,l,s,u,h,p){if(s=s||d,h=h||l,p!==t){if(c){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=s+":"+l;!a[g]&&r<3&&(n("You are manually calling a React.PropTypes validation function for the `"+h+"` prop on `"+s+"`. 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."),a[g]=!0,r++)}}return null==o[l]?i?null===o[l]?new m("The "+u+" `"+h+"` is marked as required in `"+s+"`, but its value is `null`."):new m("The "+u+" `"+h+"` is marked as required in `"+s+"`, but its value is `undefined`."):null:e(o,l,s,u,h)}var o=i.bind(null,!1);return o.isRequired=i.bind(null,!0),o}function f(e){return p(function(a,t,r,i,n,o){var l=a[t];return v(l)!==e?new m("Invalid "+i+" `"+n+"` of type `"+x(l)+"` supplied to `"+r+"`, expected `"+e+"`.",{expectedType:e}):null})}function g(e,a,t,r,i){return new m((e||"React class")+": "+a+" type `"+t+"."+r+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+i+"`.")}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 a=function(e){var a=e&&(s&&e[s]||e["@@iterator"]);if("function"==typeof a)return a}(e);if(!a)return!1;var t,r=a.call(e);if(a!==e.entries){for(;!(t=r.next()).done;)if(!b(t.value))return!1}else for(;!(t=r.next()).done;){var i=t.value;if(i&&!b(i[1]))return!1}return!0;default:return!1}}function v(e){var a=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,a){return"symbol"===e||!!a&&("Symbol"===a["@@toStringTag"]||"function"==typeof Symbol&&a instanceof Symbol)}(a,e)?"symbol":a}function x(e){if(null==e)return""+e;var a=v(e);if("object"===a){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return a}function y(e){var a=x(e);switch(a){case"array":case"object":return"an "+a;case"boolean":case"date":case"regexp":return"a "+a;default:return a}}return m.prototype=Error.prototype,u.checkPropTypes=i,u.resetWarningCache=i.resetWarningCache,u.PropTypes=u,u},Fb}()(Gb.isElement,!0)}else wb.exports=function(){if(Ob)return Hb;Ob=1;var e=jb();function a(){}function t(){}return t.resetWarningCache=a,Hb=function(){function r(a,t,r,i,n,o){if(o!==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 r}r.isRequired=r;var n={array:r,bigint:r,bool:r,func:r,number:r,object:r,string:r,symbol:r,any:r,arrayOf:i,element:r,elementType:r,instanceOf:i,node:r,objectOf:i,oneOf:i,oneOfType:i,shape:i,exact:i,checkPropTypes:t,resetWarningCache:a};return n.PropTypes=n,n}}()();var Ub=zb(wb.exports);function Xb({code:e,label:t="Copy code"}){const[r,i]=a(!1);return le(x,{title:r?"Copied!":t,children:le(Zg,{variant:"ghost",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":r?"Copied":t,sx:{color:r?"var(--Icons-Success, var(--Text))":"var(--Quiet)"},children:le(r?he:pe,{fontSize:"small"})})})}Xb.propTypes={code:Ub.string.isRequired,label:Ub.string};function Yb({code:e="",language:a="JSX",showCopy:t=!0,showHeader:r=!0,maxHeight:i,wrap:n=!1,sx:o={},...l}){const c=r&&t&&!!e,s=!r&&t&&!!e;return se(h,{"data-theme":"Neutral","data-surface":"Surface-Dimmest",sx:{backgroundColor:"var(--Background)",borderRadius:"min(var(--Card-Radius, var(--Style-Border-Radius)), 12px)",overflow:"hidden",...o},...l,children:[r&&(a||t)&&se(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,px:2,py:1,borderBottom:"1px solid var(--Border)",minHeight:40},children:[le(zr,{color:"quiet",children:a}),c?le(Xb,{code:e}):null]}),se(h,{sx:{display:"flex",alignItems:"flex-start",gap:1,p:2},children:[le(h,{component:"pre",sx:{margin:0,fontFamily:"inherit",flex:1,minWidth:0,overflow:"auto",maxHeight:i},children:le(h,{component:"code",sx:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:"13px",lineHeight:1.6,color:"var(--Text)",whiteSpace:n?"pre-wrap":"pre",wordBreak:n?"break-word":"normal",display:"block"},children:e})}),s?le(Xb,{code:e}):null]})]})}Yb.propTypes={code:Ub.string,language:Ub.string,showCopy:Ub.bool,showHeader:Ub.bool,maxHeight:Ub.oneOfType([Ub.number,Ub.string]),wrap:Ub.bool,sx:Ub.object};const Jb=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Zb=["primary","secondary","tertiary","neutral","info","success","warning","error"];function $b({ratio:e,threshold:a}){if(!e)return le(zr,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return se(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[se(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(zr,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Kb({label:e,ratio:a,threshold:t,note:r}){return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[le(dr,{style:{color:"var(--Text)"},children:e}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),le($b,{ratio:a,threshold:t})]})}function _b({color:e,selected:a,onClick:t}){const r=Jb(e);return le(x,{title:r,arrow:!0,children:le(h,{onClick:()=>t(e),role:"button","aria-label":"Select "+r+" color","aria-pressed":a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",border:a?"2px solid var(--Text)":"1px solid var(--Border)",outline:a?"2px solid var(--Focus-Visible)":"2px solid transparent",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center","&:hover":{transform:"scale(1.1)"}},children:a&&le(he,{sx:{fontSize:24,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})})}function ev({label:e,selected:a,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:a?"var(--Buttons-Primary-Button)":"transparent",color:a?"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:a?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function av(){const[e,r]=a("Default"),[i,n]=a("Surface"),[o,l]=a("solid"),[c,s]=a("primary"),[d,u]=a("5"),[p,f]=a(!1),[g,b]=a(!1),[v,x]=a({}),k=()=>"solid"===o?c:c+"-"+o,C=()=>{if(p)return;const e=parseInt(d,10);return isNaN(e)||String(e)!==d.trim()?d||void 0:e};return t(()=>{const e=Jb(c),a={};"solid"===o?(a.badgeBg=Xr("--Icons-"+e),a.badgeText=Xr("--Icons-On-"+e),a.badgeBorder=null):"outline"===o&&(a.badgeBg=Xr("--Background"),a.badgeText=Xr("--Text"),a.badgeBorder=Xr("--Buttons-"+e+"-Border")),a.background=Xr("--Background"),a.focusVisible=Xr("--Focus-Visible"),x(a)},[o,c]),se(h,{sx:{width:"100%"},children:[le(yM,{title:"Badge",component:"Badge"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:r,surface:i,onSurfaceChange:n})}),le(mr,{color:"quiet",style:{marginBottom:24},children:"Small label attached to an element showing status or count. Solid and outline variants across all 8 colors."}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Badge",theme:e,surface:i})}),le(yb,{value:1,children:se(y,{container:!0,sx:{minHeight:400},children:[se(y,{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:se(m,{direction:"row",spacing:6,alignItems:"center",children:[le(Ag,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(xe,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(Ag,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(ye,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(Ag,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(ze,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})})]})}),le(Yb,{code:(()=>{const e=['variant="'+k()+'"'];if(p)e.push("dot");else{const a=C();"number"==typeof a?e.push("badgeContent={"+a+"}"):a&&e.push('badgeContent="'+a+'"')}return g&&e.push("showZero"),"<Badge "+e.join(" ")+">\n <MailIcon />\n</Badge>"})(),language:"JSX",sx:{borderRadius:0,borderBottom:"1px solid var(--Border)"}})]}),se(y,{item:!0,sx:{width:{xs:"calc(100vw - 432px)",md:"calc((100vw - 432px) / 2)"},flexShrink:0,p:3,backgroundColor:"var(--Container)",overflowY:"auto"},children:[le(er,{children:"Playground"}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,flexWrap:"wrap",sx:{gap:1},children:["solid","outline"].map(e=>le(ev,{label:Jb(e),selected:o===e,onClick:()=>l(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Zb.map(e=>le(_b,{color:e,selected:c===e,onClick:s},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Counter 16px · Dot 8px · Padding 4px · Digits 11px"})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BADGE CONTENT"}),le(z,{size:"small",value:d,onChange:e=>u(e.target.value),placeholder:"Number or text",disabled:p,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"}}})]}),se(h,{sx:{mt:3},children:[le(S,{control:le(w,{checked:p,onChange:e=>f(e.target.checked),size:"small"}),label:le(dr,{children:"Dot (no content)"})}),le(S,{control:le(w,{checked:g,onChange:e=>b(e.target.checked),size:"small"}),label:le(dr,{children:"Show zero"})})]})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(h,{sx:{p:4},children:[le(er,{children:"Accessibility Requirements"}),se(dr,{color:"quiet",style:{marginBottom:32},children:["Based on current Playground settings: ",o," · ",c]}),se(m,{spacing:4,children:[se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Badge Text Contrast"}),le(dr,{color:"quiet",style:{marginBottom:16},children:"Badge text must have ≥ 4.5:1 contrast against badge background (WCAG 1.4.3 AA)"}),le(Kb,{label:"Badge Text vs. Badge Background",ratio:Ur(v.badgeText,v.badgeBg),threshold:4.5,note:"solid"===o?"var(--Buttons-{C}-Text) vs var(--Buttons-{C}-Button)":"outline"===o?"var(--Text) vs var(--Background)":"var(--Buttons-{C}-Text) vs var(--Buttons-{C}-Button)"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Badge Visibility"}),le(dr,{color:"quiet",style:{marginBottom:16},children:"Badge background (or border) must have ≥ 3:1 contrast against page background (WCAG 1.4.11)"}),(()=>{const e=Ur(v.badgeBg,v.background),a=v.badgeBorder?Ur(v.badgeBorder,v.background):null;return le(Kb,{label:"Badge vs. Page Background",ratio:(t=e,r=a,t||r?t?r?parseFloat(t)>=parseFloat(r)?t:r:t:r:null),threshold:3.1,note:"outline"===o?"Border "+(a||"--")+":1 — outline relies on border contrast":"BG "+(e||"--")+":1"});var t,r})()]}),se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Badge Sizing"}),le(dr,{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:se(h,{children:[le(dr,{children:"Counter"}),le(zr,{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:se(h,{children:[le(dr,{children:"Status dot"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"8px diameter circle"})]})})]}),se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA & Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{style:{display:"block",marginBottom:2},children:"Screenreader support:"}),le(zr,{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").'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{style:{display:"block",marginBottom:2},children:"Dot variant:"}),le(zr,{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."})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{style:{display:"block",marginBottom:2},children:"Max overflow:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:'When content exceeds max (default 99), displays "99+" visually but announces the actual number to screenreaders.'})]})]})]})]})]})]}),le(yb,{value:3,children:le(gM,{component:"Badge"})})]})]})}const tv={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 rv({children:e,variant:a="light",surface:t,color:r="info",size:i="medium",startDecorator:n,endDecorator:o,className:l="",sx:c={},...s}){const d=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===r?"Default":r),u=tv[i]||tv.medium,m="default"===r?"Default":d,p=t||("light"===a?"Surface-Brightest":"Surface"),f="var(--Buttons-"+d+"-Border)",g=se(ce,{children:[n&&le(h,{className:"alert-start-decorator",sx:{display:"inline-flex",alignItems:"center",fontSize:u.iconSize,lineHeight:1,flexShrink:0,mt:"2px"},children:n}),le(h,{className:"alert-message",sx:{flex:1,minWidth:0},children:"string"==typeof e?le("small"===i?dr:mr,{children:e}):e}),o&&le(h,{className:"alert-end-decorator",sx:{display:"inline-flex",alignItems:"flex-start",flexShrink:0,gap:u.gap,paddingTop:"2px"},children:o})]});return le(h,{role:"alert",className:"alert alert-"+a+" alert-"+i+" alert-"+r+" "+l,sx:{border:"1px solid "+f,borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",boxShadow:If,...c},...s,children:le(h,{"data-theme":m,"data-surface":p,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 iv=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];function nv(e){const a=(t=e).charAt(0).toUpperCase()+t.slice(1);var t;return{type:"outline",color:a,trackOff:"var(--Background)",trackOffBorder:"var(--Border)",trackOn:"var(--Icons-"+a+")",trackOnBorder:"var(--Icons-"+a+")",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-"+a+")",iconOff:"var(--Background)",iconOn:"var(--Icons-"+a+")"}}const ov=/-light$/,lv=new Set;const cv={small:{trackW:35,trackH:20,handle:15,dotRadius:"var(--Sizing-2, 16px)",icon:12},medium:{trackW:42,trackH:24,handle:20,dotRadius:"var(--Sizing-2-and-Half, 20px)",icon:16},large:{trackW:56,trackH:32,handle:28,dotRadius:"var(--Sizing-2-and-Half, 20px)",icon:24}};function sv({variant:e="default",size:a="medium",checked:t,defaultChecked:r,onChange:i,disabled:n=!1,label:o,labelPlacement:l="end",name:c,value:s,icon:d,iconOn:u,iconOff:h,className:m="",sx:p={},"aria-label":f,"aria-labelledby":g,...b}){const v=function(){const e={};return iv.forEach(a=>{e[a+"-outline"]=nv(a)}),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=nv("primary"),e}(),x=function(e){const a=String(e||"default");if("light"!==a&&!ov.test(a))return a;const t="light"===a?"primary":a.replace(ov,"");return"production"===process.env.NODE_ENV||lv.has(a)||(lv.add(a),console.warn('[Switch] variant="'+a+'" — the -light shape was removed. Rendering variant="'+t+'". The on state takes its color from the Icons collection (--Icons-<Color> / --Icons-On-<Color>).')),t}(e),y=v[x]||v.default,z=cv[a]||cv.medium,w="small"===a?dr:mr,C=z.handle,B=Math.max(24,z.trackW),M=Math.max(24,z.trackH),T=(M-z.trackH)/2,A={width:C,height:C,borderRadius:z.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:z.icon,height:z.icon,display:"block"}},L={width:z.trackW,minWidth:24,height:M,minHeight:24,padding:0,overflow:"visible",opacity:n?"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:B-z.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:Nf},"&:active + .MuiSwitch-track":{boxShadow:If},"&.Mui-focusVisible + .MuiSwitch-track":{outline:"1px solid var(--Focus-Visible)",outlineOffset:"2px"},"&.Mui-disabled + .MuiSwitch-track":{opacity:1}},"& .MuiSwitch-track":{width:z.trackW,height:z.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))"},...p},I=void 0!==h?h:d,N=void 0!==u?u:d,W=e=>le("span",{className:"MuiSwitch-thumb",children:e}),D=le(k,{...void 0!==I||void 0!==N?{icon:W(I),checkedIcon:W(N)}:{},checked:t,defaultChecked:r,onChange:i,disabled:n,name:c,value:s,slotProps:{input:{...f?{"aria-label":f}:{},...g?{"aria-labelledby":g}:{}}},className:"switch-"+x+" "+m,sx:L,disableRipple:!0,...b});return o?le(S,{control:D,label:le(w,{component:"span",sx:{color:n?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===a?"13px":"15px",fontWeight:500,opacity:n?"var(--Disabled, 0.38)":1},children:o}),labelPlacement:l,sx:{gap:"8px",marginLeft:0,marginRight:0}}):D}const dv=sv,uv=e.forwardRef(function({theme:e=null,surface:a="Surface",children:t,minHeight:r=160,sx:i={}},n){return le(h,{ref:n,"data-theme":e||void 0,"data-surface":a,sx:{p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:r,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",...i},children:t})}),hv=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",mv=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],pv={info:le(Se,{}),success:le(we,{}),warning:le(ke,{}),error:le(Ce,{})};function fv({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function gv({color:e,selected:a,onClick:t}){const r=hv(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function bv(){const[e,t]=a("light"),[r,i]=a("info"),[n,o]=a("medium"),[l,c]=a(!0),[s,d]=a("Default"),[u,p]=a("Surface"),f=l&&pv[r]?le(Bf,{size:"small",sx:{color:"inherit"},children:pv[r]}):void 0;return se(h,{sx:{pb:8},children:[le(yM,{title:"Alert",component:"Alert"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Alert",theme:s,surface:u})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,children:le(h,{sx:{width:"100%",maxWidth:480},children:le(rv,{variant:e,color:r,size:n,startDecorator:f,children:"This is an alert message. Check the details for more information."})})}),le(Yb,{code:(()=>{const a=['variant="'+e+'"'];return"info"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),l&&pv[r]&&a.push("startDecorator={<Icon><"+hv(r)+"Icon /></Icon>}"),"<Alert "+a.join(" ")+">\n This is an alert message.\n</Alert>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["solid","light"].map(a=>le(fv,{label:hv(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:mv.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(gv,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(fv,{label:hv(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Icon"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>c(e.target.checked),size:"small","aria-label":"Show icon"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Alert"})})]})]})}const vv={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},xv={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)"}},yv=l({variant:"default",color:"primary",size:"medium",orientation:"vertical"});function zv({children:e,variant:a="solid",color:t="default",surface:r,size:i="medium",orientation:n="vertical",clickable:o=!1,selected:l=!1,elevated:c=!1,draggable:s=!1,onClick:d,disabled:u=!1,href:m,className:p="",sx:f={},...g}){const b="default"===t,v=b?"":vv[t],x=r||(b?"Container":"dark"===a?"Surface-Dimmest":"light"===a?"Surface-Brightest":"Surface"),y=xv[i]||xv.medium,z="horizontal"===n,S=!!s,w=!u&&(o||!!d||!!m||l||S),k=m?"a":"div",C=l?`var(--Buttons-${(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===t?"Default":t)}-Border)`:"var(--Buttons-Default-Border)",B=w?l?`2px solid ${C}`:"1px solid var(--Buttons-Default-Border)":"1px solid var(--Border-Variant)",M=c?Nf:If,T=c?Wf:Nf,A=c?If:Lf;return le(yv.Provider,{value:{variant:a,color:t,size:i,orientation:n},children:le(h,{component:k,href:m||void 0,onClick:w?d:void 0,role:w?"button":void 0,tabIndex:w?0:void 0,"aria-pressed":!!l||void 0,"aria-disabled":u||void 0,draggable:S||void 0,className:"card card-"+a+" card-"+i+" card-"+n+(w?" card-clickable":"")+(l?" card-selected":"")+(c?" card-elevated":"")+(S?" card-draggable":"")+" "+p,sx:{display:"flex",border:B,borderRadius:"var(--Card-Radius)",boxShadow:M,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"},...w&&!S&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:T,transform:"translateY(-1px)"},"&:active":{transform:"translateY(0) scale(0.995)",boxShadow:A},"&: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:T},"&:active":{cursor:"grabbing",zIndex:10,boxShadow:Wf,transform:"scale(1.02)",borderWidth:"2px",borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...f},onKeyDown:w?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),d?.())}:void 0,...g,children:le(h,{"data-theme":v||void 0,"data-surface":x,sx:{display:"flex",flexDirection:z?"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 Sv({children:e,className:a="",sx:t={},...r}){const{size:i}=c(yv);return le(h,{className:"card-content "+a,sx:{display:"flex",flexDirection:"column",gap:(xv[i]||xv.medium).gap,flex:1,minWidth:0,...t},...r,children:e})}const wv=e=>le(zv,{clickable:!0,selected:e.selected,...e}),kv=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],Cv=e=>"Default"===e?"var(--Quiet)":"var(--Buttons-"+e+"-Border)";function Bv(){const e={};return kv.forEach(a=>{e[a]=function(e){const a=Hf(e);return{color:a,borderToken:Cv(a),icon:"var(--Buttons-"+a+"-Border)"}}(a)}),e}const Mv=/-(outline|light|solid)$/,Tv=new Set;function Av(e){const a=Bv();return a[function(e){const a=String(e||"default");if(!Mv.test(a))return a;const t=a.replace(Mv,"");return"production"===process.env.NODE_ENV||Tv.has(a)||(Tv.add(a),console.warn('[Checkbox] variant="'+a+'" — the -outline/-light/-solid shapes were removed; a Checkbox has one look and `variant` selects color only. Rendering variant="'+t+'". Update the call site.')),t}(e)]||a.default}const Lv={small:{box:16,icon:12,gap:4,touchTarget:24,LabelComp:dr},medium:{box:20,icon:14,gap:8,touchTarget:24,LabelComp:mr},large:{box:24,icon:18,gap:12,touchTarget:24,LabelComp:vr}};function Iv({size:e,variant:a,checked:t,indeterminate:r}){const i=Av(a),n=Lv[e]||Lv.medium,o=t||r,l=i.borderToken,c="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:n.box,height:n.box,boxSizing:"border-box",borderRadius:c,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:o&&le(r?Be:he,{sx:{fontSize:n.icon,color:i.icon}})})})}function Nv({size:e,variant:a}){return le(Iv,{size:e,variant:a,checked:!1,indeterminate:!1})}function Wv({size:e,variant:a}){return le(Iv,{size:e,variant:a,checked:!0,indeterminate:!1})}function Dv({size:e,variant:a}){return le(Iv,{size:e,variant:a,checked:!1,indeterminate:!0})}function Rv({variant:e="primary",size:a="medium",label:t,checked:r,defaultChecked:i,indeterminate:n=!1,disabled:o=!1,onChange:l,name:c,value:s,className:d="",sx:u={},"aria-label":h,"aria-labelledby":m,"aria-describedby":p,inputProps:f={},...g}){Av(e);const b=Lv[a]||Lv.medium,v=b.LabelComp,x={...f,...h&&{"aria-label":h},...m&&{"aria-labelledby":m},...p&&{"aria-describedby":p}},y=le(w,{checked:r,defaultChecked:i,indeterminate:n,disabled:o,onChange:l,name:c,value:s,icon:le(Nv,{size:a,variant:e}),checkedIcon:le(Wv,{size:a,variant:e}),indeterminateIcon:le(Dv,{size:a,variant:e}),className:"chk-"+e+" "+d,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},...g});return t?le(S,{control:y,label:le(v,{component:"span",sx:{color:o?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:t}),disabled:o,sx:{marginLeft:0,marginRight:0,gap:b.gap+"px",alignItems:"center","&.Mui-disabled .MuiTypography-root":{color:"var(--Text-Quiet)",opacity:.6}}}):y}const Fv=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]}],Pv=["photo","icon","initials"],Hv={photo:"Photo",icon:"Icon",initials:"Initials"},Ov=["xx-small","x-small","small","medium","large","x-large","xx-large"],Ev={"xx-small":"XXS","x-small":"XS",small:"Small",medium:"Medium",large:"Large","x-large":"XL","xx-large":"XXL"};function Vv({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Qv({color:e,selected:a,onClick:t}){const r=(i=e)?i.charAt(0).toUpperCase()+i.slice(1):"";var i;return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function jv(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a("initials"),[l,c]=a(!1),[s,d]=a(!1),[u,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface"),x="photo"===n,z=()=>{const a={size:r,clickable:l,insideButton:s};return x||(a.color=e),"initials"===n&&(a.initials="LN"),"photo"===n&&(a.src="https://i.pravatar.cc/150?img=3",a.alt="User avatar"),a};return se(h,{sx:{pb:8},children:[le(yM,{title:"Avatar",component:"Avatar"}),le(h,{sx:{mt:1},children:le(Xf,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Avatar",theme:f,surface:b})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:f,surface:b,children:u?se(zg,{max:3,size:r,children:[le(yg,{...z()}),le(yg,{color:e,size:r,initials:"AB"}),le(yg,{color:e,size:r,initials:"CD"}),le(yg,{color:e,size:r,initials:"EF"})]}):le(yg,{...z()})}),le(Yb,{code:(()=>{const a=[];return x||"default"===e||a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),"initials"===n&&a.push('initials="LN"'),"photo"===n&&a.push('src="..." alt="User avatar"'),l&&a.push("clickable onClick={handleClick}"),s&&a.push("insideButton"),u?"<AvatarGroup max={3}>\n <Avatar "+a.join(" ")+' />\n <Avatar initials="AB" />\n <Avatar initials="CD" />\n <Avatar initials="EF" />\n</AvatarGroup>':"<Avatar "+a.join(" ")+" />"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{sx:{opacity:x?.4:1,pointerEvents:x?"none":"auto"},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Fv.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(Qv,{color:a,selected:e===a,onClick:t},a))})]},a.label))}),x&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:"Color is ignored when the avatar shows a photo — the image carries the visual."})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Ov.map(e=>le(Vv,{label:Ev[e],selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CONTENT"}),le(m,{direction:"row",spacing:1,children:Pv.map(e=>le(Vv,{label:Hv[e],selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Clickable"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Interactive with hover/focus states"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>c(e.target.checked),size:"small","aria-label":"Clickable"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Inside Button"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds 2px horizontal margin so the avatar sits cleanly in a Button"})]}),le(sv,{variant:"default-outline",checked:s,onChange:e=>d(e.target.checked),size:"small","aria-label":"Inside Button"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Group"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show as AvatarGroup with overflow"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show group"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Avatar"})})]})]})}const qv=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Gv={default:"Default",quiet:"Quiet",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Uv=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Xv=["filled","outlined","rounded","twotone","sharp"],Yv={filled:"Filled",outlined:"Outlined",rounded:"Rounded",twotone:"Two Tone",sharp:"Sharp"},Jv={Home:{filled:Te,outlined:Pe,rounded:Xe,twotone:na,sharp:ba},Favorite:{filled:Me,outlined:He,rounded:Ye,twotone:oa,sharp:va},Delete:{filled:Ae,outlined:Oe,rounded:Je,twotone:la,sharp:xa},Settings:{filled:Le,outlined:Ee,rounded:Ze,twotone:ca,sharp:ya},Search:{filled:Ie,outlined:Ie,rounded:$e,twotone:sa,sharp:za},Star:{filled:Ne,outlined:Ve,rounded:Ke,twotone:da,sharp:Sa},Person:{filled:We,outlined:Qe,rounded:_e,twotone:ua,sharp:wa},Notifications:{filled:ye,outlined:je,rounded:ea,twotone:ha,sharp:ka},Visibility:{filled:De,outlined:qe,rounded:aa,twotone:ma,sharp:Ca},ShoppingCart:{filled:ze,outlined:Ge,rounded:ta,twotone:pa,sharp:Ba},Lock:{filled:Re,outlined:Ue,rounded:ra,twotone:fa,sharp:Ma},Info:{filled:Fe,outlined:Se,rounded:ia,twotone:ga,sharp:Ta}};function Zv({ratio:e,threshold:a}){if(!e)return le(zr,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return se(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[se(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(zr,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function $v({label:e,ratio:a,threshold:t,note:r}){return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[le(dr,{style:{color:"var(--Text)"},children:e}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),le(Zv,{ratio:a,threshold:t})]})}function Kv({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"primary":"primary-outline",size:"small",onClick:t,children:e})}function _v(){const[e,r]=a("Default"),[i,n]=a("Surface"),[o,l]=a("filled"),[c,s]=a("default"),[d,u]=a("medium"),[p,f]=a("40"),[g,b]=a(!1),[v,x]=a("Home"),[z,S]=a(""),[w,k]=a({}),C=Gv[c]||"Default",B="twotone"===o,M="custom"===d?(parseInt(p,10)||40)+"px":{xs:"12px",small:"16px",medium:"24px",large:"36px"}[d]||"24px",T=function(e,a){return Jv[e]?.[a]||Jv[e]?.filled||Te}(v,o),A=function(e){return{outlined:"Outlined",rounded:"Rounded",twotone:"TwoTone",sharp:"Sharp"}[e]||""}(o),L=v+A+"Icon",I=z.trim().length>0,N="<Icon>\n <"+L+' />\n</Icon>\n{/* aria-hidden="true" by default */}',W='<Icon aria-label="'+(I?z.trim():v+" icon")+'">\n <'+L+' />\n</Icon>\n{/* role="img" added automatically */}';return t(()=>{k({background:Xr("--Background"),iconColor:Xr("--Icons-"+C),iconVariant:Xr("--Icons-Variant-"+C)})},[c,C]),se(h,{sx:{pb:8},children:[le(yM,{title:"Icon",component:"Icon"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:r,surface:i,onSurfaceChange:n})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Icon",theme:e,surface:i})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{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(Bf,{color:c,size:d,fontSize:"custom"===d?parseInt(p,10)||40:void 0,disabled:g,twoTone:B,"aria-label":I?z.trim():void 0,children:le(T,{})})}),le(Yb,{code:(()=>{const e=[];"default"!==c&&e.push('color="'+c+'"'),"custom"===d?(e.push('size="custom"'),e.push("fontSize={"+(parseInt(p,10)||40)+"}")):"medium"!==d&&e.push('size="'+d+'"'),B&&e.push("twoTone"),g&&e.push("disabled"),I&&e.push('aria-label="'+z.trim()+'"');const a=e.length?" "+e.join(" "):"";return"import "+L+" from '@mui/icons-material/"+v+(A||"")+"';\n\n<Icon"+a+">\n <"+L+" />\n</Icon>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ICON"}),le(h,{component:"input",type:"text",value:v,onChange:e=>x(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)"}}}),se(zr,{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 ↗"})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Xv.map(e=>le(Kv,{label:Yv[e],selected:o===e,onClick:()=>l(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Uv.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>{const a=Gv[e],t=c===e;return le(h,{component:"button",onClick:()=>s(e),"aria-label":"Select "+qv(e),"aria-pressed":t,title:qv(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Icons-"+a+")",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(he,{sx:{fontSize:16,color:"var(--Background)",pointerEvents:"none"}})},e)})})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["small","medium","large","custom"].map(e=>le(Kv,{label:qv(e),selected:d===e,onClick:()=>u(e)},e))}),"custom"===d&&se(h,{sx:{display:"flex",alignItems:"center",gap:1,mt:1.5},children:[le(h,{component:"input",type:"number",value:p,onChange:e=>f(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(zr,{style:{color:"var(--Text-Quiet)"},children:"px"})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ARIA LABEL"}),le(h,{component:"input",type:"text",value:z,onChange:e=>S(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(zr,{style:{color:I?"var(--Tags-Success-Text)":"var(--Text-Quiet)",display:"block",marginTop:6},children:I?'✓ Meaningful — role="img" aria-label="'+z.trim()+'"':'Decorative — aria-hidden="true" (invisible to screen readers)'})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Reduces opacity to 0.38"})]}),le(sv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Toggle disabled"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),se(h,{sx:{p:3},children:[se(dr,{color:"quiet",style:{marginBottom:24},children:[Yv[o]," / ",qv(c)," / ","custom"===d?p+"px":d,I?" / meaningful":" / decorative"]}),se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Icon Contrast (WCAG 1.4.11 — 3:1)"}),le(dr,{color:"quiet",style:{marginBottom:16},children:"Non-text elements must contrast 3:1 against the page background."}),le($v,{label:"var(--Icons-"+C+") vs. var(--Background)",ratio:Ur(w.iconColor,w.background),threshold:3,note:L+" at "+M+" in "+qv(c)+" color"}),B&&le($v,{label:"var(--Icons-Variant-"+C+") vs. var(--Background)",ratio:Ur(w.iconVariant,w.background),threshold:3,note:"Two-tone secondary fill — must also meet 3:1"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)",backgroundColor:I?"var(--Tags-Success-BG, rgba(0,200,0,0.05))":"transparent",px:1,borderRadius:"4px"},children:[se(dr,{style:{fontWeight:600},children:["Current icon — ",I?"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:I?W:N})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Decorative (no aria-label):"}),le(zr,{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:N})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Meaningful (with aria-label):"}),le(zr,{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:W})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:["Disabled state",g?" ← current":"",":"]}),le(zr,{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."})]}),B&&se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:["Two-tone",B?" ← current":"",":"]}),se(zr,{style:{color:"var(--Text-Quiet)"},children:["Secondary fill uses var(--Icons-Variant-",C,"). Both the primary and secondary fills must meet 3:1 contrast independently."]})]}),se(h,{sx:{py:1.5},children:[se(dr,{children:["Touch target — ",M," icon","small"===d?" ⚠":" ✓",":"]}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"small"===d?"Small icons (20px) need a 24px minimum target area around them (WCAG 2.5.5). Wrap in a button with padding.":"Icon is "+M+" — meets 24px minimum. Ensure the wrapping interactive element also meets 24×24px."})]})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Size Reference"}),le(m,{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:a,px:t,note:r},i,n)=>se(h,{sx:{py:1.5,borderBottom:i<n.length-1?"1px solid var(--Border)":"none",display:"flex",justifyContent:"space-between",alignItems:"flex-start"},children:[se(h,{children:[se(dr,{children:[e," — ",t]}),le(zr,{style:{color:"var(--Text-Quiet)"},children:r})]}),d===a&&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))})]})]})]})]}),le(yb,{value:3,children:le(gM,{component:"Icon"})})]})]})}const ex={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:32,fontSize:"15px",px:20,gap:10}};function ax({children:e,icon:a,label:t,variant:r="solid",color:i="default",size:n="medium",extended:o=!1,animate:l=!1,disabled:c=!1,onClick:s,ariaLabel:d,className:u="",sx:m={},...p}){"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 f=function(e){const a=Hf("default"===e?"tertiary":e);return{bg:"var(--Buttons-"+a+"-Button)",text:"var(--Buttons-"+a+"-Text)",border:"var(--Buttons-"+a+"-Border)",hover:"var(--Buttons-"+a+"-Hover)",active:"var(--Buttons-"+a+"-Pressed)"}}(i),g=ex[n]||ex.medium,b=a||e||le(Aa,{sx:{fontSize:g.iconSize}}),v=d||t||"Action";return se(ce,{children:[l&&le("style",{children:"\n@keyframes fab-pulse {\n 0% { box-shadow: 0 0 0 0 var(--fab-pulse-color); }\n 50% { box-shadow: 0 0 0 8px var(--fab-pulse-color); }\n 100% { box-shadow: 0 0 0 8px transparent; }\n}\n"}),se(h,{component:"button",type:"button",role:"button","aria-label":v,onClick:s,disabled:c,className:"fab fab-solid fab-"+i+" fab-"+n+(o?" fab-extended":"")+(l?" fab-animate":"")+(c?" fab-disabled":"")+(u?" "+u:""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:o?g.gap+"px":0,...o?{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:`${Ef(i)}, ${Wf}`,fontSize:g.fontSize,fontFamily:"inherit",fontWeight:600,cursor:c?"not-allowed":"pointer",opacity:c?"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":c?{}:{backgroundColor:f.hover,boxShadow:`${Ef(i)}, ${Df}`},"&:active":c?{}:{backgroundColor:f.active,transform:"scale(0.96)",boxShadow:Ef(i)},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"},...l&&!c&&{"--fab-pulse-color":`color-mix(in srgb, ${f.bg} 50%, transparent)`,animation:"fab-pulse 2s var(--Motion-Easing-Standard, ease) infinite","@media (prefers-reduced-motion: reduce)":{animation:"none"}},...m},...p,children:[le(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",fontSize:g.iconSize+"px",color:"inherit","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}},children:b}),o&&t&&le(h,{component:"span",sx:{whiteSpace:"nowrap",lineHeight:1},children:t})]})]})}const tx=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",rx=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],ix={default:"Tertiary",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function nx({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function ox({color:e,selected:a,onClick:t}){const r=ix[e]||"Primary";return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+tx(e),"aria-pressed":a,title:tx(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function lx({value:e,onChange:a,placeholder:t,label:r}){return se(h,{children:[r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4},children:r}),le(h,{component:"input",type:"text",value:e,onChange:e=>a(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 cx(){const[e,t]=a("default"),[i,n]=a("medium"),[o,l]=a("Add"),[c,s]=a(!1),[d,u]=a("Create"),[p,f]=a(!1),[g,b]=a(!1),[v,x]=a("Default"),[z,S]=a("Surface"),w=e,k=r(null),C={small:32,medium:48,large:56},B=Kr(k,a=>{const t=e.charAt(0).toUpperCase()+e.slice(1).replace(/-([a-z])/g,(e,a)=>a.toUpperCase());return{background:a("--Background"),focusVisible:a("--Focus-Visible"),fabBg:a("--Buttons-"+t+"-Button"),fabIcon:a("--Buttons-"+t+"-Text"),fabBorder:a("--Buttons-"+t+"-Border"),hover:a("--Buttons-"+t+"-Hover"),pressed:a("--Buttons-"+t+"-Pressed")}},[e,v,z]);return se(h,{sx:{pb:8},children:[le(yM,{title:"Floating Action Button",component:"Fab"}),le(h,{sx:{mt:1},children:le(Xf,{theme:v,onThemeChange:x,surface:z,onSurfaceChange:S})}),le(h,{ref:k,...v?{"data-theme":v}:{},"data-surface":z,sx:{position:"absolute",width:0,height:0,overflow:"hidden"},"aria-hidden":"true"}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Fab",theme:v,surface:z})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:v,surface:z,children:le(ax,{color:w,size:i,icon:(()=>{const e=ge[o]||ge.Add;return le(Bf,{size:"medium",children:le(e,{})})})(),extended:c,label:d,animate:p,disabled:g,ariaLabel:c?d:o})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),a.push("icon={<"+o+"Icon />}"),c&&(a.push("extended"),a.push('label="'+d+'"')),p&&a.push("animate"),g&&a.push("disabled"),a.push('ariaLabel="'+(c?d:o)+'"'),"<Fab\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[le(h,{sx:{mb:3}}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:rx.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(ox,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(nx,{label:tx(e),selected:i===e,onClick:()=>n(e)},e))})]}),se(h,{sx:{mt:3},children:[le(lx,{label:"Icon Name",value:o,onChange:l,placeholder:"Add"}),se(zr,{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)"]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Extended"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pill shape with icon + text label"})]}),le(sv,{checked:c,onChange:e=>s(e.target.checked),size:"small","aria-label":"Extended"})]}),c&&le(h,{sx:{mt:1.5},children:le(lx,{label:"Label Text",value:d,onChange:u,placeholder:"Create"})}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Animation"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pulse ring effect to draw attention"})]}),le(sv,{checked:p,onChange:e=>f(e.target.checked),size:"small","aria-label":"Animation"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Disabled"})]})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[se(ar,{children:["Contrast — ",e," on ",z,v?" / "+v:""]}),se(m,{spacing:0,children:[le(Zr,{label:"FAB fill vs. page background",note:"Non-text contrast, 3:1 — the FAB has to be findable against what it floats over.",ratio:Ur(B.fabBg,B.background),threshold:3}),le(Zr,{label:"Icon vs. FAB fill — resting",note:"The glyph carries the meaning, so it is held to text contrast.",ratio:Ur(B.fabIcon,B.fabBg),threshold:4.5}),le(Zr,{label:"Icon vs. FAB fill — hover",ratio:Ur(B.fabIcon,B.hover,B.fabBg),threshold:4.5}),le(Zr,{label:"Icon vs. FAB fill — pressed",ratio:Ur(B.fabIcon,B.pressed,B.fabBg),threshold:4.5}),le(Zr,{label:"Focus ring vs. page background",note:"3:1. The ring sits outside the FAB, so it is measured against what is behind it, not against the fill.",ratio:Ur(B.focusVisible,B.background),threshold:3}),le($r,{label:"Target size",note:"WCAG 2.5.8 asks 24x24 CSS px minimum; 44x44 is the AAA / platform figure.",pass:C[i]>=44,detail:C[i]+"px"})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Role:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<button role="button" aria-label="...">'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Label:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:c?"Extended: visible label provides accessible name.":"Icon-only: aria-label is required."})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Focus:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) with 2px offset."})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Disabled:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"HTML disabled attribute. 50% opacity, removed from tab order."})]})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Best Practices"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"One per screen:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"FABs represent the primary action. Use at most one per view."})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Extended for clarity:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Use extended variant when the icon alone may be ambiguous."})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Animation:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Use sparingly. Respect prefers-reduced-motion."})]})]})]})]})})]}),le(yb,{value:3,children:le(gM,{component:"Fab"})})]})]})}const sx=e=>e.charAt(0).toUpperCase()+e.slice(1);function dx(e){return e&&"default"!==e&&"border-variant"!==e?"border"===e?"var(--Border)":"var(--Icons-"+sx(e)+")":"var(--Border-Variant)"}function ux(e,a){const t=e&&!["default","border","border-variant"].includes(e)?sx(e):"Default",r=dx(e);return"light"===a?{bg:"var(--Tag-"+t+"-BG)",text:"var(--Tag-"+t+"-Text)",border:"1px solid "+r}:{bg:"var(--Background)",text:"var(--Text)",border:"1px solid "+r}}const hx={small:"var(--Sm-Divider, 0.5px)",medium:"var(--Divider, 1px)",large:"var(--Lg-Divider, 2px)"};function mx({color:e="default",orientation:a="horizontal",size:t="small",children:r,indicatorText:i,indicatorStyle:n="outline",textAlign:o="center",className:l="",sx:c={},...s}){const d=dx(e),u=hx[t]||hx.small,m=!(!r&&!i),p=r||i,f="vertical"===a;if(f&&!m)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:d,flexShrink:0,...c},...s});if(f&&m){const a=ux(e,n),t="top"===o?"0 0 10%":"1 1 auto",r="top"===o?"1 1 auto":"bottom"===o?"0 0 10%":"1 1 auto";return se(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,...c},...s,children:[le(h,{sx:{flex:t,width:u,backgroundColor:d}}),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:a.bg,color:a.text,border:a.border,boxSizing:"border-box"},children:p}),le(h,{sx:{flex:r,width:u,backgroundColor:d}})]})}if(!m)return le(h,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" "+l,sx:{width:"100%",height:u,backgroundColor:d,flexShrink:0,...c},...s});const g=ux(e,n),b="left"===o?"0 0 10%":"1 1 auto",v="left"===o?"1 1 auto":"right"===o?"0 0 10%":"1 1 auto";return se(h,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" divider-indicator "+l,sx:{display:"flex",alignItems:"center",width:"100%",...c},...s,children:[le(h,{sx:{flex:b,height:u,backgroundColor:d}}),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:p}),le(h,{sx:{flex:v,height:u,backgroundColor:d}})]})}const px=["primary","secondary","tertiary","neutral","info","success","warning","error"];function fx(e){const a=(t=e).charAt(0).toUpperCase()+t.slice(1);var t;return{bg:"var(--Hover)",border:"var(--Buttons-"+a+"-Border)",hoverBorder:"var(--Buttons-"+a+"-Hover)",pressedBorder:"var(--Buttons-"+a+"-Pressed)",text:"var(--Text)",focusBg:"var(--Hover)"}}const gx={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}},bx={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}},vx={small:{resting:"Body-Small",shrunk:"Label-ExtraSmall"},medium:{resting:"Body-Medium",shrunk:"Label-Small"},large:{resting:"Body-Large",shrunk:"Label-Medium"}},xx=e=>({fontSize:"var(--"+e+"-Font-Size)",fontWeight:"var(--"+e+"-Font-Weight)",letterSpacing:"var(--"+e+"-Letter-Spacing)"});const yx={info:Se,success:we,warning:ke,error:Ce},zx={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 Sx({variant:e="primary-outline",size:a="medium",label:t,labelPosition:r="standard",placeholder:i,helperText:n,validation:l,validationMessage:c,disabled:s=!1,id:d,value:u,defaultValue:m,onChange:p,name:f,type:g="text",multiline:b=!1,rows:v,maxRows:x,resize:y="vertical",startAdornment:S,endAdornment:w,fullWidth:k=!1,className:M="",sx:T={},"aria-label":A,"aria-labelledby":L,"aria-describedby":I,"aria-required":N,"aria-invalid":W,inputProps:D={},...R}){const F=function(){const e={};return px.forEach(a=>{e[a+"-outline"]=fx(a)}),e.outline=fx("primary"),e}(),P=F[e]||F["primary-outline"],H="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=H?bx[a]||bx.medium:gx[a]||gx.medium,E=o(),V=d||E,{labelX:Q,padX:j,restingY:q,shrunkY:G}=function(e,a){const t=parseInt(e.height,10)||56,r=parseInt(e.fontSize,10)||15,i="var(--Input-Padding, "+(e.leftPad||14)+"px)",n=(e.iconSize||18)+8;return{labelX:a?"calc("+i+" + "+n+"px)":i,padX:i,clearance:a?n:0,restingY:Math.round((t-1.4375*r)/2),shrunkY:6}}(O,!!S),U=vx[a]||vx.medium,X="var(--Text)",Y=l?zx[l]:null,J=l?yx[l]:null,Z=Y||P,$=Z.border,K={...D,...A&&{"aria-label":A},...L&&{"aria-labelledby":L},...I&&{"aria-describedby":I},...N&&{"aria-required":N},...W&&{"aria-invalid":W}};return se(h,{className:"inp-"+e+" "+M,sx:{width:k?"100%":"auto",...T},children:[(()=>{if(!t||H)return null;return le("small"===a?dr:mr,{component:"label",htmlFor:V,sx:{display:"block",marginBottom:"6px",color:s?"var(--Quiet)":"var(--Text)",fontSize:O.labelSize,fontWeight:500,opacity:s?"var(--Disabled, 0.38)":1},children:t})})(),le(h,{sx:{border:"1px solid "+$,borderRadius:"small"===a?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===a?"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",...!s&&{"&:hover":{borderColor:Z.hoverBorder},"&:active":{borderColor:Z.pressedBorder}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{children:le(z,{value:u,defaultValue:m,onChange:p,name:f,type:g,disabled:s,placeholder:i,id:V,multiline:b,rows:v,maxRows:x,fullWidth:!0,label:H?t:void 0,variant:"outlined",size:"small"===a?"small":"medium",inputProps:K,InputProps:{startAdornment:S?le(C,{position:"start",children:S}):void 0,endAdornment:(()=>{if(w)return le(C,{position:"end",children:w})})()},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",...H&&{alignItems:"stretch"},"& fieldset":{border:"none"},"&.Mui-focused":{color:X},"&:not(.Mui-focused) .MuiOutlinedInput-input:not(:placeholder-shown)":{color:X},"&.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)"},...H&&{"& .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"},...S&&{"& input":{paddingLeft:0},"& textarea":{paddingLeft:0}}}},"& .MuiInputLabel-root":{color:"var(--Quiet)",fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",...xx(U.resting),transformOrigin:"top left",transition:"transform 0.15s ease, font-size 0.15s ease, color 0.15s ease",transform:"translate("+Q+", "+q+"px)","&.MuiInputLabel-shrink":{transform:"translate("+Q+", "+G+"px)",...xx(U.shrunk),color:"var(--Quiet)"},"&.Mui-focused":{color:X},"&.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"}},...R})})}),l&&c?se(h,{sx:{display:"flex",alignItems:"center",gap:"6px",marginTop:"4px",marginLeft:"2px"},children:[J&&le(J,{sx:{fontSize:O.iconSize,color:Y.icon,flexShrink:0}}),le(B,{sx:{color:Y.text,fontSize:"small"===a?"11px":"12px",margin:0},children:c})]}):n?le(B,{sx:{color:"var(--Quiet)",fontSize:"small"===a?"11px":"12px",marginTop:"4px",marginLeft:"2px"},children:n}):null]})}const wx=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],kx=Hf,Cx={small:{touchTarget:24,box:16,dot:8,gap:4,LabelComp:dr},medium:{touchTarget:24,box:20,dot:10,gap:8,LabelComp:mr},large:{touchTarget:24,box:24,dot:12,gap:12,LabelComp:vr}};function Bx({size:e,color:a,checked:t}){const r=kx(a),i="Default"===r?"var(--Quiet)":"var(--Buttons-"+r+"-Border)",n="var(--Buttons-"+r+"-Border)",o=Cx[e]||Cx.medium;return le(h,{className:"radio-circle-icon",sx:{width:o.box,height:o.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:o.dot,height:o.dot,borderRadius:"50%",backgroundColor:n,transition:"transform 0.15s ease-in-out"}})})}function Mx({theme:e,surface:a,color:t="primary",size:r="medium",label:i,labelPlacement:n="end",checked:o,disabled:l=!1,onChange:c,name:s,value:d,className:u="",sx:h={},"aria-label":m,"aria-labelledby":p,"aria-describedby":f,inputProps:g={},...b}){const v=wx.includes(t)?t:"primary",x=Cx[r]||Cx.medium,y=x.LabelComp,z=(x.touchTarget-x.box)/2,w={...g,...m&&{"aria-label":m},...p&&{"aria-labelledby":p},...f&&{"aria-describedby":f}},k=le(M,{checked:o,disabled:l,onChange:c,name:s,value:d,icon:le(Bx,{size:r,color:v,checked:!1}),checkedIcon:le(Bx,{size:r,color:v,checked:!0}),"data-theme":e||void 0,"data-surface":a||void 0,className:"radio-"+v+" "+u,inputProps:w,disableRipple:!0,sx:{padding:z+"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 i?le(S,{control:k,label:le(y,{component:"span",sx:{color:l?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:i}),labelPlacement:n,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 Tx({color:e="primary",size:a="medium",label:t,options:r=[],value:i,onChange:n,orientation:o="vertical",labelPlacement:l="end",disabled:c=!1,spacing:s=1,name:d,className:u="",sx:h={},"aria-label":m,"aria-labelledby":p,...f}){return se(T,{component:"fieldset",disabled:c,className:"radio-group-"+e+" "+u,sx:h,children:[t&&le(A,{component:"legend",sx:{color:c?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===a?"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(L,{value:i,onChange:n,name:d,"aria-label":m,"aria-labelledby":p,row:"horizontal"===o,sx:{display:"flex",flexDirection:"horizontal"===o?"row":"column",flexWrap:"horizontal"===o?"wrap":"nowrap",alignItems:"horizontal"===o?"center":"flex-start",gap:s},...f,children:r.map(t=>le(Mx,{color:e,size:a,label:t.label,labelPlacement:l,value:t.value,disabled:t.disabled||c},t.value))})]})}const Ax=Mx,Lx=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];const Ix={small:{visual:12,track:2,labelSize:11},medium:{visual:16,track:4,labelSize:12},large:{visual:20,track:6,labelSize:13}};function Nx({theme:e,surface:a,variant:t="default",size:r="medium",value:i,defaultValue:n,onChange:o,onChangeCommitted:l,min:c=0,max:s=100,step:d=1,marks:u=!1,valueLabelDisplay:m="off",orientation:p="horizontal",fill:f,track:g="standard",disabled:b=!1,label:v,name:x,className:y="",sx:z={},"aria-label":S,"aria-labelledby":w,...k}){const C=function(){const e={};return Lx.forEach(a=>{e[a]=function(e){const a=(t=e).charAt(0).toUpperCase()+t.slice(1);var t;return{thumb:"var(--Buttons-"+a+"-Border)",thumbBorder:"1px solid var(--Background)",track:"var(--Buttons-"+a+"-Button)",trackBorder:"1px solid var(--Buttons-"+a+"-Border)",rail:"var(--Background)",railBorder:"1px solid var(--Buttons-"+a+"-Border)",valueLabel:"var(--Text)",valueLabelText:"var(--Background)"}}(a)}),e}(),B=C[t]||C.default,M=Ix[r]||Ix.medium,T=null===d,A=(!T||!0!==u)&&u;if("production"!==process.env.NODE_ENV&&T&&!0===u&&console.warn("[OmniDesign] <Slider step={null} marks> — restricted values needs the ARRAY of values to snap to. `marks={true}` names none, and MUI throws on it. Pass marks={[{ value, label }, …]}."),"production"!==process.env.NODE_ENV&&!0===u&&d){const e=Math.floor((s-c)/d)+1;e>20&&console.warn(`[OmniDesign] <Slider marks> with step=${d} over ${c}–${s} draws ${e} ticks, which reads as a hatched band rather than a scale. Pass a marks ARRAY for the values worth showing, or raise \`step\` so the ticks match where the thumb can land. Marks are code-only — the design has no mark element.`)}const L="vertical"===p,N=Array.isArray(i)||Array.isArray(n),W=void 0!==f?f:g,D="inverted"===W,R=!1===W,F="small"===r?dr:mr,P=M.track+2,H=D?B.track:B.rail,O=B.railBorder,E=D?B.rail:B.track,V=B.trackBorder,Q={color:"transparent"===B.track?B.thumb:B.track,height:L?void 0:P,width:L?P:void 0,"& .MuiSlider-rail":{backgroundColor:H,border:O||"none",boxSizing:O?"content-box":"border-box",opacity:1,height:L?void 0:O?M.track:P,width:L?O?M.track:P:void 0,borderRadius:P/2},"& .MuiSlider-track":{boxSizing:V?"content-box":"border-box",backgroundColor:E,border:V||"none",height:L?void 0:V?M.track:P,width:L?V?M.track:P:void 0,borderRadius:P/2},"& .MuiSlider-thumb":{width:24,height:24,backgroundColor:"transparent",border:"none",boxShadow:"none",transition:"none","--_height":M.visual+"px","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))","&::after":{display:"none"},"&::before":{content:'""',position:"absolute",width:M.visual,height:M.visual,borderRadius:"50%",backgroundColor:B.thumb,border:B.thumbBorder||"none",boxShadow:`${Ef(t)}, ${If}`,transition:"box-shadow 0.15s ease-in-out",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},"&:hover::before":{boxShadow:`${Ef(t)}, ${Nf}`},"&.Mui-focusVisible::before, &:focus-visible::before":{boxShadow:`${Ef(t)}, ${Nf}, 0 0 0 1px var(--Focus-Visible)`},"&.Mui-active::before":{boxShadow:Ef(t)},"&.Mui-focusVisible":{outline:"none",borderRadius:"50%"},"&.Mui-focusVisible::before":{boxShadow:`${Ef(t)}, ${Nf}`}},...N?L?{'& .MuiSlider-thumb[data-index="0"]::before':{top:0,left:"50%",transform:"translateX(-50%)"},'& .MuiSlider-thumb[data-index="1"]::before':{top:"auto",bottom:0,left:"50%",transform:"translateX(-50%)"}}:{'& .MuiSlider-thumb[data-index="0"]::before':{left:"auto",right:0,top:"50%",transform:"translateY(-50%)"},'& .MuiSlider-thumb[data-index="1"]::before':{left:0,right:"auto",top:"50%",transform:"translateY(-50%)"}}:{},"& .MuiSlider-valueLabel":{backgroundColor:B.valueLabel,color:B.valueLabelText,fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",fontSize:"var(--Label-ExtraSmall-Font-Size)",fontWeight:"var(--Label-ExtraSmall-Font-Weight)",letterSpacing:"var(--Label-ExtraSmall-Letter-Spacing)",lineHeight:"var(--Label-ExtraSmall-Line-Height)",borderRadius:"var(--Sizing-1, 8px)",padding:"var(--Sizing-Half, 4px) var(--Sizing-1, 8px)","&::before":{backgroundColor:B.valueLabel}},"& .MuiSlider-mark":{backgroundColor:"var(--Quiet)",width:2,height:2,borderRadius:"50%"},"& .MuiSlider-markActive":{backgroundColor:"var(--Background)",opacity:1},"& .MuiSlider-markLabel":{color:"var(--Text-Quiet)",fontSize:M.labelSize},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none","& .MuiSlider-thumb::before":{boxShadow:"none"}},...z},j=le(I,{value:i,defaultValue:n,onChange:o,onChangeCommitted:l,min:c,max:s,step:d,marks:A,valueLabelDisplay:m,orientation:p,track:D?"inverted":!R&&"normal",disabled:b,name:x,"aria-label":S,"aria-labelledby":w,slotProps:b?{input:{"aria-disabled":"true"}}:void 0,className:"slider-"+t+" "+y,"data-theme":e||void 0,"data-surface":a||void 0,sx:Q,...k});return v?se(h,{sx:{width:L?"auto":"100%",height:L?"100%":"auto",display:"flex",flexDirection:"column",gap:"4px"},children:[le(F,{component:"label",sx:{color:b?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===r?"13px":"15px",fontWeight:500,opacity:b?"var(--Disabled, 0.38)":1},children:v}),j]}):j}const Wx=Nx,Dx=Nx,Rx={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Fx={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 Px({theme:e,surface:t,value:r,defaultValue:i,onChange:n,max:o=5,precision:l=1,color:c="default",size:s="medium",readOnly:d=!1,disabled:u=!1,emptyLabel:m="No rating",className:p="",sx:f={},...g}){const[b,v]=a(i??null),[x,y]=a(null),z=void 0!==r,S=z?r:b,w=null!==x?x:S,k=.5===l,C=!d&&!u,B=Rx[c]||Rx.default,M=Fx[s]||Fx.medium,T="var(--Buttons-"+B+"-Button)",A="var(--Buttons-"+B+"-Border)",L=e=>{if(!C)return;const a=e===S?null:e;z||v(a),n?.(a)},I=(e,a)=>{if(!C||!k)return;y(a?e+.5:e+1)},N=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-"+B+"-Border)",strokeWidth:1}}}:{},W=e=>{const a=e+1,t=e+.5,r=null!==w&&a<=w,i=null!==w&&!r&&k&&t<=w,n=i?Na:Ne,c=((e,a)=>e||a?{color:T,filter:"drop-shadow(0 1px 2px rgba(var(--Dropshadow-Color), 0.28))",transition:"filter 0.15s ease","& .MuiSvgIcon-root":{stroke:A,strokeWidth:.5}}:{color:"transparent","& .MuiSvgIcon-root":{stroke:"var(--Quiet)",strokeWidth:1}})(r,i);return k&&C?se(h,{sx:{position:"relative",display:"inline-flex",cursor:"pointer",...c,...N},onMouseLeave:()=>y(null),children:[le(h,{sx:{position:"absolute",left:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>I(e,!0),onClick:()=>L(t)}),le(h,{sx:{position:"absolute",right:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>I(e,!1),onClick:()=>L(a)}),le(n,{sx:{fontSize:M.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":r,"aria-label":a+" star"+(1!==a?"s":""),tabIndex:C?0:-1,onClick:()=>L(a),onMouseEnter:()=>C&&y(a),onMouseLeave:()=>C&&y(null),onKeyDown:e=>{if(C&&("ArrowRight"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),L(Math.min((S||0)+l,o))),"ArrowLeft"===e.key||"ArrowDown"===e.key)){e.preventDefault();const a=Math.max((S||0)-l,0);L(a||null)}},sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",padding:0,...M.minHit&&{minWidth:M.minHit+"px",minHeight:M.minHit+"px"},cursor:u?"not-allowed":C?"pointer":"default",outline:"none",transition:"transform 0.1s ease",...c,...N,"&:active":C?{transform:"scale(0.95)"}:{},"&:focus-visible":C?{outline:M.focusWidth+"px solid var(--Focus-Visible)",outlineOffset:M.focusInset+"px",borderRadius:"2px"}:{},"&:disabled":{cursor:"not-allowed",opacity:"var(--Disabled, 0.38)"}},children:le(n,{sx:{fontSize:M.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})},e)};return se(h,{role:C?"radiogroup":"img","aria-label":"Rating"+(null!==S?": "+S+" of "+o+" stars":": "+m),"data-theme":e||void 0,"data-surface":t||void 0,className:"rating rating-"+c+" rating-"+s+(d?" rating-readonly":"")+(u?" rating-disabled":"")+(null===S?" rating-empty":"")+(p?" "+p:""),sx:{display:"inline-flex",alignItems:"center",gap:M.gap+"px",opacity:u?"var(--Disabled, 0.38)":1,fontFamily:"inherit",...f},...g,children:[Array.from({length:o},(e,a)=>W(a)),null===S&&!x&&le(zr,{style:{color:"var(--Quiet)",marginLeft:4},children:m})]})}const Hx={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 Ox({children:a,separator:t="/",size:r="medium",condense:i=!1,maxItems:n=4,itemsBeforeCollapse:o=1,itemsAfterCollapse:l=1,backOnlyMobile:c=!1,onExpand:u,className:m="",sx:p={},...f}){const g=Hx[r]||Hx.medium,b=s.toArray(a).filter(d),v=b.length,x=i&&v>n;let y=b;const[z,S]=e.useState(!1);if(x&&!z){const e=b.slice(0,o),a=b.slice(v-l);y=[...e,le(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"),...a]}const w=[];y.forEach((e,a)=>{const r=x&&!z?a===y.length-1:a===v-1;w.push(le(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-"+a)),a<y.length-1&&w.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-"+a))});const k=v>=2?b[v-2]:null;return se(h,{component:"nav","aria-label":"Breadcrumb",className:"breadcrumbs breadcrumbs-"+r+" "+m,sx:{fontSize:g.fontSize,fontFamily:"var(--Body-Font-Family)",lineHeight:1.5,...p},...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,...c&&{"@media (max-width: 600px)":{display:"none"}}},children:w}),c&&k&&se(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(k,{style:{...k.props?.style||{},textDecoration:"underline",textUnderlineOffset:"3px"}})]})]})}function Ex({children:e,href:a,className:t="",sx:r={},...i}){const n=!!a;return le(h,{component:n?"a":"span",href:a||void 0,className:"breadcrumb-link "+t,sx:{color:"inherit",textDecoration:n?"underline":"none",textUnderlineOffset:"3px",textDecorationThickness:"1px",cursor:n?"pointer":"default",transition:"color 0.15s ease",...n&&{"&:hover":{textDecorationThickness:"2px"},"&:active":{textDecorationThickness:"3px"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"2px"}},...r},...i,children:e})}const Vx=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"";function Qx({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function jx(){const[e,t]=a("medium"),[r,i]=a("/"),[n,o]=a(!1),[l,c]=a("Default"),[s,d]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Breadcrumbs",component:"Breadcrumbs"}),le(h,{sx:{mt:1},children:le(Xf,{theme:l,onThemeChange:c,surface:s,onSurfaceChange:d})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Breadcrumbs",theme:l,surface:s})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:l,surface:s,children:se(Ox,{size:e,separator:r,condense:n,maxItems:3,children:[le(Ex,{href:"#",children:"Home"}),le(Ex,{href:"#",children:"Products"}),le(Ex,{href:"#",children:"Shoes"}),le(Ex,{children:"Running Shoes"})]})}),le(Yb,{code:(()=>{const a=[];return"medium"!==e&&a.push('size="'+e+'"'),"/"!==r&&a.push('separator="'+r+'"'),n&&a.push("condense maxItems={3}"),"<Breadcrumbs"+(a.length?" "+a.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(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(a=>le(Qx,{label:Vx(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEPARATOR"}),le(m,{direction:"row",spacing:1,children:["/","›","→","·","|"].map(e=>le(Qx,{label:e,selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Condense"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Collapse middle items into ellipsis"})]}),le(sv,{variant:"default-outline",checked:n,onChange:e=>o(e.target.checked),size:"small","aria-label":"Condense"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Breadcrumbs"})})]})]})}const qx={small:{btnSize:"small",fontSize:"13px",gap:"2px"},medium:{btnSize:"medium",fontSize:"14px",gap:"4px"},large:{btnSize:"large",fontSize:"16px",gap:"4px"}};function Gx({theme:e,surface:t,count:r=10,page:n,defaultPage:o=1,onChange:l,color:c="default",size:s="medium",siblingCount:d=1,boundaryCount:u=1,disabled:m=!1,showFirstButton:p=!1,showLastButton:f=!1,className:g="",sx:b={},...v}){const[x,y]=a(o),z=void 0!==n,S=z?n:x;(e=>{e.charAt(0).toUpperCase(),e.slice(1)})("default"===c?"Default":c);const w=qx[s]||qx.medium,k=i(e=>{const a=Math.max(1,Math.min(r,e));z||y(a),l?.(a)},[r,z,l]),C=function({count:e,page:a,siblingCount:t=1,boundaryCount:r=1}){const i=(e,a)=>Array.from({length:a-e+1},(a,t)=>e+t);if(2*t+3+2*r>=e)return i(1,e);const n=Math.max(a-t,r+1),o=Math.min(a+t,e-r),l=n>r+2,c=o<e-r-1;if(!l&&c)return[...i(1,Math.min(3+2*t+r,e)),"ellipsis-right",...i(e-r+1,e)];if(l&&!c){const a=i(Math.max(e-(3+2*t+r)+1,1),e);return[...i(1,r),"ellipsis-left",...a]}return l&&c?[...i(1,r),"ellipsis-left",...i(n,o),"ellipsis-right",...i(e-r+1,e)]:i(1,e)}({count:r,page:S,siblingCount:d,boundaryCount:u}),B="default"===c?"default":c;return le(h,{component:"nav","aria-label":"Pagination","data-theme":e||void 0,"data-surface":t||void 0,className:"pagination pagination-"+c+" pagination-"+s+" "+g,sx:{display:"inline-flex",...b},...v,children:se(h,{component:"ul",sx:{display:"flex",alignItems:"center",gap:w.gap,listStyle:"none",m:0,p:0,flexWrap:"wrap"},children:[p&&le(h,{component:"li",children:le(Yg,{iconOnly:!0,variant:B+"-outline",size:w.btnSize,disabled:m||1===S,onClick:()=>k(1),"aria-label":"Go to first page",children:le(Bf,{size:"small",children:le(Ra,{})})})}),le(h,{component:"li",children:le(Yg,{iconOnly:!0,variant:B+"-outline",size:w.btnSize,disabled:m||1===S,onClick:()=>k(S-1),"aria-label":"Go to previous page",children:le(Bf,{size:"small",children:le(Wa,{})})})}),C.map((e,a)=>{if("string"==typeof e)return le(h,{component:"li",children:le(zr,{style:{color:"var(--Quiet)",padding:"0 4px"},"aria-hidden":"true",children:"…"})},e+"-"+a);const t=e===S;return le(h,{component:"li",children:le(Yg,{variant:t?B:B+"-outline",size:w.btnSize,disabled:m,onClick:()=>k(e),"aria-label":"Page "+e,"aria-current":t?"page":void 0,letterNumber:!0,children:e})},e)}),le(h,{component:"li",children:le(Yg,{iconOnly:!0,variant:B+"-outline",size:w.btnSize,disabled:m||S===r,onClick:()=>k(S+1),"aria-label":"Go to next page",children:le(Bf,{size:"small",children:le(Da,{})})})}),f&&le(h,{component:"li",children:le(Yg,{iconOnly:!0,variant:B+"-outline",size:w.btnSize,disabled:m||S===r,onClick:()=>k(r),"aria-label":"Go to last page",children:le(Bf,{size:"small",children:le(Fa,{})})})})]})})}const Ux=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Xx=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Yx({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Jx({color:e,selected:a,onClick:t}){const r=Ux(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Zx(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a(10),[l,c]=a(!1),[s,d]=a(!1),[u,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Pagination",component:"Pagination"}),le(h,{sx:{mt:1},children:le(Xf,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Pagination",theme:f,surface:b})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:f,surface:b,children:le(Gx,{color:e,size:r,count:n,showFirstButton:l,showLastButton:s,disabled:u})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),10!==n&&a.push("count={"+n+"}"),l&&a.push("showFirstButton"),s&&a.push("showLastButton"),u&&a.push("disabled"),a.push("onChange={handlePageChange}"),1===a.length?"<Pagination onChange={handlePageChange} />":"<Pagination\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Xx.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(Jx,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Yx,{label:Ux(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PAGES"}),le(m,{direction:"row",spacing:1,children:[5,10,20,50].map(e=>le(Yx,{label:String(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"First/Last Buttons"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show jump to first/last page"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>{c(e.target.checked),d(e.target.checked)},size:"small","aria-label":"First/last buttons"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Disabled"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Pagination"})})]})]})}const $x=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Kx=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],_x=[{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function ey({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function ay({color:e,selected:a,onClick:t}){const r=$x(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function ty(){const[e,t]=a("standard"),[r,i]=a("default"),[n,o]=a("medium"),[l,c]=a("horizontal"),[s,d]=a("Default"),[u,p]=a("Surface"),[f,g]=a(!1),b="standard"===e?Kx:_x;return se(h,{sx:{pb:8},children:[le(yM,{title:"Tabs",component:"Tabs"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(y,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,children:le(h,{sx:{width:"100%",maxWidth:"vertical"===l?500:"100%",display:"flex",flexDirection:"vertical"===l?"row":"column"},children:se(bb,{defaultValue:0,variant:e,color:r,size:n,orientation:l,children:[se(vb,{rounded:f,children:[le(xb,{children:"Overview"}),le(xb,{children:"Features"}),le(xb,{children:"Pricing"})]}),le(yb,{value:0,children:le(h,{sx:{p:2},children:le(mr,{style:{color:"var(--Quiet)"},children:"Overview content goes here."})})}),le(yb,{value:1,children:le(h,{sx:{p:2},children:le(mr,{style:{color:"var(--Quiet)"},children:"Features content goes here."})})}),le(yb,{value:2,children:le(h,{sx:{p:2},children:le(mr,{style:{color:"var(--Quiet)"},children:"Pricing content goes here."})})})]})})}),le(Yb,{code:(()=>{const a=[];return"standard"!==e&&a.push('variant="'+e+'"'),"default"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),"horizontal"!==l&&a.push('orientation="vertical"'),"<Tabs defaultValue={0}"+(a.length?" "+a.join(" "):"")+">\n <TabList"+(f?" 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(y,{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:se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"})]}),le(yb,{value:0,children:se(h,{sx:{p:3},children:[le(h,{sx:{mb:3}}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["standard","solid","light","dark"].map(a=>le(ey,{label:$x("standard"===a?"default":a),selected:e===a,onClick:()=>(e=>{t(e),"standard"!==e&&"default"===r&&i("primary")})(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:b.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(ay,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(ey,{label:$x(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(ey,{label:$x(e),selected:l===e,onClick:()=>c(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SHAPE"}),le(sv,{label:"Rounded corners",checked:f,onChange:e=>g(e.target.checked)}),se(zr,{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)."]})]})]})}),se(yb,{value:1,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]})]})})})]})]})}let ry=!1;let iy=!1;const ny=new Set;function oy({variant:t="outlined",color:r="default",size:i="medium",disabled:n=!1,orientation:o="horizontal",separated:l=!0,spacing:c,fit:s,fullWidth:d=!1,equalWidth:u=!1,multiple:m=!1,allowEmpty:p=!0,__selectionOwner:f=!1,value:g,defaultValue:b,onChange:v,children:x,className:y="",sx:z={},"aria-label":S,...w}){const k=void 0!==g||void 0!==b||void 0!==v||m;!f&&k&&(iy||"production"===process.env.NODE_ENV||(iy=!0,console.warn("[OmniDesign] ButtonGroup is a group of buttons — selection moved to ToggleButtonGroup, where at least one segment is always on. `value` / `onChange` / `multiple` still work here and will be removed in the next major. Swap <ButtonGroup> for <ToggleButtonGroup>; every other prop is the same.")));const C=f||k;f||!1!==l||ry||"production"===process.env.NODE_ENV||(ry=!0,console.warn("[OmniDesign] ButtonGroup is separated — a row of actions, spaced. `separated={false}` joins the segments into one control, which is ToggleButtonGroup's Style=Default and not a shape Figma's ButtonGroup has. It still renders and will be removed in the next major. If the segments are a choice rather than three actions, use <ToggleButtonGroup>."));const[B,M]=a(b??(m?[]:null)),T=void 0!==g,A=T?g:B,L=m?Array.isArray(A)?A:null==A?[]:[A]:null,I="horizontal"===o,N=void 0!==c?c:l?"var(--Platform-Spacer)":0,W=!l&&0===N,D="light"===t,R="ghost"===t,F=s??(d?"fill":u?"equal":"hug"),P="fill"===F,H="equal"===F&&I,O=(E=r).charAt(0).toUpperCase()+E.slice(1);var E;const V="var(--Buttons-"+O+"-Border)",Q="var(--Buttons-"+O+"-Button)",j="var(--Buttons-"+O+"-Text)",q="var(--Buttons-"+O+"-Outline-Quiet)",G="var(--Buttons-"+O+"-Outline-Text)",U="default"===r?void 0:O,X=e.Children.toArray(x).filter(Boolean),Y=X.length,J=(e,a)=>t=>{const r=m?L.includes(e)?L.filter(a=>a!==e):[...L,e]:e;!m||p||0!==r.length?(T||M(r),v?.(r,t),a?.(t)):a?.(t)},Z=X.map((a,t)=>{if(!e.isValidElement(a))return a;const o=0===t,c=t===Y-1,s=a.props.value??t,d=(u=s,m?L.includes(u):A===u);var u;let p,f;if(W&&Y>1){const e=I?"var(--Button-Radius)":"var(--Vertical-Button-Radius)";p=I?o&&c?e:o?e+" 0 0 "+e:c?"0 "+e+" "+e+" 0":"0":o&&c?e:o?e+" "+e+" 0 0":c?"0 0 "+e+" "+e:"0"}if(W&&Y>1){const e=I?"var(--Button-Focus-Radius)":"var(--Vertical-Button-Focus-Radius)";f=I?o&&c?e:o?e+" 0 0 "+e:c?"0 "+e+" "+e+" 0":"0":o&&c?e:o?e+" "+e+" 0 0":c?"0 0 "+e+" "+e:"0"}const g=W&&Y>1?{borderRadius:p,...!o&&(I?{marginLeft:"calc(-1 * var(--Button-Border-Width))"}:{marginTop:"calc(-1 * var(--Button-Border-Width))"}),position:"relative","&:hover, &:focus-visible":{zIndex:1}}:{},b=R?{backgroundColor:"var(--Background) !important",borderColor:V+" !important"}:{backgroundColor:Q+" !important",borderColor:V+" !important"},v=R?G:j,x=v,y=d?{...b,color:v+" !important","&:hover, &:active, &.Mui-focusVisible, &:focus-visible":{...b,color:x+" !important"}}:{},z={...P&&I&&{flex:"1 1 0",minWidth:0},...g,transform:"none !important","&:hover, &:active, &:focus-visible":{transform:"none !important"},...y,...d?{}:{color:q,backgroundColor:"transparent","&:hover":{backgroundColor:"var(--Hover)",color:G,zIndex:1},"&:active":{backgroundColor:"var(--Pressed)",color:G},"&.Mui-focusVisible, &:focus-visible":{color:G}},...R&&!d?{border:"none !important","&:hover":{border:"none !important"}}:{},"&:focus-visible, &.Mui-focusVisible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px",zIndex:2,...f?{borderRadius:f}:{}},...a.props.sx};!function(e={},a=!1){if("production"===process.env.NODE_ENV)return;const t=[];(e.avatar||"avatar"===e.contentType)&&t.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&&t.push(`a solid segment (variant="${r}") — segments are outline or ghost; the GROUP paints the selected one`),a&&(e.iconOnly||e.letterNumber||e.contentType)&&t.push("a typed SEPARATED segment — Separated-Button-Segments has no Type axis");for(const e of t)ny.has(e)||(ny.add(e),console.warn("[ButtonGroup] "+e+"."))}(a.props,l);const S=e.cloneElement(a,{variant:a.props.variant??(C?R?d?r+"-outline":"ghost":d?r:r+"-outline":R?"ghost":r),size:a.props.size??i,disabled:a.props.disabled??n,onClick:J(s,a.props.onClick),...C?{"aria-pressed":d}:{},sx:z});return D&&!d?le(h,{"data-theme":U,"data-surface":"Surface-Brightest",sx:{display:"contents"},children:S},t):e.cloneElement(S,{key:t})});return le(h,{role:"group","aria-label":S,className:"btn-group btn-group-"+t+" btn-group-"+r+" "+y,sx:{...H?{display:P?"grid":"inline-grid",gridAutoFlow:"column",gridAutoColumns:"1fr",justifyItems:"stretch",alignItems:"stretch",width:P?"100%":"fit-content"}:{display:P?"flex":"inline-flex",flexDirection:I?"row":"column",alignItems:"stretch",width:P?"100%":"auto"},gap:W?0:N,border:"none",borderRadius:"var(--Style-Border-Radius)",...z},...w,children:Z})}const ly={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"}},cy=l({variant:"solid",color:"default",size:"medium",spacing:0}),sy=l({expanded:!1,toggle:()=>{},disabled:!1,accordionId:""}),dy="var(--Accordion-Radius, var(--Button-Radius))";function uy({children:e,variant:a="solid",surface:t,color:r="default",size:i="medium",spacing:n=0,className:o="",sx:l={},...c}){const s="default"===r?"Default":(d=r).charAt(0).toUpperCase()+d.slice(1);var d;const u=0===n,m="default"===r?"Default":s,p=t||("dark"===a?"Surface-Dimmest":"light"===a?"Surface-Brightest":"Surface");return le(cy.Provider,u?{value:{variant:a,color:r,size:i,spacing:n,dataTheme:m,dataSurface:p},children:le(h,{role:"presentation",className:"accordion-group accordion-group-connected accordion-group-"+a+" "+o,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:dy,borderTopRightRadius:dy},"& > .accordion-segment:first-of-type .accordion-summary":{borderTopLeftRadius:dy,borderTopRightRadius:dy},"& > .accordion-segment:last-of-type":{borderBottomLeftRadius:dy,borderBottomRightRadius:dy,marginBottom:0},"& > .accordion-segment:last-of-type .accordion-summary:not(.accordion-summary-expanded)":{borderBottomLeftRadius:dy,borderBottomRightRadius:dy},...l},...c,children:e})}:{value:{variant:a,color:r,size:i,spacing:n,dataTheme:m,dataSurface:p},children:le(h,{role:"presentation",className:"accordion-group accordion-group-"+a+" accordion-group-spaced "+o,sx:{display:"flex",flexDirection:"column",gap:.5===n?"var(--Sizing-Half)":1===n?"var(--Sizing-1)":1.5===n?"var(--Sizing-1-and-Half)":2===n?"var(--Sizing-2)":8*n+"px",...l},...c,children:e})})}function hy({children:e,expanded:t,defaultExpanded:r=!1,onChange:i,disabled:n=!1,className:o="",sx:l={},...s}){const[d,u]=a(r),m=void 0!==t,p=m?t:d,{dataTheme:f,dataSurface:g}=c(cy),[b]=a(()=>"accordion-"+Math.random().toString(36).substring(2,9));return le(sy.Provider,{value:{expanded:p,toggle:()=>{if(n)return;const e=!p;m||u(e),i?.(e)},disabled:n,accordionId:b},children:le(h,{className:"accordion-segment accordion"+(p?" accordion-expanded":"")+(n?" accordion-disabled":"")+" "+o,"data-theme":f,"data-surface":g,sx:{border:"1px solid var(--Border-Variant)",borderRadius:dy,backgroundColor:"var(--Background)",overflow:"hidden",boxShadow:If,opacity:n?"var(--Disabled, 0.38)":1,...l},...s,children:e})})}const my={small:ur,medium:pr,large:xr},py={small:dr,medium:mr,large:vr};function fy({children:e,startDecorator:a,endDecorator:t,eyebrow:r,overline:i,secondary:n,expandIcon:o,className:l="",sx:s={},...d}){const{expanded:u,toggle:m,disabled:p,accordionId:f}=c(sy),{size:g}=c(cy),b=ly[g]||ly.medium,v=my[g]||my.medium,x=o||le(Bf,{size:b.iconSize,sx:{color:u?"var(--Text)":"var(--Quiet)",transition:"color 0.15s ease"},children:le(ue,{})}),y={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block"};return se(h,{component:"button",role:"button","aria-expanded":u,"aria-controls":f+"-content",id:f+"-header",tabIndex:p?-1:0,onClick:m,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),m())},className:"accordion-summary"+(u?" accordion-summary-expanded":"")+" "+l,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:p?"not-allowed":"pointer",textAlign:"left",transition:"color 0.2s ease, background-color 0.15s ease",borderRadius:u?dy+" "+dy+" 0 0":dy,"&:hover":p?{}:{color:"var(--Text)",backgroundColor:"var(--Hover)","& .omni-icon":{color:"var(--Text)"}},"&:active":p?{}:{color:"var(--Text)",backgroundColor:"var(--Pressed)","& .omni-icon":{color:"var(--Text)"}},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-3px"},...s},...d,children:[a&&le(h,{className:"accordion-summary-start",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:a}),se(h,{sx:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)"},children:[(r??i)&&le(Ar,{style:{...y,color:"var(--Text-Quiet)"},children:r??i}),null!=e&&le(v,{style:{...y,color:"inherit"},children:e}),n&&le(dr,{style:{...y,color:"var(--Text-Quiet)"},children:n})]}),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:x})]})}function gy({children:e,className:a="",sx:t={},...r}){const{expanded:i,accordionId:n}=c(sy),{size:o}=c(cy),l=ly[o]||ly.medium,s=py[o]||py.medium;return i?le(h,{role:"region",id:n+"-content","aria-labelledby":n+"-header",className:"accordion-details "+a,sx:{padding:"0 "+l.detailsPx+" "+l.detailsPy+" "+l.detailsPx,color:"var(--Text)",fontFamily:"inherit",lineHeight:1.6,...t},...r,children:"string"==typeof e||"number"==typeof e?le(s,{children:e}):e}):null}const by=["Link","Chip","Badge","Caption","Label","Tag","BodySmall","LegalSemibold","Legal","LabelSmall","LabelExtraSmall","EyebrowSmall","ButtonSmall"];function vy(a){let t=!1;return e.Children.forEach(a,a=>{(function(a){if(!e.isValidElement(a))return!1;const t=a.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 r=a.type;if(r){const e=r.displayName||r.name||"";if(by.some(a=>e.includes(a)))return!0}return!1})(a)&&(t=!0)}),t}function xy({children:e,gap:a,spacing:t,direction:r="column",enforceMinGap:i=!0,minGapToken:n="--min-stack-gap",divider:o,flexWrap:l,useFlexGap:c=!0,alignItems:s,justifyContent:d,sx:h={},className:p="",...f}){const g=void 0!==a?a:t,b=i&&vy(e),v=u(()=>{if(!b)return g;const e=function(e,a=8){return null==e?0:"number"==typeof e?e*a:"string"==typeof e?e.endsWith("px")?parseFloat(e):e.endsWith("rem")?parseFloat(e)*parseFloat(getComputedStyle(document.documentElement).fontSize||"16"):parseFloat(e)*a||0:0}(g),a=function(e,a=8){if("undefined"==typeof window)return a;const t=getComputedStyle(document.documentElement).getPropertyValue(e).trim();return t?t.endsWith("rem")?parseFloat(t)*parseFloat(getComputedStyle(document.documentElement).fontSize):parseFloat(t)||a:a}(n,8);return e>=a?g:"var("+n+", "+a+"px)"},[b,g,n]);return le(m,{direction:r,spacing:c?void 0:v,gap:c?v:void 0,divider:o,flexWrap:l,useFlexGap:c,alignItems:s,justifyContent:d,className:"omni-stack"+(b?" omni-stack-min-gap-enforced":"")+(p?" "+p:""),sx:{...f["data-surface"]||f["data-theme"]?{background:"var(--Background)"}:{},boxSizing:"border-box",...b?{"&::before":{display:"none"}}:{},...h},"data-min-gap-enforced":b?"true":void 0,...f,children:e})}const yy=e=>le(xy,{direction:"row",alignItems:"center",...e}),zy=e=>le(xy,{direction:"column",...e}),Sy=e=>le(xy,{direction:"column",alignItems:"center",justifyContent:"center",...e}),wy=e=>le(xy,{direction:"row",alignItems:"center",justifyContent:"space-between",...e}),ky=e=>le(xy,{direction:"row",flexWrap:"wrap",...e}),Cy=({breakpoint:e="sm",...a})=>le(xy,{direction:{xs:"column",[e]:"row"},...a}),By=xy,My=ky,Ty=e=>le(h,{sx:{borderBottom:"1px solid var(--Border)",width:"100%"},...e}),Ay=({sx:e,...a})=>le(xy,{sx:{px:2,...e},...a}),Ly=({sx:e,...a})=>le(xy,{sx:{overflowY:"auto",...e},...a});function Iy({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"primary":"primary-outline",size:"small",onClick:t,children:e})}function Ny({code:e}){return le(Yb,{code:e,language:"JSX",wrap:!0,sx:{mt:1}})}function Wy({passes:e}){return se(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?we:ke,{sx:{fontSize:14}}),e?"WCAG Pass":"WCAG Fail"]})}function Dy({leftLabel:e,rightLabel:a,leftContent:t,rightContent:r,leftCode:i,rightCode:n,leftPasses:o,rightPasses:l}){return se(y,{container:!0,spacing:3,children:[le(y,{item:!0,xs:12,md:6,children:se(h,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[se(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(dr,{style:{fontWeight:600},children:e}),le(Wy,{passes:o})]}),le(h,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:t}),le(Ny,{code:i})]})}),le(y,{item:!0,xs:12,md:6,children:se(h,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[se(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(dr,{style:{fontWeight:600},children:a}),le(Wy,{passes:l})]}),le(h,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:r}),le(Ny,{code:n})]})})]})}function Ry(){const[e,t]=a("column"),[r,i]=a(.5),[n,o]=a("small"),[l,c]=a(!0),[s,d]=a(!1),[u,m]=a("Default"),[p,f]=a("Surface"),g={small:{label:"Small links ⚡",content:se(ce,{children:[le(ti,{href:"#",size:"small",children:"Terms of Service"}),le(ti,{href:"#",size:"small",children:"Privacy Policy"}),le(ti,{href:"#",size:"small",children:"Cookie Settings"})]})},chips:{label:"Chips ⚡",content:se(ce,{children:[le(nb,{label:"React",size:"small"}),le(nb,{label:"TypeScript",size:"small"}),le(nb,{label:"Design System",size:"small"})]})},normal:{label:"Normal buttons",content:se(ce,{children:[le(Yg,{variant:"primary",size:"medium",children:"Primary"}),le(Yg,{variant:"secondary",size:"medium",children:"Secondary"})]})},mixed:{label:"Mixed ⚡",content:se(ce,{children:[le(Yg,{variant:"primary",size:"medium",children:"Save changes"}),le(ti,{href:"#",size:"small",children:"Or discard"})]})}},b=["small","chips","mixed"].includes(n),v=l&&b;return se(y,{container:!0,spacing:3,sx:{mt:1},children:[se(y,{item:!0,xs:12,md:7,children:[le(uv,{theme:u,surface:p,children:se(h,{sx:{width:"100%"},children:[v&&se(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(ke,{sx:{fontSize:16}}),"Small child detected — gap raised to var(--min-stack-gap)"]}),le(xy,{direction:e,gap:r,enforceMinGap:l,flexWrap:s?"wrap":void 0,children:g[n].content})]})}),le(Ny,{code:(()=>{const a=["<OmniStack"];return"column"!==e&&a.push(' direction="'+e+'"'),a.push(" gap={"+r+"}"),l||a.push(" enforceMinGap={false}"),s&&a.push(' flexWrap="wrap"'),a.push(">"),a.push(" {children}"),a.push("</OmniStack>"),a.join("\n")})()})]}),le(y,{item:!0,xs:12,md:5,children:se(h,{sx:{display:"flex",flexDirection:"column",gap:3},children:[se(h,{children:[le(Ar,{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:a}])=>le(Iy,{label:a,selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),le(h,{sx:{display:"flex",gap:1},children:["row","column"].map(a=>{return le(Iy,{label:(r=a,r?r.charAt(0).toUpperCase()+r.slice(1):""),selected:e===a,onClick:()=>t(a)},a);var r})})]}),se(h,{children:[se(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["GAP — ",r," unit",v?" → raised to var(--min-stack-gap)":""]}),se(h,{sx:{display:"flex",alignItems:"center",gap:2},children:[le(h,{component:"input",type:"range",min:0,max:6,step:.5,value:r,onChange:e=>i(Number(e.target.value)),sx:{flex:1,accentColor:"var(--Primary-Color-10)"}}),le(zr,{style:{color:"var(--Text)",minWidth:24,textAlign:"right"},children:r})]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),se(h,{sx:{display:"flex",flexDirection:"column",gap:1.5},children:[se(h,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[se(h,{children:[le(dr,{children:"Enforce min gap"}),le(zr,{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"})]}),le(sv,{checked:l,onChange:e=>c(e.target.checked),size:"small"})]}),se(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[le(dr,{children:"Flex wrap"}),le(sv,{checked:s,onChange:e=>d(e.target.checked),size:"small"})]})]})]})]})})]})}function Fy(){const[e,t]=a("Default"),[r,i]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Stack",component:"Stack"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:t,surface:r,onSurfaceChange:i})}),le(mr,{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."}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Why it matters"}),le(xb,{children:"Playground"}),le(xb,{children:"API"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Stack",theme:e,surface:r})}),le(yb,{value:1,children:se(h,{sx:{pt:3,display:"flex",flexDirection:"column",gap:4},children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(_t,{children:"The problem"}),le(mr,{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(Dy,{leftLabel:"Plain MUI Stack — gap too small",rightLabel:"OmniStack — gap auto-enforced",leftPasses:!1,rightPasses:!0,leftContent:se(h,{sx:{display:"flex",flexDirection:"column",gap:"4px"},children:[le(ti,{href:"#",size:"small",children:"Terms of Service"}),le(ti,{href:"#",size:"small",children:"Privacy Policy"}),le(ti,{href:"#",size:"small",children:"Cookie Settings"})]}),rightContent:se(xy,{gap:.5,children:[le(ti,{href:"#",size:"small",children:"Terms of Service"}),le(ti,{href:"#",size:"small",children:"Privacy Policy"}),le(ti,{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'})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(_t,{children:"Mixed component sizes"}),le(mr,{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(Dy,{leftLabel:"Without enforcement",rightLabel:"With enforcement",leftPasses:!1,rightPasses:!0,leftContent:se(h,{sx:{display:"flex",flexDirection:"column",gap:"2px"},children:[le(Yg,{variant:"primary",size:"medium",children:"Save changes"}),le(ti,{href:"#",size:"small",children:"Or discard"})]}),rightContent:se(xy,{gap:.25,children:[le(Yg,{variant:"primary",size:"medium",children:"Save changes"}),le(ti,{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'})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(_t,{children:"How detection works"}),le(mr,{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:a},t,r)=>se(h,{sx:{display:"flex",alignItems:"center",gap:2,py:1.5,borderBottom:t<r.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(dr,{style:{flex:"0 0 200px"},children:e}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(_t,{children:"Token-driven minimum"}),le(mr,{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(Ny,{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. */"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(_t,{children:"Auditable opt-out"}),se(mr,{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(Ny,{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(yb,{value:2,children:le(Ry,{})}),le(yb,{value:3,children:se(h,{sx:{pt:3},children:[le(_t,{children:"OmniStack props"}),le(mr,{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:a,default:t,desc:r},i,n)=>se(h,{sx:{display:"grid",gridTemplateColumns:"160px 160px 1fr",gap:2,px:2,py:1.5,alignItems:"start",borderBottom:i<n.length-1?"1px solid var(--Border)":"none",backgroundColor:i%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(zr,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a}),se(h,{children:[le(zr,{style:{color:"var(--Text)"},children:r}),se(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:["Default: ",t]})]})]},e))}),le(_t,{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:a},t,r)=>se(h,{sx:{display:"grid",gridTemplateColumns:"200px 1fr",gap:2,px:2,py:1.5,borderBottom:t<r.length-1?"1px solid var(--Border)":"none",backgroundColor:t%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(zr,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(zr,{style:{color:"var(--Text-Quiet)"},children:a})]},e))}),le(_t,{children:"Debug attributes"}),le(Ny,{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"]\')'})]})}),le(yb,{value:4,children:le(gM,{component:"Stack"})})]})]})}const Py=["primary","secondary","tertiary","neutral","info","success","warning","error"],Hy=["small","medium","large"],Oy=({label:e,emphasis:a=!1,width:t,children:r})=>se(zy,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start",width:t},children:[le("div",{children:r}),le(zr,{color:a?"standard":"quiet",children:e})]}),Ey=({values:e,render:a,defaultValue:t,width:r})=>{const i=e.filter(e=>e!==t),n=e=>le(Oy,{label:String(e),emphasis:e===t,width:r,children:a(e)},String(e));return se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"flex-end",flexWrap:"wrap"},children:[void 0!==t?n(t):null,void 0!==t&&i.length?le(mx,{orientation:"vertical",style:{alignSelf:"stretch"}}):null,i.map(n)]})},Vy=({values:e,render:a,defaultValue:t,width:r="100%"})=>{const i=void 0!==t?[t,...e.filter(e=>e!==t)]:e;return le(zy,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:420},children:i.map(e=>se(zy,{gap:"var(--Sizing-Half)",style:{width:r},children:[le(zr,{color:e===t?"standard":"quiet",children:String(e)}),a(e)]},String(e)))})},Qy=({render:e,offLabel:a="false",onLabel:t="true",width:r})=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Oy,{label:a,emphasis:!0,width:r,children:e(!1)}),le(Oy,{label:t,width:r,children:e(!0)})]}),jy=180,qy=(e,a=180)=>le("div",{style:{width:a},children:e}),Gy={variant:()=>le(Ey,{values:["default",...Py],defaultValue:"default",width:jy,render:e=>qy(le(Nx,{variant:e,defaultValue:60,"aria-label":e}))}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",width:jy,render:e=>qy(le(Nx,{size:e,defaultValue:60,"aria-label":e}))}),"value / defaultValue":()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"a number — one thumb"}),qy(le(Nx,{defaultValue:60,"aria-label":"single"}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"an array — two thumbs, a range"}),qy(le(Nx,{defaultValue:[25,75],getAriaLabel:()=>"range"}))]})]}),fill:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-1)",children:[le(zr,{color:"standard",children:"one thumb — Figma: single / single-inverted"}),se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"standard",emphasis:!0,width:jy,children:qy(le(Nx,{defaultValue:60,"aria-label":"standard"}))}),le(Oy,{label:"inverted",width:jy,children:qy(le(Nx,{defaultValue:60,fill:"inverted","aria-label":"inverted"}))}),le(Oy,{label:"false — no fill",width:jy,children:qy(le(Nx,{defaultValue:60,fill:!1,"aria-label":"no fill"}))})]})]}),se(zy,{gap:"var(--Sizing-1)",children:[le(zr,{color:"quiet",children:"two thumbs — Figma: double / double-inverted"}),se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"standard — fills between",width:jy,children:qy(le(Nx,{defaultValue:[25,75],getAriaLabel:()=>"between"}))}),le(Oy,{label:"inverted — fills outside",width:jy,children:qy(le(Nx,{defaultValue:[25,75],fill:"inverted",getAriaLabel:()=>"outside"}))})]})]})]}),orientation:()=>se(yy,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Oy,{label:"horizontal",emphasis:!0,width:jy,children:qy(le(Nx,{defaultValue:60,"aria-label":"horizontal"}))}),le(Oy,{label:"vertical",width:60,children:le("div",{style:{height:160},children:le(Nx,{orientation:"vertical",defaultValue:60,"aria-label":"vertical"})})}),le(Oy,{label:"vertical range",width:60,children:le("div",{style:{height:160},children:le(Nx,{orientation:"vertical",defaultValue:[25,75],getAriaLabel:()=>"vertical range"})})}),le(Oy,{label:"vertical, inverted",width:60,children:le("div",{style:{height:160},children:le(Nx,{orientation:"vertical",fill:"inverted",defaultValue:60,"aria-label":"vertical inverted"})})})]}),marks:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — no marks"}),qy(le(Nx,{defaultValue:60,"aria-label":"none"}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — a dot at every step"}),qy(le(Nx,{defaultValue:60,step:10,marks:!0,"aria-label":"every step"}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"an array — dots where you say, with labels"}),qy(le(Nx,{defaultValue:60,marks:[{value:0,label:"0"},{value:50,label:"50"},{value:100,label:"100"}],"aria-label":"labelled marks"}),260)]})]}),step:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"1 — every whole number"}),qy(le(Nx,{defaultValue:60,"aria-label":"step 1"}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"25 — a fixed increment"}),qy(le(Nx,{defaultValue:50,step:25,marks:!0,"aria-label":"step 25"}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"null — restricted to the marks, which need not be even"}),qy(le(Nx,{defaultValue:40,step:null,marks:[{value:0,label:"0"},{value:10,label:"10"},{value:40,label:"40"},{value:100,label:"100"}],"aria-label":"restricted"}),260)]})]}),valueLabelDisplay:()=>le(Ey,{values:["off","auto","on"],defaultValue:"off",width:jy,render:e=>qy(le(Nx,{valueLabelDisplay:e,defaultValue:60,"aria-label":e}))}),label:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"with a visible label"}),qy(le(Nx,{label:"Volume",defaultValue:60}))]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"without one it needs aria-label"}),qy(le(Nx,{defaultValue:60,"aria-label":"Volume"}))]}),le(dr,{color:"quiet",children:"A RANGE slider needs `getAriaLabel` instead of either — one name per thumb. MUI warns in development if it is given `aria-label`."})]}),disabled:()=>le(Qy,{width:jy,offLabel:"enabled",onLabel:"disabled",render:e=>qy(le(Nx,{disabled:e,defaultValue:60,"aria-label":"x"}))})},Uy={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 Xy({value:e,defaultValue:t="",onChange:i,onFocus:n,onBlur:o,onClear:l,onSubmit:c,placeholder:s="Search…",size:d="medium",color:u="default",showClearButton:m=!0,disabled:p=!1,ariaLabel:f="Search",className:g="",sx:b={},...v}){const[x,y]=a(t),[z,S]=a(!1),w=r(null),k=void 0!==e,C=k?e:x,B=C.length>0,M=z||B,T=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===u?"primary":u),A="default"===u?"var(--Text)":"var(--Text-"+T+")",L=Uy[d]||Uy.medium,I=()=>{k||y(""),i?.(""),l?.(),w.current?.focus()};return le(h,{className:"search-field search-field-"+d+(z?" search-field-focused":"")+(B?" search-field-filled":"")+(p?" search-field-disabled":"")+(g?" "+g:""),sx:{display:"flex",boxSizing:"border-box",...b},...v,children:le(h,{sx:{border:"1px solid "+("var(--Buttons-"+T+"-Border)"),borderRadius:"small"===d?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===d?"var(--Lg-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"var(--Input-Radius, var(--Style-Border-Radius))",overflow:"hidden",opacity:p?"var(--Disabled, 0.38)":1,transition:"border-color 0.15s ease, box-shadow 0.15s ease",boxShadow:"none",width:"100%",...!p&&{"&:hover":{borderColor:"var(--Buttons-"+T+"-Hover)"},"&:active":{borderColor:"var(--Buttons-"+T+"-Pressed)"}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:se(h,{sx:{display:"flex",alignItems:"center",gap:1,width:"100%",boxSizing:"border-box",minHeight:L.height,px:L.px+"px",backgroundColor:"var(--Hover)"},children:[le(Bf,{size:"small",sx:{color:M?A:"var(--Quiet)",flexShrink:0,transition:"color 0.15s ease"},children:le(Ie,{})}),le(h,{component:"input",ref:w,type:"text",role:"searchbox","aria-label":f,value:C,onChange:e=>{const a=e.target.value;k||y(a),i?.(a,e)},onFocus:e=>{S(!0),n?.(e)},onBlur:e=>{S(!1),o?.(e)},onKeyDown:e=>{"Enter"===e.key&&c?.(C,e),"Escape"===e.key&&B&&I()},placeholder:s,disabled:p,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:M?A:"var(--Quiet)",fontSize:L.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"}}}),m&&B&&!p&&le(h,{component:"button",type:"button","aria-label":"Clear search",onClick:I,sx:{display:"flex",alignItems:"center",justifyContent:"center",width:L.iconSize+4,height:L.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:A},"&:active":{backgroundColor:"var(--Pressed)",color:A},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"}},children:le(Bf,{size:"small",children:le(Ea,{})})})]})})})}const Yy=l(null),Jy=["Default","Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error","App-Bar","Nav-Bar","Status"],Zy=["Professional","Modern","Bold","Playful"],$y=["Surface-Dimmest","Surface-Dim","Surface","Surface-Bright","Surface-Brightest","Container","Container-Low","Container-Lowest","Container-High","Container-Highest"],Ky={"light-tonal":{theme:"Primary",rootSurface:"Surface-Brightest"},"grey-professional":{theme:"Neutral",rootSurface:"Surface"},"dark-professional":{theme:"Neutral",rootSurface:"Surface-Dimmest"}},_y="omni-foundation",ez="omni-core",az="omni-typography",tz="omni-mode",rz="omni-base",iz="omni-styles";function nz(e){document.getElementById(e)?.remove()}function oz(e,a,t){return a?function(e){return!(!e||"string"!=typeof e)&&(e.startsWith("http")||e.startsWith("/")||e.endsWith(".css"))}(a)?function(e,a,t){const r=document.getElementById(e);return r?"LINK"===r.tagName&&r.getAttribute("href")!==a?new Promise((e,t)=>{r.onload=()=>e(r),r.onerror=()=>t(new Error(`OmniDesignProvider: failed to load ${a}`)),r.setAttribute("href",a)}):Promise.resolve(r):new Promise((r,i)=>{const n=document.createElement("link");n.id=e,n.rel="stylesheet",n.setAttribute("data-omni","true"),n.onload=()=>r(n),n.onerror=()=>i(new Error(`OmniDesignProvider: failed to load ${a}`)),n.href=a;const o=t?document.getElementById(t):null;o?document.head.insertBefore(n,o):document.head.appendChild(n)})}(e,a,t):function(e,a,t){if(!a)return Promise.resolve(null);const r=document.getElementById(e);if(r)return r.textContent=a,Promise.resolve(r);const i=document.createElement("style");i.id=e,i.setAttribute("data-omni","true"),i.textContent=a;const n=t?document.getElementById(t):null;return n?document.head.insertBefore(i,n):document.head.appendChild(i),Promise.resolve(i)}(e,a,t):Promise.resolve(null)}function lz({themeURL:e,foundationCSS:n,coreCSS:o,typographyCSS:l,lightModeCSS:c,darkModeCSS:s,baseCSS:d,stylesCSS:h,defaultTheme:m="Default",defaultStyle:p="Modern",defaultSurface:f="Surface",surfaceStyle:g,defaultDarkMode:b=!1,darkTheme:v=null,darkMode:x,onDarkModeChange:y,className:z,style:S,fullHeight:w=!0,children:k}){const[C,B]=a(b),M=void 0!==x,T=M?x:C,[A,L]=a({foundation:n??null,core:o??null,typography:l??null,lightMode:c??null,darkMode:s??null,base:d??null,styles:h??null}),[I,N]=a({}),W=r(!0);t(()=>(W.current=!0,()=>{W.current=!1}),[]),t(()=>{e&&(U("loading"),async function(e){const a=/\.json(\?|$)/.test(e)?e:`${e.replace(/\/$/,"")}/theme.json`,t=e.replace(/\/$/,"").replace(/\/theme\.json(\?.*)?$/,""),r=await fetch(a);if(!r.ok)throw new Error(`OmniDesignProvider: could not load theme manifest from ${a} (${r.status})`);const i=await r.json(),n=e=>e?/^https?:\/\//i.test(e)?e:`${t}/${e}`:null;return{foundationURL:n(i.foundation),coreURL:n(i.core),typographyURL:n(i.typography),lightModeURL:n(i.lightMode),darkModeURL:n(i.darkMode),baseURL:n(i.base),stylesURL:n(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=>{W.current&&(L({foundation:n??e.foundationURL,core:o??e.coreURL,typography:l??e.typographyURL,lightMode:c??e.lightModeURL,darkMode:s??e.darkModeURL,base:d??e.baseURL,styles:h??e.stylesURL}),N({defaultTheme:e.defaultTheme,defaultStyle:e.defaultStyle,defaultSurface:e.defaultSurface,darkTheme:e.darkTheme,name:e.name}))}).catch(e=>{W.current&&(console.error("OmniDesignProvider: manifest error:",e),Y(e.message),U("error"))}))},[e]);const D=g?Ky[g]?.theme??m:"Default"!==m?m:I.defaultTheme??m,R=g?Ky[g]?.rootSurface??f:I.defaultSurface??f,F=I.defaultStyle??p,P=v??I.darkTheme??null,[H,O]=a(D),[E,V]=a(F),[Q,j]=a(R),q=!!(e||n||o||l||c||s||d||h),[G,U]=a(q?"loading":"ready"),[X,Y]=a(null);t(()=>{const{foundation:e,core:a,typography:t,base:r,styles:i}=A;if(e||a||t||r||i)return U("loading"),Y(null),Promise.all([oz(_y,e),oz(ez,a),oz(az,t).catch(e=>{console.warn("OmniDesignProvider: typography CSS did not load —",e.message)}),oz(rz,r),oz(iz,i)]).then(()=>{W.current&&U("ready")}).catch(e=>{W.current&&(console.error("OmniDesignProvider CSS error:",e),Y(e.message),U("error"))}),()=>{nz(_y),nz(ez),nz(az),nz(rz),nz(iz)};U("ready")},[A.foundation,A.core,A.typography,A.base,A.styles]),t(()=>{const e=T?A.darkMode:A.lightMode;e&&oz(tz,e,rz).catch(e=>console.error("OmniDesignProvider mode CSS error:",e))},[T,A.lightMode,A.darkMode]),t(()=>()=>nz(tz),[]);const J=T&&P?P:H,Z=i(()=>{M?y?.(!T):B(e=>!e)},[M,T,y]),$=i(e=>{Jy.includes(e)||console.warn(`OmniDesignProvider: unknown theme "${e}"`),O(e)},[]),K=i(e=>{Zy.includes(e)||console.warn(`OmniDesignProvider: unknown style "${e}"`),V(e)},[]),_=i(e=>{$y.includes(e)||console.warn(`OmniDesignProvider: unknown surface "${e}"`),j(e)},[]),ee=u(()=>({theme:J,style:E,surface:Q,isDark:T,cssStatus:G,cssError:X,setTheme:$,setStyle:K,setSurface:_,toggleDarkMode:Z,themes:Jy,styles:Zy,surfaces:$y,name:I.name??null}),[J,E,Q,T,G,X,$,K,_,Z,I.name]);return se(Yy.Provider,{value:ee,children:[le("style",{"data-omni":"hide-during-load",children:'[data-omni-css="loading"]{visibility:hidden}'}),le("div",{"data-theme":J,"data-style":E,"data-surface":Q,"data-omni-css":G,className:z,style:{...w?{minHeight:"100vh"}:{},...S},children:k})]})}function cz(){const e=c(Yy);if(!e)throw new Error("useOmniDesign must be used inside a <OmniDesignProvider>");return e}function sz({theme:e,surface:a,as:t="div",children:r,className:i,style:n,...o}){return le(t,{"data-theme":e,"data-surface":a,className:i,style:n,...o,children:r})}function dz({surface:e,as:a="div",children:t,className:r,style:i,...n}){return le(a,{"data-surface":e,className:r,style:i,...n,children:t})}const uz={small:{width:"240px",height:"200px"},medium:{width:"320px",height:"280px"},large:{width:"420px",height:"380px"}},hz={left:{borderRight:"1px solid var(--Border)"},right:{borderLeft:"1px solid var(--Border)"},top:{borderBottom:"1px solid var(--Border)"},bottom:{borderTop:"1px solid var(--Border)"}},mz={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}},pz={left:"translateX(-100%)",right:"translateX(100%)",top:"translateY(-100%)",bottom:"translateY(100%)"};function fz({children:e,open:a=!1,onClose:n,size:o="medium",anchor:l="left",hideBackdrop:c=!1,className:s="",sx:d={},...u}){const m=r(null),p=r(null),f="left"===l||"right"===l;let g;try{g=cz()}catch{g=null}const b=g?.theme||"Default",v=g?.style||"Modern",x=uz[o]||uz.medium;t(()=>{if(!a)return;const e=e=>{"Escape"===e.key&&n?.()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[a,n]),t(()=>{a?(p.current=document.activeElement,requestAnimationFrame(()=>{const e=m.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');e?e.focus():m.current?.focus()})):p.current&&(p.current.focus(),p.current=null)},[a]),t(()=>{if(a){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}},[a]);const y=i(e=>{if("Tab"!==e.key||!m.current)return;const a=m.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(!a.length)return;const t=a[0],r=a[a.length-1];e.shiftKey?document.activeElement===t&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),t.focus())},[]);return a?se(ce,{children:[!c&&le(h,{onClick:()=>n?.(),"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:m,role:"dialog","aria-modal":"true",tabIndex:-1,"data-theme":b,"data-style":v,"data-surface":"Surface-Dim",onKeyDown:y,className:"drawer drawer-"+o+" drawer-"+l+" "+s,sx:{position:"fixed",zIndex:10000001,...mz[l],...f?{width:x.width,height:"100%"}:{height:x.height,width:"100%"},backgroundColor:"var(--Background)",color:"var(--Text)",...hz[l],boxShadow:Wf,display:"flex",flexDirection:"column",outline:"none",overflow:"hidden",animation:"drawer-slide-in 0.3s ease forwards","@keyframes drawer-slide-in":{from:{transform:pz[l]},to:{transform:"translate(0, 0)"}},...d},...u,children:e})]}):null}function gz({onClick:e,className:a="",sx:t={},...r}){return le(h,{sx:{position:"absolute",top:"12px",right:"12px",zIndex:1,...t},className:a,...r,children:le(Yg,{iconOnly:!0,variant:"ghost",size:"small",onClick:e,"aria-label":"Close drawer",children:le(Bf,{size:"small",children:le(Ea,{})})})})}function bz({children:e,className:a="",sx:t={},...r}){return le(h,{className:"drawer-header "+a,sx:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px",borderBottom:"1px solid var(--Border)",flexShrink:0,...t},...r,children:e})}function vz({children:e,className:a="",sx:t={},...r}){return le(h,{className:"drawer-content "+a,sx:{flex:1,overflowY:"auto",padding:"16px",...t},...r,children:e})}const xz={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 yz({children:e,onClick:a,ariaLabel:t}){return le(Yg,{iconOnly:!0,variant:"ghost",size:"medium",onClick:a,"aria-label":t,children:e})}function zz({barColor:t="default",surface:r="Surface",loginType:i="login",menuType:n="hamburger",brandType:o="name",searchPosition:l="right",companyName:c="Company",navLinks:s=["Home","Products","About"],rightButtons:d=[],showRightButtons:u=!1,onMenuClick:m,user:p,onLogin:f,onSignOut:g,brand:b,onBrandClick:v,centerSlot:x,endSlot:y,searchValue:z,onSearchChange:S,searchPlaceholder:w="Search...",children:k,className:C="",sx:B={}}){const[M,T]=a(!1),A=xz[t]||xz.default,L=A.theme,I=A.surface||r,N="expanded"===n&&s.length>3?"hamburger":n,W=le(Xy,{placeholder:w,size:"medium",value:z,onChange:S,sx:{flex:"left"===l?"0 1 400px":"0 1 280px",minWidth:0}});return se(ce,{children:[le(h,{component:"header",role:"banner","data-theme":L,"data-surface":I,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:Nf,fontFamily:"inherit",...B},children:k||se(ce,{children:["hamburger"===N&&le(yz,{ariaLabel:"Open navigation menu",onClick:m||(()=>T(!0)),children:le(Pa,{sx:{fontSize:"inherit"}})}),void 0!==b?le(_t,v?{component:"button",type:"button",onClick:v,sx:{background:"transparent",border:"none",padding:0,cursor:"pointer",whiteSpace:"nowrap",flexShrink:0},children:b}:{component:"span",sx:{whiteSpace:"nowrap",flexShrink:0},children:b}):"logo"===o?le(h,{sx:{width:32,height:32,borderRadius:"6px",backgroundColor:"var(--Text)",opacity:.8,flexShrink:0},"aria-label":"Company logo"}):le(_t,{component:"span",sx:{whiteSpace:"nowrap",flexShrink:0},children:c}),se(ce,void 0!==x?{children:[le(h,{sx:{flex:1}}),le(h,{sx:{display:"flex",alignItems:"center",flexShrink:0},children:x}),le(h,{sx:{flex:1}})]}:{children:["left"===l&&W,"expanded"===N&&le(bb,{defaultValue:0,variant:"standard",color:"default",sx:{ml:2,minHeight:0},children:le(vb,{"aria-label":"Main navigation",children:s.map(e=>le(xb,{children:e},e))})}),le(h,{sx:{flex:1}}),"right"===l&&W]}),void 0!==y?le(h,{sx:{display:"flex",alignItems:"center",gap:1},children:y}):se(ce,{children:[u&&d.length>0&&le(h,{sx:{display:"flex",alignItems:"center",gap:.5},children:d.map((a,t)=>a.raw?le(e.Fragment,{children:a.icon},t):le(yz,{ariaLabel:a.label||"Action "+(t+1),children:a.icon},t))}),p?le(Yg,{variant:"ghost",size:"small",onClick:g,"aria-label":"Sign out",startIcon:p.photoURL?le(h,{component:"img",src:p.photoURL,alt:"",sx:{width:24,height:24,borderRadius:"50%"}}):le(Oa,{sx:{fontSize:24}}),children:p.displayName?.split(" ")[0]||"Account"}):f?le(Yg,{variant:"default-outline",size:"small",onClick:f,children:"Login"}):"avatar"===i?le(Yg,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(Oa,{sx:{fontSize:28}})}):null]})]})}),le(fz,{open:M,onClose:()=>T(!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(Yg,{variant:"ghost",size:"medium",onClick:()=>T(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})})]})}function Sz({mobileVariant:e="search",barColor:t="default",surface:r="Surface",title:i="Page Title",subtitle:n="Subtitle text",actionIcon:o,companyName:l="Company",navLinks:c=["Home","Products","About"],className:s="",sx:d={}}){const[u,m]=a(!1),p=xz[t]||xz.default,f=p.theme,g=p.surface||r,b={backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:Nf,fontFamily:"inherit",width:"100%",maxWidth:420,...d},v={"data-theme":f,"data-surface":g},x=le(fz,{open:u,onClose:()=>m(!1),anchor:"left",size:"small",children:le(h,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:c.map(e=>le(Yg,{variant:"ghost",size:"medium",onClick:()=>m(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})});return"search"===e?se(ce,{children:[se(h,{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-search appbar-"+t+" "+s,...v,sx:{...b,display:"flex",alignItems:"center",height:64,px:1.5,gap:1.5},children:[le(yz,{ariaLabel:"Open navigation menu",onClick:()=>m(!0),children:le(Pa,{sx:{fontSize:"inherit"}})}),le(Xy,{placeholder:"Search "+l,size:"small",sx:{flex:1,minWidth:0}}),le(Yg,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(Oa,{sx:{fontSize:28}})})]}),x]}):se(h,"small"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-small appbar-"+t+" "+s,...v,sx:{...b,display:"flex",alignItems:"center",height:64,px:1.5,gap:1},children:[le(yz,{ariaLabel:"Back",children:le(Ha,{sx:{fontSize:"inherit"}})}),se(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}),n&&le(h,{sx:{fontSize:"12px",opacity:.7,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:n})]}),o&&le(yz,{ariaLabel:"Action",children:o})]}:"medium"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-medium appbar-"+t+" "+s,...v,sx:{...b,px:1.5,pb:2},children:[se(h,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(yz,{ariaLabel:"Back",children:le(Ha,{sx:{fontSize:"inherit"}})}),le(h,{sx:{flex:1}}),o&&le(yz,{ariaLabel:"Action",children:o})]}),se(h,{sx:{px:1.5},children:[le(h,{sx:{fontWeight:600,fontSize:"24px",lineHeight:1.2},children:i}),n&&le(h,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:n})]})]}:{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-large appbar-"+t+" "+s,...v,sx:{...b,px:1.5,pb:3},children:[se(h,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(yz,{ariaLabel:"Back",children:le(Ha,{sx:{fontSize:"inherit"}})}),le(h,{sx:{flex:1}}),o&&le(yz,{ariaLabel:"Action",children:o})]}),se(h,{sx:{px:1.5,mt:1},children:[le(h,{sx:{fontWeight:600,fontSize:"36px",lineHeight:1.1},children:i}),n&&le(h,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:n})]})]})}function wz({mode:e="desktop",...a}){return le("mobile"===e?Sz:zz,{...a})}const kz=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Cz=["default","primary","primary-light","white","black"],Bz=["Surface","Surface-Bright","Surface-Dim","Surface-Dimmest"],Mz={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 Tz({ratio:e,threshold:a}){if(!e)return le(zr,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return se(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[se(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(zr,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Az({label:e,ratio:a,threshold:t,note:r}){return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[le(dr,{style:{color:"var(--Text)"},children:e}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),le(Tz,{ratio:a,threshold:t})]})}function Lz({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Iz({color:e,selected:a,onClick:t}){const r=Mz[e]||Mz.default;return le(h,{component:"button","data-theme":r.theme,"data-surface":r.surface||"Surface",onClick:()=>t(e),"aria-label":"Select "+e,"aria-pressed":a,title:e,sx:{width:"var(--Button-Height, 36px)",height:"var(--Button-Height, 36px)",borderRadius:"4px",backgroundColor:"var(--Background)",border:a?"2px solid var(--Text)":"2px 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&&le(he,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function Nz(){const[e,r]=a("desktop"),[i,n]=a("default"),[o,l]=a("Surface"),[c,s]=a("login"),[d,u]=a("hamburger"),[p,f]=a("name"),[g,b]=a("right"),[v,x]=a("search"),[z,S]=a("Default"),[w,k]=a("Surface"),[C,B]=a({}),M="desktop"===e,T=Mz[i]||Mz.default,A=T.theme,L=T.surface||o;return t(()=>{const e={};e.text=Xr("--Text"),e.textQuiet=Xr("--Text-Quiet"),e.background=Xr("--Background"),e.border=Xr("--Border"),e.focusVisible=Xr("--Focus-Visible"),e.hover=Xr("--Hover"),e.active=Xr("--Pressed"),B(e)},[i,o,e]),se(h,{sx:{pb:8},children:[le(yM,{title:"App Bar",component:"AppBar"}),le(h,{sx:{mt:1},children:le(Xf,{theme:z,onThemeChange:S,surface:w,onSurfaceChange:k})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"AppBar",theme:z,surface:w})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:z,surface:w,children:le(h,{sx:{width:"100%",maxWidth:M?"100%":420,overflow:"hidden"},children:M?le(zz,{barColor:i,surface:o,loginType:c,menuType:d,brandType:p,searchPosition:g,companyName:"My App",navLinks:["Home","Products","About"]}):le(Sz,{barColor:i,surface:o,mobileVariant:v,companyName:"My App",title:"Page Title",subtitle:"Subtitle text"})})}),le(Yb,{code:(()=>{if(M){const e=[];"default"!==i&&e.push('barColor="'+i+'"'),"Surface"!==o&&e.push('surface="'+o+'"'),"login"!==c&&e.push('loginType="'+c+'"'),"hamburger"!==d&&e.push('menuType="'+d+'"'),"name"!==p&&e.push('brandType="'+p+'"'),"right"!==g&&e.push('searchPosition="'+g+'"');const a=e.length?"\n "+e.join("\n ")+"\n":"";return'<AppBar mode="desktop"'+(a||" ")+'companyName="My App" />'}{const e=['mode="mobile"','mobileVariant="'+v+'"'];return"default"!==i&&e.push('barColor="'+i+'"'),"Surface"!==o&&e.push('surface="'+o+'"'),"<AppBar\n "+e.join("\n ")+'\n title="Page Title"\n/>'}})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MODE"}),le(m,{direction:"row",spacing:1,children:["desktop","mobile"].map(a=>le(Lz,{label:kz(a),selected:e===a,onClick:()=>r(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Cz.map(e=>le(Iz,{color:e,selected:i===e,onClick:n},e))}),se(zr,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-theme="',A,'"']})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Bz.map(e=>le(Lz,{label:e.replace("Surface-","").replace("Surface","Default"),selected:o===e,onClick:()=>l(e)},e))}),se(zr,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-surface="',o,'"']})]}),M&&se(ce,{children:[se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MENU TYPE"}),le(m,{direction:"row",spacing:1,children:["hamburger","expanded"].map(e=>le(Lz,{label:kz(e),selected:d===e,onClick:()=>u(e)},e))}),le(zr,{style:{color:"var(--Text-Quiet)",marginTop:4,display:"block"},children:"Expanded auto-falls back to hamburger when nav > 3 links"})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BRAND"}),le(m,{direction:"row",spacing:1,children:["name","logo"].map(e=>le(Lz,{label:kz(e),selected:p===e,onClick:()=>f(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEARCH POSITION"}),le(m,{direction:"row",spacing:1,children:["left","right"].map(e=>le(Lz,{label:kz(e),selected:g===e,onClick:()=>b(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LOGIN TYPE"}),le(m,{direction:"row",spacing:1,children:["login","avatar"].map(e=>le(Lz,{label:kz(e),selected:c===e,onClick:()=>s(e)},e))})]})]}),!M&&se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MOBILE VARIANT"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["search","small","medium","large"].map(e=>le(Lz,{label:kz(e),selected:v===e,onClick:()=>x(e)},e))})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),se(h,{sx:{p:3},children:[se(dr,{color:"quiet",style:{marginBottom:24},children:[e," / ",i," / ",o,M?"":" / "+v,' — data-theme="',A,'" data-surface="',L,'"']}),se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(dr,{color:"quiet",style:{marginBottom:16},children:"All text and icons must have 4.5:1 contrast against the AppBar background."}),le(Az,{label:"Resting: var(--Text) vs. var(--Background)",ratio:Ur(C.text,C.background),threshold:4.5,note:'data-theme="'+A+'" data-surface="'+L+'"'}),le(Az,{label:"On hover: var(--Text) vs. var(--Hover)",ratio:Ur(C.text,C.hover),threshold:4.5,note:"Icon buttons use var(--Hover) on hover"}),le(Az,{label:"On active: var(--Text) vs. var(--Pressed)",ratio:Ur(C.text,C.active),threshold:4.5,note:"Icon buttons use var(--Pressed) on press"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(Az,{label:"var(--Focus-Visible) vs. var(--Background)",ratio:Ur(C.focusVisible,C.background),threshold:3,note:"outline: 3px solid var(--Focus-Visible); outline-offset: 1px"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{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:a,note:t})=>{const r=a>=24,i=a>=44,n=a>=48;return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[se(dr,{style:{color:"var(--Text)"},children:[e," — ",a,"px"]}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:t})]}),se(h,{sx:{display:"flex",gap:.5,flexWrap:"wrap",justifyContent:"flex-end"},children:[se(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"]}),se(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":"~"]}),se(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:["Android ",n?"Y":"~"]})]})]},e)})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Landmark:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<header role="banner">'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Navigation (expanded menu):"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav aria-label="Main navigation">'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Theme + Surface:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'data-theme="'+A+'" data-surface="'+L+'"'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Shadow:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"box-shadow: var(--Effect-Level-1)"})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Icon buttons:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"All icon buttons have aria-label. Focus visible on keyboard navigation."})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Keyboard:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Tab navigates all interactive elements. Enter/Space activates buttons."})]})]})]})]})]})]}),le(yb,{value:3,children:le(gM,{component:"AppBar"})})]})]})}const Wz={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}},Dz={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 Rz({options:e=[],value:n,defaultValue:o=null,onChange:l,inputValue:c,onInputChange:s,label:d,labelPosition:u="top",placeholder:m="Type to search",helperText:p,size:f="medium",variant:g="outline",color:b="primary",loading:v=!1,loadingText:x="Loading…",noOptionsText:y="No options",freeSolo:z=!1,clearable:S=!0,disabled:w=!1,fullWidth:k=!1,className:C="",sx:B={},...M}){const T=(A="default"===b?"primary":b).charAt(0).toUpperCase()+A.slice(1);var A;"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 L="light"===g?"outline":g,I="var(--Buttons-"+T+"-Border)",N="default"===b?"var(--Text)":"var(--Text-"+T+")",[W,D]=a(o),[R,F]=a(o?"string"==typeof o?o:o.label||"":""),[P,H]=a(!1),[O,E]=a(!1),[V,Q]=a(-1),j=r(null),q=r(null),G=void 0!==n,U=void 0!==c,X=G?n:W,Y=U?c:R,J="floating"===u,Z="top"===u,$=""!==Y,K=J?Dz[f]||Dz.medium:Wz[f]||Wz.medium,_=Y?e.filter(e=>("string"==typeof e?e:e.label).toLowerCase().includes(Y.toLowerCase())):e,ee=i(e=>{U||F(e),s?.(e)},[U,s]),ae=i(e=>{const a="string"==typeof e?e:e.label;G||D(e),ee(a),l?.(e),H(!1),Q(-1),q.current?.focus()},[G,l,ee]);t(()=>{if(!P)return;const e=e=>{j.current&&!j.current.contains(e.target)&&H(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[P]);return se(h,{ref:j,className:"autocomplete autocomplete-"+f+" autocomplete-variant-"+L+(P?" autocomplete-open":"")+(w?" autocomplete-disabled":"")+(C?" "+C:""),sx:{position:"relative",width:k?"100%":"auto",display:"inline-block",fontFamily:"inherit",...B},...M,children:[Z&&d&&le("small"===f?dr:mr,{component:"label",style:{display:"block",marginBottom:"6px",color:w?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:w?"var(--Disabled, 0.38)":1},children:d}),le(h,{sx:{border:"1px solid "+I,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:w?"var(--Disabled, 0.38)":1,"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(h,{children:se(h,{sx:{position:"relative",display:"flex",alignItems:"center",minHeight:K.height,backgroundColor:"var(--Hover)"},children:[J&&d&&le(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?N:"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:d}),le(h,{component:"input",ref:q,type:"text",role:"combobox","aria-expanded":P,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-label":d||m,autoComplete:"off",value:Y,onChange:e=>{ee(e.target.value),P||H(!0),Q(-1)},onKeyDown:e=>{if("Escape"!==e.key){if("ArrowDown"===e.key){if(e.preventDefault(),!P)return void H(!0);Q(e=>Math.min(e+1,_.length-1))}"ArrowUp"===e.key&&(e.preventDefault(),Q(e=>Math.max(e-1,0))),"Enter"===e.key&&P&&V>=0&&_[V]&&(e.preventDefault(),ae(_[V]))}else H(!1)},onFocus:()=>{E(!0),H(!0)},onBlur:()=>E(!1),disabled:w,placeholder:J?void 0:m,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:$||O?N:"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&&P&&le(Va,{size:16,sx:{mr:1,color:"var(--Quiet)"}}),S&&Y&&!w&&le(h,{component:"button",type:"button","aria-label":"Clear",onClick:()=>{G||D(null),ee(""),l?.(null),q.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(Ea,{sx:{fontSize:14}})}),le(h,{component:"button",type:"button","aria-label":P?"Close":"Open",tabIndex:-1,onClick:()=>{w||H(!P)},sx:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:"100%",border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:w?"not-allowed":"pointer"},children:le(ue,{sx:{fontSize:(K.iconSize||18)+"px",transform:P?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})})]})})}),p&&le(h,{sx:{fontSize:"12px",color:"var(--Quiet)",mt:"4px",ml:"2px"},children:p}),P&&le(h,{role:"listbox","aria-label":d||"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?le(h,{sx:{px:1.5,py:2,textAlign:"center",fontSize:K.fontSize,color:"var(--Quiet)"},children:x}):0===_.length?le(h,{sx:{px:1.5,py:2,textAlign:"center",fontSize:K.fontSize,color:"var(--Quiet)"},children:y}):_.map((e,a)=>{const t="string"==typeof e?e:e.label,r="string"==typeof e?e:e.value,i=t===(X?"string"==typeof X?X:X.label:null),n=function(e,a){return a?{backgroundColor:"transparent",color:"var(--Text)",fontWeight:600}:e?{backgroundColor:"var(--Hover)",color:"var(--Text)"}:{backgroundColor:"transparent",color:"var(--Text-Quiet)"}}(a===V,i);return se(h,{role:"option","aria-selected":i,onClick:()=>ae(e),onMouseEnter:()=>Q(a),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",...n,transition:"background-color 0.1s ease","&:active":{backgroundColor:"var(--Pressed)"}},children:[le(dr,{style:{flex:1,color:"inherit",fontWeight:"inherit"},children:t}),i&&le(Bf,{size:"small",sx:{opacity:.6,flexShrink:0},children:le(he,{})})]},r||t)})})]})}const Fz=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Pz=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Hz=[{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 Oz({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Ez({color:e,selected:a,onClick:t}){const r=Fz(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Vz(){const[e,t]=a("outline"),[r,i]=a("default"),[n,o]=a("medium"),[l,c]=a("top"),[s,d]=a("Fruit"),[u,p]=a(!0),[f,g]=a(!1),[b,v]=a(!0),[x,z]=a("Default"),[S,w]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Autocomplete",component:"Autocomplete"}),le(h,{sx:{mt:1},children:le(Xf,{theme:x,onThemeChange:z,surface:S,onSurfaceChange:w})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Autocomplete",theme:x,surface:S})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:x,surface:S,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(Rz,{variant:e,color:r,size:n,label:s,labelPosition:l,options:Hz,clearable:u,disabled:f,fullWidth:b})})}),le(Yb,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),s&&a.push('label="'+s+'"'),"top"!==l&&a.push('labelPosition="'+l+'"'),u||a.push("clearable={false}"),f&&a.push("disabled"),b&&a.push("fullWidth"),a.push("options={options}"),a.push("onChange={handleChange}"),"<Autocomplete\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(a=>le(Oz,{label:Fz(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Pz.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Ez,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Oz,{label:Fz(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(Oz,{label:"none"===e?"None":Fz(e),selected:l===e,onClick:()=>c(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Clearable"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear button when has value"})]}),le(sv,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clearable"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Full Width"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(sv,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Autocomplete"})})]})]})}let Qz=0;const jz={default:"Nav-Bar",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},qz="var(--Sizing-1, 8px)",Gz="40px",Uz="var(--Icon-Size, 24px)",Xz="var(--Sizing-Half, 4px)",Yz={horizontal:{px:"var(--Button-Height, 32px)",py:"12px"},vertical:{px:"var(--Sizing-1-and-Half, 12px)",py:"var(--Sizing-2, 16px)"}},Jz={px:0,py:0};function Zz({items:e=[],value:t,defaultValue:n=0,onChange:o,showLabels:l=!0,variant:c="fixed",orientation:s="horizontal",barColor:d="default",fabAction:u,fabPosition:m="end",fixed:p=!0,"aria-label":f="Bottom navigation",className:g="",sx:b={},...v}){const[x,y]=a(n),z=void 0!==t,S=z?t:x,w=i(e=>{z||y(e),o?.(e)},[z,o]),k="vertical"===s,C="floating"===c,B=jz[d]||jz.default,M=C?k?Yz.vertical:Yz.horizontal:Jz,T=r(null);null===T.current&&(T.current="bottom-nav-"+Qz++);const A=e=>T.current+"-tab-"+e,L=!!u;return se(h,{component:"nav","data-theme":B,"data-surface":"Surface-Dim","aria-label":f,className:"bottom-nav bottom-nav-"+d+" bottom-nav-style-"+(C?"floating":"fixed")+" bottom-nav-bar-"+s+(l?" bottom-nav-labels":" bottom-nav-no-labels")+(p?" bottom-nav-fixed":"")+(g?" "+g:""),sx:{display:"flex",flexDirection:k?"column":"row",alignItems:"center",justifyContent:"center",backgroundColor:"var(--Background)",borderRadius:C?"83px":0,fontFamily:"inherit",width:k?"fit-content":"100%",px:M.px,py:M.py,...p&&{position:"fixed",zIndex:1100,...k?{top:"50%",left:0,transform:"translateY(-50%)"}:{bottom:0,left:0,right:0}},...b},...v,children:[L&&le(h,{role:"tablist","aria-orientation":k?"vertical":"horizontal","aria-owns":e.map((e,a)=>A(a)).join(" "),sx:{position:"absolute",width:0,height:0,overflow:"hidden"}}),se(h,{role:L?void 0:"tablist","aria-orientation":L?void 0:k?"vertical":"horizontal",sx:{display:"flex",flexDirection:k?"column":"row",alignItems:"center",justifyContent:k?"flex-start":"space-between",gap:k?"10px":0,width:k?"auto":"100%",maxWidth:k?void 0:600},children:[e.map((e,a)=>le($z,{id:L?A(a):void 0,icon:e.icon,label:e.label,selected:a===S,showLabel:l,onClick:()=>w(a),ariaLabel:e.label||e.ariaLabel,disabled:e.disabled},e.key||a)).flatMap((e,a,t)=>{if(!u)return[e];return a===("center"===m?Math.ceil(t.length/2):t.length)-1?[e,le(_z,{...u,showLabel:l,position:m},"fab")]:[e]}),u&&0===e.length&&le(_z,{...u,showLabel:l,position:m},"fab")]})]})}function $z({id:e,icon:a,label:t,selected:r,showLabel:i,onClick:n,ariaLabel:o,disabled:l}){return se(h,{component:"button",type:"button",role:"tab",id:e,"aria-selected":r,"aria-label":o,onClick:n,disabled:l,"aria-disabled":l||void 0,className:"bottom-nav-item"+(r?" bottom-nav-item-selected":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:Xz,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:qz,borderRadius:Gz,backgroundColor:r?"var(--Text)":"transparent",color:r?"var(--Background)":"var(--Quiet)",fontSize:Uz,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:a}),i&&t&&le(wr,{className:"bottom-nav-label",style:{color:r?"var(--Text)":"var(--Quiet)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:t})]})}const Kz=32;function _z({icon:e,label:i,onClick:n,showLabel:o,actions:l,position:c="end"}){const s=Array.isArray(l)&&l.length>0,[d,u]=a(!1),m=r(null);t(()=>{if(!d)return;const e=e=>{m.current&&!m.current.contains(e.target)&&u(!1)},a=e=>{"Escape"===e.key&&u(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",a),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",a)}},[d]);const p=e=>({display:"flex",alignItems:"center",justifyContent:"center",minWidth:e,minHeight:e,boxSizing:"border-box",borderRadius:Gz,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"!==c;return se(h,{ref:m,sx:{position:"relative",display:"flex",flexShrink:0},children:[se(h,{component:"button",type:"button","aria-label":i||"Action",onClick:e=>{s&&u(e=>!e),n?.(e)},...s?{"aria-haspopup":"menu","aria-expanded":d}:{},className:"bottom-nav-fab"+(d?" bottom-nav-fab-open":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:Xz,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:{...p(32),padding:qz,fontSize:Uz,transition:"background-color 0.15s ease, transform 0.2s ease",transform:d?"rotate(45deg)":"none",".bottom-nav-fab:hover &":{backgroundColor:"var(--Hover)"},".bottom-nav-fab:active &":{backgroundColor:"var(--Pressed)"}},children:e||le(Aa,{})}),o&&i&&le(wr,{className:"bottom-nav-label",style:{color:"var(--Buttons-Default-Border)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:i})]}),s&&d&&le(h,{role:"menu","aria-label":i||"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,a)=>se(h,{component:"button",type:"button",role:"menuitem","aria-label":e.label,className:"bottom-nav-dial-item",onClick:a=>{u(!1),e.onClick?.(a)},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:Gz,"&: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:{...p(Kz),fontSize:"var(--Icon-Size-Small, 16px)"},children:e.icon||le(Aa,{})})}),le(kr,{style:{color:"inherit"},children:e.label})]},e.key||a))})]})}const eS={Home:le(Te,{sx:{fontSize:"inherit"}}),Explore:le(Qa,{sx:{fontSize:"inherit"}}),Radio:le(ja,{sx:{fontSize:"inherit"}}),Library:le(qa,{sx:{fontSize:"inherit"}}),Favorite:le(Me,{sx:{fontSize:"inherit"}}),Person:le(We,{sx:{fontSize:"inherit"}}),Search:le(Ie,{sx:{fontSize:"inherit"}}),Settings:le(Le,{sx:{fontSize:"inherit"}}),Notifications:le(ye,{sx:{fontSize:"inherit"}}),Cart:le(ze,{sx:{fontSize:"inherit"}}),Star:le(Ne,{sx:{fontSize:"inherit"}}),Bookmark:le(Ga,{sx:{fontSize:"inherit"}})},aS=Object.keys(eS),tS=[{icon:"Home",label:"Home"},{icon:"Explore",label:"Browse"},{icon:"Radio",label:"Radio"},{icon:"Library",label:"Library"}],rS=[{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 iS({label:e,selected:a,onClick:t,disabled:r}){return le(h,{component:"button",onClick:t,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:a?"var(--Buttons-Primary-Button)":"transparent",color:a?"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":a?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function nS({value:e,onChange:a,placeholder:t,sx:r}){return le(h,{component:"input",type:"text",value:e,onChange:e=>a(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)"},...r}})}function oS({value:e,onChange:a,options:t,label:r}){return le(h,{component:"select",value:e,onChange:e=>a(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: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 lS({value:e,onChange:a,min:t,max:r,label:i}){return se(h,{sx:{display:"flex",alignItems:"center",gap:1},children:[le(zr,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:90},children:i}),le("button",{type:"button",onClick:()=>{e>t&&a(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<r&&a(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 cS({label:e,checked:a,onChange:t,caption:r,disabled:i}){return se(h,{sx:{py:.5,opacity:i?.4:1},children:[le(S,{control:le(w,{checked:a,onChange:e=>t(e.target.checked),size:"small",disabled:i,sx:{color:"var(--Text-Quiet)","&.Mui-checked":{color:"var(--Buttons-Primary-Button)"}}}),label:le(Cr,{children:e}),sx:{m:0}}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginLeft:32},children:r})]})}function sS(){const[e,r]=a("Default"),[i,n]=a("Surface"),[o,l]=a(0),[c,s]=a(!0),[d,u]=a(!0),[p,f]=a("fixed"),[g,b]=a("horizontal"),[v,x]=a("default"),[z,S]=a(4),[w,k]=a(tS.map(e=>({icon:e.icon,label:e.label})));t(()=>{k(e=>{const a=[],t=[{icon:"Favorite",label:"Favorites"},{icon:"Person",label:"Profile"}];for(let r=0;r<z;r++)if(e[r])a.push(e[r]);else{const e=t[r-tS.length]||{icon:aS[r%aS.length],label:aS[r%aS.length]};a.push(e)}return a}),l(e=>Math.min(e,z-1))},[z]);const C=(e,a,t)=>{k(r=>{const i=[...r];return i[e]={...i[e],[a]:t},i})},B=w.slice(0,z).map(e=>({icon:eS[e.icon]||eS.Home,label:e.label}));return se(h,{sx:{pb:8},children:[le(yM,{title:"Bottom Navigation",component:"BottomNavigation"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:r,surface:i,onSurfaceChange:n})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"BottomNavigation",theme:e,surface:i})}),le(yb,{value:1,children:se(y,{container:!0,sx:{minHeight:400},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[se(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(Zz,{items:B,value:o,onChange:l,showLabels:d,variant:p,orientation:g,barColor:v,fixed:!1},"bn-"+z+"-"+p+"-"+g+"-"+d+"-"+v)}),se(zr,{style:{color:"var(--Text-Quiet)",textAlign:"center"},children:[z," items · ",d?"Labels":"Icons only"," · ","floating"===p?"Floating":"Fixed"," · ","vertical"===g?"Vertical":"Horizontal"," · ",(rS.find(e=>e.value===v)||rS[0]).label]})]}),le(Yb,{code:(()=>{const e=[];e.push("const items = ["),B.forEach((a,t)=>{const r=w[t];e.push(" { icon: <"+r.icon+"Icon />, label: '"+r.label+"' },")}),e.push("];"),e.push("");const a=[];return a.push("items={items}"),"default"!==v&&a.push('barColor="'+v+'"'),d||a.push("showLabels={false}"),"fixed"!==p&&a.push('variant="'+p+'"'),"horizontal"!==g&&a.push('orientation="'+g+'"'),c||a.push("fixed={false}"),e.push("<BottomNavigation"),a.forEach(a=>e.push(" "+a)),e.push("/>"),e.join("\n")})(),language:"JSX",sx:{borderRadius:0,borderBottom:"1px solid var(--Border)"}})]}),se(y,{item:!0,sx:{width:{xs:"calc(100vw - 432px)",md:"calc((100vw - 432px) / 2)"},flexShrink:0,p:3,backgroundColor:"var(--Container)",overflowY:"auto"},children:[le(er,{children:"Playground"}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:rS.map(e=>le(iS,{label:e.label,selected:v===e.value,onClick:()=>x(e.value)},e.value))}),se(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:[(rS.find(e=>e.value===v)||rS[0]).desc,' · data-surface="Surface-Dim" · bg: var(--Background)']})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),se(m,{spacing:0,children:[le(cS,{label:"Fixed",checked:c,onChange:s,caption:"Position fixed to bottom of viewport."}),le(cS,{label:"Labels",checked:d,onChange:u,caption:"Show text labels with icons."}),le(zr,{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."})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),se(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(iS,{label:"Fixed",selected:"fixed"===p,onClick:()=>f("fixed")}),le(iS,{label:"Floating",selected:"floating"===p,onClick:()=>f("floating")})]}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"floating"===p?"A pill, rounded to its own height so the ends stay semicircular at any length.":"A square band, edge to edge."}),le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",margin:"16px 0 8px"},children:"ORIENTATION"}),se(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(iS,{label:"Horizontal",selected:"horizontal"===g,onClick:()=>b("horizontal")}),le(iS,{label:"Vertical",selected:"vertical"===g,onClick:()=>b("vertical")})]}),le(zr,{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."})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"NAVIGATION ITEMS"}),le(lS,{label:"Count",value:z,onChange:S,min:3,max:6}),le(m,{spacing:1.5,sx:{mt:2},children:w.slice(0,z).map((e,a)=>se(h,{sx:{display:"flex",alignItems:"center",gap:1,flexWrap:"nowrap"},children:[le(zr,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:16,textAlign:"right"},children:a+1}),le(oS,{value:e.icon,onChange:e=>C(a,"icon",e),options:aS,label:"Item "+(a+1)+" icon"}),d&&le(nS,{value:e.label,onChange:e=>C(a,"label",e),placeholder:"Label"})]},a))})]})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(h,{sx:{p:4},children:[le(er,{children:"Accessibility Requirements"}),se(dr,{color:"quiet",style:{marginBottom:32},children:[z," items · ",d?"Labels":"Icons only"," · ","floating"===p?"Floating":"Fixed"," · ","vertical"===g?"Vertical":"Horizontal"," · ",(rS.find(e=>e.value===v)||rS[0]).label]}),se(m,{spacing:4,children:[se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Landmark:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav role="navigation" aria-label="Bottom navigation">'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Tab list:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tablist"'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Tab items:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tab", aria-selected, aria-label'})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Focus:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) on :focus-visible."})]})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Token Reference"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Bar:"}),le(zr,{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.).'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Unselected icon/label:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text-Quiet)"})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Selected:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Selected pill:"}),le(zr,{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)"})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Backfill + horizontal label:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label inside pill: var(--Buttons-Primary-Text)"})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Backfill + vertical label:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label below pill: var(--Text)"})]})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Best Practices"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Item count:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"3–5 recommended. 6 maximum."})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Horizontal layout:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Only available with 4 or fewer items."})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Labels:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Always recommended for clarity."})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Fixed:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Add bottom padding to main content to avoid overlap."})]})]})]})]})]})]}),le(yb,{value:3,children:le(gM,{component:"BottomNavigation"})})]})]})}const dS=e=>n(function(a,t){return le(E,{direction:e,ref:t,...a})}),uS={fade:n(function(e,a){return le(O,{ref:a,...e})}),grow:n(function(e,a){return le(H,{ref:a,...e})}),zoom:n(function(e,a){return le(P,{ref:a,...e})}),"slide-up":dS("up"),"slide-down":dS("down"),"slide-left":dS("left"),"slide-right":dS("right")},hS={backgroundColor:"var(--Background)",color:"var(--Text)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:Rf},mS={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},pS={color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6,py:3,px:3},fS={borderTop:"1px solid var(--Border)",px:3,py:1.5,gap:1},gS={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"}},bS={primary:{...gS,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:{...gS,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 vS({open:e=!1,onClose:a,title:t,children:r,actions:i,maxWidth:n="sm",fullScreen:o=!1,scroll:l="body",alert:c=!1,nonModal:s=!1,transition:d,transitionDuration:u=300,titleId:m="dialog-title",contentId:p="dialog-description",className:f="",sx:g={},PaperProps:b={},...v}){const x=d?uS[d]:void 0;let y;try{y=cz()}catch{y=null}const z=y?.theme||"Default",S=y?.style||"Modern",w=y?.surface||"Surface";return se(N,{open:e,onClose:(e,t)=>{c&&"backdropClick"===t||c&&"escapeKeyDown"===t||a?.(e,t)},maxWidth:!o&&n,fullScreen:o,fullWidth:!o,scroll:l,hideBackdrop:s,disableEnforceFocus:s,disableEscapeKeyDown:c,TransitionComponent:x,transitionDuration:u,"aria-labelledby":m,"aria-describedby":p,className:"dialog dialog-"+n+(o?" dialog-fullscreen":"")+(c?" dialog-alert":"")+(f?" "+f:""),style:{zIndex:1e7},slotProps:{backdrop:{sx:{backgroundColor:s?"transparent":"rgba(0,0,0,0.5)"}}},PaperProps:{...b,"data-theme":z,"data-style":S,"data-surface":w,sx:{...hS,...o&&{borderRadius:0,border:"none"},...b.sx},role:c?"alertdialog":"dialog"},...v,children:[t&&se(W,{id:m,sx:mS,children:[t,!c&&a&&le(Zg,{"aria-label":"Close dialog",onClick:e=>a(e,"closeButton"),size:"small",variant:"ghost",sx:{color:"var(--Text-Quiet)"},children:le(Ea,{fontSize:"small"})})]}),le(D,{dividers:"paper"===l,sx:{...pS,..."paper"===l&&{maxHeight:o?"none":"400px",overflowY:"auto",borderColor:"var(--Border)"}},children:c?le(R,{id:p,sx:{color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6},children:r}):le(h,{id:p,children:r})}),i&&le(F,{sx:fS,children:i})]})}function xS({open:e,onClose:a,title:t,children:r,confirmText:i="Confirm",cancelText:n="Cancel",onConfirm:o,onCancel:l,...c}){return le(vS,{open:e,onClose:a,title:t,alert:!0,...c,actions:se(ce,{children:[le(h,{component:"button",type:"button",onClick:l||a,sx:bS.outline,children:n}),le(h,{component:"button",type:"button",onClick:o||a,sx:bS.primary,children:i})]}),children:r})}function yS({open:e,onClose:a,title:t,children:r,submitText:i="Submit",cancelText:n="Cancel",onSubmit:o,...l}){return le(vS,{open:e,onClose:a,title:t,...l,actions:se(ce,{children:[le(h,{component:"button",type:"button",onClick:a,sx:bS.outline,children:n}),le(h,{component:"button",type:"button",onClick:o,sx:bS.primary,children:i})]}),children:r})}function zS({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function SS(){const[e,t]=a(!1),[r,i]=a("sm"),[n,o]=a(!1),[l,c]=a("none"),[s,d]=a(!1),[u,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Dialog",component:"Dialog"}),le(h,{sx:{mt:1},children:le(Xf,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Dialog",theme:f,surface:b})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:f,surface:b,children:le(Yg,{variant:"default",onClick:()=>t(!0),children:"Open Dialog"})}),le(Yb,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"sm"!==r&&e.push('maxWidth="'+r+'"'),n&&e.push("fullScreen"),s&&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(vS,{open:e,onClose:(e,a)=>{s&&"backdropClick"===a||t(!1)},maxWidth:r,fullScreen:n,alert:s,nonModal:u,transition:"none"!==l?l:void 0,title:"Dialog Title",actions:se(ce,{children:[le(Yg,{variant:"default-outline",size:"small",onClick:()=>t(!1),children:"Cancel"}),le(Yg,{variant:"default",size:"small",onClick:()=>t(!1),children:"Confirm"})]}),children:le(mr,{children:"This is the dialog content. You can put any information here that requires user attention or action."})})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),se(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[["xs","sm","md","lg","xl"].map(e=>le(zS,{label:e.toUpperCase(),selected:r===e,onClick:()=>{i(e),o(!1)}},e)),le(zS,{label:"Full Screen",selected:n,onClick:()=>o(!n)})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TRANSITION"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["none","slide-up","slide-down","grow","fade","zoom"].map(e=>{return le(zS,{label:(a=e,a?a.charAt(0).toUpperCase()+a.slice(1):""),selected:l===e,onClick:()=>c(e)},e);var a})})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Alert"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop dismiss, no Escape"})]}),le(sv,{variant:"default-outline",checked:s,onChange:e=>d(e.target.checked),size:"small","aria-label":"Alert mode"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Non-Modal"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop, interact with content behind"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Non-modal"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Dialog"})})]})]})}const wS={compact:{minHeight:"24px",fontSize:"13px",iconSize:16,gap:"6px"},default:{minHeight:"32px",fontSize:"14px",iconSize:18,gap:"8px"}},kS={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)"},CS={"@keyframes omni-tree-slide":{from:{opacity:0,transform:"translateY(-4px)"},to:{opacity:1,transform:"none"}}};function BS(e,a,t=1,r=[]){return e.forEach((i,n)=>{r.push({item:i,level:t,index:n,siblings:e.length}),i.children?.length&&a.includes(i.id)&&BS(i.children,a,t+1,r)}),r}function MS(e,a,t=null){for(const r of e){if(r.id===a)return t;if(r.children?.length){const e=MS(r.children,a,r.id);if(null!=e)return e;if(null===e&&r.children.some(e=>e.id===a))return r.id}}return null}function TS({node:e,density:a,expanded:t,selected:r,focusedId:i,multiSelect:n,checkboxSelection:o,disableSelection:l,disabledItemsFocusable:c,collapseIcon:s,expandIcon:d,animation:u,onToggle:m,onSelect:p,onFocusItem:f,registerRef:g}){const{item:b,level:v,index:x,siblings:y}=e,z=wS[a]||wS.default,S="compact"===a?zr:dr,w=!!b.children?.length,k=w&&t.includes(b.id),C=r.includes(b.id),B=!!b.disabled,M=!B||c;return se(h,{component:"li",role:"treeitem","aria-expanded":w?k:void 0,"aria-selected":l?void 0:C,"aria-disabled":B||void 0,"aria-level":v,"aria-setsize":y,"aria-posinset":x+1,tabIndex:i===b.id&&M?0:-1,ref:e=>g(b.id,e),onFocus:e=>{e.stopPropagation(),f(b.id)},sx:{outline:"none",listStyle:"none",...b.sx||{}},children:[se(h,{className:"omni-tree-content",onClick:e=>{B||(e.stopPropagation(),w&&m(e,b.id),l||p(e,b.id))},sx:{display:"flex",alignItems:"center",gap:z.gap,minHeight:z.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:B?"not-allowed":"pointer",opacity:B?"var(--Disabled, 0.38)":1,transition:"color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease",...B?{}:{"&: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:z.iconSize,height:z.iconSize,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",color:"inherit"},children:w&&(k?s:d)}),o&&!l&&le(Rv,{checked:C,disabled:B,size:"small","aria-hidden":"true",tabIndex:-1,onChange:()=>{}}),b.icon&&le(Bf,{size:"small",sx:{color:"inherit",flexShrink:0},children:b.icon}),le(S,{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:"inherit",fontWeight:"inherit"},children:b.label}),b.badge&&le(h,{sx:{flexShrink:0},children:b.badge})]}),w&&k&&le(h,{component:"ul",role:"group",sx:{margin:0,padding:0,paddingLeft:"9px",marginLeft:"12px",listStyle:"none",animation:kS[u]},children:b.children.map((e,h)=>le(TS,{node:{item:e,level:v+1,index:h,siblings:b.children.length},density:a,expanded:t,selected:r,focusedId:i,multiSelect:n,checkboxSelection:o,disableSelection:l,disabledItemsFocusable:c,collapseIcon:s,expandIcon:d,animation:u,onToggle:m,onSelect:p,onFocusItem:f,registerRef:g},e.id))})]})}function AS({color:e="default",variant:t="solid",surface:n,density:o="default",animation:l="slide",selectionStyle:c,items:s=LS,selectionMode:d="single",checkboxSelection:m=!1,disableSelection:p=!1,disabledItemsFocusable:f=!1,defaultExpandedItems:g,expandedItems:b,onExpandedItemsChange:v,selectedItems:x,onSelectedItemsChange:y,onItemExpansionToggle:z,onItemSelectionToggle:S,slots:w,"aria-label":k="Tree view",className:C="",sx:B={},...M}){const T=c||t,A="multi"===d,[L,I]=a(g||[]),N=void 0!==b?b:L,[W,D]=a(x||(A?[]:null)),R=void 0!==x?x:W,F=Array.isArray(R)?R:R?[R]:[],P=u(()=>BS(s,N),[s,N]),[H,O]=a(null),E=H??P[0]?.item.id??null,V=r({}),Q=i((e,a)=>{a?V.current[e]=a:delete V.current[e]},[]),j=i(e=>{O(e),V.current[e]?.focus()},[]),q=i((e,a)=>{const t=N.includes(a),r=t?N.filter(e=>e!==a):[...N,a];void 0===b&&I(r),v?.(e,r),z?.(e,a,!t)},[N,b,v,z]),G=i((e,a)=>{const t=F.includes(a),r=A?t?F.filter(e=>e!==a):[...F,a]:[a],i=A?r:r[0]??null;void 0===x&&D(i),y?.(e,i),S?.(e,a,!A||!t)},[F,A,x,y,S]),U=i(e=>{const a=P.filter(e=>!e.item.disabled||f),t=a.findIndex(e=>e.item.id===E),r=a[t];if(!r)return;const{item:i}=r,n=!!i.children?.length,o=n&&N.includes(i.id),l=t=>{const r=a[Math.max(0,Math.min(a.length-1,t))];r&&(e.preventDefault(),j(r.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(a.length-1);break;case"ArrowRight":n&&!o?(e.preventDefault(),q(e,i.id)):o&&l(t+1);break;case"ArrowLeft":if(o)e.preventDefault(),q(e,i.id);else{const a=MS(s,i.id);a&&(e.preventDefault(),j(a))}break;case"Enter":case" ":e.preventDefault(),p?n&&q(e,i.id):G(e,i.id)}},[P,E,N,s,f,p,j,q,G]),X=(Y=e).charAt(0).toUpperCase()+Y.slice(1);var Y;const J="default"===T?void 0:X,Z=n||("light"===T?"Surface-Brightest":"Surface-Dim"),$=w?.collapseIcon?le(w.collapseIcon,{}):le(Bf,{size:"small",sx:{color:"inherit",transform:"rotate(90deg)"},children:le(Da,{})}),K=w?.expandIcon?le(w.expandIcon,{}):le(Bf,{size:"small",sx:{color:"inherit"},children:le(Da,{})});return le(h,{"data-theme":J,"data-surface":Z,className:"omni-treeview omni-treeview-"+T+" omni-treeview-"+e+" omni-treeview-"+o+(C?" "+C:""),sx:{backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",...CS,...B},children:le(h,{component:"ul",role:"tree","aria-label":k,"aria-multiselectable":A||void 0,onKeyDown:U,sx:{margin:0,padding:"8px",listStyle:"none",fontFamily:"inherit"},...M,children:s.map((e,a)=>le(TS,{node:{item:e,level:1,index:a,siblings:s.length},density:o,expanded:N,selected:F,focusedId:E,multiSelect:A,checkboxSelection:m,disableSelection:p,disabledItemsFocusable:f,collapseIcon:$,expandIcon:K,animation:l,onToggle:q,onSelect:G,onFocusItem:O,registerRef:Q},e.id))})})}const LS=[{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"}],IS=e=>le(AS,{variant:"solid",...e}),NS=e=>le(AS,{variant:"light",...e}),WS=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",DS=[{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 RS({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function FS(){const[e,t]=a(!1),[r,i]=a("medium"),[n,o]=a("left"),[l,c]=a("Default"),[s,d]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Drawer",component:"Drawer"}),le(h,{sx:{mt:1},children:le(Xf,{theme:l,onThemeChange:c,surface:s,onSurfaceChange:d})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Drawer",theme:l,surface:s})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:l,surface:s,children:le(Yg,{variant:"default",onClick:()=>t(!0),children:"Open Drawer"})}),le(Yb,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"medium"!==r&&e.push('size="'+r+'"'),"left"!==n&&e.push('anchor="'+n+'"'),"<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}}),se(fz,{open:e,onClose:()=>t(!1),size:r,anchor:n,children:[se(bz,{children:[le(ar,{children:"Navigation"}),le(gz,{onClick:()=>t(!1)})]}),le(vz,{children:le(AS,{items:DS,variant:"solid",color:"default",defaultExpandedItems:["products"],sx:{border:"none",borderRadius:0}})})]})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(RS,{label:WS(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["left","right","top","bottom"].map(e=>le(RS,{label:WS(e),selected:n===e,onClick:()=>o(e)},e))})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Drawer"})})]})]})}const PS={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 HS({onFiles:e,accept:t,multiple:n=!1,size:o="medium",disabled:l=!1,icon:c,label:s,sublabel:d,children:u,className:m="",sx:p={},...f}){const[g,b]=a(!1),v=r(null),x=r(0),y=PS[o]||PS.medium,z=i(a=>{!l&&a?.length&&e?.(Array.from(a))},[l,e]),S=i(e=>{e.preventDefault(),e.stopPropagation(),x.current=0,b(!1),l||z(e.dataTransfer.files)},[l,z]),w=i(e=>{e.preventDefault(),e.stopPropagation()},[]),k=i(e=>{e.preventDefault(),e.stopPropagation(),x.current++,l||b(!0)},[l]),C=i(e=>{e.preventDefault(),e.stopPropagation(),x.current--,0===x.current&&b(!1)},[]),B=i(()=>{l||v.current?.click()},[l]),M=i(e=>{l||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),v.current?.click())},[l]),T=i(e=>{z(e.target.files),e.target.value=""},[z]),A=c||Ua,L=n?"Drag and drop files here":"Drag and drop file here";return se(h,{role:"button",tabIndex:l?-1:0,"aria-label":s||L,"aria-disabled":l||void 0,onClick:B,onKeyDown:M,onDrop:S,onDragOver:w,onDragEnter:k,onDragLeave:C,className:"drop-zone drop-zone-"+o+(g?" drop-zone-dragging":"")+(l?" drop-zone-disabled":"")+" "+m,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)"}},...p},...f,children:[le("input",{ref:v,type:"file",accept:t,multiple:n,onChange:T,style:{display:"none"},"aria-hidden":"true",tabIndex:-1}),u||se(ce,{children:[le(A,{sx:{fontSize:y.iconSize,color:"var(--Text-Quiet)"}}),le(dr,{style:{color:"var(--Text)"},children:s||L}),le(zr,{style:{color:"var(--Text-Quiet)"},children:d||"or click to browse"})]})]})}const OS={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},ES={size:40,iconSize:"24px",borderRadius:"8px"},VS=new Set;function QS({children:e,color:a="primary",variant:t="solid",size:r,className:i="",sx:n={},...o}){!function(e){void 0!==e&&("production"===process.env.NODE_ENV||VS.has(e)||(VS.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=ES,c=OS[a]||OS.primary;let s,d;switch(t){case"light":s=c,d="Surface-Brightest";break;case"dark":s=c,d="Surface-Dimmest";break;default:s=c,d="Surface"}return le(h,{"data-theme":s,"data-surface":d,className:"icon-badge icon-badge-"+t+" icon-badge-"+a+" "+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"},...n},...o,children:e})}const jS={eyebrow:Ar,title:mr,secondary:ur},qS={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},GS={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 US({children:e,size:a="medium",isButton:t=!1,onAction:r,ariaLabel:i}){return le(h,t?{component:"button",role:"button",tabIndex:0,"aria-label":i||"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 XS({children:e,startDecorator:a,endDecorator:t,startDecoratorIsButton:r=!1,endDecoratorIsButton:i=!1,onStartDecoratorAction:n,onEndDecoratorAction:o,startDecoratorAriaLabel:l,endDecoratorAriaLabel:c,size:s="medium",variant:d="default",color:u,eyebrow:m,overline:p,secondary:f,clickable:g=!1,disabled:b=!1,selected:v=!1,selectionMode:x="none",onSelect:y,onClick:z,bottomBorder:S=!1,rightBorder:k=!1,component:C="li",sx:B={},...T}){const A=GS[s]||GS.medium,L=g||!!z,I="checkbox"===x||"radio"===x,N=(L||I)&&!b,W=e=>{b||(I&&y?.(e),z?.(e))};return se(h,{component:C,role:I?"option":L?"button":"listitem",tabIndex:N?0:void 0,"aria-disabled":b||void 0,"aria-selected":I?v:v||void 0,"aria-checked":"checkbox"===x?v:void 0,onClick:W,onKeyDown:N?e=>{b||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),W(e))}:void 0,className:"list-item"+(v?" list-item-selected":"")+(b?" list-item-disabled":"")+(L?" list-item-clickable":"")+(I?" list-item-selectable":""),sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",width:"100%",boxSizing:"border-box",gap:"var(--Sizing-1-and-Half)",py:A.py,px:A.px,minHeight:"32px",fontSize:A.fontSize,fontFamily:"inherit",color:"var(--Text)",listStyle:"none",cursor:N?"pointer":"default",opacity:b?"var(--Disabled, 0.38)":1,position:"relative",transition:"background-color 0.15s ease, box-shadow 0.15s ease",...L?{border:"1px solid var(--Border)",boxShadow:"var(--Effect-Level-1)",padding:"var(--Sizing-1)",borderRadius:"var(--Input-Radius)"}:{},...!L&&S?{borderBottom:"1px solid var(--Border-Variant)"}:{},...!L&&k?{borderRight:"1px solid var(--Border-Variant)"}:{},backgroundColor:"transparent",...v?{"&::before":{content:'""',position:"absolute",inset:"-1px",border:"1px solid var(--Border)",borderRadius:"var(--Menu-Item-Radius, var(--Input-Radius))",pointerEvents:"none"}}:{},"&:hover":N?{backgroundColor:"var(--Hover)",boxShadow:"var(--Effect-Level-2)"}:{},"&:active":N?{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&&le(w,{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&&le(M,{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")}}),a&&le(US,{size:s,isButton:r,onAction:n,ariaLabel:l,children:a}),(()=>{const a=jS,t=m??p,r={display:"block",width:"100%",wordBreak:"break-word",overflowWrap:"anywhere"};return se(h,{sx:{flex:"1 1 auto",width:"100%",minWidth:0,display:"flex",flexDirection:"column",gap:0},children:[t&&le(a.eyebrow,{style:{...r,color:"var(--Quiet)"},children:t}),null!=e&&le(a.title,{style:{...r,color:"var(--Text)"},children:e}),f&&le(a.secondary,{style:{...r,color:"var(--Quiet)"},children:f})]})})(),t&&le(US,{size:s,isButton:i,onAction:o,ariaLabel:c,children:t})]})}function YS({children:a,items:t,variant:r="default",color:i="primary",size:n="medium",orientation:o="vertical",dividers:l=!1,selectionMode:c="none",loading:s=!1,skeletonRows:d=3,empty:u,error:m,selectedIndices:p=[],onSelectionChange:f,clickable:g=!1,component:b="ul",className:v="",sx:x={},...y}){const z="horizontal"===o,S="checkbox"===c||"radio"===c,w="light"===r,k="default"===r,C={};("solid"===r||w)&&qS[i]&&(C["data-theme"]=qS[i],w&&(C["data-surface"]="Surface-Brightest"));const B=m?"error":s?"loading":t&&0===t.length&&u?"empty":null;return le(h,{component:b,role:S?"listbox":"list","aria-busy":"loading"===B?"true":void 0,"aria-multiselectable":"checkbox"===c||void 0,...C,className:"list-container list-"+r+" list-"+i+" "+v,sx:{display:"flex",flexDirection:z?"row":"column",boxSizing:"border-box",alignItems:"stretch",gap:g?"var(--Sizing-1)":0,m:0,p:k?0:1,backgroundColor:k?"transparent":"var(--Background)",color:"var(--Text)",borderRadius:k?0:"var(--Style-Border-Radius)",width:"100%",listStyle:"none",...z?{"& > .list-item":{flex:"1 1 0",width:"auto"}}:{},...x},...y,children:(()=>{if("loading"===B)return le(h,{component:"li",sx:{listStyle:"none"},children:le(zt,{label:"Loading",children:Array.from({length:d}).map((e,a)=>le(XS,{component:"div",size:n,variant:r,color:i,children:"        "},"sk-"+a))})});if("error"===B)return le(h,{component:"li",sx:{listStyle:"none"},children:m});if("empty"===B)return le(h,{component:"li",sx:{listStyle:"none"},children:u});if(t&&t.length>0){const e=[];return t.forEach((a,o)=>{e.push(le(XS,{size:n,variant:r,color:i,startDecorator:a.startDecorator,endDecorator:a.endDecorator,startDecoratorIsButton:a.startDecoratorIsButton,endDecoratorIsButton:a.endDecoratorIsButton,onStartDecoratorAction:a.onStartDecoratorAction,onEndDecoratorAction:a.onEndDecoratorAction,startDecoratorAriaLabel:a.startDecoratorAriaLabel,endDecoratorAriaLabel:a.endDecoratorAriaLabel,eyebrow:a.eyebrow??a.overline,secondary:a.secondary,clickable:g||a.clickable,disabled:a.disabled,bottomBorder:a.bottomBorder,rightBorder:a.rightBorder,selected:S?p.includes(o):a.selected,selectionMode:c,onSelect:()=>(e=>{if(f)if("radio"===c)f([e]);else{const a=p.includes(e)?p.filter(a=>a!==e):[...p,e];f(a)}})(o),onClick:a.onClick,children:a.label||a.children},"item-"+o)),l&&o<t.length-1&&e.push(le(h,{component:"li",role:"separator","aria-hidden":"true",sx:z?{width:"1px",alignSelf:"stretch",backgroundColor:"var(--Border)",flexShrink:0}:{height:"1px",backgroundColor:"var(--Border)"}},"div-"+o))}),e}if(a){const t=e.Children.toArray(a);if(!l)return t;const r=[];return t.forEach((e,a)=>{r.push(e),a<t.length-1&&r.push(le(h,{component:"li",role:"separator","aria-hidden":"true",sx:z?{width:"1px",alignSelf:"stretch",backgroundColor:"var(--Border)",flexShrink:0}:{height:"1px",backgroundColor:"var(--Border)"}},"div-"+a))}),r}return null})()})}const JS=["default","primary","secondary","tertiary","neutral","info","success","warning","error"],ZS={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function $S({color:e="primary",width:a="hug",allCaps:t=!1,children:r,className:i="",sx:n={},...o}){const l="fill"===a,c=ZS[e]||"Primary";return le(h,{component:"span",className:"tag tag-"+e+(i?" "+i:""),sx:{display:l?"flex":"inline-flex",alignItems:"center",justifyContent:l?"center":"flex-start",height:"24px",px:"8px",borderRadius:0,backgroundColor:"var(--Tag-"+c+"-BG)",color:"var(--Tag-"+c+"-Text)",width:l?"100%":"auto",flexShrink:0,userSelect:"none",...n},...o,children:le(dr,{component:"span",sx:{color:"inherit",lineHeight:"24px",whiteSpace:"nowrap",fontWeight:600,textTransform:t?"uppercase":"none"},children:r})})}const KS=e=>le($S,{color:"primary",...e}),_S=e=>le($S,{color:"secondary",...e}),ew=e=>le($S,{color:"tertiary",...e}),aw=e=>le($S,{color:"neutral",...e}),tw=e=>le($S,{color:"info",...e}),rw=e=>le($S,{color:"success",...e}),iw=e=>le($S,{color:"warning",...e}),nw=e=>le($S,{color:"error",...e}),ow=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function lw({ratio:e,threshold:a}){if(!e)return le(zr,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return se(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[se(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(zr,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function cw({label:e,ratio:a,threshold:t,note:r}){return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[le(dr,{style:{color:"var(--Text)"},children:e}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),le(lw,{ratio:a,threshold:t})]})}function sw({color:e,selected:a,onClick:t}){const r=ZS[e]||((i=e)?i.charAt(0).toUpperCase()+i.slice(1):"");var i;return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height, 36px)",height:"var(--Button-Height, 36px)",borderRadius:"4px",backgroundColor:"var(--Tag-"+r+"-BG)",border:a?"2px solid var(--Text)":"2px 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&&le(he,{sx:{fontSize:16,color:"var(--Tag-"+r+"-Text)",pointerEvents:"none"}})})}function dw(){const[e,r]=a("primary"),[i,n]=a("New"),[o,l]=a(!1),[c,s]=a("Default"),[d,u]=a("Surface"),[p,f]=a({}),g=ZS[e]||"Primary";return t(()=>{f({tagText:Xr("--Tag-"+g+"-Text"),tagBg:Xr("--Tag-"+g+"-BG"),pageBg:Xr("--Background")})},[e,g]),se(h,{sx:{pb:8},children:[le(yM,{title:"Tag",component:"Tag"}),le(h,{sx:{mt:1},children:le(Xf,{theme:c,onThemeChange:s,surface:d,onSurfaceChange:u})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Tag",theme:c,surface:d})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:c,surface:d,children:se(h,{sx:{width:"100%",maxWidth:480},children:[le(h,{sx:{display:"flex",alignItems:"center",gap:2,mb:3},children:le($S,{color:e,allCaps:o,children:i})}),le(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:JS.map(e=>le($S,{color:e,allCaps:o,children:ZS[e]},e))})]})}),le(Yb,{code:(()=>{const a=[];"primary"!==e&&a.push('color="'+e+'"'),o&&a.push("allCaps");return"<Tag"+(a.length?" "+a.join(" "):"")+">"+i+"</Tag>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:ow.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(sw,{color:a,selected:e===a,onClick:r},a))})]},a.label))}),se(zr,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:["bg: var(--Tag-",g,"-BG) · text: var(--Tag-",g,"-Text)"]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL TEXT"}),le(h,{component:"input",type:"text",value:i,onChange:e=>n(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)"}}})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(dr,{children:"All caps"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"text-transform: uppercase"})]}),le(sv,{checked:o,onChange:e=>l(e.target.checked),size:"small","aria-label":"All caps"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),se(h,{sx:{p:3},children:[se(dr,{color:"quiet",style:{marginBottom:24},children:['color="',e,'" — var(--Tag-',g,"-BG) / var(--Tag-",g,"-Text)"]}),se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(dr,{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."}),le(cw,{label:"var(--Tag-"+g+"-Text) vs. var(--Tag-"+g+"-BG)",ratio:Ur(p.tagText,p.tagBg),threshold:4.5,note:"Tag text on tag background for "+e+" color"}),le(cw,{label:"var(--Tag-"+g+"-BG) vs. var(--Background)",ratio:Ur(p.tagBg,p.pageBg),threshold:3,note:"Tag background against page background (non-text contrast, WCAG 1.4.11)"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Touch Target (WCAG 2.5.8)"}),le(dr,{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."}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{style:{color:"var(--Text)"},children:"Tag height — 24px"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive. No touch target requirement on the Tag itself."})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"All Colors"}),le(dr,{color:"quiet",style:{marginBottom:16},children:"Visual overview of all tag colors in the current theme."}),le(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:JS.map(e=>le($S,{color:e,allCaps:o,children:ZS[e]},e))})]})]})]})]}),le(yb,{value:3,children:le(gM,{component:"Tag"})})]})]})}const uw={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",white:"Neutral",black:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},hw={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 mw({value:e,color:a="primary",size:t="medium",thickness:r,showValue:i=!1,children:n,className:l="",sx:c={},...s}){const d=uw[a]||"Primary",u="number"==typeof t?{diameter:t,thickness:Math.max(2,Math.round(t/11)),fontSize:Math.max(8,Math.round(t/3.3))+"px"}:hw[t]||hw.medium,m=r||u.thickness,p=null!=e,f=p?Math.min(100,Math.max(0,e)):0,g=(u.diameter-m)/2,b=2*Math.PI*g,v=p?b-f/100*b:.75*b,x="var(--Buttons-"+d+"-Border)",y="cp-grad-"+o().replace(/:/g,"");return se(h,{role:"progressbar","aria-valuenow":p?Math.round(f):void 0,"aria-valuemin":p?0:void 0,"aria-valuemax":p?100:void 0,"aria-label":p?Math.round(f)+"% progress":"Loading",className:"circular-progress circular-progress-"+t+" circular-progress-"+a+(p?" 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,...!p&&{animation:"circular-progress-spin 1.2s linear infinite","@keyframes circular-progress-spin":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}},...c},...s,children:[se("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:se("linearGradient",{id:y,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[le("stop",{offset:"0%",stopColor:x,stopOpacity:"0"}),le("stop",{offset:"100%",stopColor:x,stopOpacity:"1"})]})}),le("circle",{cx:u.diameter/2,cy:u.diameter/2,r:g,fill:"none",stroke:"var(--Border-Variant)",strokeWidth:m,className:"circular-progress-track"}),le("circle",{cx:u.diameter/2,cy:u.diameter/2,r:g,fill:"none",stroke:"url(#"+y+")",strokeWidth:m,strokeDasharray:b,strokeDashoffset:v,strokeLinecap:"round",className:"circular-progress-indicator",style:{transition:p?"stroke-dashoffset 0.4s ease":"none"}})]}),(i||n)&&p&&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 pw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",fw=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function gw({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function bw({color:e,selected:a,onClick:t}){const r=pw(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function vw(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a(!1),[l,c]=a(65),[s,d]=a(!1),[u,p]=a("Default"),[f,g]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Circular Progress",component:"CircularProgress"}),le(h,{sx:{mt:1},children:le(Xf,{theme:u,onThemeChange:p,surface:f,onSurfaceChange:g})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"CircularProgress",theme:u,surface:f})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:u,surface:f,children:le(mw,{color:e,size:r,value:n?l:void 0,showValue:n&&s})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),n&&(a.push("value={"+l+"}"),s&&a.push("showValue")),0===a.length?"<CircularProgress />":"<CircularProgress\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:fw.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(bw,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(gw,{label:pw(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Determinate"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static arc at a specific value"})]}),le(sv,{checked:n,onChange:e=>o(e.target.checked),size:"small","aria-label":"Determinate"})]}),n&&se(ce,{children:[le(h,{sx:{mt:2},children:le(Nx,{label:"Value",min:0,max:100,value:l,onChange:(e,a)=>c(a),size:"small",valueLabelDisplay:"auto"})}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Label"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Center percentage text"})]}),le(sv,{checked:s,onChange:e=>d(e.target.checked),size:"small","aria-label":"Show label"})]})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Role:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="progressbar"'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Determinate:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-valuenow, aria-valuemin="0", aria-valuemax="100"'})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Indeterminate:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-label="Loading" (no value attributes)'})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Label:"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Center percentage label is aria-hidden — screen readers use aria-valuenow."})]})]})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Token Reference"}),se(m,{spacing:0,children:[se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Track (back circle):"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Border-Variant)"})]}),se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:"Fill (progress arc):"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Buttons-{Color}-Border)"})]}),se(h,{sx:{py:1.5},children:[le(dr,{children:"Center label:"}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]})]})]})]})})]}),le(yb,{value:3,children:le(gM,{component:"CircularProgress"})})]})]})}const xw={small:16,medium:24,large:32};function yw({theme:e,surface:a,size:t="medium",color:r="primary",message:i="Loading...",sx:n={},"aria-label":o="Loading","aria-labelledby":l,...c}){return se(m,{alignItems:"center",justifyContent:"center",spacing:2,sx:{py:4,...n},...c,"data-theme":e||void 0,"data-surface":a||void 0,children:[le(mw,{size:"number"==typeof t?t:xw[t]??xw.medium,color:r,"aria-label":l?void 0:o,"aria-labelledby":l}),i&&le(V,{sx:{color:"var(--Text-Secondary)",fontWeight:500},children:i})]})}function zw({value:e,label:a,sx:t={},...r}){return se(m,{spacing:1,sx:{...t},...r,children:[a&&se(m,{direction:"row",justifyContent:"space-between",children:[le(V,{variant:"body2",sx:{color:"var(--Text)",fontWeight:500},children:a}),void 0!==e&&se(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:[e,"%"]})]}),le(Q,{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 Sw({rows:e=3,height:a=100,spacing:t=2,sx:r={},...i}){return le(m,{spacing:t,sx:{...r},...i,children:Array.from({length:e}).map((e,t)=>le(q,{variant:"rectangular",height:a,sx:{backgroundColor:"var(--Container-Low)",borderRadius:"8px"}},t))})}function ww({message:e="Loading",sx:a={},...t}){return se(m,{alignItems:"center",justifyContent:"center",spacing:2,sx:{py:4,...a},...t,children:[le(h,{sx:{display:"flex",gap:1},children:[0,1,2].map(e=>le(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&&le(V,{sx:{color:"var(--Text-Secondary)",fontWeight:500},children:e})]})}function kw({message:e="Loading page...",size:a=60,sx:t={},...r}){return le(h,{sx:{display:"flex",alignItems:"center",justifyContent:"center",minHeight:"100vh",backgroundColor:"var(--Background)",...t},...r,children:le(yw,{size:a,message:e})})}function Cw({lines:e=3,showImage:a=!0,sx:t={},...r}){return le(j,{sx:{p:2,backgroundColor:"var(--Container)",...t},...r,children:se(m,{spacing:2,children:[a&&le(q,{variant:"rectangular",height:200,sx:{backgroundColor:"var(--Container-Low)",borderRadius:1}}),le(m,{spacing:1,children:Array.from({length:e}).map((e,a)=>le(q,{variant:"text",height:0===a?24:16,sx:{backgroundColor:"var(--Container-Low)"}},a))})]})})}function Bw({isLoading:e=!1,message:a="Loading...",children:t,sx:r={},...i}){return se(h,{sx:{position:"relative",...r},...i,children:[t,e&&le(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:le(yw,{size:40,message:a})})]})}const Mw=e=>e.charAt(0).toUpperCase()+e.slice(1),Tw={small:dr,medium:mr,large:vr},Aw={small:or,medium:nr,large:ir},Lw={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"}},Iw=l({open:!1,setOpen:()=>{},anchorRef:{current:null},menuId:"",buttonId:"",variant:"outline",color:"default",size:"medium"}),Nw=()=>c(Iw);function Ww({children:e,variant:t="outline",color:n="default",size:l="medium",open:c,onOpenChange:s,...d}){const[u,m]=a(!1),p=void 0!==c,f=p?c:u,g=r(null),b=o(),v="menu-"+b,x="menubtn-"+b,y=i(e=>{const a="function"==typeof e?e(f):e;p?s?.(a):m(a)},[p,f,s]);return le(Iw.Provider,{value:{open:f,setOpen:y,anchorRef:g,menuId:v,buttonId:x,variant:t,color:n,size:l},children:le(h,{sx:{display:"inline-flex",position:"relative"},...d,children:e})})}function Dw({children:a,className:t="",sx:r={},...i}){const{open:n,setOpen:o,anchorRef:l,menuId:c,buttonId:s,size:d,color:u}=Nw(),m=Lw[d]||Lw.medium,p=Mw("default"===u?"Default":u);return se(h,{component:"button",ref:l,id:s,"aria-haspopup":"true","aria-expanded":n,"aria-controls":n?c:void 0,onClick:()=>o(e=>!e),className:"menu-button "+t,sx:{display:"inline-flex",alignItems:"center",gap:"6px",padding:m.itemPy+" "+m.itemPx,fontSize:m.fontSize,fontFamily:"inherit",fontWeight:600,color:"var(--Text)",backgroundColor:"var(--Background)",border:"1px solid var(--Buttons-"+p+"-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(),o(!0))},...i,children:["string"==typeof a?e.createElement(Tw[d]||Tw.medium,{style:{color:"inherit",fontWeight:600}},a):a,le(Bf,{size:"small",sx:{color:"var(--Quiet)",transition:"transform 0.2s ease",transform:n?"rotate(180deg)":"rotate(0deg)"},children:le(ue,{})})]})}function Rw({children:e,className:a="",placement:i="bottom-start",sx:n={},...o}){const{open:l,setOpen:c,anchorRef:s,menuId:d,buttonId:u,variant:m,color:p,size:f}=Nw(),g=r(null),b=Lw[f]||Lw.medium,v=Mw("default"===p?"Default":p),x="var(--Buttons-"+v+"-Border)",y="light"===m?"default"===p?"Default":v:"solid"===m?v:void 0,z="light"===m?"Surface-Brightest":"solid"===m?"Surface":void 0;return t(()=>{if(l&&g.current){const e=g.current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');e&&e.focus()}},[l]),t(()=>{if(!l)return;const e=e=>{g.current&&!g.current.contains(e.target)&&s.current&&!s.current.contains(e.target)&&c(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[l,c,s]),t(()=>{if(!l)return;const e=e=>{"Escape"===e.key&&(c(!1),s.current?.focus())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[l,c,s]),l?le(h,{className:"menu menu-"+m+" "+a,sx:{position:"absolute",top:"100%",left:"bottom-end"===i?"auto":0,right:"bottom-end"===i?0:"auto",zIndex:99999,marginTop:"4px",border:"1px solid "+x,borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:Nf,overflow:"hidden",...n},children:le(h,{ref:g,id:d,role:"menu","aria-labelledby":u,"data-theme":y,"data-surface":z,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 a=g.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');if(!a?.length)return;const t=Array.from(a).indexOf(document.activeElement);"ArrowDown"===e.key?(e.preventDefault(),a[(t+1)%a.length].focus()):"ArrowUp"===e.key?(e.preventDefault(),a[(t-1+a.length)%a.length].focus()):"Home"===e.key?(e.preventDefault(),a[0].focus()):"End"===e.key?(e.preventDefault(),a[a.length-1].focus()):"Tab"===e.key&&c(!1)},...o,children:e})}):null}function Fw({children:e,onClick:a,selected:t=!1,disabled:r=!1,className:i="",sx:n={},...o}){const{setOpen:l,size:c}=Nw(),s=Lw[c]||Lw.medium,d=t?Aw[c]||Aw.medium:Tw[c]||Tw.medium,u=()=>{r||(a?.(),l(!1))};return le(h,{role:"menuitem",tabIndex:r?-1:0,"aria-disabled":r||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-Half)",padding:s.itemPy+" "+s.itemPx,fontSize:s.fontSize,color:r?"var(--Quiet)":t?"var(--Text)":"var(--Quiet)",backgroundColor:t?"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"}},...n},...o,children:le(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:le(d,{color:"standard",style:{color:"inherit"},children:e})})})}function Pw({className:e="",sx:a={},...t}){return le(h,{component:"hr",role:"separator",className:"menu-divider "+e,sx:{border:"none",borderTop:"1px solid var(--Border)",margin:"4px 0",...a},...t})}const Hw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Ow=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Ew({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Vw({color:e,selected:a,onClick:t}){const r=Hw(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Qw(){const[e,t]=a("outline"),[r,i]=a("default"),[n,o]=a("medium"),[l,c]=a("Default"),[s,d]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Menu",component:"Menu"}),le(h,{sx:{mt:1},children:le(Xf,{theme:l,onThemeChange:c,surface:s,onSurfaceChange:d})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Menu",theme:l,surface:s})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:l,surface:s,sx:{minHeight:250,alignItems:"flex-start",pt:6},children:se(Ww,{variant:e,color:r,size:n,children:[le(Dw,{children:"Actions"}),se(Rw,{children:[le(Fw,{children:"Edit"}),le(Fw,{children:"Duplicate"}),le(Fw,{selected:!0,children:"Archive"}),le(Pw,{}),le(Fw,{disabled:!0,children:"Delete"})]})]})}),le(Yb,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),"<Dropdown "+a.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(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","solid","light"].map(a=>le(Ew,{label:Hw(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Ow.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Vw,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Ew,{label:Hw(e),selected:n===e,onClick:()=>o(e)},e))})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Menu"})})]})]})}const jw={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},qw={default:"Container-High",solid:"Container-High",soft:"Surface-Brightest"},Gw={small:{maxWidth:400,padding:"24px"},medium:{maxWidth:560,padding:"32px"},large:{maxWidth:720,padding:"40px"}},Uw={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 Xw(e){const a=Uw[e];if(!a)return"";const{from:t,to:r}=a.enter,i=Object.entries(t).map(([e,a])=>e+":"+a).join(";"),n=Object.entries(r).map(([e,a])=>e+":"+a).join(";");return"@keyframes "+a.name+" { from {"+i+"} to {"+n+"} }@keyframes "+a.name+"-backdrop { from { opacity: 0 } to { opacity: 1 } }"}function Yw({open:e,onClose:i,children:n,title:o,variant:l="default",color:c="primary",size:s="medium",layout:d="center",transition:u="fade",transitionSpeed:m=250,closeOnBackdrop:p=!0,showCloseButton:f=!0,className:g="",sx:b={},...v}){const x=r(null),y=r(null),[z,S]=a(!1);let w;try{w=cz()}catch{w=null}const k=w?.style||"Modern",C="soft"===l,B="solid"===l,M="fullscreen"===d,T=B||C?jw[c]:null,A=qw[l]||qw.default,L=Gw[s]||Gw.medium,I=Uw[u],N=I?I.name:void 0,W=m+"ms";return t(()=>(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]),t(()=>{if(!e)return;const a=e=>{"Escape"===e.key&&i?.()};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[e,i]),e||z?se(ce,{children:["none"!==u&&le("style",{children:Xw(u)}),le(h,{"aria-hidden":"true",onClick:p?i:void 0,sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0,0,0,0.5)",...N&&{animation:N+"-backdrop "+W+" ease-out forwards"}}}),se(h,{role:"dialog","aria-modal":"true","aria-label":o||"Modal",ref:x,tabIndex:-1,"data-surface":A,"data-theme":T||void 0,"data-style":k,className:"modal modal-"+l+" modal-"+s+" modal-"+d+(C||B?" modal-"+c:"")+(g?" "+g:""),sx:{position:"fixed",zIndex:10000001,outline:"none",fontFamily:"inherit",...M?{inset:0,borderRadius:0}:{top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:L.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:Rf,display:"flex",flexDirection:"column",overflow:"hidden",...N&&{animation:N+" "+W+" ease-out forwards"},...b},...v,children:[(o||f)&&se(h,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",px:M?4:L.padding,pt:M?3:L.padding,pb:0,flexShrink:0},children:[o&&le(h,{sx:{fontSize:"small"===s?"18px":"large"===s?"24px":"20px",fontWeight:700,color:"var(--Text)",flex:1},children:o}),f&&le(h,{component:"button",type:"button","aria-label":"Close modal",onClick:i,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(Ea,{sx:{fontSize:20}})})]}),le(h,{sx:{flex:1,overflowY:"auto",px:M?4:L.padding,pt:M?3:"16px",pb:M?3:L.padding,color:"var(--Text)",fontSize:"small"===s?"13px":"14px",lineHeight:1.6},children:n})]})]}):null}function Jw({children:e,surface:a="Container",outlined:t=!1,variant:r=(t?"outlined":"elevation"),sx:i={},...n}){const{dataSurface:o,elevation:l}=function(e="Container"){const a={"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=a[e]||a.Container;return{dataSurface:e,elevation:t.elevation,zIndex:t.zIndex}}(a);return le(j,{variant:r,elevation:"outlined"===r||t?0:l,"data-surface":o,sx:{padding:2,borderRadius:"8px",transition:"all 0.2s ease-in-out",...i},...n,children:e})}function Zw({open:e=!1,onClose:i,anchorRef:n,placement:o="bottom-end",theme:l="Default",surface:c="Surface-Bright",width:s=320,maxHeight:d=400,children:u,sx:m={}}){const p=r(null),[f,g]=a({top:0,left:0,right:"auto"});return t(()=>{if(!e||!n?.current)return;const a=n.current.getBoundingClientRect();g("bottom-end"===o?{top:a.bottom+6,right:window.innerWidth-a.right,left:"auto"}:{top:a.bottom+6,left:a.left,right:"auto"})},[e,n,o]),t(()=>{if(!e)return;const a=e=>{p.current?.contains(e.target)||n?.current?.contains(e.target)||i?.()};return document.addEventListener("pointerdown",a),()=>document.removeEventListener("pointerdown",a)},[e,i,n]),t(()=>{if(!e)return;const a=e=>{"Escape"===e.key&&i?.()};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[e,i]),e?de.createPortal(le(h,{ref:p,"data-theme":l,"data-surface":c,sx:{position:"fixed",top:f.top,left:f.left,right:f.right,zIndex:2e9,width:s,maxHeight:d,overflowY:"auto",backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:Nf,...m},children:u}),document.body):null}const $w={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error","black-white":"BlackWhite"},Kw={small:"var(--Sm-Rail-Width, 72px)",medium:"var(--Rail-Width, 80px)",large:"var(--Lg-Rail-Width, 96px)"},_w="var(--Icon-Size, 24px)",ek="var(--Sizing-Half, 4px)",ak="var(--Button-Height, 32px)";function tk({items:e=[],sections:t,value:r,defaultValue:n=0,onChange:o,expandable:l=!1,expandedWidth:c="partial",defaultExpanded:s=!1,fabAction:d,labelStyle:u="contained",variant:m="default",size:p="medium",className:f="",sx:g={},...b}){const[v,x]=a(n),[y,z]=a(s),S=void 0!==r,w=S?r:v,k=i(e=>{S||x(e),o?.(e)},[S,o]),C=l&&y;return se(h,{component:"nav",role:"navigation","aria-label":"Navigation rail","data-theme":"Default","data-surface":"Surface-Dim",className:"rail"+(l?" rail-expandable":" rail-fixed")+(C?" rail-expanded":" rail-collapsed")+" rail-label-"+("outside"===u?"outside":"contained")+" rail-"+(Kw[p]?p:"medium")+" "+f,sx:{display:"flex",flexDirection:"column",width:C?("full"===c?320:240)+"px":Kw[p]||Kw.medium,minHeight:"100%",gap:C?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},...b,children:[l&&le(h,{sx:{display:"flex",justifyContent:C?"flex-start":"center",px:C?1.5:0,height:56,alignItems:"center"},children:le(Yg,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>z(e=>!e),"aria-label":C?"Collapse menu":"Expand menu",children:le(Bf,{size:"small",sx:{color:"inherit"},children:le(C?Ea:Pa,{})})})}),d&&le(h,{sx:{px:C?2:1,py:1,flexShrink:0},children:le(Yg,{variant:"primary-light",size:"medium",onClick:d.onClick,"aria-label":d.label||"Action",startIcon:d.icon?le(Bf,{size:"small",sx:{color:"inherit"},children:d.icon}):void 0,sx:{width:C?"100%":56,borderRadius:C?"28px":"var(--Style-Border-Radius)",justifyContent:C?"flex-start":"center",transition:"all 0.2s ease"},children:C?d.label:null})}),le(h,{role:"tablist","aria-orientation":"vertical",sx:{flex:1,overflowY:"auto",overflowX:"hidden",display:"flex",flexDirection:"column",alignItems:"center",gap:C?0:"var(--Sizing-1-and-Half, 12px)",px:C?0:"var(--Sizing-1, 8px)",width:"100%",boxSizing:"border-box"},children:(()=>{if(t&&t.length>0){const e=[];let a=0;return t.forEach((t,r)=>{r>0&&e.push(le(h,{"aria-hidden":"true",sx:{height:"1px",width:"100%",backgroundColor:"var(--Border-Variant)"}},"divider-"+r)),t.items.forEach(t=>{const r=a;e.push(le(rk,{item:t,variant:m,selected:w===r,expanded:C,labelStyle:u,onClick:()=>k(r)},"item-"+r)),a++})}),e}return e.map((e,a)=>le(rk,{item:e,variant:m,selected:w===a,expanded:C,labelStyle:u,onClick:()=>k(a)},a))})()})]})}function rk({item:e,selected:a,expanded:t,labelStyle:r,variant:i="default",onClick:n}){const{icon:o,avatar:l,label:c,badge:s,disabled:d}=e,u=$w[i]||"Default";const m=a?`var(--Buttons-${u}-Button)`:"transparent",p="outside"!==r,f=p&&!t,g=d?{}:{...a?{}:{"&: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",...a?{}:{"& .rail-item-label":{color:"var(--Text)"}}}};return se(h,{component:"button",type:"button",role:"tab","aria-selected":a,"aria-label":c,"aria-disabled":d||void 0,disabled:d||void 0,onClick:d?void 0:n,className:"rail-item"+(a?" 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:_w,minHeight:_w,px:t?2.5:0,py:f?ek:0,border:a&&f?"1px solid var(--Border)":"1px solid transparent",borderRadius:t?0:"8px",backgroundColor:f||t?m:"transparent",boxShadow:a&&f?"var(--Shadow-1, none)":"none",color:a?`var(--Buttons-${u}-Text)`:t?"var(--Text)":"var(--Quiet)",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",...f||t?g:{}},children:[se(h,{sx:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",...t?{flexShrink:0}:{width:p?"100%":ak,height:p?"auto":ak,py:p?ek:0,borderRadius:p?"8px":ak,backgroundColor:p?"transparent":m,border:!p&&a?"1px solid var(--Border)":void 0,transition:"background-color 0.2s ease",...p?{}:g}},children:[l?le(h,{sx:{display:"flex",width:_w,height:_w},children:l}):le(Bf,{size:"small",sx:{color:"inherit"},children:o}),s&&le(ik,{value:s})]}),c&&le(h,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"center",width:"100%"},children:le(wr,{className:"rail-item-label",color:"inherit",style:{textAlign:"center",whiteSpace:t?"nowrap":"normal",overflow:"hidden",textOverflow:"ellipsis",...t?{flex:1}:{maxWidth:"100%"}},children:c})})]})}function ik({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 nk=[{icon:le(Te,{}),label:"Home"},{icon:le(Ie,{}),label:"Search"},{icon:le(Me,{}),label:"Favorites",badge:3},{icon:le(We,{}),label:"Profile"},{icon:le(Le,{}),label:"Settings"}];function ok({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function lk(){const[e,t]=a(!0),[r,i]=a("partial"),[n,o]=a(!1),[l,c]=a("Default"),[s,d]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Rail",component:"Rail"}),le(h,{sx:{mt:1},children:le(Xf,{theme:l,onThemeChange:c,surface:s,onSurfaceChange:d})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Rail",theme:l,surface:s})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[se(uv,{theme:l,surface:s,sx:{minHeight:400,alignItems:"stretch",p:0},children:[le(tk,{items:nk,expandable:e,expandedWidth:r,fabAction:n?{icon:le(Aa,{}),label:"Create",onClick:()=>{}}:void 0}),le(h,{sx:{flex:1,p:3},children:le(dr,{style:{color:"var(--Quiet)"},children:"Main content area"})})]}),le(Yb,{code:(()=>{const a=["items={items}"];return e&&(a.push("expandable"),"partial"!==r&&a.push('expandedWidth="full"')),n&&a.push('fabAction={{ icon: <AddIcon />, label: "Create", onClick: handleCreate }}'),a.push("value={activeIndex}"),a.push("onChange={setActiveIndex}"),"<Rail\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"EXPANDED WIDTH"}),le(m,{direction:"row",spacing:1,children:["partial","full"].map(e=>{return le(ok,{label:(a=e,a?a.charAt(0).toUpperCase()+a.slice(1):""),selected:r===e,onClick:()=>i(e)},e);var a})})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Expandable"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Toggle between collapsed and expanded"})]}),le(sv,{variant:"default-outline",checked:e,onChange:e=>t(e.target.checked),size:"small","aria-label":"Expandable"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"FAB Action"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show create button at top"})]}),le(sv,{variant:"default-outline",checked:n,onChange:e=>o(e.target.checked),size:"small","aria-label":"FAB action"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Rail"})})]})]})}const ck=["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"],sk="1.618034",dk={"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":sk+" / 1","Golden-Vertical":"1 / "+sk},uk={none:0,xs:1,sm:2,md:3,lg:4,xl:6};function hk({ratio:a="1:1",children:t,variant:r="default",color:i="default",padding:n="none",fit:o="width",placeholder:l=!0,elevated:c=!1,clickable:s=!1,onClick:d,maxWidth:u,maxHeight:m,component:p="div",className:f="",sx:g={},...b}){const v=dk[a]||dk["1:1"],x=(y="default"===i?"Default":i).charAt(0).toUpperCase()+y.slice(1);var y;const z=l&&0===e.Children.count(t),S="default"===i?void 0:x,w="dark"===r?"Surface-Dimmest":"light"===r?"Surface-Brightest":void 0,k=void 0!==uk[n]?uk[n]:uk.none,C=s||!!d,B="default"===r,M=c?Nf:If,T=c?Wf:Nf;return le(h,{component:p,onClick:C?d:void 0,role:C?"button":void 0,tabIndex:C?0:void 0,className:"ratio ratio-"+a.toLowerCase()+" ratio-"+r+(C?" ratio-clickable":"")+(c?" ratio-elevated":"")+(f?" "+f:""),sx:{aspectRatio:v,flex:"0 0 auto",..."height"===o?{height:"100%",width:"auto",minHeight:24}:{width:"100%",height:"auto",minWidth:24},...void 0!==u&&{maxWidth:u},...void 0!==m&&{maxHeight:m},border:B?"none":"1px solid var(--Border-Variant)",borderRadius:B?0:"var(--Style-Border-Radius)",boxShadow:B?"none":M,overflow:"hidden",transition:"box-shadow 0.2s ease, border-color 0.2s ease",...C&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:T},"&:active":{transform:"scale(0.995)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...!C&&!B&&{"&:hover":{boxShadow:T}},...g},...b,children:le(h,{"data-theme":S||void 0,"data-surface":w,sx:{width:"100%",height:"100%",padding:k,backgroundColor:z?"var(--Border)":"var(--Background)",color:"var(--Text)",fontFamily:"inherit",borderRadius:B?0:"calc(var(--Style-Border-Radius) - 1px)",...z?{display:"flex",alignItems:"center",justifyContent:"center"}:{"& > *":{width:"100%",height:"100%"}}},children:z?le(Bf,{size:"large",sx:{color:"var(--Background)"},children:le(Ya,{})}):t})})}const mk={none:void 0,small:"var(--Sm-Card-Radius, var(--Card-Radius))",medium:"var(--Card-Radius)",large:"var(--Lg-Card-Radius, var(--Card-Radius))"};function pk({children:e,theme:a,surface:t,radius:r="none",elevation:i=0,component:n="div",className:o="",sx:l={},style:c,...s}){const d=Math.max(0,Math.min(5,0|i)),u=mk[r];if(!d)return le(h,{component:n,"data-theme":a||void 0,"data-surface":t||void 0,className:"omni-box"+(o?" "+o:""),sx:{background:"var(--Background)",boxSizing:"border-box",...u?{borderRadius:u}:{},...l},style:c,...s,children:e});const m=c||{},{width:p,height:f,minWidth:g,minHeight:b,maxWidth:v,maxHeight:x,borderRadius:y,margin:z,marginTop:S,marginRight:w,marginBottom:k,marginLeft:C,...B}=m,M={width:p,height:f,minWidth:g,minHeight:b,maxWidth:v,maxHeight:x,borderRadius:y,margin:z,marginTop:S,marginRight:w,marginBottom:k,marginLeft:C},{width:T,height:A,borderRadius:L,...I}=l;return le(h,{component:n,className:"omni-box-elevation"+(o?" "+o:""),"data-elevation":d,sx:{boxShadow:Ff[d],boxSizing:"border-box",width:T,height:A,borderRadius:void 0!==L?L:u},style:M,...s,children:le(h,{"data-theme":a||void 0,"data-surface":t||void 0,className:"omni-box",sx:{width:"100%",height:"100%",background:"var(--Background)",borderRadius:"inherit",boxSizing:"border-box",...I},style:B,children:e})})}const fk=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",gk=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],bk=["default","solid","light","dark"],vk=["none","xs","sm","md","lg","xl"];function xk({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function yk({color:e,selected:a,onClick:t,variant:r}){const i=fk(e);return le(pk,{component:"button","data-theme":{solid:i,light:i+"-Light",dark:i,default:void 0}[r],"data-surface":{solid:"Surface",light:"Surface",dark:"Surface-Dimmest",default:"Surface"}[r],onClick:()=>t(e),"aria-label":"Select "+i,"aria-pressed":a,title:i,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Background)",border:a?"2px solid var(--Text)":"2px 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&&le(he,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function zk(){const[e,t]=a("1:1"),[r,i]=a("solid"),[n,o]=a("primary"),[l,c]=a("none"),[s,d]=a(!1),[u,h]=a(!1),[p,f]=a("Default"),[g,b]=a("Surface");return se(pk,{sx:{pb:8},children:[le(yM,{title:"Ratio",component:"Ratio"}),le(pk,{sx:{mt:1},children:le(Xf,{theme:p,onThemeChange:f,surface:g,onSurfaceChange:b})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Reference"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Ratio",theme:p,surface:g})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:p,surface:g,children:le(pk,{sx:{width:"100%",maxWidth:480},children:le(hk,{ratio:e,variant:r,color:n,padding:l,elevated:s,clickable:u})})}),le(Yb,{code:(()=>{const a=['ratio="'+e+'"'];return"default"!==r&&a.push('variant="'+r+'"'),"default"!==n&&a.push('color="'+n+'"'),"none"!==l&&a.push('padding="'+l+'"'),s&&a.push("elevated"),u&&a.push("clickable onClick={handleClick}"),"<Ratio "+a.join(" ")+">\n {/* your content */}\n</Ratio>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(pk,{sx:{p:3},children:[le(pk,{sx:{mb:3}}),se(pk,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:bk.map(e=>le(xk,{label:fk(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(pk,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:gk.map(e=>se(pk,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(yk,{color:e,selected:n===e,onClick:o,variant:"default"===r?"solid":r},e))})]},e.label))})]}),se(pk,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PADDING"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:vk.map(e=>le(xk,{label:"none"===e?"None":e.toUpperCase(),selected:l===e,onClick:()=>c(e)},e))})]}),se(pk,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"RATIO"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:ck.map(a=>le(xk,{label:a,selected:e===a,onClick:()=>t(a)},a))})]}),se(pk,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(pk,{children:[le(Cr,{children:"Elevated"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Bumps the shadow up one level"})]}),le(sv,{checked:s,onChange:e=>d(e.target.checked),size:"small","aria-label":"Elevated"})]}),se(pk,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(pk,{children:[le(Cr,{children:"Clickable"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds hover, press, and focus-visible"})]}),le(sv,{checked:u,onChange:e=>h(e.target.checked),size:"small","aria-label":"Clickable"})]})]})})]})}),le(yb,{value:2,children:le(pk,{sx:{p:3},children:se(m,{spacing:3,children:[se(pk,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Common use cases"}),le(m,{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:a})=>se(pk,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(dr,{children:e}),le(zr,{style:{color:"var(--Text-Quiet)"},children:a})]},e))})]}),se(mr,{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."]})]})})}),le(yb,{value:3,children:le(gM,{component:"Ratio"})})]})]})}const Sk=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",wk=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function kk({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Ck({color:e,selected:a,onClick:t}){const r=Sk(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Bk(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a(!1),[l,c]=a(!0),[s,d]=a("Default"),[u,p]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Search Field",component:"SearchField"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"SearchField",theme:s,surface:u})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,children:le(h,{sx:{width:"100%",maxWidth:400},children:le(Xy,{color:e,size:r,disabled:n,showClearButton:l,placeholder:"Search..."})})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),l||a.push("showClearButton={false}"),n&&a.push("disabled"),a.push('placeholder="Search..."'),a.push("onChange={handleSearch}"),"<SearchField\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:wk.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(Ck,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(kk,{label:Sk(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Clear Button"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear when has value"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>c(e.target.checked),size:"small","aria-label":"Clear button"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{variant:"default-outline",checked:n,onChange:e=>o(e.target.checked),size:"small","aria-label":"Disabled"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"SearchField"})})]})]})}const Mk=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Tk=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Ak=[{value:"apple",label:"Apple"},{value:"banana",label:"Banana"},{value:"cherry",label:"Cherry"},{value:"date",label:"Date"},{value:"elderberry",label:"Elderberry"}],Lk=[{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 Ik({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Nk({color:e,selected:a,onClick:t}){const r=Mk(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Wk(){const[e,t]=a("outline"),[r,i]=a("default"),[n,o]=a("medium"),[l,c]=a("top"),[s,d]=a("Fruit"),[u,p]=a(!1),[f,g]=a(!1),[b,v]=a(!0),[x,z]=a(!1),[S,w]=a("Search"),[k,C]=a(""),[B,M]=a("Default"),[T,A]=a("Surface"),[L,I]=a(!1),[N,W]=a(!0);return se(h,{sx:{pb:8},children:[le(yM,{title:"Select",component:"Select"}),le(h,{sx:{mt:1},children:le(Xf,{theme:B,onThemeChange:M,surface:T,onSurfaceChange:A})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Select",theme:B,surface:T})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:B,surface:T,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(qf,{variant:e,color:r,size:n,label:s,labelPosition:l,mode:L?"color":void 0,showColorLabels:L?N:void 0,options:L?Lk:Ak,value:k,onChange:C,showDividers:u,disabled:f,fullWidth:b,startDecoration:x?(()=>{const e=ge[S]||ge.Search;return le(Bf,{size:"small",children:le(e,{})})})():void 0})})}),le(Yb,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),s&&a.push('label="'+s+'"'),"top"!==l&&a.push('labelPosition="'+l+'"'),L&&a.push('mode="color"'),L&&!N&&a.push("showColorLabels={false}"),u&&a.push("showDividers"),f&&a.push("disabled"),b&&a.push("fullWidth"),x&&a.push("startDecoration={<Icon><"+S+"Icon /></Icon>}"),a.push("options={options}"),a.push("value={value}"),a.push("onChange={setValue}"),"<Select\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(a=>le(Ik,{label:Mk(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Tk.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Nk,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Ik,{label:Mk(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(Ik,{label:"none"===e?"None":Mk(e),selected:l===e,onClick:()=>c(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Start Icon"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Icon rendered before the value"})]}),le(sv,{checked:x,onChange:e=>z(e.target.checked),size:"small","aria-label":"Start icon"})]}),x&&se(h,{sx:{mt:2},children:[le(Sx,{label:"Icon Name",value:S,onChange:e=>w(e.target.value),placeholder:"Search",variant:"primary-outline",size:"small",fullWidth:!0}),se(zr,{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)"]})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Dividers"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Lines between options"})]}),le(sv,{checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show dividers"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Color Mode"}),le(zr,{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(sv,{checked:L,onChange:e=>I(e.target.checked),size:"small","aria-label":"Color mode"})]}),L&&se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Color Labels"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Hide to render a swatch-only trigger (no text). Useful for compact color pickers."})]}),le(sv,{checked:N,onChange:e=>W(e.target.checked),size:"small","aria-label":"Show color labels"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Full Width"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(sv,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Select"})})]})]})}const Dk={outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},Rk={opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"};function Fk(e={}){const{selectedBg:a,selectedText:t,selectedHover:r,selectedPressed:i,muiPrefix:n}=e,o=n?"&.Mui-disabled":"&:disabled",l=n?"&.Mui-focusVisible":"&:focus-visible",c={"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},[l]:Dk,[o]:{...Rk,color:"var(--Quiet)"}};return a?{...c,"&.Mui-selected":{backgroundColor:a,...t?{color:t}:{},"&:hover":{backgroundColor:r||"var(--Hover)"},"&:active":{backgroundColor:i||"var(--Pressed)"}}}:c}function Pk({open:e,onClose:t,items:r=[],onItemClick:i,width:n=280,variant:o="temporary",header:l,footer:c,sx:s={},...d}){const[u,m]=a(null),[f,g]=a({}),b=(e,a)=>{m(a),i?.(e),"temporary"===o&&t?.()},v="permanent"===o?"permanent":"standard"===o?"standard":"temporary",y=se(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(V,{variant:"h6",sx:{fontWeight:700},children:l}):l}),le(G,{sx:{flex:1,overflow:"auto",py:1},children:r.map((e,a)=>{const t=u===a,r=e.submenu&&e.submenu.length>0,i=f[a];return se(h,{children:[le(x,{title:e.tooltip||"",placement:"right",children:le(U,{disablePadding:!0,children:se(X,{onClick:()=>{r?(e=>{g(a=>({...a,[e]:!a[e]}))})(a):b(e,a)},selected:t&&!r,sx:{backgroundColor:t&&!r?"var(--Buttons-Primary-Button)":"transparent",color:t&&!r?"var(--Buttons-Primary-Text)":"var(--Text)",...Fk({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(Y,{sx:{color:t&&!r?"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(J,{primary:e.label,primaryTypographyProps:{variant:"body2",fontWeight:t&&!r?600:500}}),r&&le(h,{sx:{ml:1},children:le(i?fe:ue,{})})]})})}),r&&le(Z,{in:i,timeout:"auto",unmountOnExit:!0,children:le(G,{component:"div",disablePadding:!0,children:e.submenu.map((e,a)=>le(U,{disablePadding:!0,children:se(X,{onClick:()=>b(e,a),sx:{pl:4,backgroundColor:"transparent",color:"var(--Text)",...Fk({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(Y,{sx:{color:"var(--Icons-Primary)",minWidth:40},children:e.icon}),le(J,{primary:e.label})]})},a))})}),e.divider&&le($,{sx:{my:1,borderColor:"var(--Border-Variant)"}})]},a)})}),c&&le(h,{sx:{borderTop:"1px solid var(--Border-Variant)",p:2},children:"string"==typeof c?le(V,{variant:"caption",sx:{color:"var(--Text-Quiet)"},children:c}):c})]});return"permanent"===o?le(h,{sx:{width:n,flexShrink:0,...s},children:y}):le(K,{variant:v,open:e,onClose:t,PaperProps:{sx:{width:n,backgroundColor:"var(--Container)",color:"var(--Text)",...s}},...d,children:y})}const Hk={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 Ok=!1;function Ek({children:e,open:a=!1,onClose:n,variant:o="light",surface:l,color:c="info",size:s="medium",anchor:d="bottom",autoHideDuration:u,startDecorator:m,endDecorator:p,action:f,className:g="",sx:b={},...v}){const x=r(null),y=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===c?"Default":c),z=Hk[s]||Hk.medium,S="small"===s?dr:mr,w="default"===c?"Default":y;"production"===process.env.NODE_ENV||"solid"!==o||Ok||(Ok=!0,console.warn('[Snackbar] variant="solid" is retired and now renders as "light". A solid fill makes the label carry the semantic color as its own background, doubling the contrast combinations to verify. Use the default, or pass `surface` to reach a specific level.'));const k=l||"Surface-Brightest",C="var(--Buttons-"+y+"-Border)";t(()=>{if(a&&u&&u>0)return x.current=setTimeout(()=>{n?.({},"timeout")},u),()=>clearTimeout(x.current)},[a,u,n]),t(()=>{if(!a)return;const e=e=>{"Escape"===e.key&&n?.(e,"escapeKeyDown")};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[a,n]);const B=i(()=>{x.current&&clearTimeout(x.current)},[]),M=i(()=>{a&&u&&u>0&&(x.current=setTimeout(()=>{n?.({},"timeout")},u))},[a,u,n]),T="top"===d?{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 a?le(h,{role:"alert","aria-live":"polite","aria-atomic":"true",onMouseEnter:B,onMouseLeave:M,className:"snackbar snackbar-"+o+" snackbar-"+s+" snackbar-"+d+" snackbar-"+c+" "+g,sx:{position:"fixed",left:"50%",transform:"translateX(-50%)",..."top"===d?{top:"var(--SnackBar-Top, 24px)"}:{bottom:"var(--SnackBar-Bottom, 24px)"},zIndex:1400,minWidth:z.minWidth,maxWidth:"min(560px, calc(100vw - 32px))",border:"1px solid "+C,borderRadius:"var(--Style-Border-Radius)",boxShadow:Wf,overflow:"hidden",animation:"snackbar-slide-in 0.3s ease forwards","@keyframes snackbar-slide-in":T,...b},...v,children:se(h,{"data-theme":w,"data-surface":k,sx:{display:"flex",alignItems:"center",gap:z.gap,padding:z.py+" "+z.px,fontSize:z.fontSize,fontFamily:"inherit",lineHeight:1.4,color:"var(--Text)",backgroundColor:"var(--Background)",borderRadius:"calc(var(--Style-Border-Radius) - 1px)"},children:[m&&le(h,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:m}),le(h,{sx:{flex:1,minWidth:0},children:"string"==typeof e?le(S,{children:e}):e}),f&&le(h,{sx:{display:"inline-flex",flexShrink:0},children:f}),p&&le(h,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:p}),n&&le(Yg,{iconOnly:!0,variant:"ghost",size:"small",onClick:e=>n(e,"closeClick"),"aria-label":"Close notification",sx:{flexShrink:0,ml:"4px"},children:le(Bf,{size:"small",children:le(Ea,{})})})]})}):null}const Vk=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Qk=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],jk={info:le(Se,{}),success:le(we,{}),warning:le(ke,{}),error:le(Ce,{})};function qk({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Gk({color:e,selected:a,onClick:t}){const r=Vk(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function Uk(){const[e,t]=a("light"),[r,i]=a("info"),[n,o]=a("medium"),[l,c]=a("bottom"),[s,d]=a(!0),[u,p]=a(!0),[f,g]=a(!1),[b,v]=a("Default"),[x,z]=a("Surface"),S=s&&jk[r]?le(Bf,{size:"small",sx:{color:"inherit"},children:jk[r]}):void 0;return se(h,{sx:{pb:8},children:[le(yM,{title:"Snackbar",component:"Snackbar"}),le(h,{sx:{mt:1},children:le(Xf,{theme:b,onThemeChange:v,surface:x,onSurfaceChange:z})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Snackbar",theme:b,surface:x})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:b,surface:x,children:le(Yg,{variant:"default",onClick:()=>g(!0),children:"Show Snackbar"})}),le(Yb,{code:(()=>{const a=["open={open}"];return a.push('variant="'+e+'"'),"info"!==r&&a.push('color="'+r+'"'),"medium"!==n&&a.push('size="'+n+'"'),"bottom"!==l&&a.push('anchor="top"'),u&&a.push("onClose={handleClose}"),s&&jk[r]&&a.push("startDecorator={<Icon><"+Vk(r)+"Icon /></Icon>}"),"<Snackbar\n "+a.join("\n ")+"\n>\n Operation completed successfully.\n</Snackbar>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),le(Ek,{open:f,onClose:u?()=>g(!1):void 0,variant:e,color:r,size:n,anchor:l,autoHideDuration:4e3,startDecorator:S,children:"Operation completed successfully."})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["solid","light"].map(a=>le(qk,{label:Vk(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Qk.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(Gk,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(qk,{label:Vk(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),le(m,{direction:"row",spacing:1,children:["top","bottom"].map(e=>le(qk,{label:Vk(e),selected:l===e,onClick:()=>c(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Icon"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(sv,{variant:"default-outline",checked:s,onChange:e=>d(e.target.checked),size:"small","aria-label":"Show icon"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Close Button"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show dismiss button"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Close button"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Snackbar"})})]})]})}const Xk={empty:{icon:le(Ja,{}),iconColor:"quiet",titleColor:"header",role:void 0},"no-results":{icon:le(Za,{}),iconColor:"quiet",titleColor:"header",role:void 0},error:{icon:le($a,{}),iconColor:"error",titleColor:"error",role:"alert"}},Yk={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 Jk({type:e="empty",icon:a,title:t,body:r,action:i,size:n="medium",className:l="",sx:c={},...s}){const d=Xk[e]||Xk.empty,u=Yk[n]||Yk.medium,m="small"===n?dr:mr,p=o(),f=t?p+"-title":void 0,g=r?p+"-body":void 0;return"production"===process.env.NODE_ENV||t||console.warn("[StateMessage] needs a `title`. A state message with no words is an empty box, which is the thing it exists to replace."),se(h,{className:"state-message state-message-"+e+" state-message-"+n+" "+l,role:d.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",...c},...s,children:[le(Bf,{size:u.icon,color:d.iconColor,"aria-hidden":"true",children:a||d.icon}),t&&le(nr,{id:f,color:d.titleColor,children:t}),r&&le(m,{id:g,color:"quiet",sx:{maxWidth:u.maxWidth},children:r}),i&&le(h,{sx:{marginTop:"4px"},children:i})]})}const Zk={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},$k={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}},Kk=l({orientation:"horizontal",size:"medium",color:"primary",activeStep:0,clickable:!1,onStepClick:null,dashedIncomplete:!1,totalSteps:0,variant:"count"}),_k=()=>c(Kk);function eC({theme:a,surface:t,children:r,orientation:i="horizontal",size:n="medium",color:o="primary",activeStep:l=0,clickable:c=!1,onStepClick:s,dashedIncomplete:d=!1,variant:u="count",className:m="",sx:p={},...f}){const g=e.Children.toArray(r).filter(e.isValidElement),b=g.length,v="horizontal"===i;return le(Kk.Provider,{value:{orientation:i,size:n,color:o,activeStep:l,clickable:c,onStepClick:s,dashedIncomplete:d,totalSteps:b,variant:u},children:le(h,{component:"ol",role:"list","aria-label":"Progress","data-theme":a||void 0,"data-surface":t||void 0,className:"stepper stepper-"+i+" stepper-"+n+" stepper-"+o+" "+m,sx:{display:"flex",flexDirection:v?"row":"column",alignItems:v?"flex-start":"stretch",listStyle:"none",margin:0,padding:0,width:"100%",gap:0,...p},...f,children:g.map((a,t)=>e.cloneElement(a,{_index:t,key:a.key||t}))})})}function aC({children:e,icon:a,label:t,disabled:r=!1,_index:i=0,className:n="",sx:o={},...l}){const{orientation:c,size:s,color:d,activeStep:u,clickable:m,onStepClick:p,dashedIncomplete:f,totalSteps:g,variant:b}=_k(),v=m&&!r,x=$k[s]||$k.medium,y=Zk[d]||"Primary",z="horizontal"===c,S=i===u,w=i<u,k=i>u,C=i===g-1,B=a||i+1,M=t||e,T=k?"var(--Quiet)":"var(--Buttons-"+y+"-Border)",A=S?"var(--Buttons-"+y+"-Button)":"transparent",L=S?"var(--Buttons-"+y+"-Text)":k?"var(--Quiet)":"var(--Text)",I=S?"var(--Buttons-"+y+"-Hover)":"var(--Hover)",N=S?"var(--Buttons-"+y+"-Pressed)":"var(--Pressed)",W="noCount"===b,D=le(h,{component:v?"button":"div",onClick:v?()=>p?.(i):void 0,onKeyDown:v?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),p?.(i))}:void 0,tabIndex:v?0:void 0,role:v?"button":void 0,"aria-label":v?"Go to step "+(i+1):void 0,"aria-current":S?"step":void 0,"aria-disabled":r||void 0,className:"step-indicator step-indicator-"+s+(S?" step-indicator-active":"")+(w?" step-indicator-completed":"")+(k?" step-indicator-incomplete":"")+(v?" step-indicator-clickable":""),sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:W?x.dot:x.indicator+"px",height:W?x.dot:x.indicator+"px",minWidth:W?x.dot:x.indicator+"px",minHeight:W?x.dot:x.indicator+"px",borderRadius:"50%",border:"var(--Button-Border-Width, 1px) solid "+T,backgroundColor:A,color:L,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"===s&&{"&::after":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"24px",height:"24px",borderRadius:"50%"}},...v&&{"&:hover":{backgroundColor:I},"&:active":{backgroundColor:N},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"}}},children:W?null:B}),R=i<u,F=C?null:le(h,{className:"step-connector"+(R?" step-connector-completed":" step-connector-incomplete")+(f&&!R?" step-connector-dashed":""),"aria-hidden":"true",sx:{flex:1,...z?{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:R?"var(--Buttons-"+y+"-Button)":"var(--Border)",...f&&!R&&{backgroundColor:"transparent",backgroundImage:z?"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:z?"12px 100%":"100% 12px"},transition:"background-color 0.15s ease"}}),P=M?le("small"===s?zr:dr,{style:{fontWeight:S?600:400,color:S||w?"var(--Text)":"var(--Quiet)",textAlign:z?"center":"left",whiteSpace:"nowrap",lineHeight:1.3},children:M}):null;return se(h,z?{component:"li",className:"step step-"+s+" step-horizontal"+(S?" step-active":"")+(w?" step-completed":"")+(k?" step-incomplete":"")+" "+n,sx:{display:"flex",alignItems:"center",flex:C?"none":1,...o},...l,children:[se(h,{sx:{display:"flex",flexDirection:"column",alignItems:"center",flexShrink:0},children:[D,P&&le(h,{sx:{mt:"4px"},children:P})]}),F]}:{component:"li",className:"step step-"+s+" step-vertical"+(S?" step-active":"")+(w?" step-completed":"")+(k?" step-incomplete":"")+" "+n,sx:{display:"flex",flexDirection:"column",alignItems:"flex-start",...o},...l,children:[se(h,{sx:{display:"flex",alignItems:"center",gap:"8px"},children:[D,P]}),F]})}const tC=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",rC=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],iC=["Account","Details","Review","Confirm","Complete","Done"];function nC({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function oC({color:e,selected:a,onClick:t}){const r=tC(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function lC(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a("horizontal"),[l,c]=a(4),[s,d]=a(1),[u,p]=a(!1),[f,g]=a(!1),[b,v]=a("Default"),[x,z]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Stepper",component:"Stepper"}),le(h,{sx:{mt:1},children:le(Xf,{theme:b,onThemeChange:v,surface:x,onSurfaceChange:z})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Stepper",theme:b,surface:x})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:b,surface:x,children:le(h,{sx:{width:"100%",maxWidth:"vertical"===n?300:"100%"},children:le(eC,{color:e,size:r,orientation:n,activeStep:s,clickable:u,onStepClick:u?d:void 0,dashedIncomplete:f,children:iC.slice(0,l).map(e=>le(aC,{label:e},e))})})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),"horizontal"!==n&&a.push('orientation="vertical"'),a.push("activeStep={"+s+"}"),u&&a.push("clickable onStepClick={setActiveStep}"),f&&a.push("dashedIncomplete"),"<Stepper "+a.join(" ")+">\n"+iC.slice(0,l).map(e=>' <Step label="'+e+'" />').join("\n")+"\n</Stepper>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STEPS"}),le(m,{direction:"row",spacing:1,children:[2,3,4,5,6].map(e=>le(nC,{label:String(e),selected:l===e,onClick:()=>{c(e),s>=e&&d(e-1)}},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ACTIVE STEP"}),le(m,{direction:"row",spacing:1,children:iC.slice(0,l).map((e,a)=>le(nC,{label:String(a+1),selected:s===a,onClick:()=>d(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:rC.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(oC,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(nC,{label:tC(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(nC,{label:tC(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Clickable"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Steps are interactive buttons"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clickable"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Dashed Incomplete"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Dashed connector for future steps"})]}),le(sv,{variant:"default-outline",checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Dashed incomplete"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Stepper"})})]})]})}const cC={small:"var(--Small-Button-Height, 24px)",medium:"var(--Button-Height, 32px)",large:"var(--Large-Button-Height, 56px)"},sC={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"},dC={content:'""',position:"absolute",inset:"-3px",borderRadius:"var(--Button-Focus-Radius, 5px)",border:"2px solid var(--Focus-Visible)",pointerEvents:"none"};function uC({color:e,label:a,size:t="medium",selected:r=!1,disabled:i=!1,radio:n=!1,onClick:o,className:l="",sx:c={},"aria-label":s,...d}){const u=Boolean(o)&&!i,m=cC[t]||cC.medium,p=s||a||e,f=le(h,{className:"swatch-chip",sx:{position:"relative",width:m,height:m,flexShrink:0,borderRadius:"var(--Button-Radius, 2px)",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(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))"},"&:active":{boxShadow:"var(--Effect-Level-0)",backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08))"}}},children:r&&!n?le(h,{className:"swatch-check",sx:sC,children:le(he,{"aria-hidden":"true",sx:{width:"80%",height:"80%",color:"var(--Icon, var(--Text))"}})}):null});return se(h,{component:u?"button":"div",type:u?"button":void 0,onClick:u?o:void 0,disabled:!(!u||!i)||void 0,"aria-pressed":u?r:void 0,"aria-label":p,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)",...i&&{opacity:.38,pointerEvents:"none"},"&:focus":{outline:"none"},...u&&{"&:focus-visible":{outline:"none","& .swatch-chip::before":dC}},...c},...d,children:[f,n&&u?le(Mx,{checked:r,disabled:i,tabIndex:-1,"aria-hidden":"true",onChange:()=>{},sx:{pointerEvents:"none"}}):null,a?le(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:a}):null]})}const hC={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},mC={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 pC({children:e,columns:a,rows:t,footerRows:r,variant:i="default",color:n="primary",loading:o=!1,skeletonRows:l=3,empty:c,error:s,size:d="medium",stripe:u="none",stickyHeader:m=!1,stickyFooter:p=!1,className:f="",sx:g={},...b}){const v=mC[d]||mC.medium,x="solid"===i,y="outlined"===i,z="light"===i,S=(e=>e.charAt(0).toUpperCase()+e.slice(1))(n),w=y?"1px solid var(--Buttons-"+S+"-Border)":"none",k={};x&&hC[n]&&(k["data-theme"]=hC[n]);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 z?(e.backgroundColor="var(--Buttons-"+S+"-Button)",e.color="var(--Buttons-"+S+"-Text)"):e.backgroundColor=x?"var(--Hover)":"var(--Background)",m&&(e.position="sticky",e.top=0,e.zIndex=2),e},B=()=>{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 z?(e.backgroundColor="var(--Buttons-"+S+"-Button)",e.color="var(--Buttons-"+S+"-Text)"):e.backgroundColor=x?"var(--Hover)":"var(--Background)",p&&(e.position="sticky",e.bottom=0,e.zIndex=2),e},M=e=>"none"===u?"Surface":"odd"===u?e%2==0?"Surface":"Surface-Dim":"even"===u&&e%2==0?"Surface-Dim":"Surface",T=()=>({padding:v.py+" "+v.px,fontSize:v.fontSize,color:"var(--Text)",borderBottom:"1px solid var(--Border)",textAlign:"left"}),A=s?"error":o?"loading":t&&0===t.length&&c?"empty":null,L=Boolean(r&&r.length>0)&&"error"!==A,I=e=>le(h,{component:"tbody",children:le(h,{component:"tr",children:le(h,{component:"td",colSpan:a?a.length:1,sx:{padding:0,border:"none"},children:e})})});return le(h,{className:"table-wrapper table-"+i+(x||z||y?" table-"+n:"")+" "+f,...k,"aria-busy":"loading"===A?"true":void 0,sx:{width:"100%",overflow:"auto",border:w,borderRadius:y||z?"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":T(),"& tfoot td, & tfoot th":B(),...m?{"& thead th":{...C(),position:"sticky",top:0,zIndex:2}}:{},...p?{"& tfoot td, & tfoot th":{...B(),position:"sticky",bottom:0,zIndex:2}}:{}},...b,children:a&&t?a&&(t||A)?se(ce,{children:[le(h,{component:"thead",children:le(h,{component:"tr",children:a.map((e,a)=>le(h,{component:"th",sx:{...C(),...e.width?{width:e.width}:{},...e.align?{textAlign:e.align}:{}},children:e.label||e.header||e},"h-"+a))})}),"loading"===A&&I(le(zt,{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":M(t),children:a.map((e,a)=>le(h,{component:"td",sx:T(),children:"        "},"skc-"+t+"-"+a))},"sk-"+t))})})})),"error"===A&&I(s),"empty"===A&&I(c),!A&&t&&le(h,{component:"tbody",children:t.map((e,t)=>le(h,{component:"tr","data-surface":M(t),sx:{backgroundColor:"var(--"+M(t)+")"},children:(Array.isArray(e)?e:a.map(a=>e[a.field||a.key])).map((e,r)=>le(h,{component:"td",sx:{...T(),...a[r]&&a[r].align?{textAlign:a[r].align}:{}},children:e},"c-"+t+"-"+r))},"r-"+t))}),L&&le(h,{component:"tfoot",children:r.map((e,t)=>le(h,{component:"tr",children:(Array.isArray(e)?e:a.map(a=>e[a.field||a.key])).map((e,r)=>le(h,{component:"td",sx:{...B(),...a[r]&&a[r].align?{textAlign:a[r].align}:{},..."loading"===A?yt():{}},children:e},"fc-"+t+"-"+r))},"f-"+t))})]}):null:e})})}function fC({label:e,value:t="",onChange:r,placeholder:i,error:n=!1,errorMessage:o="",disabled:l=!1,helperText:c="",variant:s="outlined",size:d="medium",type:u="text",required:m=!1,fullWidth:p=!0,startAdornment:f,endAdornment:g,sx:b={},"aria-label":v,"aria-labelledby":x,onFocus:y,onBlur:S,...w}){const[k,M]=a(!1),T=n?"var(--Buttons-Error-Border)":k?"var(--Buttons-Primary-Border)":"var(--Border)",A=n||k?"var(--Text)":"var(--Text-Quiet)",L="var(--Text)";return se(h,{sx:{width:p?"100%":"auto"},children:[le(z,{label:e,value:t,onChange:r,placeholder:i,disabled:l,variant:s,size:d,type:u,required:m,onFocus:e=>{M(!0),y?.(e)},onBlur:e=>{M(!1),S?.(e)},error:n,fullWidth:p,slotProps:{htmlInput:{...v?{"aria-label":v}:{},...x?{"aria-labelledby":x}:{}},input:{"data-surface":l?"Container-Low":"Container",style:{color:L},startAdornment:f?le(C,{position:"start",children:f}):void 0,endAdornment:g?le(C,{position:"end",children:g}):void 0}},sx:{width:p?"100%":"auto","& .MuiOutlinedInput-root":{backgroundColor:"var(--Background)",transition:"all 0.2s ease-in-out",color:L,"& fieldset":{borderColor:T,transition:"border-color 0.2s ease-in-out"},"&:hover fieldset":{borderColor:n?"var(--Buttons-Error-Border)":"var(--Buttons-Primary-Border)"},"&.Mui-focused fieldset":{borderColor:n?"var(--Buttons-Error-Border)":"var(--Buttons-Primary-Border)",borderWidth:"2px"},"&.Mui-disabled":{backgroundColor:"var(--Background)",opacity:"var(--Disabled, 0.38)"}},"& .MuiInputLabel-root":{color:A,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:n?"var(--Buttons-Error-Border)":"var(--Text-Secondary)",marginTop:"4px",fontSize:"12px"},...b},...w}),n&&o&&le(B,{error:!0,sx:{color:"var(--Buttons-Error-Border)",marginTop:"4px",fontSize:"12px",fontWeight:500},children:o})]})}function gC({label:e="Email",...a}){return le(fC,{label:e,type:"email",placeholder:"user@example.com",...a})}function bC({label:e="Password",...a}){return le(fC,{label:e,type:"password",...a})}function vC({label:e="Search",placeholder:a="Type to search...",...t}){return le(fC,{label:e,type:"search",placeholder:a,...t})}function xC({label:e="Number",...a}){return le(fC,{label:e,type:"number",...a})}function yC({label:e="Phone",placeholder:a="(555) 123-4567",...t}){return le(fC,{label:e,type:"tel",placeholder:a,...t})}function zC({label:e="Website",placeholder:a="https://example.com",...t}){return le(fC,{label:e,type:"url",placeholder:a,...t})}function SC({error:e=!1,errorMessage:a="",rows:t=4,fullWidth:r=!0,...i}){return le(Sx,{multiline:!0,rows:t,fullWidth:r,...e&&{validation:"error",validationMessage:a},...i})}function wC({fields:e=[],spacing:a=2,sx:t={},...r}){return le(h,{sx:{display:"flex",flexDirection:"column",gap:`var(--Spacing-${a})`,width:"100%",...t},...r,children:e.map(e=>le(fC,{...e},e.id))})}const kC={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 CC({items:e=[],value:t,defaultValue:r,onChange:n,type:o="floating",orientation:l="horizontal",color:c="default",fab:s,className:d="",sx:u={},...m}){const[p,f]=a(r??null),g=void 0!==t,b=g?t:p,v=i(e=>{const a=b===e?null:e;g||f(a),n?.(a)},[g,b,n]),x=kC[c]||kC.default,y=x.theme,z=x.surface,S="vertical"===l,w="floating"===o,k=le(h,{role:"toolbar","aria-orientation":l,"aria-label":"Toolbar","data-theme":y,"data-surface":z||"Surface",className:"toolbar toolbar-"+o+" toolbar-"+l+" toolbar-"+c+" "+d,sx:{display:"inline-flex",flexDirection:S?"column":"row",alignItems:"center",gap:"4px",backgroundColor:"var(--Background)",border:"1px solid var(--Border-Variant)",borderRadius:w?"56px":"var(--Style-Border-Radius)",padding:w?"8px 16px":"8px",fontFamily:"inherit",flexShrink:0,...w&&{boxShadow:Nf},...u},...m,children:e.map((e,a)=>{const t=b===a;return le(Yg,{iconOnly:!0,variant:t?"default":"ghost",size:"small",onClick:()=>v(a),"aria-label":e.label,"aria-checked":t,role:"radio",children:le(Bf,{size:"small",sx:{color:"inherit"},children:e.icon})},e.key||a)})});return s&&w?se(h,{sx:{display:"inline-flex",flexDirection:S?"column":"row",alignItems:"center",gap:1},children:[k,le(Yg,{iconOnly:!0,variant:"default",size:"large",onClick:s.onClick,"aria-label":s.label||"Action",sx:{borderRadius:"50%",width:56,height:56,minWidth:"unset",minHeight:"unset"},children:le(Bf,{size:"medium",sx:{color:"inherit"},children:s.icon})})]}):k}const BC=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",MC=[{icon:le(Ka,{}),label:"Bold"},{icon:le(_a,{}),label:"Italic"},{icon:le(et,{}),label:"Underline"},{icon:le(at,{}),label:"Align left"},{icon:le(tt,{}),label:"Align center"}];function TC({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function AC(){const[e,t]=a("floating"),[r,i]=a("default"),[n,o]=a("horizontal"),[l,c]=a(!1),[s,d]=a("Default"),[u,p]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Toolbar",component:"Toolbar"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Toolbar",theme:s,surface:u})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,sx:{minHeight:200},children:le(CC,{items:MC,type:e,color:r,orientation:n,fab:l&&"floating"===e?{icon:le(Aa,{}),label:"Create",onClick:()=>{}}:void 0})}),le(Yb,{code:(()=>{const a=["items={items}"];return"floating"!==e&&a.push('type="contextual"'),"default"!==r&&a.push('color="'+r+'"'),"horizontal"!==n&&a.push('orientation="vertical"'),l&&a.push('fab={{ icon: <AddIcon />, label: "Create", onClick: handleCreate }}'),a.push("value={selected}"),a.push("onChange={setSelected}"),"<Toolbar\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPE"}),le(m,{direction:"row",spacing:1,children:["floating","contextual"].map(a=>le(TC,{label:BC(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["default","primary","primary-light","white","black"].map(e=>le(TC,{label:BC(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(TC,{label:BC(e),selected:n===e,onClick:()=>o(e)},e))})]}),"floating"===e&&se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"FAB Button"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Add FAB to the right of toolbar"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>c(e.target.checked),size:"small","aria-label":"FAB button"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"Toolbar"})})]})]})}const LC=Hf,IC={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},NC={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},WC={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 DC({children:e,title:a,variant:t="solid",color:r="black-white",size:i="medium",placement:n="bottom",arrow:o=!0,open:l,enterDelay:c=100,leaveDelay:s=0,describeChild:d=!1,className:u="",sx:m={},...p}){const f=WC[i]||WC.medium,g="solid"===t,b="light"===t,v="outline"===t,y=LC(r),z=(e=>String(e).startsWith("left")||String(e).startsWith("right"))(n),S="var(--Buttons-"+y+"-Button)",w=S,k=void 0===l?{}:{open:l};return le(x,{title:a?le(h,{"data-theme":(g?IC[r]:b?NC[r]:null)||void 0,"data-surface":b?"Surface-Brightest":g?"Surface":void 0,className:"tooltip-content tooltip-"+t+" tooltip-"+r+" tooltip-"+i+" "+u,sx:{backgroundColor:S,color:"var(--Buttons-"+y+"-Text)",border:v?"1px solid var(--Buttons-"+y+"-Border)":"none",borderRadius:"var(--Tooltip-Radius, var(--Style-Border-Radius))",fontSize:f.fontSize,lineHeight:1.5,fontFamily:"inherit",padding:f.py+" "+f.px,maxWidth:f.maxWidth+"px",display:"flex",alignItems:"center",gap:f.gap,boxShadow:"var(--Effect-Level-2)",...m},children:a}):"",placement:n,arrow:o,enterDelay:c,leaveDelay:s,describeChild:d,...k,componentsProps:{tooltip:{sx:{backgroundColor:"transparent",padding:0,maxWidth:"none",boxShadow:"none"}},arrow:{sx:{color:w,width:z?f.arrowVisible:f.arrowW,height:z?f.arrowW:f.arrowVisible,"&::before":{border:v?"1px solid var(--Buttons-"+y+"-Border)":"none",backgroundColor:w,boxSizing:"border-box",width:"100%",height:"100%"}}}},...p,children:e})}const RC={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}},FC={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 PC({label:e,icon:a,level:t=0,toggle:r="none",onToggle:i,disabled:n=!1,size:o="small",className:l="",sx:c={},children:s,...d}){const u=6===t&&"none"!==r?"none":r,m="on"===u,p="none"!==u,f=p?RC[t]||{padLeft:0,togglePadLeft:0}:FC[t]||FC[0],g={paddingTop:"8px",paddingRight:"8px",paddingBottom:"8px",paddingLeft:(f.padLeft??8)+"px"};return se(h,{className:"tree-branch tree-branch-"+o+" tree-branch-level-"+t+" tree-branch-toggle-"+u+(n?" tree-branch-disabled":"")+(l?" "+l:""),sx:{width:"100%",...c},...d,children:[se(h,{component:"button",type:"button",role:"treeitem","aria-expanded":p?m:void 0,"aria-disabled":n||void 0,tabIndex:n?-1:0,onClick:e=>{n||p&&(e.stopPropagation(),i?.(m?"off":"on"))},disabled:n,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:n?"not-allowed":"pointer",opacity:n?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.15s ease, color 0.15s ease","&:hover":n?{}:{backgroundColor:"var(--Hover)"},"&:active":n?{}:{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-2px"}},children:[p&&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:m?"rotate(-90deg)":"rotate(0deg)"},children:le(Bf,{size:"small",children:le(Da,{})})})}),se(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:[a&&le(h,{sx:{display:"inline-flex",alignItems:"center",flexShrink:0},children:le(Bf,{size:"small",children:a})}),null!=e&&le(ur,{style:{color:"inherit",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block",flex:1,minWidth:0},children:e})]})]}),m&&s&&le(h,{role:"group",sx:{display:"flex",flexDirection:"column"},children:s})]})}const HC=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"]}],EC=e=>le(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:e,flexShrink:0}}),VC=[{id:"1",label:"Documents",icon:le(Xa,{}),badge:EC("var(--Warning-Text, orange)"),children:[{id:"1-1",label:"Company",icon:le(rt,{}),badge:EC("var(--Warning-Text, orange)"),children:[{id:"1-1-1",label:"Invoice",icon:le(nt,{})},{id:"1-1-2",label:"Meeting notes",icon:le(it,{})},{id:"1-1-3",label:"Tasks list",icon:le(it,{})},{id:"1-1-4",label:"Equipment",icon:le(nt,{})},{id:"1-1-5",label:"Video conference",icon:le(ot,{})}]},{id:"1-2",label:"Personal",icon:le(Xa,{})},{id:"1-3",label:"Group photo",icon:le(Ya,{})}]},{id:"2",label:"Bookmarked",icon:le(Ga,{}),children:[{id:"2-1",label:"Favourites",icon:le(it,{})}]},{id:"3",label:"History",icon:le(Xa,{})},{id:"4",label:"Trash",icon:le(Ae,{}),disabled:!0}],QC=JSON.stringify(LS,null,2);function jC({ratio:e,threshold:a}){if(!e)return le(zr,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return se(h,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[se(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(zr,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function qC({label:e,ratio:a,threshold:t,note:r}){return se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(h,{sx:{flex:1},children:[le(dr,{style:{color:"var(--Text)"},children:e}),r&&le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:r})]}),le(jC,{ratio:a,threshold:t})]})}function GC({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function UC({color:e,selected:a,onClick:t}){const r=HC(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function XC({value:e,onChange:t}){const[r,i]=a(e),[n,o]=a(null);return se(h,{children:[se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:1},children:[le(Ar,{style:{color:"var(--Text-Quiet)"},children:"TREE DATA (JSON)"}),le(Yg,{variant:"ghost",size:"small",onClick:()=>{i(QC),o(null),t(LS)},children:"Reset"})]}),le(h,{component:"textarea",value:r,onChange:e=>{i(e.target.value);try{const a=JSON.parse(e.target.value);o(null),t(a)}catch(e){o(e.message)}},spellCheck:!1,rows:10,sx:{width:"100%",fontFamily:"monospace",fontSize:"11px",backgroundColor:"#1e1e1e",color:n?"#f87171":"#e5e7eb",border:"1px solid "+(n?"#f87171":"#333"),borderRadius:"6px",padding:"10px",resize:"vertical",outline:"none",boxSizing:"border-box",lineHeight:1.5,"&:focus":{borderColor:"var(--Focus-Visible)"}}}),n&&se(zr,{style:{color:"#f87171",display:"block",marginTop:4},children:["JSON error: ",n]})]})}function YC(){const[e,n]=a("solid"),[o,l]=a("primary"),[c,s]=a("default"),[d,u]=a("slide"),[p,f]=a("single"),[g,b]=a(!1),[v,x]=a(!1),[z,S]=a(!1),[w,k]=a(LS),[C,B]=a("Default"),[M,T]=a("Surface"),[A,L]=a({}),I=r(null),N=HC(o),W=z?VC:w,D=i((e,a)=>e&&getComputedStyle(e).getPropertyValue(a).trim()||null,[]);t(()=>{const e=setTimeout(()=>{const e=I.current;L({text:D(e,"--Text"),textQuiet:D(e,"--Text-Quiet"),background:D(e,"--Background"),border:D(e,"--Border"),focusVisible:D(e,"--Focus-Visible"),activeBtn:D(e,"--Buttons-"+N+"-Button"),activeBorder:D(e,"--Buttons-"+N+"-Border")})},50);return()=>clearTimeout(e)},[o,C,D,N]);return se(h,{sx:{pb:8},children:[le(yM,{title:"Tree View",component:"TreeView"}),le(h,{sx:{mt:1},children:le(Xf,{theme:C,onThemeChange:B,surface:M,onSurfaceChange:T})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"TreeView",theme:C,surface:M})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{ref:I,theme:C,children:le(h,{sx:{width:"100%",maxWidth:360},children:le(AS,{color:o,variant:e,density:c,animation:d,selectionMode:p,checkboxSelection:g,disableSelection:v,items:W,defaultExpandedItems:["1","1-1","2"]})})}),le(Yb,{code:(()=>{const a=["<OmniTreeView"];return"default"!==o&&a.push(' color="'+o+'"'),"default"!==e&&a.push(' variant="'+e+'"'),"default"!==c&&a.push(' density="'+c+'"'),"slide"!==d&&a.push(' animation="'+d+'"'),"single"!==p&&a.push(' selectionMode="'+p+'"'),g&&a.push(" checkboxSelection"),v&&a.push(" disableSelection"),a.push(" items={treeData}"),a.push("/>"),a.join("\n")})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),se(m,{direction:"row",spacing:1,children:[le(GC,{label:"Solid",selected:"solid"===e,onClick:()=>n("solid")}),le(GC,{label:"Light",selected:"light"===e,onClick:()=>n("light")})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:OC.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(UC,{color:e,selected:o===e,onClick:l},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DENSITY"}),se(m,{direction:"row",spacing:1,children:[le(GC,{label:"Compact",selected:"compact"===c,onClick:()=>s("compact")}),le(GC,{label:"Default",selected:"default"===c,onClick:()=>s("default")})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANIMATION"}),le(m,{direction:"row",spacing:1,children:["none","slide","spring"].map(e=>le(GC,{label:HC(e),selected:d===e,onClick:()=>u(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SELECTION MODE"}),se(m,{direction:"row",spacing:1,children:[le(GC,{label:"Single",selected:"single"===p,onClick:()=>f("single")}),le(GC,{label:"Multi",selected:"multi"===p,onClick:()=>f("multi")})]})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Icons"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Load sample data with icons and badges"})]}),le(sv,{checked:z,onChange:e=>S(e.target.checked),size:"small","aria-label":"Show icons"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Checkbox Selection"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show checkboxes for each item"})]}),le(sv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Checkbox selection"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disable Selection"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Items are not selectable"})]}),le(sv,{checked:v,onChange:e=>x(e.target.checked),size:"small","aria-label":"Disable selection"})]})]}),!z&&le(h,{sx:{mt:3},children:le(XC,{value:QC,onChange:k})})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:se(m,{spacing:3,children:[se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(qC,{label:"Resting: var(--Text-Quiet) vs. background",ratio:Ur(A.textQuiet,A.background),threshold:4.5,note:"Unselected items use Text-Quiet"}),le(qC,{label:"Hover: var(--Text) vs. background",ratio:Ur(A.text,A.background),threshold:4.5,note:"Hovered items use var(--Text)"}),le(qC,{label:"Active (solid): var(--Text) vs. var(--Buttons-"+N+"-Button)",ratio:Ur(A.text,A.activeBtn),threshold:4.5,note:"Selected item with solid fill"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(qC,{label:"var(--Focus-Visible) vs. background",ratio:Ur(A.focusVisible,A.background),threshold:3,note:"outline: 2px solid var(--Focus-Visible); outline-offset: -2px"})]}),se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})]})})]}),le(yb,{value:3,children:le(gM,{component:"TreeView"})})]})]})}const JC=["outlined","light","ghost"];let ZC=!1;function $C(e){ZC||"production"===process.env.NODE_ENV||(ZC=!0,console.warn(`[OmniDesign] ToggleButtonGroup: ${e} This is MUI's shape and still works; it will be removed in the next major. The native form is \`multiple\` (not \`exclusive\`), onChange(value, event), \`color\` for the palette and \`variant\` for the shape.`))}function KC({variant:e,color:a,exclusive:t,multiple:r,onChange:i,allowEmpty:n=!1,separated:o=!1,...l}){const c=void 0===e||JC.includes(e);c||$C(`variant="${e}" names a COLOR.`),void 0!==t&&$C("`exclusive` is `multiple` inverted.");return le(oy,{__selectionOwner:!0,variant:c&&e||"outlined",color:void 0!==a?a:c?void 0:e,multiple:void 0!==r?r:void 0!==t&&!t,allowEmpty:n,separated:o,onChange:i?!c||void 0!==t?(e,a)=>i(a,e):i:void 0,...l})}const _C=e=>{const a=a=>le(KC,{color:e,...a});return a.displayName=`${e}ToggleButtonGroup`,a},eB=_C("default"),aB=_C("primary"),tB=_C("secondary"),rB=_C("tertiary"),iB=_C("neutral"),nB=_C("black-white"),oB=_C("info"),lB=_C("success"),cB=_C("warning"),sB=_C("error"),dB=[{icon:le(Te,{}),label:"Home"},{icon:le(Ie,{}),label:"Search"},{icon:le(Me,{}),label:"Favorites",badge:3},{icon:le(We,{}),label:"Profile"},{icon:le(Le,{}),label:"Settings"}],uB=[{label:"Home"},{label:"Inbox"},{label:"Projects"},{label:"Settings"}],hB=[{label:"Dessert",field:"name",width:"50%"},{label:"Calories",field:"calories",align:"right"},{label:"Fat (g)",field:"fat",align:"right"}],mB=[{name:"Frozen yoghurt",calories:159,fat:6},{name:"Ice cream sandwich",calories:237,fat:9},{name:"Eclair",calories:262,fat:16}],pB=[{value:"light",label:"Light"},{value:"dark",label:"Dark"},{value:"system",label:"System"}],fB=[{icon:le(Ka,{}),label:"Bold"},{icon:le(_a,{}),label:"Italic"},{icon:le(et,{}),label:"Underline"}],gB=[{id:"src",label:"src",children:[{id:"components",label:"components",children:[{id:"button",label:"Button.js"},{id:"card",label:"Card.js"}]},{id:"index",label:"index.js"}]},{id:"readme",label:"README.md"}],bB=({w:e=320,h:a,children:t})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden"},children:t}),vB=()=>{const[e,t]=a(!1);return se(ce,{children:[le(Yg,{onClick:()=>t(!0),children:"Open modal"}),le(Yw,{open:e,onClose:()=>t(!1),title:"Rename project",children:se(zy,{gap:"var(--Sizing-2)",children:[le(mr,{children:"Modals take the whole screen's attention, so they owe the reader a way out."}),le(Yg,{onClick:()=>t(!1),children:"Done"})]})})]})},xB=()=>{const[e,t]=a(!1);return se(ce,{children:[le(Yg,{onClick:()=>t(!0),children:"Open dialog"}),le(vS,{open:e,onClose:()=>t(!1),title:"Discard changes?",actions:se(ce,{children:[le(Yg,{variant:"outline",onClick:()=>t(!1),children:"Keep editing"}),le(Yg,{variant:"error",onClick:()=>t(!1),children:"Discard"})]}),children:le(mr,{children:"This cannot be undone."})})]})},yB=()=>{const[e,t]=a(!1);return se(ce,{children:[le(Yg,{onClick:()=>t(!0),children:"Open drawer"}),le(fz,{open:e,onClose:()=>t(!1),children:se(zy,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(_t,{children:"Filters"}),le(YS,{items:uB,clickable:!0}),le(Yg,{onClick:()=>t(!1),children:"Close"})]})})]})},zB=()=>{const[e,t]=a(!1);return se(ce,{children:[le(Yg,{onClick:()=>t(!0),children:"Show snackbar"}),le(Ek,{open:e,onClose:()=>t(!1),color:"success",autoHideDuration:4e3,children:"Project saved."})]})},SB=()=>{const[e,t]=a(!1),i=r(null);return se(ce,{children:[le(Yg,{ref:i,onClick:()=>t(e=>!e),children:"Open popover"}),le(Zw,{open:e,onClose:()=>t(!1),anchorRef:i,width:260,children:le(zy,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-2)"},children:le(mr,{children:"A panel anchored to the thing that opened it, rendered through a portal so no ancestor can clip it."})})})]})};function wB(){const[e,t]=a("left");return se(KC,{value:e,onChange:t,"aria-label":"Alignment",children:[le(Yg,{value:"left",children:"Left"}),le(Yg,{value:"center",children:"Center"}),le(Yg,{value:"right",children:"Right"})]})}function kB(){return se(zy,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[se(zy,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(zr,{color:"quiet",children:"ButtonGroup — three things you can do"}),se(oy,{"aria-label":"Actions",children:[le(Yg,{onClick:()=>{},children:"Save"}),le(Yg,{onClick:()=>{},children:"Duplicate"}),le(Yg,{onClick:()=>{},children:"Delete"})]})]}),se(zy,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(zr,{color:"quiet",children:"ToggleButtonGroup — one answer, and never none"}),le(wB,{})]})]})}const CB={ButtonGroup:()=>le(kB,{}),ToggleButtonGroup:()=>le(wB,{}),AppBar:()=>le(bB,{w:"100%",children:le(wz,{navLinks:[{label:"Work"},{label:"Studio"},{label:"Contact"}]})}),Autocomplete:()=>le(bB,{children:le(Rz,{label:"Theme",options:["Light","Dark","System","High contrast"],placeholder:"Type to search"})}),BottomNavigation:()=>le(bB,{w:360,children:le(Zz,{items:dB.slice(0,4),defaultValue:0})}),CodeBlock:()=>le(bB,{w:"100%",children:le(Yb,{code:"npm install @omni-design/components",language:"bash"})}),Dialog:()=>le(xB,{}),Drawer:()=>le(yB,{}),DropZone:()=>le(bB,{w:360,children:le(HS,{label:"Drop a file here",sublabel:"PNG or SVG, up to 2 MB"})}),IconBadge:()=>le(QS,{color:"primary",children:le(ye,{})}),List:()=>le(bB,{children:le(YS,{items:uB,clickable:!0})}),Loader:()=>le(yw,{message:"Loading projects…"}),Menu:()=>se(Ww,{children:[le(Dw,{children:"Actions"}),se(Rw,{children:[le(Fw,{children:"Rename"}),le(Fw,{children:"Duplicate"}),le(Pw,{}),le(Fw,{disabled:!0,children:"Delete"})]})]}),Modal:()=>le(vB,{}),Paper:()=>le(Jw,{surface:"Container",children:se(zy,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-3)",minWidth:220},children:[le(_t,{children:"Paper"}),le(mr,{children:"A surface at one container level, with the elevation that level implies."})]})}),Popover:()=>le(SB,{}),Rail:()=>le(bB,{w:88,h:320,children:le(tk,{items:dB,defaultValue:0})}),Ratio:()=>le(bB,{w:240,children:le(hk,{ratio:"16:9"})}),SearchField:()=>le(bB,{children:le(Xy,{placeholder:"Search projects…"})}),Select:()=>le(bB,{children:le(qf,{label:"Appearance",options:pB,defaultValue:"system"})}),Sidebar:()=>le(bB,{w:280,h:320,children:le(Pk,{variant:"permanent",open:!0,items:uB,width:280})}),Snackbar:()=>le(zB,{}),StateMessage:()=>le(bB,{w:360,children:le(Jk,{type:"empty",title:"No projects yet",body:"Create one to get started.",action:le(Yg,{size:"small",children:"New project"})})}),Stepper:()=>le(bB,{w:360,children:se(eC,{activeStep:1,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})}),Swatch:()=>le(uC,{color:"#70947b",label:"Primary"}),Table:()=>le(bB,{w:"100%",children:le(pC,{columns:hB,rows:mB})}),Tag:()=>le($S,{color:"primary",children:"Beta"}),TextField:()=>le(bB,{children:le(fC,{label:"Project name",placeholder:"Untitled"})}),Toolbar:()=>le(CC,{items:fB,defaultValue:0}),Tooltip:()=>le(DC,{title:"Rename this project",children:le(Yg,{variant:"outline",children:"Hover me"})}),TreeView:()=>le(bB,{children:le(AS,{items:gB,defaultExpandedItems:["src","components"]})})},BB="npm install @omni-design/components",MB={Button:{selected:()=>le(Qy,{offLabel:"unselected",onLabel:"selected",render:e=>le(Yg,{variant:"outline",selected:e,children:"Bold"})}),avatar:()=>le(Qy,{offLabel:"text button",onLabel:"avatar",render:e=>le(Yg,e?{avatar:!0,"aria-label":"Jane Doe",children:le(yg,{})}:{children:"Jane Doe"})}),letterNumber:()=>le(Qy,{offLabel:"text button",onLabel:"letterNumber",render:e=>le(Yg,e?{letterNumber:!0,"aria-label":"3 unread",children:"3"}:{children:"3 unread"})}),swatch:()=>le(Qy,{offLabel:"ordinary button",onLabel:"swatch",render:e=>le(Yg,e?{swatch:!0,"aria-label":"Brand green",style:{background:"#70947b"}}:{children:"Brand green"})})},Chip:{variant:()=>le(Ey,{values:Py,defaultValue:"primary",render:e=>le(nb,{variant:e,label:e})}),selected:()=>le(Qy,{render:e=>le(nb,{label:"Design",selected:e,clickable:!0}),offLabel:"unselected",onLabel:"selected"}),clickable:()=>le(Qy,{render:e=>le(nb,{label:"Design",clickable:e}),offLabel:"static",onLabel:"clickable"}),disabled:()=>le(Qy,{render:e=>le(nb,{label:"Design",clickable:!0,disabled:e}),offLabel:"enabled",onLabel:"disabled"})},Badge:{variant:()=>le(Ey,{values:Py,defaultValue:"primary",render:e=>le(Ag,{variant:e,badgeContent:4,children:le(Bf,{children:le(xe,{})})})}),dot:()=>le(Qy,{render:e=>le(Ag,{dot:e,badgeContent:4,children:le(Bf,{children:le(xe,{})})}),offLabel:"count",onLabel:"dot"}),showZero:()=>le(Qy,{render:e=>le(Ag,{showZero:e,badgeContent:0,children:le(Bf,{children:le(xe,{})})}),offLabel:"0 hidden",onLabel:"0 shown"}),invisible:()=>le(Qy,{render:e=>le(Ag,{invisible:e,badgeContent:4,children:le(Bf,{children:le(xe,{})})}),offLabel:"visible",onLabel:"invisible"}),overlap:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"rectangular",emphasis:!0,children:le(Ag,{badgeContent:4,overlap:"rectangular",children:le(yg,{initials:"JD"})})}),le(Oy,{label:"circular",children:le(Ag,{badgeContent:4,overlap:"circular",children:le(yg,{initials:"JD"})})})]})},Alert:{color:()=>le(Vy,{values:["info","success","warning","error"],defaultValue:"info",render:e=>se(rv,{color:e,children:[e," — something worth saying."]})}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>se(rv,{color:"info",size:e,children:["Size ",e,"."]})})},Avatar:{defaultPhoto:()=>le(Qy,{render:e=>le(yg,{defaultPhoto:e}),offLabel:"no photo",onLabel:"default photo"}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(yg,{size:e,initials:"JD"})}),clickable:()=>le(Qy,{render:e=>le(yg,{initials:"JD",clickable:e,"aria-label":e?"Jane Doe, open menu":void 0}),offLabel:"static",onLabel:"clickable"})},Icon:{color:()=>le(Ey,{values:["default",...Py,"quiet"],defaultValue:"default",render:e=>le(Bf,{color:e,children:le(Me,{})})}),size:()=>le(Ey,{values:["xxs","xs","small","medium","large","xl","xxl"],defaultValue:"medium",render:e=>le(Bf,{size:e,color:"primary",children:le(Me,{})})}),twoTone:()=>le(Qy,{render:e=>le(Bf,{color:"primary",twoTone:e,size:"large",children:le(Me,{})}),offLabel:"solid",onLabel:"twoTone"}),disabled:()=>le(Qy,{render:e=>le(Bf,{color:"primary",disabled:e,children:le(Me,{})}),offLabel:"enabled",onLabel:"disabled"})},Swatch:{size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(uC,{color:"#70947b",size:e,label:e})}),selected:()=>le(Qy,{render:e=>le(uC,{color:"#70947b",label:"Primary",selected:e}),offLabel:"unselected",onLabel:"selected"}),disabled:()=>le(Qy,{render:e=>le(uC,{color:"#70947b",label:"Primary",disabled:e}),offLabel:"enabled",onLabel:"disabled"}),radio:()=>le(Qy,{render:e=>le(uC,{color:"#70947b",label:"Primary",radio:e,selected:!0}),offLabel:"chip carries it",onLabel:"radio carries it"})},Tag:{color:()=>le(Ey,{values:["default",...Py],defaultValue:"primary",render:e=>le($S,{color:e,children:e})}),width:()=>se(zy,{gap:"var(--Sizing-2)",style:{width:200},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"hug"}),le($S,{color:"primary",children:"Beta"})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"fill"}),le($S,{color:"primary",width:"fill",children:"Beta"})]})]}),allCaps:()=>le(Qy,{render:e=>le($S,{color:"primary",allCaps:e,children:"Beta"}),offLabel:"as written",onLabel:"allCaps"})},IconBadge:{color:()=>le(Ey,{values:["default",...Py],defaultValue:"primary",render:e=>le(QS,{color:e,children:le(xe,{})})}),size:()=>se(zy,{gap:"var(--Sizing-1)",children:[le(QS,{color:"primary",children:le(xe,{})}),le(mr,{color:"quiet",children:"One size. `size` was removed and the component warns if you pass it — the prop table above still lists three values, which is a doc bug."})]})},Link:{disabled:()=>le(Qy,{render:e=>le(ti,{href:"#",disabled:e,children:"Read the guide"}),offLabel:"enabled",onLabel:"disabled"})},Divider:{color:()=>le(Vy,{values:["border","border-variant",...Py],defaultValue:"border-variant",render:e=>le(mx,{color:e})}),orientation:()=>se(yy,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[le(Oy,{label:"horizontal",emphasis:!0,width:160,children:le("div",{style:{width:160},children:le(mx,{})})}),le(Oy,{label:"vertical",width:60,children:le("div",{style:{height:60,display:"flex"},children:le(mx,{orientation:"vertical",style:{alignSelf:"stretch"}})})})]}),size:()=>le(Vy,{values:Hy,defaultValue:"small",render:e=>le(mx,{size:e,color:"primary"})}),indicatorStyle:()=>le(Vy,{values:["outline","solid"],defaultValue:"outline",render:e=>le(mx,{indicatorText:"OR",indicatorStyle:e,color:"primary"})}),textAlign:()=>le(Vy,{values:["left","center","right"],defaultValue:"center",render:e=>le(mx,{indicatorText:"OR",textAlign:e})})},Loader:{color:()=>le(Ey,{values:["default",...Py],defaultValue:"primary",render:e=>le(yw,{color:e,size:"small",message:""})}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(yw,{size:e,message:""})})},StateMessage:{type:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:360},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"empty"}),le(Jk,{type:"empty",title:"No projects yet",body:"Create one to get started."})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"error"}),le(Jk,{type:"error",title:"Could not load",body:"Check your connection and try again."})]}),le(mr,{color:"quiet",children:"The prop table lists a third, `no-results`. The component defines only these two, so it resolves to `empty` — a doc bug rather than a type."})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>le(Jk,{type:"empty",size:e,title:"No projects yet",body:"Create one to get started."})})},Fab:{variant:()=>le(Ey,{values:["solid","outline","ghost"],defaultValue:"solid",render:e=>le(ax,{variant:e,icon:le(Bf,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add, "+e})})},Rating:{color:()=>le(Ey,{values:["default",...Py],defaultValue:"default",render:e=>le(Px,{color:e,defaultValue:3,readOnly:!0})}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(Px,{size:e,defaultValue:3,readOnly:!0})}),readOnly:()=>le(Qy,{render:e=>le(Px,{defaultValue:3,readOnly:e}),offLabel:"interactive",onLabel:"readOnly"})},CodeBlock:{showCopy:()=>le(Vy,{values:[!0,!1],defaultValue:!0,render:e=>le(Yb,{code:BB,language:"bash",showCopy:e})}),showHeader:()=>le(Vy,{values:[!0,!1],defaultValue:!0,render:e=>le(Yb,{code:BB,language:"bash",showHeader:e})}),wrap:()=>le(Vy,{values:[!1,!0],defaultValue:!1,render:e=>le(Yb,{language:"bash",wrap:e,code:"npx @omni-design/cli generate --theme primary --surface Surface-Bright --out ./tokens"})})}},TB=220,AB=(e,a=TB)=>le("div",{style:{width:a},children:e}),LB=["default",...Py,"black-white"],IB=["default",...Py],NB={Checkbox:{variant:()=>le(Ey,{values:LB,defaultValue:"primary",render:e=>le(Rv,{variant:e,defaultChecked:!0,label:e})}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(Rv,{size:e,defaultChecked:!0,label:e})}),"checked / defaultChecked":()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"unchecked",emphasis:!0,children:le(Rv,{label:"Unchecked"})}),le(Oy,{label:"checked",children:le(Rv,{defaultChecked:!0,label:"Checked"})})]}),indeterminate:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"false",emphasis:!0,children:le(Rv,{defaultChecked:!0,label:"All"})}),le(Oy,{label:"indeterminate",children:le(Rv,{indeterminate:!0,label:"Some"})})]}),disabled:()=>le(Qy,{render:e=>le(Rv,{defaultChecked:!0,disabled:e,label:"Email me"}),offLabel:"enabled",onLabel:"disabled"})},Radio:{color:()=>le(Ey,{values:LB,defaultValue:"primary",render:e=>le(Mx,{color:e,checked:!0,label:e,name:"c-"+e})}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(Mx,{size:e,checked:!0,label:e,name:"s-"+e})}),labelPlacement:()=>le(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["end","start","top","bottom"].map(e=>le(Oy,{label:e,emphasis:"end"===e,children:le(Mx,{checked:!0,labelPlacement:e,label:"Option",name:"p-"+e})},e))}),checked:()=>se(Tx,{defaultValue:"b",name:"demo",children:[le(Mx,{value:"a",label:"Light"}),le(Mx,{value:"b",label:"Dark"}),le(Mx,{value:"c",label:"System"})]}),disabled:()=>le(Qy,{render:e=>le(Mx,{checked:!0,disabled:e,label:"Dark",name:"d-"+e}),offLabel:"enabled",onLabel:"disabled"})},SwitchInput:{variant:()=>le(Ey,{values:IB,defaultValue:"default",render:e=>le(dv,{variant:e,defaultChecked:!0,label:e})}),size:()=>le(Ey,{values:Hy,defaultValue:"medium",render:e=>le(dv,{size:e,defaultChecked:!0,label:e})}),"checked / defaultChecked":()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"off",emphasis:!0,children:le(dv,{label:"Notifications"})}),le(Oy,{label:"on",children:le(dv,{defaultChecked:!0,label:"Notifications"})})]}),icon:()=>se(zy,{gap:"var(--Sizing-2)",children:[le(Ey,{values:["default","primary","secondary","tertiary"],defaultValue:"default",render:e=>le(dv,{variant:e,defaultChecked:!0,label:e,iconOn:le(he,{fontSize:"inherit"}),iconOff:le(Ea,{fontSize:"inherit"})})}),se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"off",children:le(dv,{label:"Sync",iconOn:le(he,{fontSize:"inherit"}),iconOff:le(Ea,{fontSize:"inherit"})})}),le(Oy,{label:"on",emphasis:!0,children:le(dv,{defaultChecked:!0,label:"Sync",iconOn:le(he,{fontSize:"inherit"}),iconOff:le(Ea,{fontSize:"inherit"})})}),le(Oy,{label:"same glyph both ways",children:le(dv,{defaultChecked:!0,label:"Sync",icon:le(he,{fontSize:"inherit"})})})]})]}),labelPlacement:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Oy,{label:"end",emphasis:!0,children:le(dv,{defaultChecked:!0,label:"Dark mode"})}),le(Oy,{label:"start",children:le(dv,{defaultChecked:!0,labelPlacement:"start",label:"Dark mode"})})]}),disabled:()=>le(Qy,{render:e=>le(dv,{defaultChecked:!0,disabled:e,label:"Dark mode"}),offLabel:"enabled",onLabel:"disabled"})},Input:{variant:()=>le(Vy,{values:Py.map(e=>e+"-outline"),defaultValue:"primary-outline",render:e=>AB(le(Sx,{variant:e,label:e,placeholder:"Value"}))}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>AB(le(Sx,{size:e,label:e,placeholder:"Value"}))}),labelPosition:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"standard",emphasis:!0,width:TB,children:AB(le(Sx,{label:"Project name",placeholder:"Untitled"}))}),le(Oy,{label:"floating",width:TB,children:AB(le(Sx,{labelPosition:"floating",label:"Project name"}))})]}),validation:()=>le(Vy,{values:["none","error"],defaultValue:"none",render:e=>AB(le(Sx,{validation:e,label:"Email",defaultValue:"error"===e?"not-an-email":"jane@example.com",validationMessage:"error"===e?"Enter a valid email address.":void 0}))}),disabled:()=>le(Qy,{width:TB,offLabel:"enabled",onLabel:"disabled",render:e=>AB(le(Sx,{disabled:e,label:"Project name",defaultValue:"Untitled"}))})},TextField:{error:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false",emphasis:!0,width:TB,children:AB(le(fC,{label:"Email",value:"jane@example.com"}))}),le(Oy,{label:"true",width:TB,children:AB(le(fC,{label:"Email",value:"not-an-email",error:!0,errorMessage:"Enter a valid email address."}))})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>AB(le(fC,{size:e,label:e,placeholder:"Value"}))})},SearchField:{color:()=>le(Vy,{values:IB,defaultValue:"default",render:e=>AB(le(Xy,{color:e,defaultValue:"dinosaur"}))}),showClearButton:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"true",emphasis:!0,width:TB,children:AB(le(Xy,{defaultValue:"dinosaur"}))}),le(Oy,{label:"false",width:TB,children:AB(le(Xy,{defaultValue:"dinosaur",showClearButton:!1}))})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>AB(le(Xy,{size:e,placeholder:"Search — "+e}))})},Select:{labelPosition:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"top",emphasis:!0,width:TB,children:AB(le(qf,{label:"Appearance",options:pB,defaultValue:"system"}))}),le(Oy,{label:"floating",width:TB,children:AB(le(qf,{labelPosition:"floating",label:"Appearance",options:pB,defaultValue:"system"}))})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>AB(le(qf,{size:e,label:e,options:pB,defaultValue:"system"}))}),mode:()=>le(Vy,{values:["standard","multiselect","searchable"],defaultValue:"standard",render:e=>AB(le(qf,{mode:e,label:e,options:pB,defaultValue:"multiselect"===e?["system"]:"system"}))})},Autocomplete:{labelPosition:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"top",emphasis:!0,width:TB,children:AB(le(Rz,{label:"Theme",options:["Light","Dark","System"]}))}),le(Oy,{label:"floating",width:TB,children:AB(le(Rz,{labelPosition:"floating",label:"Theme",options:["Light","Dark","System"]}))})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>AB(le(Rz,{size:e,label:e,options:["Light","Dark","System"]}))})},DropZone:{multiple:()=>se(zy,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — one file"}),le(HS,{label:"Drop a file here",sublabel:"PNG or SVG"})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — several"}),le(HS,{multiple:!0,label:"Drop files here",sublabel:"PNG or SVG"})]})]}),size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>le(HS,{size:e,label:"Drop a file — "+e})}),disabled:()=>se(zy,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"enabled"}),le(HS,{label:"Drop a file here"})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"disabled"}),le(HS,{disabled:!0,label:"Drop a file here"})]})]})},Avatar:{color:()=>le(Ey,{values:["default","primary","secondary","tertiary","neutral"],defaultValue:"default",render:e=>le(yg,{color:e,initials:"JD"})})}},WB=({w:e=320,h:a,children:t})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden"},children:t}),DB=(e={})=>se(Ox,{...e,children:[le(Ex,{href:"/",children:"Home"}),le(Ex,{href:"/projects",children:"Projects"}),le(Ex,{href:"/projects/omni",children:"Omni"}),le(Ex,{children:"Tokens"})]}),RB=(e={})=>se(bb,{defaultValue:0,...e,children:[se(vb,{children:[le(xb,{value:0,children:"Overview"}),le(xb,{value:1,children:"Details"}),le(xb,{value:2,children:"History"})]}),le(yb,{value:0,children:le(mr,{children:"The first panel."})}),le(yb,{value:1,children:le(mr,{children:"The second panel."})}),le(yb,{value:2,children:le(mr,{children:"The third panel."})})]}),FB={Tabs:{orientation:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"horizontal"}),le(WB,{w:320,children:RB()})]}),se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"vertical-left",width:260,children:le(WB,{w:260,children:RB({orientation:"vertical-left"})})}),le(Oy,{label:"vertical-right",width:260,children:le(WB,{w:260,children:RB({orientation:"vertical-right"})})})]})]}),baseline:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"true"}),le(WB,{w:320,children:RB()})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"false"}),le(WB,{w:320,children:RB({baseline:!1})})]})]}),variant:()=>le(zy,{gap:"var(--Sizing-3)",children:["standard","solid","light","dark"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard"===e?"standard":"quiet",children:e}),le(WB,{w:320,children:RB({variant:e})})]},e))}),size:()=>le(zy,{gap:"var(--Sizing-3)",children:Hy.map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"medium"===e?"standard":"quiet",children:e}),le(WB,{w:320,children:RB({size:e})})]},e))}),scrollable:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — the strip wraps or clips"}),le(WB,{w:200,children:le(bb,{defaultValue:0,children:se(vb,{children:[le(xb,{value:0,children:"Overview"}),le(xb,{value:1,children:"Details"}),le(xb,{value:2,children:"History"}),le(xb,{value:3,children:"Settings"})]})})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — the strip scrolls"}),le(WB,{w:200,children:le(bb,{defaultValue:0,scrollable:!0,children:se(vb,{children:[le(xb,{value:0,children:"Overview"}),le(xb,{value:1,children:"Details"}),le(xb,{value:2,children:"History"}),le(xb,{value:3,children:"Settings"})]})})})]})]})},Breadcrumbs:{size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>DB({size:e})}),condense:()=>se(zy,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false"}),DB()]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — the middle collapses behind an ellipsis"}),DB({condense:!0,maxItems:3})]})]}),backOnlyMobile:()=>se(zy,{gap:"var(--Sizing-2)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"wide — the full trail, either way"}),le(WB,{w:360,children:DB({backOnlyMobile:!0})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"narrow — collapses to a single back link"}),le(WB,{w:180,children:DB({backOnlyMobile:!0})})]})]})},Pagination:{size:()=>le(Vy,{values:Hy,defaultValue:"medium",render:e=>le(Gx,{count:8,defaultPage:3,size:e})}),"showFirstButton / showLastButton":()=>se(zy,{gap:"var(--Sizing-2)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false"}),le(Gx,{count:20,defaultPage:9})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — first and last"}),le(Gx,{count:20,defaultPage:9,showFirstButton:!0,showLastButton:!0})]})]})},Stepper:{orientation:()=>se(yy,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"horizontal",emphasis:!0,width:300,children:le(WB,{w:300,children:se(eC,{activeStep:1,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})}),le(Oy,{label:"vertical",width:160,children:se(eC,{orientation:"vertical",activeStep:1,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]}),size:()=>le(zy,{gap:"var(--Sizing-3)",children:Hy.map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"medium"===e?"standard":"quiet",children:e}),le(WB,{w:320,children:se(eC,{size:e,activeStep:1,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]},e))}),clickable:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — display only"}),le(WB,{w:320,children:se(eC,{activeStep:2,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — completed steps go back"}),le(WB,{w:320,children:se(eC,{activeStep:2,clickable:!0,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]})]}),dashedIncomplete:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — one solid connector"}),le(WB,{w:320,children:se(eC,{activeStep:1,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — remaining steps dashed"}),le(WB,{w:320,children:se(eC,{activeStep:1,dashedIncomplete:!0,children:[le(aC,{label:"Colors"}),le(aC,{label:"Type"}),le(aC,{label:"Export"})]})})]})]})},List:{orientation:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"vertical"}),le(WB,{w:240,children:le(YS,{items:uB})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"horizontal"}),le(WB,{w:360,children:le(YS,{items:uB,orientation:"horizontal"})})]})]}),dividers:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false",emphasis:!0,width:200,children:le(WB,{w:200,children:le(YS,{items:uB})})}),le(Oy,{label:"true",width:200,children:le(WB,{w:200,children:le(YS,{items:uB,dividers:!0})})})]}),clickable:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false — static",emphasis:!0,width:200,children:le(WB,{w:200,children:le(YS,{items:uB})})}),le(Oy,{label:"true — rows are buttons",width:200,children:le(WB,{w:200,children:le(YS,{items:uB,clickable:!0})})})]}),selectionMode:()=>le(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["none","single","multiple"].map(e=>le(Oy,{label:e,emphasis:"none"===e,width:190,children:le(WB,{w:190,children:le(YS,{items:uB,selectionMode:e,selectedIndices:"none"===e?[]:[1]})})},e))}),loading:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false",emphasis:!0,width:200,children:le(WB,{w:200,children:le(YS,{items:uB})})}),le(Oy,{label:"true",width:200,children:le(WB,{w:200,children:le(YS,{loading:!0,skeletonRows:4})})})]})},TreeView:{selectionMode:()=>le(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["none","single","multiple"].map(e=>le(Oy,{label:e,emphasis:"none"===e,width:190,children:le(WB,{w:190,children:le(AS,{items:gB,selectionMode:e,defaultExpandedItems:["src"]})})},e))})},AppBar:{mode:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"desktop"}),le(WB,{w:"100%",children:le(wz,{navLinks:[{label:"Work"},{label:"Studio"}]})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"mobile"}),le(WB,{w:360,children:le(wz,{mode:"mobile",navLinks:[{label:"Work"},{label:"Studio"}]})})]})]}),brandType:()=>le(zy,{gap:"var(--Sizing-3)",children:["name","logo","both"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"name"===e?"standard":"quiet",children:e}),le(WB,{w:"100%",children:le(wz,{brandType:e,navLinks:[{label:"Work"}]})})]},e))}),menuType:()=>le(zy,{gap:"var(--Sizing-3)",children:["hamburger","none"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"hamburger"===e?"standard":"quiet",children:e}),le(WB,{w:360,children:le(wz,{mode:"mobile",menuType:e,navLinks:[{label:"Work"}]})})]},e))})},Rail:{variant:()=>le(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["default","primary","secondary","tertiary"].map(e=>le(Oy,{label:e,emphasis:"default"===e,width:88,children:le(WB,{w:88,h:260,children:le(tk,{items:dB.slice(0,4),variant:e,defaultValue:0})})},e))}),expandable:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false",emphasis:!0,width:88,children:le(WB,{w:88,h:260,children:le(tk,{items:dB.slice(0,4),defaultValue:0})})}),le(Oy,{label:"true — gains a toggle",width:88,children:le(WB,{w:88,h:260,children:le(tk,{items:dB.slice(0,4),expandable:!0,defaultValue:0})})})]}),expandedWidth:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"partial",emphasis:!0,width:240,children:le(WB,{w:240,h:260,children:le(tk,{items:dB.slice(0,4),expandable:!0,defaultExpanded:!0,defaultValue:0})})}),le(Oy,{label:"full",width:300,children:le(WB,{w:300,h:260,children:le(tk,{items:dB.slice(0,4),expandable:!0,defaultExpanded:!0,expandedWidth:"full",defaultValue:0})})})]}),labelStyle:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"contained",emphasis:!0,width:88,children:le(WB,{w:88,h:260,children:le(tk,{items:dB.slice(0,4),defaultValue:0})})}),le(Oy,{label:"outside",width:88,children:le(WB,{w:88,h:260,children:le(tk,{items:dB.slice(0,4),labelStyle:"outside",defaultValue:0})})})]})},BottomNavigation:{showLabels:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"true"}),le(WB,{w:360,children:le(Zz,{items:dB.slice(0,4),defaultValue:0})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"false — icons only, so each needs a name"}),le(WB,{w:360,children:le(Zz,{items:dB.slice(0,4),showLabels:!1,defaultValue:0})})]})]}),variant:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"fixed — edge to edge"}),le(WB,{w:360,children:le(Zz,{items:dB.slice(0,4),defaultValue:0})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"floating — inset, with its own elevation"}),le(WB,{w:360,children:le(Zz,{items:dB.slice(0,4),variant:"floating",defaultValue:0})})]})]})},Sidebar:{variant:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"permanent",width:240,children:le(WB,{w:240,h:260,children:le(Pk,{variant:"permanent",open:!0,items:uB,width:240})})}),le(Oy,{label:"temporary — an overlay, shown open",emphasis:!0,width:240,children:le(WB,{w:240,h:260,children:le(Pk,{variant:"permanent",open:!0,items:uB,width:240})})})]})},Toolbar:{type:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"floating — its own surface and elevation"}),le(CC,{items:fB,defaultValue:0})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"docked — sits flush in the layout"}),le(CC,{items:fB,type:"docked",defaultValue:0})]})]}),orientation:()=>se(yy,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"horizontal",emphasis:!0,children:le(CC,{items:fB,defaultValue:0})}),le(Oy,{label:"vertical",children:le(CC,{items:fB,orientation:"vertical",defaultValue:0})})]})},Menu:{size:()=>le(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:Hy.map(e=>le(Oy,{label:e,emphasis:"medium"===e,children:se(Ww,{children:[le(Dw,{children:e}),se(Rw,{size:e,children:[le(Fw,{children:"Rename"}),le(Fw,{children:"Duplicate"})]})]})},e))})}},PB=({w:e=320,h:a,children:t})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden"},children:t}),HB=se(zy,{gap:"var(--Sizing-1)",children:[le(_t,{children:"Card title"}),le(mr,{children:"What a card looks like in this design system."})]});function OB({values:e,defaultValue:t,render:r,label:i=e=>String(e)}){const[n,o]=a(null),l=void 0!==t?[t,...e.filter(e=>e!==t)]:e;return se(ce,{children:[le(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:l.map(e=>le(Yg,{size:"small",variant:e===t?"default":"outline",onClick:()=>o(e),children:i(e)},String(e)))}),null!==n?r(n,()=>o(null)):null]})}function EB(){const[e,t]=a(!1),i=r(null);return se(ce,{children:[se(Yg,{ref:i,variant:"outline",onClick:()=>t(e=>!e),children:[e?"Close":"Open"," popover"]}),le(Zw,{open:e,onClose:()=>t(!1),anchorRef:i,width:240,children:le(zy,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-2)"},children:le(mr,{children:"Anchored to the button, portalled to the body so no ancestor can clip it."})})})]})}const VB=360;function QB({labels:e=["Save","Cancel","Delete"],variant:a="default",...t}){return le(oy,{"aria-label":"Actions",...t,children:e.map(e=>le(Yg,{variant:a,onClick:()=>{},children:e},e))})}function jB(e){return se(oy,{"aria-label":"Alignment",...e,children:[le(Yg,{iconOnly:!0,"aria-label":"Align left",onClick:()=>{},children:le(Bf,{children:le(at,{})})}),le(Yg,{iconOnly:!0,"aria-label":"Align center",onClick:()=>{},children:le(Bf,{children:le(tt,{})})}),le(Yg,{iconOnly:!0,"aria-label":"Align right",onClick:()=>{},children:le(Bf,{children:le(lt,{})})})]})}function qB({options:e=["Left","Center","Right"],initial:t="Left",...r}){const[i,n]=a(t);return le(KC,{value:i,onChange:n,"aria-label":"Align",...r,children:e.map(e=>le(Yg,{value:e,children:e},e))})}function GB({allowEmpty:e,...t}){const[r,i]=a(["Left"]);return se(KC,{multiple:!0,allowEmpty:e,value:r,onChange:i,"aria-label":"Align",...t,children:[le(Yg,{value:"Left",children:"Left"}),le(Yg,{value:"Center",children:"Center"}),le(Yg,{value:"Right",children:"Right"})]})}function UB(){const[a,t]=e.useState("left");return se(KC,{value:a,onChange:t,"aria-label":"Alignment",children:[le(Yg,{value:"left",children:"Left"}),le(Yg,{value:"center",children:"Center"}),le(Yg,{value:"right",disabled:!0,children:"Right"})]})}function XB(){const[e,t]=a(!0),[r,i]=a(!1);return se(yy,{gap:"var(--Sizing-1)",style:{alignItems:"center"},children:[le(nb,{label:"Unselected"}),le(nb,{label:"Selected",clickable:!0,selected:e,onClick:()=>t(e=>!e)}),r?le(zr,{color:"quiet",children:"dismissed"}):le(nb,{label:"Dismissible",onDelete:()=>i(!0)})]})}const YB={...CB,Button:()=>le(Yg,{children:"Button"}),BrandIcon:()=>le(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:["github","linkedin","instagram","dribbble","x-twitter"].map(e=>le(wf,{name:e,size:"24px"},e))}),Fab:()=>le(ax,{icon:le(Bf,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),Chip:()=>le(XB,{}),Badge:()=>se(yy,{gap:"var(--Sizing-3)",children:[le(Ag,{badgeContent:3,children:le(Bf,{children:le("span",{children:"✉"})})}),le(Ag,{dot:!0,children:le(Bf,{children:le("span",{children:"🔔"})})})]}),Alert:()=>se(zy,{gap:"var(--Sizing-1)",children:[le(rv,{color:"info",children:"Something worth knowing."}),le(rv,{color:"error",children:"Something went wrong."})]}),Card:()=>le(zv,{padding:"medium",children:se(zy,{gap:"var(--Sizing-1)",children:[le(_t,{children:"Card title"}),le(mr,{children:"What a card looks like in this design system."})]})}),Avatar:()=>se(yy,{gap:"var(--Sizing-1)",children:[le(yg,{initials:"LN"}),le(yg,{})]}),Icon:()=>se(yy,{gap:"var(--Sizing-1)",children:[le(Bf,{color:"primary",children:le("span",{children:"★"})}),le(Bf,{color:"success",children:le("span",{children:"✓"})}),le(Bf,{color:"error",children:le("span",{children:"✕"})})]}),Link:()=>le(ti,{href:"#example",children:"A link, which thickens rather than recolors on hover"}),Divider:()=>le(mx,{indicatorText:"OR"}),Checkbox:()=>se(zy,{gap:"var(--Sizing-Half)",children:[le(Rv,{label:"Unchecked"}),le(Rv,{label:"Checked",defaultChecked:!0}),le(Rv,{label:"Indeterminate",indeterminate:!0})]}),Radio:()=>se(Tx,{defaultValue:"a",name:"docs-radio",children:[le(Mx,{value:"a",label:"First"}),le(Mx,{value:"b",label:"Second"})]}),Input:()=>le(Sx,{label:"Email",placeholder:"you@example.com"}),SwitchInput:()=>se(zy,{gap:"var(--Sizing-Half)",children:[le(dv,{label:"Off"}),le(dv,{label:"On",defaultChecked:!0})]}),Slider:()=>le(Nx,{defaultValue:40}),Rating:()=>le(Px,{defaultValue:3}),Breadcrumbs:()=>se(Ox,{children:[le(ti,{href:"#a",children:"Home"}),le(ti,{href:"#b",children:"Products"}),le(mr,{children:"Current"})]}),Pagination:()=>le(Gx,{count:8,defaultPage:3}),Accordion:()=>le(hy,{children:le(mr,{children:"An accordion segment, open."})}),Tabs:()=>se(bb,{defaultValue:0,children:[se(vb,{children:[le(xb,{value:0,children:"Overview"}),le(xb,{value:1,children:"Details"})]}),le(yb,{value:0,children:le(mr,{children:"The first panel."})}),le(yb,{value:1,children:le(mr,{children:"The second panel."})})]})};function JB(e){return e in YB}const ZB={Fab:{size:()=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ax,{size:"small",icon:le(Bf,{size:"small",children:le(Aa,{})}),ariaLabel:"Add, small"}),le(ax,{size:"medium",icon:le(Bf,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add, medium"}),le(ax,{size:"large",icon:le(Bf,{size:"large",children:le(Aa,{})}),ariaLabel:"Add, large"})]}),color:()=>{const e=(e,a)=>se(zy,{gap:"var(--Sizing-Half)",style:{alignItems:"center"},children:[le(ax,{color:e,size:"small",icon:le(Bf,{size:"small",children:le(Aa,{})}),ariaLabel:"Add, "+e}),le(zr,{color:a?"standard":"quiet",children:e})]},e);return se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[e("default",!0),le(mx,{orientation:"vertical",style:{alignSelf:"stretch"}}),["primary","secondary","tertiary","neutral","info","success","warning","error","black-white"].map(a=>e(a,!1))]})},extended:()=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ax,{icon:le(Bf,{size:"medium",children:le(La,{})}),ariaLabel:"Edit"}),le(ax,{icon:le(Bf,{size:"medium",children:le(La,{})}),extended:!0,label:"Edit"})]}),animate:()=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ax,{icon:le(Bf,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),le(ax,{icon:le(Bf,{size:"medium",children:le(Aa,{})}),animate:!0,ariaLabel:"Add, animated"})]}),disabled:()=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ax,{icon:le(Bf,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),le(ax,{icon:le(Bf,{size:"medium",children:le(Aa,{})}),disabled:!0,ariaLabel:"Add, disabled"})]})},Button:{variant:()=>se(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap"},children:[le(Yg,{children:"solid"}),le(Yg,{variant:"outline",children:"outline"}),le(Yg,{variant:"ghost",children:"ghost"})]}),size:()=>se(yy,{gap:"var(--Sizing-1)",style:{alignItems:"center",flexWrap:"wrap"},children:[le(Yg,{size:"small",children:"small"}),le(Yg,{size:"medium",children:"medium"}),le(Yg,{size:"large",children:"large"})]}),variantColor:()=>{const e=["primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],a=a=>se(yy,{gap:"var(--Sizing-1)",style:{alignItems:"center",flexWrap:"wrap"},children:[le(Yg,{variant:a?"default"+a:"default",size:"small",children:"default"}),le(mx,{orientation:"vertical",style:{alignSelf:"stretch"}}),e.map(e=>le(Yg,{variant:a?e+a:e,size:"small",children:e},e))]});return se(zy,{gap:"var(--Sizing-2)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"solid"}),a("")]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"outline"}),a("-outline")]})]})},disabled:()=>se(yy,{gap:"var(--Sizing-1)",children:[le(Yg,{children:"enabled"}),le(Yg,{disabled:!0,children:"disabled"})]}),"startDecorator / endDecorator":()=>se(zy,{gap:"var(--Sizing-1)",children:[se(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Yg,{startDecorator:le(Bf,{children:le(Aa,{})}),children:"start icon"}),le(Yg,{endDecorator:le(Bf,{children:le(Ia,{})}),children:"end icon"})]}),se(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Yg,{startDecorator:le(yg,{}),children:"start avatar"}),le(Yg,{endDecorator:le(yg,{}),children:"end avatar"})]})]}),iconOnly:()=>se(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Yg,{children:"text"}),le(Yg,{iconOnly:!0,"aria-label":"Delete item",children:le(Ae,{})}),le(Yg,{letterNumber:!0,"aria-label":"3 unread",children:"3"}),le(Yg,{avatar:!0,"aria-label":"Jane Doe",children:le(yg,{})})]}),elevated:()=>se(yy,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Yg,{children:"standard"}),le(Yg,{elevated:!0,children:"raised"})]}),fullWidth:()=>se(zy,{gap:"var(--Sizing-1)",style:{width:"100%",maxWidth:320},children:[le(Yg,{children:"default fit"}),le(Yg,{fullWidth:!0,children:"full width"})]})}};const $B=[{Slider:Gy},MB,NB,FB,{Card:{variant:()=>le(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["solid","outlined","ghost"].map(e=>le(Oy,{label:e,emphasis:"solid"===e,width:200,children:le(zv,{variant:e,padding:"medium",children:HB})},e))}),size:()=>le(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:Hy.map(e=>le(Oy,{label:e,emphasis:"medium"===e,width:200,children:le(zv,{size:e,padding:"medium",children:HB})},e))}),orientation:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"vertical"}),le(PB,{w:200,children:le(zv,{padding:"medium",children:HB})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"horizontal"}),le(PB,{w:360,children:le(zv,{orientation:"horizontal",padding:"medium",children:HB})})]})]}),clickable:()=>se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false — static",emphasis:!0,width:200,children:le(zv,{padding:"medium",children:HB})}),le(Oy,{label:"true — one control",width:200,children:le(zv,{padding:"medium",clickable:!0,children:HB})})]}),elevated:()=>se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"standard — level 1",emphasis:!0,width:200,children:le(zv,{padding:"medium",children:HB})}),le(Oy,{label:"elevated — level 2",width:200,children:le(zv,{padding:"medium",elevated:!0,children:HB})})]}),selected:()=>se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false",emphasis:!0,width:200,children:le(zv,{padding:"medium",clickable:!0,children:HB})}),le(Oy,{label:"true",width:200,children:le(zv,{padding:"medium",clickable:!0,selected:!0,children:HB})})]})},Accordion:{variant:()=>le(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:["solid","outlined","ghost"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"solid"===e?"standard":"quiet",children:e}),le(hy,{variant:e,title:"What is a design system?",defaultExpanded:!0,children:le(mr,{children:"A set of decisions, written down once."})})]},e))}),size:()=>le(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:Hy.map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"medium"===e?"standard":"quiet",children:e}),le(hy,{size:e,title:"Size "+e,defaultExpanded:!0,children:le(mr,{children:"A set of decisions, written down once."})})]},e))}),defaultExpanded:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — starts closed"}),le(hy,{title:"What is a design system?",children:le(mr,{children:"A set of decisions, written down once."})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — starts open"}),le(hy,{title:"What is a design system?",defaultExpanded:!0,children:le(mr,{children:"A set of decisions, written down once."})})]})]}),disabled:()=>se(zy,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:380},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"enabled"}),le(hy,{title:"What is a design system?",children:le(mr,{children:"A set of decisions, written down once."})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"disabled"}),le(hy,{title:"What is a design system?",disabled:!0,children:le(mr,{children:"A set of decisions, written down once."})})]})]})},Paper:{outlined:()=>se(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Oy,{label:"false — elevation",emphasis:!0,width:180,children:le(Jw,{surface:"Container",children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(mr,{children:"Elevated"})})})}),le(Oy,{label:"true — a border, no shadow",width:180,children:le(Jw,{surface:"Container",outlined:!0,children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(mr,{children:"Outlined"})})})})]}),variant:()=>le(yy,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["elevation","outlined"].map(e=>le(Oy,{label:e,emphasis:"elevation"===e,width:180,children:le(Jw,{surface:"Container",variant:e,children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(mr,{children:e})})})},e))})},Ratio:{fit:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"width — height follows the column"}),le("div",{style:{width:240},children:le(hk,{ratio:"16:9"})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"height — width follows the row"}),le("div",{style:{height:120},children:le(hk,{ratio:"16:9",fit:"height"})})]})]})},Table:{loading:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%"},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false"}),le(pC,{columns:hB,rows:mB})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — the shape is kept"}),le(pC,{columns:hB,rows:[],loading:!0,skeletonRows:3})]})]})},Modal:{open:()=>le(OB,{values:[!0],label:()=>"Open modal",render:(e,a)=>le(Yw,{open:!0,onClose:a,title:"Rename project",children:se(zy,{gap:"var(--Sizing-2)",children:[le(mr,{children:"A modal takes the whole screen`s attention, so it owes the reader a way out."}),le(Yg,{onClick:a,children:"Done"})]})})}),size:()=>le(OB,{values:Hy,defaultValue:"medium",render:(e,a)=>le(Yw,{open:!0,onClose:a,size:e,title:"Size "+e,children:le(mr,{children:"The modal`s width. Its height always follows its content."})})}),layout:()=>le(OB,{values:["center","top"],defaultValue:"center",render:(e,a)=>le(Yw,{open:!0,onClose:a,layout:e,title:"Layout "+e,children:le(mr,{children:"Where the modal sits in the viewport."})})}),closeOnBackdrop:()=>le(OB,{values:[!0,!1],defaultValue:!0,label:e=>e?"true — click outside closes":"false — click outside does nothing",render:(e,a)=>le(Yw,{open:!0,onClose:a,closeOnBackdrop:e,title:"Rename project",children:se(zy,{gap:"var(--Sizing-2)",children:[le(mr,{children:e?"Click the backdrop to close.":"The backdrop will not close this."}),le(Yg,{onClick:a,children:"Close"})]})})}),showCloseButton:()=>le(OB,{values:[!0,!1],defaultValue:!0,label:e=>e?"true":"false — needs its own way out",render:(e,a)=>le(Yw,{open:!0,onClose:a,showCloseButton:e,title:"Rename project",children:se(zy,{gap:"var(--Sizing-2)",children:[le(mr,{children:"A modal with no close button must give one in its content."}),le(Yg,{onClick:a,children:"Done"})]})})})},Dialog:{open:()=>le(OB,{values:[!0],label:()=>"Open dialog",render:(e,a)=>le(vS,{open:!0,onClose:a,title:"Discard changes?",actions:se(ce,{children:[le(Yg,{variant:"outline",onClick:a,children:"Keep editing"}),le(Yg,{variant:"error",onClick:a,children:"Discard"})]}),children:le(mr,{children:"This cannot be undone."})})}),maxWidth:()=>le(OB,{values:["xs","sm","md","lg"],defaultValue:"sm",render:(e,a)=>le(vS,{open:!0,onClose:a,maxWidth:e,title:"maxWidth "+e,actions:le(Yg,{onClick:a,children:"Close"}),children:le(mr,{children:"A ceiling, not a width — a short dialog stays narrow."})})}),fullScreen:()=>le(OB,{values:[!1,!0],defaultValue:!1,label:e=>e?"true":"false",render:(e,a)=>le(vS,{open:!0,onClose:a,fullScreen:e,title:"Edit tokens",actions:le(Yg,{onClick:a,children:"Close"}),children:le(mr,{children:"Full screen is for a dialog carrying a whole task on a small screen."})})}),alert:()=>le(OB,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — role=alertdialog":"false — role=dialog",render:(e,a)=>le(vS,{open:!0,onClose:a,alert:e,title:"Delete project?",actions:se(ce,{children:[le(Yg,{variant:"outline",onClick:a,children:"Cancel"}),le(Yg,{variant:"error",onClick:a,children:"Delete"})]}),children:le(mr,{children:"Every file in it goes too. This cannot be undone."})})}),nonModal:()=>le(OB,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — the page stays usable":"false — modal",render:(e,a)=>le(vS,{open:!0,onClose:a,nonModal:e,title:"Find in page",actions:le(Yg,{onClick:a,children:"Close"}),children:le(mr,{children:e?"The page behind this is still interactive.":"The page behind this is blocked."})})})},Drawer:{open:()=>le(OB,{values:[!0],label:()=>"Open drawer",render:(e,a)=>le(fz,{open:!0,onClose:a,children:se(zy,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(_t,{children:"Filters"}),le(YS,{items:uB,clickable:!0}),le(Yg,{onClick:a,children:"Close"})]})})}),anchor:()=>le(OB,{values:["left","right","top","bottom"],defaultValue:"left",render:(e,a)=>le(fz,{open:!0,onClose:a,anchor:e,children:se(zy,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[se(_t,{children:["anchor=",e]}),le(Yg,{onClick:a,children:"Close"})]})})}),size:()=>le(OB,{values:Hy,defaultValue:"medium",render:(e,a)=>le(fz,{open:!0,onClose:a,size:e,children:se(zy,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)"},children:[se(_t,{children:["size=",e]}),le(Yg,{onClick:a,children:"Close"})]})})}),hideBackdrop:()=>le(OB,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — no scrim":"false — scrim",render:(e,a)=>le(fz,{open:!0,onClose:a,hideBackdrop:e,children:se(zy,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(_t,{children:"Filters"}),le(Yg,{onClick:a,children:"Close"})]})})})},Snackbar:{open:()=>le(OB,{values:[!0],label:()=>"Show snackbar",render:(e,a)=>le(Ek,{open:!0,onClose:a,color:"success",autoHideDuration:4e3,children:"Project saved."})}),color:()=>le(OB,{values:["info","success","warning","error"],defaultValue:"info",render:(e,a)=>se(Ek,{open:!0,onClose:a,color:e,autoHideDuration:4e3,children:[e," — something happened."]})}),anchor:()=>le(OB,{values:["bottom","top"],defaultValue:"bottom",render:(e,a)=>se(Ek,{open:!0,onClose:a,anchor:e,color:"info",autoHideDuration:4e3,children:["anchor=",e]})})},Tooltip:{placement:()=>le(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:["bottom","top","left","right"].map(e=>le(Oy,{label:e,emphasis:"bottom"===e,children:le(DC,{title:"placement="+e,placement:e,children:le(Yg,{variant:"outline",size:"small",children:e})})},e))}),arrow:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Oy,{label:"true",emphasis:!0,children:le(DC,{title:"With an arrow",children:le(Yg,{variant:"outline",size:"small",children:"arrow"})})}),le(Oy,{label:"false",children:le(DC,{title:"No arrow",arrow:!1,children:le(Yg,{variant:"outline",size:"small",children:"no arrow"})})})]}),describeChild:()=>se(yy,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Oy,{label:"false — the tooltip is the name",emphasis:!0,children:le(DC,{title:"Delete item",children:le(Yg,{variant:"outline",size:"small",iconOnly:!0,"aria-label":"Delete item",children:"x"})})}),le(Oy,{label:"true — the tooltip describes it",children:le(DC,{title:"Removes it permanently",describeChild:!0,children:le(Yg,{variant:"outline",size:"small",children:"Delete"})})})]})},Popover:{open:()=>le(EB,{})}},{ButtonGroup:{separated:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"true — the default, and what Figma draws"}),le(QB,{})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"false — joins them, and warns"}),le(QB,{separated:!1})]}),le(mr,{color:"quiet",children:"A joined row of actions looks like a control with nothing selected. If the segments are a choice rather than three things to do, that is ToggleButtonGroup."})]}),fit:()=>se(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:VB},children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"hug — each button sizes to its label"}),le("div",{style:{width:VB,border:"1px dashed var(--Border-Variant)",padding:4},children:le(QB,{labels:["S","Medium","Extra large"]})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"fill — the group fills, buttons share it equally"}),le("div",{style:{width:VB,border:"1px dashed var(--Border-Variant)",padding:4},children:le(QB,{labels:["S","Medium","Extra large"],fit:"fill"})})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"equal — hugs, but every button matches the widest (code only)"}),le("div",{style:{width:VB,border:"1px dashed var(--Border-Variant)",padding:4},children:le(QB,{labels:["S","Medium","Extra large"],fit:"equal"})})]})]}),orientation:()=>se(yy,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Oy,{label:"horizontal",emphasis:!0,children:le(QB,{})}),le(Oy,{label:"vertical",children:le(QB,{orientation:"vertical"})})]}),size:()=>le(zy,{gap:"var(--Sizing-3)",children:Hy.map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"medium"===e?"standard":"quiet",children:e}),le(QB,{size:e})]},e))}),variant:()=>se(zy,{gap:"var(--Sizing-3)",children:[["default","primary","secondary"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"default"===e?"standard":"quiet",children:`<Button variant="${e}">`}),le(QB,{variant:e})]},e)),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"outline, for a row of secondary actions"}),le(QB,{variant:"default-outline"})]})]}),disabled:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"enabled"}),le(QB,{})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"disabled — the whole group"}),le(QB,{disabled:!0})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"a single button takes its own `disabled`"}),se(oy,{"aria-label":"Actions",children:[le(Yg,{onClick:()=>{},children:"Save"}),le(Yg,{disabled:!0,onClick:()=>{},children:"Cancel"}),le(Yg,{onClick:()=>{},children:"Delete"})]})]})]}),"aria-label":()=>se(zy,{gap:"var(--Sizing-2)",children:[le(jB,{}),le(mr,{color:"quiet",children:'The group needs a name, and so does each icon-only button — naming the ACTION, not the glyph: "Align left", not "left".'})]})}},{ToggleButtonGroup:{allowEmpty:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — a toggle group. The last one stays on."}),le(GB,{allowEmpty:!1})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — clearable, with toggle styling"}),le(GB,{allowEmpty:!0})]}),le(mr,{color:"quiet",children:"The refused click fires no onChange — an unchanged array would make a controlled caller re-render for nothing and read as a bug in their own reducer."})]}),multiple:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — one answer, and it cannot be cleared"}),le(qB,{})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — any number, never none"}),le(GB,{allowEmpty:!1})]})]}),separated:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"false — joined (Figma: Style=Default)"}),le(qB,{})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"true — separated (Figma: Style=Separated)"}),le(qB,{separated:!0})]})]}),variant:()=>le(zy,{gap:"var(--Sizing-3)",children:["outlined","light","ghost"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"outlined"===e?"standard":"quiet",children:e}),le(qB,{variant:e,color:"primary"})]},e))}),color:()=>le(zy,{gap:"var(--Sizing-2)",children:["default",...Py].map(e=>se(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le("div",{style:{width:84},children:le(zr,{color:"default"===e?"standard":"quiet",children:e})}),le(qB,{color:e})]},e))}),size:()=>le(zy,{gap:"var(--Sizing-3)",children:Hy.map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"medium"===e?"standard":"quiet",children:e}),le(qB,{size:e})]},e))}),fit:()=>le(zy,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:VB},children:["hug","fill","equal"].map(e=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"hug"===e?"standard":"quiet",children:e}),le("div",{style:{width:VB,border:"1px dashed var(--Border-Variant)",padding:4},children:le(qB,{options:["S","Medium","Extra large"],initial:"S",fit:e})})]},e))}),orientation:()=>se(yy,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Oy,{label:"horizontal",emphasis:!0,children:le(qB,{})}),le(Oy,{label:"vertical",children:le(qB,{orientation:"vertical"})})]}),"value / defaultValue":()=>se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"each child needs a `value`; the group matches against it"}),le(qB,{})]}),onChange:()=>se(zy,{gap:"var(--Sizing-2)",children:[le(qB,{}),le(mr,{color:"quiet",children:"Called (value, event) — the system`s order. A caller signalling MUI`s older API, with `exclusive` or a color in `variant`, still gets (event, value)."})]}),disabled:()=>se(zy,{gap:"var(--Sizing-3)",children:[se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"standard",children:"enabled"}),le(qB,{})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"disabled — the whole group"}),le(qB,{disabled:!0})]}),se(zy,{gap:"var(--Sizing-Half)",children:[le(zr,{color:"quiet",children:"one choice unavailable"}),le(UB,{})]})]})}}].reduce(function(e,a){for(const[t,r]of Object.entries(a))e[t]={...e[t]||{},...r};return e},ZB);const KB={Fab:{title:"Changing a FAB’s color",after:"color",node:"Theme-Container",collection:"Theme",body:"The FAB’s fill is pinned to Buttons/Default/Button, so the Buttons mode is not the axis — setting it on the frame does nothing. Color comes from the Theme mode on an inner frame called Theme-Container, which changes what Buttons/Default/* resolves to. Select Theme-Container, not the instance.",shot:"The right-hand panel with Theme-Container selected, cropped to the Theme dropdown open on its nine modes.",caveat:"Theme has nine modes and the `color` prop has ten: black-white exists in code only, so a FAB built in Figma cannot be that color."},Button:{title:"Changing a Button’s color",after:"variantColor",node:"Theme-Button-Fill",collection:"Buttons",body:"Fill and border are bound to Buttons::Button and Buttons::Border, so the color is the Buttons mode — all ten of them, and the names match the `variant` values exactly. Set it on Button-Container, not on Theme-Button-Fill.",shot:"The right-hand panel with Button-Container selected, cropped to the Buttons dropdown open on its ten modes.",caveat:"Theme-Button-Fill is a SIBLING of Button-Contents, not its parent, so a mode set there reaches the fill and border and never reaches the label — Buttons::Text resolves from the ancestor instead, and the button changes color while its text does not. Setting the mode on Button-Container, which is above both, is the working route until the layer is reparented."}},_B=e=>KB[e]||null,eM=/\.(mp4|mov|webm)$/i;function aM({src:e,title:a,shows:t,aspect:r="4 / 3",maxWidth:i=560}){const n={width:"100%",maxWidth:i,display:"block",borderRadius:"var(--Card-Radius, var(--Style-Border-Radius))",border:"1px solid var(--Border-Variant)"};return e&&eM.test(e)?le(h,{component:"video",src:e,controls:!0,preload:"metadata",playsInline:!0,sx:n}):le(h,e?{component:"img",src:e,alt:a||"",loading:"lazy",sx:n}:{"data-surface":"Container",sx:{width:"100%",maxWidth:i,aspectRatio:r,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--Background)",color:"var(--Text)",borderRadius:"var(--Card-Radius, var(--Style-Border-Radius))",border:"2px dashed var(--Border-Variant)",p:3,textAlign:"center"},children:se(zy,{gap:"var(--Sizing-1)",style:{alignItems:"center",maxWidth:440},children:[le(Ar,{children:"Screenshot to capture"}),le(dr,{children:a}),t&&le(zr,{color:"quiet",children:t})]})})}const tM="https://omni-design.netlify.app";function rM(e){return e.trim().replace(/\s+/g,"-")}function iM(e,a,t=tM){return`${t.replace(/\/+$/,"")}/docs/${encodeURIComponent(e)}/${rM(a)}`}function nM(e,a=tM){return`${a.replace(/\/+$/,"")}/docs/${encodeURIComponent(e)}`}const oM="https://github.com/lwnoble/DinoDesign/issues/new";function lM(e){const a=rM(String(e||"")).toLowerCase();return mg.find(e=>rM(e.name).toLowerCase()===a)||null}const cM=({component:e,what:a})=>le(h,{sx:{p:3},children:se(mr,{color:"quiet",children:["No ",a," written for ",e," yet."]})}),sM=({title:e,children:a})=>se(h,{sx:{pt:3,mt:3,borderTop:"1px solid var(--Border-Variant)","&:first-of-type":{borderTop:"none",pt:0,mt:0}},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:e.toUpperCase()}),a]}),dM=({items:e})=>le(m,{spacing:0,children:e.map((e,a)=>se(h,{sx:{py:.75},children:[le(dr,{children:e.head}),e.sub?le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:e.sub}):null]},a))}),uM=["variant","style","shape","type","contentType","size","color","variantColor","selected","checked","open","loading","disabled","elevated","label","children","icon","iconOnly","letterNumber","avatar","startDecorator","endDecorator","fullWidth","fit","orientation","placement"],hM=e=>e.sample||e.name,mM=e=>{const a=uM.indexOf(hM(e));return-1===a?uM.length:a},pM=e=>e.map((e,a)=>({pr:e,i:a})).sort((e,a)=>mM(e.pr)-mM(a.pr)||e.i-a.i).map(({pr:e})=>e);function fM({component:e,theme:a=null,surface:t="Surface"}){const r=lM(e);if(!r)return le(cM,{component:e,what:"reference"});const i=JB(r.name)?YB[r.name]:null,n=_B(r.name);return le(h,{sx:{p:3},children:se(m,{spacing:3,children:[i?le(uv,{theme:a,surface:t,minHeight:120,children:le(h,{sx:{width:"100%",p:3,display:"flex",justifyContent:"center"},children:le(h,{sx:{width:"100%",maxWidth:420,textAlign:"center"},children:i({theme:a,surface:t})})})}):null,le(mr,{children:r.summary}),r.links&&r.links.length?le(h,{sx:{display:"flex",gap:"var(--Sizing-3)",flexWrap:"wrap"},children:r.links.map((e,a)=>le(ti,{href:e.href,target:"_blank",rel:"noopener noreferrer",children:e.label},a))}):null,r.insteadUse.length>0&&le(sM,{title:"Reach for something else when",children:le(dM,{items:r.insteadUse.map(e=>({head:e.when,sub:`Use ${e.use}`}))})}),r.props.length>0&&le(sM,{title:"Props",children:le(m,{spacing:0,children:pM(r.props).map((e,i)=>{const o=hM(e),l=function(e,a){return Boolean($B[e]&&$B[e][a])}(r.name,o)?$B[r.name][o]:null,c=n&&n.after===o?n:null,s=[e.values&&e.values.length?e.values.join(" | "):null,e.default?`default: ${e.default}`:null,e.note].filter(Boolean).join(" · ");return se(h,{sx:{py:1},children:[se(dr,{children:[e.label||e.name," — ",e.type]}),s?le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:s}):null,l?le(h,{sx:{mt:1.5},children:le(uv,{theme:a,surface:t,minHeight:0,children:le(h,{sx:{p:2},children:l({theme:a,surface:t})})})}):null,c?le(h,{sx:{mt:2},children:se(m,{spacing:1.5,children:[le(Ar,{children:c.title}),le(dr,{children:c.body}),le(aM,{title:c.shot}),c.caveat?le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:c.caveat}):null]})}):null]},i)})})}),r.states.length>0&&le(sM,{title:"States",children:le(dM,{items:r.states.map(e=>({head:e.state,sub:[`set by ${e.setBy}`,e.note].filter(Boolean).join(" · ")}))})}),r.theming.length>0&&se(sM,{title:"Theming",children:[le(dM,{items:r.theming.map(e=>({head:e.collection,sub:`In code: ${e.inCode}\nIn Figma: ${e.inFigma}`}))}),(r.themingNotes||[]).map((e,a)=>le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:e},a))]}),r.tokens.length>0&&le(sM,{title:"Tokens",children:le(dM,{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&&le(sM,{title:"Composition",children:le(dM,{items:r.composition.map(e=>({head:e}))})}),r.gotchas.length>0&&le(sM,{title:"Gotchas",children:le(dM,{items:r.gotchas.map(e=>({head:e}))})})]})})}function gM({component:e}){const a=lM(e),t=a&&a.changes||[],r=encodeURIComponent(`[${e}] `);return le(h,{sx:{p:3},children:se(m,{spacing:3,children:[0===t.length?se(mr,{color:"quiet",children:["No breaking changes recorded for ",e,". Only changes that break, or that silently change meaning, are listed here — not every fix."]}):le(m,{spacing:0,children:t.map((e,a)=>se(h,{sx:{py:1},children:[se(m,{direction:"row",spacing:1,useFlexGap:!0,sx:{alignItems:"center",flexWrap:"wrap"},children:[le(dr,{style:{fontWeight:700},children:e.version}),e.silent?le(zr,{style:{color:"var(--Text-Warning)",fontWeight:600},children:"SILENT — old code still renders"}):null]}),le(mr,{children:e.change}),e.migrate?se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Instead: ",e.migrate]}):null]},a))}),se(h,{children:[le(ar,{children:"Something wrong or missing?"}),le(dr,{color:"quiet",children:"Report it against this component and it arrives with the name already filled in."}),le(h,{sx:{mt:1},children:se(ti,{href:`${oM}?title=${r}`,target:"_blank",rel:"noreferrer",children:["Report an issue with ",e]})})]})]})})}const bM="Qv2dqF7mYoAGY77EkdrwTv",vM="Omni-Designs-Aug12",xM={Typography:"2892:1220",Accordion:"3156:824",Alert:"8832:27566",AppBar:"7446:33121",Avatar:"3156:2682",Badge:"3156:4764",Box:"3156:5155",Breadcrumbs:"3156:5265",Button:"3492:3526",ButtonGroup:"9350:37170",ToggleButtonGroup:"6583:12058",Card:"7442:31014",Checkbox:"6729:509",Chip:"8927:14974",CodeBlock:"9150:18202",Dialog:"8122:6767",Divider:"6847:26729",Drawer:"6896:32544",Fab:"6778:14825",Icon:"5669:4784",IconBadge:"9189:26750",Input:"8574:17760",Link:"3156:5445",List:"6875:28869",Loader:"5859:1529",Menu:"9112:17981",Modal:"8117:6603",NumberField:"6850:28494",Pagination:"8379:6689",Radio:"6778:13564",Rail:"8224:2635",Ratio:"6241:11973",Rating:"6780:12084",SearchField:"8574:17760",Select:"8493:14435",Sheet:"8326:2799",Slider:"6791:13099",Snackbar:"8836:28082",Stepper:"8379:13798",SwitchInput:"3503:3820",Table:"8379:11736",Tabs:"8212:9163",Tag:"7442:32013",TextField:"8574:17760",Toolbar:"7446:33121",Tooltip:"8829:25532",TreeView:"6896:32593",BottomNavigation:"7446:33043"};function yM({title:e,component:a}){const t=a?function(e){const a=xM[e];return a?`https://www.figma.com/design/${bM}/${vM}?node-id=${a.replace(":","-")}`:null}(a):null;return se(h,{sx:{display:"flex",alignItems:"baseline",gap:2,flexWrap:"nowrap"},children:[le(h,{sx:{flex:"0 1 auto",minWidth:0},children:le(_t,{children:e})}),t&&se(ti,{href:t,target:"_blank",rel:"noopener noreferrer",sx:{ml:"auto",display:"inline-flex",alignItems:"center",gap:.75,flexShrink:0,whiteSpace:"nowrap"},children:[le(wf,{name:"figma"}),"Open in Figma"]})]})}const zM=[{title:"Platforms, not breakpoints",lede:"There are no media queries in this system. Not one.",body:["Responsive behaviour comes from a `data-device` 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-device="Desktop"]`',"desktop, and the default"],['`[data-device="IOS-Mobile"]`',"iPhone"],['`[data-device="IOS-Tablet"]`',"iPad, both orientations"],['`[data-device="Android-Tablet"]`',"Android tablet, both orientations"],['`[data-device="Android-Mobile"]`',"Android phone"]]},body2:[],trap:"The attribute was `data-platform` until the device modes were split; a system generated before that still selects on the old name, so the library sets BOTH until every system in Storage has been regenerated. 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:"Sizing",lede:"One scale, in 8px steps with two fractions below it. The tokens are --Sizing-*.",body:["There are NEGATIVES, four of them, mirroring the fractions and the first step. They exist for pulling something back over its neighbour — an overlap, a bevel's inward spread, cancelling a gap a parent already added. A negative margin written as a literal is the thing that stops tracking the scale when a brand changes it.","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-2-and-Half`","20","between 2 and 3 where 8px is too coarse"],["`--Sizing-3`","24","**the minimum touch target** (WCAG 2.5.8)"],["`--Sizing-4` … `--Sizing-16`","32 … 128","section and layout spacing"],["`--Sizing-20` · `--Sizing-30`","160 · 240","the large end — panel and column widths"],["`--Sizing-Negative-Quarter`","-2","pulling a hairline back over its neighbour"],["`--Sizing-Negative-Half`","-4","overlap, and a bevel's inward spread"],["`--Sizing-Negative-1`","-8","cancelling one step of gap"],["`--Sizing-Negative-1-and-Half`","-12","cancelling a row's internal gap"]]},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:"Component size",lede:"A third axis: small, medium and large, scaling a component's own internals.",body:["This is NOT the platform and NOT the spacing scale. The platform decides what a device needs — a 44px iOS target against a 48px Android one. The sizing scale is fixed pixels for gaps and padding. Component size is the `size` prop: the same component, asked to be bigger or smaller, with every internal measurement moving together.",'Figma holds it as the Component-Size collection, 154 variables across three modes. One `size="small"` moves the height, the radius, the icon, the gap, the padding, the focus ring and the type at once — which is why a component should take the prop rather than have its parts set individually.',"The three modes are not a simple multiplier. `Button-Padding` is 8 at small AND medium and 16 at large; `Checkbox-Gap` is 4 / 8 / 12; `Tooltip-Radius` is 8 at every size. Each value was chosen, so reading one off and scaling it produces numbers the system does not contain."],table:{head:["Variable","small","medium","large"],rows:[["`Button-Height`","24","32","56"],["`Button-Icon-Only`","16","24","40"],["`Input-Height`","32","40","48"],["`Checkbox-Width`","16","20","24"],["`Radio` · `Dot`","16 · 8","20 · 10","24 · 12"],["`Switch-Width` · `Height`","35 · 20","42 · 24","56 · 32"],["`Switch-Handle` · `Icon`","15 · 12","20 · 16","28 · 24"],["`FAB-Width` · `Icon`","32 · 16","48 · 24","56 · 32"],["`Card-Radius` · `Padding`","14 · 12","18 · 16","23 · 20"],["`Menu-Swatch`","16","24","32"]]},trap:"Do not set a component's parts to hit a size. Passing `size` moves all of them together and keeps the focus ring, the touch target and the type in step; setting a height by hand moves one and silently breaks the other three."},{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 colored 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 colors 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:"Theming a component",lede:"A theme is a variable mode on ONE layer, and that layer is named `Theme-*`.",body:["It is not a property of the component. A card themed Secondary has a `Theme-Container` frame inside it holding the Secondary mode, and everything under that frame inherits. Changing the card means changing the mode on that frame — not on the card, and not on the layers inside it.","When a component has no `Theme-*` child, the mode belongs on the instance itself. Those are the only two places it is allowed. A mode anywhere else stops that layer following the theme, which is invisible until the day the theme changes and one layer does not move.","Theme and Surface are separate axes. Theme picks the palette; Surface picks the level within it — so a Primary card and a Primary card at `Surface-Dimmest` are the same palette at two tones. Buttons and Icons are their own collections, with one mode per palette, and they are meant to move WITH the theme rather than be set separately.","Never set a mode on a main component. It edits the library: every instance that has not overridden it moves, in every file that has the component, and nobody whose file changed will know why. Place an instance and theme that."],table:{head:["Where the mode goes","When"],rows:[["the outermost `Theme-*` frame","whenever the component has one"],["the selected instance","only when it has no `Theme-*` child"],["a `Theme-Button` frame","buttons — it carries the Buttons palette and nothing else"],["anywhere else","**never** — it is drift, and it will go stale silently"]]},trap:"Setting the mode on the instance when a `Theme-*` child exists appears to do nothing: the child keeps its own value and wins. Both are now set, they drift apart, and the component looks correct until somebody re-themes it. The Omni Design plugin and the Omni Theme widget find the right layer for you, move Buttons and Icons with it, and name any mode sitting where it should not be."},{title:"Static colors",lede:"The raw tone ramp. For graphics and SVGs — never for a background or a component.",body:["Every palette publishes twelve numbered tones, `--Primary-Color-1` through `--Primary-Color-12`, nine palettes deep. They are STATIC: a tone is the same color whatever surface it sits on and whichever mode is active. That is what makes them useful for illustration, and what makes them wrong for anything else.","A background, a border or a component color must follow the cascade — `--Background`, `--Text`, `--Border`, `--Buttons-*` all resolve differently per surface and per mode, and they carry contrast guarantees that were measured. A numbered tone carries none: it is a color, not a role, and nothing checks what sits on it.","Reach for them when you are drawing — an SVG illustration, a chart series, a decorative shape — where there is no text to contrast against and no surface to follow. Everywhere else, name the role."],trap:"This is not theoretical. The Footer painted `background: var(--Primary-Color-2)` with the Copyright strip on `--Primary-Color-1`, a pair chosen to look one step apart. It worked, which is why it survived — and it left --Quiet, --Border, --Hotlink and every button override resolving against the PARENT surface while the box was painted from somewhere else. Both now declare a theme and a surface, which is what makes the rest of the set follow."},{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 color. 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 SM(){const e=["# Foundations",""];for(const a of zM)e.push(`## ${a.title}`,"",`*${a.lede}*`,""),e.push(...a.body.map(e=>e+"\n")),a.table&&(e.push(`| ${a.table.head.join(" | ")} |`),e.push(`| ${a.table.head.map(()=>"---").join(" | ")} |`),e.push(...a.table.rows.map(e=>`| ${e.join(" | ")} |`)),e.push("")),a.trap&&e.push(`> **Trap.** ${a.trap}`,"");return e.join("\n").replace(/\n{3,}/g,"\n\n").trimEnd()+"\n"}const wM={"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 kM(){const e=({color:e})=>se(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(V,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",mb:.5,wordBreak:"break-word"},children:e.name}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",fontSize:"10px",fontFamily:"monospace",wordBreak:"break-all"},children:e.var})]});return se(m,{spacing:6,children:[se(h,{children:[le(V,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Brand Colors (Static)"}),le(m,{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(a=>le(e,{color:a},a.var))})]}),se(h,{children:[le(V,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Background Colors (Dynamic)"}),le(V,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"Update based on selected Background variant and Mode"}),le(y,{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(y,{item:!0,sx:{display:"flex",justifyContent:"center"},children:se(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(V,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",wordBreak:"break-word"},children:e.name})]})},e.name))})]}),se(h,{children:[le(V,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Dynamic Colors (Update with Mode, Background & Surface)"}),le(_,{severity:"info",sx:{backgroundColor:"var(--Container-Low)",mb:3,border:"1px solid var(--Border)"},children:se(V,{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(V,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"These colors automatically adapt based on:"}),se(m,{spacing:1,sx:{mb:4},children:[se(h,{sx:{display:"flex",gap:2},children:[le(V,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Mode:"}),le(V,{variant:"body2",children:"Light or Dark theme"})]}),se(h,{sx:{display:"flex",gap:2},children:[le(V,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Background:"}),le(V,{variant:"body2",children:"Default, Primary, Secondary, Tertiary, Neutral, or Neutral-Variant"})]}),se(h,{sx:{display:"flex",gap:2},children:[le(V,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Surface:"}),le(V,{variant:"body2",children:"Theme surface layer selection"})]})]}),le(m,{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(a=>se(h,{children:[le(V,{variant:"h6",sx:{mb:2,fontWeight:600},children:a.name}),le(y,{container:!0,spacing:2,sx:{justifyContent:"center"},children:a.colors.map(a=>le(y,{item:!0,sx:{display:"flex",justifyContent:"center"},children:le(e,{color:a})},a.var))})]},a.name))})]}),se(h,{sx:{pt:4,borderTop:"1px solid var(--Border)"},children:[le(V,{variant:"h5",sx:{mb:2,fontWeight:700},children:"How to Use"}),se(m,{spacing:2,children:[se(h,{children:[le(V,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Static Colors"}),se(V,{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."]})]}),se(h,{children:[le(V,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Dynamic Colors"}),le(V,{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."})]}),se(h,{children:[le(V,{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 CM(){const e=({name:e,varName:a,baseValue:t})=>le(h,{sx:{mb:2},children:se(h,{sx:{display:"flex",alignItems:"center",gap:2,mb:1},children:[le(h,{"aria-hidden":"true",sx:{width:`var(${a})`,minWidth:20,height:24,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:.5,border:"1px solid var(--Border)"}}),se(m,{spacing:.5,children:[le(V,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:a}),se(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Base: ",t," (with cognitive multiplier)"]})]})]})}),a=({name:e,varName:a,value:t})=>se(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(V,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:a}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:t})]});return se(m,{spacing:3,sx:{p:2},children:[se("section",{children:[le(V,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Spacing Scale"}),le(V,{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(m,{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(a=>le(e,{name:a.name,varName:a.var,baseValue:a.baseValue},a.var))})]}),se("section",{children:[le(V,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Sizing Scale"}),le(V,{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(y,{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(y,{item:!0,xs:12,sm:6,md:4,lg:3,children:le(a,{name:e.name,varName:e.var,value:e.value})},e.var))})]}),se("section",{children:[le(V,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Negative Sizing"}),le(V,{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(y,{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(y,{item:!0,xs:12,sm:6,md:4,lg:3,children:se(h,{children:[le(V,{variant:"subtitle2",sx:{fontWeight:600},children:e.name}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:e.var}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:e.value})]})},e.var))})]}),se("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(V,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Container Padding"}),se(h,{sx:{p:"var(--Spacing-3)",backgroundColor:"var(--Container-Low)",border:"2px dashed var(--Buttons-Primary-Button)",borderRadius:1},children:[se(V,{variant:"body2",children:["Default container padding: ",le("strong",{children:"var(--Spacing-3)"})," = 24px"]}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",mt:1},children:"Use this variable for consistent padding around main content areas."})]})]}),se("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(V,{variant:"h5",component:"h2",sx:{mb:3,fontWeight:700},children:"Practical Examples"}),se("article",{children:[le(V,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Padding Examples"}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",mb:2,display:"block"},children:"Different padding values create different visual breathing room."}),le(y,{container:!0,spacing:2,sx:{mb:4},children:["var(--Spacing-1)","var(--Spacing-2)","var(--Spacing-3)","var(--Spacing-4)"].map(e=>le(y,{item:!0,xs:12,sm:6,children:se(h,{sx:{p:e,backgroundColor:"var(--Container)",border:"1px solid var(--Border)",borderRadius:1},children:[se(V,{variant:"subtitle2",children:["Padding: ",e]}),le(V,{variant:"caption",sx:{display:"block",mt:1,color:"var(--Text-Secondary)"},children:"Content with spacing applied"})]})},e))})]}),se("article",{children:[le(V,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Gap Examples"}),le(V,{variant:"caption",sx:{color:"var(--Text-Secondary)",mb:2,display:"block"},children:"Gap controls spacing between flex/grid children without adding extra elements."}),le(m,{spacing:3,children:["var(--Spacing-1)","var(--Spacing-2)","var(--Spacing-3)"].map(e=>se(h,{children:[le(m,{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))}),se(V,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Gap: ",e]})]},e))})]})]}),se(h,{role:"note",sx:{p:2,backgroundColor:"var(--Container-Low)",borderRadius:1,borderLeft:"4px solid var(--Buttons-Primary-Button)",mt:3},children:[le(V,{variant:"subtitle2",sx:{fontWeight:600,mb:1},children:"✓ Accessibility Best Practices Used"}),se("ul",{style:{margin:"0.5rem 0",paddingLeft:"1.5rem"},children:[le("li",{children:se(V,{variant:"caption",children:[le("strong",{children:'aria-hidden="true"'})," on purely decorative visual elements"]})}),le("li",{children:le(V,{variant:"caption",children:"All spacing information conveyed through text labels and values"})}),le("li",{children:se(V,{variant:"caption",children:["No empty decorative ",le("code",{children:"<div>"})," elements in DOM"]})}),le("li",{children:se(V,{variant:"caption",children:["Semantic HTML: ",le("code",{children:"<section>"})," and ",le("code",{children:"<article>"})," for structure"]})}),le("li",{children:le(V,{variant:"caption",children:"CSS-based spacing (padding/margin) for actual layout, not decorative divs"})}),le("li",{children:le(V,{variant:"caption",children:"Full keyboard navigation and screen reader support"})})]})]})]})}function BM({color:e,className:a="",sx:t={},...r}){return le(h,{className:`mini-swatch ${a}`.trim(),"aria-hidden":"true",sx:{width:"var(--Menu-Swatch, 24px)",height:"var(--Menu-Swatch, 24px)",flexShrink:0,borderRadius:"var(--Sizing-Half, 4px)",backgroundColor:e,...t},...r})}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,a])=>({label:e,options:a.map(e=>({value:e,label:wM[e]}))}));const MM=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",TM=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary"]},{label:"State",colors:["info","success","warning","error"]}],AM=[Te,ct,we,Ne,st,dt];function LM(){const[e,t]=a("Default"),[r,i]=a("Surface"),[n,o]=a("primary"),[l,c]=a("solid"),[s,d]=a("medium"),u=AM[0];return se(zy,{spacing:4,style:{paddingBottom:64},children:[le(yM,{title:"Icon Badge",component:"IconBadge"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:t,surface:r,onSurfaceChange:i})}),se("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24},children:[le(zv,{padding:"medium",children:se(zy,{spacing:4,alignItems:"center",children:[le("div",{style:{padding:40},children:le(QS,{color:n,variant:l,size:s,children:le(u,{})})}),le(yy,{spacing:4,alignItems:"flex-end",children:["small","medium","large"].map(e=>se(zy,{spacing:1,alignItems:"center",children:[le(QS,{color:n,variant:l,size:e,children:le(u,{})}),le(dr,{style:{color:"var(--Quiet)"},children:MM(e)})]},e))}),se(zy,{spacing:1,alignItems:"center",children:[le(dr,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"Variants"}),le(yy,{spacing:3,children:["solid","light","dark"].map(e=>se(zy,{spacing:1,alignItems:"center",children:[le(QS,{color:n,variant:e,size:"medium",children:le(u,{})}),le(dr,{style:{color:"var(--Quiet)",fontSize:"0.65rem"},children:MM(e)})]},e))})]}),se(zy,{spacing:1,alignItems:"center",children:[le(dr,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"All Colors"}),le(yy,{spacing:2,style:{flexWrap:"wrap",justifyContent:"center"},children:TM.flatMap(e=>e.colors).map(e=>se(zy,{spacing:0,alignItems:"center",children:[le(QS,{color:e,variant:l,size:"small",children:le(u,{})}),le(dr,{style:{color:"var(--Quiet)",fontSize:"0.55rem"},children:MM(e)})]},e))})]})]})}),le(zv,{padding:"medium",children:se(zy,{spacing:4,children:[le(_t,{style:{fontSize:"1rem"},children:"Playground"}),se(zy,{spacing:2,children:[le(Cr,{children:"Color"}),TM.map(e=>se(zy,{spacing:1,children:[le(dr,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:e.label}),le(yy,{spacing:1,children:e.colors.map(e=>le(Yg,{variant:n===e?"default":"outline",size:"small",onClick:()=>o(e),children:MM(e)},e))})]},e.label))]}),se(zy,{spacing:1,children:[le(Cr,{children:"Variant"}),le(oy,{size:"small",children:["solid","light","dark"].map(e=>le(Yg,{variant:l===e?"default":"outline",size:"small",onClick:()=>c(e),children:MM(e)},e))})]}),se(zy,{spacing:1,children:[le(Cr,{children:"Size"}),le(oy,{size:"small",children:["small","medium","large"].map(e=>le(Yg,{variant:s===e?"default":"outline",size:"small",onClick:()=>d(e),children:MM(e)},e))})]}),se(zy,{spacing:0,children:[se(dr,{style:{color:"var(--Quiet)"},children:["data-theme: ",MM(n),"light"===l?"-Light":""]}),se(dr,{style:{color:"var(--Quiet)"},children:["data-surface: ","dark"===l?"Surface-Dimmest":"Surface"]}),le(dr,{style:{color:"var(--Quiet)"},children:"bg: var(--Background)"}),le(dr,{style:{color:"var(--Quiet)"},children:"icon: var(--Text)"})]})]})})]})]})}const IM={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 NM({value:e,defaultValue:n=0,onChange:o,min:l,max:c,step:s=1,variant:d="outlined",style:u="outline",color:m="default",size:p="medium",label:f,labelPosition:g="top",placeholder:b,helperText:v,disabled:x=!1,fullWidth:y=!1,className:z="",sx:S={},...w}){const[k,C]=a(n),[B,M]=a(!1),T=r(null),A=void 0!==e,L=A?e:k,I=""!==L&&null!=L,N=(W="default"===m?"primary":m).charAt(0).toUpperCase()+W.slice(1);var W;"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 D="default"===m?"var(--Border)":"var(--Buttons-"+N+"-Border)",R="default"===m?"var(--Text)":"var(--Text-"+N+")",F="outlined"===d,P="floating"===g,H="top"===g,O=IM[p]||IM.medium,E="small"===p?dr:mr,V=i(e=>{let a="number"==typeof e?e:parseFloat(e);isNaN(a)&&(a=0),void 0!==l&&a<l&&(a=l),void 0!==c&&a>c&&(a=c),A||C(a),o?.(a)},[A,o,l,c]),Q=r(L);Q.current=L;const j=i(e=>{if(x)return;const a="number"==typeof Q.current?Q.current:parseFloat(Q.current)||0;void 0!==l&&e<0&&a<=l||void 0!==c&&e>0&&a>=c||V(a+e*s)},[x,s,l,c,V]),q=void 0!==l&&L<=l,G=void 0!==c&&L>=c,U=r(null),X=r(null),Y=i(()=>{U.current&&(clearTimeout(U.current),U.current=null),X.current&&(clearInterval(X.current),X.current=null)},[]),J=i(e=>{x||(Y(),j(e),U.current=setTimeout(()=>{let a=120,t=0;const r=()=>{j(e),t+=1,10===t&&a>60?(clearInterval(X.current),a=60,X.current=setInterval(r,a)):30===t&&a>30&&(clearInterval(X.current),a=30,X.current=setInterval(r,a))};X.current=setInterval(r,a)},400))},[x,j,Y]);t(()=>Y,[Y]);const Z=r(!1),$=e=>({onPointerDown:a=>{if(void 0===a.button||0===a.button){a.preventDefault();try{a.currentTarget.setPointerCapture?.(a.pointerId)}catch(e){}Z.current=!0,J(e)}},onClick:()=>{Z.current?Z.current=!1:j(e)},onPointerUp:e=>{try{e.currentTarget.releasePointerCapture?.(e.pointerId)}catch(e){}Y()},onPointerCancel:Y,onPointerLeave:Y,onKeyDown:a=>{"Enter"!==a.key&&" "!==a.key||a.repeat||(a.preventDefault(),J(e))},onKeyUp:e=>{"Enter"!==e.key&&" "!==e.key||Y()},onBlur:Y}),K=e=>{const a=e.target.value;if(""===a||"-"===a)return void(A||C(a));const t=parseFloat(a);isNaN(t)||V(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"===m?"var(--Text)":"var(--Text-"+N+")",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"}},ae={},te=()=>H&&f?le(E,{component:"label",style:{display:"block",marginBottom:"6px",color:x?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:x?"var(--Disabled, 0.38)":1},children:f}):null;return se(h,F?{className:"numberfield numberfield-outlined"+(x?" numberfield-disabled":"")+(z?" "+z:""),sx:{width:y?"100%":"auto",fontFamily:"inherit",...S},...w,children:[te(),le(h,{sx:{border:"1px solid "+D,borderRadius:"small"===p?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===p?"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:le(h,{...ae,children:se(h,{sx:{position:"relative",display:"flex",alignItems:"stretch",minHeight:"max("+O.height+", calc(var(--Sizing-3, 24px) * 2 + 1px))",backgroundColor:"var(--Background)"},children:[P&&f&&le(h,{sx:{position:"absolute",top:I||B?"6px":"50%",left:O.padding.split(" ")[1]||"14px",transform:I||B?"none":"translateY(-50%)",transformOrigin:"top left",color:B?R:"var(--Quiet)",fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",...I||B?{fontSize:"var(--"+(vx[p]||vx.medium).shrunk+"-Font-Size)",fontWeight:"var(--"+(vx[p]||vx.medium).shrunk+"-Font-Weight)",letterSpacing:"var(--"+(vx[p]||vx.medium).shrunk+"-Letter-Spacing)"}:{fontSize:"var(--"+(vx[p]||vx.medium).resting+"-Font-Size)",fontWeight:"var(--"+(vx[p]||vx.medium).resting+"-Font-Weight)",letterSpacing:"var(--"+(vx[p]||vx.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:T,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof L?L:void 0,"aria-valuemin":l,"aria-valuemax":c,"aria-label":f||"Number",value:L,onChange:K,onKeyDown:_,onFocus:()=>M(!0),onBlur:()=>M(!1),disabled:x,placeholder:P?void 0:b||"",sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:I||B?R:"var(--Quiet)",fontSize:O.fontSize,fontFamily:"var(--Body-Font-Family)",fontWeight:"var(--Body-Font-Weight)",padding:P?"22px 14px 6px":O.padding,minWidth:0,"&::placeholder":{color:"var(--Quiet)",opacity:1},"&:disabled":{cursor:"not-allowed"}}}),se(h,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"stretch",borderLeft:"1px solid "+D,flexShrink:0},children:[le(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:le(Bf,{size:"medium",children:le(ut,{})})}),le(h,{"aria-hidden":"true",sx:{height:"1px",backgroundColor:D,flexShrink:0}}),le(h,{component:"button",type:"button","aria-label":"Decrease",...$(-1),disabled:x||q,sx:{...ee,width:"var(--Sizing-4, 32px)",height:"var(--Sizing-3, 24px)"},children:le(Bf,{size:"medium",children:le(ht,{})})})]})]})})}),v&&le(dr,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:v})]}:{className:"numberfield numberfield-spinner"+(x?" numberfield-disabled":"")+(z?" "+z:""),sx:{fontFamily:"inherit",...S},...w,children:[te(),se(h,{sx:{display:"inline-flex",alignItems:"center",gap:"small"===p?.5:1,opacity:x?"var(--Disabled, 0.38)":1},children:[le(h,{component:"button",type:"button","aria-label":"Decrease",...$(-1),disabled:x||q,sx:{...ee,width:O.btnSize,height:O.btnSize,borderRadius:"small"===p?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"large"===p?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"var(--Button-Icon-Radius, var(--Style-Border-Radius))",border:"1px solid "+D},children:le(Bf,{size:"small",children:le(Be,{})})}),le(h,{sx:{border:"1px solid "+D,borderRadius:"small"===p?"var(--Sm-Input-Radius, var(--Input-Radius, var(--Style-Border-Radius)))":"large"===p?"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,{...ae,children:le(h,{component:"input",ref:T,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof L?L:void 0,"aria-valuemin":l,"aria-valuemax":c,"aria-label":f||"Number",value:L,onChange:K,onKeyDown:_,onFocus:()=>M(!0),onBlur:()=>M(!1),disabled:x,sx:{width:"small"===p?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"}}})})}),le(h,{component:"button",type:"button","aria-label":"Increase",...$(1),disabled:x||G,sx:{...ee,width:O.btnSize,height:O.btnSize,borderRadius:"small"===p?"var(--Sm-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"large"===p?"var(--Lg-Button-Icon-Radius, var(--Button-Icon-Radius, var(--Style-Border-Radius)))":"var(--Button-Icon-Radius, var(--Style-Border-Radius))",border:"1px solid "+D},children:le(Bf,{size:"small",children:le(Aa,{})})})]}),v&&le(dr,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:v})]})}const WM=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",DM=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function RM({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function FM({color:e,selected:a,onClick:t}){const r=WM(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function PM(){const[e,t]=a("outlined"),[r,i]=a("outline"),[n,o]=a("default"),[l,c]=a("medium"),[s,d]=a("top"),[u,p]=a(!0),[f,g]=a(!1),[b,v]=a(!1),[x,z]=a("Default"),[S,w]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Number Field",component:"NumberField"}),le(h,{sx:{mt:1},children:le(Xf,{theme:x,onThemeChange:z,surface:S,onSurfaceChange:w})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"NumberField",theme:x,surface:S})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:x,surface:S,children:le(h,{sx:{width:"100%",maxWidth:"outlined"===e?300:"auto"},children:le(NM,{variant:e,style:r,color:n,size:l,label:u?"Quantity":void 0,labelPosition:s,min:0,max:100,disabled:f,fullWidth:b&&"outlined"===e})})}),le(Yb,{code:(()=>{const a=['variant="'+e+'"'];return"outline"!==r&&a.push('style="'+r+'"'),"default"!==n&&a.push('color="'+n+'"'),"medium"!==l&&a.push('size="'+l+'"'),u&&a.push('label="Quantity"'),"top"!==s&&a.push('labelPosition="'+s+'"'),a.push("min={0}"),a.push("max={100}"),f&&a.push("disabled"),b&&"outlined"===e&&a.push("fullWidth"),a.push("value={value}"),a.push("onChange={setValue}"),"<NumberField\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(m,{direction:"row",spacing:1,children:["outlined","spinner"].map(a=>le(RM,{label:WM(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(e=>le(RM,{label:WM(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:DM.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(FM,{color:e,selected:n===e,onClick:o},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(RM,{label:WM(e),selected:l===e,onClick:()=>c(e)},e))})]}),"outlined"===e&&se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(RM,{label:"none"===e?"None":WM(e),selected:s===e,onClick:()=>d(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Show Label"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Text label above field"})]}),le(sv,{variant:"default-outline",checked:u,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show label"})]}),se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Disabled"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(sv,{variant:"default-outline",checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),"outlined"===e&&se(h,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Full Width"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container"})]}),le(sv,{variant:"default-outline",checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"NumberField"})})]})]})}const HM={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 OM({children:e,selected:a=!1,onChange:t,value:r,sx:i={},...n}){return le(ee,{value:r,selected:a,onChange:t,sx:{border:"1px solid var(--Border)",...HM,...i},...n,children:e})}const EM=["Surface","Surface-Dim","Surface-Bright","Container","Container-Low","Container-Lowest","Container-High"],VM=["Default","Primary","Primary","Secondary","Secondary","Tertiary","Tertiary","Neutral","Neutral","Info","Success","Warning","Error"];function QM({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function jM(){const[e,t]=a(""),[r,i]=a(""),[n,o]=a("Default"),[l,c]=a("Surface");return se(pk,{sx:{pb:8},children:[le(yM,{title:"Box",component:"Box"}),le(pk,{sx:{mt:1},children:le(Xf,{theme:n,onThemeChange:o,surface:l,onSurfaceChange:c})}),se(mr,{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."]}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"When to use"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Box",theme:n,surface:l})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:n,surface:l,children:le(pk,{sx:{width:"100%",maxWidth:400},children:le(pk,{theme:e||void 0,surface:r||void 0,children:se(pk,{sx:{padding:3,backgroundColor:"var(--Background)",color:"var(--Text)",borderRadius:"var(--Style-Border-Radius)",border:"1px dashed var(--Border-Variant)"},children:[le(ar,{children:"Box content"}),le(mr,{style:{color:"var(--Text-Quiet)",marginTop:6},children:"Anything dropped inside resolves tokens against the Box's theme / surface, if you set them."})]})})})}),le(Yb,{code:(()=>{const a=[];e&&a.push('theme="'+e+'"'),r&&a.push('surface="'+r+'"');return"<Box"+(a.length?" "+a.join(" "):"")+">\n {/* anything */}\n</Box>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(pk,{sx:{p:3},children:[le(pk,{sx:{mb:3}}),se(pk,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME (optional)"}),se(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(QM,{label:"None",selected:!e,onClick:()=>t("")}),VM.map(a=>le(QM,{label:a,selected:e===a,onClick:()=>t(a)},a))]})]}),se(pk,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE (optional)"}),se(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(QM,{label:"None",selected:!r,onClick:()=>i("")}),EM.map(e=>le(QM,{label:e,selected:r===e,onClick:()=>i(e)},e))]}),se(zr,{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(yb,{value:2,children:le(pk,{sx:{p:3},children:se(m,{spacing:2,children:[se(pk,{children:[le(dr,{style:{fontWeight:700},children:"Reach for Box when…"}),le(zr,{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."})]}),se(pk,{children:[le(dr,{style:{fontWeight:700},children:"Use Ratio when…"}),le(zr,{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."})]}),se(pk,{children:[le(dr,{style:{fontWeight:700},children:"Use Card when…"}),le(zr,{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."})]})]})})}),le(yb,{value:3,children:le(gM,{component:"Box"})})]})]})}function qM({children:e,maxWidth:a="lg",disableGutters:t=!1,sx:r={},...i}){return le(ae,{maxWidth:a,disableGutters:t,"data-surface":"Surface",sx:{backgroundColor:"var(--Background)",color:"var(--Text)",transition:"all 0.2s ease-in-out",...r},...i,children:e})}function GM({children:e,container:a=!1,item:t=!1,spacing:r=2,sx:i={},...n}){return le(y,{container:a,item:t,spacing:r,sx:{transition:"all 0.2s ease-in-out",...i},...n,children:e})}function UM({theme:e,surface:a="Surface",as:t="section",padding:r,className:i,style:n,children:o,...l}){return le(t,{...e?{"data-theme":e}:{},"data-surface":a,className:i,style:{background:"var(--Background)",color:"var(--Text)",...void 0!==r?{padding:r}:{},...n},...l,children:o})}function XM(){return se("div",{children:[le(_t,{style:{marginBottom:12},children:"Section"}),se(mr,{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(_t,{style:{marginTop:24,marginBottom:12},children:"Theme + surface"}),le(dr,{color:"quiet",style:{marginBottom:16,display:"block"},children:'Sets data-theme="Primary" + data-surface="Surface", paints --Background.'}),se(UM,{theme:"Primary",surface:"Surface",padding:"32px",style:{borderRadius:8},children:[le(yM,{title:"Primary-Light surface",component:"Section"}),le(mr,{children:"Body text picks up --Text automatically."}),le(dr,{color:"quiet",children:"Quiet text picks up --Text-Quiet."}),le("div",{style:{marginTop:12},children:le(Yg,{variant:"primary",children:"Primary button"})})]}),le(_t,{style:{marginTop:32,marginBottom:12},children:"Container surface"}),se(UM,{surface:"Container",padding:"32px",style:{borderRadius:8},children:[le(_t,{children:"Container surface (inherits theme)"}),le(mr,{children:"Useful for card-like regions."})]}),le(_t,{style:{marginTop:32,marginBottom:12},children:"Different element"}),se(dr,{color:"quiet",style:{marginBottom:16,display:"block"},children:["Pass ",le("code",{children:'as="article"'}),", ",le("code",{children:'as="footer"'}),", etc."]}),se(UM,{as:"article",theme:"Neutral",surface:"Surface-Dimmest",padding:"32px",style:{borderRadius:8},children:[le(_t,{children:"Neutral / Surface-Dimmest article"}),le(mr,{children:"Renders as an <article> element."})]})]})}function YM({actions:e=[],variant:n="solid",color:o="default",direction:l="up",speed:c=50,showTooltips:s=!0,open:d,onOpen:u,onClose:m,icon:p,ariaLabel:f="Speed Dial",className:g="",sx:b={},...v}){const[y,z]=a(!1),S=void 0!==d,w=S?d:y,k=r(null),C=n,B=i(()=>{w?(S||z(!1),m?.()):(S||z(!0),u?.())},[w,S,u,m]),M=i((e,a)=>{e.onClick?.(a),S||z(!1),m?.()},[S,m]);t(()=>{if(!w)return;const e=e=>{k.current&&!k.current.contains(e.target)&&(S||z(!1),m?.())};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[w,S,m]),t(()=>{if(!w)return;const e=e=>{"Escape"===e.key&&(S||z(!1),m?.())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[w,S,m]);const T="up"===l||"down"===l,A="up"===l||"down"===l?"left":"top";return se(h,{ref:k,className:"speed-dial speed-dial-"+n+" speed-dial-"+o+" speed-dial-"+l+" "+g,sx:{position:"relative",display:"inline-flex",overflow:"visible",width:T?"56px":"auto",height:T?"auto":"56px",...b},...v,children:[le(ax,{size:"large",variant:C,color:o,onClick:B,"aria-label":f,"aria-expanded":w,"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:w?"rotate(45deg)":"rotate(0deg)"},children:p||le(Aa,{})})}),le(h,{role:"menu",sx:{position:"absolute",inset:0,pointerEvents:"none",overflow:"visible"},children:e.map((e,a)=>{const t=(e=>{const a=56+44*e;switch(l){case"up":default:return{bottom:a+"px",left:"12px"};case"down":return{top:a+"px",left:"12px"};case"left":return{right:a+"px",top:"12px"};case"right":return{left:a+"px",top:"12px"}}})(a),r=a*c,i=le(ax,{size:"small",variant:C,color:o,role:"menuitem","aria-label":e.name||"Action "+(a+1),onClick:()=>M(e,a),sx:{position:"absolute",...t,opacity:w?1:0,transform:w?"scale(1)":"scale(0.3)",transition:"opacity 0.2s ease, transform 0.2s ease",transitionDelay:w?r+"ms":"0ms",pointerEvents:w?"auto":"none"},children:e.icon||le(Aa,{})},e.key||a);return s&&e.name?le(x,{title:e.name,placement:A,arrow:!0,open:!!w&&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||a):i})})]})}const JM=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",ZM=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],$M=[{name:"Edit",icon:le(Bf,{size:"small",sx:{color:"inherit"},children:le(La,{})})},{name:"Share",icon:le(Bf,{size:"small",sx:{color:"inherit"},children:le(mt,{})})},{name:"Delete",icon:le(Bf,{size:"small",sx:{color:"inherit"},children:le(Ae,{})})},{name:"Favorite",icon:le(Bf,{size:"small",sx:{color:"inherit"},children:le(Me,{})})}];function KM({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function _M({color:e,selected:a,onClick:t}){const r=JM(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function eT(){const[e,t]=a("solid"),[r,i]=a("default"),[n,o]=a("up"),[l,c]=a(!0),[s,d]=a("Default"),[u,p]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Speed Dial",component:"SpeedDial"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"SpeedDial",theme:s,surface:u})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,sx:{minHeight:300,alignItems:"flex-end",justifyContent:"center"},children:le(YM,{variant:e,color:r,direction:n,showTooltips:l,actions:$M,ariaLabel:"Quick actions"})}),le(Yb,{code:(()=>{const a=[];return"solid"!==e&&a.push('variant="'+e+'"'),"default"!==r&&a.push('color="'+r+'"'),"up"!==n&&a.push('direction="'+n+'"'),l||a.push("showTooltips={false}"),a.push("actions={actions}"),a.push('ariaLabel="Quick actions"'),"<SpeedDial\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["solid","outline"].map(a=>le(KM,{label:JM(a),selected:e===a,onClick:()=>t(a)},a))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:ZM.map(e=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:e.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:e.colors.map(e=>le(_M,{color:e,selected:r===e,onClick:i},e))})]},e.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:["up","down","left","right"].map(e=>le(KM,{label:JM(e),selected:n===e,onClick:()=>o(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Tooltips"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show labels beside actions"})]}),le(sv,{variant:"default-outline",checked:l,onChange:e=>c(e.target.checked),size:"small","aria-label":"Show tooltips"})]})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"SpeedDial"})})]})]})}const aT={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",black:"BW",white:"BW"};function tT(e,a){return"var(--"+(aT[e]||"Primary")+"-Color-"+a+")"}const rT={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 iT(e,a){const t=rT[e]||rT.primary;return(t[a]||t.linear).map(e=>({...e}))}function nT({variant:e="linear",color:a="primary",angle:t=135,stops:r=null,position:i=null,blobs:n=null,cardProps:o={},minHeight:l=300,children:c,className:s="",sx:d={},...u}){const m="meshCard"===e,p="mesh"===e||m,f="radial"===e,g="linear"===e||f,b=r||iT(a,f?"radial":"linear"),v=n||iT(a,m?"meshCard":"mesh"),x=p?function(e){if(!e||0===e.length)return"none";const a=e.map(e=>{const a=tT(e.family,e.tone),t=e.spread||40;return"radial-gradient(circle at "+e.x+"% "+e.y+"%, "+a+" 0%, transparent "+t+"%)"}),t=tT(e[0].family,e[0].tone);return a.push(t),a.join(", ")}(v):f?function(e,a){if(!e||0===e.length)return"none";const t=[...e].sort((e,a)=>e.position-a.position).map(e=>tT(e.family,e.tone)+" "+e.position+"%"),r=a||{x:50,y:50};return"radial-gradient(circle at "+r.x+"% "+r.y+"%, "+t.join(", ")+")"}(b,i||{x:50,y:50}):function(e,a){return e&&0!==e.length?"linear-gradient("+a+"deg, "+[...e].sort((e,a)=>e.position-a.position).map(e=>tT(e.family,e.tone)+" "+e.position+"%").join(", ")+")":"none"}(b,t),y=g?b[0]:v[0];var z,S;const w=function(e){return"dark"===e?"var(--BW-Color-1)":"var(--BW-Color-6)"}((z=y?.tone||8,"black"===(S=y?.family||"primary")||"white"===S?z<=5?"light":"dark":z<=5?"dark":"light"));return le(h,m?{className:"gradient gradient-mesh-card "+s,sx:{background:x,minHeight:l,borderRadius:"var(--Card-Radius)",display:"flex",alignItems:"center",justifyContent:"center",padding:"var(--Card-Padding)",position:"relative",overflow:"hidden",...d},...u,children:le(zv,{variant:"solid",...o,children:le(Sv,{children:c})})}:{className:"gradient gradient-"+e+" "+s,sx:{background:x,minHeight:l,borderRadius:"var(--Card-Radius)",color:w,display:"flex",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden",...d},...u,children:c})}const oT=e=>le(nT,{variant:"linear",...e}),lT=e=>le(nT,{variant:"radial",...e}),cT=e=>le(nT,{variant:"mesh",...e}),sT=e=>le(nT,{variant:"meshCard",...e});["default","primary","secondary","tertiary","neutral"].map(e=>{return{value:e,label:(a=e,a?a.charAt(0).toUpperCase()+a.slice(1):"")};var a});const dT={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},uT={small:{height:"4px",borderRadius:"2px"},medium:{height:"6px",borderRadius:"3px"},large:{height:"8px",borderRadius:"4px"}};function hT({value:e,color:a="primary",size:t="medium",className:r="",sx:i={},...n}){const o=dT[a]||"Primary",l=uT[t]||uT.medium,c=null!=e,s=c?Math.min(100,Math.max(0,e)):0,d="var(--Buttons-"+o+"-Border)";return le(h,{role:"progressbar","aria-valuenow":c?Math.round(s):void 0,"aria-valuemin":c?0:void 0,"aria-valuemax":c?100:void 0,"aria-label":c?Math.round(s)+"% progress":"Loading",className:"linear-progress linear-progress-"+t+" linear-progress-"+a+(c?" 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,...i},...n,children:le(h,{className:"linear-progress-bar",sx:{position:"absolute",top:0,left:0,height:"100%",borderRadius:"inherit",backgroundColor:d,...c?{width:s+"%",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 mT=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",pT=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function fT({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function gT({color:e,selected:a,onClick:t}){const r=mT(e);return le(h,{component:"button",onClick:()=>t(e),"aria-label":"Select "+r,"aria-pressed":a,title:r,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+r+"-Button)",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&&le(he,{sx:{fontSize:16,color:"var(--Buttons-"+r+"-Text)",pointerEvents:"none"}})})}function bT(){const[e,t]=a("default"),[r,i]=a("medium"),[n,o]=a(!1),[l,c]=a(65),[s,d]=a("Default"),[u,p]=a("Surface");return se(h,{sx:{pb:8},children:[le(yM,{title:"Linear Progress",component:"LinearProgress"}),le(h,{sx:{mt:1},children:le(Xf,{theme:s,onThemeChange:d,surface:u,onSurfaceChange:p})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"LinearProgress",theme:s,surface:u})}),le(yb,{value:1,children:se(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[se(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(uv,{theme:s,surface:u,children:le(h,{sx:{width:"100%",maxWidth:400},children:le(hT,{color:e,size:r,value:n?l:void 0})})}),le(Yb,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==r&&a.push('size="'+r+'"'),n&&a.push("value={"+l+"}"),0===a.length?"<LinearProgress />":"<LinearProgress\n "+a.join("\n ")+"\n/>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:se(h,{sx:{p:3},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:pT.map(a=>se(h,{children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4,fontWeight:600},children:a.label}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:a.colors.map(a=>le(gT,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),se(h,{sx:{mt:3},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(fT,{label:mT(e),selected:r===e,onClick:()=>i(e)},e))})]}),se(h,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[se(h,{children:[le(Cr,{children:"Determinate"}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static bar at a specific value"})]}),le(sv,{variant:"default-outline",checked:n,onChange:e=>o(e.target.checked),size:"small","aria-label":"Determinate"})]}),n&&le(h,{sx:{mt:2},children:le(Nx,{label:"Value",min:0,max:100,value:l,onChange:(e,a)=>c(a),size:"small",valueLabelDisplay:"auto"})})]})})]})}),se(yb,{value:2,children:[le(Jr,{}),le(h,{sx:{p:3},children:le(m,{spacing:3,children:se(h,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(ar,{children:"ARIA and Semantics"}),le(m,{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:a})=>se(h,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[se(dr,{children:[e,":"]}),le(zr,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(yb,{value:3,children:le(gM,{component:"LinearProgress"})})]})]})}const vT={default:{theme:"Neutral",surface:"Surface-Dimmest"},primary:{theme:"Primary",surface:"Surface-Dim"},"primary-dark":{theme:"Primary",surface:"Surface-Dimmest"},white:{bg:"var(--Neutral-Color-11)",fg:"var(--Neutral-Color-3)"},black:{bg:"var(--Neutral-Color-1)",fg:"var(--Neutral-Color-12)"}};function xT({color:e="default",companyName:a="",year:t=(new Date).getFullYear(),rights:r="All rights reserved",children:i,className:n,style:o,...l}){const c=i??`© ${t}${a?" "+a:""}.${r?" "+r+".":""}`,s=vT[e]||vT.default,d=s.theme?{"data-theme":s.theme,"data-surface":s.surface||"Surface-Dim"}:{},u=s.theme?{background:"var(--Background)",color:"var(--Text)"}:{background:s.bg,color:s.fg};return le("div",{...d,className:["dino-copyright",n].filter(Boolean).join(" "),style:{padding:"var(--Sizing-2, 16px) 24px",textAlign:"center",...u,...o},...l,children:le(dr,{style:{color:"inherit",opacity:.85},children:c})})}const yT={default:{theme:"Primary",surface:"Surface-Dimmest"},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 zT({color:e="default",brand:a,address:t,columns:r=[],socialLinks:i=[],copyright:n=!0,children:o,subscribe:l,copyrightName:c,copyrightYear:s,className:d,style:u,...h}){const m=r.slice(0,3),p=yT[e]||yT.default,f=p.theme?{"data-theme":p.theme,"data-surface":p.surface||"Surface"}:{},g=p.theme?{background:"var(--Background)",color:"var(--Text)"}:{background:p.bg,color:p.fg};return se("footer",{...f,className:["dino-footer",d].filter(Boolean).join(" "),style:{...g,...u},...h,children:[se("div",{style:{maxWidth:1200,margin:"0 auto",padding:"40px 24px 56px"},children:[a&&le("div",{style:{marginBottom:36},children:a}),le("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))",gap:40},children:o||se(ce,{children:[le(ST,{address:t}),m.map((e,a)=>le(wT,{...e},a))]})}),(i.length>0||l)&&se("div",{style:{marginTop:48,paddingTop:32,borderTop:"1px solid var(--Border-Variant)",display:"flex",flexWrap:"wrap",gap:32,alignItems:"flex-start",justifyContent:"space-between"},children:[i.length>0&&le(kT,{links:i}),l&&le(CT,{...l})]})]}),n&&le(xT,{color:e,companyName:c,year:s})]})}function ST({address:e}){if(!e)return le("div",{});const{company:a,lines:t=[],email:r,phone:i}=e,n=[...a?[a]:[],...t,...i?[i]:[]];return se("div",{children:[n.map((e,a)=>le(dr,{style:{color:"inherit",opacity:.85,display:"block"},children:e},a)),r&&le("div",{style:{marginTop:12},children:le(dr,{style:{color:"inherit",opacity:.85,display:"block"},children:le(ti,{href:"mailto:"+r,color:"standard",style:{color:"inherit"},children:r})})})]})}function wT({title:e,links:a=[]}){return se(zy,{gap:"var(--Sizing-1)",children:[e&&le(er,{style:{color:"inherit"},children:e}),le(zy,{component:"ul",gap:"var(--Sizing-1)",sx:{listStyle:"none",m:0,p:0},children:a.map((e,a)=>le("li",{children:le(ti,{href:e.href,onClick:e.onClick,color:"standard",style:{color:"inherit",opacity:.85},children:e.label})},a))})]})}function kT({links:e}){return le(yy,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:e.map((e,a)=>{const t=e.label||e.name;return"production"===process.env.NODE_ENV||t||console.warn('[Footer] a socialLinks entry has no `label`. Each one needs the service it points at ("GitHub", "LinkedIn") — the icon carries no text, so without it a screen reader announces only "link".'),le("a",{href:e.url,target:"_blank",rel:"noopener noreferrer","aria-label":t,className:"footer-social-link",style:{color:"inherit",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:6,textDecoration:"none",transition:"opacity var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, ease)"},children:e.brand?le(wf,{name:e.brand,size:"24px"}):e.icon},a)})})}function CT({title:e="Stay in the loop",description:t,placeholder:r="your@email.com",buttonLabel:i="Subscribe",onSubscribe:n}){const[o,l]=a(""),[c,s]=a(!1);return se("form",{onSubmit:async e=>{if(e&&e.preventDefault(),o&&!c){s(!0);try{await(n?.(o)),l("")}finally{s(!1)}}},style:{minWidth:260,maxWidth:360,flex:"1 1 260px"},children:[le(er,{style:{color:"inherit",marginBottom:6},children:e}),t&&le(dr,{style:{color:"inherit",opacity:.85,marginBottom:12,display:"block"},children:t}),se("div",{style:{display:"flex",gap:8},children:[le(Sx,{type:"email",value:o,onChange:e=>l(e.target.value),placeholder:r,size:"small",fullWidth:!0,"aria-label":"Email address"}),le(Yg,{type:"submit",size:"small",disabled:c||!o,children:i})]})]})}function BT(e){const a=e.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);return a?[Number(a[1]),Number(a[2]),Number(a[3])]:null}function MT(e){return e?"#"+e.map(e=>e.toString(16).padStart(2,"0")).join(""):"—"}function TT([e,a,t]){const r=[e,a,t].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 AT({targetRef:e,label:r,deps:i=[]}){const[n,o]=a(null),[l,c]=a(null);t(()=>{if(!e.current)return;const a=requestAnimationFrame(()=>{if(!e.current)return;const a=getComputedStyle(e.current);o(BT(a.backgroundColor)),c(BT(a.color))});return()=>cancelAnimationFrame(a)},i);const s=function(e,a){if(!e||!a)return null;const t=TT(e),r=TT(a);return(Math.max(t,r)+.05)/(Math.min(t,r)+.05)}(n,l),d=null!==s&&s>=4.5,u=null===s?"—":null!==s&&s>=7?"AAA":d?"AA":"Fail",h=null===s?"var(--Text-Quiet)":d?"var(--Text-Success)":"var(--Text-Error)";return se("div",{style:{display:"flex",alignItems:"center",gap:16,padding:"12px 16px",borderRadius:8,background:"var(--Container)",border:"1px solid var(--Border)"},children:[se("div",{style:{flex:1,minWidth:0},children:[le(dr,{style:{fontWeight:600},children:r}),se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Background ",MT(n)," · Text ",MT(l)]})]}),se("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(zr,{style:{color:"var(--Text-Quiet)"},children:null!==s?s.toFixed(2)+":1":"—"})]})]})}const LT={company:"DinoDesign",lines:["123 Market Street","San Francisco, CA 94103"],email:"hello@dinodesign.dev",phone:"+1 (555) 010-0000"},IT=[{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:"#"}]}],NT=[{icon:le(pt,{fontSize:"small"}),url:"https://twitter.com",label:"Twitter"},{icon:le(ft,{fontSize:"small"}),url:"https://github.com",label:"GitHub"},{icon:le(gt,{fontSize:"small"}),url:"https://linkedin.com",label:"LinkedIn"}],WT=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function DT({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function RT(){const[e,i]=a("Default"),[n,o]=a("Surface"),[l,c]=a(4),[s,d]=a(!0),[u,p]=a(!0),[f,g]=a("default"),b=r(null),[v,x]=a(null),[y,z]=a(null);t(()=>{b.current&&(x({current:b.current.querySelector(".dino-footer")}),z({current:b.current.querySelector(".dino-copyright")}))},[f,l,s,u]);const S=IT.slice(0,Math.max(0,l-1)),w=s?NT:[],k=u?{title:"Stay in the loop",description:"Monthly updates on new components and tips.",onSubscribe:async e=>console.log("subscribed:",e)}:void 0;return se(h,{children:[le(yM,{title:"Footer",component:"Footer"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:o})}),se(mr,{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:b,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(zT,{color:f,address:LT,columns:S,socialLinks:w,subscribe:k,copyrightName:"DinoDesign"})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Footer",theme:e,surface:n})}),le(yb,{value:1,children:se(m,{spacing:3,sx:{p:3,maxWidth:560},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLUMNS"}),le(m,{direction:"row",spacing:1,children:[1,2,3,4].map(e=>le(DT,{label:String(e),selected:l===e,onClick:()=>c(e)},e))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"First column is always the address / contact. Up to 3 more link columns."})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:WT.map(e=>le(DT,{label:e.label,selected:f===e.value,onClick:()=>g(e.value)},e.value))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:'"Default" hardcodes Primary tone 2 (auto-derived in a future iteration).'})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SOCIAL LINKS"}),le(dv,{label:"Show social media row",checked:s,onChange:e=>d(e.target.checked)}),se(zr,{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."]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SUBSCRIBE"}),le(dv,{label:"Show email subscribe form",checked:u,onChange:e=>p(e.target.checked)}),se(zr,{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)"}),"."]})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(zr,{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."}),v&&le(AT,{targetRef:v,label:"Footer body",deps:[f,l,s,u]}),y&&le(AT,{targetRef:y,label:"Copyright strip",deps:[f,l,s,u]})]})]}),le(yb,{value:3,children:le(gM,{component:"Footer"})})]})]})}const FT=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function PT({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function HT(){const[e,i]=a("Default"),[n,o]=a("Surface"),[l,c]=a("DinoDesign"),[s,d]=a((new Date).getFullYear()),[u,p]=a("All rights reserved"),[f,g]=a(""),[b,v]=a(!1),[x,y]=a("default"),z=r(null),[S,w]=a(null);return t(()=>{z.current&&w({current:z.current.querySelector(".dino-copyright")})},[x,b,l,s,u,f]),se(h,{children:[le(yM,{title:"Copyright",component:"Copyright"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:o})}),se(mr,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:["Standalone copyright strip used at the bottom of pages. Defaults to"," ",se("code",{children:["© ","{year}"," ","{companyName}",". ","{rights}","."]})," Pass"," ",le("code",{children:"children"})," to override the entire text."]}),le(h,{ref:z,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(xT,b?{color:x,children:f||"Type a custom message →"}:{color:x,companyName:l,year:Number(s)||(new Date).getFullYear(),rights:u})}),se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"Copyright",theme:e,surface:n})}),le(yb,{value:1,children:se(m,{spacing:3,sx:{p:3,maxWidth:560},children:[se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TEXT MODE"}),se(m,{direction:"row",spacing:1,children:[le(PT,{label:"Auto-generated",selected:!b,onClick:()=>v(!1)}),le(PT,{label:"Custom",selected:b,onClick:()=>v(!0)})]})]}),!b&&se(ce,{children:[le(Sx,{label:"Company name",value:l,onChange:e=>c(e.target.value),placeholder:"DinoDesign",size:"medium"}),le(NM,{label:"Year",value:Number(s),onChange:e=>d(e),min:1900,max:2100}),le(Sx,{label:"Rights text",value:u,onChange:e=>p(e.target.value),placeholder:"All rights reserved",size:"medium"}),le(zr,{style:{color:"var(--Text-Quiet)"},children:'Leave Rights blank to omit "All rights reserved." entirely.'})]}),b&&se(ce,{children:[le(Sx,{label:"Custom text",value:f,onChange:e=>g(e.target.value),placeholder:"© 2026 DinoDesign · MIT License · Built with love",size:"medium",multiline:!0}),le(zr,{style:{color:"var(--Text-Quiet)"},children:"Pass any string (or React node) as children to fully override the auto text."})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:FT.map(e=>le(PT,{label:e.label,selected:x===e.value,onClick:()=>y(e.value)},e.value))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Matches the Footer color presets so the two stack cleanly."})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(zr,{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."}),S&&le(AT,{targetRef:S,label:"Copyright strip",deps:[x,b,l,s,u,f]})]})]}),le(yb,{value:3,children:le(gM,{component:"Copyright"})})]})]})}const OT=["Default","Primary","Secondary","Tertiary","Neutral"],ET={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}},VT=Object.keys(ET);function QT(e,a){if("custom"===e)return{...ET.Classic,name:"Custom",description:"Custom",...a||{}};const t=ET[e];return t?{...t}:{...ET.Classic}}function jT(e,a){const t=e||"Primary";return"base"===a?"var(--Buttons-"+t+"-Button)":"highlight"===a?"rgb(var(--Buttons-"+t+"-Highlight))":"lowlight"===a?"rgb(var(--Buttons-"+t+"-Lowlight))":void 0}function qT(e){const a=e||"Primary";return"Default"===a?"var(--Text)":"var(--Text-"+a+")"}function GT(e,a){const t=(e-90)*Math.PI/180;return{dx:Math.cos(t)*a,dy:Math.sin(t)*a}}const UT={"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 XT({text:a="Your Brand. Perfected.",curves:t,arc:r=160,radius:i=300,direction:n="up",rotation:o=0,autoCrop:l=!0,textStyle:c="display-large",fontSize:s,fontFamily:d,fontWeight:u,letterSpacing:h,color:m="var(--Text, #1a1a1a)",bevel:p=!1,bevelTheme:f="Primary",bevelPreset:g,bevelCustom:b,className:v,style:x,...y}){const z=g?QT(g,b):null,S=z?!!z.bevel:!!p,w=UT[c]||UT["display-large"],k=d??w.fontFamily,C=s??w.fontSize,B=u??w.fontWeight,M=h??w.letterSpacing,T="number"==typeof s?s:w.pxHint,A=t&&t.length>0?t:[{arc:r,radius:i,direction:n}],{d:L,width:I,upMax:N,downMax:W,pathId:D}=function(a){return e.useMemo(()=>{const e="dino-curved-text-"+Math.random().toString(36).slice(2,9);let t=0;const r=0;let i="M "+t+" "+r,n=0,o=0;for(const{arc:e,radius:l,direction:c}of a){const a=YT(e,1,359),s=Math.max(10,l),d=a*Math.PI/180,u=2*s*Math.sin(d/2),h=s*(1-Math.cos(d/2));t+=u,i+=" A "+s+" "+s+" 0 "+(a>180?1:0)+" "+("up"===c?1:0)+" "+t+" "+r,"up"===c?n=Math.max(n,h):o=Math.max(o,h)}return{d:i,width:t,upMax:n,downMax:o,pathId:e}},[JSON.stringify(a)])}(A),R=Math.ceil(N+T),F=Math.ceil(W+T),P=Math.ceil(T),H=Math.ceil(I+2*P),O=R+F,E=P,V=R,Q=o?"rotate("+o+" "+H/2+" "+O/2+")":void 0,j=e.useRef(null),[q,G]=e.useState(null),[U,X]=e.useState(T);e.useEffect(()=>{if(!j.current||"undefined"==typeof ResizeObserver)return;const e=j.current,a=()=>{const a=e.getBoundingClientRect(),t=q?q.width:H;if(!t||!a.width)return;const r=a.width/t;X(T*r)};a();const t=new ResizeObserver(a);return t.observe(e),()=>t.disconnect()},[H,T,q]);const Y=S&&U>=19;e.useLayoutEffect(()=>{if(!l)return void G(null);const e=j.current;if(!e)return;const a=e.querySelector("text");if(!a)return;let t;try{t=a.getBBox()}catch(e){return}if(!t||!t.width||!t.height)return;const r=H/2,i=O/2,n=o*Math.PI/180,c=Math.cos(n),s=Math.sin(n),d=(e,a)=>{const t=e-r,n=a-i;return{x:r+t*c-n*s,y:i+t*s+n*c}},u=[d(t.x,t.y),d(t.x+t.width,t.y),d(t.x,t.y+t.height),d(t.x+t.width,t.y+t.height)],h=Math.min(...u.map(e=>e.x)),m=Math.max(...u.map(e=>e.x)),p=Math.min(...u.map(e=>e.y)),f=Math.max(...u.map(e=>e.y)),g=.12*T,b={x:h-g,y:p-g,width:m-h+2*g,height:f-p+2*g};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,a,JSON.stringify(A),o,T,M,k,B,S,f,g,JSON.stringify(b)]);const J=q?q.x+" "+q.y+" "+q.width+" "+q.height:"0 0 "+H+" "+O,Z=q?q.width:H,$=q?q.height:O;return se("svg",{ref:j,viewBox:J,width:Z,height:$,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...x},"aria-label":a,role:"img",className:["dino-curved-text",v].filter(Boolean).join(" "),...y,children:[le("defs",{children:le("path",{id:D,d:L,transform:"translate("+E+" "+V+")"})}),se("g",{transform:Q,children:[Y&&(()=>{const e=z?z.depth/96:.045,t=Math.max(2,Math.round(T*e)),r=Math.max(1,Math.round(T*e*.67)),i={fontFamily:k,fontSize:"number"==typeof C?C+"px":C,fontWeight:B,letterSpacing:"number"==typeof M?M+"px":M};return se(ce,{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:"#"+D,startOffset:"50%",textAnchor:"middle",children:a})}),le("text",{className:"dino-bevel-layer dino-bevel-layer--highlight",fill:"rgb(var(--Buttons-"+f+"-Highlight))",transform:"translate(0 -"+r+")",style:i,children:le("textPath",{href:"#"+D,startOffset:"50%",textAnchor:"middle",children:a})})]})})(),le("text",{className:"dino-curved-text__base",fill:Y?"var(--Buttons-"+f+"-Button)":S?qT(f):m,style:{fontFamily:k,fontSize:"number"==typeof C?C+"px":C,fontWeight:B,letterSpacing:"number"==typeof M?M+"px":M},children:le("textPath",{href:"#"+D,startOffset:"50%",textAnchor:"middle",children:a})})]})]})}function YT(e,a,t){return Math.max(a,Math.min(t,e))}const JT=[{value:"display-large",label:"Display Large"},{value:"display-small",label:"Display Small"}],ZT=[{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)"}],$T=OT.map(e=>({value:e,label:e}));function KT({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function _T(){const[e,i]=a("Default"),[n,o]=a("Surface"),[l,c]=a("Your Brand. Perfected."),[s,d]=a("display-large"),[u,p]=a("primary"),[f,g]=a([(b="up",{arc:140,radius:340,direction:b})]);var b;const[v,x]=a(0),[y,z]=a(8),[S,w]=a(700),[k,C]=a(!1),[B,M]=a("Primary"),[T,A]=a("Classic"),L=r(null),[I,N]=a(null);t(()=>{L.current&&N({current:L.current.querySelector("text")})},[u,s,f,v,y,S,k,B,T]);const W=ZT.find(e=>e.value===u)?.css||ZT[0].css;function D(e,a){g(t=>t.map((t,r)=>r===e?{...t,...a}:t))}return se(h,{children:[le(yM,{title:"Curved Display Text",component:"CurvedText"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:o})}),le(mr,{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."}),se(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:L,"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(XT,{text:l,curves:f,textStyle:s,rotation:v,letterSpacing:y,fontWeight:S,bevel:k,bevelTheme:B,bevelPreset:k?T:void 0,color:W})})}),le(h,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"CurvedText",theme:e,surface:n})}),le(yb,{value:1,children:se(m,{spacing:3,sx:{p:3,maxWidth:720},children:[le(Sx,{label:"Text",value:l,onChange:e=>c(e.target.value),placeholder:"Your headline…",size:"medium"}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CURVES"}),le(m,{direction:"row",spacing:1,children:[1,2].map(e=>le(KT,{label:String(e),selected:f.length===e,onClick:()=>function(e){g(a=>{if(e===a.length)return a;if(e>a.length){const t=[...a];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 a.slice(0,e)})}(e)},e))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"One curve is an arch. Two curves chain end-to-end for a wave."})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"PER-CURVE SETTINGS"}),le(m,{spacing:2,children:f.map((e,a)=>se(h,{"data-surface":"Container",style:{background:"var(--Background)",border:"1px solid var(--Border)",borderRadius:8,padding:12},children:[se(m,{direction:"row",alignItems:"center",spacing:2,sx:{mb:1},children:[se(zr,{style:{fontWeight:700},children:["Curve ",a+1]}),le("div",{style:{flex:1}}),se(m,{direction:"row",spacing:1,children:[le(KT,{label:"⌢ Up",selected:"up"===e.direction,onClick:()=>D(a,{direction:"up"})}),le(KT,{label:"⌣ Down",selected:"down"===e.direction,onClick:()=>D(a,{direction:"down"})})]})]}),se(m,{spacing:1,children:[se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Radius",se("span",{style:{float:"right"},children:[e.radius,"px"]})]}),le(Nx,{min:100,max:600,step:10,value:e.radius,onChange:(e,t)=>D(a,{radius:t})})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Arc sweep",se("span",{style:{float:"right"},children:[e.arc,"°"]})]}),le(Nx,{min:40,max:280,step:5,value:e.arc,onChange:(e,t)=>D(a,{arc:t})})]})]})]},a))})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:JT.map(e=>le(KT,{label:e.label,selected:s===e.value,onClick:()=>d(e.value)},e.value))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Uses the lib's DisplayLarge / DisplaySmall tokens (font-family, size, weight, letter-spacing)."})]}),se(h,{children:[se(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["LETTER SPACING",se("span",{style:{float:"right"},children:[y,"px"]})]}),le(Nx,{min:-4,max:40,step:1,value:y,onChange:(e,a)=>z(a)}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Adjusts the gap between characters along the wave."})]}),se(h,{children:[se(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["FONT WEIGHT",le("span",{style:{float:"right"},children:S})]}),le(Nx,{min:100,max:900,step:100,value:S,onChange:(e,a)=>w(a)}),le(zr,{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."})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BEVEL"}),le(dv,{label:"3D bevel effect",checked:k,onChange:e=>C(e.target.checked)}),k&&se(h,{sx:{mt:1.5},children:[le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Preset"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1,mb:1.5},children:VT.map(e=>le(KT,{label:e,selected:T===e,onClick:()=>A(e)},e))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Bevel theme"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:$T.map(e=>le(KT,{label:e.label,selected:B===e.value,onClick:()=>M(e.value)},e.value))})]}),se(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Bevel layers use ",se("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."]})]}),se(h,{children:[se(m,{direction:"row",alignItems:"center",sx:{mb:1},children:[se(Ar,{style:{color:"var(--Text-Quiet)",flex:1},children:["ROTATION",se("span",{style:{float:"right",marginRight:12},children:[v,"°"]})]}),le(Yg,{variant:"default-outline",size:"small",onClick:function(){const e=L.current?.querySelector("svg");if(!e)return;const a=e.querySelector("path"),t=e.querySelector("text");if(!a||!t)return;const r=a.getTotalLength();if(!r)return;let i=0;try{i=t.getComputedTextLength?.()||0}catch(e){}i||(i=Math.min(r,18*l.length));const n=Math.max(0,(r-i)/2),o=Math.min(r,n+i),c=a.getPointAtLength(n),s=a.getPointAtLength(o),d=180*Math.atan2(s.y-c.y,s.x-c.x)/Math.PI,u=Math.max(-45,Math.min(45,Math.round(-d)));x(u)},children:"Auto-level"})]}),le(Nx,{min:-45,max:45,step:1,value:v,onChange:(e,a)=>x(a)}),le(zr,{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.'})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:ZT.map(e=>le(KT,{label:e.label,selected:u===e.value,onClick:()=>p(e.value)},e.value))})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(zr,{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."}),I&&le(AT,{targetRef:I,label:"Curved text",deps:[u,s,JSON.stringify(f),v,y]}),se(dr,{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."]})]})]}),le(yb,{value:3,children:le(gM,{component:"CurvedText"})})]})})})]})]})}const eA={"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 aA({text:a="DinoDesign",theme:t="Primary",preset:r="Classic",custom:i,textStyle:n="display-large",fontSize:o,fontFamily:l,fontWeight:c,letterSpacing:s,className:d,style:u,...h}){const m=eA[n]||eA["display-large"],p=l??m.fontFamily,f=o??m.fontSize,g=c??m.fontWeight,b=s??m.letterSpacing,v="number"==typeof o?o:m.pxHint,x=QT(r,i),y="dino-bevel-"+e.useId().replace(/:/g,""),z=y+"-s",S=e.useRef(null),[w,k]=e.useState(v),C=.6*v,B=Math.max(400,a.length*C+80),M=1.9*v,T=B/2,A=.7*M;e.useEffect(()=>{if(!S.current||"undefined"==typeof ResizeObserver)return;const e=S.current,a=()=>{const a=e.getBoundingClientRect();B&&a.width&&k(v*(a.width/B))};a();const t=new ResizeObserver(a);return t.observe(e),()=>t.disconnect()},[B,v]);const L=w>=19,I=x.bevel?GT(x.angle+180,x.depth):{dx:0,dy:0},N=x.bevel?GT(x.angle,x.depth):{dx:0,dy:0},W=x.shadow?GT(x.angle,x.shadowDistance??6):{dx:0,dy:0},D=L?jT(t,"base"):qT(t),R=jT(t,"highlight"),F=jT(t,"lowlight"),P={fontFamily:p,fontSize:"number"==typeof f?f+"px":f,fontWeight:g,letterSpacing:"number"==typeof b?b+"px":b},H=x.bevel&&L?"url(#"+y+")":void 0,O=x.shadow&&L?"url(#"+z+")":void 0;return se("svg",{ref:S,viewBox:"0 0 "+B+" "+M,width:B,height:M,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...u},"aria-label":a,role:"img",className:["dino-bevel-text",d].filter(Boolean).join(" "),...h,children:[se("defs",{children:[x.shadow&&le("filter",{id:z,x:"-30%",y:"-30%",width:"160%",height:"160%",children:le("feDropShadow",{dx:W.dx.toFixed(2),dy:W.dy.toFixed(2),stdDeviation:x.shadowBlur??8,style:{floodColor:F,floodOpacity:x.shadowOpacity??.6}})}),x.bevel&&se("filter",{id:y,x:"-5%",y:"-5%",width:"110%",height:"110%",colorInterpolationFilters:"sRGB",children:[le("feGaussianBlur",{in:"SourceAlpha",stdDeviation:(x.softness??1)+.5,result:"blur-alpha"}),le("feOffset",{in:"blur-alpha",dx:N.dx.toFixed(2),dy:N.dy.toFixed(2),result:"shadow-offset"}),le("feFlood",{style:{floodColor:F,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:I.dx.toFixed(2),dy:I.dy.toFixed(2),result:"hi-offset"}),le("feFlood",{style:{floodColor:R,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"}),se("feMerge",{children:[le("feMergeNode",{in:"SourceGraphic"}),le("feMergeNode",{in:"shadow-clipped"}),le("feMergeNode",{in:"hi-clipped"})]})]})]}),x.shadow&&L&&le("text",{className:"dino-bevel-layer dino-bevel-layer--shadow",x:T,y:A,textAnchor:"middle",fill:D,filter:O,style:P,"aria-hidden":"true",children:a}),le("text",{className:x.bevel?"dino-bevel-text__base dino-bevel-layer":"dino-bevel-text__base",x:T,y:A,textAnchor:"middle",fill:D,filter:H,style:P,children:a})]})}const tA=[...VT.map(e=>({value:e,label:e,description:ET[e].description})),{value:"custom",label:"Custom",description:"Tune every knob"}],rA=[{value:"light",label:"Light",css:"var(--Surface)"},{value:"warm",label:"Warm",css:"var(--Surface-Dim)"},{value:"dark",label:"Dark",css:"var(--Container-High)"}];function iA({label:e,selected:a,onClick:t}){return le(Yg,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function nA({option:e,active:a,onClick:t}){return se(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:a?"var(--Buttons-Primary-Border)":"var(--Border)",background:a?"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(zr,{style:{fontWeight:600,color:"var(--Text)"},children:e.label}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:e.description})]})}function oA(){const[e,t]=a("Default"),[r,i]=a("Surface"),[n,o]=a("DinoDesign"),[l,c]=a("Primary"),[s,d]=a("Classic"),[u,p]=a("light"),[f,g]=a(135),[b,v]=a(5),[x,y]=a(1),[z,S]=a(!0),[w,k]=a(!0),[C,B]=a(6),[M,T]=a(8),[A,L]=a(60),[I,N]=a(96),[W,D]=a(900),[R,F]=a(0),P="custom"===s,H=P?{angle:f,depth:b,softness:x,bevel:z,shadow:w,shadowDistance:C,shadowBlur:M,shadowOpacity:A/100}:void 0;const O=rA.find(e=>e.value===u)?.css||rA[0].css;return se(h,{children:[le(yM,{title:"Bevel Display Text",component:"BevelText"}),le(h,{sx:{mt:1},children:le(Xf,{theme:e,onThemeChange:t,surface:r,onSurfaceChange:i})}),le(mr,{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."}),se(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:O,borderRadius:2,p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:240,overflow:"auto",position:"sticky",top:16,transition:"background 0.2s"},children:le(aA,{text:n,theme:l,preset:s,custom:H,fontSize:I,fontWeight:W,letterSpacing:R})})}),le(h,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(h,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:se(bb,{defaultValue:0,variant:"standard",color:"primary",children:[se(vb,{children:[le(xb,{children:"Summary"}),le(xb,{children:"Playground"}),le(xb,{children:"Accessibility"}),le(xb,{children:"Change Log"})]}),le(yb,{value:0,children:le(fM,{component:"BevelText",theme:e,surface:r})}),le(yb,{value:1,children:se(m,{spacing:3,sx:{p:3,maxWidth:720},children:[le(Sx,{label:"Text",value:n,onChange:e=>o(e.target.value),placeholder:"Your headline…",size:"medium"}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:OT.map(e=>le(iA,{label:e,selected:l===e,onClick:()=>c(e)},e))}),se(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Resolves to ",se("code",{children:["--Buttons-","{Theme}","-Button"]})," ","(fill), ",le("code",{children:"-Highlight"})," (light edge), and"," ",le("code",{children:"-Lowlight"})," (shadow edge)."]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PRESETS"}),le(h,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:tA.map(e=>le(nA,{option:e,active:s===e.value,onClick:()=>function(e){if(d(e),"custom"!==e){const a=QT(e);g(a.angle),v(a.depth??5),y(a.softness??1),S(a.bevel),k(a.shadow),B(a.shadowDistance??6),T(a.shadowBlur??8),L(Math.round(100*(a.shadowOpacity??.6)))}}(e.value)},e.value))})]}),P&&se(h,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",p:2},children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"CUSTOM"}),se(m,{spacing:2,children:[se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Light angle",se("span",{style:{float:"right"},children:[f,"°"]})]}),le(Nx,{min:0,max:360,step:5,value:f,onChange:(e,a)=>g(a)})]}),se(h,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(dv,{label:"Inset bevel",checked:z,onChange:e=>S(e.target.checked)}),z&&se(m,{spacing:1.5,sx:{mt:1.5},children:[se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Depth",se("span",{style:{float:"right"},children:[b,"px"]})]}),le(Nx,{min:1,max:16,step:1,value:b,onChange:(e,a)=>v(a)})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Softness",se("span",{style:{float:"right"},children:[x,"px"]})]}),le(Nx,{min:0,max:6,step:.5,value:x,onChange:(e,a)=>y(a)})]})]})]}),se(h,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(dv,{label:"Drop shadow",checked:w,onChange:e=>k(e.target.checked)}),w&&se(m,{spacing:1.5,sx:{mt:1.5},children:[se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Distance",se("span",{style:{float:"right"},children:[C,"px"]})]}),le(Nx,{min:1,max:24,step:1,value:C,onChange:(e,a)=>B(a)})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Blur",se("span",{style:{float:"right"},children:[M,"px"]})]}),le(Nx,{min:0,max:24,step:1,value:M,onChange:(e,a)=>T(a)})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Opacity",se("span",{style:{float:"right"},children:[A,"%"]})]}),le(Nx,{min:10,max:100,step:5,value:A,onChange:(e,a)=>L(a)})]})]})]})]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),se(m,{spacing:2,children:[se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font size",se("span",{style:{float:"right"},children:[I,"px"]})]}),le(Nx,{min:32,max:160,step:4,value:I,onChange:(e,a)=>N(a)})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font weight",le("span",{style:{float:"right"},children:W})]}),le(Nx,{min:400,max:900,step:100,value:W,onChange:(e,a)=>D(a)})]}),se("div",{children:[se(zr,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Letter spacing",se("span",{style:{float:"right"},children:[R,"px"]})]}),le(Nx,{min:-2,max:20,step:1,value:R,onChange:(e,a)=>F(a)})]})]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PREVIEW BACKGROUND"}),le(m,{direction:"row",spacing:1,children:rA.map(e=>le(iA,{label:e.label,selected:u===e.value,onClick:()=>p(e.value)},e.value))}),le(zr,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Showcase-only — doesn't affect the emitted code."})]})]})}),se(yb,{value:2,children:[le(Jr,{}),se(m,{spacing:2,sx:{p:3,maxWidth:560},children:[se(zr,{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(dr,{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."})]})]}),le(yb,{value:3,children:le(gM,{component:"BevelText"})})]})})})]})]})}function lA({layout:e="side",navItems:t=[{label:"Home",icon:le(Te,{}),path:"/"},{label:"About",icon:le(Fe,{}),path:"/about"},{label:"Settings",icon:le(Le,{}),path:"/settings"},{label:"Help",icon:le(bt,{}),path:"/help"}],title:r="My App",children:i,onLayoutChange:n,onNavigate:o,sx:l={},...c}){const s=te(),d=re(s.breakpoints.down("md"));re(s.breakpoints.down("lg"));const[u,m]=a(!1),[p,f]=a(!1),g=d?"top":e,b=({compact:e=!1})=>le(G,{sx:{py:1},children:t.map((a,t)=>le(x,{title:e?a.label:"",placement:"right",children:se(X,{onClick:()=>{o?.(a),m(!1)},sx:{color:"var(--Text)",...Fk({muiPrefix:!0}),transition:"all 0.2s ease-in-out",justifyContent:e?"center":"flex-start",px:e?1:2},children:[le(Y,{sx:{color:"var(--Icons-Primary)",minWidth:e?"auto":40,mr:e?0:1},children:a.icon}),!e&&le(J,{primary:a.label})]})},t))});return se(h,{sx:{minHeight:"100vh",backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",flexDirection:"column",...l},...c,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:se(ne,{children:[d&&"rail"!==g&&le(Zg,{variant:"ghost",onClick:()=>m(!u),"aria-label":u?"Close navigation":"Open navigation",sx:{mr:2},children:le(u?Ea:Pa,{})}),le(V,{variant:"h6",sx:{flex:1,fontWeight:700},children:r}),!d&&n&&se(oe,{value:e,exclusive:!0,onChange:(e,a)=>{a&&n(a)},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(ee,{value:"side","aria-label":"side nav",children:"☰ Side"}),le(ee,{value:"rail","aria-label":"rail nav",children:"⫷ Rail"}),le(ee,{value:"side-rail","aria-label":"side-rail nav",children:"☰⫷ Both"})]})]})}),se(h,{sx:{display:"flex",flex:1},children:[("rail"===g||"side-rail"===g)&&!d&&le(h,{sx:{width:80,backgroundColor:"var(--Container)",borderRight:"1px solid var(--Border-Variant)",display:"flex",flexDirection:"column",py:2},children:le(b,{compact:!0})}),("side"===g||"side-rail"===g)&&!d&&se(h,{sx:{width:p?80:280,backgroundColor:"var(--Container)",borderRight:"1px solid var(--Border-Variant)",transition:"width 0.3s ease-in-out",display:"flex",flexDirection:"column"},children:[se(h,{sx:{p:2,display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid var(--Border-Variant)",minHeight:64},children:[!p&&le(V,{variant:"h6",sx:{fontWeight:700,color:"var(--Text)"},children:"Menu"}),le(Zg,{size:"small",variant:"ghost",onClick:()=>f(!p),"aria-label":p?"Expand navigation":"Collapse navigation",sx:{color:"var(--Icons-Primary)"},children:p?"›":"‹"})]}),le(b,{compact:p})]}),d&&se(K,{anchor:"left",open:u,onClose:()=>m(!1),sx:{"& .MuiDrawer-paper":{backgroundColor:"var(--Container)",width:280}},children:[le(h,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:le(V,{variant:"h6",sx:{fontWeight:700},children:"Menu"})}),le(b,{compact:!1})]}),le(h,{sx:{flex:1,overflow:"auto",backgroundColor:"var(--Background)"},children:le(ae,{maxWidth:"lg",sx:{py:4},children:i})})]})]})}const cA=[{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)"}],sA={desktop:"Desktop","ios-mobile":"IOS-Mobile","ios-tablet":"IOS-Tablet",android:"Android"};function dA(e){const a=sA[e]||"Desktop";document.documentElement.setAttribute("data-device",a),document.documentElement.setAttribute("data-platform",a)}function uA(){const{isDark:e,toggleDarkMode:r}=cz(),i=e?"dark":"light",n=a=>{"dark"===a!==e&&r();try{localStorage.setItem("themeMode",a)}catch{}},[o,l]=a(!1),[c,s]=a("desktop");t(()=>{const e=localStorage.getItem("dino-platform")||"desktop";s(e),dA(e)},[]);const d=e=>{s(e),localStorage.setItem("dino-platform",e),dA(e)};return se(ce,{children:[le(h,{onClick:()=>l(!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(be,{sx:{fontSize:24}})}),le(fz,{anchor:"right",open:o,onClose:()=>l(!1),hideBackdrop:!0,size:"small",sx:{width:320,zIndex:99999999},children:se(h,{sx:{p:3,height:"100%",display:"flex",flexDirection:"column"},children:[se(h,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:2},children:[le(ar,{children:"Settings"}),le(Yg,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>l(!1),"aria-label":"Close settings",children:le(ve,{fontSize:"small"})})]}),le($,{sx:{mb:3,borderColor:"var(--Border)"}}),le(h,{sx:{flex:1,overflowY:"auto"},children:se(m,{spacing:4,children:[se(h,{children:[le(Ar,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"MODE"}),se(m,{direction:"row",spacing:1,children:[le(Yg,{variant:"light"===i?"primary":"primary-outline",size:"small",onClick:()=>n("light"),sx:{flex:1},children:"Light"}),le(Yg,{variant:"dark"===i?"primary":"primary-outline",size:"small",onClick:()=>n("dark"),sx:{flex:1},children:"Dark"})]})]}),se(h,{children:[le(Ar,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"PLATFORM"}),le(m,{spacing:1,children:cA.map(({value:e,label:a,note:t})=>{const r=c===e;return se(h,{onClick:()=>d(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:[se(h,{children:[le(dr,{style:{color:r?"var(--Buttons-Primary-Button)":"var(--Text)",fontWeight:r?600:400},children:a}),le(zr,{style:{color:"var(--Text)",opacity:.7},children:t})]}),r&&le(h,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Buttons-Primary-Button)",flexShrink:0}})]},e)})})]})]})}),le($,{sx:{my:3,borderColor:"var(--Border)"}}),le(Yg,{variant:"primary-outline",size:"small",onClick:()=>{d("desktop"),n("light")},sx:{width:"100%"},children:"Reset to Defaults"})]})})]})}const hA=e=>(e||[]).map(e=>{const a="number"==typeof e?e:Number(e?.value);return Number.isFinite(a)?a:0}),mA=e=>(e||[]).map((e,a)=>"number"==typeof e?String(a+1):e?.label??String(a+1));function pA(e,{fromZero:a=!0}={}){if(!e.length)return{min:0,max:1};let t=Math.min(...e),r=Math.max(...e);return a&&(t=Math.min(0,t)),r===t&&(r=t+1),{min:t,max:r}}const fA=(e,{min:a,max:t},r,i)=>r+i-(e-a)/(t-a)*i;function gA(e,a,t,{inset:r=0}={}){if(e<=0)return[];if(1===e)return[a+t/2];const i=(t-2*r)/(e-1);return Array.from({length:e},(e,t)=>a+r+t*i)}function bA(e,a,t,{gapRatio:r=.4}={}){if(e<=0)return{centres:[],bandWidth:0};const i=t/e,n=i*(1-r);return{centres:Array.from({length:e},(e,t)=>a+i*t+i/2),bandWidth:n}}const vA=e=>e.length?e.map((e,a)=>`${a?"L":"M"}${e.x} ${e.y}`).join(" "):"";function xA(e,{tension:a=0}={}){if(e.length<2)return vA(e);const t=(1-a)/6;let r=`M${e[0].x} ${e[0].y}`;for(let a=0;a<e.length-1;a++){const i=e[a-1]||e[a],n=e[a],o=e[a+1],l=e[a+2]||o,c={x:n.x+(o.x-i.x)*t,y:n.y+(o.y-i.y)*t},s={x:o.x-(l.x-n.x)*t,y:o.y-(l.y-n.y)*t};r+=` C${c.x} ${c.y} ${s.x} ${s.y} ${o.x} ${o.y}`}return r}const yA=(e,a,t)=>e&&a.length?`${e} L${a[a.length-1].x} ${t} L${a[0].x} ${t} Z`:"";function zA(e,a,t,r,i,n){const o=n-i;if(o>=2*Math.PI-1e-9){const n=i+Math.PI;return zA(e,a,t,r,i,n)+" "+zA(e,a,t,r,n,i+2*Math.PI)}const l=(t,r)=>({x:e+t*Math.sin(r),y:a-t*Math.cos(r)}),c=o>Math.PI?1:0,s=l(r,i),d=l(r,n);if(t<=0)return`M${e} ${a} L${s.x} ${s.y} A${r} ${r} 0 ${c} 1 ${d.x} ${d.y} Z`;const u=l(t,n),h=l(t,i);return`M${s.x} ${s.y} A${r} ${r} 0 ${c} 1 ${d.x} ${d.y} L${u.x} ${u.y} A${t} ${t} 0 ${c} 0 ${h.x} ${h.y} Z`}function SA(e,{startAngle:a=0}={}){const t=e.map(e=>e>0?e:0),r=t.reduce((e,a)=>e+a,0),i=e.filter(e=>e<=0).length;if(r<=0)return{slices:[],total:0,dropped:i};let n=a;return{slices:t.map(e=>{const a=e/r*Math.PI*2,t={start:n,end:n+a,value:e,fraction:e/r};return n+=a,t}),total:r,dropped:i}}function wA({min:e,max:a},t=4){if(t<1)return[];const r=(a-e)/t,i=Math.pow(10,Math.floor(Math.log10(Math.abs(r)||1))),n=[1,2,2.5,5,10].map(e=>e*i).find(e=>e>=r)??10*i,o=[];for(let t=Math.ceil(e/n)*n;t<=a+1e-9;t+=n)o.push(Number(t.toFixed(10)));return o}var kA=Object.freeze({__proto__:null,arcPath:zA,areaPath:yA,bands:gA,extent:pA,linePath:vA,scaleY:fA,sliceAngles:SA,slots:bA,smoothPath:xA,ticks:wA,toLabels:mA,toNumbers:hA});const CA={fill:"var(--Icons-Primary)",track:"var(--Border-Variant)",line:"var(--Border-Variant)",quietLabel:"var(--Quiet)",label:"var(--Text)",gradient:"var(--Icons-Primary-Variant)"},BA=["Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error"],MA={fontFamily:"var(--Label-Small-Font-Family)",fontSize:"var(--Label-Small-Font-Size)",fontWeight:"var(--Label-Small-Font-Weight)",letterSpacing:"var(--Label-Small-Letter-Spacing)"},TA={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 AA({caption:e,labels:a,values:t,valueHeader:r="Value"}){return se(h,{component:"table",sx:TA,children:[le("caption",{children:e}),le("thead",{children:se("tr",{children:[le("th",{scope:"col",children:"Category"}),le("th",{scope:"col",children:r})]})}),le("tbody",{children:t.map((e,t)=>se("tr",{children:[le("th",{scope:"row",children:a[t]}),le("td",{children:e})]},t))})]})}const LA="var(--Motion-Duration-Slow, 300ms) var(--Motion-Easing-Enter, cubic-bezier(0, 0, 0, 1))",IA="var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))";function NA(a){const[t,r]=e.useState(-1),i=e.useCallback(e=>({onMouseEnter:()=>r(e),onMouseLeave:()=>r(a=>a===e?-1:a),onFocus:()=>r(e),onBlur:()=>r(a=>a===e?-1:a)}),[]);return e.useEffect(()=>{r(e=>e>=a?-1:e)},[a]),{active:t,setActive:r,handlers:i}}function WA({count:e,width:a,centres:t,bandWidth:r,labels:i,values:n,handlers:o}){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]}: ${n[l]}`,...o(l),sx:{position:"absolute",top:0,height:"100%",left:(t[l]-r/2)/a*100+"%",width:r/a*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 DA({x:e,y:a,text:t,width:r,tokens:i}){if(null==t)return null;const n=Math.max(28,8*String(t).length+14),o=Math.min(Math.max(e,n/2+2),r-n/2-2),l=a-26>=2?a-26:a+6;return se("g",{pointerEvents:"none",children:[le("rect",{x:o-n/2,y:l,width:n,height:20,rx:6,fill:i.fill}),le("text",{x:o,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 RA({data:e=[],showTrack:r=!0,rounded:i=!0,showValues:n=!1,showLabels:o=!0,animate:l=!0,interactive:c=!0,height:s=200,gapRatio:d=.4,label:u,className:m="",sx:p={},...f}){const g=hA(e),b=mA(e),{active:v,handlers:x}=NA(g.length),[y,z]=a(!l);t(()=>{if(!l)return;const e=requestAnimationFrame(()=>z(!0));return()=>cancelAnimationFrame(e)},[l]);const S=320,w=n?20:8,k=o?22:8,C=Math.max(0,s-w-k),B=pA(g,{fromZero:!0}),{centres:M,bandWidth:T}=bA(g.length,0,S,{gapRatio:d}),A=w+C,L=i?T/2:0,I=g.length?S/g.length:0;return se(h,{component:"figure",className:"bar-chart "+m,sx:{display:"block",width:"100%",m:0,position:"relative",...p},...f,children:[se("svg",{viewBox:`0 0 320 ${s}`,width:"100%",height:s,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[c&&v>=0&&le("rect",{x:M[v]-I/2,y:0,width:I,height:s,fill:"var(--Hover)",rx:6}),g.map((e,a)=>{const t=M[a]-T/2,i=fA(e,B,w,C),n=Math.max(0,A-i);return se("g",{children:[r&&le("rect",{x:t,y:w,width:T,height:C,rx:L,ry:L,fill:CA.track}),n>0&&le("rect",{x:t,y:i,width:T,height:n,rx:Math.min(L,n/2),ry:Math.min(L,n/2),fill:CA.fill,style:{transformBox:"fill-box",transformOrigin:"bottom",transform:y?"scaleY(1)":"scaleY(0)",transition:`transform ${LA}`}})]},a)}),n&&g.map((e,a)=>le("text",{x:M[a],y:fA(e,B,w,C)-6,textAnchor:"middle",fill:CA.label,...MA,children:e},"v"+a)),o&&b.map((e,a)=>le("text",{x:M[a],y:s-6,textAnchor:"middle",fill:CA.quietLabel,...MA,children:e},"l"+a)),c&&v>=0&&!n&&le(DA,{x:M[v],y:fA(g[v],B,w,C),text:g[v],width:S,tokens:CA})]}),c&&le(WA,{count:g.length,width:S,centres:M,bandWidth:I,labels:b,values:g,handlers:x}),le(AA,{caption:u||`Bar chart, ${g.length} values`,labels:b,values:g})]})}function FA({data:e=[],curve:r="smooth",gradient:i=!0,fromZero:n=!1,showGrid:l=!1,showLabels:c=!1,animate:s=!0,interactive:d=!0,height:u=200,strokeWidth:m=3,tension:p=0,label:f,className:g="",sx:b={},...v}){const x="lc-"+o().replace(/:/g,""),y=hA(e),z=mA(e),{active:S,handlers:w}=NA(y.length),[k,C]=a(!s);t(()=>{if(!s)return;const e=requestAnimationFrame(()=>C(!0));return()=>cancelAnimationFrame(e)},[s]);const B=320,M=c?22:8,T=Math.max(0,u-8-M),A=pA(y,{fromZero:n}),L=gA(y.length,0,B,{inset:m}),I=y.map((e,a)=>({x:L[a],y:fA(e,A,8,T)})),N="straight"===r?vA(I):xA(I,{tension:p}),W=8+T;return se(h,{component:"figure",className:"line-chart "+g,sx:{display:"block",width:"100%",m:0,position:"relative",...b},...v,children:[se("svg",{viewBox:`0 0 320 ${u}`,width:"100%",height:u,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[i&&le("defs",{children:se("linearGradient",{id:x,x1:"0",y1:"0",x2:"0",y2:"1",children:[le("stop",{offset:"0%",stopColor:CA.gradient,stopOpacity:"1"}),le("stop",{offset:"100%",stopColor:CA.gradient,stopOpacity:"0"})]})}),l&&wA(A,4).map(e=>le("line",{x1:0,x2:B,y1:fA(e,A,8,T),y2:fA(e,A,8,T),stroke:CA.line,strokeWidth:"1"},e)),i&&I.length>1&&le("path",{d:yA(N,I,W),fill:`url(#${x})`,style:{opacity:k?1:0,transition:`opacity ${LA}`}}),I.length>1&&le("path",{d:N,fill:"none",stroke:CA.fill,strokeWidth:m,strokeLinecap:"round",strokeLinejoin:"round",pathLength:"1",style:{strokeDasharray:1,strokeDashoffset:k?0:1,transition:`stroke-dashoffset ${LA}`}}),1===I.length&&le("circle",{cx:I[0].x,cy:I[0].y,r:m,fill:CA.fill}),d&&S>=0&&se(ce,{children:[le("line",{x1:L[S],x2:L[S],y1:8,y2:W,stroke:CA.line,strokeWidth:"1"}),le("circle",{cx:I[S].x,cy:I[S].y,r:m+1,fill:CA.fill,stroke:"var(--Background)",strokeWidth:"2"}),le(DA,{x:I[S].x,y:I[S].y,text:y[S],width:B,tokens:CA})]}),c&&z.map((e,a)=>le("text",{x:L[a],y:u-6,textAnchor:"middle",fill:CA.quietLabel,...MA,children:e},a))]}),d&&le(WA,{count:y.length,width:B,centres:L,bandWidth:y.length?B/y.length:0,labels:z,values:y,handlers:w}),le(AA,{caption:f||`Line chart, ${y.length} points`,labels:z,values:y})]})}function PA({data:e=[],donut:r=!1,donutRatio:i=.6,colors:n=BA,separatorWidth:o=2,size:l=200,showLabels:c=!1,animate:s=!0,interactive:d=!0,label:u,className:m="",sx:p={},...f}){const g=hA(e),b=mA(e),{slices:v,total:x,dropped:y}=SA(g),{active:z,handlers:S}=NA(g.length),[w,k]=a(!s);t(()=>{if(!s)return;const e=requestAnimationFrame(()=>k(!0));return()=>cancelAnimationFrame(e)},[s]);const C=l/2,B=l/2,M=l/2-1,T=r?M*i:0,A=e=>{return{fill:`var(--Icons-${a=n[e%n.length]})`,onFill:`var(--Icons-On-${a})`};var a};return se(h,{component:"figure",className:"pie-chart "+m,sx:{display:"block",m:0,position:"relative",...p},...f,children:[se("svg",{viewBox:`0 0 ${l} ${l}`,width:l,height:l,focusable:"false","aria-hidden":"true",children:[v.map((e,a)=>{const t=(e.start+e.end)/2,r=d&&z===a?4:0;return le("path",{d:zA(C,B,T,M,e.start,e.end),fill:A(a).fill,stroke:"var(--Background)",strokeWidth:o,strokeLinejoin:"round",...d?S(a):{},style:{transform:`translate(${r*Math.sin(t)}px, ${-r*Math.cos(t)}px) scale(${w?1:0})`,transformOrigin:`${C}px ${B}px`,transformBox:"view-box",transition:`transform ${w?IA:LA}`}},a)}),c&&v.map((e,a)=>{const t=(e.start+e.end)/2,r=T+.62*(M-T);return e.fraction<.07?null:le("text",{x:C+r*Math.sin(t),y:B-r*Math.cos(t),textAnchor:"middle",dominantBaseline:"middle",fill:A(a).onFill,...MA,children:b[a]},a)})]}),le(AA,{caption:(u||`${r?"Donut":"Pie"} chart, ${v.length} segments`)+(y?`, ${y} non-positive values omitted`:""),labels:b,values:g})]})}const HA=[{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 color, plus its variant and on-color",inCode:'the `color` prop on `Icon` — `<Icon color="primary">`',inFigma:"set the Icons mode on an `Icon-Theme-*` layer"}];function OA(){const e=["## How color works","","Three mode collections carry color, 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 a of HA)e.push(`| **${a.name}** | ${a.moves} | ${a.inCode} | ${a.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 color *is* the message.","","A component with no such layer has nothing of its own to recolor.",""),e.join("\n")}const EA=e=>e.replace(/\|/g,"\\|"),VA=(e,a)=>[`| ${e.join(" | ")} |`,`| ${e.map(()=>"---").join(" | ")} |`,...a.map(e=>`| ${e.map(EA).join(" | ")} |`)],QA=(e,a)=>a.length?[`### ${e}`,"",...a.map(e=>`- ${e}`),""]:[];function jA(e,a=""){const t=[`## ${e.name}`,"",e.summary,""];if(e.insteadUse.length&&(t.push("### Reach for something else when",""),t.push(...e.insteadUse.map(e=>`- ${e.when} → \`${e.use}\``)),t.push("")),e.props.length){t.push("### Props",""),t.push(...VA(["Prop","Type","Values","Default"],e.props.map(e=>[`\`${e.name}\``,e.type,e.values?.length?e.values.map(e=>`\`${e}\``).join(" · "):"—",`\`${e.default}\``])));const a=e.props.filter(e=>e.note);a.length&&(t.push(""),t.push(...a.map(e=>`- \`${e.name}\` — ${e.note}`))),t.push("")}if(e.states.length){t.push("### States",""),t.push(...VA(["State","Set by"],e.states.map(e=>[e.state,"interaction"===e.setBy?"interaction — not a prop":e.setBy])));const a=e.states.filter(e=>e.note);a.length&&(t.push(""),t.push(...a.map(e=>`- ${e.state} — ${e.note}`))),t.push("")}e.theming.length&&(t.push("### Theming",""),t.push(...VA(["Collection","In code","In Figma"],e.theming.map(e=>["—"===e.collection?"—":`**${e.collection}**`,e.inCode,e.inFigma]))),e.themingNotes?.length&&(t.push(""),t.push(...e.themingNotes.map(e=>`- ${e}`))),t.push("")),e.tokens.length&&(t.push("### Tokens it reads",""),t.push(...VA(["Token","Sets","Varies with","Figma variable"],e.tokens.map(e=>[`\`${e.name}\``,e.sets,e.variesWith,"—"===e.figma?"—":`\`${e.figma}\``]))),t.push("")),t.push(...QA("Composition",e.composition)),t.push(...QA("Accessibility",e.accessibility)),t.push(...QA("Gotchas",e.gotchas));const r=a;return r.length&&t.push(...r,""),t.join("\n").replace(/\n{3,}/g,"\n\n").trimEnd()+"\n"}var qA={};export{hy as Accordion,gy as AccordionDetails,uy as AccordionGroup,fy as AccordionSummary,rv as Alert,xS as AlertDialog,bv as AlertShowcase,Yt as AltDisplayLarge,Jt as AltDisplayMedium,Zt as AltDisplaySmall,wz as AppBar,Nz as AppBarShowcase,Rz as Autocomplete,Vz as AutocompleteShowcase,yg as Avatar,zg as AvatarGroup,jv as AvatarShowcase,Ag as Badge,av as BadgeShowcase,RA as BarChart,aA as BevelText,oA as BevelTextShowcase,nB as BlackWhiteToggleButtonGroup,mr as Body,gr as Body1,br as Body2,fr as BodyBold,vr as BodyLarge,yr as BodyLargeBold,xr as BodyLargeSemibold,pr as BodySemibold,dr as BodySmall,hr as BodySmallBold,ur as BodySmallSemibold,Zz as BottomNavigation,sS as BottomNavigationShowcase,pk as Box,jM as BoxShowcase,wf as BrandIcon,Ex as BreadcrumbItem,Ox as Breadcrumbs,jx as BreadcrumbsShowcase,Yg as Button,oy as ButtonGroup,Vr as ButtonSmall,Qr as ButtonText,qt as CAP_HEIGHT_TRIM,MA as CHART_LABEL_TYPE,CA as CHART_TOKENS,HA as COLOR_COLLECTIONS,HA as COLOUR_COLLECTIONS,mg as COMPONENT_DOCS,zr as Caption,Sr as CaptionBold,zv as Card,Sy as CenteredStack,Rv as Checkbox,nb as Chip,mw as CircularProgress,vw as CircularProgressShowcase,Yb as CodeBlock,kM as Colors,qM as Container,Xb as CopyButton,xT as Copyright,HT as CopyrightShowcase,XT as CurvedText,_T as CurvedTextShowcase,fg as DEFAULT_AVATAR_SRC,LS as DEFAULT_ITEMS,tM as DOCS_ORIGIN,eB as DefaultToggleButtonGroup,zz as DesktopAppBar,vS as Dialog,SS as DialogShowcase,Gt as DisplayLarge,Ut as DisplayMedium,Xt as DisplaySmall,mx as Divider,ww as DotsLoader,fz as Drawer,gz as DrawerClose,vz as DrawerContent,bz as DrawerHeader,FS as DrawerShowcase,HS as DropZone,Ww as Dropdown,xy as DynoStack,AS as DynoTreeView,YB as EXAMPLES,gC as EmailTextField,nw as ErrorTag,sB as ErrorToggleButtonGroup,Lr as Eyebrow,Nr as EyebrowLarge,Ir as EyebrowMedium,Ar as EyebrowSmall,zM as FOUNDATIONS,ax as Fab,cx as FabShowcase,zT as Footer,RT as FooterShowcase,yS as FormDialog,zt as Ghost,nT as Gradient,GM as Grid,My as GridStack,$t as H1,Kt as H2,_t as H3,er as H4,ar as H5,tr as H6,yy as HStack,rr as Heading,Bf as Icon,QS as IconBadge,LM as IconBadgeShowcase,_v as IconShowcase,tw as InfoTag,oB as InfoToggleButtonGroup,Ay as InsetStack,Cr as Label,wr as LabelExtraSmall,Br as LabelLarge,kr as LabelSmall,Mr as Legal,Tr as LegalSemibold,NS as LightTreeView,FA as LineChart,oT as LinearGradient,zw as LinearLoader,hT as LinearProgress,bT as LinearProgressShowcase,ti as Link,YS as List,XS as ListItem,US as ListItemDecorator,yw as Loader,lA as MainLayout,Rw as Menu,Dw as MenuButton,Pw as MenuDivider,Fw as MenuItem,Qw as MenuShowcase,sT as MeshCardGradient,cT as MeshGradient,BM as MiniSwatch,Sz as MobileAppBar,Yw as Modal,aw as NeutralTag,iB as NeutralToggleButtonGroup,NM as NumberField,PM as NumberFieldShowcase,Or as NumberLarge,Hr as NumberMedium,Pr as NumberSmall,xC as NumberTextField,lz as OmniDesignProvider,xy as OmniStack,AS as OmniTreeView,Bw as OverlayLoader,Dr as Overline,Fr as OverlineLarge,Rr as OverlineMedium,Wr as OverlineSmall,kw as PageLoader,Gx as Pagination,Zx as PaginationShowcase,Jw as Paper,bC as PasswordTextField,yC as PhoneTextField,PA as PieChart,Zw as Popover,KS as PrimaryTag,aB as PrimaryToggleButtonGroup,ck as RATIO_NAMES,lT as RadialGradient,Mx as Radio,Tx as RadioGroup,Ax as RadioInput,tk as Rail,lk as RailShowcase,Dx as RangeSlider,Px as Rating,Px as RatingInput,hk as Ratio,zk as RatioShowcase,Cy as ResponsiveStack,Ly as ScrollStack,Xy as SearchField,Bk as SearchFieldShowcase,vC as SearchTextField,_S as SecondaryTag,tB as SecondaryToggleButtonGroup,UM as Section,XM as SectionShowcase,qf as Select,Wk as SelectShowcase,wv as SelectableCard,uA as SettingsPanel,Pk as Sidebar,Cw as SkeletonCard,Sw as SkeletonLoader,Wx as Slider,Wx as SliderInput,Ek as Snackbar,Uk as SnackbarShowcase,IS as SolidTreeView,wy as SpaceBetweenStack,CM as Spacing,YM as SpeedDial,eT as SpeedDialShowcase,By as Stack,Ty as StackDivider,Fy as StackShowcase,Jk as StateMessage,aC as Step,eC as Stepper,lC as StepperShowcase,nr as Subtitle,cr as Subtitle1,sr as Subtitle2,ir as SubtitleLarge,lr as SubtitleMedium,or as SubtitleSmall,rw as SuccessTag,lB as SuccessToggleButtonGroup,dz as Surfaced,uC as Swatch,dv as Switch,dv as SwitchInput,JS as TAG_COLORS,ZS as TAG_COLOR_TOKEN_MAP,xb as Tab,vb as TabList,yb as TabPanel,pC as Table,bb as Tabs,ty as TabsShowcase,$S as Tag,dw as TagShowcase,ew as TertiaryTag,rB as TertiaryToggleButtonGroup,SC as TextArea,fC as TextField,wC as TextFieldGroup,Sx as TextInput,sz as ThemedZone,OM as ToggleButton,KC as ToggleButtonGroup,CC as Toolbar,AC as ToolbarShowcase,DC as Tooltip,PC as TreeBranch,YC as TreeViewShowcase,jt as Typography,zC as URLTextField,zy as VStack,iw as WarningTag,cB as WarningToggleButtonGroup,ky as WrapStack,kA as chartGeometry,nM as componentDocsIndexUrl,iM as componentDocsUrl,qA as default,rM as docsSlug,yt as ghostBlockSx,JB as hasExample,OA as renderColorSystem,OA as renderColourSystem,jA as renderComponentDoc,SM as renderFoundations,xt as useGhost,cz as useOmniDesign,_k as useStepperContext,gb as useTabsContext};
20
20
  //# sourceMappingURL=index.esm.js.map